:root{
    --bg:#f3f4f6; --surface:#ffffff; --surface2:#eceef1;
    --ink:#191b1e; --ink2:#64707d; --ink3:#8a929c;
    --line:#d7dbe0; --shadow:0 1px 2px rgba(20,24,31,.1),0 8px 20px -14px rgba(20,24,31,.22);
    --accent:#d8392e; --accent-ink:#FFFFFF; --accent-press:#b7241b;
    --fw:#d8392e; --brk:#B8720F; --pol:#1E7E3C; --thw:#23539E; --son:#6E6862;
    /* Zusatz-Signaturfarben (theme-neutral, gelten in allen Themes) */
    --orange:#F5820E; --violett:#A25AE8; --tuerkis:#12B4C4;
    --good:#1E7A3C; --good-bg:#E1F0E4;
    --warn:#8A5F00; --warn-bg:#F7ECD0;
    --rail:0px;
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#17191c; --surface:#202228; --surface2:#2a2d34;
      --ink:#eceef1; --ink2:#9aa1ac; --ink3:#6f7681;
      --line:#343841; --shadow:0 1px 3px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.42);
      --accent:#d8392e; --accent-ink:#FFFFFF; --accent-press:#B72C26;
      --fw:#d8392e; --brk:#BE8A18; --pol:#33A866; --thw:#5D93E3; --son:#8A857E;
      --good:#4CAF6E; --good-bg:#22352A;
      --warn:#D9A83C; --warn-bg:#3A3120;
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#17191c; --surface:#202228; --surface2:#2a2d34;
    --ink:#eceef1; --ink2:#9aa1ac; --ink3:#6f7681;
    --line:#343841; --shadow:0 1px 3px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.42);
    --accent:#d8392e; --accent-ink:#FFFFFF; --accent-press:#B72C26;
    --fw:#d8392e; --brk:#BE8A18; --pol:#33A866; --thw:#5D93E3; --son:#8A857E;
    --good:#4CAF6E; --good-bg:#22352A;
    --warn:#D9A83C; --warn-bg:#3A3120;
    color-scheme:dark;
  }
  :root[data-theme="light"]{
    --bg:#f3f4f6; --surface:#ffffff; --surface2:#eceef1;
    --ink:#191b1e; --ink2:#64707d; --ink3:#8a929c;
    --line:#d7dbe0; --shadow:0 1px 2px rgba(20,24,31,.1),0 8px 20px -14px rgba(20,24,31,.22);
    --accent:#d8392e; --accent-ink:#FFFFFF; --accent-press:#b7241b;
    --fw:#d8392e; --brk:#B8720F; --pol:#1E7E3C; --thw:#23539E; --son:#6E6862;
    --good:#1E7A3C; --good-bg:#E1F0E4;
    --warn:#8A5F00; --warn-bg:#F7ECD0;
    color-scheme:light;
  }
  /* Der Einsatzmonitor ist bewusst immer dunkel – Wandschirm im ELW */
  .theme-dark{
    --bg:#17191c; --surface:#202228; --surface2:#2a2d34;
    --ink:#eceef1; --ink2:#9aa1ac; --ink3:#6f7681;
    --line:#343841; --shadow:0 1px 3px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.42);
    --accent:#d8392e; --accent-ink:#FFFFFF; --accent-press:#B72C26;
    --fw:#d8392e; --brk:#BE8A18; --pol:#33A866; --thw:#5D93E3; --son:#8A857E;
    --good:#4CAF6E; --good-bg:#22352A;
    --warn:#D9A83C; --warn-bg:#3A3120;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:16px; line-height:1.45;
    -webkit-text-size-adjust:100%;
  }
  .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

  /* Hinweis-Banner: neue App-Version liegt am ELW bereit (aktiv beim Neustart) */
  .update-bar{
    display:flex;align-items:center;gap:12px;
    padding:9px 16px;font-size:14px;font-weight:600;
    background:var(--warn-bg);color:var(--warn);
    border-bottom:1px solid var(--line);
  }
  .update-bar-txt{flex:1;min-width:0}
  .update-bar-zu{
    flex:0 0 auto;border:1.5px solid currentColor;background:transparent;color:inherit;
    border-radius:8px;padding:5px 12px;font-weight:600;min-height:0;white-space:nowrap}
  .update-bar-zu:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
  .update-bar.srv-warn{background:color-mix(in oklab,var(--accent) 16%,var(--surface));color:var(--accent)}

  /* Freigabe-Ansicht: Dauer-Banner (kein Schließen) + Sperr-Overlay bei veraltetem Stand */
  .freigabe-bar{
    display:flex;align-items:center;
    padding:9px 16px;font-size:13.5px;font-weight:600;line-height:1.35;
    background:var(--warn-bg);color:var(--warn);
    border-bottom:1px solid var(--line);
  }
  .freigabe-sperre{
    position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
    padding:24px;background:color-mix(in srgb,var(--bg) 82%,transparent);
    backdrop-filter:blur(2px);
  }
  .freigabe-sperre-box{
    max-width:380px;width:100%;text-align:center;
    background:var(--surface);color:var(--text);border:1px solid var(--line);
    border-radius:16px;padding:26px 22px;box-shadow:var(--shadow);
  }
  .freigabe-sperre-box h2{margin:0 0 8px;font-size:1.15rem}
  .freigabe-sperre-box p{margin:0 0 18px;font-size:.92rem;color:var(--muted)}

  /* Segmentierte Code-Eingabe/-Anzeige (Freigabe) – Stil wie AirDrop / PayPal.
     .code-eingabe input = Eingabe (Viewer-Seite), .code-box = reine Anzeige (Einstellungen). */
  .code-eingabe{display:flex;gap:8px;justify-content:center;margin:10px 0 16px}
  .code-eingabe input,.code-box{
    width:clamp(38px,13vw,46px);height:54px;padding:0;text-align:center;
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;font-weight:700;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    text-transform:uppercase;border:1.5px solid var(--line);border-radius:12px;
    background:var(--surface);color:var(--text);caret-color:var(--accent);
  }
  .code-eingabe input:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);
  }
  .code-eingabe.falsch input{border-color:var(--warn);animation:code-shake .4s}
  .code-fehler{text-align:center;color:var(--warn);font-size:.85rem;font-weight:600;margin:-6px 0 12px}
  @keyframes code-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

  /* Kurzhinweis: selbst verschwindender Toast (z. B. Ansichtswechsel wegen zu schmalem Fenster) */
  .kurzhinweis{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:120;
    max-width:min(420px,calc(100vw - 24px));padding:10px 16px;border-radius:12px;
    background:var(--warn-bg);color:var(--warn);font-size:.85rem;font-weight:650;
    text-align:center;box-shadow:var(--shadow);animation:kh-ein .2s ease-out}
  .kurzhinweis.raus{animation:kh-raus .25s ease-in forwards}
  @keyframes kh-ein{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  @keyframes kh-raus{to{opacity:0;transform:translateX(-50%) translateY(8px)}}
  @media (prefers-reduced-motion:reduce){.kurzhinweis,.kurzhinweis.raus{animation:none}}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
    outline:3px solid var(--thw);outline-offset:2px;border-radius:6px}
  input,select,textarea{
    font:inherit;color:var(--ink);background:var(--surface);
    border:1.5px solid var(--line);border-radius:10px;
    padding:12px 14px;width:100%;min-height:48px}
  textarea{resize:vertical;min-height:72px}
  label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink2);margin:0 0 6px 2px}
  .field{margin-bottom:16px}

  /* ---------- Splashscreen ---------- */
  #splash{
    position:fixed;inset:0;z-index:100;
    background:#17191c;color:#eceef1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;transition:opacity .45s;text-align:center;padding:20px}
  #splash.out{opacity:0;pointer-events:none}
  #splash .strip{display:flex;gap:6px;margin-bottom:36px}
  #splash .strip span{width:34px;height:6px;border-radius:3px}
  #splash .mark{
    width:92px;height:92px;border-radius:22px;background:#d8392e;color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:2rem;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;margin-bottom:24px;
    box-shadow:0 10px 40px rgba(216,57,46,.35)}
  #splash h1{margin:0;font-size:clamp(2.2rem,7vw,3.4rem);font-weight:800;
    letter-spacing:.06em;line-height:1.05}
  #splash h1 .p-elw,#splash h1 .p-is{display:inline-block}
  #splash h1 .p-elw{color:#d8392e}
  #splash h1 .p-is{color:#eceef1}
  #splash .tag{color:#9aa1ac;font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;margin-top:10px}
  #splash .ug{
    margin-top:26px;border:1.5px solid #343841;border-radius:999px;
    padding:10px 26px;font-weight:750;font-size:.95rem;letter-spacing:.3em;
    text-transform:uppercase;color:#eceef1;background:rgba(255,255,255,.02);
    position:relative;overflow:hidden}
  #splash .copy{color:#6f7681;font-size:.66rem;font-weight:600;letter-spacing:.22em;
    text-transform:uppercase;margin-top:16px}
  #splash .load{width:min(260px,60vw);height:4px;border-radius:2px;background:#343841;margin-top:44px;overflow:hidden}
  #splash .load i{display:block;height:100%;width:0;background:#d8392e;border-radius:2px;animation:splashload 5s linear forwards}
  @keyframes splashload{to{width:100%}}
  #splash .skip{color:#6f7681;font-size:.78rem;margin-top:14px}

  /* Choreografie: „ELW“ fliegt von links, „IS“ von rechts ein – Puls beim Zusammentreffen */
  @keyframes splash-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  #splash .strip{animation:splash-in .5s ease-out both}
  #splash .mark{animation:splash-in .55s .1s ease-out both}
  @keyframes elw-in{
    0%{opacity:0;transform:translateX(-110px);filter:blur(3px)}
    70%{opacity:1;transform:translateX(8px);filter:blur(0)}
    100%{opacity:1;transform:none}}
  @keyframes is-in{
    0%{opacity:0;transform:translateX(110px);filter:blur(3px)}
    70%{opacity:1;transform:translateX(-8px);filter:blur(0)}
    100%{opacity:1;transform:none}}
  @keyframes join-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.06)}}
  #splash h1 .p-elw{animation:elw-in .75s .35s cubic-bezier(.2,.8,.3,1) both}
  #splash h1 .p-is{animation:is-in .75s .35s cubic-bezier(.2,.8,.3,1) both}
  #splash h1{animation:join-pulse .32s 1.08s ease}
  #splash .tag{animation:splash-in .55s 1.2s ease-out both}
  #splash .copy{animation:splash-in .6s 1.5s ease-out both}
  #splash .load,#splash .skip{animation:splash-in .6s 1.7s ease-out both}
  /* UG-Badge: Buchstaben laufen aus der Sperrung zusammen, dann Glanz + roter Puls */
  @keyframes ug-in{
    0%{opacity:0;letter-spacing:1em;transform:translateY(12px) scale(.96);filter:blur(4px)}
    55%{opacity:1;filter:blur(0)}
    100%{opacity:1;letter-spacing:.3em;transform:none}}
  @keyframes ug-glow{
    0%,100%{box-shadow:0 0 0 0 rgba(216,57,46,0);border-color:#343841}
    50%{box-shadow:0 0 26px 3px rgba(216,57,46,.4);border-color:#d8392e}}
  #splash .ug{animation:ug-in 1s 1.35s cubic-bezier(.2,.7,.2,1) both, ug-glow 2.2s 2.5s ease-in-out 2}
  #splash .ug::after{content:"";position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);
    transform:translateX(-130%);animation:ug-sheen 1.1s 2.45s ease both}
  @keyframes ug-sheen{to{transform:translateX(130%)}}
  @media (prefers-reduced-motion:reduce){
    #splash .load i{animation:none;width:100%}
    #splash .strip,#splash .mark,#splash h1,#splash h1 .p-elw,#splash h1 .p-is,
    #splash .tag,#splash .load,#splash .skip,#splash .ug,#splash .copy{animation:none}
    #splash .ug::after{animation:none}
  }

  /* ---------- App-Rahmen ---------- */
  #app{min-height:100vh;display:flex;flex-direction:column;padding-left:var(--rail)}
  header.topbar{
    position:sticky;top:0;z-index:20;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:10px 14px;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:10px;min-width:0}
  /* Textblock exakt so hoch wie die Marken-Kachel der Schiene (64px) – identisch zu „Geräte“ */
  .brand>div{display:flex;flex-direction:column;justify-content:center;height:64px}
  .brand-mark{
    width:34px;height:34px;border-radius:8px;flex:none;
    background:var(--accent);color:var(--accent-ink);
    display:grid;place-items:center;font-weight:800;font-size:.85rem;letter-spacing:.02em;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
  .brand h1{font-size:1.3rem;font-weight:800;margin:0;line-height:1.15;white-space:nowrap;letter-spacing:.02em}
  .n-elw{color:var(--accent)}
  .n-is{color:var(--ink)} /* „weiß“ auf dunklen Flächen, dunkel im Hellmodus – sonst unsichtbar */
  .brand .claim{font-size:.72rem;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
  .brand .sub{font-size:.72rem;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase}
  .topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
  /* Handy: Kopfzeile ist zu schmal für Marke + Synchron/WLAN/Zahnrad in einer Zeile –
     Regler an den rechten Rand oben pinnen (auf Höhe des Programmnamens) statt in
     eine eigene Zeile darunter umzubrechen. header.topbar (position:sticky) ist
     bereits Bezugsrahmen für die absolute Positionierung. Die Textlabel von
     Sync-Pille und WLAN-Schalter weichen dafür Icon/Punkt bzw. Schalter allein –
     sonst wäre auch die schmalste Fassung noch breiter als neben der Marke passt. */
  @media (max-width:899px){
    .topbar-right{position:absolute;top:10px;right:14px;margin-left:0;gap:6px}
    .sync-pill{padding:8px;gap:0}
    .sync-pill #syncText{display:none}
    .wlan-switch{gap:0}
    .wlan-switch>span:first-child{display:none}
  }
  .iconbtn{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--ink2)}
  .iconbtn:active{background:var(--surface2)}
  .iconbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  .sync-pill{
    display:inline-flex;align-items:center;gap:7px;
    border-radius:999px;padding:7px 12px;font-size:.8rem;font-weight:650;
    background:var(--warn-bg);color:var(--warn);white-space:nowrap}
  .sync-pill.good{background:var(--good-bg);color:var(--good)}
  .sync-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
  .sync-pill.busy .dot{animation:pulse 1s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){.sync-pill.busy .dot{animation:none}}

  .wlan-switch{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink2);font-weight:600}
  .wlan-switch .track{
    width:46px;height:26px;border-radius:999px;background:var(--line);
    position:relative;transition:background .15s;flex:none}
  .wlan-switch .track::after{
    content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
    background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
  .wlan-switch[aria-checked="true"] .track{background:var(--good)}
  .wlan-switch[aria-checked="true"] .track::after{transform:translateX(20px)}

  main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:18px 14px 40px}
  main.w-tablet{max-width:980px}   /* Kräfteerfassung: 10-Zoll-Tablet */
  main.w-desk{max-width:1100px}    /* Einsatz & Funk: 22-Zoll-Monitor am ELW */
  main.wide{max-width:1720px}      /* Einsatzmonitor & Lagekarte: volle Breite */
  /* Funkliste auf dem großen Monitor zweispaltig */
  @media (min-width:1100px){.fs-list{display:grid;grid-template-columns:1fr 1fr;align-items:start}}

  /* ---------- Navigation: Burger-Menü (Handy) / Seitenleiste (ab 10 Zoll) ---------- */
  nav.tabs{display:none}   /* alte Fußleiste entfernt – ersetzt durch Burger-Drawer */
  nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

  .menu-burger{display:grid}                 /* auf dem Handy sichtbar */
  @media (min-width:900px){.menu-burger{display:none}}

  /* Off-canvas-Drawer */
  .drawer-backdrop{position:fixed;inset:0;z-index:50;background:rgba(20,16,14,.5)}
  .drawer{position:fixed;left:0;top:0;bottom:0;z-index:51;width:min(300px,82vw);
    background:var(--surface);border-right:1px solid var(--line);box-shadow:6px 0 40px rgba(0,0,0,.3);
    display:flex;flex-direction:column;padding:14px 12px calc(14px + env(safe-area-inset-bottom));
    overflow-y:auto}
  .drawer-head{display:flex;align-items:center;gap:10px;padding:6px 6px 14px;margin-bottom:6px;
    border-bottom:1px solid var(--line)}
  .drawer-head .brand-mark{width:38px;height:38px}
  .drawer-head h2{margin:0;font-size:1.05rem;font-weight:800}
  .drawer button[data-tab]{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
    min-height:60px;padding:12px 14px;border-radius:12px;font-size:1.05rem;font-weight:650;color:var(--ink)}
  .drawer button[data-tab] svg{width:26px;height:26px;stroke:currentColor;fill:none;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .drawer button[data-tab].active{color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,transparent)}
  .drawer button[data-tab]:active{background:var(--surface2)}

  nav.rail{
    display:none;position:fixed;left:0;top:0;bottom:0;width:96px;z-index:30;
    background:var(--surface);border-right:1px solid var(--line);
    flex-direction:column;gap:6px;padding:14px 8px;overflow-y:auto}
  nav.rail button{
    width:100%;min-height:64px;border-radius:12px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:.7rem;font-weight:650;letter-spacing:.03em;color:var(--ink3)}
  nav.rail .rail-brand{
    width:100%;min-height:64px;border-radius:12px;margin:0 0 10px;
    background:var(--accent);color:var(--accent-ink);
    display:grid;place-items:center;font-weight:800;font-size:.85rem}
  nav.rail .rail-brand svg{width:34px!important;height:34px!important}
  nav.rail button.active{color:var(--accent);background:color-mix(in oklab,var(--accent) 9%,transparent)}
  @media (min-width:900px){
    :root{--rail:96px}
    nav.rail{display:flex}
    main{padding-bottom:32px}
  }

  /* Auf dem Handy größere, fingerfreundliche Bedienelemente */
  @media (max-width:899px){
    .seg button{min-height:52px;font-size:1rem}
    .btn{min-height:54px}
    .arch .btn{min-height:48px;padding:10px 16px}
    .chip{font-size:.8rem;padding:3px 10px}
    input,select,textarea{min-height:52px;font-size:1.02rem}
    .iconbtn{width:48px;height:48px}
    .stepper button{width:56px;height:56px}
  }

  /* ---------- Karten & Bausteine ---------- */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
  .card h2{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink2);margin:0 0 14px}
  .hint{font-size:.8rem;color:var(--ink3);margin:4px 2px 0}
  /* Lagekarte: Hinweiszeile bleibt einzeilig (Volltext im title-Tooltip) – zwei Zeilen
     würden der Karte direkt darüber Höhe wegnehmen. */
  .lg-card .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 2px}

  .form-grid{display:grid;grid-template-columns:1fr;gap:0 16px}
  @media (min-width:640px){
    .form-grid{grid-template-columns:1fr 1fr}
    .form-grid .span2{grid-column:1/-1}
  }

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:52px;padding:12px 20px;border-radius:12px;
    font-weight:700;font-size:1rem;border:1.5px solid transparent}
  .btn-primary{background:var(--accent);color:var(--accent-ink)}
  .btn-primary:active{background:var(--accent-press)}
  .btn-ghost{border-color:var(--line);color:var(--ink2);background:var(--surface)}
  .btn-block{display:flex;width:100%}
  .btn-danger-ghost{border-color:color-mix(in oklab,var(--accent) 45%,var(--line));color:var(--accent);background:transparent}

  .seg{display:flex;background:var(--surface2);border-radius:12px;padding:4px;gap:4px;margin-bottom:16px}
  .seg button{flex:1;min-height:46px;border-radius:9px;font-weight:700;font-size:.92rem;color:var(--ink2)}
  .seg button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

  /* Einstellungen: Tab-Leiste im Sheet – alle Reiter gleich breit, kein horizontales Scrollen */
  .cfg-tabs{display:flex;gap:4px;background:var(--surface2);
    padding:6px 10px;margin:0;border-bottom:1px solid var(--line)}
  .cfg-tabs button{flex:1;min-width:0;min-height:44px;padding:6px 4px;
    border-radius:9px;font-weight:700;font-size:.7rem;line-height:1.2;
    color:var(--ink2);text-align:center;white-space:normal}
  .cfg-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
  .cfg-pane[hidden]{display:none}

  /* Einstellungen: jede Feldgruppe als eigene Karte – mehr Luft, klare Trennung */
  .cfg-pane > .field{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:16px 16px 18px;margin-bottom:14px}
  .cfg-pane > .field:last-child{margin-bottom:0}

  /* Kennzahlenleiste */
  .statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:12px 14px;box-shadow:var(--shadow)}
  .stat .k{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
  .stat .v{font-size:1.7rem;font-weight:800;line-height:1.15}
  .stat .s{font-size:.78rem;color:var(--ink2)}

  /* Einheiten-/Personen-Karten */
  .unit-list{display:grid;grid-template-columns:1fr;gap:10px}
  @media (min-width:720px){.unit-list{grid-template-columns:1fr 1fr}}
  .group-h{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink3);margin:18px 2px 8px}
  .group-h:first-of-type{margin-top:4px}
  .group-h span{font-weight:600}
  .unit{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--son);
    border-radius:14px;box-shadow:var(--shadow);padding:13px 14px}
  .unit:active{background:var(--surface2)}
  .unit .u-main{flex:1;min-width:0}
  .unit .u-name{font-weight:750;font-size:1.02rem;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .unit .u-name.sans{font-family:system-ui,sans-serif}
  .unit .u-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:.78rem;color:var(--ink2)}
  .unit .u-staerke{font-size:1.25rem;font-weight:750;text-align:right;line-height:1.1}
  .unit .u-staerke .lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink3);font-family:system-ui,sans-serif}
  .unit.left{opacity:.55;border-left-color:var(--line)}
  .unit.left .u-name{text-decoration:line-through}

  .chip{display:inline-flex;align-items:center;border-radius:6px;
    padding:2px 8px;font-size:.72rem;font-weight:750;letter-spacing:.04em}
  .badge-agt{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:2px 8px;
    font-size:.72rem;font-weight:700;background:var(--surface2);color:var(--ink2)}
  .badge-schaetz{display:inline-flex;align-items:center;border-radius:6px;padding:2px 8px;
    font-size:.72rem;font-weight:700;background:var(--warn-bg);color:var(--warn)}
  .kpi-bar{position:relative;flex:1;min-width:60px;height:6px;border-radius:3px;background:var(--surface2);align-self:center;overflow:hidden}
  .kpi-bar i{position:absolute;inset:0 auto 0 0;background:var(--warn);border-radius:3px}
  .kpic:not(.warn) .kpi-bar i{background:var(--good,#2e7d32)}
  .kpi-break{flex-basis:100%;height:0}   /* erzwingt Zeilenumbruch nach der 1. KPI-Reihe */

  .org-FW{border-left-color:var(--fw)} .org-BRK{border-left-color:var(--brk)}
  .org-POL{border-left-color:var(--pol)} .org-THW{border-left-color:var(--thw)}
  .org-SON{border-left-color:var(--son)}
  .chip-FW{background:color-mix(in oklab,var(--fw) 14%,var(--surface));color:var(--fw)}
  .chip-BRK{background:color-mix(in oklab,var(--brk) 14%,var(--surface));color:var(--brk)}
  .chip-POL{background:color-mix(in oklab,var(--pol) 14%,var(--surface));color:var(--pol)}
  .chip-THW{background:color-mix(in oklab,var(--thw) 14%,var(--surface));color:var(--thw)}
  .chip-SON{background:color-mix(in oklab,var(--son) 18%,var(--surface));color:var(--son)}

  .empty{
    text-align:center;padding:44px 20px;color:var(--ink3);
    border:1.5px dashed var(--line);border-radius:14px}
  .empty p{margin:0 0 16px;font-size:.95rem}

  /* Listenzeilen (Archiv, Abschnitte) */
  .arch{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .arch:last-child{border-bottom:none}
  .arch .a-main{flex:1;min-width:0}
  .arch .a-t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .arch .a-s{font-size:.78rem;color:var(--ink2)}
  .arch .btn{min-height:44px;padding:8px 14px;font-size:.85rem}
  /* Reihenfolge der Einsatzabschnitte über Auf/Ab-Pfeile */
  .ab-order{flex:none;display:flex;flex-direction:column;gap:2px}
  .ab-ord-btn{width:36px;height:26px;display:grid;place-items:center;border:1px solid var(--line);
    background:var(--surface);color:var(--ink2);border-radius:7px;font-size:.7rem;line-height:1;cursor:pointer}
  .ab-ord-btn:disabled{opacity:.3;cursor:default}
  .ab-ord-btn:not(:disabled):active{background:var(--surface2)}
  .addrow{display:flex;gap:8px;margin-top:12px}
  .addrow input{flex:1}
  .addrow .btn{flex:none}

  /* ---------- Editor (Sheet) ---------- */
  .sheet-backdrop{position:fixed;inset:0;z-index:40;background:rgba(20,16,14,.45)}
  .sheet{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:41;
    width:min(760px,100%);
    max-height:calc(100vh - 32px);   /* mittig im Fenster, nur so hoch wie der Inhalt (gedeckelt) */
    background:var(--bg);border-radius:18px;overflow:hidden;
    display:flex;flex-direction:column;box-shadow:0 10px 50px rgba(0,0,0,.4)}
  .sheet-head{
    display:flex;align-items:center;gap:10px;padding:14px 16px;
    border-bottom:1px solid var(--line);background:var(--surface);border-radius:18px 18px 0 0}
  .sheet-head h2{font-size:1.05rem;font-weight:750;margin:0;flex:1}
  .sheet-body{flex:1;overflow-y:auto;padding:18px 16px 24px}
  .sheet-foot{
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);background:var(--surface);
    display:flex;gap:10px}
  .sheet-close{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--ink2);font-size:1.4rem}

  .orgpick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .orgpick button{
    min-height:60px;border-radius:12px;border:2px solid var(--line);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-weight:800;font-size:.9rem;background:var(--surface);color:var(--ink2)}
  .orgpick button small{font-size:.6rem;font-weight:600;letter-spacing:.02em;color:var(--ink3)}
  .orgpick button[aria-pressed="true"]{border-color:var(--oc);color:var(--oc);
    background:color-mix(in oklab,var(--oc) 10%,var(--surface))}
  @media (max-width:420px){.orgpick button{min-height:56px;font-size:.78rem}}

  .abpick{display:flex;flex-wrap:wrap;gap:8px}
  .abpick button{
    min-height:48px;padding:8px 16px;border-radius:10px;border:2px solid var(--line);
    background:var(--surface);color:var(--ink2);font-weight:650;font-size:.9rem}
  .abpick button[aria-pressed="true"]{
    border-color:var(--accent);color:var(--accent);
    background:color-mix(in oklab,var(--accent) 9%,var(--surface))}

  .rufname-row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
  .kennung-wrap{display:flex;gap:8px}
  .kennung-wrap input{flex:1}
  .kennung-wrap .slashbtn{
    width:52px;flex:none;border-radius:10px;border:1.5px solid var(--line);
    background:var(--surface2);font-size:1.3rem;font-weight:700;color:var(--ink)}
  .ruf-preview{
    margin-top:10px;background:var(--surface2);border-radius:10px;padding:10px 14px;
    font-size:1.05rem;font-weight:750;min-height:44px;display:flex;align-items:center}
  .ruf-preview .ph{color:var(--ink3);font-weight:500;font-size:.85rem;font-family:system-ui,sans-serif}

  .steppers{display:flex;flex-direction:column;gap:10px}
  .stepper{display:flex;align-items:center;gap:12px;background:var(--surface);
    border:1.5px solid var(--line);border-radius:12px;padding:8px 10px}
  .stepper .st-label{flex:1;font-weight:650}
  .stepper .st-label small{display:block;font-size:.72rem;font-weight:500;color:var(--ink3)}
  .stepper .st-val{width:56px;text-align:center;font-size:1.5rem;font-weight:800}
  .stepper button{
    width:52px;height:52px;border-radius:10px;flex:none;
    background:var(--surface2);font-size:1.6rem;font-weight:700;color:var(--ink);
    display:grid;place-items:center}
  .stepper button:active{background:var(--line)}
  .gesamt-row{
    display:flex;align-items:baseline;justify-content:space-between;
    background:var(--surface2);border-radius:12px;padding:12px 16px;margin-top:12px}
  .gesamt-row .g-not{font-size:1.6rem;font-weight:800}
  .gesamt-row .g-lbl{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

  .leave-toggle{display:flex;align-items:center;gap:12px;background:var(--surface);
    border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;text-align:left;font-weight:650}
  .leave-toggle .track{width:46px;height:26px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .15s}
  .leave-toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
    background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
  .leave-toggle[aria-pressed="true"] .track{background:var(--accent)}
  .leave-toggle[aria-pressed="true"] .track::after{transform:translateX(20px)}

  /* ---------- Einsatzmonitor ---------- */
  .monitor{background:var(--bg);color:var(--ink);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
  /* Kopf: Titel links, Uhr mittig, Steuer-Buttons rechts – in Normal- und Vollbildansicht gleich */
  .mon-head{position:relative;min-height:60px;margin-bottom:10px}
  .mon-title{max-width:46%}
  .mon-head .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .mon-head h2{margin:2px 0 0;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:800;line-height:1.15;text-wrap:balance}
  .mon-head .ort{color:var(--ink2);font-size:.95rem}
  .mon-head .mon-el{color:var(--ink3);font-size:.9rem;font-weight:600;margin-top:2px}
  .mon-head .mon-vr{color:var(--warn);font-size:.85rem;font-weight:650;margin-top:2px}
  .mon-head .mon-vr strong{color:var(--warn)}
  .mon-clockbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
  .mon-clock{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
  .mon-dauer{color:var(--ink);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1;margin-top:4px}
  .mon-headctrl{position:absolute;right:0;top:0;display:flex;gap:8px}
  .mon-headctrl .btn{min-height:40px;padding:6px 14px;font-size:.85rem}
  .mon-lb{color:var(--warn);font-size:.82rem;font-weight:650;margin-top:4px}
  .mon-lb strong{color:var(--warn)}
  .mon-dauer strong{color:var(--ink)}

  /* Kompakte Kennzahlen-Leiste – spart Höhe für die Abschnitte */
  .kpis-compact{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .kpic{display:flex;align-items:baseline;gap:9px;background:var(--surface);
    border:1px solid var(--line);border-radius:10px;padding:8px 16px}
  .kpic .v{font-size:1.7rem;font-weight:800;line-height:1}
  .kpic .k{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
  .kpic .s{font-size:.82rem;color:var(--ink2)}
  .kpic.accent{border-color:color-mix(in oklab,var(--accent) 40%,var(--line))}
  .kpic.accent .v{color:var(--accent)}
  .kpic.warn{border-color:color-mix(in oklab,var(--warn) 55%,var(--line))}
  .kpic.warn .v{color:var(--warn)}

  .mon-grid{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,3.2fr);gap:12px}
  .mon-grid > *{min-width:0}
  @media (max-width:760px){.mon-grid{grid-template-columns:1fr}}

  /* Abschnitts-Kacheln – breit genug, dass Fahrzeugname + AGT lesbar sind: max. 2 pro Reihe */
  .ab-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;min-width:0}
  @media (min-width:1000px){.ab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .ab-pager{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:.72rem;
    font-weight:700;color:var(--ink3);letter-spacing:.05em}
  .ab-pager .dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
  .ab-pager .dot.on{background:var(--accent)}
  .ab-jump{height:38px;padding:0 12px;border-radius:9px;border:1.5px solid var(--line);
    font-size:.76rem;font-weight:700;color:var(--ink);background:var(--surface);
    display:inline-flex;align-items:center;gap:6px}
  .ab-jump:active{background:var(--surface2)}
  .ab-jump svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ab-play{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line);
    display:grid;place-items:center;color:var(--ink);background:var(--surface)}
  .ab-play:active{background:var(--surface2)}
  .ab-play svg{width:18px;height:18px;fill:currentColor}
  .ab-cd{min-width:36px;text-align:right;font-weight:750;color:var(--ink2);font-size:.8rem}
  .panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .panel-head h3{margin:0}
  /* Abschnitts-Tabelle: feste Spalten, keine Scrollbar; langer Fahrzeugname kürzt mit „…“,
     Stärke und AGT bleiben immer sichtbar */
  .ab-card .mon-tablewrap{overflow:visible}
  .ab-table{table-layout:fixed}
  .ab-table tr.gone td{opacity:.45;text-decoration:line-through}
  .ab-table tr.gone .chip{opacity:.7}
  .ab-table tr.gone-sep td{padding:2px 6px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);border-top:2px solid var(--line);border-bottom:0;text-align:left!important;width:auto!important}
  .gone-note{color:var(--ink3)}
  .kpic.gone{opacity:.7}
  .ab-table th{padding:3px 6px}
  .ab-table td{padding:3px 6px;font-size:.82rem;white-space:nowrap;vertical-align:top}
  .ab-table td:nth-child(1){text-align:center}
  .ab-table .chip{font-size:.64rem;padding:0 5px;line-height:1.5}
  .ab-table th:nth-child(1),.ab-table td:nth-child(1){width:42px}
  .ab-table th:nth-child(3),.ab-table td:nth-child(3){width:76px}
  .ab-table th:nth-child(4),.ab-table td:nth-child(4){width:40px}
  .ab-table td.name{white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.15}
  .ab-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:11px 13px;border-top:4px solid var(--accent);min-width:0}
  .ab-card .name{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .ab-card.none{border-top-color:var(--line)}
  .ab-card .ab-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin-bottom:4px}
  .ab-card .ab-head > div:first-child{flex:1 1 55%;min-width:0}
  .ab-card h4{margin:0;font-size:1rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere;text-wrap:balance}
  .ab-card .ab-staerke{flex:0 0 auto;white-space:nowrap;font-size:1.4rem;font-weight:800;line-height:1}
  .ab-card .ab-sub{display:flex;gap:12px;flex-wrap:wrap;color:var(--ink2);font-size:.78rem}
  .ab-card .ab-sub strong{color:var(--ink)}
  .funkrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .funk-badge{display:inline-flex;align-items:center;gap:6px;border-radius:7px;
    padding:2px 8px;font-size:.76rem;font-weight:700;background:var(--surface2);color:var(--ink)}
  .funk-badge small{font-size:.6rem;font-weight:700;letter-spacing:.08em;color:var(--ink3)}
  .ab-more{font-size:.76rem;color:var(--ink3);font-weight:650;padding:3px 6px}

  /* Größenstufe für sehr große Bildschirme (30-Zoll-Monitor im ELW) */
  @media (min-width:1500px){
    .monitor{padding:24px 28px}
    .kpic .v{font-size:2.1rem}
    .ab-table td{font-size:.95rem;padding:4px 8px}
    .ab-card h4{font-size:1.2rem}
    .ab-card .ab-staerke{font-size:1.9rem}
    .ab-card .ab-sub{font-size:.88rem}
    .fkrow .fk-n{font-size:.95rem}
    .orgrow .num{font-size:1.1rem}
  }
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:0}
  .panel h3{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}

  /* Flex statt festem Grid: passt die Zahlen (z. B. "7/12/59/78 · 14 Einh.") auf schmalen
     Panels/Monitoren nie mitten im Text um (nowrap) – reicht der Platz nicht, rutscht das
     ganze Zahlenfeld als Einheit in eine zweite Zeile, statt am Rand abgeschnitten zu werden. */
  .orgrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:4px 0}
  /* Feste Breite (statt nur am Text): FW/POL/THW/BRK sind unterschiedlich lang – ohne feste
     Breite fängt der Balken je Zeile an anderer Stelle an, alles wirkt schief zueinander. */
  .orgrow .chip{flex:none;width:40px;justify-content:center}
  .orgrow .bar-wrap{flex:1 1 60px;min-width:40px;height:12px;background:var(--surface2);border-radius:4px;overflow:hidden}
  .orgrow .bar{height:100%;border-radius:4px;min-width:2px}
  .orgrow .num{flex:none;margin-left:auto;font-weight:750;font-size:1.05rem;text-align:right;white-space:nowrap}
  .orgrow .num small{color:var(--ink3);font-weight:600}

  .fkrow{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--line)}
  .fkrow:last-child{border-bottom:none}
  /* Feste Chip-Breite wie bei .orgrow – sonst startet der Name je nach FW/THW/BRK-Länge versetzt */
  .fkrow .chip{flex:none;width:40px;justify-content:center}
  .fkrow .fk-n{font-weight:700;font-size:.85rem}
  .fkrow .fk-f{color:var(--ink2);font-size:.78rem;margin-left:auto;text-align:right}

  .mon-tablewrap{overflow-x:auto}
  table.mon-table{width:100%;border-collapse:collapse;font-size:.92rem}
  .mon-table th{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink3);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
  .mon-table td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
  .mon-table tr:last-child td{border-bottom:none}
  .mon-table td.num{text-align:right}
  .mon-table tr.left td{opacity:.5}
  .mon-table tr.left td.name{text-decoration:line-through}

  .mon-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px}
  .mon-toolbar .btn{min-height:44px;padding:8px 16px;font-size:.85rem}
  /* Monitor-Vollbild: nur der graue Monitor, App-Menü/Topbar aus (Kopf-Layout ist identisch zur Normalansicht) */
  body.mon-fullscreen header.topbar,
  body.mon-fullscreen nav.rail{display:none!important}
  body.mon-fullscreen #app{padding-left:0}
  /* Lagekarte & Komm-Skizze haben von sich aus wenig Eigenhöhe (Karte im festen Seitenverhältnis,
     Skizze so hoch wie ihr Inhalt) – ohne das hier bleibt im Vollbild darunter eine leere graue
     Fläche stehen. .mon-fill streckt genau diese eine Seite auf die volle Resthöhe. */
  body.mon-fullscreen .mon-root{display:flex;flex-direction:column;height:100%}
  body.mon-fullscreen .monitor{display:flex;flex-direction:column}
  body.mon-fullscreen .mon-grid.mon-fill{flex:1;min-height:0}
  /* Dasselbe Problem gibt es auch im normalen (nicht-Vollbild-)Monitor: height:100%-Kette der
     Lagekarten-Kachel braucht eine definierte Höhe weiter oben, sonst bricht Leaflet/die Karte
     auf einen schmalen Streifen zusammen. Eigene, kleinere Höhe hier (kein Vollbild-Platz) –
     bewusst NUR außerhalb von .mon-fullscreen, damit die (funktionierende) Vollbild-Flex-Kette
     oben unangetastet bleibt. */
  body:not(.mon-fullscreen) .mon-grid.mon-fill{height:min(64vh,640px)}
  .lg-legend{overflow-y:auto}
  .mon-scrollpanel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .mon-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px}
  body.mon-fullscreen main{max-width:none;margin:0;padding:10px}
  body.mon-fullscreen .monitor{border-radius:0;min-height:calc(100vh - 20px);padding:16px}
  /* Rotations-Steuerung oben, rechtsbündig auf gleicher Kante wie die Kopf-Buttons */
  .mon-abctrl{display:flex;justify-content:flex-end;margin:-12px 0 8px}

  /* ---------- Lagekarte (Platzhalter) ---------- */
  .map-placeholder{
    position:relative;border:1.5px dashed var(--line);border-radius:14px;min-height:340px;
    background:
      linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:44px 44px;background-position:center;
    display:grid;place-items:center;text-align:center;padding:30px;overflow:hidden}
  .map-placeholder .inner{max-width:420px}
  .map-placeholder h3{margin:0 0 8px;font-size:1.15rem;font-weight:750}
  .map-placeholder p{color:var(--ink2);font-size:.9rem;margin:0}
  .map-pin{position:absolute;padding:4px 10px;border-radius:8px;font-size:.72rem;font-weight:800;
    color:#fff;box-shadow:var(--shadow)}

  /* Lagekarte: Werkzeuge – EINE scrollbare Zeile statt zweizeiligem Grid, damit auf kleineren
     Screens nicht eine ganze zweite Zeile Werkzeug-Kacheln der Karte die Höhe wegnimmt. */
  .lg-toolbar{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:8px;margin-bottom:12px;padding-bottom:2px}
  .lg-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;
    min-width:76px;min-height:66px;padding:8px 10px;border:2px solid var(--line);border-radius:12px;
    background:var(--surface);font-size:.66rem;font-weight:650;color:var(--ink2);text-align:center}
  .lg-tool[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
    background:color-mix(in oklab,var(--accent) 9%,var(--surface))}
  .lg-status{display:flex;align-items:center;gap:10px;background:var(--warn-bg);color:var(--warn);
    border-radius:10px;padding:10px 14px;font-size:.85rem;font-weight:650;margin-bottom:12px}
  .lg-status button{margin-left:auto;font-weight:700;text-decoration:underline}
  .lg-submenu{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 12px;padding:8px 10px;
    background:var(--surface2);border:1px solid var(--line);border-radius:10px}
  .lg-sub-lbl{font-size:.8rem;font-weight:700;color:var(--ink2)}
  .lg-subopt{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1.5px solid var(--line);
    border-radius:8px;background:var(--surface);font-weight:650;font-size:.85rem}
  .lg-subopt:active{background:var(--surface2)}
  .lg-gefahr-r{display:inline-grid;place-items:center;min-width:38px;padding:2px 6px;border-radius:6px;
    background:var(--fw);color:#fff;font-weight:800;font-size:.72rem}
  .lg-unitchips{display:flex;flex-wrap:wrap;gap:8px}
  .lg-unitchips .chip{min-height:44px;padding:6px 12px;font-size:.8rem;cursor:pointer;
    border:1.5px solid transparent}
  .lg-unitchips .chip[aria-pressed="true"]{border-color:currentColor}
  /* Ebenfalls eine scrollbare Zeile statt Umbruch – sonst kostet die Löschwasser-Bilanz &
     Co. auf schmäleren Screens eine zweite Zeile, die der Karte fehlt. */
  .lg-bgrow{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:8px;margin-top:12px}
  .lg-bgrow .btn{min-height:44px;padding:8px 14px;font-size:.85rem;flex:none;white-space:nowrap}

  /* Lagekarte: Zeichenfläche (zoombar: Canvas wächst, Wrap scrollt/pannt) */
  .lg-wrap{position:relative;border:1.5px solid var(--line);border-radius:14px;
    aspect-ratio:16/10;overflow:auto;touch-action:pan-x pan-y;
    background-color:var(--surface2);overscroll-behavior:contain;
    isolation:isolate}   /* eigener Stacking-Kontext: Leaflet-Ebenen dürfen Splash/Dialoge nicht überlagern */
  /* Raster: dunkleres, neutrales Grau als Hintergrund → weiße Symbolkacheln heben sich klar ab */
  .lg-canvas{position:relative;width:100%;height:100%;
    background-color:color-mix(in oklab,var(--ink) 26%,var(--surface));
    background-size:cover;background-position:center}
  .lg-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
    background:linear-gradient(color-mix(in oklab,var(--ink) 32%,transparent) 1px,transparent 1px),
      linear-gradient(90deg,color-mix(in oklab,var(--ink) 32%,transparent) 1px,transparent 1px);
    background-size:44px 44px}
  .lg-canvas.hasbg{background-color:var(--surface2)}
  .lg-canvas.hasbg::after{opacity:.12}
  .lg-zoom{display:flex;align-items:center;gap:2px;
    border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:2px}
  .lg-zoom button{width:46px;height:40px;border-radius:9px;font-size:1.25rem;font-weight:700;color:var(--ink)}
  .lg-zoom button:active{background:var(--surface2)}
  .lg-zoom .z-val{min-width:56px;text-align:center;font-size:.8rem;font-weight:700;color:var(--ink2)}
  /* Zeichenebene: Linien (Schlauchleitungen, Absperrungen) und Flächen (Abschnitte) */
  .lg-shapes{position:absolute;inset:0;width:100%;height:100%;z-index:1}
  .lg-shapes polyline,.lg-shapes polygon{fill:none;stroke-width:3.5;vector-effect:non-scaling-stroke;
    stroke-linejoin:round;stroke-linecap:round;pointer-events:visiblePainted;cursor:pointer}
  .lg-shapes .tmp{stroke:var(--accent);stroke-dasharray:7 6;fill:none;pointer-events:none}
  .lg-shapes .tmp-dot{fill:var(--accent);stroke:none;pointer-events:none}
  .swatches{display:flex;gap:10px;flex-wrap:wrap}
  .swatches button{width:52px;height:52px;border-radius:12px;border:3px solid transparent;background:var(--sc)}
  .swatches button[aria-pressed="true"]{border-color:var(--ink);box-shadow:var(--shadow)}
  /* Eigener Farbwähler (Colorpicker): zeigt die aktuelle Farbe + kleines Stift-Icon */
  .swatches .sw-custom{position:relative;display:block;width:52px;height:52px;border-radius:12px;
    overflow:hidden;cursor:pointer;border:3px solid transparent}
  .swatches .sw-custom input[type=color]{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);
    border:none;margin:0;padding:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
  .swatches .sw-custom input[type=color]::-webkit-color-swatch-wrapper{padding:0}
  .swatches .sw-custom input[type=color]::-webkit-color-swatch{border:none}
  .swatches .sw-custom input[type=color]::-moz-color-swatch{border:none}
  .swatches .sw-custom::after{content:"";position:absolute;right:3px;bottom:3px;width:17px;height:17px;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='white' stroke='%23333' stroke-width='1.5'/%3E%3Cpath d='M8.5 15.5l.7-2.4 5-5 1.7 1.7-5 5-2.4.7z' fill='%23333'/%3E%3C/svg%3E") center/contain no-repeat}
  .swatches .sw-custom.active{border-color:var(--ink);box-shadow:var(--shadow)}
  .lg-item{position:absolute;transform:translate(-50%,-50%);z-index:2;cursor:grab;
    display:flex;flex-direction:column;align-items:center;gap:2px;touch-action:none;user-select:none;-webkit-user-select:none}
  .lg-item *{pointer-events:none}
  /* „Wackeln" beim Klick auf das Fahrzeug in der Legende – zeigt die Position auf der Karte */
  @keyframes lg-wackel{
    0%,100%{transform:translate(-50%,-50%) rotate(0)}
    15%{transform:translate(-50%,-50%) rotate(-11deg)}
    30%{transform:translate(-50%,-50%) rotate(9deg)}
    45%{transform:translate(-50%,-50%) rotate(-7deg)}
    60%{transform:translate(-50%,-50%) rotate(5deg)}
    80%{transform:translate(-50%,-50%) rotate(-2deg)}}
  .lg-item.wackel,.lg-mk.wackel{animation:lg-wackel .8s ease-in-out;z-index:6}
  /* Dauerhaftes Wackeln geänderter Symbole im Snapshot-Vergleich */
  .lg-item.wackel-dauer,.lg-mk.wackel-dauer{animation:lg-wackel 1s ease-in-out infinite;z-index:6}
  [data-shape].wackel-dauer{animation:lg-flash 1.2s ease-in-out infinite}
  [data-shape].flash{animation:lg-flash .9s ease-in-out}
  /* Snapshot-Vergleich: zwei Panels nebeneinander + Vollbild */
  .sheet.sheet-wide{width:min(1200px,calc(100vw - 24px))}
  .lgsnap-pick{display:flex;align-items:center;padding:0 8px 0 2px;flex:none}
  .lgsnap-pick input{width:22px;height:22px}
  .lg-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .lg-cmp-col{min-width:0;display:flex;flex-direction:column;gap:6px}
  .lg-cmp-t{font-size:.8rem;font-weight:700;color:var(--ink2)}
  .lg-cmp-t span{font-weight:500;color:var(--ink3)}
  .lg-cmp-map{aspect-ratio:auto;height:min(56vh,480px)}
  /* Vergleichskarte: alle Finger-Gesten an Leaflet geben (sonst scrollt im Vollbild der Dialog
     statt zu zoomen/verschieben). touch-action:none auch auf dem inneren Leaflet-Container. */
  .lg-cmp-map, .lg-cmp-map .leaflet-container{touch-action:none}
  @media (max-width:760px){.lg-cmp{grid-template-columns:1fr}.lg-cmp-map{height:44vh}}
  .lg-fullbtn{min-height:38px;padding:4px 12px;font-size:1.1rem;flex:none}
  .sheet:fullscreen{width:100vw;max-width:none;height:100vh;max-height:none;border-radius:0;top:0;left:0;transform:none;display:flex;flex-direction:column}
  .sheet:fullscreen .sheet-body{flex:1;overflow:auto}
  .sheet:fullscreen .lg-cmp-map{height:calc(100vh - 200px)}
  .sheet:fullscreen #lgSnapMap{height:100%}
  .sheet:fullscreen .lg-wrap{aspect-ratio:auto;height:calc(100vh - 200px)}
  @keyframes lg-flash{0%,100%{opacity:1}20%{opacity:.15}40%{opacity:1}60%{opacity:.15}80%{opacity:1}}
  .lg-find{background:none;border:0;padding:0;cursor:pointer;line-height:0}
  /* Legenden-Badge (klickbar → wackeln/blinken) für Marker, Formen, Linien */
  .lg-leg-badge{flex:none;width:34px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
  /* Verkleinerte Varianten der echten Karten-Symbole (EL/Brand/Wasser/Verletztenablage/Text/taktische
     Zeichen) für die 34px-Badge-Spalte der Legende – sonst würden die kartengroßen Icons überstehen. */
  .lg-leg-badge .lg-rect{min-width:0;width:30px;height:22px;padding:0;font-size:.6rem;border-width:2px}
  .lg-leg-badge .lg-flame svg{width:20px;height:20px}
  .lg-leg-badge .lg-circle{width:26px;height:26px;font-size:.72rem}
  .lg-leg-badge .lg-cross{width:26px;height:26px;font-size:.95rem}
  .lg-leg-badge .lg-text{font-size:.62rem;padding:2px 5px}
  .lg-leg-badge .lg-symsvg{width:28px;height:28px}
  .lg-mini-form{width:24px;height:20px;border:2.5px solid var(--sc);background:var(--surface)}
  .lg-mini-form.circle{border-radius:50%;width:22px;height:22px}
  .lg-mini-form.square{border-radius:4px;width:22px;height:22px}
  .lg-mini-form.rect{border-radius:4px}
  .lg-mini-line{width:28px;height:0;border-top:3px solid var(--sc);border-radius:2px}
  /* Pfeilspitze am Zielpunkt einer Pfeil-Signatur (Rotation per Inline-Style).
     Liegt über dem Zieh-Griff (blockiert ihn aber nicht) + heller Rand zum Abheben. */
  .lg-arrowhead{display:block;width:26px;height:26px;line-height:0;pointer-events:none;
    filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px rgba(0,0,0,.7))}
  .lg-arrowhead svg{display:block;width:26px;height:26px}
  /* Zieh-Griff für Kreis/Pfeil auf der Online-Karte – Ring, damit Pfeilspitze/Linie durchscheint */
  .lg-handle{display:block;width:16px;height:16px;border-radius:50%;background:transparent;
    border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5);cursor:move}
  /* Live-Maß-Tooltip beim Ziehen (Radius/Länge) */
  .leaflet-tooltip.lg-measure{background:var(--ink);color:#fff;border:none;font-weight:700;
    font-size:.8rem;padding:2px 8px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.45)}
  .leaflet-tooltip.lg-measure::before{display:none}
  /* Wind-Fahne auf der Karte (oben rechts) */
  .lg-windbadge{position:absolute;top:10px;right:10px;z-index:1000;display:flex;align-items:center;gap:9px;
    background:color-mix(in oklab,var(--surface) 92%,transparent);border:1px solid var(--line);
    border-radius:12px;padding:7px 11px;box-shadow:var(--shadow);backdrop-filter:blur(3px);color:var(--ink)}
  .lg-windbadge.clickable{cursor:pointer}
  .lg-windbadge .lg-wind-arrow{display:block;width:26px;height:26px;color:var(--thw);flex:none}
  .lg-windbadge .lg-wind-arrow svg{display:block;width:26px;height:26px}
  .lg-windbadge .lg-wind-txt{display:flex;flex-direction:column;line-height:1.15}
  .lg-windbadge .lg-wind-txt b{font-size:.9rem;font-weight:800}
  .lg-windbadge .lg-wind-txt span{font-size:.72rem;color:var(--ink2);font-weight:600}
  .lg-windbadge .lg-wind-add{font-size:.85rem;font-weight:700;color:var(--ink2)}
  /* Karten-Attribution (Namensnennung) deutlich sichtbar – Pflicht bei OpenData (dl-de/by-2.0) */
  .leaflet-control-attribution{background:rgba(255,255,255,.93)!important;color:#1a1a1a!important;
    font-size:.72rem!important;font-weight:600;padding:3px 9px!important;line-height:1.4;
    max-width:min(92vw,560px);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
  .leaflet-control-attribution a{color:#1a4f9c!important;text-decoration:none}
  /* Verstärkerpumpe der Wasserförderung */
  .lg-pump{display:grid;place-items:center;min-width:27px;height:27px;padding:0 5px;border-radius:50%;
    background:var(--thw);color:#fff;font-weight:800;font-size:.78rem;border:2.5px solid #fff;
    box-shadow:0 1px 5px rgba(0,0,0,.55);cursor:move;white-space:nowrap}
  .lg-pump.fp{background:var(--brk);cursor:default}   /* Förderpumpe an der Saugstelle (gold) */
  .lg-pump.v{background:var(--fw);cursor:default}      /* Verteiler an der Einsatzstelle (rot) */
  /* Wasserförderung-Parameterfelder im Dialog */
  .lg-fparam{display:flex;flex-direction:column;gap:3px;font-size:.72rem;font-weight:700;color:var(--ink2)}
  .lg-fparam input{font-size:.95rem;font-weight:600;padding:6px 8px;width:100%}
  /* Löschwasser-Bilanz */
  .lw-rohre{display:flex;flex-direction:column;gap:8px}
  .lw-rohr{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 10px;border:1px solid var(--line);border-radius:10px}
  .lw-rohr-n{font-weight:700}.lw-rohr-n small{color:var(--ink3);font-weight:600}
  .lw-count{display:flex;align-items:center;gap:12px}
  .lw-count button{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
    background:var(--surface);font-size:1.3rem;font-weight:800;line-height:1;cursor:pointer}
  .lw-count b{min-width:1.5ch;text-align:center;font-size:1.1rem}
  .lw-result{margin-top:6px;padding:14px;border-radius:12px;background:var(--surface2);text-align:center}
  .lw-result.ok{background:var(--good-bg)}
  .lw-result.warn{background:var(--warn-bg)}
  .lw-result.krit{background:color-mix(in oklab,var(--accent) 20%,var(--surface))}
  .lw-big{font-size:1.05rem;font-weight:800}
  .lw-sub{margin-top:4px;font-size:.85rem;color:var(--ink2);font-weight:600}
  /* Materialübersicht Wasserförderung */
  .lg-ueber{width:100%;border-collapse:collapse;margin-top:10px;font-size:.86rem}
  .lg-ueber th{text-align:left;font-weight:700;color:var(--ink2);padding:5px 8px 5px 0;white-space:nowrap;vertical-align:top}
  .lg-ueber td{padding:5px 0;font-weight:600}
  .lg-ueber tr{border-top:1px solid var(--line)}
  .lg-ueber tr:first-child{border-top:none}
  .lg-leg-ea{display:inline-grid;place-items:center;min-width:32px;height:24px;padding:0 5px;
    border:2px solid var(--sc);color:var(--sc);border-radius:6px;font-size:.68rem;font-weight:800;white-space:nowrap}
  .lg-mini-area{width:26px;height:20px;border:2px solid var(--sc);border-radius:3px;
    background:color-mix(in oklab,var(--sc) 22%,var(--surface))}
  .lg-leg-qm{font-size:.72em;font-weight:600;color:var(--ink2);white-space:nowrap}
  .lg-sym{min-width:40px;height:36px;padding:3px 8px;border:2.5px solid var(--sc);color:var(--sc);
    background:var(--surface);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;
    font-weight:800;font-size:.72rem;gap:1px;box-shadow:var(--shadow);white-space:nowrap}
  .lg-sym.circle{border-radius:50%;width:40px;min-width:40px;padding:0}
  .lg-symsvg{display:inline-flex;width:40px;height:40px;line-height:0;filter:drop-shadow(var(--shadow))}
  .lg-symsvg svg{width:100%;height:100%;display:block}
  .lg-form{display:inline-flex;align-items:center;justify-content:center;border:2.5px solid var(--sc);
    color:var(--sc);background:var(--surface);font-weight:800;font-size:.72rem;padding:0 6px;
    box-shadow:var(--shadow);white-space:nowrap;line-height:1}
  .lg-form.circle{border-radius:50%;width:40px;height:40px;padding:0}
  .lg-form.square{border-radius:5px;width:40px;height:40px}
  .lg-form.rect{border-radius:5px;min-width:64px;height:34px}
  .sym-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
    padding:10px 4px;border-bottom:1px solid var(--line);min-height:56px}
  .sym-row:last-of-type{border-bottom:none}
  .sym-row .sym-name{font-weight:650}
  .lg-rect{min-width:58px;padding:4px 9px;border:3px solid var(--oc,var(--son));
    background:var(--surface);border-radius:3px;font-weight:800;font-size:.74rem;text-align:center;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--ink);box-shadow:var(--shadow)}
  .lg-lbl{font-size:.64rem;font-weight:700;color:var(--ink);white-space:nowrap;
    background:color-mix(in oklab,var(--surface) 82%,transparent);padding:1px 6px;border-radius:4px}
  .lg-flame svg{width:38px;height:38px;fill:var(--fw);stroke:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
  .lg-circle{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    font-weight:800;color:#fff;background:var(--thw);box-shadow:var(--shadow)}
  .lg-tri{width:42px;height:37px;background:var(--brk);clip-path:polygon(50% 0,100% 100%,0 100%);
    display:grid;place-items:center;font-weight:900;color:#1A1817;padding-top:12px;font-size:.9rem}
  .lg-cross{width:34px;height:34px;background:#fff;border:2.5px solid var(--fw);border-radius:4px;
    display:grid;place-items:center;color:var(--fw);font-weight:900;font-size:1.2rem;line-height:1}
  .lg-text{font-size:.8rem;font-weight:800;color:var(--ink);
    background:color-mix(in oklab,var(--surface) 85%,transparent);padding:3px 8px;border-radius:6px;
    border:1.5px dashed var(--ink3)}
  .lg-num{width:40px;height:35px;background:var(--accent);clip-path:polygon(50% 0,100% 100%,0 100%);
    display:grid;place-items:center;color:#fff;font-weight:800;padding-top:11px;font-size:.85rem;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
  .lg-car{display:grid;place-items:center;width:44px;height:36px;border-radius:8px;
    background:color-mix(in oklab,var(--surface) 88%,transparent);position:relative}
  .lg-car svg{width:34px;height:30px;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .car-num{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:50%;
    background:var(--surface);border:2px solid currentColor;color:inherit;
    display:grid;place-items:center;font-size:.62rem;font-weight:800;font-style:normal;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;padding:0 2px;line-height:1}
  .lg-leg-car{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
  .lg-leg-car:last-of-type{border-bottom:none}
  .lg-leg-car .lg-car{flex:none}
  .lg-leg-car select{flex:1;min-height:44px;padding:8px 10px}
  .lg-leg-car{align-items:flex-start}
  .lg-leg-carname{flex:1;min-width:0;font-size:.8rem;font-weight:650;line-height:1.25;
    overflow-wrap:anywhere;padding-top:2px;background:none;border:0;cursor:pointer;
    text-align:left;font-family:inherit;color:var(--ink)}

  /* Lagekarte: Karte + Legende nebeneinander – innen nur Marker, Text außen */
  .lg-layout{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
  /* Lagekarte füllt das Fenster ohne Scrollen: Card = Flex-Spalte, das Layout füllt den Rest,
     Karte + Legende (links/rechts) stehen nebeneinander und passen sich der Höhe an. */
  @media (min-width:900px){
    .lg-card{display:flex;flex-direction:column;height:calc(100vh - 112px);overflow:hidden}
    .lg-card > .lg-layout{flex:1;min-height:0;align-items:stretch}
    .lg-layout .lg-wrap{aspect-ratio:auto;height:100%}
    .lg-legend{height:100%;overflow:auto}
  }
  /* Präsentationsmodus: Karte + Legende bildschirmfüllend, nur die Zoom-Lupe – alles andere aus */
  .lg-card.lg-present{position:fixed;inset:0;z-index:200;height:100vh;width:100vw;margin:0;
    border-radius:0;padding:12px;background:var(--surface);display:flex;flex-direction:column}
  .lg-card.lg-present > .lg-headrow,
  .lg-card.lg-present > .lg-modes,
  .lg-card.lg-present > .lg-toolbar,
  .lg-card.lg-present > .lg-submenu,
  .lg-card.lg-present > .lg-status,
  .lg-card.lg-present > .hint,
  .lg-card.lg-present > .lg-bgrow{display:none!important}
  .lg-card.lg-present > .lg-layout{flex:1;min-height:0;align-items:stretch;margin:0}
  .lg-present-ctrl{position:absolute;top:14px;right:14px;z-index:210;display:flex;gap:8px}
  .lg-present-ctrl button{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink);font-size:1.5rem;font-weight:800;box-shadow:var(--shadow);
    display:grid;place-items:center}
  .lg-present-ctrl button:active{background:var(--surface2)}
  /* Titel + Regler in EINER Zeile (statt Titel + eigene Knopfreihe darunter) – auf kleineren
     Screens zählt jede gesparte Zeile, die stattdessen der Karte zugutekommt. */
  .lg-headrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:-2px 0 10px}
  .lg-headrow h2{margin:0 auto 0 0}
  .lg-headrow .btn{min-height:44px;padding:8px 16px;font-size:.85rem}
  .lg-legend{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
  .lg-legend h3{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink3);margin:0 0 10px}
  .lg-leg-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
    padding:7px 0;border-bottom:1px solid var(--line)}
  .lg-leg-item:last-of-type{border-bottom:none}
  .lg-leg-num{width:30px;height:30px;border:0;border-radius:50%;background:var(--accent);color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none;cursor:pointer;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
  .lg-leg-num.tri{border-radius:0;background:var(--brk);color:#1A1817;
    clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:8px;font-size:.78rem}
  .lg-leg-text{flex:1;min-width:0;font-size:.92rem;font-weight:600;line-height:1.35;padding-top:4px;
    background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);
    overflow-wrap:anywhere}
  .lg-leg-text .ph{color:var(--ink3);font-weight:500}
  @media (min-width:1500px){
    .lg-rect{font-size:.9rem;min-width:72px}
    .lg-lbl{font-size:.78rem}
  }

  /* ---------- Anforderungen, Checklisten, Fotos, Diktat ---------- */
  .chip-st-angefordert{background:var(--warn-bg);color:var(--warn)}
  .chip-st-alarmiert{background:color-mix(in oklab,var(--thw) 14%,var(--surface));color:var(--thw)}
  .chip-st-eingetroffen{background:var(--good-bg);color:var(--good)}
  .ab-card.br{border-top-color:var(--brk)}
  .foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:12px}
  .foto-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;cursor:pointer;
    border:1px solid var(--line)}
  .check-item{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
    padding:10px 0;border-bottom:1px solid var(--line)}
  .check-item:last-of-type{border-bottom:none}
  .check-box{width:30px;height:30px;border-radius:8px;border:2px solid var(--line);flex:none;
    display:grid;place-items:center;color:transparent;font-weight:900;margin-top:1px}
  .check-item.done .check-box{background:var(--good);border-color:var(--good);color:#fff}
  .check-item.done .check-text{color:var(--ink3);text-decoration:line-through}
  .check-zeit{margin-left:auto;font-size:.75rem;color:var(--ink3);white-space:nowrap;padding-top:5px}
  .check-progress{height:8px;border-radius:4px;background:var(--surface2);overflow:hidden;margin:6px 0 12px}
  .check-progress i{display:block;height:100%;background:var(--good);border-radius:4px}
  /* Abschnitts-Überschrift innerhalb einer Checkliste */
  .check-head{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent);margin:14px 0 4px;padding-top:8px;border-top:1px solid var(--line)}
  .check-head:first-child{border-top:none;padding-top:0;margin-top:2px}
  .micbtn{width:52px;height:52px;border-radius:10px;border:1.5px solid var(--line);flex:none;
    display:grid;place-items:center;color:var(--ink2);background:var(--surface)}
  .micbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .micbtn.rec{color:#fff;background:var(--accent);border-color:var(--accent)}
  .micbtn.rec svg{animation:pulse 1s ease-in-out infinite}

  /* ---------- Funksprüche ---------- */
  .fs-list{display:flex;flex-direction:column;gap:10px}
  .fs-item{display:block;width:100%;text-align:left;background:var(--surface);
    border:1px solid var(--line);border-left:5px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);padding:12px 14px}
  .fs-item:active{background:var(--surface2)}
  .fs-item.imp{border-left-color:var(--accent)}
  .fs-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--ink2)}
  .fs-zeit{font-weight:750;color:var(--ink)}
  .fs-route strong{color:var(--ink)}
  .chip-imp{background:color-mix(in oklab,var(--accent) 14%,var(--surface));color:var(--accent)}
  /* Tagebuch: Eintrags-Typ-Chips (Ereignis/Befehl/Lagemeldung) */
  .fs-typ{font-weight:800;font-size:.72rem;letter-spacing:.03em}
  .fs-typ-ereignis{background:color-mix(in oklab,var(--good) 16%,var(--surface));color:var(--good)}
  .fs-typ-befehl{background:color-mix(in oklab,var(--thw) 16%,var(--surface));color:var(--thw)}
  .fs-typ-lage{background:color-mix(in oklab,var(--warn) 20%,var(--surface));color:var(--warn)}
  /* Ereignis-Schnellknöpfe */
  .fs-events{display:flex;flex-wrap:wrap;gap:8px}
  .fs-ev{padding:9px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);
    font-weight:700;font-size:.85rem;cursor:pointer;min-height:42px}
  .fs-ev:active{background:var(--surface2)}
  .fs-text{margin-top:5px;font-size:.95rem;line-height:1.4}
  .swap-row{display:grid;grid-template-columns:1fr 52px 1fr;gap:8px;align-items:end}
  .swap-row .swapbtn{width:52px;height:48px;border-radius:10px;border:1.5px solid var(--line);
    background:var(--surface2);font-size:1.2rem;font-weight:700;color:var(--ink)}
  /* Monitor: letzte Funksprüche */
  .fsm{padding:5px 0;border-bottom:1px solid var(--line);font-size:.82rem}
  .fsm:last-child{border-bottom:none}
  .fsm-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .fsm-top .z{font-weight:750}
  .fsm-top .imp-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
  .fsm-text{color:var(--ink2);margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  @media (min-width:1500px){.fsm{font-size:.95rem}}

  /* ---------- Komm-Skizze (Kommunikationsskizze) ---------- */
  .fk-skizze{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 0 4px;overflow-x:auto}
  /* Zentrale Stammlinie: verbindet die Sammellinien aller Reihen durchgehend, liegt hinter
     den Boxen (nur in den Lücken sichtbar → verläuft zwischen zwei Abschnitten hindurch). */
  .fk-trunk{position:absolute;left:50%;top:8px;bottom:70px;width:2.5px;transform:translateX(-50%);
    background:var(--ink3);z-index:0}
  .fkbox{position:relative;z-index:1;border:2.5px solid var(--fw);border-radius:10px;background:var(--surface);
    padding:10px 18px;text-align:center;min-width:170px;box-shadow:var(--shadow)}
  .fkbox strong{font-size:.95rem}
  .fkbox small{display:block;color:var(--ink2);font-size:.75rem;margin-top:2px}
  .fkbox.ils{border-color:var(--thw)}
  .fkbox.el{border-width:3.5px}
  .fkbox .fk-badges{display:flex;gap:6px;justify-content:center;margin-top:7px;flex-wrap:wrap}
  .fk-vline{width:2.5px;height:34px;background:var(--ink3);position:relative;flex:none}
  .fk-vline .fk-grp{position:absolute;left:10px;top:50%;transform:translateY(-50%);
    white-space:nowrap;font-size:.72rem;font-weight:750;color:var(--ink);
    background:var(--surface2);border-radius:6px;padding:2px 8px;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
  .fk-hline{height:2.5px;background:var(--ink3)}
  .fk-hwrap{display:flex;gap:14px;justify-content:center;align-items:stretch;width:100%}
  .fk-branch{flex:1;min-width:180px;max-width:300px;display:flex;flex-direction:column;align-items:center}
  .fk-branch .fkbox{width:100%}
  /* Betriebsart farblich (FwDV 810): TMO = Netz, DMO = Direkt */
  .fk-grp.mode-TMO,.funk-badge.mode-TMO{color:#3b82f6}
  .fk-grp.mode-DMO,.funk-badge.mode-DMO{color:#f59e0b}
  .funk-badge.mode-TMO{border-color:color-mix(in oklab,#3b82f6 45%,var(--line))}
  .funk-badge.mode-DMO{border-color:color-mix(in oklab,#f59e0b 45%,var(--line))}
  .fk-via{display:inline-flex;align-items:center;font-size:.66rem;font-weight:700;
    color:var(--ink2);border:1px dashed var(--ink3);border-radius:6px;padding:2px 7px}
  .fk-legende{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:8px 0 2px;
    font-size:.72rem;font-weight:600;color:var(--ink2)}
  .fk-legende span{display:inline-flex;align-items:center;gap:6px}
  .fk-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
  .fk-dot.mode-TMO{background:#3b82f6}
  .fk-dot.mode-DMO{background:#f59e0b}

  footer.note{max-width:720px;margin:0 auto;padding:0 14px 110px;color:var(--ink3);font-size:.78rem;text-align:center}
  @media (min-width:900px){footer.note{padding-bottom:40px}}

  /* ---------- Druck: Einsatzbericht ---------- */
  #printArea{display:none}
  @media print{
    body{background:#fff;color:#000}
    #app,nav.tabs,nav.rail,.sheet,.sheet-backdrop,#splash,footer.note{display:none!important}
    #printArea{display:block;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#000}
    #printArea .p-head{display:flex;justify-content:space-between;align-items:flex-start;
      border-bottom:3px solid #000;padding-bottom:10px;margin-bottom:14px}
    #printArea .p-head h1{font-size:20pt;margin:0 0 2px}
    #printArea .p-head .p-sub{font-size:9pt;letter-spacing:.12em;text-transform:uppercase;color:#444}
    #printArea .p-mark{border:2px solid #000;border-radius:6px;padding:6px 10px;font-weight:800;
      font-family:ui-monospace,Menlo,Consolas,monospace}
    /* Eigenes Logo (Einstellungen › Stammdaten) statt der LOTSE112-Wortmarke: kein Kasten, nur Größenbegrenzung */
    #printArea .p-mark.p-logo{border:none;padding:0}
    #printArea .p-mark.p-logo img{display:block;max-height:22mm;max-width:55mm;object-fit:contain}
    #printArea h2{font-size:11pt;letter-spacing:.08em;text-transform:uppercase;
      border-bottom:1px solid #000;padding-bottom:3px;margin:18px 0 8px}
    #printArea table{width:100%;border-collapse:collapse;font-size:10pt}
    /* Bei vielen Zeilen (z. B. viele Einsatzabschnitte/Einheiten) über mehrere Seiten:
       Kopfzeile auf jeder Seite wiederholen, Zeilen nie zerschneiden. */
    #printArea thead{display:table-header-group}
    #printArea th{text-align:left;font-size:8pt;letter-spacing:.06em;text-transform:uppercase;
      border-bottom:1.5px solid #000;padding:4px 6px}
    #printArea td{border-bottom:.5px solid #999;padding:5px 6px;vertical-align:top}
    #printArea .meta td{border-bottom:none;padding:2px 6px}
    #printArea .meta td:first-child{font-weight:700;width:150px}
    #printArea .p-mono{font-family:ui-monospace,Menlo,Consolas,monospace}
    #printArea .p-sum{margin-top:10px;font-size:10.5pt;font-weight:700}
    #printArea .p-foot{margin-top:34px;display:flex;justify-content:space-between;gap:40px;font-size:9pt;color:#333}
    #printArea .p-sign{flex:1;border-top:1px solid #000;padding-top:4px;margin-top:28px}
    #printArea tr{break-inside:avoid}
    /* Lagekarte & Fotos im Druck */
    #printArea{print-color-adjust:exact;-webkit-print-color-adjust:exact}
    #printArea .p-map{position:relative;width:100%;aspect-ratio:16/10;border:1.5px solid #000;
      border-radius:4px;overflow:hidden;break-inside:avoid;margin:6px 0 10px;background:#fff}
    #printArea .p-map .lg-canvas{position:absolute;inset:0}
    /* Schematische Geo-Lagekarte (Online-Modus ohne Screenshot): neutraler Rasterhintergrund */
    #printArea .p-map-schema .lg-canvas{background-color:#f4f3ef;
      background-image:linear-gradient(#e4e2db 1px,transparent 1px),linear-gradient(90deg,#e4e2db 1px,transparent 1px);
      background-size:8% 8%}
    #printArea .p-map-note{position:absolute;left:6px;bottom:6px;font-size:7.5pt;color:#555;
      background:rgba(255,255,255,.82);padding:2px 6px;border-radius:4px;max-width:70%}
    #printArea .p-legend{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;font-size:9.5pt}
    #printArea .p-legend div{display:flex;align-items:center;gap:8px;padding:2px 0}
    #printArea .p-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    #printArea .p-fotos .p-foto{margin:0;break-inside:avoid}
    #printArea .p-fotos img{width:100%;border:1px solid #999;border-radius:3px}
    #printArea .p-fotos .p-foto-cap{font-size:8.5pt;color:#333;margin-top:2px;line-height:1.3}
    /* Seitenkopf/-fuß + Seitenzahl über @page-Randboxen (kein position:fixed → keine Überlagerung
       des Inhalts). Kopftext kommt aus der versteckten Quelle .p-run-src via string-set. */
    @page{
      margin:20mm 13mm 13mm;
      @top-right{content:string(rptHead);
        font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:8pt;color:#777}
      @bottom-right{content:"Seite " counter(page) " von " counter(pages);
        font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:8pt;color:#777}
    }
    #printArea .p-run-src{string-set:rptHead content(text);height:0;line-height:0;font-size:0;color:transparent;overflow:hidden}
    #printArea .p-print-ts{margin-top:16px;font-size:8pt;color:#666}
    /* Komm-Skizze im Druck: ohne Schatten, klare S/W-Linien */
    #printArea .p-skizze{margin:6px 0 12px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
    /* Viele Abschnitte: Skizze nicht abschneiden – Branch-Reihe umbrechen, Seite darf brechen */
    #printArea .p-skizze .fk-skizze{overflow:visible}
    #printArea .p-skizze .fk-hwrap{flex-wrap:wrap;row-gap:18px}
    #printArea .p-skizze .fk-branch{break-inside:avoid}
    #printArea .p-skizze .fkbox{box-shadow:none;background:#fff;border-color:#000}
    #printArea .p-skizze .fkbox.ils{border-color:#555}
    #printArea .p-skizze .fk-vline,#printArea .p-skizze .fk-hline{background:#666}
    #printArea .p-skizze .fk-grp{background:#eee;color:#000}
    #printArea .p-skizze .fk-legende{color:#333}
    /* Lagekarte, Komm-Skizze und jedes Lagebild quer auf je eine eigene Seite –
       hochkant sind sie zu klein/abgeschnitten. Named Page + Umbruch je Block. */
    @page quer{ size:A4 landscape }
    #printArea .p-land{ page:quer; break-before:page; page-break-before:always }
    #printArea .p-land:first-child{ break-before:avoid }
    #printArea .p-land > h2{ break-after:avoid; margin-top:0 }
    #printArea .p-land .p-map{ max-height:145mm; margin-inline:auto }
    #printArea .p-land .p-skizze{ margin-top:10px }
    /* Streckenkarte der Wasserförderung: alleiniger Inhalt der Seite (keine Legende darunter) →
       darf fast die ganze Höhe/Breite ausfüllen, statt auf 145mm gedeckelt zu sein. */
    #printArea .p-land .p-map.p-map-route{ max-height:165mm; aspect-ratio:1.64; margin-inline:auto }
  }

/* ---------- Druck-Auswahl (welche Bereiche in den Bericht) ---------- */
.print-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.print-pick{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);cursor:pointer;font-weight:600}
.print-pick span{flex:1;min-width:0}
.print-pick svg{width:22px;height:22px;flex:none;stroke:var(--ink2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.print-pick:has(input:checked) svg{stroke:var(--fw)}
.print-pick:has(input:checked){border-color:var(--fw)}
.print-pick input{width:20px;height:20px;flex:none;accent-color:var(--fw)}

/* ---------- Dialoge (ersetzen Browser-alert/confirm) ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(20,16,14,.5)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:61;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.35);
  width:min(460px,calc(100vw - 32px));padding:20px 22px}
.modal h2{font-size:1.05rem;font-weight:750;margin:0 0 8px}
.modal p{margin:0 0 18px;color:var(--ink2);line-height:1.5;white-space:pre-line}
/* Rechtstexte im Dialog */
.modal .rechts-kurz p{margin:0 0 10px;white-space:normal}
.modal .rechts-kurz p:last-child{margin-bottom:14px}
.modal .rechts-scroll{max-height:min(58vh,500px);overflow-y:auto;margin:0 0 16px;padding-right:8px;
  color:var(--ink2);font-size:.88rem;line-height:1.5;-webkit-overflow-scrolling:touch}
.modal .rechts-scroll h3{font-size:.9rem;font-weight:750;color:var(--ink);margin:15px 0 4px}
.modal .rechts-scroll h3:first-child{margin-top:0}
.modal .rechts-scroll p{margin:0 0 8px;white-space:normal}
.modal .rechts-scroll ul{margin:0 0 8px;padding-left:20px}
.modal .rechts-scroll li{margin:3px 0}
.modal .rechts-scroll a{color:var(--accent)}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modal-btns .btn{min-height:48px}
/* Formatierte Übernahme-Meldung (Alarm-Foto): Absätze + Org-Farben */
.modal .ok-list{margin:2px 0 14px;display:flex;flex-direction:column;gap:10px}
.modal .ok-row{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.modal .ok-row.ok-ort{background:color-mix(in oklab,#16a34a 11%,var(--surface));
  border-color:color-mix(in oklab,#16a34a 32%,var(--line))}
.modal .ok-ico{font-size:1.3rem;line-height:1.35;flex:none}
.modal .ok-body{flex:1;min-width:0}
.modal .ok-tt{font-weight:750;font-size:.9rem;color:var(--ink);margin-bottom:4px;letter-spacing:.01em}
.modal .ok-row.ok-ort .ok-tt{color:#16a34a}
.modal .ok-addr{color:var(--ink);font-weight:650;line-height:1.4}
.modal .ok-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.modal .ok-ul li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink2);min-width:0}
.modal .ok-ul li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal .ok-hint{margin:0 0 18px;padding:10px 12px;border-radius:10px;white-space:normal;
  background:color-mix(in oklab,#f59e0b 13%,var(--surface));
  border:1px solid color-mix(in oklab,#f59e0b 32%,var(--line));
  color:var(--ink2);font-size:.85rem;line-height:1.45}
.modal .ok-row.ok-dup{opacity:.65}
/* Kopf-Feld im Alarm-Foto-Fenster: Eingabe + ✕ zum Verwerfen */
.ocr-kopf{display:flex;gap:8px;align-items:center}
.ocr-kopf input{flex:1;min-width:0}
.ocr-kopf .kat-x{flex:none}
/* Feld-Kopfzeile: Label + Schalter (z. B. Verfügungs-/Bereitstellungsraum) */
.field-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.field-head label{margin:0}
/* Logo-Upload in den Einstellungen (Allgemein › bei UG-Namen) */
.logo-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-preview{width:64px;height:64px;flex:none;object-fit:contain;border:1px solid var(--line);
  border-radius:10px;background:#fff;padding:6px}
.logo-preview-empty{display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.68rem;color:var(--ink3);padding:4px}
.logo-row-btns{display:flex;gap:8px;flex-wrap:wrap}
/* what3words-Zeile (eigene vollbreite Zeile in den Einsatzstammdaten) */
.w3w-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.w3w-row input{flex:1;min-width:160px;font-family:ui-monospace,Menlo,Consolas,monospace}
.w3w-row .btn{flex:none;min-height:44px;white-space:nowrap}

/* Beschriftung verknüpfter Abschnittsflächen auf der Lagekarte */
.lg-arealbl{position:absolute;transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  font-size:.8rem;font-weight:800;color:var(--fw);text-align:center;white-space:nowrap;
  background:color-mix(in oklab,var(--surface) 82%,transparent);padding:2px 8px;border-radius:6px}
@media (min-width:1500px){.lg-arealbl{font-size:1rem}}
/* Großes, verschiebbares Abschnitts-Label „EA n – Bezeichnung“ */
.lg-ealbl{position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:grab;touch-action:none;
  display:inline-flex;align-items:center;line-height:1;text-align:center;
  font-size:.72rem;font-weight:800;color:var(--fw);white-space:nowrap;
  background:color-mix(in oklab,var(--surface) 84%,transparent);
  border:2px solid currentColor;border-radius:7px;padding:2px 7px;box-shadow:var(--shadow)}
.lg-ealbl:active{cursor:grabbing}

/* ---------- Lagekarte: Online-Karte (Leaflet) ---------- */
#lgMap{width:100%;height:100%;background:var(--surface2)}
.leaflet-container{font:inherit}
.lg-divicon{background:none;border:none}
.lg-mk{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.lg-drawbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1000;
  display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:8px 12px;font-size:.85rem;font-weight:650}
.lg-drawbar button{min-height:40px;padding:6px 14px;border-radius:8px;font-weight:700;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.lg-drawbar button[data-dr="ok"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* Lagekarte: Modus-Zeile + kompakte Kartengrundlagen-Auswahl */
.lg-modes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.lg-modes .seg{margin-bottom:0}
.lg-layerpick{display:inline-flex;gap:2px;background:var(--surface2);border:1px solid var(--line);
  border-radius:9px;padding:3px}
.lg-layerpick button{min-height:36px;padding:5px 12px;border-radius:7px;font-size:.8rem;
  font-weight:650;color:var(--ink2)}
.lg-layerpick button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
@media (max-width:899px){.lg-layerpick button{min-height:42px}}

/* ---------- Atemschutz: Sammelstelle & Überwachung ---------- */
.as-nr{position:relative;flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:1.2rem;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--surface2);color:var(--ink);border:2.5px solid var(--ink3)}
.as-nr.big{width:62px;height:62px;font-size:1.7rem}
/* im Einsatz: einmal durchgestrichen */
.as-nr.einsatz{border-color:var(--warn);color:var(--warn)}
.as-nr.einsatz::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:3px;
  background:var(--warn);transform:rotate(-20deg)}
/* zurück: gekreuzt durchgestrichen */
.as-nr.zurueck{border-color:var(--ink3);color:var(--ink3);opacity:.7}
.as-nr.zurueck::before,.as-nr.zurueck::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:3px;background:var(--ink3)}
.as-nr.zurueck::before{transform:rotate(35deg)}
.as-nr.zurueck::after{transform:rotate(-35deg)}

.as-trupp{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--ink3);
  border-radius:14px;box-shadow:var(--shadow);padding:13px 14px;margin-bottom:10px}
.as-trupp.status-einsatz{border-left-color:var(--warn)}
.as-trupp.status-zurueck{border-left-color:var(--line);opacity:.7}
.as-trupp-head{display:flex;align-items:center;gap:14px}
.as-mit{font-weight:750;font-size:1.02rem;line-height:1.25}
.as-typ{font-weight:600;font-size:.78rem;color:var(--ink2)}
.as-sub2{font-size:.82rem;color:var(--ink2);margin-top:3px}
.as-trupp.is-sitr{border-left-color:var(--good)}
.as-sitr-badge{display:inline-block;font-weight:750;font-size:.74rem;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;background:var(--good-bg);color:var(--good);text-transform:uppercase}
.as-warnbanner{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;padding:10px 12px;
  border-radius:12px;background:var(--warn-bg);color:var(--warn);font-size:.86rem;font-weight:600;line-height:1.35}
.as-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.as-actions .btn{min-height:46px;padding:8px 16px;font-size:.9rem}

.as-traeger-list{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:640px){.as-traeger-list{grid-template-columns:1fr 1fr}}
.as-traeger{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:11px 14px}
.as-traeger.gebunden{opacity:.6}
.as-tr-name{font-weight:700}

.as-pick{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:520px){.as-pick{grid-template-columns:1fr 1fr}}
.as-pick button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-height:56px;padding:10px 14px;border:2px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);font-weight:650;text-align:left}
.as-pick button small{font-weight:500;color:var(--ink3);font-size:.76rem}
.as-pick button.active{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 9%,var(--surface))}

.as-ueber-list{display:grid;grid-template-columns:1fr;gap:9px}
.as-ueber{display:flex;align-items:flex-start;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-left:5px solid var(--warn);border-radius:12px;
  box-shadow:var(--shadow);padding:9px 13px}
.as-ueber .as-nr.big{width:44px;height:44px;font-size:1.2rem}
.as-ueber .as-mit{font-size:.9rem;line-height:1.3}
.as-timer{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.as-timer .mono{font-size:1.3rem;font-weight:800;white-space:nowrap}
.as-timer .mono.warn{color:var(--warn)}
.as-timer .mono.krit{color:var(--accent)}
.as-timer .btn{min-height:38px;padding:6px 12px}
.as-uz{padding:1px 0}
/* Blinkende Kachel, wenn eine Druckabfrage (1/3 bzw. 2/3) fällig ist */
@keyframes as-blink{0%,100%{background:var(--surface)}50%{background:color-mix(in oklab,var(--warn) 24%,var(--surface))}}
.as-ueber.blink{animation:as-blink .9s steps(1,end) infinite;border-color:var(--warn);box-shadow:0 0 0 2px var(--warn),var(--shadow)}
.as-ack{background:var(--warn);color:#fff;border:none;font-weight:750}
.as-ack:active{filter:brightness(.92)}
@keyframes as-blink-krit{0%,100%{background:var(--surface)}50%{background:color-mix(in oklab,var(--accent) 24%,var(--surface))}}
.as-ueber.danger.blink{animation-name:as-blink-krit;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.as-druck .as-low{color:var(--accent);font-weight:800}
.as-loc{margin-top:4px;font-size:.88rem;color:var(--ink);line-height:1.35}
.as-loc strong{font-weight:750}
.as-loc-funk{display:inline-block;font-size:.78rem;font-weight:700;color:var(--thw);
  background:color-mix(in oklab,var(--thw) 12%,var(--surface));border-radius:5px;padding:1px 7px;margin-left:4px}
.as-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.as-chip{display:flex;flex-direction:column;line-height:1.15;background:var(--surface2);
  border:1px solid var(--line);border-radius:8px;padding:3px 9px}
.as-chip b{font-size:.57rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-bottom:1px}
.as-chip i{font-style:normal;font-weight:750;font-size:.86rem;font-variant-numeric:tabular-nums}
.as-chip.hot{border-color:color-mix(in oklab,var(--warn) 55%,var(--line));
  background:color-mix(in oklab,var(--warn) 12%,var(--surface))}
.as-chip.hot i{color:var(--warn)}
.as-vorlauf{font-size:.62rem;font-weight:700;color:var(--ink3);text-transform:uppercase}
/* Info-Fragezeichen mit Tooltip (Hover + Fokus/Tap) */
.as-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink3);
  font-size:.62rem;font-weight:800;line-height:1;cursor:help;position:relative;vertical-align:middle}
.as-help:hover,.as-help:focus{color:var(--ink);border-color:var(--ink3);outline:none}
.as-help::after{content:attr(data-tip);position:absolute;bottom:150%;left:50%;transform:translateX(-50%);
  width:max-content;max-width:230px;background:var(--ink);color:var(--surface);
  padding:8px 10px;border-radius:9px;font-size:.72rem;font-weight:600;line-height:1.4;text-transform:none;
  letter-spacing:normal;text-align:left;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .12s;z-index:60}
.as-help::before{content:"";position:absolute;bottom:150%;left:50%;transform:translate(-50%,90%);
  border:6px solid transparent;border-top-color:var(--ink);opacity:0;transition:opacity .12s;z-index:60}
.as-help:hover::after,.as-help:focus::after,.as-help:hover::before,.as-help:focus::before{opacity:1}
.as-phase{font-size:.8rem;font-weight:700;margin-top:5px;color:var(--ink2)}
.as-phase.ok{color:var(--thw)}
.as-phase.warn{color:var(--warn)}
.as-phase.krit{color:var(--accent)}
.as-check{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface)}
.as-check input{width:20px;height:20px;flex:none;accent-color:var(--accent)}

/* Atemschutz: Druck-Eingaben & Anzeige */
.as-druckrow{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.as-druckrow:last-child{border-bottom:none}
.as-druckrow span{flex:1;min-width:0;font-weight:650}
.as-druckrow input[data-endd]{width:120px;flex:none}
/* „kein weiterer Einsatz" je Person im Rückmelde-Dialog */
.as-raus{flex:0 0 100%;display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;
  color:var(--ink2);cursor:pointer;margin-top:2px}
.as-raus input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
/* Geräteträger „außer Dienst" (kein weiterer Atemschutz-Einsatz) */
.as-traeger.ausser{opacity:.6}
.as-traeger.ausser .as-tr-name{text-decoration:line-through;text-decoration-color:var(--ink3)}
.as-druck{display:inline-block;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-weight:700;font-size:.8rem;color:var(--thw);
  background:color-mix(in oklab,var(--thw) 12%,var(--surface));border-radius:5px;padding:1px 6px}
.as-mit{line-height:1.5}

/* Einstellungen: QR-Code zum Tablet-Verbinden */
.cfg-qr{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cfg-qr img{width:176px;height:176px;border-radius:10px;background:#fff;padding:8px;border:1px solid var(--line);image-rendering:pixelated}
.cfg-qr>div{flex:1;min-width:200px}

/* Fahrzeugkatalog-Verwaltung in den Einstellungen */
.kat-list{border:1px solid var(--line);border-radius:10px;max-height:280px;overflow-y:auto;padding:6px 12px}
.kat-grp{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin:12px 0 4px}
.kat-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.kat-row:last-child{border-bottom:none}
.kat-row span{flex:1;min-width:0;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kat-x{width:34px;height:34px;flex:none;border-radius:8px;border:1.5px solid var(--line);
  color:var(--accent);font-weight:700;background:var(--surface)}
.kat-x:active{background:var(--surface2)}
.cfg-bm-input{width:64px;flex:none;min-height:40px;padding:6px;text-align:center}
.ocr-tag{font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:6px;white-space:nowrap}
.ocr-tag.ok{background:color-mix(in oklab,var(--good,#2e7d32) 16%,var(--surface));color:var(--good,#2e7d32)}
.ocr-tag.neu{background:color-mix(in oklab,var(--warn) 16%,var(--surface));color:var(--warn)}
.ocr-tag.da{background:var(--surface2);color:var(--ink3)}
.cam-overlay{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column}
.cam-overlay video{flex:1;width:100%;height:100%;object-fit:contain;background:#000;min-height:0}
.cam-bar{display:flex;gap:12px;justify-content:center;padding:14px calc(14px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom));background:#111}
.cam-bar .btn{min-height:52px;padding:10px 24px;font-size:1rem}
.kat-add{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.kat-add select{flex:none;width:110px}
.kat-add input{flex:1;min-width:140px}
.kat-add .btn{flex:none}
.kat-nr{display:inline-block;min-width:2.2em;color:var(--ink3);font-size:.78rem;text-align:right}

/* Lagekarten-Legende: bei Bedarf zweispaltig, getrennt Marker / Fahrzeuge */
.lg-leg-body.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
.lg-leg-sec h3{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.lg-leg-sec + .lg-leg-sec{margin-top:0}

/* Handy: Datums-/Zeitfelder nicht über den Rand hinaus. iOS Safari gibt diesen Feldern eine
   feste Inhaltsbreite, die width/min-width ignoriert – erst -webkit-appearance:none lässt sie
   auf die Containerbreite schrumpfen. Nur mobil (am Desktop bliebe sonst der Kalender-Button weg). */
@media (max-width:899px){
  input[type="datetime-local"],input[type="time"],input[type="date"]{
    -webkit-appearance:none;appearance:none;width:100%;min-width:0;max-width:100%}
  .field{min-width:0}
  .form-grid > *{min-width:0}
}

/* Monitor: Untertitel in der Abschnitts-/BR-Kachel (z. B. Bereitstellungsraum-Ort) */
.ab-cardsub{font-size:.82rem;color:var(--ink2);font-weight:600;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1500px){.ab-cardsub{font-size:.95rem}}

/* Monitor: Atemschutz-Trupp-Übersicht (3 Spalten: Bereitschaft / Einsatz / abgelegt) */
.as-mon-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px}
.as-mon-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.as-mon-coltitel{font-size:.85rem;font-weight:800;letter-spacing:.02em;color:var(--ink2);
  text-transform:uppercase;padding-bottom:5px;border-bottom:2px solid var(--line)}
.as-mon-coltitel .mono{color:var(--ink3);font-weight:700}
.as-mon-kachel{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-left:5px solid var(--son);border-radius:12px;padding:8px 10px;min-width:0}
.as-mon-kachel.st-einsatz{border-left-color:var(--warn)}
.as-mon-kachel.st-zurueck{border-left-color:var(--line);opacity:.68}
.as-mon-kachel .as-nr{width:40px;height:40px;font-size:1.05rem}
.as-mon-info{min-width:0;flex:1}
.as-mon-mit{font-weight:700;font-size:.92rem;line-height:1.2;color:var(--ink)}
.as-mon-sub{font-size:.8rem;font-weight:650;color:var(--warn);margin-top:2px}
.as-mon-kachel.st-registriert .as-mon-sub,
.as-mon-kachel.st-zurueck .as-mon-sub{color:var(--ink2)}
@media (min-width:1500px){
  .as-mon-mit{font-size:1.05rem}
  .as-mon-sub{font-size:.9rem}
  .as-mon-kachel .as-nr{width:46px;height:46px;font-size:1.2rem}
}

/* Monitor-KPI "Ist-Stärke bestätigt": Ampel nach Bestätigungsgrad (≤40 % rot, ≤70 % gelb, sonst grün) */
.kpic.ist-rot .v{color:var(--accent)}
.kpic.ist-rot .kpi-bar i{background:var(--accent)}
.kpic.ist-gelb .v{color:var(--warn)}
.kpic.ist-gelb .kpi-bar i{background:var(--warn)}
.kpic.ist-gruen .v{color:var(--good)}
.kpic.ist-gruen .kpi-bar i{background:var(--good)}

/* Foto-Dokumentation (eigener Menüpunkt) */
.foto-doku-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.foto-doku-item{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:box-shadow .12s,transform .12s}
.foto-doku-item:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.foto-doku-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface2)}
img.foto-fehlt{object-fit:contain;min-height:120px;
  background:var(--surface2) repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(128,128,128,.09) 8px,rgba(128,128,128,.09) 16px)}
.foto-doku-item figcaption{padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.foto-doku-item .foto-zeit{font-size:.78rem;color:var(--ink3);font-weight:600}
.foto-doku-item .foto-note{font-size:.9rem;color:var(--ink);font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.foto-doku-item .foto-note.leer{color:var(--ink3);font-weight:500;font-style:italic}

/* Kamera-Overlay: Aufnahmezähler + Auslöse-Blitz */
.cam-overlay .cam-count{position:absolute;top:16px;left:0;right:0;text-align:center;
  color:#fff;font-weight:700;font-size:.95rem;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none}
.cam-overlay .btn.flash{filter:brightness(1.8)}

/* Diktier-Feld: Textarea mit Mikrofon-Knopf in der Ecke */
.dictate-wrap{position:relative}
.dictate-wrap textarea{width:100%;padding-right:46px}
.dictate-btn{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.05rem;line-height:1}
.dictate-btn.rec{background:var(--accent);border-color:var(--accent);animation:dictpulse 1s infinite}
@keyframes dictpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 55%,transparent)}
  50%{box-shadow:0 0 0 6px transparent}}

/* Monitor-Seite "Funk & Checklisten": Checklisten mit einzelnen Punkten */
.mon-chk{margin-bottom:16px}
.mon-chk:last-child{margin-bottom:0}
.mon-chk-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mon-chk-name{font-weight:800;font-size:.98rem;color:var(--ink)}
.mon-chk-head .mono{color:var(--ink3);font-weight:700;font-size:.85rem}
.mon-chk-pt{display:flex;align-items:flex-start;gap:9px;padding:3px 0;font-size:.9rem;color:var(--ink)}
.mon-chk-pt.done{color:var(--ink3);text-decoration:line-through}
.mon-chk-head2{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:8px 0 2px}
.mon-chk-box{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;line-height:1;margin-top:1px}
.mon-chk-pt.done .mon-chk-box{background:var(--good);border-color:var(--good);color:#fff}
@media (min-width:1500px){.mon-chk-name{font-size:1.1rem}.mon-chk-pt{font-size:1rem}}

/* Monitor-AS-Seite: Kopf mit registrierten Geräteträgern */
.as-mon-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.as-mon-reg{font-size:.95rem;font-weight:650;color:var(--ink2)}
.as-mon-reg .as-mon-reg-v{font-size:1.25rem;font-weight:800;color:var(--ink)}
.as-mon-reg-frei{color:var(--good)}
@media (min-width:1500px){.as-mon-reg{font-size:1.1rem}.as-mon-reg .as-mon-reg-v{font-size:1.5rem}}
.as-mon-warn{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:12px 16px;border-radius:12px;
  background:var(--warn-bg);color:var(--warn);font-size:1.05rem;font-weight:800;line-height:1.3;
  border:2px solid color-mix(in oklab,var(--warn) 55%,transparent)}
@media (min-width:1500px){.as-mon-warn{font-size:1.3rem}}