/* REOFFICE Dispo – Gestaltung (CI: Grün #40775E, Anthrazit #33383B) */
:root{
  color-scheme:light dark;
  --ink:#33383B; --ink-soft:#5C6569; --ink-faint:#8A9397;
  --accent:#40775E; --accent-deep:#2C5643; --accent-on:#FFFFFF;
  --tint:#EBF2EE;
  --bg:#F5F7F5; --surface:#FFFFFF; --surface-2:#FAFBFA;
  --line:#DCE3DF; --line-strong:#BFC9C4;
  --warn:#8E5C1C; --warn-bg:#FAF0DF; --warn-line:#E3CDA2;
  --crit:#9B3A2C; --crit-bg:#FAE9E6; --crit-line:#E7BDB4;
  --ok:#40775E;
  --t-uebersiedlung:#40775E; --t-transport:#3E6480; --t-delogierung:#8A5A3B;
  --t-montage:#65578A; --t-entsorgung:#66733F; --t-reklamation:#9B3A2C;
  --tile-personal:#33383B; --tile-personal-fg:#FFFFFF;
  --tile-fuhrpark:#5A6F80; --tile-fuhrpark-fg:#FFFFFF;
  --tile-geraet:#C9D0CC; --tile-geraet-fg:#33383B;
  --tile-marker:#E4E8E6; --tile-marker-fg:#33383B;
  --tile-face:#F1F3F2;
  --radius:6px;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --display:"Archivo","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E5EAE7; --ink-soft:#A4AEA9; --ink-faint:#76817B;
    --accent:#71AC8F; --accent-deep:#8FC6AB; --accent-on:#14211B;
    --tint:#22302A;
    --bg:#171B1C; --surface:#212628; --surface-2:#1B2021;
    --line:#323A3C; --line-strong:#465050;
    --warn:#D9A55F; --warn-bg:#2E2517; --warn-line:#5B4826;
    --crit:#E08B79; --crit-bg:#341F1B; --crit-line:#5E362E;
    --ok:#71AC8F;
    --t-uebersiedlung:#71AC8F; --t-transport:#7BA3C2; --t-delogierung:#C3936B;
    --t-montage:#A093C7; --t-entsorgung:#A3B173; --t-reklamation:#E08B79;
    --tile-personal:#D6DCD8; --tile-personal-fg:#171B1C;
    --tile-fuhrpark:#7E97A9; --tile-fuhrpark-fg:#14211B;
    --tile-geraet:#4A5457; --tile-geraet-fg:#E5EAE7;
    --tile-marker:#3A4245; --tile-marker-fg:#E5EAE7;
    --tile-face:#2B3234;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
input,select,textarea{border:1px solid var(--line); border-radius:4px; background:var(--surface); padding:7px 9px; font-size:14px; min-height:38px; max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
[hidden]{display:none!important}

.wrap{max-width:1600px; margin:0 auto; padding:14px 16px 48px}
.btn{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:7px 13px; cursor:pointer; font-size:13.5px; font-weight:500; min-height:38px}
.btn:hover{border-color:var(--line-strong); background:var(--surface-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.btn.danger{color:var(--crit); border-color:var(--crit-line)}
.btn.small{padding:4px 10px; font-size:12.5px; min-height:32px}
.btn.big{min-height:46px; font-size:15px; font-weight:600}
.err{background:var(--crit-bg); border:1px solid var(--crit-line); color:var(--crit); border-radius:4px; padding:8px 10px; font-size:13px}

/* Anmeldung */
.login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-box{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px 24px; display:flex; flex-direction:column; gap:14px}
.login-box label{display:flex; flex-direction:column; gap:5px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.login-box input{font-size:16px; min-height:44px; text-transform:none; letter-spacing:0}

/* Kopf */
.top{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:14px}
.brand{display:flex; align-items:center; gap:11px}
.dot{width:12px; height:12px; border-radius:50%; background:var(--accent); flex:none}
.brand h1{font-size:20px; font-weight:700}
.brand .sub{font-size:12px; color:var(--ink-faint); letter-spacing:.09em; text-transform:uppercase; font-weight:500; margin-top:1px}
.right{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sync{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-faint); font-family:var(--mono)}
.sync i{width:7px; height:7px; border-radius:50%; background:var(--ink-faint); display:block; flex:none}
.sync.live i{background:var(--ok)}
.sync.local i{background:var(--warn)}
.sync.err i{background:var(--crit)}
.tabs{display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.tabs button{background:none; border:none; padding:8px 15px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink-soft); min-height:38px}
.tabs button[aria-selected="true"]{background:var(--accent); color:var(--accent-on)}
.usermenu{position:relative}
.menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:20; min-width:180px; display:flex; flex-direction:column}
.menu button{background:none; border:none; text-align:left; padding:10px 14px; cursor:pointer; font-size:13.5px}
.menu button:hover{background:var(--tint)}

.banner{background:var(--tint); border:1px solid var(--accent); color:var(--accent-deep); border-radius:var(--radius); padding:10px 13px; font-size:13.5px; margin-bottom:14px; display:flex; justify-content:space-between; gap:12px; align-items:center}
.banner.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}
.banner button{background:none; border:1px solid currentColor; border-radius:4px; color:inherit; padding:4px 10px; cursor:pointer; font-size:12.5px}

/* KPI */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 13px}
.kpi .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.kpi .val{font-family:var(--display); font-size:24px; font-weight:700; line-height:1.15; margin-top:3px; font-variant-numeric:tabular-nums}
.kpi .note{font-size:11.5px; color:var(--ink-soft); margin-top:1px}
.kpi.alert{border-color:var(--crit-line); background:var(--crit-bg)}
.kpi.alert .val,.kpi.alert .lbl,.kpi.alert .note{color:var(--crit)}
.kpi.warn{border-color:var(--warn-line); background:var(--warn-bg)}
.kpi.warn .val,.kpi.warn .lbl,.kpi.warn .note{color:var(--warn)}
@media(max-width:720px){.kpis{grid-template-columns:repeat(2,1fr)}}

.weekbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:12px}
.nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.kw{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-soft); min-width:200px; text-align:center}
.legend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; color:var(--ink-soft)}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:9px; height:9px; border-radius:2px; display:block}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px}
.panel > header{padding:10px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.panel h2{font-size:13px; font-weight:600; letter-spacing:.02em}
.count{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:1px 8px; margin-left:auto}

/* Ressourcen-Dock */
.dock header input{min-height:34px; padding:5px 9px; font-size:13px; width:200px}
.dock header .btn{margin-left:auto}
.selinfo{font-size:12.5px; background:var(--tint); border:1px solid var(--accent); color:var(--accent-deep); border-radius:4px; padding:5px 10px; font-weight:600}
.pal{padding:12px 14px; display:flex; flex-wrap:wrap; gap:18px 28px}
.pal .grp h3{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:8px; font-family:var(--sans); font-weight:600}
.tiles{display:flex; flex-wrap:wrap; gap:8px}

/* Kachel wie in Vanillaplan: Bild oben, Kürzel unten */
.tile{display:flex; flex-direction:column; align-items:stretch; width:72px; height:82px; border-radius:6px; border:2px solid transparent; padding:0; cursor:grab; user-select:none; background:var(--tile-marker); color:var(--tile-marker-fg); overflow:hidden; text-align:center; position:relative}
.tile.personal{background:var(--tile-personal); color:var(--tile-personal-fg)}
.tile.fuhrpark{background:var(--tile-fuhrpark); color:var(--tile-fuhrpark-fg)}
.tile.geraet{background:var(--tile-geraet); color:var(--tile-geraet-fg)}
.tile.extern{border-style:dashed; border-color:rgba(0,0,0,.35)}
.tile .tv{flex:1; display:flex; align-items:center; justify-content:center; background:var(--tile-face); font-size:30px; line-height:1; overflow:hidden}
.tile .tv img{width:100%; height:100%; object-fit:cover; display:block}
.tile .tv .ini{font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink-soft)}
.tile .tl{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.02em; padding:3px 3px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2}
.tile.sel{border-color:var(--accent); box-shadow:0 0 0 3px var(--tint)}
.tile:hover{filter:brightness(1.04)}
.tile.conf{border-color:var(--crit)}
.tile.inactive{opacity:.45}

