/* Layout: App-Rahmen mit Kopfzeile, Reiter (Desktop oben, Handy unten), zweispaltige Arbeitsflächen; Handy-Vorschau und Alarmmonitor als Überlagerung */
:root{
  --bg:#F2F4F7; --surface:#FFFFFF; --surface-2:#EAEEF3; --line:#D8DEE6;
  --fg:#18202C; --muted:#5A6474; --accent:#C81E2B; --accent-ink:#FFFFFF;
  --info:#2C68AA; --info-bg:#E5EEF8; --warn:#B65F00; --warn-bg:#FCEEDB;
  --crit:#C81E2B; --crit-bg:#FBE4E5; --ok:#1C7F46; --ok-bg:#E0F2E7; --later:#9A6A0B; --later-bg:#F8F0D9;
  --shadow:0 1px 2px rgba(20,30,45,.06),0 4px 16px rgba(20,30,45,.06);
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11151B; --surface:#191F28; --surface-2:#222A35; --line:#303947;
  --fg:#E7EBF1; --muted:#9AA4B3; --accent:#EE4855; --accent-ink:#FFFFFF;
  --info:#7EB1EC; --info-bg:#1B2B3E; --warn:#F2A43C; --warn-bg:#382811;
  --crit:#EE4855; --crit-bg:#3B191D; --ok:#4FC283; --ok-bg:#163222; --later:#E2B54F; --later-bg:#352B12;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11151B; --surface:#191F28; --surface-2:#222A35; --line:#303947;
  --fg:#E7EBF1; --muted:#9AA4B3; --accent:#EE4855; --accent-ink:#FFFFFF;
  --info:#7EB1EC; --info-bg:#1B2B3E; --warn:#F2A43C; --warn-bg:#382811;
  --crit:#EE4855; --crit-bg:#3B191D; --ok:#4FC283; --ok-bg:#163222; --later:#E2B54F; --later-bg:#352B12;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;margin:0;text-wrap:balance;line-height:1.15}
h2{font-size:1.55rem} h3{font-size:1.15rem}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* Kopf */
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand-mark{width:36px;height:36px;border-radius:9px;background:var(--accent);display:grid;place-items:center;flex:none}
.brand-name{font-family:var(--f-display);font-size:1.6rem;font-weight:700;line-height:1}
.brand-sub{font-size:.75rem;color:var(--muted);line-height:1.2}
.wehr{display:flex;flex-direction:column;gap:2px;min-width:0}
.wehr select{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;max-width:100%;font-weight:600}
.demo{font-size:.72rem;background:var(--later-bg);color:var(--later);border-radius:999px;padding:3px 10px;font-weight:600;white-space:nowrap}

/* Navigation */
.nav{background:var(--surface);border-bottom:1px solid var(--line)}
.nav-in{display:flex;gap:4px}
.nav button{background:none;border:0;padding:12px 14px;display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;position:relative}
.nav button[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
.nav svg{width:20px;height:20px;flex:none}
.nav .dot{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:.7rem;display:inline-grid;place-items:center;padding:0 5px;font-family:var(--f-mono)}
main{padding-block:24px 48px}
@media (max-width:719px){
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:20;border-top:1px solid var(--line);border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav-in{display:grid;grid-template-columns:repeat(var(--tabs,5),1fr);gap:0}
  .nav button{flex-direction:column;gap:2px;padding:8px 2px 9px;font-size:.68rem;border-bottom:0;border-top:3px solid transparent}
  .nav button[aria-current="page"]{border-top-color:var(--accent)}
  .nav .dot{position:absolute;top:4px;left:calc(50% + 6px)}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  h2{font-size:1.4rem}
}

/* Bausteine */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.stack{display:flex;flex-direction:column;gap:16px}
.grid2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
.auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
.field{display:flex;flex-direction:column;gap:6px}
.field input,.field textarea,.field select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%}
.field textarea{min-height:76px;resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--surface-2)}
.btn-sm{padding:5px 10px;font-size:.85rem}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.07);background:var(--accent)}
.btn-ghost{border-color:transparent;background:none;color:var(--muted)}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:.88rem;font-weight:500}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip .n{font-family:var(--f-mono);font-size:.78rem;opacity:.7;margin-left:4px}
.q{display:inline-block;font-family:var(--f-mono);font-size:.7rem;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.q.miss{color:var(--crit);border-color:var(--crit);background:var(--crit-bg)}
.q.okq{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.pill.t-info{background:var(--info-bg);color:var(--info)}
.pill.t-warn{background:var(--warn-bg);color:var(--warn)}
.pill.t-crit{background:var(--crit-bg);color:var(--crit)}
.note{font-size:.82rem;color:var(--muted);line-height:1.4;margin:0}
.banner{border-radius:10px;padding:10px 14px;font-weight:600;font-size:.92rem}
.banner.ok{background:var(--ok-bg);color:var(--ok)}
.banner.warn{background:var(--later-bg);color:var(--later)}
.banner.crit{background:var(--crit-bg);color:var(--crit)}

/* Alarmart, Szenarien, Bedarf */
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.types{grid-template-columns:minmax(0,1fr)}}
.type{text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 12px 12px 14px;display:flex;flex-direction:column;gap:4px}
.type b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.01em}
.type small{color:var(--muted);line-height:1.35}
.type .mode{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.type.t-info .mode{color:var(--info)} .type.t-warn .mode{color:var(--warn)} .type.t-crit .mode{color:var(--crit)}
.type[aria-checked="true"].t-info{border-color:var(--info);background:var(--info-bg)}
.type[aria-checked="true"].t-warn{border-color:var(--warn);background:var(--warn-bg)}
.type[aria-checked="true"].t-crit{border-color:var(--crit);background:var(--crit-bg)}
.scen{display:flex;gap:8px;flex-wrap:wrap}
.scen button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px;font-size:.88rem;display:flex;align-items:center;gap:6px}
.scen button[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.scen i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:520px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.step{display:flex;flex-direction:column;gap:4px}
.step .ctl{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.step .ctl button{border:0;background:var(--surface-2);width:34px;height:34px;font-weight:700;flex:none}
.step .ctl span{flex:1;text-align:center;font-family:var(--f-mono);font-weight:600}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex-wrap:wrap}
.seg button{flex:1 1 140px;border:0;background:var(--surface);padding:8px 10px;font-size:.88rem;font-weight:600;color:var(--muted);text-align:left}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.inline-sel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 6px}

