/* Einsatzdoku — GenEM-Branding
   Farben (Brand Guidelines):
     Schnee #FFFCFA (Karten/Flaechen) · Rauch #F7F5ED (Seitengrund)
     Sand #D4C7AD (Linien-Basis) · Asphalt #1A0500 (Text)
     Dunkelblau #1A2E4D (markenuebergreifend) · Philipp Orange #FF8F1F (Akzent)
     Max Blau #4280E5 · Newroz Rot #D63338 (+ helle Varianten)
   Typografie: Bricolage Grotesque (Ueberschriften/Buttons), Open Sans (Fliesstext) */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600&family=Open+Sans:wght@400;600;700&display=swap');

:root{
  --schnee:#FFFCFA; --rauch:#F7F5ED; --sand:#D4C7AD;
  --ink:#1A0500;                       /* Asphalt */
  --navy:#1A2E4D;                      /* Dunkelblau */
  --accent:#FF8F1F;                    /* Philipp Orange */
  --accent-dark:#E67C0E;
  --accent-light:#FFEBD6;              /* Philipp Hellorange */
  --blau:#4280E5; --blau-light:#D9ECFD;
  --blau-dark:#3670D8;                 /* Max Blau eine Stufe dunkler:
                                          4,6:1 auf Schnee, damit auch kleine
                                          Beschriftungen die Kontrastschwelle
                                          erreichen (reines Max Blau: 3,8:1) */
  --rot:#D63338;  --rot-light:#FCE2D6;
  --line:#E3DAC6;                      /* aufgehelltes Sand */
  --muted:#6E6459;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Consolas,monospace;
  --head:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--rauch);color:var(--ink);
  font:15px/1.55 'Open Sans',system-ui,'Segoe UI',Roboto,sans-serif}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Kopfleiste (Dunkelblau, helle Logo-Variante) */
.topbar{display:flex;justify-content:space-between;align-items:center;
  background:var(--navy);color:#fff;padding:.5rem 1.2rem;
  position:sticky;top:0;z-index:900}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:#fff;
  font-family:var(--head);font-size:1rem;font-weight:600;letter-spacing:.02em;min-width:0}
.brand img{height:34px;width:auto;display:block;flex:none}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.brand span{font-size:.85rem}}
.topbar nav a{color:#C6CEDB;text-decoration:none;margin-left:1.1rem;
  font-family:var(--head);font-weight:500;
  padding-bottom:2px;border-bottom:2px solid transparent}
.topbar nav a.active,.topbar nav a:hover{color:#fff;border-bottom-color:var(--accent)}

/* Layout Tagesuebersicht */
.layout{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 50px)}
.daylist{border-right:1px solid var(--line);padding:1rem;background:var(--schnee)}
.daylist h2{font-family:var(--head);font-size:.85rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:.2rem 0 .7rem}
.daylist h2.sidebar-subhead{margin-top:1.6rem}
/* Gilt fuer Einsatztage- UND Einstellungsmenue: keine Aufzaehlungspunkte.
   (Beim Umbau der Tagesleiste auf das Akkordeon war diese Regel entfallen,
   wodurch im Einstellungsmenue Punkte auftauchten.) */
.daylist ul{list-style:none;margin:0;padding:0}
@media (max-width:720px){.layout{grid-template-columns:1fr}
  .daylist{border-right:0;border-bottom:1px solid var(--line)}
  .daylist ul{display:flex;flex-wrap:wrap;gap:.3rem}}

.page{padding:1.2rem 1.6rem;max-width:1200px}
h1{font-family:var(--head);font-weight:600;font-size:1.7rem;
  letter-spacing:.01em;margin:.2rem 0 1rem;color:var(--navy)}
h2{font-family:var(--head);font-weight:600;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:1.6rem 0 .5rem}
.muted{color:var(--muted)}

/* Markiert einen Wert, der vom uebergeordneten Stand abweicht — derzeit die
   Besatzung eines einzelnen Einsatzes gegenueber der Besatzung des Flugtags. */
.abw{color:var(--blau-dark);font-weight:600;white-space:nowrap}

/* Flugtag-Daten (aufklappbar ueber der Karte) */
.daymeta{background:var(--schnee);border:1px solid var(--line);border-radius:6px;
  margin-bottom:1rem;padding:.15rem .8rem}
.daymeta summary{cursor:pointer;font-family:var(--head);font-weight:600;
  font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
  padding:.45rem 0;user-select:none}
.daymeta summary .muted{text-transform:none;letter-spacing:0;
  font-family:'Open Sans',sans-serif;font-weight:400;font-size:.85rem}
.meta-form{padding:.2rem 0 .8rem}
.meta-form textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--line);
  border-radius:5px;font:inherit;background:var(--schnee);resize:vertical}
.meta-form .btn-primary{width:auto;margin-top:.6rem;margin-right:.6rem}

/* Karte */
.map{height:380px;border:1px solid var(--line);border-radius:6px;margin-bottom:1rem}
.map-tall{height:460px}

/* Vollbildmodus: native Fullscreen-API rendert den Container bereits
   randlos/flaechenfuellend -- hier nur Rand/Radius entfernen. Das
   CSS-Overlay (Fallback ohne Fullscreen-API, z. B. iOS Safari) braucht die
   volle Positionierung selbst. */
.map:fullscreen,.map:-webkit-full-screen{border:0;border-radius:0;margin:0}
.map.map-fs{position:fixed;inset:0;z-index:2000;width:100vw;
  height:100vh;height:100dvh;border:0;border-radius:0;margin:0}
body.map-fs-lock{overflow:hidden}

/* Eigene Karten-Controls (Vollbild, Phasen-Toggle) in der Optik der
   Leaflet-Standardcontrols (Zoom): weisser Hintergrund, dezenter Hover. */