/* Projektansicht */
.boardwrap{overflow-x:auto}
.pboard{min-width:1040px; display:grid; grid-template-columns:250px repeat(6, minmax(126px,1fr))}
.pboard > *{border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.pboard > *:nth-child(7n+7){border-right:none}
.hcell{background:var(--surface-2); padding:9px 12px; position:sticky; top:0; z-index:3}
.hcell .d{font-family:var(--display); font-size:13.5px; font-weight:600}
.hcell .dt{font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.hcell.today{background:var(--tint)}
.hcell.today .d{color:var(--accent-deep)}
.hcell.corner{z-index:4}
.hcell.corner .d{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em}
.rcell{background:var(--surface-2); padding:10px 12px; position:sticky; left:0; z-index:2; cursor:pointer; border-left:4px solid var(--tt,var(--accent))}
.rcell:hover{background:var(--tint)}
.rcell.open{background:var(--tint)}
.rcell .rn{font-weight:600; font-size:13.5px; line-height:1.3; display:flex; gap:8px; align-items:baseline; justify-content:space-between}
.rcell .rn .bed{font-family:var(--mono); font-size:12px; color:var(--ink-soft); font-weight:500; flex:none}
.rcell .rm{font-size:11.5px; color:var(--ink-faint); margin-top:2px; overflow-wrap:anywhere}
.rcell .rt{font-size:10.5px; letter-spacing:.04em; color:var(--tt,var(--accent)); font-weight:600; margin-top:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rcell .fixb{font-family:var(--mono); font-size:9.5px; color:var(--accent-on); background:var(--accent); border-radius:2px; padding:0 4px}
.cell{background:var(--surface); min-height:104px; padding:7px; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; cursor:pointer}
.cell:hover{background:var(--surface-2)}
.cell .tile{width:58px; height:66px; cursor:pointer}
.cell .tile .tv{font-size:24px}
.cell .tile .tl{font-size:10px}
.cell.drop{background:var(--tint); box-shadow:inset 0 0 0 2px var(--accent)}
.cell.termin{background:var(--tint)}
.cell.termin .tl2{width:100%; font-family:var(--mono); font-size:10.5px; color:var(--accent-deep); font-weight:600}
.cell.crit{box-shadow:inset 0 0 0 2px var(--crit)}
.cell.warnc{box-shadow:inset 0 0 0 2px var(--warn-line)}
.cell .sum{width:100%; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-top:auto}
.cell .sum.bad{color:var(--crit)}
.pool-empty{padding:28px 14px; color:var(--ink-faint); font-size:13.5px; text-align:center}

/* Beginnzeit je Tag im Feld */
.cell .bg{width:100%; display:flex}
.cell .bg input{width:100%; min-height:30px; padding:3px 8px; font-family:var(--mono); font-size:12px; background:var(--surface-2)}
.cell .bg input:placeholder-shown{color:var(--ink-faint)}
.tile .seq{position:absolute; top:2px; right:2px; font-family:var(--mono); font-size:9px; font-weight:600; background:var(--accent); color:var(--accent-on); border-radius:3px; padding:0 3px; line-height:1.4}
.folge{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin:-2px 0 10px 130px; line-height:1.6}
.note.folge{background:var(--tint); border-color:var(--accent); color:var(--ink); font-family:var(--sans)}

/* Umschalter Tag / Woche / Monat */
.modes{margin-right:4px}
.modes button{padding:7px 12px}

/* Tagesansicht: Aufträge untereinander, eine breite Spalte */
.pboard.tag{min-width:0; grid-template-columns:280px minmax(0,1fr)}
.pboard.tag > *:nth-child(7n+7){border-right:1px solid var(--line)}
.pboard.tag > *:nth-child(2n){border-right:none}
.pboard.tag .cell{min-height:118px; padding:10px; gap:8px}
.pboard.tag .cell .tile{width:72px; height:82px}
.pboard.tag .cell .tile .tv{font-size:30px}
.pboard.tag .cell .tile .tl{font-size:11px}
.pboard.tag .cell .bg{width:auto; flex:0 0 100%; max-width:220px}
.pboard.tag .grph{background:var(--bg); padding:7px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
@media(max-width:700px){.pboard.tag{grid-template-columns:minmax(0,1fr)} .pboard.tag .hcell{display:none} .pboard.tag .rcell{position:static; border-bottom:none} .pboard.tag > *:nth-child(2n){border-right:none}}

/* Monatsansicht */
.pboard.monat{min-width:0; grid-template-columns:repeat(7,minmax(0,1fr))}
.pboard.monat > *:nth-child(7n+7){border-right:none}
.pboard.monat .hcell{position:static}
.mday{background:var(--surface); min-height:112px; padding:6px; display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.mday.other{background:var(--surface-2); opacity:.55}
.mday.so{background:var(--surface-2)}
.mday.today{background:var(--tint)}
.mday .num{background:none; border:none; font-family:var(--display); font-weight:600; font-size:13px; cursor:pointer; padding:2px 4px; border-radius:3px; color:var(--ink-soft)}
.mday .num:hover{background:var(--accent); color:var(--accent-on)}
.mday.today .num{color:var(--accent-deep)}
.mchip{width:100%; text-align:left; border:1px solid var(--line); border-left:3px solid var(--tt,var(--accent)); border-radius:3px; background:var(--surface-2); padding:3px 6px; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mchip:hover{border-color:var(--line-strong)}
.mchip.termin{border-style:dashed; font-weight:500; color:var(--ink-soft)}
.mchip.crit{box-shadow:inset 0 0 0 1px var(--crit)}

/* Ressourcenansicht */
.rboard{min-width:1040px; display:grid; grid-template-columns:200px repeat(6, minmax(126px,1fr))}
.rboard > *{border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.rboard > *:nth-child(7n+7){border-right:none}
.rboard .rcell{cursor:default; border-left:none; display:flex; gap:10px; align-items:center}
.rboard .rcell:hover{background:var(--surface-2)}
.rboard .rcell .tile{width:44px; height:50px; flex:none; cursor:default}
.rboard .rcell .tile .tv{font-size:20px}
.rboard .rcell .tile .tl{display:none}
.rboard .grph{grid-column:1 / -1; background:var(--bg); padding:5px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.cell.off{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 6px,var(--surface-2) 6px,var(--surface-2) 12px); cursor:default}
.cell .abs{font-size:10.5px; color:var(--ink-faint); font-weight:600; width:100%; text-align:center; margin:auto}
.chip{border:1px solid var(--line); border-left:3px solid var(--tt,var(--accent)); border-radius:3px; background:var(--surface-2); padding:4px 7px; font-size:11.5px; font-weight:600; cursor:pointer; text-align:left; max-width:100%; overflow-wrap:anywhere}
.chip:hover{border-color:var(--line-strong)}
.chip small{display:block; font-family:var(--mono); font-weight:500; font-size:10px; color:var(--ink-faint)}

/* Detail */
.detail .body{padding:14px}
.dgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px 22px}
.f .fl{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.f .fv{font-size:13.5px; margin-top:2px; overflow-wrap:anywhere; white-space:pre-line}
.f .fv.mono{font-family:var(--mono); font-size:12.5px}
.f.intern .fv{color:var(--warn)}
.sec{margin-top:16px; padding-top:13px; border-top:1px solid var(--line)}
.sec h3{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:9px}
.issues{display:flex; flex-direction:column; gap:6px}
.issue{font-size:12.5px; padding:7px 10px; border-radius:4px; background:var(--crit-bg); border:1px solid var(--crit-line); color:var(--crit)}
.issue.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}
.issue.ok{background:var(--tint); border-color:var(--line); color:var(--accent-deep)}
.acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.hint{color:var(--ink-faint); font-size:13px; padding:16px 14px}
.dayline{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; font-size:12.5px}
.dayline .dl{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); min-width:120px}
.dayline .tile{width:52px; height:58px; cursor:default}
.dayline .tile .tv{font-size:20px}
.dayline .tile .tl{font-size:9.5px}

.ls{margin-top:16px; padding-top:13px; border-top:1px solid var(--line)}
.ls h3{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:9px}
.ls textarea{width:100%; min-height:190px; font-family:var(--mono); font-size:12.5px; line-height:1.6; background:var(--surface-2); resize:vertical}
.ls .meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-bottom:9px}
.ls .meta b{color:var(--ink-soft); font-weight:600}
.zlog{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-top:10px; line-height:1.65}

/* Formular */
.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px 16px}
.form label{display:flex; flex-direction:column; gap:3px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.form label.wide{grid-column:1 / -1}
.form input,.form select,.form textarea{width:100%; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink)}
.form textarea{min-height:72px; resize:vertical}
.form .chk{flex-direction:row; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:500; color:var(--ink)}
.form .chk input{width:20px; height:20px; min-height:0}

/* Stammdaten und Benutzer */
.stamm{display:flex; flex-direction:column; gap:14px}
.stamm .panel{margin:0}
.stamm table{width:100%; border-collapse:collapse; font-size:13.5px}
.stamm th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
.stamm td{padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.stamm td input,.stamm td select{width:100%; min-height:34px; padding:5px 8px}
.stamm td input.short{max-width:96px}
.stamm td input.emoji{max-width:64px; text-align:center; font-size:18px}
.stamm td.tl{width:110px}
.stamm td.pic{width:70px}
.stamm td.pic .tile{width:52px; height:58px; cursor:default}
.stamm td.pic .tile .tl{display:none}
.stamm .foot{display:flex; gap:8px; padding:10px 14px; flex-wrap:wrap; align-items:center}
.stamm .note{font-size:12.5px; color:var(--ink-soft); padding:8px 14px 0}
.tw{overflow-x:auto}
.filebtn{position:relative; overflow:hidden; display:inline-block}
.filebtn input{position:absolute; inset:0; opacity:0; cursor:pointer}

/* Monteur */
.mont{max-width:640px; margin:0 auto}
.who{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.who button{border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:9px 15px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink-soft); min-height:44px}
.who button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.daybar{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; margin-bottom:12px}
.daybar .dl{font-family:var(--display); font-size:16px; font-weight:600}
.daybar .ds{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint)}
.daybar button{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); min-width:46px; min-height:46px; cursor:pointer; font-size:18px}
.tagsum{display:flex; gap:14px; flex-wrap:wrap; background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); padding:10px 13px; margin-bottom:14px}
.tagsum div{flex:1 1 auto; min-width:100px}
.tagsum .l{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.tagsum .v{font-family:var(--display); font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent-deep)}
.job{background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--tt,var(--accent)); border-radius:var(--radius); margin-bottom:14px; overflow:hidden}
.job > header{padding:14px 16px; border-bottom:1px solid var(--line)}
.job .jno{font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.job h3{font-size:18px; font-weight:700; margin-top:2px; line-height:1.25}
.job .jart{font-size:13px; font-weight:600; color:var(--tt,var(--accent)); margin-top:3px}
.job .jmeta{font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:6px; display:flex; gap:12px; flex-wrap:wrap}
.jbody{padding:14px 16px; display:flex; flex-direction:column; gap:12px}
.addr{display:flex; gap:10px; align-items:flex-start}
.addr .tag{font-family:var(--mono); font-size:10px; font-weight:600; color:var(--accent-on); background:var(--accent); border-radius:3px; padding:2px 5px; flex:none; margin-top:3px}
.addr .tag.b{background:var(--ink-soft)}
.addr .txt{font-size:14.5px; overflow-wrap:anywhere}
.job a{color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid currentColor}
.note{border-radius:4px; padding:9px 11px; font-size:13.5px; background:var(--surface-2); border:1px solid var(--line); white-space:pre-line}
.note .nl{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600; margin-bottom:3px}
.note.int{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}
.note.int .nl{color:var(--warn)}
.crew{display:flex; flex-wrap:wrap; gap:8px}
.crew .tile{width:60px; height:68px; cursor:default}
.crew .tile .tv{font-size:24px}
.crew .tile .tl{font-size:10px}
.timer{border-top:1px solid var(--line); padding:14px 16px; background:var(--surface-2)}
.clock{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:11px}
.clock .big{font-family:var(--mono); font-size:36px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1}
.clock .st{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; border-radius:20px; padding:2px 9px}
.st.offen{background:var(--bg); border:1px solid var(--line); color:var(--ink-faint)}
.st.laeuft{background:var(--tint); border:1px solid var(--accent); color:var(--accent-deep)}
.st.pause{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn)}
.st.fertig{background:var(--accent); border:1px solid var(--accent); color:var(--accent-on)}
.clock .dec{font-family:var(--mono); font-size:12px; color:var(--ink-faint)}
.tbtns{display:flex; gap:8px; flex-wrap:wrap}
.tbtns button{flex:1 1 140px; min-height:50px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:15px; font-weight:600}
.tbtns button.go{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.tbtns button.stop{background:var(--crit-bg); border-color:var(--crit-line); color:var(--crit)}
.zform{margin-top:11px; display:flex; flex-direction:column; gap:8px}
.zform textarea{width:100%; min-height:70px; resize:vertical; font-size:15px}
.zform label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.conf{background:var(--tint); border:1px solid var(--accent); color:var(--accent-deep); border-radius:4px; padding:10px 12px; font-size:13px; font-weight:600}
.leer{background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:30px 18px; text-align:center; color:var(--ink-faint); font-size:14px}
.upcoming{margin-top:20px}
.upcoming h3{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:8px}
.upcoming button{display:flex; width:100%; justify-content:space-between; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:6px; cursor:pointer; text-align:left; min-height:46px; align-items:center}
.upcoming button b{font-weight:600}
.upcoming button small{font-family:var(--mono); color:var(--ink-faint); white-space:nowrap}

dialog{border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:0; max-width:420px; width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.35)}
.dlg{padding:22px; display:flex; flex-direction:column; gap:12px}
.dlg h2{font-size:17px}
.dlg label{display:flex; flex-direction:column; gap:4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.dlg input{text-transform:none; letter-spacing:0; font-size:15px}

.foot{margin-top:26px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; font-family:var(--mono)}

@media(max-width:700px){
  .wrap{padding:10px 10px 40px}
  .top{margin-bottom:10px}
  .brand .sub{display:none}
  .tabs button{padding:8px 11px; font-size:13px}
  .sync{display:none}
}