/* Senden */
.send{position:sticky;top:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.92rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;min-width:0}
.big-send{width:100%;justify-content:center;font-family:var(--f-display);font-size:1.3rem;letter-spacing:.03em;padding:14px;border-radius:10px;border:0;color:#fff}
.big-send.t-info{background:var(--info)} .big-send.t-warn{background:var(--warn)} .big-send.t-crit{background:var(--crit)}
:root[data-theme="dark"] .big-send.t-info,:root[data-theme="dark"] .big-send.t-warn{color:#111}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .big-send.t-info,:root:not([data-theme="light"]) .big-send.t-warn{color:#111}}
.confirm{border:1.5px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.ready{display:flex;flex-direction:column;gap:6px;border-radius:10px;padding:12px;background:var(--surface-2)}
.ready .num{font-family:var(--f-mono);font-size:1.5rem;font-weight:600}

/* Lage */
.lage-title{display:flex;flex-direction:column;gap:6px;min-width:0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.stat{border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.stat b{display:block;font-family:var(--f-mono);font-size:1.6rem;line-height:1.1}
.stat span{font-size:.8rem;color:var(--muted);font-weight:600}
.stat.ok{background:var(--ok-bg)} .stat.ok b{color:var(--ok)}
.stat.later{background:var(--later-bg)} .stat.later b{color:var(--later)}
.stat.no{background:var(--crit-bg)} .stat.no b{color:var(--crit)}
@media (max-width:480px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-2);margin-top:14px}
.bar i{display:block;height:100%;transition:width .4s}
.staerke{display:flex;align-items:baseline;gap:14px 24px;flex-wrap:wrap}
.staerke .num{font-family:var(--f-mono);font-size:2.2rem;font-weight:600;letter-spacing:-.02em}
.staerke .num em{font-style:normal;color:var(--ok)}
.list{display:flex;flex-direction:column}
.person{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.person:first-child{border-top:0}
.av{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:600;font-size:.8rem;flex:none;color:var(--muted)}
.person .who{flex:1;min-width:140px}
.person .who b{font-weight:600}
.person .quals{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px;align-items:center}
.person .right{text-align:right;font-size:.85rem;flex:none;margin-left:auto}
.person.here .av{background:var(--ok-bg);color:var(--ok)}
.st{font-weight:700;font-size:.78rem}
.st.komme{color:var(--ok)} .st.spaeter{color:var(--later)} .st.nein{color:var(--crit)} .st.pending,.st.storno{color:var(--muted)}
.chans{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;animation:p 1.6s infinite}
@keyframes p{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.cd{font-size:1.15rem;font-weight:600;color:var(--fg)}
.cd.soon{color:var(--ok)} .cd.due{color:var(--later)}
.cdbar{height:4px;width:90px;background:var(--surface-2);border-radius:2px;margin:4px 0 0 auto;overflow:hidden}
.cdbar i{display:block;height:100%;width:0;background:var(--ok);transition:width 1s linear}
.btn-da{margin-top:6px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:600;color:var(--muted)}
.btn-da:hover{color:var(--ok);border-color:var(--ok)}
.arr-wrap{overflow-x:auto}
.arr{display:grid;grid-template-columns:repeat(5,minmax(76px,1fr));gap:8px;min-width:420px}
.arr-col{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:4px}
.arr-col.hit{border-color:var(--ok);background:var(--ok-bg)}
.arr-num{font-size:1.15rem;font-weight:600}
.arr-q{display:flex;gap:4px;flex-wrap:wrap}

/* Fahrzeuge */
.fms{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:1.05rem;flex:none}
.fms.ok{background:var(--ok-bg);color:var(--ok)} .fms.warn{background:var(--warn-bg);color:var(--warn)}
.fms.crit{background:var(--crit-bg);color:var(--crit)} .fms.off{background:var(--surface-2);color:var(--muted)}
.veh{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.veh-head{display:flex;gap:10px;align-items:center}
.veh-head .t{flex:1;min-width:0}
.vstat{display:flex;gap:6px;flex-wrap:wrap}
.vstat button{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:4px 8px;font-size:.8rem;font-weight:600;display:flex;gap:6px;align-items:center}
.vstat button b{font-family:var(--f-mono)}
.vstat button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.seat{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 4px 3px 8px;min-width:0}
.seat.empty-need{border-color:var(--crit);border-style:dashed}
.seat code{font-family:var(--f-mono);font-size:.72rem;font-weight:600;color:var(--muted);width:34px;flex:none}
.seat select{flex:1;min-width:0;border:0;background:transparent;padding:4px 0;font-size:.85rem}

/* Termine, Verlauf, Wehr */
.item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:0}
.item:last-child{padding-bottom:0}
.datebox{width:58px;flex:none;text-align:center;border-radius:8px;border:1px solid var(--line);overflow:hidden}
.datebox .m{font-size:.66rem;font-weight:700;letter-spacing:.08em;background:var(--surface-2);padding:2px 0;color:var(--muted);text-transform:uppercase}
.datebox .d{font-family:var(--f-display);font-size:1.5rem;font-weight:700;line-height:1.3}
.item .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.item .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rsvp{display:flex;gap:12px;font-size:.88rem;flex-wrap:wrap}
.rsvp .y{color:var(--ok);font-weight:600} .rsvp .n{color:var(--crit);font-weight:600}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.formgrid .full{grid-column:1/-1}
@media (max-width:520px){.formgrid{grid-template-columns:minmax(0,1fr)}}
.hist{width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:14px 4px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hist:first-child{border-top:0}
.hist:hover{background:var(--surface-2)}
.hist .body{flex:1;min-width:160px}
.mini{display:flex;gap:10px;font-family:var(--f-mono);font-size:.82rem}
.mini .k{color:var(--ok)} .mini .s{color:var(--later)} .mini .n{color:var(--crit)}
.away{opacity:.6}
.avsel{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600}
.avsel.ja{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.avsel.bedingt{background:var(--later-bg);color:var(--later);border-color:transparent}
.avsel.nein{background:var(--surface-2);color:var(--muted)}
.chtog{display:flex;gap:4px}
.chtog button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:2px 7px;font-size:.72rem;font-weight:600;color:var(--muted)}
.chtog button[aria-pressed="true"]{background:var(--info-bg);color:var(--info);border-color:var(--info)}
.search{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;max-width:320px}

/* Handy-Vorschau (fester heller Bildschirm, wie ein echtes Telefon) */
#overlay{position:fixed;inset:0;z-index:50;background:rgba(10,14,20,.55);display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow:auto}
.phone{width:100%;max-width:360px;border-radius:30px;background:#0E1218;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.screen{border-radius:22px;overflow:hidden;background:#fff;color:#18202C;display:flex;flex-direction:column}
.ps-bar{display:flex;justify-content:space-between;font-size:.72rem;padding:8px 16px;font-family:var(--f-mono);color:#fff}
.ps-top{padding:4px 18px 18px;color:#fff;display:flex;flex-direction:column;gap:6px}
.screen.t-info .ps-bar,.screen.t-info .ps-top{background:#2C68AA}
.screen.t-warn .ps-bar,.screen.t-warn .ps-top{background:#B65F00}
.screen.t-crit .ps-bar,.screen.t-crit .ps-top{background:#C81E2B}
.ps-kind{font-family:var(--f-display);font-size:2rem;font-weight:700;letter-spacing:.04em;line-height:1}
.ps-stripe{height:14px;background:repeating-linear-gradient(-45deg,#FFD24A 0 12px,#18202C 12px 24px)}
.ps-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.ps-body h3{font-size:1.35rem;color:#18202C}
.ps-meta{font-size:.85rem;color:#5A6474}
.ps-btns{display:grid;gap:8px;padding:0 18px 14px}
.ps-btn{border:0;border-radius:12px;padding:13px;font-weight:700;font-size:1rem;color:#fff}
.ps-btn.k{background:#1C7F46} .ps-btn.s{background:#9A6A0B} .ps-btn.n{background:#E7EAEF;color:#18202C}
.eta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.eta button{border:1.5px solid #1C7F46;background:#fff;color:#1C7F46;border-radius:10px;padding:9px 0;font-weight:700}
.ps-veh{margin:0 18px 14px;border:1px solid #E1E5EB;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.ps-veh .vr{display:flex;gap:10px;align-items:center;font-size:.88rem}
.ps-veh .fms{width:28px;height:28px;font-size:.95rem}
.ps-veh .fms.ok{background:#E0F2E7;color:#1C7F46} .ps-veh .fms.warn{background:#FCEEDB;color:#B65F00} .ps-veh .fms.crit{background:#FBE4E5;color:#C81E2B} .ps-veh .fms.off{background:#EAEEF3;color:#5A6474}
.ps-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 18px 16px;border-top:1px solid #E7EAEF;gap:8px;flex-wrap:wrap}
.ps-foot button{border:1px solid #D8DEE6;background:#fff;color:#18202C;border-radius:8px;padding:7px 12px;font-weight:600;font-size:.85rem}
.ps-done{margin:0 18px 14px;border-radius:12px;background:#E0F2E7;color:#1C7F46;padding:12px;font-weight:600;text-align:center}
.lock{border-radius:22px;overflow:hidden;background:linear-gradient(170deg,#D7E6F6 0%,#EEF2F7 55%,#F6E6DC 100%);color:#18202C;display:flex;flex-direction:column;min-height:560px}
.lock-time{font-family:var(--f-display);font-size:4.2rem;font-weight:600;text-align:center;line-height:1;margin-top:48px}
.lock-date{text-align:center;font-size:.95rem;color:#3A4556;margin-bottom:28px}
.notif{margin:0 12px;background:rgba(255,255,255,.88);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 20px rgba(20,30,45,.12)}
.notif.t-crit{box-shadow:0 0 0 2px #C81E2B,0 6px 20px rgba(200,30,43,.25)}
.notif.t-warn{box-shadow:0 0 0 2px #B65F00,0 6px 20px rgba(182,95,0,.2)}
.n-head{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#5A6474;font-weight:600;letter-spacing:.04em}
.n-ico{width:18px;height:18px;border-radius:5px;background:#C81E2B;display:inline-block}
.n-crit{margin-left:auto;background:#C81E2B;color:#fff;border-radius:999px;padding:1px 7px;font-size:.66rem}
.n-text{font-size:.88rem;color:#3A4556}
.n-acts{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;margin-top:4px}
.n-acts button{border:0;border-radius:10px;padding:9px 4px;font-weight:700;font-size:.82rem;background:#E7EAEF;color:#18202C}
.n-acts button.k{background:#1C7F46;color:#fff}
.lock-hint{text-align:center;font-size:.8rem;color:#3A4556;margin:14px 16px auto}
.lockfoot{border-top:0;background:rgba(255,255,255,.6)}

/* Alarmmonitor */
#monitor{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.mon{display:flex;flex-direction:column;gap:16px;min-height:100%}
.mon-top{border-radius:14px;padding:18px 20px;color:#fff;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.mon-top.t-info{background:#2C68AA} .mon-top.t-warn{background:#B65F00} .mon-top.t-crit{background:#C81E2B}
.mon-top .t{flex:1 1 320px;min-width:0}
.mon-kind{font-family:var(--f-display);font-size:1.1rem;letter-spacing:.12em;opacity:.9}
.mon-top h1{font-size:clamp(1.8rem,4vw,3rem);color:#fff}
.mon-clock{text-align:right}
.mon-clock .el{font-family:var(--f-mono);font-size:clamp(2rem,5vw,3.4rem);font-weight:600;line-height:1}
.mon-btns{display:flex;gap:8px}
.mon-btns button{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);color:#fff;border-radius:8px;padding:7px 12px;font-weight:600}
.mon-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;flex:1}
@media (max-width:820px){.mon-body{grid-template-columns:minmax(0,1fr)}}
.mon-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.mon-row:first-of-type{border-top:0}
.mon-row .nm{flex:1;min-width:0;font-size:1.25rem;font-weight:600}
.mon-row .cd{font-size:1.6rem}
.mon-row .ok{color:var(--ok);font-weight:700;font-size:1.1rem}
.mon-veh{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.mon-veh:first-of-type{border-top:0}
.mon-veh .fms{width:52px;height:52px;font-size:1.7rem;border-radius:10px}
.mon-veh b{font-family:var(--f-display);font-size:1.5rem}
.mon-foot{display:flex;gap:12px 28px;flex-wrap:wrap;align-items:center;font-size:1.1rem}
.mon-foot .mono{font-size:1.5rem;font-weight:600}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:60;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
@media (max-width:719px){#toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}.bar i,.cdbar i{transition:none}}

/* ---- Ergänzungen der echten App ---- */
html,body{margin:0}
body{padding-top:env(safe-area-inset-top,0px)}
.center{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.auth{width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px}
.auth .brand{margin:0 0 4px}
.err{color:var(--crit);font-weight:600;font-size:.9rem;min-height:1.2em}
.spacer{flex:1}
.copy{display:flex;gap:6px;align-items:center;min-width:0}
.copy input{flex:1;min-width:0;font-family:var(--f-mono);font-size:.8rem;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.alarm-card{border-left:6px solid var(--line)}
.alarm-card.t-info{border-left-color:var(--info)} .alarm-card.t-warn{border-left-color:var(--warn)} .alarm-card.t-crit{border-left-color:var(--crit)}
.resp-btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.resp-btns button{border:1.5px solid var(--ok);background:var(--surface);color:var(--ok);border-radius:10px;padding:10px 0;font-weight:700}
.resp-btns button[aria-pressed="true"]{background:var(--ok);color:#fff}
.resp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.resp-row button{border:0;border-radius:10px;padding:11px;font-weight:700}
.resp-row .s{background:var(--later-bg);color:var(--later)} .resp-row .n{background:var(--surface-2);color:var(--fg)}
.resp-row button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor}
.mine{border-radius:10px;padding:10px 12px;font-weight:600}
.mine.komme{background:var(--ok-bg);color:var(--ok)} .mine.spaeter{background:var(--later-bg);color:var(--later)} .mine.nein{background:var(--surface-2);color:var(--muted)} .mine.storno{background:var(--info-bg);color:var(--info)}
.av3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.av3 button{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 4px;font-weight:700}
.av3 button[aria-pressed="true"].ja{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.av3 button[aria-pressed="true"].bedingt{background:var(--later-bg);border-color:var(--later);color:var(--later)}
.av3 button[aria-pressed="true"].nein{background:var(--surface-2);border-color:var(--muted);color:var(--fg)}
.toggle-row{display:flex;gap:8px;flex-wrap:wrap}
.toggle-row label{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-weight:600;font-size:.9rem}
.panel{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:12px}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{display:flex;gap:5px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:.85rem}
.offline{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:70;background:var(--later-bg);color:var(--later);border-radius:999px;padding:5px 14px;font-weight:600;font-size:.82rem}
.sel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:100%}

@media (max-width:719px){.brand-sub{display:none}.top-in{padding-block:10px}}