.map-ctrl-fs a{width:30px;height:30px;line-height:30px;display:flex;
  align-items:center;justify-content:center;background:#fff;color:var(--ink);
  text-decoration:none;cursor:pointer}
.map-ctrl-fs a:hover{background:#f4f4f4}
.map-ctrl-fs a.active{background:var(--accent-light);color:var(--accent-dark)}
.map-ctrl-fs svg{width:16px;height:16px}
.map-ctrl-phase a{display:block;padding:0 .6rem;height:30px;line-height:30px;
  background:#fff;color:var(--rot);text-decoration:none;cursor:pointer;
  font:600 .78rem/30px 'Open Sans',sans-serif;white-space:nowrap}
.map-ctrl-phase a:hover{background:var(--rot-light)}
.map-ctrl-phase a.active{background:var(--rot-light)}

/* Layer-Umschalter (Leaflet-Standardcontrol): an die App-Optik angepasst.
   Ursache fuer zunaechst verzerrte Radiobuttons (Kreis weit rechts, Text
   weit links): die globale Regel "input,select{width:100%;padding:...;
   border:...}" (fuer Formular-Textfelder gedacht) traf auch die Leaflet-
   Radios. Wie bei anderen Checkbox-Kontexten der Anwendung (.rolechecks,
   .checklabel, .patfields) hier gezielt ueber die von Leaflet vergebene
   Klasse zurueckgesetzt statt den Elementselektor zu verbreitern. */
.leaflet-control-layers{border:1px solid var(--line);border-radius:6px;
  font-family:'Open Sans',sans-serif;box-shadow:0 1px 5px rgba(0,0,0,.25)}
.leaflet-control-layers-expanded{padding:.55rem .8rem}
.leaflet-control-layers label{margin:.3rem 0;font-size:.85rem;color:var(--ink)}
.leaflet-control-layers-selector{width:auto;padding:0;border:0;
  background:none;accent-color:var(--blau);margin:0 .45rem 0 0;
  vertical-align:middle}
.leaflet-control-layers-separator{margin:.4rem -.8rem .4rem -.2rem}

/* Statistik-Kacheln (Zeitraum-Uebersicht) */
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin-bottom:1.2rem}
.stat-tile{background:var(--schnee);border:1px solid var(--line);border-radius:6px;
  padding:.7rem .5rem;text-align:center}
.stat-value{display:block;font-family:var(--head);font-weight:600;font-size:1.35rem;
  color:var(--navy);font-variant-numeric:tabular-nums}
