:root{
    --bg:#0E1217; --surface:#171C23; --surface2:#1F2630; --surface3:#283140;
    --border:#2A323D; --border2:#39434f;
    --text:#E7ECF2; --muted:#8A95A3; --faint:#5d6976;
    --accent:#FF6A2B;          /* Rettungs-Orange  */
    --flight:#38D39F;          /* Flugzeit (gewertet) */
    --refuel:#FFB02B;          /* Tankzeit (gewertet) */
    --pause:#5B7FB0;           /* Pause (nicht gewertet) */
    --danger:#E5484D;
    --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1600px;margin:0 auto;padding:0 20px 80px}

  /* ---------- Header ---------- */
  header.app{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,#10151c, #10151cee);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
  .head-inner{max-width:1600px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
  .rotor{height:32px;width:auto;flex:0 0 auto;color:var(--accent);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
  .brand h1{font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0}
  .brand .sub{font-size:12px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}

  .header-logo{height:40px;width:auto;margin-left:18px;padding:6px 12px;background:#fff;border-radius:8px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.25)}
  .toolbar{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  /* Ab mittlerer Breite abwärts: Navigation in eine eigene zweite Zeile */
  @media (max-width:1080px){
    .toolbar{margin-left:0;flex-basis:100%;order:3;border-top:1px solid var(--border);padding-top:12px;margin-top:4px}
  }

  button{font-family:var(--sans);cursor:pointer;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);padding:8px 12px;font-size:14px;font-weight:600;transition:.12s background,.12s border-color,.12s transform}
  button:hover{background:var(--surface3);border-color:#4a5666}
  button:active{transform:translateY(1px)}
  button.primary{background:var(--accent);border-color:var(--accent);color:#1a0f08}
  button.primary:hover{background:#ff7d45}
  button.ghost{background:transparent}
  button.danger{color:#ffb4b6;border-color:#5a2b2d}
  button.danger:hover{background:#3a1f20}
  button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  button:disabled{cursor:not-allowed}
  button.danger.locked{color:var(--muted);border-color:var(--border2);background:var(--surface2);opacity:1}
  button.danger.locked:hover{background:var(--surface2)}

  /* ---------- Mission meta ---------- */
  /* Vier Felder: Einsatzort · Datum (schmal) · Lagetoken · Einsatzabschnitte.
     Ohne die vierte Spalte rutschte das EA-Feld in eine zweite Zeile. */
  /* KEIN overflow:hidden – sonst schneidet der abgerundete Rahmen die
     Kurzhilfe-Sprechblasen der Info-Symbole ab. Die runden Außenecken
     entstehen stattdessen über die Eckfelder selbst. */
  .mission{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(230px,1.2fr) auto;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;margin:22px 0 6px}
  .mfield{background:var(--surface);padding:12px 14px;position:relative}
  /* Das Feld mit geöffneter Kurzhilfe nach vorne holen, damit die Sprechblase
     nicht hinter dem Nachbarfeld liegt. */
  .mfield:hover,.mfield:focus-within{z-index:5}
  /* Runde Außenecken der Einsatzdaten-Zeile über die Eckfelder */
  .mission > .mfield:first-child{border-radius:11px 0 0 11px}
  .mission > .mfield:last-child{border-radius:0 11px 11px 0}
  .mfield label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:5px}
  .mfield input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:17px;font-weight:600;font-family:var(--sans);padding:8px 10px}
  .mfield input[type=time]{font-family:var(--mono)}
  .mfield input:hover{border-color:var(--border2)}
  .mfield input:focus{outline:none;border-color:var(--accent);background:var(--surface)}

  /* Geodaten: Einsatzort & Absprungplatz (über die volle Breite des Rasters) */
  .geo-block{grid-column:1 / -1;background:var(--surface);border-top:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:0;padding:14px 16px}
  .geo-group{flex:1;min-width:300px;padding:0 22px}
  .geo-group:first-child{padding-left:0}
  /* senkrechte Trennlinie zwischen den beiden Gruppen */
  .geo-group + .geo-group{border-left:1px solid var(--border2)}
  .geo-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
    font-weight:700;margin-bottom:10px}
  .geo-row{display:flex;flex-wrap:wrap;gap:12px}
  .geo-row .mfield{flex:1;min-width:150px;padding:0;background:transparent}
  .geo-row .mfield label{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.04em;white-space:nowrap}
  .geo-row .mfield.geo-wide{flex:1.6}
  .geo-row .mfield.geo-narrow{flex:.6;min-width:90px}
  .geo-row .mfield.geo-koord{flex:1.5;min-width:200px}
  .geo-row .mfield input{font-size:15px}
  /* Koordinatenfeld mit Karten-Button daneben */
  .koord-wrap{display:flex;gap:6px;align-items:stretch}
  .koord-wrap input{flex:1;min-width:0}
  .koord-map{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:0 9px;border:1px solid var(--border2);border-radius:8px;color:var(--accent);
    background:var(--surface2);text-decoration:none;white-space:nowrap;
    transition:background .12s,border-color .12s}
  .karte-txt{font-size:11.5px;font-weight:600;letter-spacing:.01em}
  /* Umschalter „Offline-Sicherung" in der Editor-Toolbar */
  .offline-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    padding:7px 11px;border:1px solid rgba(26,160,115,.35);border-radius:8px;background:rgba(26,160,115,.06);
    font-size:13px;font-weight:600;color:#8FD9BC;user-select:none;white-space:nowrap;
    transition:background .12s,border-color .12s,color .12s}
  .offline-toggle:hover{border-color:#1AA073;background:rgba(26,160,115,.12)}
  .offline-toggle input{position:absolute;opacity:0;width:0;height:0}
  .offline-toggle .ot-dot{width:9px;height:9px;border-radius:50%;background:rgba(26,160,115,.45);
    box-shadow:0 0 0 2px rgba(255,255,255,.04);transition:background .12s,box-shadow .12s}
  /* Läuft die Sicherung, wird der Schalter deutlich hervorgehoben: kräftigerer
     Rahmen, grüner Grund, heller Text – und ein ruhig pulsierender Punkt als
     Zeichen, dass im Hintergrund tatsächlich etwas arbeitet. */
  .offline-toggle.on{color:#fff;border-color:#1AA073;background:rgba(26,160,115,.22);
    font-weight:700;box-shadow:0 0 0 1px rgba(26,160,115,.35), 0 2px 12px -4px rgba(26,160,115,.6)}
  .offline-toggle.on .ot-dot{background:#25D69B;box-shadow:0 0 0 3px rgba(26,160,115,.3);
    animation:otPuls 2.2s ease-in-out infinite}
  @keyframes otPuls{
    0%,100%{box-shadow:0 0 0 3px rgba(26,160,115,.30)}
    50%    {box-shadow:0 0 0 6px rgba(26,160,115,.06)}
  }
  /* Wer Bewegung im Bild nicht möchte, bekommt die Hervorhebung ohne Animation. */
  @media (prefers-reduced-motion: reduce){
    .offline-toggle.on .ot-dot{animation:none}
  }
  /* Einmaliger Hinweis beim Aktivieren der Offline-Sicherung */
  .offline-hint-overlay{position:fixed;inset:0;background:rgba(6,9,13,.72);z-index:9999;
    display:flex;align-items:center;justify-content:center;padding:20px}
  .offline-hint-box{background:var(--surface);border:1px solid var(--border2);border-radius:14px;
    max-width:520px;width:100%;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .offline-hint-box h3{margin:0 0 12px;font-size:18px;color:var(--accent)}
  .offline-hint-box p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--text)}
  .offline-hint-box ul{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.5;color:var(--text)}
  .offline-hint-box li{margin-bottom:6px}
  .offline-hint-box .ohb-hinweis{font-size:12.5px;color:var(--muted)}
  .offline-hint-box .ohb-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
  .koord-map:hover{background:rgba(255,106,43,.12);border-color:var(--accent)}
  .koord-map.disabled{opacity:.35;pointer-events:none}
  /* Amtlicher Landeskartendienst optisch abgesetzt */
  .koord-map.karte-tiris,.geo-ueb.karte-tiris{color:#4FB3E8;border-color:rgba(79,179,232,.45)}
  .koord-map.karte-tiris:hover,.geo-ueb.karte-tiris:hover{background:rgba(79,179,232,.12);border-color:#4FB3E8}
  /* Mittlerer Block (Entfernung/Höhenunterschied) – etwas schmaler als die
     beiden Punkt-Blöcke; der leere Titel hält die Felder auf gleicher Höhe. */
  .geo-group.geo-mid{flex:.95;min-width:340px}
  .geo-title-leer{visibility:hidden}
  .geo-title-leer::before{content:"\00a0"}
  .geo-mid .geo-row .mfield{min-width:130px}
  /* Datum schmäler halten – ein Datumsfeld braucht nicht die volle Breite */
  .mfield.mf-datum{min-width:0}
  .mfield.mf-datum input{width:158px;min-width:0}
  /* Lagetoken: Code der Lagekarte, einheitliche Zeichenbreite */
  .mfield.mf-lagetoken{min-width:0}
  .mfield.mf-lagetoken .lt-row{display:flex;gap:7px;align-items:center}
  .mfield.mf-lagetoken input{flex:1 1 auto;font-family:var(--mono);letter-spacing:.02em;
    font-size:14.5px;min-width:0}
  /* Schaltfläche zur Lagekarte – nur sichtbar, wenn ein Token eingetragen ist */
  .lt-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;text-decoration:none;
    padding:8px 11px;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);
    color:var(--accent);font-size:12.5px;font-weight:600;white-space:nowrap;
    transition:background .12s,border-color .12s}
  .lt-link:hover{background:rgba(255,106,43,.12);border-color:var(--accent)}
  .lt-link.disabled{opacity:.35;pointer-events:none}
  /* Dezentes Info-Symbol neben Geo-Feld-Beschriftungen (kleiner als der ?-Button) */
  .geo-info-i{display:inline-flex;align-items:center;justify-content:center;
    width:14px;height:14px;border-radius:50%;border:1px solid var(--border2);
    color:var(--muted);background:transparent;font-size:9px;font-weight:700;font-style:normal;
    line-height:1;cursor:help;vertical-align:middle;position:relative;top:-1px;
    transition:.12s color,.12s border-color}
  .geo-info-i:hover,.geo-info-i:focus{color:var(--accent);border-color:var(--accent);outline:none}
  /* Eigene Kurzhilfe-Blase (erscheint bei Hover/Fokus/Tippen) */
  .geo-info-i::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);
    transform:translateX(-50%);white-space:normal;width:190px;
    background:var(--surface3);color:var(--text);border:1px solid var(--border2);
    border-radius:7px;padding:7px 9px;font-size:11px;font-weight:400;font-style:normal;
    line-height:1.35;text-align:left;box-shadow:0 6px 20px rgba(0,0,0,.4);
    opacity:0;visibility:hidden;transition:opacity .12s;z-index:50;pointer-events:none}
  .geo-info-i::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);
    transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border2);
    opacity:0;visibility:hidden;transition:opacity .12s;z-index:50}
  .geo-info-i:hover::after,.geo-info-i:focus::after,
  .geo-info-i:hover::before,.geo-info-i:focus::before{opacity:1;visibility:visible}
  /* Button zwischen Entfernung und Höhenunterschied: Übersicht über beide Punkte */
  .geo-ueb{flex:0 0 auto;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;
    gap:5px;padding:0 9px;height:37px;margin-bottom:0;border:1px solid var(--border2);border-radius:8px;
    color:var(--accent);background:var(--surface2);text-decoration:none;white-space:nowrap;
    transition:background .12s,border-color .12s}
  .geo-ueb:hover{background:rgba(255,106,43,.12);border-color:var(--accent)}
  .geo-ueb.disabled{opacity:.35;pointer-events:none}
  /* Bei Umbruch (schmale Schirme) wird aus der senkrechten eine waagerechte Trennung */
  @media (max-width:760px){
    .geo-group{padding:0}
    .geo-group + .geo-group{border-left:0;border-top:1px solid var(--border2);margin-top:16px;padding-top:16px}
  }

  .einsatzdauer{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;padding:11px 16px;margin:-7px 0 0}
  .einsatzdauer .ic{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
  .einsatzdauer .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .einsatzdauer .span{font-family:var(--mono);color:var(--muted);font-size:14px}
  .einsatzdauer .v{margin-left:auto;font-family:var(--mono);font-size:23px;font-weight:700;color:var(--accent)}

  /* ---------- Tabs ---------- */
  /* Die Registerleiste bleibt beim Scrollen oben stehen (direkt unter der
     Kopfzeile), damit bei langen Rotationslisten immer sichtbar ist, an
     welchem Hubschrauber gerade gearbeitet wird. Der Abstand nach oben
     entspricht der Höhe der Kopfzeile und wird per JavaScript in
     --kopfhoehe gesetzt (die Kopfzeile ist je nach Fensterbreite hoch). */
  .tabs{display:flex;gap:4px;align-items:flex-end;margin:24px 0 0;border-bottom:1px solid var(--border);flex-wrap:wrap;
    position:sticky;top:var(--kopfhoehe,0px);z-index:25;background:var(--bg);padding-top:8px}
  /* Beim Anhaften ein dezenter Schatten, damit sich die Leiste sichtbar von
     der darunter durchlaufenden Tabelle abhebt. */
  .tabs.fixiert{box-shadow:0 6px 14px -8px rgba(0,0,0,.85)}
  .tab{padding:9px 16px;border:1px solid var(--border);border-bottom:none;background:var(--surface);color:var(--muted);border-radius:9px 9px 0 0;font-weight:600;font-size:14px;position:relative;top:1px;display:flex;align-items:center;gap:8px}
  .tab:hover{color:var(--text)}
  .tab.active{background:var(--surface2);color:var(--text);border-color:var(--border2)}
  .tab.active::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);border-radius:2px}
  /* Aktiver Hubschrauber-Reiter: deutlicher abgesetzt als die übrigen. Die
     Sonderreiter (Einsatzabschnitte, Personen, Funkmatrix, Zusammenfassung)
     haben eigene Farben und werden hier ausdrücklich ausgenommen. */
  .tab.active:not(.tab-ea):not(.tab-pers):not(.tab-funk):not(.tab-summary){
    background:linear-gradient(180deg, rgba(255,106,43,.22), rgba(255,106,43,.06));
    border-color:var(--accent);color:#fff;font-weight:700;
    box-shadow:0 -3px 12px -4px rgba(255,106,43,.5)}
  .tab.active:not(.tab-ea):not(.tab-pers):not(.tab-funk):not(.tab-summary)::after{height:3px}
  .tab.active:not(.tab-ea):not(.tab-pers):not(.tab-funk):not(.tab-summary) .dot{
    background:var(--accent);box-shadow:0 0 0 3px rgba(255,106,43,.22)}
  .tab.sum{margin-left:auto}
  .tab.tab-ea{margin-left:auto}
  .tab.tab-ea ~ .tab.tab-pers{margin-left:0}
  .tab.tab-pers.sum-start{margin-left:auto}
  .tab.tab-pers svg,.tab.tab-ea svg{flex:0 0 auto}

  /* Einsatzabschnitte – kräftiges Türkis/Cyan */
  .tab.tab-ea{color:#3FC8E4;border-color:#2E8DA6;background:rgba(63,200,228,.16);font-weight:700}
  .tab.tab-ea:hover{background:rgba(63,200,228,.28);color:#7fdcef}
  .tab.tab-ea.active{background:#3FC8E4;color:#052730;border-color:#3FC8E4}
  .tab.tab-ea.active::after{background:#052730}
  .tab.tab-ea .tabcount{background:rgba(63,200,228,.28);color:#8fe0f2}
  .tab.tab-ea.active .tabcount{background:rgba(0,0,0,.2);color:#052730}

  /* Personen – kräftiges Violett/Magenta */
  .tab.tab-pers{color:#C58CF0;border-color:#8B5FBF;background:rgba(197,140,240,.16);font-weight:700}
  .tab.tab-pers:hover{background:rgba(197,140,240,.28);color:#d9b3f7}
  .tab.tab-pers.active{background:#B57CE8;color:#1f0d33;border-color:#B57CE8}
  .tab.tab-pers.active::after{background:#1f0d33}
  .tab.tab-pers .tabcount{background:rgba(197,140,240,.28);color:#e0c2fb}
  .tab.tab-pers.active .tabcount{background:rgba(0,0,0,.2);color:#1f0d33}
  .tab.add{color:var(--accent);border-style:dashed}

  /* Zusammenfassung hervorheben */
  .tab.tab-summary{color:var(--accent);border-color:var(--accent);background:rgba(255,106,43,.10);font-weight:700}
  .tab.tab-summary svg{flex:0 0 auto}
  .tab.tab-summary:hover{background:rgba(255,106,43,.18);color:var(--accent)}
  .tab.tab-summary.active{background:var(--accent);color:#1a0f08;border-color:var(--accent)}
  .tab.tab-summary.active::after{background:#1a0f08}

  /* Funkmatrix hervorheben (blau, zur Abgrenzung von der Zusammenfassung) */
  .tab.tab-funk{color:var(--flight);border-color:var(--flight);background:rgba(56,211,159,.10);font-weight:700}
  .tab.tab-funk svg{flex:0 0 auto}
  .tab.tab-funk:hover{background:rgba(56,211,159,.18);color:var(--flight)}
  .tab.tab-funk.active{background:var(--flight);color:#06231a;border-color:var(--flight)}
  .tab.tab-funk.active::after{background:#06231a}

  /* Feste Funktionen stehen in einem span, manuell hinzugefügte in einem Eingabefeld
     mit Rahmen + Innenabstand. Damit die Texte in der Spalte exakt untereinander
     stehen, bekommt der span dieselbe Box (Rahmen unsichtbar). */
  .rot.funk .funk-fixed{font-weight:700;color:var(--accent);white-space:nowrap;
    display:inline-block;padding:6px 8px;border:1px solid transparent;border-radius:7px;box-sizing:border-box}
  .rot.funk input.funk-fn-input{font-weight:700;color:var(--accent);background:transparent;border:1px dashed var(--border2);text-align:left;padding:6px 8px}
  .rot.funk input.funk-fn-input::placeholder{font-weight:600;color:var(--muted)}
  .rot.funk input.funk-fn-input:focus{background:var(--surface);border-style:solid;border-color:var(--accent)}
  .rot.funk tr.funk-hs .funk-fixed{color:var(--flight)}
  .rot.funk tr.funk-ea .funk-fixed{color:var(--pause)}
  .rot.funk input.ptext{width:100%;min-width:90px}
  /* Einsatzabschnitte: Namen der EA-Leiter deutlich breiter, Handynummer +20 %
     (Ausgangsbreite .ptext = 130px) */
  .rot.ea td:nth-child(3) input.ptext,
  .rot.ea td:nth-child(4) input.ptext{width:220px}
  .rot.ea td:nth-child(5) input.ptext{width:156px}
  .rot-scroll.no-scroll{overflow-x:visible}
  .rot.funk{width:100%;table-layout:auto}
  /* Deutliche Trennung zwischen den Funktionen: Eine Zeile kann durch mehrere
     Funkgruppen mehrzeilig werden – mit der feinen Standard-Trennlinie
     verschwimmen dann zwei untereinander stehende Funktionen. Daher hier eine
     kräftigere Linie, mehr Luft und ein dezenter Wechsel der Zeilenfarbe. */
  .rot.funk tbody td{border-bottom:2px solid var(--border2);padding-top:9px;padding-bottom:9px}
  .rot.funk tbody tr:last-child td{border-bottom:none}
  .rot.funk tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
  .rot.funk tbody tr:hover td{background:#1b212b}

  /* Übersicht über der Personenliste – jede Angabe in eigener Zeile */
  .pers-stat{display:flex;flex-direction:column;gap:2px;
    margin:0 0 12px;padding:10px 14px;border:1px solid var(--border2);border-radius:9px;
    background:var(--surface2);font-size:14px;color:var(--text)}
  .pers-stat .ps-zeile{display:flex;align-items:baseline;gap:9px}
  .pers-stat .ps-zeile b{font-family:var(--mono);font-size:19px;color:var(--muted);
    min-width:2.1em;text-align:right;line-height:1.25}
  .pers-stat .ps-hinw{font-style:normal;font-size:12.5px;color:var(--faint)}
  .pers-stat .ps-gesamt{margin-top:5px;padding-top:5px;border-top:1px solid var(--border);color:var(--muted)}
  .pers-stat .ps-gesamt b{font-size:16px}
  /* Sind Personen im Einsatz, wird die erste Zeile hervorgehoben. */
  .pers-stat.aktiv{border-color:rgba(255,106,43,.5);background:rgba(255,106,43,.08)}
  .pers-stat.aktiv .ps-offen b{color:var(--accent)}
  .pers-stat.aktiv .ps-offen{font-weight:600}

  /* Lagetoken-Kasten (Zusammenfassung und externe Freigabe) */
  .lagetoken-box{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px;
    padding:8px 14px;border:1px solid rgba(255,106,43,.45);border-radius:9px;
    background:rgba(255,106,43,.08)}
  .lagetoken-box .lt-link{padding:5px 10px;font-size:11.5px}
  .lagetoken-box .lt-hinweis{font-size:11.5px;color:var(--faint);font-style:italic}
  .lagetoken-box .lt-l{font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
  .lagetoken-box .lt-v{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--accent);
    letter-spacing:.06em;word-break:break-all}

  /* Landweg: zwei getrennte Kästchen (hin / retour) */
  /* Landweg-Kästchen: als zusammengehörige Gruppe abgesetzt, damit „hin" und
     „retour" klar zum Wort „Landweg" gehören und nicht mit dem Status
     darüber verschwimmen. */
  .status-cell .landweg-wrap{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap;
    flex:0 0 auto;padding:3px 8px 3px 7px;border:1px solid var(--border);border-radius:20px;
    background:var(--surface2)}
  .status-cell .lw-titel{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--faint);font-weight:700;margin-right:2px}
  .rot.funk .funk-ro{cursor:default;color:var(--muted);opacity:.85}
  .rot.funk .funk-ro:focus{outline:none;border-color:var(--border)}
  .rot.funk .funk-2{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
  /* Status und Landweg stehen nebeneinander – dafür sind die vorderen Spalten
     der Personenliste etwas enger gesetzt (siehe .pers-table unten). */
  .status-cell{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap}
  .landweg-check{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);
    cursor:pointer;user-select:none;font-weight:600;padding:2px 6px;border-radius:14px;
    transition:background .12s,color .12s}
  .landweg-check:hover{background:rgba(255,255,255,.05);color:var(--text)}
  .landweg-check input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0}
  /* Gesetztes Häkchen deutlich hervorheben */
  .landweg-check:has(input:checked){background:rgba(26,160,115,.16);color:#8FD9BC}
  /* Gesperrt: sichtbar, aber erkennbar nicht bedienbar */
  .landweg-check.gesperrt{opacity:.32;cursor:not-allowed}
  .landweg-check.gesperrt:hover{background:transparent;color:var(--muted)}
  .landweg-check.gesperrt input{cursor:not-allowed}
  .funk-standort-row{display:flex;gap:16px;margin:14px 0 4px;flex-wrap:wrap}
  .funk-standort{display:flex;flex-direction:column;gap:5px;flex:1;min-width:260px}
  .funk-standort label{font-size:15px;font-weight:600;color:var(--muted)}
  .funk-standort input{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:15px;font-family:var(--sans)}
  .funk-standort input:focus{outline:none;border-color:var(--accent)}
  .rot.funk .funk-line{display:flex;align-items:center;gap:4px}
  .rot.funk .funk-line input{width:200px;flex:0 0 200px}
  .rot.funk .funk-add{flex:0 0 auto;padding:4px 9px;font-size:15px;line-height:1;font-weight:700}
  .tab .dot{width:8px;height:8px;border-radius:50%;background:var(--flight)}

  /* ---------- Panels ---------- */
  .panel{background:var(--surface2);border:1px solid var(--border2);border-top:none;border-radius:0 0 12px 12px;padding:20px}
  .heli-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
  .heli-head .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
  .heli-head .tag.funk-title{font-size:13px}
  .heli-name{flex:1 1 220px;min-width:180px}
  .heli-name input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:21px;font-weight:700;padding:9px 12px;font-family:var(--sans)}

  .sec-title{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
  .sec-title .line{flex:1;height:1px;background:var(--border)}

  .heli-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:4px}
  .hm-field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
  .hm-field input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:16px;font-weight:600;padding:9px 12px;font-family:var(--sans)}
  .hm-field input[type=time]{font-family:var(--mono)}
  .hm-field input:focus{outline:none;border-color:var(--accent)}
  .mfield label.ea-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;user-select:none;font-weight:600;font-size:15px;width:100%;color:var(--text);letter-spacing:normal;text-transform:none;margin-bottom:0}
  .mfield label.ea-toggle span{color:var(--text);font-weight:600;font-size:15px;letter-spacing:normal;text-transform:none}
  .ea-toggle:hover{border-color:var(--border2)}
  .ea-toggle input{width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}
  .modal-ov{position:fixed;inset:0;z-index:300;background:rgba(8,10,14,.66);display:flex;align-items:center;justify-content:center;padding:20px}
  .modal-box{background:var(--surface2);border:1px solid var(--border2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);max-width:420px;width:100%;padding:20px}
  .modal-msg{margin:0 0 18px;font-size:16px;line-height:1.5;white-space:pre-line;color:var(--text)}
  .modal-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text);padding:9px 12px;font-size:15px;font-family:var(--sans);margin:0 0 16px;resize:vertical}
  .modal-input:focus{outline:none;border-color:var(--accent)}

  .modal-row{display:flex;justify-content:flex-end;gap:10px}
  .hm-field .tinput{width:100%}
  .hm-field .tinput input{width:auto;flex:1}
  .heli-times{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px;margin-top:12px;padding:12px 16px 14px;background:rgba(255,106,43,.06);border:1px solid var(--border2);border-left:3px solid var(--accent);border-radius:11px}
  .heli-times .ht-cap{flex-basis:100%;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:-2px}
  .heli-times .hm-field{min-width:190px}
  .heli-times .hm-field input{background:var(--surface2)}
  /* Eingabefelder (Eintreffen/Abflug) bleiben links; die beiden Auswertungen
     (Einsatzdauer + Restl. Flugzeit Pilot) werden als Block nach rechts geschoben.
     Text in den Feldern bleibt linksbündig. */
  .heli-times .readout-start{margin-left:auto}
  .hm-value{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;font-size:16px;font-weight:700;padding:9px 12px;font-family:var(--mono);min-height:40px;display:flex;align-items:center}
  .hm-value.val-einsatz{color:var(--accent)}
  .hm-value.val-pilot{color:var(--flight)}
  .hm-value.val-pilot.neg{color:#ff7d7f}
  .pilot-timer{display:flex;align-items:center;gap:16px;margin-top:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--border2);border-radius:11px}
  .pilot-timer.over{border-color:var(--danger);background:#2a1416}
  .pt-info{flex:1;min-width:0}
  .pt-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .pt-sub{font-size:12px;color:var(--faint);font-family:var(--mono);margin-top:2px}
  .pt-clock{display:flex;align-items:baseline;gap:2px;font-family:var(--mono)}
  .pt-big{font-size:31px;font-weight:700;color:var(--flight);line-height:1}
  .pt-unit{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-left:6px}
  .pilot-timer.over .pt-big{color:#ff7d7f}
  .pt-btn{font-size:13px;padding:7px 12px}
  .einsatzzeit{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border2);border-radius:11px;padding:11px 16px;margin-top:14px}
  .einsatzzeit .ic{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
  .einsatzzeit .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .einsatzzeit .span{font-family:var(--mono);color:var(--muted);font-size:14px}
  .einsatzzeit .v{margin-left:auto;font-family:var(--mono);font-size:23px;font-weight:700;color:var(--accent)}
  .sumtable td.accent{color:var(--accent)}
  .rot select.liter{min-width:78px;width:100%}
  .rot select.water-pct{min-width:60px;width:100%}
  .rot select.art-sel{min-width:110px;width:100%}
  .rot select.easel{min-width:170px;max-width:260px}
  .rot .col-artgrp{padding-left:16px;border-left:1px solid var(--border)}
  .rot .col-persgrp{padding-left:16px;border-left:1px solid var(--border)}
  .evak-anzahl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
  .evak-anzahl input{width:70px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 8px;font-size:15px;font-family:var(--mono)}
  .evak-anzahl input:focus{outline:none;border-color:var(--accent)}
  .sum-heli{font-weight:700}
  .sum-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px}

  /* ---------- Rotations table ---------- */
  table{width:100%;border-collapse:collapse}
  .rot th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border)}
  .rot td{padding:4px 8px;border-bottom:1px solid #20262f;vertical-align:middle}
  /* Personenliste: vordere Spalten kompakter, damit Status und Landweg
     nebeneinander in eine Zeile passen. */
  .pers-table th,.pers-table td{padding-left:6px;padding-right:6px}
  .pers-table input.ptext{padding:5px 7px;font-size:13px}
  .pers-table .col-status{white-space:nowrap}
  /* Feste Breite der Statusmarkierung: Die Texte sind unterschiedlich lang
     („–" bis „✓ Landweg retour"). Ohne feste Breite würde die Landweg-Gruppe
     in jeder Zeile an einer anderen Stelle beginnen. */
  .pers-table .status-cell > span:first-child{flex:0 0 132px;width:132px;
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
    text-align:center;overflow:hidden}
  .pers-table .status-cell .landweg-wrap{flex:0 0 auto}
  .rot tr:hover td{background:#1b212b}
  .rot td.num{color:var(--faint);font-family:var(--mono);width:34px;text-align:right;padding-right:12px}
  .rot input[type=time]{font-family:var(--mono);background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 6px;font-size:15px;width:90px}
  .rot input[type=time].time-error{border-color:var(--danger);background:#2a1416;color:#ff9ea1;box-shadow:0 0 0 1px var(--danger)}
  .rot select{font-family:var(--sans);background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 8px;font-size:14px}
  .rot input.liter{font-family:var(--mono);background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 8px;font-size:15px;width:80px;text-align:right}
  .rot td.dur{font-family:var(--mono);color:var(--flight);font-weight:600;text-align:right;width:78px}
  .rot td.dur.bad{color:var(--danger)}
  .iconbtn{background:transparent;border:none;color:var(--faint);padding:4px 6px;font-size:17px;line-height:1;border-radius:6px}
  .iconbtn:hover{color:var(--danger);background:#2a1c1d}
  .addrow{margin-top:10px}

  .rot-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
  .ptext{font-family:var(--sans);background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 8px;font-size:14px;width:130px}
  .ptext:focus{outline:none;border-color:var(--accent)}
  .tabcount{font-family:var(--mono);font-size:12px;background:var(--surface3);color:var(--muted);border-radius:20px;padding:1px 7px;margin-left:6px}

  /* person picker button */
  .ppick{font-family:var(--sans);font-size:13px;font-weight:600;background:var(--surface);border:1px dashed var(--border2);color:var(--muted);border-radius:7px;padding:6px 9px;min-width:210px;max-width:280px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .ac-box{position:fixed;z-index:1000;background:var(--surface2);border:1px solid var(--border2);border-radius:9px;box-shadow:0 14px 36px rgba(0,0,0,.5);max-height:300px;overflow-y:auto;padding:4px}
  .ac-item{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:6px;cursor:pointer}
  .ac-item:hover,.ac-item.active{background:var(--accent);color:#1a0f08}
  .ac-item .ac-name{font-size:14px;font-weight:600}
  .ac-item .ac-sub{font-size:12px;color:var(--muted)}
  .ac-item:hover .ac-sub,.ac-item.active .ac-sub{color:#3a2410}
  .ppick:hover{border-color:var(--accent);color:var(--text);background:var(--surface2)}
  .ppick.has{border-style:solid;border-color:#3a6e5c;background:#13241d;color:var(--flight)}

  /* floating panel */
  .ppanel{position:fixed;z-index:200;width:280px;max-height:340px;display:flex;flex-direction:column;background:var(--surface2);border:1px solid var(--border2);border-radius:11px;box-shadow:0 16px 40px rgba(0,0,0,.5);overflow:hidden}
  .pp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border)}
  .pp-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .pp-actions{margin-left:auto;display:flex;gap:6px}
  .pp-mini{padding:3px 8px;font-size:12px;border-radius:6px;background:var(--surface3);border:1px solid var(--border2);color:var(--text)}
  .pp-search{margin:10px 12px 6px;background:var(--surface);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:7px 9px;font-size:14px;font-family:var(--sans)}
  .pp-search:focus{outline:none;border-color:var(--accent)}
  .pp-list{overflow-y:auto;padding:4px 6px 8px}
  .pp-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer}
  .pp-sep{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding:8px 8px 4px;border-top:1px solid var(--border);margin-top:4px}
  .pp-item:hover{background:var(--surface3)}
  .pp-item input{width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}
  .pp-name{font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pp-name b{font-weight:700}
  .pp-fw{font-size:11px;color:var(--muted);background:var(--surface);padding:2px 6px;border-radius:10px}
  .pp-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}

  /* ---------- Event blocks (Tanken / Pause) ---------- */
  .events{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
  .ev{border:1px solid var(--border);border-radius:11px;padding:14px;background:var(--surface)}
  .ev.refuel{border-left:3px solid var(--refuel)}
  .ev.pause{border-left:3px solid var(--pause)}
  .ev-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .ev-head .name{font-weight:700;font-size:15px}
  .ev-head .badge{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:20px}
  .ev.refuel .badge{background:#3a2c10;color:var(--refuel)}
  .ev.pause .badge{background:#1c2738;color:var(--pause)}
  .ev .hint{font-size:12px;color:var(--muted);margin:0 0 12px}
  .ev-list{display:flex;flex-direction:column;gap:8px}
  .ev-row{display:flex;align-items:center;gap:8px}
  .ev-idx{font-family:var(--mono);color:var(--faint);font-size:13px;width:18px;flex:0 0 auto}
  .ev-row input[type=time]{font-family:var(--mono);background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 8px;font-size:15px;width:108px}
  .ev-arrow{color:var(--faint);flex:0 0 auto}
  .ev-dur{font-family:var(--mono);font-size:14px;font-weight:600;margin-left:auto;min-width:54px;text-align:right}
  .rotor-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;flex:0 0 auto}
  .rotor-chk input{width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto}
  .ev-row.as-pause .ev-dur{color:var(--pause)}
  .as-pause-badge{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--pause);background:#1c2738;border:1px solid #2c3a52;border-radius:20px;padding:2px 8px;flex:0 0 auto}
  .ev.refuel .ev-dur{color:var(--refuel)} .ev.pause .ev-dur{color:var(--pause)}
  .ev-empty{font-size:13px;color:var(--faint);padding:4px 0}
  .ev-foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
  .ev-add{font-size:13px;padding:6px 11px}
  .ev.refuel .ev-add:hover{border-color:var(--refuel);color:var(--refuel)}
  .ev.pause .ev-add:hover{border-color:var(--pause);color:var(--pause)}
  .ev-sum{margin-left:auto;display:flex;align-items:baseline;gap:8px}
  .ev-sum-l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .ev-sum-v{font-family:var(--mono);font-size:19px;font-weight:700}
  .ev.refuel .ev-sum-v{color:var(--refuel)} .ev.pause .ev-sum-v{color:var(--pause)}
  .rot input.liter:disabled{opacity:.3;cursor:not-allowed;background:#12161c}
  .cell-na{color:var(--faint);font-family:var(--mono);padding-left:6px}
  .rot tbody tr.rowOffen td{background:#2a1416 !important}
  .rowOffen .ptext{color:#ff9ea0}
  .cell-offen{color:#ff9ea0 !important;font-weight:700}
  .badge-warn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#ffb4b6;background:#3a1f20;border:1px solid #5a2b2d;border-radius:20px;padding:3px 10px;white-space:nowrap}
  .badge-ok{font-size:13px;color:var(--flight);font-weight:600;white-space:nowrap}
  .warnbanner{display:flex;align-items:center;gap:10px;background:#2a1416;border:1px solid #5a2b2d;color:#ffb4b6;border-radius:11px;padding:11px 14px;margin:6px 0 16px;font-size:14px}
  .warnbanner svg{flex:0 0 auto;color:#ff7d7f}
  .tinput{display:inline-flex;align-items:center;gap:5px}
  .mfield .tinput{width:100%}
  .mfield .tinput input{width:auto;flex:1}
  .nowbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:7px;background:var(--surface3);border:1px solid var(--border2);color:var(--muted);cursor:pointer}
  .nowbtn:hover{color:var(--accent);border-color:var(--accent);background:var(--surface2)}
  .nowbtn:active{transform:translateY(1px)}
  .switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
  .switch input{position:absolute;opacity:0;width:0;height:0}
  .track{width:38px;height:22px;border-radius:20px;background:var(--surface3);position:relative;transition:.15s;flex:0 0 auto}
  .track::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#aeb7c2;top:3px;left:3px;transition:.15s}
  .switch input:checked + .track{background:var(--accent)}
  .switch input:checked + .track::after{left:19px;background:#fff}
  .ev-times{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
  .ev-times.disabled{opacity:.4;pointer-events:none}
  .tfield label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .tfield input{font-family:var(--mono);background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:7px 9px;font-size:16px}
  .ev-res{margin-left:auto;text-align:right}
  .ev-res .v{font-family:var(--mono);font-size:21px;font-weight:700}
  .ev.refuel .ev-res .v{color:var(--refuel)}
  .ev.pause .ev-res .v{color:var(--pause)}
  .ev-res .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

  /* ---------- Zeitbilanz signature bar ---------- */
  .balance{margin-top:22px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:18px}
  .balance-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:10px}
  .balance-top .tot .v{font-family:var(--mono);font-size:33px;font-weight:700;color:var(--text)}
  .balance-top .tot .l{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .balance-top .formula{font-size:13px;color:var(--muted);font-family:var(--mono)}
  .balance-top .formula b{color:var(--text)}
  .bar{display:flex;height:34px;border-radius:8px;overflow:hidden;background:#10151c;border:1px solid var(--border)}
  .seg{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;color:#0c1116;min-width:0;overflow:hidden;white-space:nowrap;transition:flex-basis .3s}
  .seg.flight{background:var(--flight)}
  .seg.refuel{background:var(--refuel)}
  .seg.pause{background:repeating-linear-gradient(45deg,#34465e,#34465e 7px,#2b3a4f 7px,#2b3a4f 14px);color:#cdd9e8;position:relative}
  .seg.pause::after{content:"";position:absolute;inset:0;border-left:1px dashed #6f8bad}
  .legend{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap;font-size:13px}
  .legend .it{display:flex;align-items:center;gap:7px;color:var(--muted)}
  .legend .sw{width:12px;height:12px;border-radius:3px}
  .legend .sw.flight{background:var(--flight)}
  .legend .sw.refuel{background:var(--refuel)}
  .legend .sw.pause{background:repeating-linear-gradient(45deg,#34465e,#34465e 4px,#2b3a4f 4px,#2b3a4f 8px)}
  .legend .it b{color:var(--text);font-family:var(--mono)}
  .legend .strike{text-decoration:line-through;text-decoration-color:var(--pause)}

  /* ---------- Summary ---------- */
  .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:22px}
  .kpi{background:var(--surface);padding:16px}
  .kpi .v{font-family:var(--mono);font-size:27px;font-weight:700}
  .kpi .v .kpi-time-h{display:block;line-height:1.05}
  .kpi .v .kpi-time-m{display:block;font-size:14px;font-weight:600;opacity:.6;line-height:1.15}
  .kpi .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  .kpi.accent .v{color:var(--accent)}
  .kpi.flight .v{color:var(--flight)}
  .kpi.refuel .v{color:var(--refuel)}
  .kpi.pause .v{color:var(--pause)}
  .sumtable{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden}
  .sumtable th{background:var(--surface);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;padding:11px 14px;font-weight:600}
  .sumtable th:first-child{text-align:left}
  .sumtable td{padding:11px 14px;border-top:1px solid var(--border);text-align:right;font-family:var(--mono);font-size:15px}
  .sumtable td:first-child{text-align:left;font-family:var(--sans);font-weight:600}
  .sumtable tr:nth-child(even) td{background:rgba(255,255,255,.025)}
  .sumtable tfoot td{background:var(--surface3);font-weight:700;border-top:2px solid var(--border2)}
  .sumtable .flight{color:var(--flight)} .sumtable .refuel{color:var(--refuel)} .sumtable .pause{color:var(--pause)} .sumtable .total{color:var(--text)}
  .sumtable td.txt{text-align:left;font-family:var(--sans);color:var(--muted)}
  .sumtable th.txt{text-align:left}

  /* ---- Benutzerverwaltung: alles einer Person in EINER Zeile ---- */
  .users-table{table-layout:auto}
  .users-table th,.users-table td{padding:7px 10px;font-size:13px;white-space:nowrap;vertical-align:middle}
  .users-table td.txt{font-size:13.5px}
  .users-table td:first-child{font-size:14px}
  .users-table th{font-size:10px;padding:8px 10px}

  /* Nachname und Vorname stehen in eigenen Spalten – die Felder füllen sie
     aus, damit Überschrift und Eingabefeld genau übereinander liegen. */
  .users-table th.col-name,.users-table td.col-name{text-align:left}
  .users-table td.col-name{min-width:170px}
  /* Aussehen wie zuvor – die Felder liegen jetzt außerhalb des Formulars
     (Zuordnung über das form-Attribut), daher hier eigens gesetzt. */
  .users-table td.col-name input[type=text]{
    background:var(--surface2);border:1px solid var(--border2);border-radius:7px;color:var(--text);
    font-family:var(--sans);width:100%;min-width:150px;padding:6px 9px;font-size:13.5px}
  .users-table td.col-name input[type=text]::placeholder{color:var(--faint)}
  .users-table td.col-name input[type=text]:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(255,106,43,.20)}
  .users-table .name-edit{display:none}          /* trägt nur das Formular selbst */
  .users-table .name-cell{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
  .users-table .name-cell input[type=text]{flex:1 1 auto}
  /* Speichern erscheint erst, wenn wirklich etwas geändert wurde. */
  .users-table .name-save{flex:0 0 auto;background:var(--accent);border:none;border-radius:7px;color:#fff;
    font-weight:600;font-family:var(--sans);padding:6px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .12s}
  .users-table .name-save.aktiv{opacity:1;pointer-events:auto}

  /* Lange E-Mail-Adressen kürzen statt die Zeile zu dehnen (vollständige
     Adresse erscheint beim Darüberfahren). */
  .users-table th.col-mail,.users-table td.col-mail{text-align:left}
  .users-table td.col-mail{max-width:210px;overflow:hidden;text-overflow:ellipsis}

  /* Rolle, MFA und Status: Überschrift und Inhalt jeweils mittig */
  .users-table th.col-rolle,.users-table td.col-rolle,
  .users-table th.col-mfa,.users-table td.col-mfa,
  .users-table th.col-status,.users-table td.col-status{text-align:center}
  .users-table .col-rolle{white-space:nowrap}
  .users-table .role-change{display:inline-flex;align-items:center;gap:5px}
  .users-table .col-rolle select{padding:5px 7px;font-size:12.5px;min-width:104px}
  /* „Setzen" erscheint nur bei tatsächlicher Änderung – normalerweise schickt
     die Auswahlliste das Formular selbst ab; die Schaltfläche ist der
     Rückfallweg, wenn JavaScript nicht läuft. */
  .users-table .role-save{background:var(--accent);border:none;border-radius:7px;color:#fff;
    font-weight:600;font-family:var(--sans);padding:5px 10px;font-size:11.5px;cursor:pointer;
    white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
  .users-table .role-save.aktiv{opacity:1;pointer-events:auto}
  /* MFA und Status bleiben in der gewohnten Darstellung der Tabelle
     (gleiche Schrift und Farbe wie die übrigen Werte) – nur mittig. */

  /* Aktionen: feste Spalten, damit die Schaltflächen in allen Zeilen an
     derselben Stelle stehen – auch wenn eine Möglichkeit entfällt (etwa MFA
     bei nicht eingerichteter Zwei-Faktor-Anmeldung oder Löschen beim eigenen
     Konto). Für den fehlenden Fall steht ein leerer Platzhalter. */
  .users-table th.col-akt{text-align:right}
  .users-table td.admin-actions{text-align:right}
  .users-table .admin-actions{display:grid;grid-template-columns:88px 82px 54px 80px;
    gap:5px;justify-content:end;align-items:center}
  .users-table .admin-actions form{display:block;margin:0}
  .users-table .admin-actions button{width:100%;padding:5px 6px;font-size:11.5px;
    white-space:nowrap;border-radius:7px;text-align:center}
  .users-table .act-platz{display:block;height:1px}

  /* Bei schmalen Fenstern lieber waagrecht rollen als umbrechen */
  .users-scroll{overflow-x:auto}

  .empty{color:var(--muted);text-align:center;padding:40px;font-size:15px}
  .filewrap{position:absolute;left:-9999px}
  footer{margin-top:30px;color:var(--faint);font-size:12px;text-align:center}

  /* ---------- Hilfe-Button + Modal ---------- */
  .help-btn{width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border2);background:var(--surface2);color:var(--accent);font-weight:700;font-size:17px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.14s background,.14s color}
  .help-btn:hover{background:var(--accent);color:#1a0f08;border-color:var(--accent)}

  .help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:1000}
  .help-overlay[hidden]{display:none}
  .help-modal{background:var(--surface);border:1px solid var(--border2);border-radius:14px;max-width:640px;width:100%;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.5)}
  .help-modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
  .help-modal-head h2{margin:0;font-size:17px;flex:1;letter-spacing:.04em}
  .help-close{background:none;border:none;color:var(--muted);font-size:27px;line-height:1;cursor:pointer;padding:0 4px}
  .help-close:hover{color:var(--text)}
  .help-modal-body{padding:18px 22px;overflow:auto}
  .help-version{margin:0 0 16px;font-size:14px;color:var(--muted)}
  .help-entry{margin-bottom:18px}
  .help-entry-head{font-weight:700;color:var(--accent);font-size:14px;letter-spacing:.06em;margin-bottom:6px}
  .help-entry-head span{color:var(--faint);font-weight:400;margin-left:6px}
  .help-entry ul{margin:0;padding-left:20px}
  .help-entry li{font-size:14px;color:var(--text);margin:3px 0;line-height:1.45}

  /* ---------- Wasserzeichen unten rechts ---------- */
  .watermark{position:fixed;right:14px;bottom:12px;text-align:right;font-size:13px;line-height:1.5;color:var(--faint);opacity:.7;pointer-events:none;z-index:50;letter-spacing:.02em}

  @media (max-width:1000px){ .kpis{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:820px){
    .mission{grid-template-columns:repeat(2,1fr)}
    /* Umgebrochenes Raster: Rundungen an den tatsächlichen Ecken */
    .mission > .mfield:first-child{border-radius:11px 0 0 0}
    .mission > .mfield:nth-child(2){border-radius:0 11px 0 0}
    .mission > .mfield:nth-last-child(2){border-radius:0 0 0 11px}
    .mission > .mfield:last-child{border-radius:0 0 11px 0}
    .events{grid-template-columns:1fr}
    .tab.sum{margin-left:0}
    .tab.tab-ea{margin-left:0}
    .tab.tab-pers.sum-start{margin-left:0}
    .kpis{grid-template-columns:repeat(2,1fr)}
  }
  .sum-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:6px}
  .sum-toolbar .sec-title{margin:0;flex:1}
  .print-head{display:none}
  .print-namen{display:none}
  .print-foot{display:none}

  @media print{
    @page{ size:A4 landscape; margin:12mm; }
    input::placeholder,textarea::placeholder{ color:transparent!important; opacity:0!important; }
    .geo-info-i{ display:none!important; }
    /* Lagetoken auch auf Papier gut erkennbar */
    .lagetoken-box{ background:#FFF4EE!important; border:0.5px solid #FF6A2B!important;
      padding:5px 10px!important; margin:0 0 10px!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .lagetoken-box .lt-l{ font-size:7pt!important; color:#555!important; }
    .lagetoken-box .lt-v{ font-size:12pt!important; color:#C8471A!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .status-cell .landweg-wrap{ display:none!important; }
    .landweg-check{ display:none!important; }
    .lt-link{ display:none!important; }   /* Schaltfläche zur Lagekarte nicht drucken */
    /* Übersichtszeile der Personenliste auch auf Papier lesbar halten. */
    .pers-stat{ background:#fff!important; border:0.5px solid #999!important;
      font-size:9pt!important; padding:5px 9px!important; margin:0 0 8px!important; }
    .pers-stat .ps-zeile{ font-size:9.5pt!important; }
    .pers-stat .ps-zeile b{ font-size:11pt!important; }
    .pers-stat .ps-hinw{ font-size:8pt!important; }
    header.app{position:static} .tabs{position:static!important;box-shadow:none!important} .toolbar,.tab.add,.addrow,.iconbtn,.delheli,.nowbtn,.ev-add,.pt-btn{display:none!important}
    .watermark,.help-btn,.help-overlay,.editor-topbar{display:none!important}
    body{background:#fff;color:#000} .panel,.ev,.balance,.kpi,.surface{background:#fff!important}
    *{color:#000!important;border-color:#bbb!important}
    /* Statusmarkierungen für Papier: Am Bildschirm ist „Rückflug fehlt" helle
       Schrift auf sehr dunklem Grund – gedruckt wäre das ein schwarzer Balken.
       Daher hier eine zarte helle Hinterlegung mit dunkelroter Schrift. */
    .badge-warn{ background:#FDECEC!important; border:1px solid #E3A9AB!important;
      color:#C8282D!important; font-weight:bold!important; padding:1px 8px!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .badge-ok{ color:#1AA073!important; background:transparent!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .cell-na{ color:#6E6E6E!important; }
    /* „wird gewertet" / „nicht gewertet": am Bildschirm farbige Schrift auf
       sehr dunklem Grund – auf Papier daher hell hinterlegt mit farbigem Rand. */
    .ev-head .badge{ font-size:8pt!important; letter-spacing:.08em; padding:1px 7px!important;
      border-radius:20px; font-weight:bold!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .ev.refuel .badge{ background:#FBF0DC!important; color:#9C6408!important; border:1px solid #E0C186!important; }
    .ev.pause .badge{ background:#ECF1F8!important; color:#40608C!important; border:1px solid #B4C7E0!important; }
    .seg{color:#000!important}

    /* ---- A4-Druck der Zusammenfassung (Design wie das E-Mail-PDF) ---- */
    body.print-summary header.app,
    body.print-summary #mission,
    body.print-summary #tabs,
    body.print-summary .wrap > footer,
    body.print-summary .share-admin,
    body.print-summary .sum-toolbar{ display:none!important; }
    body.print-summary .wrap{ padding:0!important; max-width:none!important; }
    body.print-summary .panel{ border:none!important; padding:0!important; }
    body.print-summary .rot-scroll{ overflow:visible!important; margin:0!important; padding:0!important; }

    /* Kopf: oranger Titel mit oranger Akzentlinie (wie im PDF) */
    body.print-summary .print-head{ display:block; margin-bottom:11px; border-bottom:2px solid #FF6A2B; padding-bottom:6px; }
    body.print-summary .print-head h2{ margin:0; font-size:17pt; letter-spacing:.02em; color:#FF6A2B; }
    body.print-summary .print-head .ph-meta{ font-size:10pt; margin-top:3px; color:#000; }
    /* Abschnittstitel orange, klein und gesperrt (wie sectionTitle im PDF) */
    body.print-summary .sec-title{ font-size:9pt; letter-spacing:.10em; margin:11px 0 6px; color:#FF6A2B; font-weight:bold; text-transform:uppercase; }
    body.print-summary .sec-title .line{ display:none!important; }

    /* KPI-Kacheln: weiße Karten mit farbigen Werten in Monospace (wie kpiGrid) */
    body.print-summary .kpis{ grid-template-columns:repeat(4,1fr)!important; gap:0!important; background:#fff!important; border:1px solid #A0A0A0!important; }
    body.print-summary .kpi{ padding:6px 9px!important; border:0.5px solid #D2D2D2!important; background:#fff!important; }
    body.print-summary .kpi .v{ font-family:"Courier New",Courier,monospace!important; font-size:13pt!important; font-weight:bold!important; }
    body.print-summary .kpi .v .kpi-time-m{ font-size:10pt!important; opacity:1; }
    body.print-summary .kpi .l{ font-size:6.5pt!important; letter-spacing:.06em; color:#6E6E6E!important; font-weight:bold; text-transform:uppercase; }
    /* Wertefarben je Kachel-Typ – exakt die PDF-Palette */
    body.print-summary .kpi.accent .v{ color:#FF6A2B!important; }
    body.print-summary .kpi.flight .v{ color:#1AA073!important; }
    body.print-summary .kpi.refuel .v{ color:#C9820A!important; }
    body.print-summary .kpi.pause  .v{ color:#5B7FB0!important; }
    body.print-summary .kpi:not(.accent):not(.flight):not(.refuel):not(.pause) .v{ color:#000!important; }

    /* Tabellen: grauer Kopf wie tableHead im PDF */
    body.print-summary .sumtable{ width:100%!important; border-collapse:collapse!important; }
    body.print-summary .sumtable thead th{ background:#EEEEEE!important; color:#3C3C3C!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-summary .sumtable th, body.print-summary .sumtable td{ padding:4px 6px!important; font-size:8pt!important; border:0.5px solid #CCCCCC!important; }
    body.print-summary .sumtable tr{ page-break-inside:avoid; }
    /* Ausrichtung wie im PDF: Text links, Zahlen rechts (nur die Zeit-Spalte der KPI bleibt zentriert) */
    body.print-summary .sumtable th, body.print-summary .sumtable td{ text-align:right!important; }
    body.print-summary .sumtable th.txt, body.print-summary .sumtable td.txt,
    body.print-summary .sumtable thead th:first-child, body.print-summary .sumtable tbody td:first-child,
    body.print-summary .sumtable tfoot td:first-child{ text-align:left!important; }
    body.print-summary .sumtable td.mono{ text-align:center!important; font-family:"Courier New",Courier,monospace!important; }
    /* Eintreffen und Abflug mittig – durch die Spalte „Betreiber" sind das
       jetzt die Positionen 5 und 6. */
    body.print-summary .sumtable thead th:nth-child(5), body.print-summary .sumtable thead th:nth-child(6){ text-align:center!important; }
    body.print-summary .sumtable td.txt{ color:#000!important; }
    /* Wertefarben in den Zeilen exakt wie im PDF */
    body.print-summary .sumtable td.accent{ color:#FF6A2B!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-summary .sumtable td.flight{ color:#1AA073!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-summary .sumtable td.refuel{ color:#C9820A!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-summary .sumtable td.pause{ color:#5B7FB0!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    /* Summenzeile (tfoot) hervorgehoben wie im PDF */
    body.print-summary .sumtable tfoot td{ font-weight:bold!important; background:#F3F3F3!important; border-top:1px solid #999!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-summary .hint{ font-size:7.5pt!important; margin-top:8px!important; color:#6E6E6E!important; }

    /* Fußzeile wie im PDF: Copyright + Version, dezent unten */
    body.print-summary .print-foot{ display:block!important; margin-top:14px; padding-top:5px; border-top:0.5px solid #BBBBBB;
      font-size:7.5pt; color:#6E6E6E; }

    /* ---- A4-Druck des Hubschrauber-Registers (Rotationsliste) ---- */
    body.print-heli header.app,
    body.print-heli #mission,
    body.print-heli #tabs,
    body.print-heli .wrap > footer,
    body.print-heli .warnbanner,
    body.print-heli .heli-head{ display:none!important; }
    body.print-heli .wrap{ padding:0!important; max-width:none!important; }
    body.print-heli .panel{ border:none!important; padding:0!important; }
    body.print-heli .rot-scroll{ overflow:visible!important; margin:0!important; padding:0!important; }

    /* Kopf: oranger Titel mit oranger Akzentlinie (wie im PDF) */
    body.print-heli .print-head{ display:block; margin-bottom:11px; border-bottom:2px solid #FF6A2B; padding-bottom:6px;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-heli .print-head h2{ margin:0; font-size:17pt; letter-spacing:.02em; color:#FF6A2B!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-heli .print-head .ph-meta{ font-size:10pt; margin-top:3px; color:#000!important; }

    /* Kopfdaten des Hubschraubers (Typ, Kennung, Pilot, Zeiten) kompakt und
       einzeilig statt als große Eingabekacheln. */
    body.print-heli .heli-meta,
    body.print-heli .heli-times{ display:flex!important; flex-wrap:wrap!important; gap:4px 16px!important;
      margin:0 0 8px!important; padding:6px 0!important; border:0!important; background:transparent!important; }
    body.print-heli .heli-times{ border-top:0.5px solid #BBB!important; }
    body.print-heli .hm-field{ background:transparent!important; border:0!important; padding:0!important; margin:0!important;
      flex:0 0 auto!important; display:flex!important; align-items:baseline!important; gap:5px!important; }
    body.print-heli .hm-field label{ font-size:7pt!important; letter-spacing:.04em; text-transform:uppercase; color:#555!important;
      margin:0!important; white-space:nowrap; }
    body.print-heli .hm-field input,
    body.print-heli .hm-value{ font-size:9pt!important; font-weight:700!important; color:#000!important;
      border:0!important; background:transparent!important; padding:0!important; width:auto!important; min-width:0!important; }
    body.print-heli .ht-cap{ flex-basis:100%!important; font-size:7pt!important; letter-spacing:.06em; text-transform:uppercase;
      color:#555!important; margin:0!important; }
    body.print-heli .heli-name{ display:none!important; }
    body.print-heli .nowbtn,body.print-heli .now-wrap .nowbtn{ display:none!important; }

    body.print-heli .sec-title{ font-size:9pt!important; letter-spacing:.10em; margin:11px 0 6px; color:#FF6A2B!important;
      font-weight:bold; text-transform:uppercase; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-heli .sec-title .line{ display:none!important; }

    /* Die Rotationstabelle exakt wie bei der Personenliste auf Seitenbreite
       bringen: feste Pixelbreiten durch berechenbare Prozentwerte ersetzen. */
    body.print-heli table.rot{ width:100%!important; table-layout:fixed!important; border-collapse:collapse!important; }
    body.print-heli table.rot th, body.print-heli table.rot td{ padding:3px 5px!important; font-size:8pt!important;
      border:0.5px solid #CCCCCC!important; vertical-align:top!important; width:auto!important; min-width:0!important;
      white-space:normal!important; word-break:break-word!important; overflow-wrap:anywhere!important; }
    /* Grauer Tabellenkopf wie tableHead im PDF */
    body.print-heli table.rot th{ background:#EEEEEE!important; color:#3C3C3C!important; font-weight:bold;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-heli table.rot th:nth-child(1), body.print-heli table.rot td:nth-child(1){ width:3%!important; }
    body.print-heli table.rot th:nth-child(2), body.print-heli table.rot td:nth-child(2){ width:8%!important; }
    body.print-heli table.rot th:nth-child(3), body.print-heli table.rot td:nth-child(3){ width:8%!important; }
    body.print-heli table.rot th.col-persgrp, body.print-heli table.rot td.col-persgrp{ width:26%!important; }
    body.print-heli table.rot th:last-child, body.print-heli table.rot td:last-child{ display:none!important; }
    body.print-heli table.rot tr{ page-break-inside:avoid; }
    body.print-heli table.rot input,
    body.print-heli table.rot select,
    body.print-heli .ppick{ border:none!important; background:transparent!important; padding:0!important;
      font-size:8pt!important; color:#000!important; width:100%!important; max-width:100%!important; text-align:left!important;
      -webkit-appearance:none!important; appearance:none!important; white-space:normal!important; overflow:visible!important;
      word-break:break-word!important; overflow-wrap:anywhere!important; font-weight:400!important; }
    body.print-heli .evak-anzahl span{ font-size:8pt!important; }
    /* Im Ausdruck die vollständige Namensliste zeigen und den nur am Bildschirm
       sinnvollen Auswahl-Knopf („X Personen") sowie das Anzahl-Feld ausblenden. */
    body.print-heli .col-persgrp .ppick,
    body.print-heli .col-persgrp .evak-anzahl,
    body.print-heli .col-persgrp .cell-na{ display:none!important; }
    body.print-heli .print-namen{ display:block!important; font-size:8pt!important; color:#000!important;
      white-space:normal!important; word-break:break-word!important; overflow-wrap:anywhere!important; line-height:1.35!important; }

    /* „Betankung & Pause" beginnt immer auf einer neuen Seite – zusammen mit
       den Bilanzbalken darunter ergibt das ein eigenes, geschlossenes Blatt. */
    body.print-heli .sec-title.sec-events{ page-break-before:always; break-before:page; margin-top:0!important; }
    body.print-heli .events{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; }
    body.print-heli .ev{ border:0.5px solid #CCCCCC!important; background:#fff!important; padding:8px 10px!important;
      page-break-inside:avoid; }
    body.print-heli .ev-head{ font-size:8.5pt!important; font-weight:bold; color:#3C3C3C!important;
      background:#EEEEEE!important; padding:3px 6px!important; border-radius:3px;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-heli .ev-row,body.print-heli .ev-foot{ font-size:8.5pt!important; }
    body.print-heli .ev-empty{ font-size:8pt!important; color:#6E6E6E!important; }
    body.print-heli .balance{ page-break-inside:avoid; }
    body.print-heli .hint{ font-size:7.5pt!important; margin-top:8px!important; color:#6E6E6E!important; }
    /* Fußzeile wie im PDF */
    body.print-heli .print-foot{ display:block!important; margin-top:14px; padding-top:5px;
      border-top:0.5px solid #BBBBBB; font-size:7.5pt; color:#6E6E6E!important; }
    body.print-heli .addrow,body.print-heli .delheli,body.print-heli .iconbtn,body.print-heli .pt-btn{ display:none!important; }

    /* ---- A4-Druck der Personenliste (Design wie das E-Mail-PDF) ---- */
    body.print-personen header.app,
    body.print-personen #mission,
    body.print-personen #tabs,
    body.print-personen .wrap > footer,
    body.print-personen .heli-head,
    body.print-personen .warnbanner{ display:none!important; }
    body.print-personen .wrap{ padding:0!important; max-width:none!important; }
    body.print-personen .panel{ border:none!important; padding:0!important; }
    body.print-personen .rot-scroll{ overflow:visible!important; margin:0!important; padding:0!important; }
    /* Kopf: oranger Titel mit oranger Akzentlinie (wie im PDF) */
    body.print-personen .print-head{ display:block; margin-bottom:11px; border-bottom:2px solid #FF6A2B; padding-bottom:6px;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-personen .print-head h2{ margin:0; font-size:17pt; letter-spacing:.02em; color:#FF6A2B!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-personen .print-head .ph-meta{ font-size:10pt; margin-top:3px; color:#000!important; }
    /* Übersicht über der Tabelle */
    body.print-personen .pers-stat.aktiv .ps-offen b{ color:#FF6A2B!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-personen .pers-stat .ps-zeile b{ font-family:"Courier New",Courier,monospace!important; }
    /* Tabelle: Spaltenbreiten der Personenliste (Nr · Nachname · Vorname ·
       Organisation · Handy · ISSI · Status · Flüge; letzte Spalte verborgen) */
    body.print-personen table.rot{ width:100%!important; table-layout:fixed!important; border-collapse:collapse!important; }
    body.print-personen table.rot th, body.print-personen table.rot td{ padding:4px 6px!important; font-size:8.5pt!important;
      border:0.5px solid #CCCCCC!important; vertical-align:top!important; width:auto!important; min-width:0!important;
      white-space:normal!important; word-break:break-word!important; overflow-wrap:anywhere!important; }
    body.print-personen table.rot th{ background:#EEEEEE!important; color:#3C3C3C!important; font-weight:bold;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-personen table.rot th:nth-child(1), body.print-personen table.rot td:nth-child(1){ width:4%!important; }
    body.print-personen table.rot th:nth-child(2), body.print-personen table.rot td:nth-child(2){ width:16%!important; }
    body.print-personen table.rot th:nth-child(3), body.print-personen table.rot td:nth-child(3){ width:12%!important; }
    body.print-personen table.rot th:nth-child(4), body.print-personen table.rot td:nth-child(4){ width:23%!important; }
    body.print-personen table.rot th:nth-child(5), body.print-personen table.rot td:nth-child(5){ width:11%!important; }
    body.print-personen table.rot th:nth-child(6), body.print-personen table.rot td:nth-child(6){ width:8%!important; }
    body.print-personen table.rot th:nth-child(7), body.print-personen table.rot td:nth-child(7){ width:18%!important; }
    body.print-personen table.rot th:nth-child(8), body.print-personen table.rot td:nth-child(8){ width:8%!important; }
    /* Statusspalte: „Rückflug fehlt" darf nicht über den Rand laufen. */
    body.print-personen table.rot td:nth-child(7){ white-space:nowrap!important; }
    body.print-personen table.rot td:nth-child(7) .badge-warn{ padding:1px 5px!important; font-size:8pt!important; }
    /* Die letzte Spalte (Löschen-Knopf) im Druck ausblenden. */
    body.print-personen table.rot th:last-child, body.print-personen table.rot td:last-child{ display:none!important; }
    body.print-personen table.rot tr{ page-break-inside:avoid; }
    /* Eingabefelder als schlichten Text darstellen und umbrechen lassen. */
    body.print-personen table.rot input,
    body.print-personen table.rot select,
    body.print-personen input.ptext{ border:none!important; background:transparent!important; padding:0!important;
      font-size:8.5pt!important; color:#000!important; width:100%!important; max-width:100%!important;
      -webkit-appearance:none!important; appearance:none!important;
      white-space:normal!important; overflow:visible!important; text-overflow:clip!important; }
    /* Statusfarben exakt wie im PDF: fehlender Rückflug rot, erledigt grün,
       nichts erfasst grau – dazu die zarte rote Hinterlegung offener Zeilen. */
    body.print-personen .badge-warn{ color:#C8282D!important; font-weight:bold;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-personen .badge-ok{ color:#1AA073!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-personen .cell-na{ color:#6E6E6E!important; }
    body.print-personen tr.rowOffen td{ background:#FDECEC!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-personen .hint{ font-size:7.5pt!important; margin-top:8px!important; color:#6E6E6E!important; }
    /* Fußzeile wie im PDF */
    body.print-personen .print-foot{ display:block!important; margin-top:14px; padding-top:5px;
      border-top:0.5px solid #BBBBBB; font-size:7.5pt; color:#6E6E6E!important; }

    /* ---- A4-Druck der Funkmatrix (Design wie das E-Mail-PDF) ---- */
    body.print-funk header.app,
    body.print-funk #mission,
    body.print-funk #tabs,
    body.print-funk .wrap > footer,
    body.print-funk .heli-head{ display:none!important; }
    body.print-funk .wrap{ padding:0!important; max-width:none!important; }
    body.print-funk .panel{ border:none!important; padding:0!important; }
    body.print-funk .rot-scroll{ overflow:visible!important; margin:0!important; padding:0!important; }
    /* Kopf: oranger Titel mit oranger Akzentlinie (wie im PDF), zentriert */
    body.print-funk .print-head{ display:block; margin-bottom:11px; border-bottom:2px solid #FF6A2B; padding-bottom:6px;
      text-align:center; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-funk .print-head h2{ margin:0; font-size:18pt; letter-spacing:.02em; color:#FF6A2B!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-funk .print-head .ph-meta{ font-size:10pt; margin-top:3px; color:#000!important; }
    /* Tabelle: grauer Kopf wie tableHead im PDF */
    body.print-funk table.rot{ width:100%!important; border-collapse:collapse!important; }
    body.print-funk table.rot th, body.print-funk table.rot td{ padding:4px 6px!important; font-size:9pt!important;
      border:0.5px solid #CCCCCC!important; vertical-align:top!important; }
    body.print-funk table.rot th{ background:#EEEEEE!important; color:#3C3C3C!important; font-weight:bold;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-funk table.rot tr{ page-break-inside:avoid; }
    body.print-funk table.rot th:last-child, body.print-funk table.rot td:last-child{ display:none!important; }
    body.print-funk .funk-add,body.print-funk .funk-2nd .iconbtn{ display:none!important; }
    body.print-funk input.ptext{ border:none!important; background:transparent!important; padding:0!important;
      font-size:9pt!important; color:#000!important; }
    /* Farbe der Funktionsspalte wie im PDF und am Bildschirm:
       Hubschrauber grün, Einsatzabschnitte blau, feste Funktionen orange. */
    body.print-funk .funk-fixed{ font-weight:700; padding:0!important; border:0!important;
      color:#FF6A2B!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body.print-funk tr.funk-hs .funk-fixed{ color:#1AA073!important; }
    body.print-funk tr.funk-ea .funk-fixed{ color:#5B7FB0!important; }
    body.print-funk input.funk-fn-input{ color:#FF6A2B!important; font-weight:700; border:0!important;
      background:transparent!important; padding:0!important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    /* Trennung der Funktionen auch auf Papier deutlich halten */
    body.print-funk .rot.funk tbody td{ border-bottom:1px solid #999999!important; }
    body.print-funk .hint{ font-size:7.5pt!important; margin-top:8px!important; color:#6E6E6E!important; }
    /* Fußzeile wie im PDF */
    body.print-funk .print-foot{ display:block!important; margin-top:14px; padding-top:5px;
      border-top:0.5px solid #BBBBBB; font-size:7.5pt; color:#6E6E6E!important; }
  }

/* =====================================================================
   Ergänzungen für die PHP-Anwendung: Navigation, Login/MFA, Dashboard,
   Adminbereich, Flash-Meldungen. Nutzt dieselben CSS-Variablen wie oben.
   ===================================================================== */

.navlink{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:8px 13px;border-radius:9px;transition:.14s background,.14s color;border:1px solid transparent}
.navlink svg{width:15px;height:15px;flex:0 0 auto}
.navlink:hover{color:var(--text);background:var(--surface2)}
.navlink.active{color:#1a0f08;background:var(--accent);border-color:var(--accent)}
.navdivider{width:1px;align-self:stretch;background:var(--border2);margin:2px 4px}
.navuser{color:var(--faint);font-size:13px;margin:0 4px;display:inline-flex;align-items:center;gap:6px}
.navrole{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface2);border:1px solid var(--border2);border-radius:5px;padding:2px 6px}

.flash{border-radius:10px;padding:12px 16px;margin:16px 0;font-size:14px;border:1px solid var(--border2)}
.flash-error{background:#2a1416;border-color:#5a2b2d;color:#ffb4b6}
.flash-success{background:#0f2a1e;border-color:#2b5a3f;color:#8de8b4}

.authbox{max-width:380px;margin:80px auto;background:var(--surface2);border:1px solid var(--border2);border-radius:14px;padding:28px}
.authbox-wide{max-width:560px}
.authbox h2{margin:0 0 18px;font-size:19px}
.authbox label{display:block;font-size:13px;color:var(--muted);margin-bottom:14px}
.authbox input,.authbox select{display:block;width:100%;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:16px;font-family:var(--sans)}
.authbox input:focus{outline:none;border-color:var(--accent)}
.authbox .hint{font-size:13px;color:var(--muted);margin:-6px 0 16px}
.authbox button{width:100%}

/* Link "Passwort vergessen?" – in Akzentfarbe statt Browser-Standardblau */
.auth-alt{margin-top:14px}
.auth-alt a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,106,43,.45);padding-bottom:1px}
.auth-alt a:hover{border-bottom-color:var(--accent)}
.auth-alt a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Feld Hubschrauber-Typ: eigene Auswahlliste mit Info-Symbol je Eintrag */
.typ-wrap{display:flex;gap:8px;align-items:center}
.typ-combo{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.typ-combo input{width:100%;padding-right:34px}
.typ-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:transparent;border:0;
  color:var(--muted);cursor:pointer;padding:5px;border-radius:6px;display:flex;align-items:center;line-height:0}
.typ-toggle:hover{color:var(--accent);background:rgba(255,106,43,.10)}
.typ-combo.open .typ-toggle{color:var(--accent);transform:translateY(-50%) rotate(180deg)}

.typ-panel{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;
  background:var(--surface2);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);padding:5px;max-height:260px;overflow-y:auto}
.typ-opt{display:flex;align-items:center;gap:4px;border-radius:7px}
.typ-opt:hover{background:var(--surface3)}
.typ-opt-name{flex:1;text-align:left;background:transparent;border:0;color:var(--text);
  font-size:14px;font-family:var(--sans);padding:8px 10px;cursor:pointer;border-radius:7px}
.typ-opt-name:hover{color:var(--accent)}
/* Kennung in der Hubschrauber-Auswahl: zweitrangig, damit die Bezeichnung führt */
/* ---- Auswahlfenster der zentralen Hubschrauber-Liste ---- */
.hp-panel{max-height:340px;overflow-y:auto}
/* Filterzeile nach Betreiber */
.hp-filter{display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface2);z-index:2}
.hp-chip{padding:4px 10px;border:1px solid var(--border2);border-radius:20px;background:transparent;
  color:var(--muted);font-size:11.5px;font-weight:600;font-family:var(--sans);cursor:pointer;
  white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.hp-chip:hover{border-color:var(--accent);color:var(--text)}
.hp-chip.an{background:rgba(255,106,43,.16);border-color:var(--accent);color:#fff}
/* Gruppenüberschrift je Betreiber */
.hp-gruppe{padding:7px 12px 3px;font-size:10px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
/* Eintrag in drei gleich breiten Spalten mit Trennstrichen – so stehen
   Bezeichnung, Typ und Kennung in allen Zeilen sauber untereinander. */
.hp-opt{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;width:100%;gap:0}
.hp-sp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 9px}
.hp-sp:first-child{padding-left:0}
.hp-typ,.hp-kennung{border-left:1px solid var(--border2)}
.hp-name{font-weight:600}
.hp-typ{color:var(--muted);font-size:12.5px}
.hp-kennung{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.typ-opt-name:hover .hp-typ,.typ-opt-name:hover .hp-kennung{color:var(--accent);opacity:.85}
/* Kopfzeile über der Liste, damit die Spalten benannt sind */
.hp-kopf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:6px 12px 4px;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700}
.hp-kopf span{padding:0 9px}
.hp-kopf span:first-child{padding-left:0}
.typ-opt-info{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-right:4px;border-radius:7px;color:var(--muted);
  border:1px solid transparent;text-decoration:none}
.typ-opt-info:hover{color:var(--accent);border-color:var(--border2);background:var(--surface)}
.typ-empty{padding:9px 10px;font-size:13px;color:var(--muted)}

/* Einstellungen: Hubschrauber-Typen */
.ht-table{width:100%;border-collapse:collapse;margin:6px 0 12px}
/* Hubschrauber-Liste in den Einstellungen: vier gleichmäßige Spalten */
.hl-table th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:6px 8px;font-weight:700}
.hl-table td{padding:4px 8px}
.hl-table td input{width:100%;min-width:0}
/* Alle vier Eingabespalten gleich breit; die schmale letzte Spalte trägt nur
   die Schaltfläche zum Entfernen der Zeile. */
.hl-table{table-layout:fixed}
.hl-table th:nth-child(1),.hl-table td:nth-child(1),
.hl-table th:nth-child(2),.hl-table td:nth-child(2),
.hl-table th:nth-child(3),.hl-table td:nth-child(3),
.hl-table th:nth-child(4),.hl-table td:nth-child(4){width:23%}
.hl-table th:last-child,.hl-table td:last-child{width:8%;text-align:right}
.ht-table th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 8px 6px 0}
.ht-table td{padding:4px 8px 4px 0;vertical-align:middle}
.ht-table td:nth-child(1){width:34%}
.ht-table td:nth-child(2){width:48%}
.ht-table input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:9px;color:var(--text);padding:8px 11px;font-size:14px;font-family:var(--sans)}
.ht-table input::placeholder{color:var(--muted)}
.ht-table input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,43,.20)}
.ht-info{white-space:nowrap}
.ht-actions{display:flex;gap:10px;align-items:center}
.ht-actions .primary{margin-left:auto}
/* Info-Button (Einstellungen und Einsatz-Editor) */
.btn-info{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13px;font-weight:600;line-height:1;
  color:var(--accent);border:1px solid var(--border2);border-radius:8px;padding:6px 10px;white-space:nowrap}
.btn-info:hover{border-color:var(--accent);background:rgba(255,106,43,.10)}

.mfa-setup-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:18px}
/* QR-Code: dunkle Module auf weißem Grund – sonst nicht scannbar */
.mfa-qr{display:inline-block;background:#fff;border-radius:8px;padding:10px;line-height:0;min-width:60px}
.mfa-qr:not(.ready){padding:12px 14px;line-height:1.4;background:var(--surface2);border:1px dashed var(--border2)}
.mfa-qr svg{display:block}
.mfa-qr-fallback{font-size:13px;color:var(--muted)}
.mfa-field{margin-bottom:12px}
.mfa-field label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.mfa-value{font-size:15px;word-break:break-all}
.mfa-value.mono{font-family:var(--mono);background:var(--surface2);padding:8px 10px;border-radius:7px}
.mfa-value.small{font-size:12px;color:var(--muted)}

.dash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 18px;flex-wrap:wrap}
.dash-head h2{margin:0}
.dash-new{display:flex;gap:8px;flex-wrap:wrap}
.dash-new input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;font-size:14px}

.editor-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 4px}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.editor-toolbar{margin:0 0 0}
/* „Jetzt sichern" dezent an die Offline-Sicherung angelehnt (grünlicher Ton) */
#btnBackupNow{border-color:rgba(26,160,115,.45);color:#3ECF98}
#btnBackupNow:hover{background:rgba(26,160,115,.12);border-color:#1AA073}

/* Bericht-Versand in der Editor-Leiste – als eigener, hervorgehobener Bereich */
.mail-inline{
  display:inline-flex;gap:10px;align-items:center;
  background:var(--surface2);border:1px solid var(--border2);border-left:3px solid var(--accent);
  border-radius:11px;padding:7px 10px 7px 11px;
}
.mail-std{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;white-space:nowrap}
.mail-std input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.mail-std span{font-size:13px;color:var(--text);font-weight:600}
.mail-inline input[name="extra"]{
  width:320px;background:var(--surface3);border:1px solid var(--border2);border-radius:9px;
  color:var(--text);padding:9px 12px;font-size:14px;font-family:var(--sans);line-height:1.2;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.mail-inline input[name="extra"]::placeholder{color:var(--muted)}
.mail-inline input[name="extra"]:hover{border-color:var(--muted)}
.mail-inline input[name="extra"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,43,.20)}
@media (max-width:900px){
  .mail-inline{flex-wrap:wrap;width:100%}
  .mail-inline input[name="extra"]{width:100%;flex:1;min-width:180px}
}
.save-indicator{font-size:12px;color:var(--muted);font-family:var(--mono)}
.save-indicator.saving{color:var(--refuel)}
.save-indicator.error{color:var(--danger)}
.save-indicator.saved{color:var(--flight)}

.panel{margin:20px 0}
.admin-new-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.admin-new-form label{font-size:12px;color:var(--muted)}
.admin-new-form input,.admin-new-form select{display:block;margin-top:4px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;font-size:14px}
/* Rollen-Auswahl in der Benutzertabelle – passend zum dunklen App-Design */
.role-change{display:inline-block;margin:0}
.role-change select{background:var(--surface2);border:1px solid var(--border2);border-radius:8px;color:var(--text);
  padding:6px 30px 6px 10px;font-size:14px;font-family:var(--sans);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A95A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center}
.role-change select:hover{border-color:var(--muted)}
.role-change select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,43,.20)}
/* Editierbare Namensfelder in der Benutzertabelle */
.name-edit{display:flex;gap:6px;align-items:center;margin:0}
.name-edit input{background:var(--surface2);border:1px solid var(--border2);border-radius:7px;color:var(--text);
  padding:6px 9px;font-size:13px;font-family:var(--sans);width:110px}
.name-edit input::placeholder{color:var(--faint)}
.name-edit input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,43,.20)}
.name-edit .name-save{background:var(--accent);border:none;border-radius:7px;color:#fff;font-weight:600;
  padding:6px 12px;font-size:13px;cursor:pointer;font-family:var(--sans);opacity:0;pointer-events:none;transition:opacity .12s}
.name-edit.changed .name-save{opacity:1;pointer-events:auto}
.admin-actions{display:flex;gap:6px;flex-wrap:wrap}
.admin-actions form{display:inline}
.admin-actions button{font-size:12px;padding:6px 9px}

.contact-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.contact-form label{font-size:12px;color:var(--muted)}
.contact-form input{display:block;margin-top:4px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 10px;font-size:14px;min-width:150px}
.contact-import{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.contact-import input[type=file]{color:var(--muted);font-size:14px}
.contacts-table input{width:100%;min-width:110px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 8px;font-size:14px}
.contacts-table td{vertical-align:middle}
.contact-actions{white-space:nowrap;display:flex;gap:6px}
.contact-actions button{font-size:12px;padding:6px 9px}

.mail-form{display:flex;flex-direction:column;gap:14px;max-width:640px}
.mail-form label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.mail-form input,.mail-form textarea{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 11px;font-size:15px;font-family:var(--sans);width:100%}
.mail-form textarea{resize:vertical;min-height:140px;line-height:1.5}
.mail-form button{align-self:flex-start}

.archive-banner{display:flex;align-items:center;gap:10px;background:#241a10;border:1px solid #5a4426;color:#f0c98a;border-radius:10px;padding:12px 16px;margin:14px 0;font-size:14px}
.archive-banner svg{flex:0 0 auto;color:#f0c98a}
.archive-btn{color:var(--refuel);border-color:#5a4426}

.status-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:6px}
.status-badge.offen{background:rgba(56,211,159,.12);color:var(--flight);border:1px solid rgba(56,211,159,.3)}
.status-badge.archiviert{background:rgba(255,176,43,.12);color:var(--refuel);border:1px solid rgba(255,176,43,.3)}

/* Read-Only-Modus: greift nur, wenn der Server data-can-write="0" liefert
   (archivierter Einsatz + Rolle "editor"). Admins sind davon nie betroffen,
   da sie serverseitig immer canWrite=true erhalten. */
body.read-only .ptext,body.read-only input,body.read-only select,body.read-only textarea{
  pointer-events:none!important; background:var(--surface)!important; opacity:.72;
}
body.read-only .iconbtn,body.read-only .addrow,body.read-only .tab.add,
body.read-only .delheli,body.read-only .ev-add,body.read-only .pt-btn,
body.read-only .nowbtn,body.read-only #btnAddHeli,body.read-only #btnImport{
  display:none!important;
}

/* ---------- Externe Freigabe (Share) ---------- */
.share-badge{margin-left:14px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent)}
.share-head h2{margin:0 0 4px;font-size:20px}
.share-sub{color:var(--muted);font-size:13px}
/* Drei Blöcke nebeneinander: Einsatzort · Absprungplatz · Strecke.
   Die Streckenwerte stehen rechts, weil sie sich aus beiden Punkten ergeben. */
.share-geo{display:flex;flex-wrap:wrap;gap:0}
/* Einsatzort und Absprungplatz bewusst schmal halten, damit im Streckenblock
   rechts daneben noch die Schaltfläche zur Übersichtskarte Platz findet. */
.share-geo .sg-block{flex:1 1 0;min-width:0;padding:0 18px}
/* Wertezeile mit Karten-Schaltfläche: Wert links, Schaltfläche direkt daneben.
   Da sie in allen drei Blöcken in der ERSTEN Zeile steht, sitzen alle drei
   Schaltflächen automatisch auf gleicher Höhe. */
.share-geo .sg-wert{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.share-geo .sg-wert > span{min-width:0}
.share-geo .sg-block:first-child{padding-left:0}
.share-geo .sg-block + .sg-block{border-left:1px solid var(--border)}
.share-geo .sg-block dl{grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
/* Alle drei Blöcke teilen sich die Breite zu gleichen Teilen. */
.share-geo .sg-strecke{flex:1 1 0;min-width:0}
/* Übersichts-Button in der Freigabe – gleiche Optik wie im Einsatz-Editor
   (zwei Punkte mit Linie, daneben der Name des Kartendienstes). */
.share-geo-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.share-geo dl,.share-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.share-geo dt,.share-dl dt{color:var(--muted);font-size:13px}
.share-geo dd,.share-dl dd{margin:0;font-weight:600}
/* Karten-Schaltflächen der externen Ansicht: in allen drei Blöcken gleich
   gestaltet und – weil sie jeweils unter den Werten stehen – auch auf
   derselben Höhe. */
.sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;
  padding:0 9px;height:30px;border:1px solid var(--border2);border-radius:8px;
  color:var(--accent);background:var(--surface2);text-decoration:none;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
  transition:background .12s,border-color .12s}
.sg-btn:hover{background:rgba(255,106,43,.12);border-color:var(--accent)}
.sg-btn.karte-tiris{color:#4FB3E8;border-color:rgba(79,179,232,.45)}
.sg-btn.karte-tiris:hover{background:rgba(79,179,232,.12);border-color:#4FB3E8}
.sg-btn .karte-txt{font-size:11.5px;font-weight:600}

/* ---- Tabellen der externen Leseansicht ---- */
.share-tbl{width:100%;border-collapse:collapse;margin-top:4px}
.share-tbl th{font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);
  text-align:left;font-weight:700;padding:7px 10px;border-bottom:1px solid var(--border2);
  background:var(--surface2);white-space:nowrap}
.share-tbl td{padding:7px 10px;border-bottom:1px solid #20262f;font-size:13.5px;vertical-align:middle}
.share-tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.share-tbl tbody tr:hover td{background:#1b212b}
.share-tbl tbody tr:last-child td{border-bottom:none}
.share-tbl .num{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;white-space:nowrap}
/* Personen: offene Rückflüge zart hervorheben */
.share-pers tr.rowOffen td{background:rgba(200,40,45,.10)}
.share-pers tr.rowOffen:hover td{background:rgba(200,40,45,.16)}
/* Funkmatrix extern: farbiger Balken je Zeilenart, damit Hubschrauber,
   Einsatzabschnitte und feste Funktionen auf einen Blick unterscheidbar sind. */
.share-funk tbody td{border-bottom:2px solid var(--border2);padding-top:9px;padding-bottom:9px}
.share-funk .fn-zelle{position:relative;padding-left:16px;font-weight:700;white-space:nowrap}
.share-funk .fn-bar{position:absolute;left:4px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--border2)}
.share-funk .fr-fix .fn-bar{background:var(--accent)}
.share-funk .fr-hs  .fn-bar{background:var(--flight)}
.share-funk .fr-ea  .fn-bar{background:#7FA6D8}
.share-funk .fr-fix .fn-text{color:var(--accent)}
.share-funk .fr-hs  .fn-text{color:var(--flight)}
.share-funk .fr-ea  .fn-text{color:#7FA6D8}
.share-funk .fn-name{font-weight:600}
/* Zeilen ohne jede Eintragung zurücknehmen – sie sind Platzhalter */
.share-funk tbody tr:has(.fn-name .cell-na) .fn-text{opacity:.55;font-weight:600}
/* Telefonnummern anrufbar */
.tel-link{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--border2)}
.tel-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.fg-chip{display:inline-block;padding:2px 8px;margin:1px 2px 1px 0;border-radius:12px;
  background:var(--surface3);border:1px solid var(--border2);font-size:12px;font-weight:600;
  font-family:var(--mono);white-space:nowrap}
/* Hinweiszeile über der Personenliste */
.share-hinweis{display:inline-block;margin:0 0 10px;padding:6px 12px;border-radius:8px;
  border:1px solid rgba(255,106,43,.45);background:rgba(255,106,43,.08);font-size:13.5px}
.share-hinweis b{font-family:var(--mono);font-size:16px;color:var(--accent);margin-right:3px}

.share-invalid h2{margin-top:0}

/* Freigabe-Verwaltung im Editor */
.share-forms{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.share-admin .share-create{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.share-admin .share-create label{display:flex;flex-direction:column;gap:5px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.share-admin .share-create select{background:var(--surface2);border:1px solid var(--border2);border-radius:9px;
  color:var(--text);padding:8px 11px;font-size:14px;font-family:var(--sans)}
.share-mail-to{flex:1;min-width:220px;background:var(--surface3);border:1px solid var(--border2);border-radius:9px;
  color:var(--text);padding:9px 12px;font-size:14px;font-family:var(--sans)}
.share-mail-to::placeholder{color:var(--muted)}
.share-mail-to:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,43,.20)}
.share-list td{vertical-align:middle}
.share-row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.share-extend{display:flex;gap:6px;align-items:center}
.share-extend select{background:var(--surface2);border:1px solid var(--border2);border-radius:8px;
  color:var(--text);padding:6px 9px;font-size:13px;font-family:var(--sans)}
.share-inactive{opacity:.55}