.stat-label{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-top:.15rem}
.stat-tile-link{cursor:pointer}
.stat-tile-link:hover{border-color:#D63338}
.stat-tile-link.aktiv{border-color:#D63338;box-shadow:0 0 0 1px #D63338}
@media (max-width:1100px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* Tabellen — das Flight-Log */
table.data{width:100%;border-collapse:collapse;background:var(--schnee);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
table.data th{font-family:var(--head);font-weight:600;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:.5rem .8rem;border-bottom:2px solid var(--navy)}
table.data td{padding:.5rem .8rem;border-bottom:1px solid var(--line)}
table.data tbody tr:last-child td{border-bottom:0}
/* ACHTUNG Spezifitaet: table.data th{text-align:left} oben (0-1-2) ist
   staerker als eine einfache .data-centered-Regel; table.data.data-centered
   (0-2-2) muss daher explizit beide Klassen tragen, um zu greifen. */
table.data.data-centered th{text-align:center}
#missions tbody tr{cursor:pointer}
#missions tbody tr:hover{background:var(--accent-light)}
.mono{font-family:var(--mono);font-size:.92rem;font-variant-numeric:tabular-nums}
.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px}
.chip{display:inline-block;min-width:1.7em;text-align:center;
  font-family:var(--mono);font-size:.85rem;font-weight:600;
  background:var(--navy);color:#fff;border-radius:4px;padding:.1em .3em}

/* Formulare / Buttons */
label{display:block;margin:.7rem 0 .2rem;font-size:.92rem}
input,select{width:100%;padding:.5rem .6rem;border:1px solid var(--line);
  border-radius:5px;font:inherit;background:var(--schnee)}
/* Fokusring nur bei Tastaturbedienung zeigen. Nach einem Mausklick blieb er
 * sonst stehen — bei <summary> umschliesst er zudem den gesamten aufgeklappten
 * Bereich statt nur der Kopfzeile und lief damit ueber den Inhalt. */
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible{
  outline:2px solid var(--blau);outline-offset:1px}
/* Aufklapp-Ueberschriften: kein Rahmen. Der Rahmen passte nicht zur Form und
 * umschloss bei geoeffnetem Abschnitt den ganzen Inhalt. Stattdessen dieselbe
 * dezente Faerbung wie beim Ueberfahren — bleibt fuer Tastaturbedienung
 * erkennbar, ohne aufzufallen. */
summary:focus{outline:none}
summary:focus-visible{outline:none;box-shadow:none;background:var(--accent-light)}
button{font:inherit;font-family:var(--head);font-weight:600;border:0;
  border-radius:5px;padding:.5rem .9rem;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;width:100%;margin-top:.9rem}
.btn-primary:hover{background:var(--accent-dark)}
.btn-danger{background:var(--schnee);color:var(--rot);border:1px solid #EBC3C4;
  padding:.25rem .6rem;font-size:.85rem}
.btn-danger:hover{background:var(--rot-light)}
.inline-form{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto;flex:1;min-width:160px}
.inline-form .btn-primary{width:auto;margin-top:0}

.alert{background:var(--rot-light);border:1px solid #E5A9AB;color:#9E2226;
  padding:.55rem .8rem;border-radius:5px}
.alert-info{background:var(--blau-light);border-color:#A9C9EE;color:#255A9E}
.alert-ok{background:#EBF7EC;border-color:#ABD8B0;color:#1E7A2E}
.keybox{background:var(--accent-light);border:1px solid #EFC9A0;border-radius:6px;
  padding:.8rem 1rem;margin-bottom:1.2rem}
.keybox code{font-family:var(--mono);background:var(--schnee);
  border:1px solid var(--line);padding:.1em .35em;border-radius:3px}

/* Login */
.login-body{display:grid;place-items:center;min-height:100vh;background:var(--navy)}
.login-card{background:var(--schnee);border-radius:10px;padding:2rem 2.2rem;
  width:min(94vw,400px)}
.login-card h1{font-size:1.4rem;text-align:center;margin-top:.4rem}
.login-logo{display:block;width:200px;max-width:70%;height:auto;margin:0 auto .6rem}
.login-aux{text-align:center;font-size:.9rem;margin-top:1rem}
.login-aux a{color:var(--accent-dark)}
section{margin-bottom:1.8rem}

/* Manuelle Einsaetze */
.add-link{color:var(--accent-dark);font-weight:600;text-decoration:none}
.add-link:hover{text-decoration:underline}
.badge{border-radius:4px;padding:.05em .45em;font-size:.8rem;font-weight:600}
.badge-uhr{background:#D9ECFD;color:#1A2E4D}          /* Max Hellblau / Dunkelblau */
.badge-manuell{background:var(--accent-light);color:#8A5A00}
.badge-import{background:#F7F5ED;color:#5B5F66}       /* Rauch */
.badge-editiert{background:#FCE2D6;color:#8A2E31}     /* Newroz Rosa */
.badge-central{background:var(--blau-light);color:var(--navy);border-radius:4px;
  padding:.05em .45em;font-size:.75rem;font-weight:600;margin-left:.4em;
  text-transform:uppercase;letter-spacing:.03em}
.fieldlist{background:var(--schnee);border:1px solid var(--line);border-radius:6px;
  padding:.6rem .9rem;margin:0 0 1rem;display:grid;grid-template-columns:auto 1fr;
  gap:.15rem .9rem;align-items:center}
.fieldlist dt{font-family:var(--head);font-weight:600;font-size:.85rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fieldlist dd{margin:0;white-space:pre-line}
.page-narrow{max-width:560px;margin-inline:auto}
.phase-row{display:flex;gap:.5rem;margin:.4rem 0;align-items:center}
.phase-row select{flex:1;width:auto}
.phase-row input[type=time]{width:110px}
.phase-row .btn-danger{padding:.35rem .6rem}
#meta a{color:var(--accent-dark)}

/* Textareas ueberall im Eingabefeld-Stil (z. B. Notizen im Einsatzformular) */
textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--line);
  border-radius:5px;font:inherit;background:var(--schnee);resize:vertical}

/* "Bearbeiten" als Button */
.btn-edit{display:inline-block;background:var(--accent);color:#fff !important;
  font-family:var(--head);font-weight:600;font-size:.85rem;
  padding:.25rem .7rem;border-radius:5px;text-decoration:none;vertical-align:1px}
.btn-edit:hover{background:var(--accent-dark)}

/* Fusszeile: im Dokumentfluss, rechtsbündig unter dem Inhalt (auch mobil) */
.sitefooter{text-align:right;margin-top:2.2rem;padding-bottom:.4rem;
  color:var(--muted);font-size:.8rem}
.sitefooter a{color:var(--muted)}
.login-wrap{display:flex;flex-direction:column}
.login-wrap .sitefooter{color:#8A96A8;margin-top:.7rem}
.login-wrap .sitefooter a{color:#8A96A8}

/* Zahnrad-Menue (Einstellungen) */
.gearmenu{position:relative;display:inline-block;margin-left:1.1rem}
.gearmenu summary{list-style:none;cursor:pointer;color:#C6CEDB;
  font-size:1.15rem;padding-bottom:2px;border-bottom:2px solid transparent;user-select:none}
.gearmenu summary::-webkit-details-marker{display:none}
.gearmenu summary:hover,.gearmenu summary.active{color:#fff;border-bottom-color:var(--accent)}
.gearmenu[open] summary{color:#fff}
.gearlist{position:absolute;right:0;top:calc(100% + .55rem);z-index:1100;
  background:var(--navy);border:1px solid #33455F;border-radius:6px;
  min-width:150px;padding:.3rem 0;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.gearlist a{display:block;padding:.45rem .9rem;margin:0;border-bottom:0 !important;
  color:#C6CEDB;text-decoration:none;font-family:var(--head);font-weight:500}
.gearlist a:hover{background:#26395A;color:#fff}

/* Einsatzansicht mittig */
.page-center{margin-inline:auto}   /* gleiche Breite wie .page, nur zentriert */

/* Formulare in den Einstellungen */
.settings-form{max-width:460px;margin-bottom:1.4rem}
.settings-form .btn-primary{width:auto}

/* Stammdaten */
.chips{list-style:none;margin:.3rem 0 .6rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{display:flex;align-items:center;gap:.35rem;background:var(--schnee);
  border:1px solid var(--line);border-radius:99px;padding:.2rem .35rem .2rem .7rem}
.chips form{display:inline}
.chip-x{background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:.8rem;padding:.1rem .3rem;border-radius:99px}
.chip-x:hover{background:var(--rot-light);color:var(--rot)}
.rolechecks{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:.5rem 0 1rem}
.rolechecks label{display:inline-flex;align-items:center;gap:.35rem;margin:0}
.rolechecks input{width:auto}
.rolehead{font-family:var(--head);font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:.9rem 0 .2rem}
.ac-form{margin-bottom:1.6rem}
td.actions{display:flex;gap:.4rem;align-items:center}
td.actions form{display:inline}
a.btn-danger{text-decoration:none;display:inline-block}
.rowlink{cursor:pointer}
.rowlink a{color:var(--ink);text-decoration:none}
.rowlink:hover a{color:var(--accent-dark)}

/* WICHTIG: hidden-Attribut muss sich gegen display-Regeln durchsetzen
   (behebt u. a. nicht verschwindende Rollenfelder am Flugtag) */
[hidden]{display:none !important}

/* Einsatzort-Autocomplete (Photon) */
.loc-widget{position:relative}
.loc-suggest{position:absolute;left:0;right:0;z-index:1200;list-style:none;
  margin:.15rem 0 0;padding:.25rem 0;background:var(--schnee);
  border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.loc-suggest li{padding:.4rem .7rem;cursor:pointer}
.loc-suggest li:hover{background:var(--accent-light)}

/* Bedingte Unterfelder im Einsatzformular */
.fld-check{margin:.7rem 0 .2rem}
.checklabel{display:flex;align-items:center;gap:.5rem;margin:0;
  font-weight:600}
.checklabel input{width:auto}
.childfields{border-left:3px solid var(--line);margin:.3rem 0 .6rem .35rem;
  padding-left:.9rem}
.fld-sub{font-size:.92rem}

/* Aktionsleiste der Einsatzansicht */
.actionbar{display:flex;gap:.6rem;align-items:center}

/* Phasen-Marker auf der Karte (Kachel-Design wie in der Tabelle) */
.phase-marker{background:none;border:0}
.pm-chip{cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);
  border:2px solid #fff;display:inline-block;min-width:1.7em;text-align:center;
  font-family:var(--mono);font-size:.85rem;font-weight:600;
  background:var(--navy);color:#fff;border-radius:4px;padding:.1em .3em}
.pm-chip.hl{background:var(--accent)}
#phases tr.hl td{background:var(--accent-light)}
#phases tbody tr{cursor:pointer}

/* Sortierbare Tabellenspalten */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--navy)}
th.sortable .arrow{color:var(--blau)}
.checkcol{text-align:center;color:var(--navy);font-weight:700}
.centercol{text-align:center}

/* Einheitliche Aktions-Buttons (Stammdaten & Co.) */
.btn-yellow{display:inline-block;background:#F5C518;color:#3A2E00;
  font-family:var(--head);font-weight:600;font-size:.85rem;
  padding:.25rem .7rem;border-radius:5px;text-decoration:none;border:0;cursor:pointer}
.btn-yellow:hover{background:#E0B310}
.btn-red{background:var(--rot);color:#fff;font-family:var(--head);font-weight:600;
  font-size:.85rem;padding:.25rem .7rem;border-radius:5px;border:0;cursor:pointer}
.btn-red:hover{background:#B92A2E}
.btn-plain{background:var(--schnee);color:var(--navy);border:1px solid var(--line);
  font-size:.85rem;padding:.25rem .6rem}
.btn-plain:hover{background:var(--accent-light)}
.rowactions{display:flex;gap:.4rem;align-items:center;justify-content:flex-end;
  flex-wrap:wrap}
.rowactions form{display:inline;margin:0}
.th-act{text-align:right}

/* Kopfleiste: mehr Luft, Zahnrad als Direktlink */
.topbar{padding:.7rem 1.3rem}
.brand{gap:.7rem}
.topbar nav{display:flex;align-items:center}
.gearlink{color:#C6CEDB;text-decoration:none;margin-left:1.1rem;
  display:inline-flex;align-items:center;
  padding-bottom:2px;border-bottom:2px solid transparent}
.gearlink svg{width:21px;height:21px;display:block}
.gearlink:hover,.gearlink.active{color:#fff;border-bottom-color:var(--accent)}

/* Kopplungscode */
.codebig{font-family:var(--mono);font-size:2.4rem;font-weight:700;
  letter-spacing:.35em;color:var(--navy);margin:.3rem 0}

/* PatientInnendaten-Modul */
.patfields{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:.5rem 0 1rem}
.patfields label{display:inline-flex;align-items:center;gap:.35rem;margin:0}
.patfields input{width:auto}
#patfields label{max-width:460px}
.paircode{border-color:var(--accent)}

/* Stammdaten: Abschnitts-Trennung und Luft zwischen den Besatzungs-Blöcken */
hr.sep{border:0;border-top:1px solid var(--line);margin:2rem 0 1.4rem}
h3.rolehead{margin-top:1.6rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
h3.rolehead:first-of-type{margin-top:.6rem;padding-top:0;border-top:0}

/* Flugtag-Notizen sichtbar im zugeklappten Kästchen */
.metanotes{display:block;margin:.35rem 0 0 1.1rem;color:var(--muted);
  font-size:.9rem;white-space:pre-line}
.metanotes:empty{display:none}

/* Rollen-Hinweis in den Standortdaten */
.rolechecks-hint{color:var(--muted);font-size:.9rem;margin-right:.3rem}

/* Admin: ganze Zeile als Hover-Ziel */
.rowlink:hover td{background:var(--accent-light)}

/* Einsatzort-Pin und Tagestabelle */
.locpin svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
#missions th{text-align:center}
#missions th:nth-child(2),#missions td:nth-child(2),
#missions th:nth-child(6),#missions td:nth-child(6){width:3.4rem}
#missions th:nth-child(3),#missions td:nth-child(3){width:4.6rem}
#missions th:nth-child(8),#missions td:nth-child(8){width:4rem}
#missions th:nth-child(9),#missions td:nth-child(9){width:5.4rem}
#missions td:nth-child(2),#missions td:nth-child(6),
#missions td:nth-child(8),#missions td:nth-child(9){text-align:center}

/* Einsatzformular: Seitenrahmen wie überall, Eingaben in lesbarer Spalte */
.formcol{max-width:760px}

/* Papierkorb */
.daydelete{margin:1.4rem 0 0}
.btn-link.danger{color:#D63338}
.trash{margin-top:2.2rem;border-top:1px solid #E4E0D8;padding-top:1rem}
.trash h2{font-size:1.05rem;margin:0 0 .2rem}
.trash h3{font-size:.92rem;margin:1rem 0 .3rem;color:#5B5F66}
.trashtable{width:100%;border-collapse:collapse;font-size:.88rem}
.trashtable th{text-align:left;font-weight:600;color:#5B5F66;padding:.25rem .5rem}
.trashtable td{padding:.25rem .5rem;border-top:1px solid #EFECE6}
.trashactions{display:flex;gap:.9rem;justify-content:flex-end}
.trashactions form{display:inline}
.trashactions .btn-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}

/* W2/W9: Platzhalter und Spaltentitel */
#missions td.dash,#missions .dash{text-align:center;color:#9AA0A6}
.data th{text-align:center}
.data th:first-child{text-align:left}
.data td{vertical-align:middle}

/* Bestätigungsdialog im Seiteninhalt (ersetzt window.confirm) */
.confirmbox{border:0;border-radius:10px;padding:1.3rem 1.4rem;max-width:26rem;
  box-shadow:0 12px 40px rgba(0,0,0,.28);background:#FFFCFA;color:#1A0500}
.confirmbox::backdrop{background:rgba(26,46,77,.45)}
.confirmtext{margin:0 0 1.1rem;font-size:1rem;line-height:1.45}
.confirmbtns{display:flex;gap:.7rem;justify-content:flex-end}
/* Beide Knoepfe exakt gleich gross. Wichtig: .btn-primary traegt global
   width:100% und margin-top (fuer Formulare) — im Dialog beides ausdruecklich
   zuruecknehmen, sonst wird "Abmelden" breiter und sitzt tiefer als
   "Abbrechen". Gleiche Falle wie bei der Aktionsleiste des Flugtags. */
.confirmbtns button{display:inline-flex;align-items:center;justify-content:center;
  width:auto;margin:0;min-height:2.3rem;padding:.42rem 1.2rem;
  border-radius:6px;cursor:pointer;font:inherit;line-height:1.2;
  box-sizing:border-box}

/* Suchseite (suche.php) — Filter in der linken Spalte.
   Die Einsatztage-Leiste entfaellt hier; einzelne Tage sind bei einer Suche
   ueber den Gesamtbestand ohne Nutzen. Bewusst eine eigene Klasse statt
   .daylist: jene ist auf feste Fensterhoehe mit overflow:hidden gesetzt und
   wuerde die Filterliste abschneiden. */
.layout-suche{grid-template-columns:280px 1fr}
.filterspalte{border-right:1px solid var(--line);background:var(--schnee);
  padding:1rem;position:sticky;top:50px;align-self:start;
  height:calc(100vh - 50px);display:flex;flex-direction:column;
  box-sizing:border-box;overflow:hidden}
.filterspalte>h2{font-family:var(--head);font-size:.85rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:.2rem 0 .7rem;flex:0 0 auto}
/* Nur die Gruppen scrollen — Ueberschrift und Fuss bleiben stehen. */
.filtergruppen{flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:thin}
.filtergruppe{border-top:1px solid var(--line)}
.filtergruppe:last-child{border-bottom:1px solid var(--line)}
.filtergruppe>summary{cursor:pointer;padding:.55rem .2rem;font-weight:600;
  font-size:.9rem;display:flex;align-items:center;justify-content:space-between;
  list-style:none}
.filtergruppe>summary::-webkit-details-marker{display:none}
.filtergruppe>summary::after{content:'\25B8';color:var(--muted);font-size:.75rem}
.filtergruppe[open]>summary::after{content:'\25BE'}
.filtergruppe>summary:hover{background:var(--accent-light)}
.filterfelder{display:flex;flex-direction:column;gap:.55rem;padding:.1rem .2rem .9rem}
.filterfelder label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem}
.filterfelder input,.filterfelder select{width:100%;box-sizing:border-box;margin:0}
.filterfuss{flex:0 0 auto;border-top:1px solid var(--line);margin-top:.6rem;
  padding-top:.7rem;display:flex;flex-direction:column;align-items:flex-start;
  gap:.35rem}
/* Gegen das globale width:100% der Formularknoepfe. */
.filterfuss .btn-plain{width:auto;margin:0}
/* Wochentage und Reanimationsarten: mehrere Haken nebeneinander, umbrechend. */
.wochentage,.reatypen{display:flex;flex-wrap:wrap;align-items:center;
  gap:.3rem .7rem;font-size:.85rem}
.wochentage label,.reatypen label{display:inline-flex;align-items:center;gap:.25rem;
  flex-direction:row}
.wtlabel{display:block;width:100%;font-weight:600;margin-bottom:.15rem}
/* Gesperrtes Filterfeld: sichtbar, aber erkennbar nicht bedienbar. */
.feld-gesperrt{opacity:.55}

/* Hauptspalte der Suchseite */
.suchbox{margin-bottom:1rem}
.suchfreitext{display:block;font-weight:600}
.suchfreitext input{width:100%;box-sizing:border-box;margin-top:.3rem}
.suchhinweis{margin:.4rem 0 0;font-size:.85rem}
.ergebniszeile{margin:0 0 .8rem}

/* Unter 720 px klappt die Spalte wie die Einsatztage-Leiste ueber den Inhalt.
   Diese Regeln muessen NACH .layout-suche stehen: Die Grundregel im
   allgemeinen 720-px-Block greift nur .layout und wuerde sonst von der
   spaeteren, gleich spezifischen Regel oben wieder ausgehebelt. */
@media (max-width:720px){
  .layout-suche{grid-template-columns:1fr}
  .filterspalte{position:static;height:auto;overflow:visible;
    border-right:0;border-bottom:1px solid var(--line)}
  .filtergruppen{overflow:visible}
}

/* Entsperrdialog fuer die geschuetzten Angaben (unlock.js).
   Bewusst dasselbe Muster wie .confirmbox — inklusive der Gegenmassnahme
   gegen das globale width:100% von .btn-primary. */
.unlockbox{border:0;border-radius:10px;padding:1.3rem 1.4rem;max-width:28rem;
  box-shadow:0 12px 40px rgba(0,0,0,.28);background:#FFFCFA;color:#1A0500}
.unlockbox::backdrop{background:rgba(26,46,77,.45)}
.unlocktitle{margin:0 0 .6rem;font-size:1.05rem}
.unlocktext{margin:0 0 1rem;font-size:.92rem;line-height:1.45;color:#5B5F66}
.unlocklabel{display:block;margin:0 0 .8rem;font-size:.92rem}
.unlocklabel input{width:100%;box-sizing:border-box;margin-top:.25rem}
.unlockmsg{margin:0 0 .9rem;font-size:.88rem;color:#5B5F66;min-height:1.2em}
.unlockmsg.err{color:#9E2226}
.unlockbtns{display:flex;gap:.7rem;justify-content:flex-end}
.unlockbtns button{display:inline-flex;align-items:center;justify-content:center;
  width:auto;margin:0;min-height:2.3rem;padding:.42rem 1.2rem;
  border-radius:6px;cursor:pointer;font:inherit;line-height:1.2;
  box-sizing:border-box}
.unlockbtns button[disabled]{opacity:.6;cursor:default}

/* Entsperrknopf in den Sperrhinweisen. Auch hier muss width:auto gegen die
   globale Formularregel von .btn-primary gesetzt werden. */
.unlockbtn{width:auto;margin:.5rem 0 0;display:inline-block}

/* Aktionsleiste unter der Tagestabelle */

/* --- Block H: Aktionsleiste, Spaltenbreiten, Papierkorb --- */

/* Vier Breitenstufen (über Klassen, damit neue Spalten nichts verschieben) */

/* Papierkorb-Symbol unten in der Einsatztage-Spalte */
.trashtable .rowactions{display:flex;gap:.6rem;justify-content:flex-end}
.trashtable .rowactions form{display:inline}

/* Seitenkopf mit Aktionen rechts (Einsatzansicht) */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem}
.pagehead-text{min-width:0}
.pagehead-text h1{margin-bottom:.2rem}
.pagehead-actions{display:flex;gap:.6rem;flex:0 0 auto;padding-top:.45rem}
.pagehead-actions a{text-decoration:none;white-space:nowrap}
.btn-plain{display:inline-block;text-decoration:none;padding:.45rem 1rem;border-radius:6px;
  border:1px solid #D8D3C8;background:#FFFCFA;color:#1A0500;cursor:pointer;font:inherit}
.btn-plain:hover{background:#F3EFE7}

/* Schaltflächen, die Links sind, nie unterstreichen */
a.btn-red,a.btn-edit,a.btn-primary,a.btn-plain,a.btn-yellow{text-decoration:none}


/* --- Tagesübersicht: feste Spaltenaufteilung --- */
#missions{table-layout:fixed;width:100%}
#missions th{white-space:nowrap;hyphens:none;-webkit-hyphens:none;
  font-size:.74rem;line-height:1.15;padding:.3rem .3rem}
#missions td{padding:.35rem .3rem;overflow:hidden;text-overflow:ellipsis}

#missions th.c-swatch,#missions td.c-swatch{width:1.7rem;padding-left:.2rem}
#missions th.c-no,   #missions td.c-no    {width:2.6rem}
#missions th.c-mid,  #missions td.c-mid   {width:5.2rem}   /* Beginn, Dauer, Alter */
#missions th.c-winde,#missions td.c-winde {width:4.4rem}
#missions th.c-bw,   #missions td.c-bw    {width:6.2rem}
#missions th.c-sek,  #missions td.c-sek   {width:6.4rem;white-space:normal}
#missions th.c-km,   #missions td.c-km    {width:5.4rem}

/* Alle Spalten mittig — auch Einsatzort und Diagnose */
#missions th,#missions td{text-align:center}

/* Karte, Flugtag-Kasten und Tabelle laufen gleich breit */
.daymeta,.map,#missions{width:100%;box-sizing:border-box}
.daymeta{margin-bottom:.9rem}

/* Aktionsleiste: Knöpfe behalten ihre Eigenbreite */

/* --- Menüspalte: volle Fensterhöhe, Tage scrollen intern,
       Papierkorb bleibt unten immer sichtbar --- */
.daylist{position:sticky;top:50px;align-self:start;
  height:calc(100vh - 50px);display:flex;flex-direction:column;
  box-sizing:border-box;overflow:hidden}
.daylist h2{flex:0 0 auto}
.dayyears{flex:1 1 auto;overflow-y:auto;min-height:0;
  scrollbar-width:thin}

/* Papierkorb-Aktionen: gleich groß, gleiche Grundlinie */
.trashtable .rowactions{display:flex;gap:.6rem;justify-content:flex-end;align-items:stretch}
.trashtable .rowactions form{display:flex}
.trashtable .rowactions .btn-primary,
.trashtable .rowactions .btn-red{display:inline-flex;align-items:center;justify-content:center;
  width:auto;margin:0;                      /* globales width:100% zuruecknehmen */
  min-width:10.5rem;padding:.42rem .9rem;font-size:.85rem;line-height:1.2;
  border-radius:5px;text-decoration:none;box-sizing:border-box}

/* Schaltflächen, die Links sind, nie unterstreichen */
a.btn-red,a.btn-edit,a.btn-primary,a.btn-plain,a.btn-yellow{text-decoration:none}


/* --- Block J: Zeilenstreifen zur besseren Unterscheidung --- */
#missions tbody tr:nth-child(odd){background:var(--schnee)}
#missions tbody tr:nth-child(even){background:var(--rauch)}
#missions tbody tr:hover{background:var(--accent-light)}


/* --- Papierkorb mit Beschriftung --- */

/* --- Aktionsleiste: beide Knöpfe gleich hoch und gleich gesetzt --- */

/* --- Standortdaten: aufklappbare Abschnitte --- */
.stammblock{border:1px solid var(--line);border-radius:8px;background:var(--schnee);
  margin:0 0 .7rem;padding:0 1rem}
.stammblock>summary{cursor:pointer;list-style:none;padding:.7rem .2rem;
  font-family:var(--head);font-size:.95rem;font-weight:600;color:var(--navy)}
.stammblock>summary::-webkit-details-marker{display:none}
.stammblock>summary::before{content:'▸';display:inline-block;width:1.1em;
  color:var(--accent);transition:transform .12s}
.stammblock[open]>summary::before{transform:rotate(90deg)}
.stammblock[open]{padding-bottom:1rem}
.stammblock>summary:hover{color:var(--accent)}
.stammblock>summary{border-radius:6px}

/* --- Weitere Rettungsmittel: Eingabe mit Merkfeldern --- */
.rmbox{position:relative}
.rmchips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem}
.rmchip{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent-light);
  border:1px solid #F0C89A;border-radius:999px;padding:.2rem .3rem .2rem .7rem;font-size:.85rem}
.rmx{border:0;background:none;cursor:pointer;font-size:1.05rem;line-height:1;
  color:#9A6B2F;padding:0 .25rem}
.rmx:hover{color:var(--rot)}
.rmlist{position:absolute;left:0;right:0;top:100%;z-index:50;background:#fff;
  border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);
  max-height:12rem;overflow-y:auto}
.rmopt{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:.45rem .7rem;font:inherit}
.rmopt:hover{background:var(--accent-light)}
.rmneu{color:#5B5F66;font-style:italic;border-top:1px solid var(--line)}

/* Flugtag von Hand anlegen — über dem Papierkorb */

/* ===================== Aktionsleiste unter der Tagestabelle ===================== *
 * "+ Einsatz nachtragen" und "Tag löschen": exakt gleiche Höhe, Schriftgröße
 * und Grundlinie. Beide Klassen teilen sich hier bewusst einen Selektor,
 * damit künftige Änderungen nicht wieder auseinanderlaufen. */
.dayactions{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;margin:1.4rem 0 .2rem}
.dayactions .btn-primary,.dayactions .btn-red{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;box-sizing:border-box;
  /* .btn-primary hat global width:100% (fuer Formulare) — hier ausdruecklich
     zuruecknehmen, sonst zieht sich der Knopf ueber die volle Breite. */
  width:auto;margin-top:0;
  font-family:var(--head);font-weight:600;font-size:.9rem;line-height:1.2;
  padding:.55rem 1.2rem;min-height:2.4rem;
  border-radius:6px;text-decoration:none;white-space:nowrap}



/* --- Max Blau (Markenfarbe) etwas praesenter einsetzen --- *
 * Bisher stand die Markenfarbe fast nur in der Legende der Markenrichtlinie.
 * Sie uebernimmt jetzt Fokusringe und die Sortierpfeile (siehe oben) sowie
 * Kontrollkaestchen und den "Flugtag anlegen"-Link — als ruhiger Gegenpart
 * zu Orange (Haupt-Aktionen) und Rot (Loeschen), ohne deren Bedeutung zu
 * verwaessern. */
input[type=checkbox]{accent-color:var(--blau)}
.dayadd{color:var(--blau)}
.dayadd:hover{color:var(--navy)}

/* ===================== Einsatztage: Jahr/Monat-Akkordeon ===================== */
.dayyears{display:flex;flex-direction:column;gap:.15rem}
.daylist-empty{color:#8A8378;padding:.3rem .5rem}

.yearblock,.monthblock{border:0}
.yearblock > summary,.monthblock > summary{
  cursor:pointer;list-style:none;user-select:none;
  display:flex;align-items:center;gap:.4rem;
  padding:.35rem .5rem .35rem .15rem;border-radius:5px;min-height:1.9rem}
.yearblock > summary::-webkit-details-marker,
.monthblock > summary::-webkit-details-marker{display:none}
.yearblock > summary::before,.monthblock > summary::before{
  content:'▸';width:1.9em;color:var(--blau);text-align:center;
  display:flex;align-items:center;justify-content:center;align-self:stretch;
  transition:transform .12s;flex:0 0 auto}
.yearblock[open] > summary::before,.monthblock[open] > summary::before{transform:rotate(90deg)}

.yearblock > summary{font-family:var(--head);font-weight:600;font-size:.95rem;color:var(--navy)}
.yearblock > summary:hover{background:var(--accent-light)}
.yearblock{margin-bottom:.15rem}
.yearblock > .monthblock{margin-left:.55rem}

.monthblock > summary{font-size:.82rem;color:#5B5F66}
.monthblock > summary:hover{background:var(--accent-light)}
.monthblock ul{list-style:none;margin:0;padding:.1rem 0 .25rem 1.3rem}

.daylist a{display:block;padding:.3rem .5rem;color:var(--ink);text-decoration:none;
  border-radius:5px;font-size:.86rem;font-variant-numeric:tabular-nums}
.daylist a.active{background:var(--navy);color:#fff}
.daylist a:hover:not(.active){background:var(--accent-light)}

/* Jahres-/Monatszeilen liegen auf eigener Ebene, damit die Markierung des
   aktiven Tages nicht ueberdeckt wird (Fokusring siehe summary:focus-visible) */
.yearblock > summary,.monthblock > summary{position:relative;z-index:1}
.daylist a.active{position:relative;z-index:2}

/* Aktiver Tag: eigene Ebene und etwas Abstand, damit die Markierung frei steht */
.monthblock li{margin:.05rem 0}

/* Zeitraum-Übersicht (Jahr/Monat): Datumsspalte, sonst wie die Tagestabelle */
#rangetable{table-layout:fixed;width:100%}
#rangetable th{white-space:nowrap;hyphens:none;font-size:.74rem;line-height:1.15;
  padding:.3rem .3rem;text-align:center}
#rangetable td{padding:.35rem .3rem;overflow:hidden;text-overflow:ellipsis;text-align:center}
#rangetable th.c-date,#rangetable td.c-date{width:6rem}
#rangetable th.c-mid,#rangetable td.c-mid{width:5.2rem}
#rangetable th.c-winde,#rangetable td.c-winde{width:4.4rem}
#rangetable th.c-bw,#rangetable td.c-bw{width:6.2rem}
#rangetable th.c-sek,#rangetable td.c-sek{width:6.4rem;white-space:normal}
#rangetable tbody tr{cursor:pointer}
#rangetable tbody tr:nth-child(odd){background:var(--schnee)}
#rangetable tbody tr:nth-child(even){background:var(--rauch)}
#rangetable tbody tr:hover{background:var(--accent-light)}
#rangetable tbody tr.hl-extrem td{background:#FCE2D6}

/* Jahr/Monat in der Leiste: Beschriftung ist ein Link, Dreieck bleibt Umschalter */
.zeitlink{color:inherit;text-decoration:none;flex:1 1 auto}
.zeitlink:hover{text-decoration:underline}

/* Geschützte PatientInnendaten: Name nebeneinander, Alter mit Hinweis */
.patname{display:flex;gap:.8rem;flex-wrap:wrap}
.patname label{flex:1 1 12rem;min-width:0}
#pat_age[readonly]{background:var(--rauch);color:#5B5F66;cursor:not-allowed}
#agehint{margin-left:.5rem}

/* Versionsangabe in der Fußzeile */
.sitefooter .ver{margin-left:.6rem;color:#9AA0A6;font-variant-numeric:tabular-nums}

/* ===================== Papierkorb + "Flugtag anlegen" ===================== *
 * ACHTUNG Spezifitaet: `.daylist a` (0-1-1) steht weiter oben und setzt
 * display:block. Die Selektoren hier muessen daher `.daylist a.<klasse>`
 * lauten (0-2-1) und NACH `.daylist a` stehen — sonst greift display:flex
 * nicht, und Symbol und Text stehen untereinander statt nebeneinander. */
.daylist a.dayadd,
.daylist a.trashlink{display:flex;align-items:center;justify-content:center;
  gap:.45rem;text-decoration:none;font-size:.82rem;
  padding:.55rem .5rem;border-radius:0;color:var(--blau)}
.daylist a.dayadd:hover{color:var(--navy);background:none}
.daylist a.trashlink{border-top:1px solid var(--line);margin-top:.4rem;color:#8A8378}
.daylist a.trashlink:hover{color:var(--accent);background:none}
.daylist a.trashlink.leer,
.daylist a.trashlink.leer:hover{color:#CFCABF}

/* Symbol rund 30 % hoeher als die Schrift. Die viewBox im Markup ist auf die
   Zeichnung zugeschnitten (kein Leerraum), daher entspricht die Hoehe hier
   direkt der sichtbaren Groesse. Textbox und Symbol sind gleich hoch, wodurch
   align-items:center beide zwangslaeufig auf eine gemeinsame Mitte setzt. */
.daylist a.trashlink svg{height:1.3em;width:1.156em;flex:0 0 auto;display:block}
.daylist a.trashlink span{white-space:nowrap;line-height:1.3;display:block}

/* ---- Import-Review (import.php) -----------------------------------------
   .btn-primary traegt global width:100% — ausserhalb von .settings-form muss
   das jedes Mal zurueckgesetzt werden, sonst laeuft der Knopf ueber die
   ganze Spaltenbreite. */
#schritt3 .btn-primary{width:auto}
.imp-wrap{overflow-x:auto;margin-bottom:1.4rem}
.imp-table{border-collapse:collapse;font-size:.86rem;min-width:100%}
.imp-table th,.imp-table td{border:1px solid var(--line);padding:.2rem .35rem;
  text-align:left;vertical-align:middle;white-space:nowrap}
.imp-table th{background:var(--rauch);font-family:var(--head);font-weight:600}
.imp-table input.imp-cell{border:0;background:transparent;font:inherit;
  padding:.1rem .2rem;min-width:5.5rem;width:100%}
.imp-table input.imp-cell:focus{background:#fff;outline:2px solid var(--accent)}
.imp-daygroup td{background:var(--sand);font-family:var(--head);font-weight:600;
  white-space:normal}
.imp-table td.imp-warn{background:#FDF3D0}
.imp-table td.imp-error{background:var(--rot-light)}
.imp-row.imp-skipped{opacity:.45;text-decoration:line-through}
.imp-row.imp-dupe td:first-child{border-left:3px solid var(--accent)}
.imp-skip{white-space:nowrap;font-size:.82rem}
span.imp-warn{color:#8A6D00}