:root {
  --bg: #f2f2f6;
  --panel: #ffffff;
  --panel-muted: #f7f7fa;
  --line: #d9dce3;
  --text: #172432;
  --muted: #5b6f84;
  --blue: #0188fe;
  --blue-soft: #d8efff;
  --green: #2c9b58;
  --green-soft: #e0f4e5;
  --orange: #db8a24;
  --orange-soft: #fff0dc;
  --red: #c0272d;
  --red-soft: #fbe4e5;
  --shadow: 0 8px 24px rgba(29, 29, 31, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-width: 360px;
  /* Zwei Namen, die im Stylesheet benutzt, aber nie gesetzt waren; sie fielen
     deshalb überall auf Weiß bzw. Grau zurück. Jetzt folgen sie dem Thema. */
  --surface: var(--panel);
  --text-muted: var(--muted);
  color-scheme: light;
  /* Höhe des schwebenden Knopfpaars (56 px) plus Abstand zum Rand und die
     Home-Anzeige des Telefons — so viel Platz bleibt am Seitenende frei. */
  --fab-freiraum: calc(96px + env(safe-area-inset-bottom, 0px));
  --page-glow: rgba(255, 255, 255, 0);
  --page-top: #f2f2f6;
  --page-bottom: #f2f2f6;
  --sidebar-bg: rgba(246, 246, 250, 0.92);
  --section-bg: rgba(255, 255, 255, 0.78);
  --panel-strong: #ffffff;
  --header-sticky-top: rgba(248, 248, 251, 0.98);
  --header-sticky-bottom: rgba(243, 243, 247, 0.94);
  --active-strip: #0188fe;
  --item-completed-bg: #edf8f1;
  --item-skipped-bg: #fff4e6;
  --item-active-bg: #eef6ff;
  --item-not-required-bg: #e8edf2;
  --modal-panel: #ffffff;
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top right, var(--page-glow), transparent 30%),
    linear-gradient(180deg, var(--page-top) 0%, var(--page-bottom) 100%);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
}

button,
input,
textarea {
  font: inherit;
}

button,
[data-action],
.item-card,
.sidebar-row,
.section-toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(1, 136, 254, 0.12);
}

a {
  color: inherit;
}

.boot-screen,
.fatal-error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 16px;
  text-align: center;
  padding: 32px;
}

.boot-icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(300px, var(--sidebar-width)) 1fr;
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid rgba(22, 33, 43, 0.08);
  background: var(--sidebar-bg);
  backdrop-filter: blur(10px);
  padding: 20px 18px 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

.detail-pane {
  padding: 26px;
  /* Flugbuch und ETB schweben unten rechts über der Seite. Ohne diesen
     Freiraum liegt der letzte Knopf einer Seite (z. B. „PDF erzeugen") unter
     ihnen und ist nicht mehr antippbar (Auftrag Manó, 09.09.2026). Statt die
     Knöpfe wegzunehmen bekommt die Seite unten Platz: Sie lässt sich so weit
     scrollen, dass ihr Ende neben, nicht unter den beiden steht. */
  padding-bottom: var(--fab-freiraum);
}

.sidebar-header,
.detail-header,
.notes-panel,
.gnss-panel,
.result-card,
.landing-panel,
.pilot-image-card,
.log-entry,
.log-group,
.empty-state,
.pilot-card,
.item-card,
.mobile-backline {
  background: var(--panel);
  border: 1px solid rgba(22, 33, 43, 0.08);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.sidebar-header {
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  /* Reicht der Platz neben der Überschrift nicht, rücken die Knöpfe in eine
     eigene Zeile — vorher standen sie über den Kartenrand hinaus. Sie bleiben
     dabei rechtsbündig und nebeneinander. */
  flex-wrap: wrap;
}

.sidebar-actions,
.detail-actions,
.detail-header-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Kopfzeile der Übersicht: die Knöpfe stehen rechts am Rand und bleiben
   auch beim Umbruch dort (Auftrag Manó, 09.09.2026). */
.sidebar-actions {
  /* Rechtsbündig, egal ob neben der Überschrift oder in eigener Zeile. */
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
  /* Die zwei Knöpfe gehören nebeneinander — umgebrochen sahen sie aus wie
     zwei verschiedene Dinge. Umbrochen wird stattdessen die Kopfzeile. */
  flex-wrap: nowrap;
}

/* Themenwahl: schmaler Knopf, der nur ein Symbol trägt. */
.theme-toggle {
  padding: 8px 10px;
  min-width: 44px;
  font-size: 0.95rem;
  line-height: 1.2;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  white-space: nowrap;
}

.sidebar-nav {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.search-field,
.input-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.95rem;
}

.search-field {
  margin-top: 18px;
}

.search-field input,
.input-field input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-muted);
  padding: 14px 16px;
  color: var(--text);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.section-toggle,
.sidebar-row,
.item-main-button,
.ghost-button,
.primary-button,
.danger-button,
.row-reset-button,
.status-menu-button,
.status-menu-toggle,
.segmented-control button,
.image-button,
.modal-close {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.sidebar-section {
  background: var(--section-bg);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(22, 33, 43, 0.08);
  overflow: hidden;
}

.section-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 700;
}

/* Sektions-Header: farbcodiert (gilt für Hell- und Dunkelmodus) */
.section-toggle {
  background: rgb(0, 51, 153);
  color: #ffffff;
}

.section-toggle[data-section="einsatzworkflow"] {
  background: rgb(255, 255, 0);
  color: #000000;
}

.section-toggle[data-section="normal"] {
  background: rgb(0, 128, 0);
  color: #ffffff;
}

/* Notverfahren-Sektion: roter Header mit weißer Schrift */
.section-toggle[data-section="emergency"] {
  background: #c0272d;
  color: #ffffff;
}

/* Dokumentation: grau */
.section-toggle[data-section="tools"] {
  background: #6b7280;
  color: #ffffff;
}

/* Einsatzvorlagen: grau — die Vordrucke sind nur noch Nachschlagematerial
   und sollen nicht mehr so prominent wirken wie die blauen Sektionen. */
.section-toggle[data-section="vorlagen"] {
  background: #6b7280;
  color: #ffffff;
}

.section-content {
  /* Oben fehlte der Abstand: die erste Karte klebte am Sektionskopf,
     während links, rechts und unten 10 px standen. */
  padding: 10px;
  display: grid;
  gap: 8px;
}

.sidebar-subhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute, #8a94a6);
  padding: 10px 6px 2px;
}

.sidebar-subhead:first-child {
  padding-top: 2px;
}

.sidebar-row-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.sidebar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid transparent;
}

.sidebar-row.is-active {
  border-color: rgba(1, 136, 254, 0.26);
  background: var(--blue-soft);
}

.sidebar-copy {
  display: grid;
  gap: 3px;
}

.sidebar-copy small,
.detail-subtitle,
.item-hint,
.detail-hints,
.image-caption,
.log-entry span,
.empty-state p,
.map-note,
.form-error {
  color: var(--muted);
}

.progress-orb,
.sidebar-symbol {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  background: var(--blue-soft);
  flex: 0 0 auto;
}

.progress-orb::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
}

.row-reset-button {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--panel-strong);
  border: 1px solid rgba(22, 33, 43, 0.08);
}

.detail-view {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.detail-view > .detail-header {
  position: sticky;
  top: 18px;
  z-index: 8;
  background:
    linear-gradient(180deg, var(--header-sticky-top) 0%, var(--header-sticky-bottom) 100%);
  backdrop-filter: blur(18px);
  transition: padding 0.18s ease;
}

/* Beim Scrollen bleibt vom Kopf nur die Überschrift stehen (v227): Eyebrow und
   Beschreibungstext klappen weg, die Überschrift wird kleiner. Beides ist
   Einführungstext — man liest ihn einmal und scrollt dann daran vorbei, während
   er oben klebt und Platz frisst. Bedienelemente im Kopf (Meta-Zeile,
   Fortschritt) bleiben stehen, die braucht man auch weiter unten.
   Die Klasse setzt `syncKopfKompakt()` in app/main.js am <body>. */
.detail-view:not(.detail-view--embedded) > .detail-header .eyebrow,
.detail-view:not(.detail-view--embedded) > .detail-header .detail-subtitle {
  overflow: hidden;
  max-height: 30rem;
  opacity: 1;
  transition:
    max-height 0.2s ease,
    opacity 0.14s ease,
    margin 0.2s ease;
}

.detail-view:not(.detail-view--embedded) > .detail-header h2 {
  transition: font-size 0.18s ease;
}

body.detailkopf-kompakt .detail-view:not(.detail-view--embedded) > .detail-header {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.detailkopf-kompakt .detail-view:not(.detail-view--embedded) > .detail-header .eyebrow,
body.detailkopf-kompakt .detail-view:not(.detail-view--embedded) > .detail-header .detail-subtitle {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}

body.detailkopf-kompakt .detail-view:not(.detail-view--embedded) > .detail-header h2 {
  font-size: 1.15rem;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .detail-view:not(.detail-view--embedded) > .detail-header,
  .detail-view:not(.detail-view--embedded) > .detail-header .eyebrow,
  .detail-view:not(.detail-view--embedded) > .detail-header .detail-subtitle,
  .detail-view:not(.detail-view--embedded) > .detail-header h2 {
    transition: none;
  }
}

.detail-header,
.notes-panel,
.gnss-panel,
.landing-panel,
.empty-state,
.log-group {
  padding: 18px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  color: var(--blue);
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.status-pill {
  background: var(--panel-muted);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
}

.status-pill--summary {
  background: #d8efff;
  color: #016dc9;
}

.status-pill--success {
  background: #d8f0df;
  color: #1f7a44;
}

.status-pill--warning {
  background: #ffe7c9;
  color: #b96d0d;
}

.status-pill--active {
  background: #d8efff;
  color: #0188fe;
}

.progress-bar {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.progress-segment {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: #cfd8e4;
}

.progress-segment--completed {
  background: var(--green);
}

.progress-segment--skipped {
  background: var(--orange);
}

.progress-segment--not_required {
  background: #b8c0cc;
}

.checklist-items {
  display: grid;
  gap: 8px;
}

.item-card {
  padding: 8px;
  position: relative;
  overflow: visible;
  z-index: 1;
  cursor: pointer;
}

.item-card.has-open-menu {
  z-index: 30;
}

.item-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  opacity: 0;
  background: var(--active-strip);
}

.item-card.is-focused::before,
.item-card--skipped::before {
  opacity: 1;
}

.item-card--completed {
  background: var(--item-completed-bg);
}

.item-card--skipped {
  background: var(--item-skipped-bg);
}

.item-card--open.is-focused {
  background: var(--item-active-bg);
}

.item-card--not_required {
  background: var(--item-not-required-bg);
}

.item-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.item-main-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  text-align: left;
  align-items: start;
  pointer-events: none;
}

.item-status-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel-muted);
  font-weight: 800;
  font-size: 0.95rem;
}

.item-status-icon-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  pointer-events: auto;
  cursor: pointer;
  flex-shrink: 0;
}

.item-card--completed .item-status-icon,
.item-card--completed .item-status-icon-button {
  background: #2d9957;
  color: white;
}

.item-card--skipped .item-status-icon,
.item-card--skipped .item-status-icon-button {
  background: #d67f16;
  color: white;
}

.item-card.is-focused .item-status-icon,
.item-card.is-focused .item-status-icon-button {
  background: #0188fe;
  color: white;
}

.item-card--not_required .item-status-icon,
.item-card--not_required .item-status-icon-button {
  background: #c8d1da;
  color: #556476;
}

.item-copy {
  display: grid;
  gap: 2px;
  padding-top: 1px;
}

.item-question {
  font-weight: 650;
  line-height: 1.18;
  font-size: 0.97rem;
}

/* Statischer Info-Punkt zwischen Checkpunkten (nicht abhakbar) → Pilots-Brain.
   Eigene Zeile statt Link in der Karte, damit der Tap zuverlässig ankommt. */
.checklist-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: -4px 0 2px;
  border-radius: 12px;
  border: 1px solid rgba(1, 136, 254, 0.28);
  background: rgba(1, 136, 254, 0.07);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.checklist-info-row:hover {
  background: rgba(1, 136, 254, 0.12);
}

/* Linksammlung in Einsatzvorlagen — gleiche Optik wie die Info-Zeile. */
.template-link-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(1, 136, 254, 0.28);
  background: rgba(1, 136, 254, 0.07);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.template-link-row:hover {
  background: rgba(1, 136, 254, 0.12);
}

.checklist-info-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.checklist-info-copy strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
}

.checklist-info-copy small {
  font-size: 0.76rem;
  color: var(--text-dim, #5b6f84);
}

.checklist-info-chevron {
  margin-left: auto;
  color: var(--blue);
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ETB: Start-Abfrage (Besatzung + Akkus) und automatische Einträge */
.flug-maske {
  width: min(440px, calc(100vw - 32px));
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flug-maske .input-field input {
  width: 100%;
}

.flug-akku-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim, #5b6f84);
  margin-top: 2px;
}

.flug-akku-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.etb-entry--auto {
  opacity: 0.82;
  border-left: 3px solid #b8c0cc;
}

.etb-auto-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e6eaef;
  color: #5b6f84;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Einsatzkarte im Vollbild: CSS-Overlay (requestFullscreen fehlt auf iPhone) */
.einsatz-map-shell,
.map-shell {
  position: relative;
  /* Eigener Stapelkontext. Ohne ihn konkurrieren die Leaflet-Ebenen (z 400–800)
     und das Karten-HUD (z 900) direkt mit dem klebenden Detail-Kopf (z 8) — die
     Karte schob sich beim Scrollen VOR die Kopfbox. Mit z-index 0 bleibt alles
     Karteneigene innerhalb der Hülle und damit hinter dem Kopf. Das Vollbild
     hebt den Wert unten wieder an (z 1200). */
  z-index: 0;
}

/* Der Rahmen, an dem sich karteninterne Bedienelemente ausrichten: genau so
   hoch wie die Karte selbst. Die Hülle darüber wird auf schmalen Breiten höher
   (die Ebenenschalter fließen dort unter die Karte). */
.map-canvas {
  position: relative;
}

.map-canvas > .map-frame {
  margin-top: 0;
}

.einsatz-map-shell--fullscreen,
.map-shell--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #10151c;
}

/* Im Vollbild trägt die Hülle die Fläche — der Zwischenrahmen spannt sich mit
   auf, sonst hinge die Karte in einem 0 px hohen Container. */
.einsatz-map-shell--fullscreen .map-canvas,
.map-shell--fullscreen .map-canvas {
  position: absolute;
  inset: 0;
}

.einsatz-map-shell--fullscreen .map-frame,
.map-shell--fullscreen .map-frame {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  border: none;
}

.map-fullscreen-exit {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1300;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(16, 21, 28, 0.82);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Vollbild-Button in der Karte (oben rechts; oben links sitzt der Zoom) */
.map-fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1100; /* über den Leaflet-Panes, unter dem Vollbild-Overlay */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background: #ffffff;
  color: #172432;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.map-fullscreen-btn:active {
  transform: scale(0.95);
}

/* Überschrift mit Info-Symbol rechts daneben */
.heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.heading-row > h2,
.heading-row > h3 {
  min-width: 0;
}

/* Antippbares i-Symbol: 24 px sichtbar, aber 44 px Trefferfläche */
.info-badge-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  background: none;
  color: var(--blue);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  position: relative;
}

.info-badge-button::after {
  content: "";
  position: absolute;
  inset: -7px;
}

.info-badge-button.is-active {
  background: var(--blue);
  color: #fff;
}

.format-help {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 16px);
  background: rgba(1, 136, 254, 0.08);
  font-size: 0.9rem;
  line-height: 1.5;
}

.format-help p {
  margin: 0;
}

.format-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  white-space: nowrap;
}

/* Rundes i-Symbol im Info-Punkt */
.checklist-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.item-question-prefix {
  color: #d64040;
  font-weight: 800;
}

.item-card--not_required .item-question,
.item-card--not_required .item-hint {
  color: #6b7886;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(85, 100, 118, 0.75);
}

.expected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 0.97rem;
  font-weight: 650;
  line-height: 1.1;
  max-width: 180px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.item-check-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.item-actions {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0;
}

.item-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 12px;
  min-width: 44px;
  padding: 0 8px;
  text-align: center;
}

.item-state-symbol {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-surface--open {
  background: #d8efff;
  color: #0188fe;
}

.status-surface--completed {
  background: #cfead8;
  color: #1e7a43;
}

.status-surface--skipped {
  background: #ffd79a;
  color: #c46c00;
}

.status-surface--not_required {
  background: #d7dde4;
  color: #5a6878;
}

.status-menu-wrap {
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 12;
  pointer-events: auto;
  margin-top: 6px;
}

.status-menu-toggle,
.ghost-button,
.primary-button,
.danger-button {
  padding: 9px 12px;
  border-radius: 14px;
  font-weight: 700;
}

.status-menu-toggle,
.ghost-button {
  background: var(--panel-muted);
}

.status-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 0.97rem;
  font-weight: 650;
  line-height: 1.1;
  min-width: 44px;
  text-align: center;
  margin-right: 0;
}

.primary-button {
  background: var(--blue);
  color: white;
}

.primary-button--small {
  padding: 9px 12px;
  font-size: 0.9rem;
}

.danger-button {
  background: #8a2a2a;
  color: white;
}

.status-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 15;
  min-width: 260px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid rgba(22, 33, 43, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
}

.status-menu-button {
  text-align: left;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--panel-muted);
}

.detail-hints {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.85rem;
}

.form-grid,
.result-grid {
  display: grid;
  gap: 14px;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--utm-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.form-grid--utm-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  margin-top: 14px;
  align-items: end;
}

.form-grid--longtext {
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.form-grid--longtext .primary-button--small {
  white-space: nowrap;
}

.gnss-convert-button {
  margin-top: 18px;
}

.gnss-locate-button {
  margin-top: 14px;
  width: 100%;
}

/* Pack-/Materialcheckliste (statische Darstellung in Pilots-Brain) */
.pilot-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pilot-checklist__item {
  display: flex;
  gap: 9px;
  align-items: baseline;
  line-height: 1.35;
  padding-left: calc(var(--indent, 0) * 22px);
}

.pilot-checklist__box {
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1;
}

.pilot-checklist__item.is-checked .pilot-checklist__box {
  color: var(--green);
}

.pilot-checklist__item.is-checked .pilot-checklist__text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Bürgerliche Dämmerung – Widget in der Nachtflug-Karte */
.twilight-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.twilight-head {
  font-weight: 700;
  font-size: 0.95rem;
}

.twilight-note {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0;
}

.twilight-error {
  color: #d64040;
  font-size: 0.9rem;
  margin: 0;
}

.twilight-button {
  width: 100%;
}

.twilight-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.twilight-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel-muted);
}

.twilight-entry__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.twilight-entry__main {
  flex: 1;
  min-width: 0;
}

.twilight-entry__label {
  font-weight: 700;
  font-size: 0.95rem;
}

.twilight-entry__sub {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.twilight-entry__time {
  text-align: right;
  white-space: nowrap;
}

.twilight-entry__clock {
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.twilight-entry__rel {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.segmented-control {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: var(--panel-muted);
  flex-wrap: wrap;
}

.segmented-control button {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
}

.segmented-control button.is-active {
  background: var(--panel-strong);
  box-shadow: 0 6px 18px rgba(22, 33, 43, 0.08);
}

.result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.result-card {
  padding: 18px;
}

.result-card p {
  margin-top: 10px;
  font-weight: 700;
}

.map-frame {
  height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid rgba(22, 33, 43, 0.08);
  cursor: crosshair;
}

.pilot-blocks {
  display: grid;
  gap: 14px;
}

.pilot-card {
  padding: 16px;
  line-height: 1.5;
  background: rgba(1, 136, 254, 0.08);
  /* Lange Komposita („Koordinatensystem:", „Bevölkerungsdichte") sprengen
     sonst die schmale linke Spalte und laufen in die rechte hinein. */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.pilot-card--blue {
  background: rgba(1, 136, 254, 0.14);
}

.pilot-card--orange {
  background: rgba(219, 138, 36, 0.15);
}

.pilot-card--green {
  background: rgba(44, 155, 88, 0.12);
}

.pilot-card--category {
  background: var(--panel-muted);
  border: 1px solid var(--line);
}

.pilot-card__category-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.pilot-list--inline {
  margin: 0;
  padding-left: 20px;
}

.pilot-list--inline li + li {
  margin-top: 6px;
}

.two-column-block {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 12px;
}

.two-column-block__items {
  margin-top: 10px;
}

.two-column-block > .pilot-card {
  min-width: 0;
}

.two-column-block--compact {
  grid-template-columns: 1fr 78px;
}

.two-column-block--balanced {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.95fr);
}

.two-column-block--scenario {
  grid-template-columns: 88px minmax(0, 1fr);
}

.two-column-block--funkstatus {
  grid-template-columns: 64px minmax(0, 1fr);
}

.pilot-card--count {
  text-align: center;
  font-weight: 800;
}

.two-column-block--scenario > .pilot-card:first-child {
  display: grid;
  place-items: center;
  font-weight: 800;
}

.two-column-block--funkstatus > .pilot-card:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.8rem;
}

.pilot-card--status-primary {
  min-height: 100%;
}

.pilot-status-code {
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 900;
  flex: 0 0 auto;
}

.pilot-status-title {
  font-weight: 800;
  line-height: 1.2;
}

.pilot-table-wrap {
  overflow: auto;
  border-radius: var(--radius);
}

.template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.template-actions a {
  text-decoration: none;
}

.pilot-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--radius);
}

.pilot-table th,
.pilot-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid rgba(1, 136, 254, 0.16);
  background: rgba(1, 136, 254, 0.08);
}

.pilot-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(1, 136, 254, 0.22);
}

.pilot-table__header-cell {
  font-weight: 700;
  position: sticky;
  left: 0;
  z-index: 1;
  background: rgba(1, 136, 254, 0.14);
}

/* Corner cell: sticky both directions */
.pilot-table thead tr th:first-child {
  left: 0;
  z-index: 2;
}

.pilot-list {
  margin: 0;
  padding-left: 24px;
}

.pilot-list li + li {
  margin-top: 10px;
}

.pilot-code {
  white-space: pre-wrap;
  font-family: "SF Mono", "Courier New", monospace;
}

.pilot-image-card img,
.image-modal img {
  width: 100%;
  display: block;
  border-radius: 18px;
}

/* Bilder in den Pilots-Brain-Karten sind Nachschlagebilder, keine Poster: Auf
   5 cm Höhe begrenzt, damit sie den Lesefluss nicht zerreißen (Auftrag Manó,
   09.09.2026). Zum Betrachten gibt es die Großansicht per Tap — die Karte
   selbst soll nur zeigen, DASS und WELCHES Bild dazugehört. */
.pilot-image-card img {
  max-height: 5cm;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.pilot-image-card {
  padding: 16px;
  display: grid;
  gap: 10px;
}

.inline-link {
  color: var(--blue);
  font-weight: 700;
}

.pilot-hero-symbol {
  font-size: 4rem;
  text-align: center;
  padding: 28px;
}

.detail-actions--top {
  margin-bottom: 18px;
}

.logbook-groups {
  display: grid;
  gap: 16px;
}

.log-group h3 {
  margin-bottom: 14px;
}

.log-entry {
  padding: 16px;
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.log-entry-meta {
  font-size: 0.8rem;
  opacity: 0.6;
}

.gnss-log-map {
  width: 256px;
  height: 256px;
  border-radius: var(--radius);
  margin-top: 6px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.empty-state {
  text-align: center;
}

.empty-state--large {
  padding: 48px 24px;
}

.landing-panel {
  padding: 36px;
  text-align: center;
  max-width: 720px;
}

.landing-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 14px;
}

.mobile-backline {
  padding: 12px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(22, 33, 43, 0.94);
  color: white;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 40;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 24, 0.82);
  display: grid;
  place-items: center;
  padding: 24px;
  /* Muss über Leaflet (Panes bis 700, Controls bis 1000), dem ETB-FAB (900)
     und der Vollbild-Karte (1200/1300) liegen — sonst ragen Karte und FAB
     in den Dialog hinein. Update-Banner (9999) und PDF-Overlay bleiben oben. */
  z-index: 1500;
}

.image-modal {
  max-width: min(1000px, 100%);
  width: 100%;
  background: var(--modal-panel);
  border-radius: 26px;
  padding: 18px;
  position: relative;
}

.image-modal--confirm {
  max-width: min(520px, 100%);
  display: grid;
  gap: 14px;
}

.detail-actions--confirm {
  justify-content: flex-end;
}

/* --- Koordinate teilen ---------------------------------------------------
   Kopierfelder, Kartendienst-Links und QR-Code. Der QR bekommt immer eine
   weiße Fläche, damit er auch im Dunkelmodus scannbar bleibt. */
.share-modal {
  max-width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  align-content: start;
}

/* Zwei Kopierkarten nebeneinander (auf schmalen Displays untereinander) */
.copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 599px) {
  .copy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Koordinate im Teilen-Dialog: nur Kontext, kopiert wird in der Ansicht */
.share-coords {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Kopierkarte: Label + Hinweis oben, Wert darunter, ganze Fläche antippbar */
.copy-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(22, 33, 43, 0.14);
  background: var(--panel-strong, rgba(255, 255, 255, 0.7));
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.copy-card:active {
  transform: scale(0.99);
  background: var(--panel-muted);
}

.copy-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.copy-card__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}

.copy-card__hint {
  font-size: 0.75rem;
  opacity: 0.6;
  white-space: nowrap;
}

.copy-card__value {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* Drei Kartendienste in einer Zeile: Logo über Kurzlabel, damit auch auf
   schmalen Displays nichts umbricht. */
.share-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.share-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  padding: 10px 6px;
  border-radius: 16px;
  background: var(--panel-muted);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

.share-link:active {
  transform: scale(0.97);
}

.share-link__icon {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
}

.share-qr {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.segmented-control--small button {
  padding: 8px 12px;
  font-size: 0.85rem;
}

/* Im Teilen-Dialog muss auf einen Blick klar sein, wohin der QR führt —
   der dezente Standard-Aktivzustand reicht dafür nicht. */
.share-qr .segmented-control button.is-active {
  background: var(--accent, #2f6db3);
  color: #fff;
}

.share-qr__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}

.share-qr__code {
  background: #fff;
  padding: 8px;
  border-radius: 16px;
  line-height: 0;
}

.share-qr__code svg {
  width: min(220px, 60vw);
  height: auto;
  display: block;
}

.detail-view--embedded > .detail-header {
  position: static;
}

.embedded-page-card {
  background: var(--panel);
  border: 1px solid rgba(22, 33, 43, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Die Karte ist auf randlose iframes ausgelegt (padding 0 + overflow hidden).
   Karten mit eigenem Textinhalt brauchen deshalb ihr Innenpolster selbst,
   sonst klebt der Text an der Kante und wird vom overflow beschnitten. */
.embedded-page-card--text {
  padding: 16px 18px;
}

.embedded-page-card--text > :first-child { margin-top: 0; }
.embedded-page-card--text > :last-child { margin-bottom: 0; }

.embedded-page-frame {
  width: 100%;
  min-height: 240px;
  border: 0;
  display: block;
  background: transparent;
}

/* PDF-Vorlagen: feste Höhe, der PDF-Viewer scrollt intern. Bewusst KEIN
   data-embedded-page → keine Auto-Resize-Logik (sonst „wandert" das PDF). */
.embedded-pdf-frame {
  width: 100%;
  height: 80vh;
  border: 0;
  display: block;
  background: transparent;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme]),
:root[data-theme="system"] {
    --bg: #0f1722;
    --panel: #151f2b;
    --panel-muted: #1b2735;
    --line: #2a394a;
    --text: #edf3f9;
    --muted: #a6b4c4;
    --blue: #6da7e2;
    --blue-soft: #223a53;
    --green: #4eb672;
    --green-soft: #1d3826;
    --orange: #e49c45;
    --orange-soft: #46311b;
    --red: #ef5b60;
    --red-soft: #3a1c1e;
    --shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
    --page-glow: rgba(57, 119, 184, 0.18);
    --page-top: #0b121a;
    --page-bottom: #101a25;
    --sidebar-bg: rgba(16, 24, 34, 0.86);
    --section-bg: rgba(21, 31, 43, 0.78);
    --panel-strong: #1a2532;
    --header-sticky-top: rgba(18, 26, 36, 0.98);
    --header-sticky-bottom: rgba(18, 26, 36, 0.94);
    --active-strip: #78aee5;
    --item-completed-bg: #1a2b22;
    --item-skipped-bg: #312417;
    --item-active-bg: #18283a;
    --item-not-required-bg: #253242;
    --modal-panel: #121b26;
  }
:root:not([data-theme]) .sidebar,
:root:not([data-theme]) .sidebar-section,
:root:not([data-theme]) .sidebar-header,
:root:not([data-theme]) .detail-header,
:root:not([data-theme]) .notes-panel,
:root:not([data-theme]) .gnss-panel,
:root:not([data-theme]) .result-card,
:root:not([data-theme]) .landing-panel,
:root:not([data-theme]) .pilot-image-card,
:root:not([data-theme]) .log-entry,
:root:not([data-theme]) .log-group,
:root:not([data-theme]) .empty-state,
:root:not([data-theme]) .pilot-card,
:root:not([data-theme]) .item-card,
:root:not([data-theme]) .mobile-backline,
:root:not([data-theme]) .status-menu,
:root:not([data-theme]) .image-modal,
:root[data-theme="system"] .sidebar,
:root[data-theme="system"] .sidebar-section,
:root[data-theme="system"] .sidebar-header,
:root[data-theme="system"] .detail-header,
:root[data-theme="system"] .notes-panel,
:root[data-theme="system"] .gnss-panel,
:root[data-theme="system"] .result-card,
:root[data-theme="system"] .landing-panel,
:root[data-theme="system"] .pilot-image-card,
:root[data-theme="system"] .log-entry,
:root[data-theme="system"] .log-group,
:root[data-theme="system"] .empty-state,
:root[data-theme="system"] .pilot-card,
:root[data-theme="system"] .item-card,
:root[data-theme="system"] .mobile-backline,
:root[data-theme="system"] .status-menu,
:root[data-theme="system"] .image-modal {
    border-color: rgba(160, 188, 214, 0.12);
  }
:root:not([data-theme]) .sidebar-row.is-active,
:root[data-theme="system"] .sidebar-row.is-active {
    border-color: rgba(109, 167, 226, 0.32);
  }
:root:not([data-theme]) .progress-orb::after,
:root[data-theme="system"] .progress-orb::after {
    background: var(--panel);
  }
:root:not([data-theme]) .status-pill--summary,
:root[data-theme="system"] .status-pill--summary {
    background: #223244;
    color: #ebf2fa;
  }
:root:not([data-theme]) .status-pill--success,
:root[data-theme="system"] .status-pill--success {
    background: #1d3826;
    color: #9fe0b3;
  }
:root:not([data-theme]) .status-pill--warning,
:root[data-theme="system"] .status-pill--warning {
    background: #49321b;
    color: #f4c287;
  }
:root:not([data-theme]) .status-pill--active,
:root[data-theme="system"] .status-pill--active {
    background: #223a53;
    color: #b8d7f7;
  }
:root:not([data-theme]) .progress-segment,
:root[data-theme="system"] .progress-segment {
    background: #324354;
  }
:root:not([data-theme]) .item-status-icon,
:root:not([data-theme]) .row-reset-button,
:root:not([data-theme]) .segmented-control,
:root:not([data-theme]) .ghost-button,
:root:not([data-theme]) .status-menu-button,
:root:not([data-theme]) .status-menu-toggle,
:root[data-theme="system"] .item-status-icon,
:root[data-theme="system"] .row-reset-button,
:root[data-theme="system"] .segmented-control,
:root[data-theme="system"] .ghost-button,
:root[data-theme="system"] .status-menu-button,
:root[data-theme="system"] .status-menu-toggle {
    background: var(--panel-muted);
  }
:root:not([data-theme]) .expected-badge,
:root[data-theme="system"] .expected-badge {
    background: #223a53;
    color: #b8d7f7;
  }
:root:not([data-theme]) .item-card--not_required .item-status-icon,
:root[data-theme="system"] .item-card--not_required .item-status-icon {
    background: #344352;
    color: #aab6c3;
  }
:root:not([data-theme]) .item-card--not_required .item-question,
:root:not([data-theme]) .item-card--not_required .item-hint,
:root:not([data-theme]) .item-card--not_required .item-meta,
:root[data-theme="system"] .item-card--not_required .item-question,
:root[data-theme="system"] .item-card--not_required .item-hint,
:root[data-theme="system"] .item-card--not_required .item-meta {
    color: #92a0ae;
    text-decoration-color: rgba(170, 182, 195, 0.7);
  }
:root:not([data-theme]) .item-card--not_required .expected-badge,
:root:not([data-theme]) .item-card--not_required .status-menu-toggle,
:root[data-theme="system"] .item-card--not_required .expected-badge,
:root[data-theme="system"] .item-card--not_required .status-menu-toggle {
    background: #334252;
    color: #aebbc8;
  }
:root:not([data-theme]) .pilot-table th,
:root:not([data-theme]) .pilot-table td,
:root:not([data-theme]) .pilot-table__header-cell,
:root[data-theme="system"] .pilot-table th,
:root[data-theme="system"] .pilot-table td,
:root[data-theme="system"] .pilot-table__header-cell {
    border-color: rgba(109, 167, 226, 0.18);
    background: rgba(34, 58, 83, 0.48);
  }
:root:not([data-theme]) .segmented-control button.is-active,
:root[data-theme="system"] .segmented-control button.is-active {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
  }
}

/* Derselbe Satz Regeln für den von Hand gewählten Dunkelmodus.
   Änderungen gehören IMMER in beide Fassungen — die eine gilt bei
   „Systemvorgabe", die andere bei ausdrücklicher Wahl. */
:root[data-theme="dunkel"] {
  color-scheme: dark;
    --bg: #0f1722;
    --panel: #151f2b;
    --panel-muted: #1b2735;
    --line: #2a394a;
    --text: #edf3f9;
    --muted: #a6b4c4;
    --blue: #6da7e2;
    --blue-soft: #223a53;
    --green: #4eb672;
    --green-soft: #1d3826;
    --orange: #e49c45;
    --orange-soft: #46311b;
    --red: #ef5b60;
    --red-soft: #3a1c1e;
    --shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
    --page-glow: rgba(57, 119, 184, 0.18);
    --page-top: #0b121a;
    --page-bottom: #101a25;
    --sidebar-bg: rgba(16, 24, 34, 0.86);
    --section-bg: rgba(21, 31, 43, 0.78);
    --panel-strong: #1a2532;
    --header-sticky-top: rgba(18, 26, 36, 0.98);
    --header-sticky-bottom: rgba(18, 26, 36, 0.94);
    --active-strip: #78aee5;
    --item-completed-bg: #1a2b22;
    --item-skipped-bg: #312417;
    --item-active-bg: #18283a;
    --item-not-required-bg: #253242;
    --modal-panel: #121b26;
  }
:root[data-theme="dunkel"] .sidebar,
:root[data-theme="dunkel"] .sidebar-section,
:root[data-theme="dunkel"] .sidebar-header,
:root[data-theme="dunkel"] .detail-header,
:root[data-theme="dunkel"] .notes-panel,
:root[data-theme="dunkel"] .gnss-panel,
:root[data-theme="dunkel"] .result-card,
:root[data-theme="dunkel"] .landing-panel,
:root[data-theme="dunkel"] .pilot-image-card,
:root[data-theme="dunkel"] .log-entry,
:root[data-theme="dunkel"] .log-group,
:root[data-theme="dunkel"] .empty-state,
:root[data-theme="dunkel"] .pilot-card,
:root[data-theme="dunkel"] .item-card,
:root[data-theme="dunkel"] .mobile-backline,
:root[data-theme="dunkel"] .status-menu,
:root[data-theme="dunkel"] .image-modal {
    border-color: rgba(160, 188, 214, 0.12);
  }
:root[data-theme="dunkel"] .sidebar-row.is-active {
    border-color: rgba(109, 167, 226, 0.32);
  }
:root[data-theme="dunkel"] .progress-orb::after {
    background: var(--panel);
  }
:root[data-theme="dunkel"] .status-pill--summary {
    background: #223244;
    color: #ebf2fa;
  }
:root[data-theme="dunkel"] .status-pill--success {
    background: #1d3826;
    color: #9fe0b3;
  }
:root[data-theme="dunkel"] .status-pill--warning {
    background: #49321b;
    color: #f4c287;
  }
:root[data-theme="dunkel"] .status-pill--active {
    background: #223a53;
    color: #b8d7f7;
  }
:root[data-theme="dunkel"] .progress-segment {
    background: #324354;
  }
:root[data-theme="dunkel"] .item-status-icon,
:root[data-theme="dunkel"] .row-reset-button,
:root[data-theme="dunkel"] .segmented-control,
:root[data-theme="dunkel"] .ghost-button,
:root[data-theme="dunkel"] .status-menu-button,
:root[data-theme="dunkel"] .status-menu-toggle {
    background: var(--panel-muted);
  }
:root[data-theme="dunkel"] .expected-badge {
    background: #223a53;
    color: #b8d7f7;
  }
:root[data-theme="dunkel"] .item-card--not_required .item-status-icon {
    background: #344352;
    color: #aab6c3;
  }
:root[data-theme="dunkel"] .item-card--not_required .item-question,
:root[data-theme="dunkel"] .item-card--not_required .item-hint,
:root[data-theme="dunkel"] .item-card--not_required .item-meta {
    color: #92a0ae;
    text-decoration-color: rgba(170, 182, 195, 0.7);
  }
:root[data-theme="dunkel"] .item-card--not_required .expected-badge,
:root[data-theme="dunkel"] .item-card--not_required .status-menu-toggle {
    background: #334252;
    color: #aebbc8;
  }
:root[data-theme="dunkel"] .pilot-table th,
:root[data-theme="dunkel"] .pilot-table td,
:root[data-theme="dunkel"] .pilot-table__header-cell {
    border-color: rgba(109, 167, 226, 0.18);
    background: rgba(34, 58, 83, 0.48);
  }
:root[data-theme="dunkel"] .segmented-control button.is-active {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
  }


.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(22, 33, 43, 0.9);
  color: white;
}

.image-modal-copy {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

@media (max-width: 959px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell--mobile-detail .detail-pane {
    padding: 10px;
    padding-bottom: var(--fab-freiraum);
  }

  .sidebar {
    position: static;
    height: auto;
    min-height: 100vh;
  }

  .sidebar.is-hidden {
    display: none;
  }

  .detail-pane {
    padding: 10px;
    padding-bottom: var(--fab-freiraum);
  }

  /* Auf dem Telefon liegt die Übersicht selbst unter den beiden Knöpfen —
     die letzte Sektion braucht denselben Freiraum. */
  .sidebar {
    padding-bottom: var(--fab-freiraum);
  }

  .detail-view > .detail-header {
    top: 0;
  }

  .form-grid,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .form-grid--utm-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid--utm-bottom {
    grid-template-columns: 1fr 1fr auto;
  }

  .form-grid--longtext {
    grid-template-columns: 1fr auto;
  }

  .two-column-block {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    gap: 10px;
    align-items: stretch;
  }

  .two-column-block--compact {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
    align-items: stretch;
  }

  .two-column-block--balanced {
    grid-template-columns: minmax(0, 1fr) minmax(138px, 0.92fr);
    gap: 10px;
    align-items: stretch;
  }

  .two-column-block--scenario {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .two-column-block--funkstatus {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .item-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .item-footer {
    margin-top: 1px;
  }

  .image-modal-copy,
  .sidebar-header,
  .detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-header,
  .notes-panel {
    padding: 12px;
  }

  .detail-header-meta {
    gap: 6px;
    align-items: center;
  }

  .detail-view {
    gap: 8px;
  }

  .mobile-backline {
    padding: 4px;
  }

  .mobile-backline .ghost-button {
    padding: 8px 12px;
    border-radius: 11px;
    font-size: 0.95rem;
  }

  .detail-header h2 {
    font-size: clamp(1.65rem, 6vw, 2.25rem);
    line-height: 1.08;
  }

  body.detailkopf-kompakt .detail-view:not(.detail-view--embedded) > .detail-header h2 {
    font-size: 1.1rem;
    line-height: 1.25;
  }

  .status-pill {
    padding: 5px 9px;
    font-size: 0.78rem;
  }

  .progress-bar {
    margin-top: 6px;
  }

  .eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }

  .item-card {
    padding: 6px 6px 5px;
    border-radius: 18px;
  }

  .item-card::before {
    top: 8px;
    bottom: 8px;
    width: 3px;
  }

  .item-main-button {
    gap: 8px;
  }

  .item-status-icon {
    width: 27px;
    height: 27px;
    font-size: 0.92rem;
  }

  .item-copy {
    gap: 1px;
  }

  .item-question {
    font-size: 0.97rem;
    line-height: 1.14;
  }

  .item-hint {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  .item-actions {
    gap: 0;
  }

  .expected-badge {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.97rem;
    max-width: 118px;
    border-radius: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.05;
  }

  .status-menu-toggle {
    min-height: 36px;
    padding: 0 8px;
    font-size: 0.97rem;
    border-radius: 12px;
    min-width: 46px;
    margin-right: 0;
  }

  .item-state-pill {
    min-height: 36px;
    min-width: 46px;
    padding: 0 8px;
  }

  .status-menu-wrap {
    margin-top: 4px;
  }

  .status-menu {
    min-width: 220px;
  }

  .status-menu-button {
    padding: 10px 11px;
    font-size: 0.9rem;
  }
}

.update-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--thw-blue, #003c8f);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.update-banner button {
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: var(--thw-blue, #003c8f);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* ============================================================================
   Einsatzkarte & DIPUL-Geozonen
   ============================================================================ */

.map-frame--tall {
  height: min(62vh, 640px);
}

.segmented-control .segmented-toggle-dipul.is-active {
  background: var(--blue-soft);
  color: var(--blue);
  box-shadow: 0 6px 18px rgba(1, 136, 254, 0.14);
}

.einsatz-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.chip-toggle {
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-muted);
  font-weight: 600;
  cursor: pointer;
  min-height: 46px;
}

.chip-toggle.is-active {
  background: var(--blue-soft);
  border-color: rgba(1, 136, 254, 0.4);
  color: var(--blue);
}

.chip-toggle--small {
  padding: 8px 12px;
  min-height: 38px;
  font-size: 0.85rem;
}

/* Nicht wählbar, weil das Gerät gerade fliegt (Flugbuch-Startmaske, v194). */
.chip-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Von den amtlichen Rasterdaten ausgeschlossen (Gebietswahl Schritt 8, v218).
   Durchgestrichen statt nur blass: „geht nicht" soll man sehen, ohne die
   Erklärung darunter erst zu lesen. Bleibt eine gesperrte Option gewählt,
   ist sie weiter anklickbar — sonst käme man aus ihr nicht mehr heraus. */
.chip-toggle.is-blocked {
  text-decoration: line-through;
  border-color: rgba(211, 47, 47, 0.45);
  color: #b3261e;
  background: rgba(211, 47, 47, 0.06);
}

.chip-toggle.is-blocked.is-active {
  background: rgba(211, 47, 47, 0.16);
  border-color: rgba(211, 47, 47, 0.7);
}

.dipul-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ===========================================================================
   Trefferfläche der Kartenmarker (v263)
   ---------------------------------------------------------------------------
   Die taktischen Zeichen (20-30 px) und die Platz-Signaturen (20/24 px) sind
   zu klein, um sie mit Handschuhen oder im fahrenden Fahrzeug sicher zu
   treffen. Ein knapper Fehlgriff ging bisher an ihnen vorbei auf die Karte -
   auf der Einsatzkarte heisst das: eine volle Punktpruefung an einer Stelle,
   die niemand gemeint hat.

   Vergroessert wird deshalb nur die unsichtbare Flaeche, nicht das Zeichen.
   Das `::before` liegt zentriert ueber dem Marker und ist mindestens so gross
   wie `--marker-hit`; das Symbol selbst bleibt, wie es ist. Die Zahl steht
   zusaetzlich als `MARKER_HIT_PX` in `app/main.js` (dort bestimmt sie den
   Abstand aufgefaecherter Marker) - wer sie aendert, aendert beide.
   =========================================================================== */
:root {
  --marker-hit: 38px;
}
.thw-marker::before,
.ad-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--marker-hit));
  height: max(100%, var(--marker-hit));
  transform: translate(-50%, -50%);
  /* Kein Hintergrund: die Flaeche faengt den Tap, ist aber unsichtbar. */
}

/* THW-Informationskarte: taktische Zeichen als Marker + Layer-Steuerung */
.leaflet-div-icon.thw-marker {
  background: transparent;
  border: none;
}
.thw-marker svg {
  overflow: visible;
  /* Ueber der Trefferflaeche, damit das Zeichen sichtbar bleibt. */
  position: relative;
}
.thw-layer-group {
  margin-top: 14px;
}
.thw-layer-caption {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
  margin-bottom: 2px;
}
.thw-layer-group .chip-toggle--small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.thw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 4px;
  font-size: 0.82rem;
}
.thw-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.thw-selection .thw-selection-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.thw-selection-sign {
  flex: 0 0 auto;
  display: inline-flex;
}
.thw-selection-head strong {
  display: block;
  line-height: 1.2;
}
.thw-selection-ebene {
  display: block;
  opacity: 0.7;
}
.thw-selection-body {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.thw-selection-body small {
  display: block;
  opacity: 0.85;
}
/* Popup direkt am Marker */
.thw-popup .leaflet-popup-content {
  margin: 12px 14px;
  line-height: 1.4;
}
.thw-popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.thw-popup-sign {
  flex: 0 0 auto;
  display: inline-flex;
}
.thw-popup-head strong {
  display: block;
  font-size: 0.95rem;
}
.thw-popup-ebene {
  display: block;
  opacity: 0.7;
}
.thw-popup-body {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
}
.thw-popup-body small {
  display: block;
  opacity: 0.9;
}
.thw-popup-link {
  font-weight: 600;
  text-decoration: none;
}

.dipul-info {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--orange-soft);
  display: grid;
  gap: 10px;
}

.dipul-info--clear {
  background: var(--green-soft);
}

.dipul-info .map-note {
  margin: 0;
}

.dipul-hit {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.65);
}

.dipul-hit__type {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(219, 138, 36, 0.18);
  color: #8a5514;
  white-space: nowrap;
}

.dipul-hit__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dipul-hit__body small {
  color: var(--muted);
  font-size: 0.8rem;
}

.einsatz-actions {
  margin-top: 16px;
}

/* ============================================================================
   Flug-Prüfergebnis (Ampel) — Kartenklick-Verdikt
   ============================================================================ */
.flight-result {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

/* Ein-Tap-Lagecheck: prominenter Einstieg auf der Startseite */
.lage-cta {
  margin-top: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #2f6db3 0%, #16344f 100%);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
}

/* „Lage hier" steht jetzt am Ende des Einsatz-Workflows statt im
   Sidebar-Kopf. Dort ist es eine Zeile unter anderen: der blaue Verlauf des
   Kopfbereichs entfällt, das Element trägt dieselbe Fläche wie die
   Sidebar-Zeilen darüber. */
.section-content .lage-cta {
  margin-top: 0;
  padding: 12px;
  gap: 12px;
  border-radius: 16px;
  background: var(--panel);
  color: inherit;
  box-shadow: none;
}
.section-content .lage-cta .lage-cta__icon {
  font-size: 1.1rem;
}
.section-content .lage-cta .lage-cta__copy strong {
  font-size: 0.95rem;
}
.section-content .lage-cta .lage-cta__copy small {
  color: var(--text-mute, #8a94a6);
}

.lage-cta:active {
  transform: scale(0.99);
}

.lage-cta__icon {
  font-size: 1.6rem;
  line-height: 1;
}

.lage-cta__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lage-cta__copy strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.lage-cta__copy small {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
}

.segmented-control--tabs {
  width: 100%;
}

.drone-class-picker {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  border: 1px solid var(--line);
}

.drone-class-picker__field {
  display: grid;
  gap: 4px;
}

.drone-class-picker__field small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.drone-class-picker select {
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.drone-class-picker__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}

.drone-class-picker__ae {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
}

.drone-class-picker__ae input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.flight-verdict {
  padding: 16px;
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--panel-muted);
}

.flight-verdict--go { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.flight-verdict--caution { background: var(--orange-soft); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.flight-verdict--nogo { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.flight-verdict--pending { background: var(--panel-muted); }

.flight-verdict__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
}

.flight-verdict__icon { font-size: 1.3rem; line-height: 1; }
.flight-verdict--go .flight-verdict__head strong { color: var(--green); }
.flight-verdict--caution .flight-verdict__head strong { color: var(--orange); }
.flight-verdict--nogo .flight-verdict__head strong { color: var(--red); }

.flight-verdict__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.flight-verdict__bullet {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text);
}

.flight-verdict__bullet::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.flight-verdict__bullet--nogo::before { background: var(--red); }
.flight-verdict__bullet--caution::before { background: var(--orange); }
.flight-verdict__bullet--info::before { background: var(--blue); }

/* v217 — als geklärt bestätigte Punkte. Sie bleiben stehen und werden nur
   anders markiert: der Ausschlussgrund verschwindet nicht, er ist erklärt. */
.flight-verdict__bullet--geklaert::before { background: var(--green); }

.flight-verdict__bullet-text { display: block; }

.flight-verdict__freigabe-aktion { margin-top: 6px; }

.flight-verdict__freigabe {
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  background: var(--green-soft);
  display: grid;
  gap: 6px;
  justify-items: start;
}

.flight-verdict__freigabe strong {
  font-size: 0.82rem;
  color: var(--green);
}

.flight-verdict__freigabe textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 6px 8px;
  border: 1px solid var(--border, #d5dbe6);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text);
  resize: vertical;
}

.flight-verdict__geklaert-zaehler {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--green);
}

/* Briefing-Feld „ETB Anlage-Nr." mit Vorschlagsknopf (v217). */
.etb-anlage-feld {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etb-anlage-feld input { flex: 1 1 auto; min-width: 0; }
.etb-anlage-feld button { flex: 0 0 auto; }

.flight-verdict__hero {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 2px;
}

.flight-verdict__hero--go { color: var(--green); }
.flight-verdict__hero--caution { color: var(--orange); }
.flight-verdict__hero--nogo { color: var(--red); }

.flight-verdict__subline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Aktionsleiste im Prüfergebnis (DIPUL-Link + Prüfbericht) */
.flight-verdict__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Berichtskopf (Profil) — eingeklappt neben dem PDF-Export */
.report-profile {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  padding: 10px 12px;
}

.report-profile > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}

.report-profile > summary::-webkit-details-marker {
  display: none;
}

.report-profile[open] > summary {
  margin-bottom: 8px;
}

.report-profile__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 8px;
}

.report-profile__field {
  display: grid;
  gap: 4px;
}

.report-profile__field small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.report-profile__field input {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.report-profile__field select {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.report-profile__field input[readonly] {
  background: var(--panel-muted);
  color: var(--muted);
}

.report-profile__field small em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.flight-verdict__disclaimer {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: 10px;
}

/* Flugwetter-Block im Prüfergebnis */
.flight-weather {
  display: grid;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}

.flight-weather--go { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.flight-weather--caution { border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.flight-weather--nogo { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.flight-weather--pending { background: var(--panel-muted); }

.flight-weather__head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.95rem;
}

.flight-weather--go .flight-weather__head strong { color: var(--green); }
.flight-weather--caution .flight-weather__head strong { color: var(--orange); }
.flight-weather--nogo .flight-weather__head strong { color: var(--red); }

.flight-weather__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 14px;
}

.flight-weather__row {
  display: grid;
  gap: 1px;
  font-size: 0.88rem;
}

.flight-weather__row small {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.flight-weather__sources {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* METAR/TAF im Original — im selben Block wie die Ampel, aber eingeklappt,
   damit die Rohdaten die Aussage nicht überlagern. */
.flight-weather__raw {
  font-size: 0.78rem;
  color: var(--muted);
}

.flight-weather__raw summary {
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
}

.flight-weather__raw code {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Datenstand (v267): eine Zeile, die im Normalfall nicht auffällt und im
   Ausnahmefall — alles älter als eine halbe Stunde — sofort ins Auge springt. */
.datenstand {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  font-size: 0.72rem;
  color: var(--muted);
}

.datenstand--alt {
  background: color-mix(in srgb, var(--orange) 12%, var(--panel-muted));
}

.datenstand__titel {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.datenstand__eintrag--alt {
  color: var(--orange);
  font-weight: 600;
}

.datenstand__hinweis {
  flex-basis: 100%;
  color: var(--orange);
}

/* ============================================================================
   Luftlage (v267) — Verkehrsmarker, Hindernismarker und die Zeile darunter.

   Die Marker müssen auf einer Karte lesbar bleiben, auf der schon Geo-Zonen,
   taktische Zeichen und ein Gitter liegen: helle Kontur um alles, keine
   Flächen. Der Verkehrspfeil dreht sich in Flugrichtung — das ist die einzige
   Information, die man aus zwei Metern Entfernung noch abliest.
   ============================================================================ */
.adsb-marker {
  line-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Der Schatten ist nicht Zierde, sondern das, was die Silhouette von einer
   Zonenfläche oder einer Autobahn darunter trennt — zusammen mit der weißen
   Kontur im SVG dieselbe Technik wie bei Kartenschrift. */
.adsb-marker__svg {
  display: block;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
}

.adsb-marker--grund { opacity: 0.6; }

/* Reiseverkehr über 1500 m: sichtbar, aber zurückgenommen. */
.adsb-marker--hoch { opacity: 0.55; }

/* Rufzeichen nur beim tiefen Verkehr (siehe verkehrIcon). Nicht mitgedreht:
   ein gedrehter Schriftzug ist auf halber Karte unlesbar. */
.adsb-marker__label {
  margin-top: 1px;
  padding: 0 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

.adsb-marker__punkt {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Notfall-Squawk: ein pulsierender Ring. Bewusst auffällig — 7700 ist das
   Einzige auf dieser Ebene, das den Trupp sofort etwas angeht. */
.adsb-marker--notfall::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--red);
  border-radius: 50%;
  animation: adsb-puls 1.4s ease-out infinite;
}

@keyframes adsb-puls {
  from { transform: scale(0.7); opacity: 1; }
  to { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .adsb-marker--notfall::after { animation: none; opacity: 0.9; }
}

.adsb-popup__notfall { color: var(--red); }

.adsb-popup__fuss,
.hindernis-popup__fuss {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

.hindernis-popup__warnung { color: var(--orange); }

.hindernis-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.hindernis-marker__zeichen { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }

/* Die Höhe klebt am Zeichen statt in einem Tooltip: sie ist der Grund, warum
   das Objekt auf der Karte steht, und im Einsatz tippt niemand jedes Symbol an. */
.hindernis-marker__hoehe {
  position: absolute;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  border-radius: 3px;
  padding: 0 2px;
  line-height: 1.3;
  white-space: nowrap;
}

.luftlage {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.luftlage__block {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-muted);
  padding: 8px 10px;
}

.luftlage__kopf {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.88rem;
}

.luftlage__kopf .ghost-button { margin-left: auto; }

.luftlage__zeile {
  margin: 4px 0 0;
  font-size: 0.82rem;
}

.luftlage__fehler {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--orange);
}

.luftlage__fuss {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ============================================================================
   Musterampel und Auftragseignung (v266)

   Beide stehen im Wetterblock des Prüfergebnisses und beantworten die zwei
   Fragen, die nach „wie ist das Wetter" kommen: WOMIT darf geflogen werden,
   und TAUGT das Ergebnis. Die Musterampel steht offen — sie gehört zur
   Startentscheidung. Die Auftragseignung ist eingeklappt: sie ist Beiwerk zur
   Meldung an die Einsatzleitung, kein Tor im Workflow.

   Drei Spalten, feste Reihenfolge: Ampelsymbol, Name, Grund. Der Grund darf
   umbrechen, Symbol und Name nicht — so bleibt die Spalte im Blick, auch wenn
   drei Gründe in einer Zeile stehen.
   ============================================================================ */
.musterampel {
  display: grid;
  gap: 4px;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel-muted);
}

.musterampel--go { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.musterampel--caution { border-color: color-mix(in srgb, var(--orange) 40%, transparent); }
.musterampel--nogo { border-color: color-mix(in srgb, var(--red) 40%, transparent); }

.musterampel__head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.88rem;
  margin-bottom: 2px;
}

.musterampel--go .musterampel__head strong { color: var(--green); }
.musterampel--caution .musterampel__head strong { color: var(--orange); }
.musterampel--nogo .musterampel__head strong { color: var(--red); }

.musterampel__row,
.eignung__row {
  display: grid;
  grid-template-columns: 1.3em minmax(5.5em, auto) 1fr;
  gap: 2px 8px;
  align-items: baseline;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 2px 0;
}

.musterampel__icon,
.eignung__icon { text-align: center; }

.musterampel__name,
.eignung__label {
  font-weight: 600;
  white-space: nowrap;
}

.musterampel__grund,
.eignung__grund { color: var(--muted); }

.musterampel__row--nogo .musterampel__name,
.eignung__row--schlecht .eignung__label { color: var(--red); }

.musterampel__row--caution .musterampel__name,
.eignung__row--bedingt .eignung__label { color: var(--orange); }

.musterampel__fuss,
.eignung__fuss {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
}

.eignung {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-muted);
  padding: 6px 10px;
  font-size: 0.82rem;
}

.eignung > summary {
  cursor: pointer;
  padding: 3px 0;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Das Zeitfenster ist die eigentliche Auskunft an die Einsatzleitung — es
   steht deshalb abgesetzt und nicht in derselben Farbe wie der Grund. */
.eignung__fenster {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 520px) {
  /* Auf dem Telefon reicht die Breite für drei Spalten nicht: der Grund rutscht
     unter Symbol und Namen, bleibt aber eingerückt. */
  .musterampel__row,
  .eignung__row {
    grid-template-columns: 1.3em 1fr;
  }
  .musterampel__grund,
  .eignung__grund { grid-column: 2; }
}

.ghost-button--small {
  padding: 7px 12px;
  font-size: 0.85rem;
  justify-self: start;
}

/* ============================================================================
   ETB — Einsatztagebuch (Prototyp)
   ============================================================================ */

.etb-proto-banner {
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.etb-panel {
  display: grid;
  gap: 14px;
}

.etb-position-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--muted);
  cursor: pointer;
}

.etb-position-toggle input {
  width: 20px;
  height: 20px;
  /* Ohne flex: 0 0 auto quetscht ein langer Text daneben das Kästchen
     zusammen — dann sind die Kästchen untereinander verschieden breit. */
  flex: 0 0 auto;
  accent-color: var(--blue);
}

.etb-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.etb-quick-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-strong);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 33, 43, 0.05);
}

.etb-quick-button:active {
  transform: scale(0.97);
}

.etb-quick-button:disabled {
  opacity: 0.5;
}

.etb-quick-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.etb-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.etb-delete {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.etb-delete:hover {
  background: rgba(214, 64, 64, 0.1);
  color: #d64040;
}

/* Ablage Flugvorbereitung (gespeicherte Karten-Anlagen) */

.ablage-section {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.ablage-section h3 {
  margin: 0;
}

.ablage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.ablage-card {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
  box-shadow: var(--shadow);
}

.ablage-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
}

.ablage-meta {
  display: grid;
  gap: 2px;
  padding: 0 12px;
}

.ablage-meta small {
  color: var(--muted);
  font-size: 0.78rem;
}

.ablage-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px;
}

.ablage-actions .ghost-button {
  flex: 1;
}

.ablage-delete:hover {
  color: #d64040;
}

/* ==========================================================================
   Einsatz-Workflow (#einsatz)
   ========================================================================== */
.einsatz-workflow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.einsatz-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.einsatz-step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  min-height: 56px;
}

.einsatz-step__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--panel-muted);
  color: var(--muted);
  border: 1.5px solid var(--line);
}

.einsatz-step__num.is-done {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green);
}

.einsatz-step__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.einsatz-step__copy strong { font-size: 1rem; }
.einsatz-step__copy small { color: var(--muted); font-size: 0.8rem; }

.einsatz-step__chev {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.1rem;
}

.einsatz-step__body {
  padding: 4px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.einsatz-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.einsatz-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* Vorgesehener Einsatzzeitraum: Von/Bis je mit Datum + Uhrzeit, alles optional */
.zeitraum-grid {
  display: grid;
  /* 190 px statt 140: seit dem Leeren-Knopf (.zeitfeld__leeren) kostet jede
     Zelle 50 px extra — bei 140 px blieb vom Datumsfeld nur noch "02.09."
     uebrig. Lieber zwei Zeilen als vier abgeschnittene Spalten. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.zeitraum-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.zeitraum-cell small {
  color: var(--text-secondary, #5b6f84);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.zeitraum-cell input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #d9dce3);
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  min-height: 44px;
}

.zeitraum-preview {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary, #5b6f84);
}

/* Sofortbedarf: Personen-Auswahl neben dem Verpflegung-Chip */
.sofort-personen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.sofort-personen select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line, #d9dce3);
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  min-height: 40px;
}

.chip-row--sub { margin-top: 8px; }

.einsatz-briefing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.input-field--wide { grid-column: 1 / -1; }

/* Briefing-Vorbelegung in Gruppen (v225) — eine Gruppe offen, der Rest als
   Zeile mit Zähler. Bewusst dieselbe Optik wie die Schritte des Workflows. */
/* Einsatz-Workflow: zwei Blöcke (v228) — Flugvorbereitung zuerst, der
   Einheitserfassungsbogen darunter. Der Kopf trennt sie sichtbar, der Zähler
   sagt, wie weit der Block ist. */
.einsatz-block { margin-bottom: 1.6rem; }
.einsatz-block__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0 0 0.2rem;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  margin-bottom: 0.4rem;
}
.einsatz-block__head h3 { margin: 0; font-size: 0.95rem; letter-spacing: 0.02em; }
.einsatz-block__zaehler {
  margin-left: auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.einsatz-block__zaehler.is-voll { color: var(--go, #2e7d32); opacity: 1; font-weight: 600; }
.einsatz-block__note { margin-top: 0; margin-bottom: 0.7rem; }

/* „Weiter"-Knopf am Fuß jedes aufgeklappten Schritts (v228). */
.einsatz-step__weiter {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line, rgba(0, 0, 0, 0.15));
  display: flex;
  justify-content: flex-end;
}
.einsatz-step__weiter .ghost-button { min-height: 44px; }

/* Einsatzbeginn: nur noch ein Datum-/Zeit-Paar (v228, Ende zog in den
   Abschluss). Zwei Spalten statt vier. */
.zeitraum-grid--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.briefing-gruppen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.briefing-gruppe {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
}

.briefing-gruppe.is-open { border-color: var(--accent, #1d4ed8); }

.briefing-gruppe__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 48px;
}

.briefing-gruppe__titel { flex: 1; font-weight: 600; }

.briefing-gruppe__zaehler {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6b7280);
}

.briefing-gruppe__zaehler.is-voll {
  border-color: #157347;
  color: #157347;
}

.briefing-gruppe__chev { flex: none; color: var(--muted, #6b7280); }

.briefing-gruppe__body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}

.briefing-gruppe__body .map-note { margin-top: 10px; }

.input-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

/* Crew / Personalstamm */
.einsatz-crew-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.einsatz-crew-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  flex-wrap: wrap;
}

.einsatz-crew-row.is-mit {
  background: var(--blue-soft);
  border-color: var(--blue);
}

.einsatz-crew-row.is-editing {
  flex-direction: column;
  align-items: stretch;
}

.einsatz-crew-check {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  cursor: pointer;
  min-width: 0;
}

.einsatz-crew-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.einsatz-crew-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.einsatz-crew-name small { color: var(--muted); font-size: 0.78rem; }

.einsatz-crew-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent, #2f6db3);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

.icon-button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}

.einsatz-quali-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.einsatz-staerke {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  border: 1px solid var(--line);
}

.einsatz-staerke small { color: var(--muted); margin-left: 6px; }

/* Stand-Übergabe zwischen Geräten (Export/Import als Datei) */
.einsatz-transfer {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--panel-muted);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.einsatz-transfer h3 { margin: 0; font-size: 1rem; }
.einsatz-transfer .map-note { margin: 0; }

/* Warnende Variante der Hinweiszeile (v263, zuerst fuer den iOS-Speicher-
   hinweis unter „Stand uebergeben"). Bewusst mit Rahmen und Flaeche statt nur
   roter Schrift: der Hinweis steht neben einem gleich langen neutralen Absatz
   und wuerde sonst mitgelesen wie eine Fussnote. */
.map-note--warn {
  border: 1px solid rgba(180, 35, 24, 0.45);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: rgba(180, 35, 24, 0.08);
  padding: 10px 12px;
  color: inherit;
}
.einsatz-transfer .map-note--warn { margin: 0 0 12px; }

/* Ablegezone für den Stand-Import (v215) — Tippen öffnet den Datei-Dialog,
   Ziehen legt die Datei direkt ab. */
.transfer-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 22px 16px;
  text-align: center;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.transfer-drop:hover,
.transfer-drop:focus-visible,
.transfer-drop.is-over {
  outline: none;
  border-color: var(--accent, #2f6db3);
  background: color-mix(in srgb, var(--accent, #2f6db3) 8%, transparent);
}

.transfer-drop.is-over { border-style: solid; }
.transfer-drop strong { font-size: 0.95rem; }
.transfer-drop span { font-size: 13px; color: var(--muted); }
.transfer-drop code { font-size: 12px; }
/* Kinder dürfen das Drop-Ziel nicht schlucken (dragleave-Flackern). */
.transfer-drop * { pointer-events: none; }

/* Randbedingungen / Empfehlung — Ampelkarten */
.einsatz-cond-card {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.einsatz-cond-card strong { font-size: 0.95rem; }
.einsatz-cond-card small { color: var(--muted); }

/* Kurze Aufzählung in einer Befundkarte (Hindernisse, v286). Monospace für
   die Entfernungen: so stehen die Zahlen untereinander und die Liste lässt
   sich im Fahrzeug überfliegen. */
.einsatz-cond-liste {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.einsatz-cond-card--go { background: var(--green-soft); border-color: var(--green); }
.einsatz-cond-card--caution { background: var(--orange-soft); border-color: var(--orange); }
.einsatz-cond-card--nogo { background: #fde7e7; border-color: #d64545; }
.einsatz-cond-card--info { background: var(--blue-soft); border-color: var(--blue); }

.einsatz-twilight-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  font-size: 0.9rem;
}
.einsatz-twilight-grid span:nth-child(odd) { color: var(--muted); }
.einsatz-twilight-grid span:nth-child(even) { font-variant-numeric: tabular-nums; text-align: right; }

/* Briefing-Textfelder (v212): einzeilig starten, per JS mit dem Inhalt wachsen.
   overflow:hidden verhindert die Scrollleiste während des Wachsens. */
textarea.auto-grow {
  overflow: hidden;
  resize: none;
  min-height: 2.6em;
}

/* Bausteine für den Auftragswortlaut: zweite Reihe etwas kleiner, damit die
   Auftragsart darüber die Hauptsache bleibt. */
.auftrag-presets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.auftrag-presets__bausteine {
  padding-left: 2px;
  border-left: 2px solid var(--line);
}
.chip-toggle--small {
  font-size: 0.82rem;
  padding: 6px 10px;
}

/* Tagesverlauf-Band (v211): Farben getrennt für hell/dunkel, damit das Band
   in beiden Themes lesbar bleibt. */
.einsatz-twilight-chart {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 4px;
  overflow: visible;
}
.einsatz-twilight-chart .twi-night { fill: #223349; }
.einsatz-twilight-chart .twi-dawn { fill: #6f97c4; }
.einsatz-twilight-chart .twi-day { fill: #ffd07a; }
.einsatz-twilight-chart .twi-frame { fill: none; stroke: var(--line); stroke-width: 0.8; }
.einsatz-twilight-chart .twi-edge { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.8; }
.einsatz-twilight-chart .twi-tick { fill: var(--muted); font-size: 7px; font-variant-numeric: tabular-nums; }
.einsatz-twilight-chart .twi-now line { stroke: var(--text); stroke-width: 1.4; }
.einsatz-twilight-chart .twi-now circle { fill: var(--text); }
.einsatz-twilight-chart .twi-now text { fill: var(--text); font-size: 7.5px; font-weight: 600; }
.einsatz-twilight-chart .twi-legend text { fill: var(--muted); font-size: 7px; }

@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .einsatz-twilight-chart .twi-night,
:root[data-theme="system"] .einsatz-twilight-chart .twi-night { fill: #16202e; }
:root:not([data-theme]) .einsatz-twilight-chart .twi-dawn,
:root[data-theme="system"] .einsatz-twilight-chart .twi-dawn { fill: #4a6d95; }
:root:not([data-theme]) .einsatz-twilight-chart .twi-day,
:root[data-theme="system"] .einsatz-twilight-chart .twi-day { fill: #d9a94a; }
}

/* Derselbe Satz Regeln für den von Hand gewählten Dunkelmodus.
   Änderungen gehören IMMER in beide Fassungen — die eine gilt bei
   „Systemvorgabe", die andere bei ausdrücklicher Wahl. */
:root[data-theme="dunkel"] .einsatz-twilight-chart .twi-night { fill: #16202e; }
:root[data-theme="dunkel"] .einsatz-twilight-chart .twi-dawn { fill: #4a6d95; }
:root[data-theme="dunkel"] .einsatz-twilight-chart .twi-day { fill: #d9a94a; }


.einsatz-atc-acc {
  display: flex;
  align-items: center;
  gap: 10px;
}
.einsatz-atc-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.einsatz-atc-badge {
  flex: 0 0 auto;
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 6px;
}
.einsatz-atc-tel {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.einsatz-atc-ctr { line-height: 1.45; }

/* Ein-Tap-Anruf zur NOTAM-Auskunft (AIS-C). Bewusst als grosse Flaeche und
   nicht als Textlink: im Einsatz wird das mit Handschuh und im Laufen
   getroffen — 56 px hoch, die ganze Zeile ist das Ziel. */
.aisc-call {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}
.aisc-call:active { filter: brightness(0.92); }
.aisc-call__icon { font-size: 1.25rem; flex: 0 0 auto; }
.aisc-call__text { display: flex; flex-direction: column; min-width: 0; }
.aisc-call__text strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.aisc-call__text small { opacity: 0.85; font-size: 0.78rem; }
.aisc-call--small { min-height: 46px; padding: 6px 12px; border-radius: 10px; }
.aisc-call--small .aisc-call__text strong { font-size: 0.95rem; }

.einsatz-atc-notam { display: flex; flex-direction: column; gap: 6px; }
.einsatz-atc-notam small { color: var(--muted); line-height: 1.45; }

/* Im Pruefergebnis haengt der Anruf an der Zeile der temporaeren Sperre. */
.flight-verdict__kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
}
.flight-verdict__kontakt .aisc-call { flex: 1 1 220px; }
.einsatz-atc-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.einsatz-atc-links a { color: var(--blue); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.einsatz-cond-note { color: var(--muted); }


.einsatz-cond-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.einsatz-ort-result { margin-top: 4px; }
.result-card p.coord-line { margin-top: 10px; }
.result-card p.coord-line + p.coord-line { margin-top: 6px; }
.result-card p.coord-line span {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 2px;
}

/* ==========================================================================
   ETB-Schnellzugriff (Floating Action Button)
   ========================================================================== */
/* Der Stack trägt die Positionierung, damit Flugbuch und ETB als Paar unten
   rechts stehen (Flugbuch links davon) und gemeinsam am Rand kleben. */
.fab-stack {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  /* Über den Leaflet-Controls (bis 1000), sonst schiebt sich die
     Karten-Attribution unten rechts über den Button. Unter der
     Vollbild-Karte (1200), damit er dort nicht im Weg ist. */
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 10px;
}

.etb-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  min-height: 56px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 22px rgba(1, 136, 254, 0.4);
}

.etb-fab:active { transform: scale(0.97); }
.etb-fab__icon { font-size: 1.25rem; line-height: 1; }
.etb-fab__label { letter-spacing: 0.02em; }

/* Das Flugbuch ist die zweite Pille: dunkleres Blau, damit im Blindgriff
   unterscheidbar bleibt, welcher Knopf welcher ist. */
.etb-fab--flugbuch {
  background: var(--navy, #16344f);
  box-shadow: 0 8px 22px rgba(22, 52, 79, 0.42);
}

@media (max-width: 959px) {
  .fab-stack { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
}

/* Sehr schmale Geräte: die beiden Pillen nebeneinander würden die halbe
   Bildschirmbreite fressen — dort trägt nur das Flugbuch sein Icon. */
@media (max-width: 400px) {
  .etb-fab--flugbuch .etb-fab__label { display: none; }
  .etb-fab--flugbuch { padding: 14px 16px; }
}

/* ==========================================================================
   Flugbuch
   ========================================================================== */

/* Laufender Flug — der auffälligste Block der Seite, weil „ich habe die
   Landung vergessen" der teuerste Fehler im Flugbuch ist. */
.flug-offen {
  margin: 16px 0;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d6efd 0%, #0188fe 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(1, 136, 254, 0.32);
}

.flug-offen__kopf { display: flex; align-items: center; gap: 14px; }
.flug-offen__kopf strong { display: block; font-size: 1.05rem; }
.flug-offen__puls { font-size: 1.9rem; line-height: 1; }
.flug-offen__seit { font-size: 0.88rem; opacity: 0.92; }
.flug-offen__meta { margin: 10px 0 14px; font-size: 0.9rem; opacity: 0.95; }

.flug-landen-button,
.flug-start-button {
  width: 100%;
  min-height: 56px;
  font-size: 1.05rem;
}

.flug-offen .flug-landen-button {
  background: #fff;
  color: #0b5ed7;
}

.flug-panel { margin: 16px 0; }

.flug-panel__hinweis {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted, #64748b);
  text-align: center;
}

/* Zeigt im Landen-Dialog, welcher der laufenden Flüge gemeint ist (v194). */
.flug-lande-bezug {
  margin: 0 0 4px;
  font-weight: 600;
}

.flug-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.flug-stat {
  padding: 12px;
  border-radius: 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e3e8ef);
  text-align: center;
}

.flug-stat strong { display: block; font-size: 1.25rem; }
.flug-stat span { font-size: 0.76rem; color: var(--muted, #64748b); }

.flug-entry--offen { border-left: 4px solid var(--blue, #0188fe); }

.flug-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}

.flug-feld { font-size: 0.9rem; }

.flug-feld__label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}

.flug-art {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

.flug-art--einsatz { background: #fee2e2; color: #991b1b; }
.flug-art--uebung { background: #dbeafe; color: #1e40af; }

.flug-besonderheit {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 600;
  font-size: 0.88rem;
}

/* Die Startmaske ist die längste Eingabe der App — auf kleinen Geräten muss
   sie scrollen können, sonst ist der Bestätigen-Knopf nicht erreichbar. */
.flug-dialog {
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
}

.flug-dialog textarea {
  width: 100%;
  font: inherit;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #d5dce6);
  background: var(--input-bg, #fff);
  color: inherit;
}

.flug-chip-row { display: flex; gap: 8px; margin-bottom: 12px; }

/* Ortfeld mit 📍-Knopf. Der Knopf ist quadratisch und so hoch wie das Feld,
   damit er im Handschuh-Griff sicher zu treffen ist. */
.flug-ort-zeile { display: flex; gap: 8px; align-items: stretch; }
.flug-ort-zeile input { flex: 1 1 auto; min-width: 0; }

.flug-ort-gps {
  flex: 0 0 auto;
  width: 52px;
  min-height: 48px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
}

.flug-ort-gps:disabled { opacity: 0.5; }

/* Ausgabe-Block am Seitenende: je Umfang eine Zeile mit Excel und PDF
   nebeneinander, „leeren" deutlich abgesetzt darunter. */
.flug-export {
  margin: 24px 0 8px;
  padding: 18px;
  border-radius: 16px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e3e8ef);
}

.flug-export h3 { margin: 0 0 14px; font-size: 1rem; }

.flug-export__gruppe {
  padding: 12px 0;
  border-top: 1px solid var(--border, #eef2f7);
}

.flug-export__gruppe:first-of-type { border-top: none; padding-top: 0; }

.flug-export__titel {
  display: block;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
}

.flug-export__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.flug-export__knoepfe button { flex: 1 1 140px; min-height: 48px; }

.flug-export__leeren {
  width: 100%;
  margin-top: 16px;
  min-height: 48px;
}
.flug-chip-row .chip-toggle { flex: 1 1 0; }

/* ---------------------------------------------------------------------------
   Fullscreen-PDF-Overlay (jede PDF-Ausgabe) mit Teilen-Menü. In einer als
   Fullscreen installierten PWA hat der PDF-Viewer keine Speichern-Option — das
   Teilen-Menü ist der Weg, das PDF zu sichern/weiterzugeben.
--------------------------------------------------------------------------- */
.pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: #33373d;
}
.pdf-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.pdf-overlay__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-overlay__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pdf-overlay__share,
.pdf-overlay__close {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
}
.pdf-overlay__share {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.pdf-overlay__close {
  background: var(--panel-muted);
  color: var(--text);
}
.pdf-overlay__inhalt {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pdf-overlay__frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #52565c;
}

/* Mehrseitige Vorschau: je Seite ein eigener Rahmen, gescrollt wird die Liste.
   WebKit auf iPadOS lässt in einem PDF-`iframe` nicht scrollen — deshalb zeigt
   jeder Rahmen nur EINE Seite, und das Blättern übernimmt der Container. */
.pdf-overlay__inhalt--seiten {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pdf-overlay__seiten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 12px calc(28px + env(safe-area-inset-bottom, 0px));
}
.pdf-overlay__seite {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 900px;
  /* Grau, nicht weiß (v219): legt der Systemviewer die Seite kleiner in den
     Kasten, als er ist, war der Rest bisher weiß und damit von der Seite nicht
     zu unterscheiden — die Seite wirkte geschrumpft. Auf Grau sieht man, wo
     das Blatt aufhört. */
  background: #d9dde3;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.pdf-overlay__seite-frame,
.pdf-overlay__seite-platz {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Platzhalter, solange die Seite noch nicht geladen ist (Lazy-Loading). */
.pdf-overlay__seite-platz {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eceef1;
  color: #6b7482;
  font-size: 14px;
  font-weight: 600;
}
.pdf-overlay__seite figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(24, 28, 34, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}
body.pdf-overlay-open { overflow: hidden; }

/* Taktische Zeit im ETB (TThhmmMMMJJ) — hhmm hervorgehoben, damit die Uhrzeit
   auf einen Blick lesbar ist. */
.etb-tac { font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.etb-tac--hhmm { font-weight: 800; }

/* Chip-Reihen für vordefinierte Briefing-Auswahlen (STS, Freigabe, Rückfallebene,
   Fluggerät-Mehrfachauswahl) und kleine Hinweise unter Formularfeldern. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .chip-toggle { flex: 0 1 auto; }
.input-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }

/* --- Sofortbedarf-Schritt & Zeitraum-Freitext ---------------------------- */
.sofort-block {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel-muted);
  margin-top: 10px;
}

.sofort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sofort-zahl {
  display: grid;
  gap: 4px;
  min-width: 110px;
  flex: 1 1 110px;
}

.sofort-zahl small {
  font-size: 0.78rem;
  opacity: 0.7;
}

.sofort-zahl select,
.sofort-zahl input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: inherit;
  font: inherit;
}

.zeitraum-freitext {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.zeitraum-freitext small {
  font-size: 0.78rem;
  opacity: 0.7;
}

.zeitraum-freitext input {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-muted);
  color: inherit;
  font: inherit;
}

/* Zahlenfelder im Sofortbedarf brauchen keine volle Zeilenbreite */
.sofort-zahl {
  max-width: 160px;
  flex: 0 1 auto;
}

/* --- Bildanlage: Eingabemaske (Drag & Drop + vorbelegte Felder) --- */
.bildanlage-overlay {
  --surface: #ffffff;
  --text-muted: #64748b;
  position: fixed;
  inset: 0;
  /* Über dem Update-Banner (9999), aber unter der PDF-Anzeige (10000) — sonst
     verdeckt der Banner die Aktionsleiste des Dialogs. */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 14, 22, 0.72);
  backdrop-filter: blur(4px);
}

.bildanlage-sheet {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface, #fff);
  color: var(--text, #16202c);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.bildanlage-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #16344f;
  color: #fff;
}

.bildanlage-sheet__title { font-weight: 600; font-size: 15px; }

.bildanlage-sheet__close {
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.bildanlage-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bildanlage-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 16px;
  text-align: center;
  border: 2px dashed var(--border, #c3cedb);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.bildanlage-drop:focus-visible,
.bildanlage-drop.is-over {
  outline: none;
  border-color: #2f6db3;
  background: rgba(47, 109, 179, 0.08);
}

.bildanlage-drop span { font-size: 13px; color: var(--text-muted, #64748b); }

.bildanlage-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }

.bildanlage-thumb {
  position: relative;
  margin: 0;
  width: 148px;
  border: 1px solid var(--border, #c3cedb);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-muted, #f2f5f9);
}

.bildanlage-thumb img { display: block; width: 100%; height: 96px; object-fit: cover; }

.bildanlage-thumb figcaption {
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.bildanlage-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  background: rgba(12, 20, 32, 0.72);
  color: #fff;
}

.bildanlage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bildanlage-field { display: flex; flex-direction: column; gap: 5px; }
.bildanlage-field--wide { grid-column: 1 / -1; }

.bildanlage-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.bildanlage-field em {
  font-style: normal;
  font-weight: 500;
  color: #2f6db3;
}

.bildanlage-field input,
.bildanlage-field select {
  padding: 10px 12px;
  border: 1px solid var(--border, #c3cedb);
  border-radius: 10px;
  font-size: 15px;
  background: var(--surface, #fff);
  color: inherit;
}

.bildanlage-field input:focus,
.bildanlage-field select:focus { outline: none; border-color: #2f6db3; }

/* QR-Scanner: Vollbild-Kamera. Liegt ueber der Bildanlage-Maske, deshalb ein
   hoeherer z-index als deren Overlay. */
.qr-scan-overlay {
  position: fixed;
  inset: 0;
  /* Ueber der Bildanlage-Maske (9999) und der PDF-Anzeige (10000) — der
     Scanner wird AUS der Maske heraus geoeffnet und liegt sonst dahinter. */
  z-index: 10001;
  background: rgba(8, 12, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.qr-scan-sheet {
  width: min(560px, 100%);
  background: #0f1722;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qr-scan-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #16344f;
  color: #fff;
}
.qr-scan-sheet__title { font-weight: 600; font-size: 15px; }
.qr-scan-sheet__build { margin-left: auto; margin-right: 10px; font-size: 11px; opacity: 0.65; }
.qr-scan-sheet__close {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}

.qr-scan-stage { position: relative; background: #000; flex: 1 1 auto; min-height: 0; }
.qr-scan-video { display: block; width: 100%; max-height: 62vh; object-fit: cover; }

/* Zielrahmen: zeigt, wohin der Code gehalten werden muss. */
.qr-scan-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(58%, 260px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

/* Liegt IM Videobereich statt darunter: bei hochaufloesenden Kamerabildern
   waechst das Video und schob die Zeile sonst aus dem sichtbaren Bereich. */
.qr-scan-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 14px 12px;
  color: #f1f5f9;
  font-size: 13px;
  text-align: center;
  background: linear-gradient(to top, rgba(8, 12, 18, 0.94), rgba(8, 12, 18, 0.55));
  /* Ein gescannter Rohwert kann lang sein und muss vollstaendig lesbar bleiben. */
  overflow-wrap: anywhere;
  max-height: 40%;
  overflow-y: auto;
}

/* Ausweg-Knopf unter dem Sucher (v287). Bewusst UNTER dem Videobild und nicht
   darin: er soll erst auffallen, wenn der Sucher nicht weiterkommt. */
.qr-scan-foto {
  display: block;
  padding: 10px 14px 12px;
  background: #16344f;
  color: #f1f5f9;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.qr-scan-foto span { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .qr-scan-overlay { padding: 0; }
  .qr-scan-sheet { width: 100%; height: 100%; border-radius: 0; }
  .qr-scan-video { max-height: none; flex: 1 1 auto; }
}

/* Koordinatenfelder: Eingabe + Scan-Knopf in einer Zeile, darunter die
   Umrechnung in UTM-REF und WGS-84 zur Kontrolle. */
.bildanlage-koord { gap: 6px; }
.bildanlage-koord__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bildanlage-koord__row { display: flex; gap: 8px; align-items: stretch; }
.bildanlage-koord__row input { flex: 1 1 auto; min-width: 0; }

.bildanlage-koord__out {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #64748b);
  min-height: 15px;
}
.bildanlage-koord__out.is-error { color: #dc2626; }

/* Personalauswahl im Flugbuch als Knopfreihe statt Dropdown. */
.flug-crew-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
/* Beschriftung und Hinweis teilen sich eine Zeile: in der Startmaske stehen
   fuenf solcher Felder untereinander — je gesparte Zeile ist weniger Scrollen
   mit dem Handschuh am Einsatzort. */
.flug-crew-field__kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.flug-crew-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}
.flug-crew-field__hint { font-size: 12px; color: var(--text-muted, #94a3b8); }
.flug-crew-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Besatzungstabelle (v195): Zeilen = Personen, Spalten = Funktionen. Ersetzt
   vier untereinanderstehende Knopfreihen — die Doppelbelegung einer Person
   sieht man jetzt an der Zeile, nicht erst im Kopf. */
.flug-crew-tabelle { margin: 4px 0 14px; }
.crew-tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.crew-tabelle th,
.crew-tabelle td { padding: 0; }
.crew-tabelle thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: 6px;
  width: 46px;
  white-space: nowrap;
}
.crew-tabelle thead th.crew-tabelle__ecke { width: auto; text-align: left; }
.crew-pflicht { color: var(--red); margin-left: 1px; }
.crew-tabelle tbody tr + tr th,
.crew-tabelle tbody tr + tr td { border-top: 1px solid var(--line); }
.crew-name {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 8px 4px 2px !important;
  line-height: 1.25;
}
.crew-name__text { display: block; }
.crew-name__sperre {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crew-tabelle tbody tr.is-gebunden .crew-name__text { color: var(--muted); }
.crew-zelle-td { text-align: center; }
.crew-zelle {
  width: 34px;
  height: 34px;
  margin: 3px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-muted);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.crew-zelle:active { transform: scale(0.94); }
.crew-zelle.is-active {
  background: var(--blue-soft);
  border-color: rgba(1, 136, 254, 0.45);
  color: var(--blue);
}
.crew-zelle:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    var(--line) 4px,
    var(--line) 8px
  );
  color: var(--muted);
}
.crew-tabelle__hinweis {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
/* Handschuh-Groesse geht vor: unter 380px schrumpft der Namensspalte, nicht
   die Trefferflaeche der Zellen. */
@media (max-width: 380px) {
  .crew-tabelle thead th { width: 40px; font-size: 10px; }
  .crew-name { font-size: 12px; }
  .crew-zelle { width: 30px; height: 30px; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Fluggeraetenamen sind lang ("DJI Matrice M300 RTK mit H20T & L1") — anders
   als die Kurznamen der Crew duerfen diese Knoepfe nicht auf gleiche Breite
   gezogen werden, sonst bricht jeder Name mehrzeilig um. */
.flug-drohne-row .chip-toggle { flex: 0 1 auto; text-align: left; }

/* Kurzes Aufleuchten, wenn ein gescannter Wert im Feld landet. */
.bildanlage-koord input.ist-uebernommen {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bildanlage-scan {
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #0f172a;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.bildanlage-scan:hover { background: #e2e8f0; }

.bildanlage-maprow {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.bildanlage-maprow .bildanlage-field { flex: 1 1 auto; min-width: 0; }
.bildanlage-maprow .bildanlage-scan { height: 40px; }

.bildanlage-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #64748b);
}

.bildanlage-sheet__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border, #c3cedb);
}

.bildanlage-status { font-size: 13px; color: var(--text-muted, #64748b); }
.bildanlage-status--error { color: #dc2626; }

.bildanlage-btn {
  border: none;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: #2f6db3;
  color: #fff;
}

.bildanlage-btn:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 560px) {
  .bildanlage-overlay { padding: 0; }
  .bildanlage-sheet { width: 100%; height: 100%; border-radius: 0; }
  .bildanlage-grid { grid-template-columns: minmax(0, 1fr); }
}

/* STS-BOS: bestätigte Auflagen treten optisch zurück, offene bleiben kräftig. */
.sts-auflage {
  align-items: flex-start;
  gap: 0.55rem;
}

/* Oben ausgerichtet: das Kästchen auf die Grundlinie der ersten Zeile heben. */
.sts-auflage input {
  margin-top: 1px;
}
.sts-auflage.is-done span { color: var(--text-muted, #64748b); }

/* ============================================================================
   Karten-HUD (v147) — Bedienelemente liegen IN der Karte statt darüber.
   Vorbild: DEKRA Flight Hub / Google-Maps-Muster. Suche oben links,
   Ebenenschalter oben rechts. Die Karte bekommt dadurch die volle Höhe,
   und der Blick bleibt bei Kartenwechseln an derselben Stelle.

   Zwei Dinge, die hier den Unterschied machen:
   - z-index 900: Leaflet-Controls liegen bei 800, das HUD muss darüber.
   - Unter 820 px rutschen beide Leisten UNTER die Karte (position: static),
     sonst decken sie draußen am Handy die halbe Karte zu. Deshalb muss
     .map-frame eine feste Höhe behalten — die Leisten fließen dann dahinter.
   ============================================================================ */

/* Der Abstand nach oben gehört an die Hülle, nicht an den Kartenrahmen —
   sonst beginnt die Karte 16 px unter der Hülle und das HUD ragt oben heraus. */
.einsatz-map-shell,
.map-shell {
  margin-top: 16px;
  /* Container-Query statt Media-Query: neben der Sidebar ist die Karte viel
     schmaler als das Fenster — die Leisten müssen sich nach der KARTENbreite
     richten, sonst überlappen Suche und Ebenenschalter am Desktop. */
  container-type: inline-size;
  container-name: mapshell;
}

.einsatz-map-shell > .map-frame,
.map-shell > .map-frame,
.einsatz-map-shell > .map-canvas,
.map-shell > .map-canvas {
  margin-top: 0;
}

.map-hud {
  position: absolute;
  /* Über Leaflets Steuer-Ecken (.leaflet-top/.leaflet-bottom liegen auf
     z-index 1000) — sonst schiebt sich die Lizenzzeile vor die Bedienung. */
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-hud--left {
  top: 12px;
  left: 12px;
  width: min(380px, calc(100% - 150px));
  align-items: stretch;
}

.map-hud--right {
  top: 12px;
  right: 12px;
  align-items: flex-end;
}

.map-hud-search {
  display: flex;
  gap: 6px;
}

.map-hud-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  font-size: 16px; /* < 16px lässt iOS beim Fokus zoomen */
  box-shadow: 0 2px 12px rgba(16, 21, 28, 0.18);
}

.map-hud-search input:focus {
  outline: none;
  border-color: var(--blue);
}

.map-hud-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(16, 21, 28, 0.18);
}

.map-hud-btn:active {
  transform: scale(0.96);
}

.map-hud-status {
  align-self: flex-start;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  box-shadow: 0 1px 8px rgba(16, 21, 28, 0.16);
}

.map-hud-status b {
  color: var(--text);
  font-weight: 700;
}

.map-hud-status.is-error {
  color: var(--red);
}

/* v235: Verfolgung läuft — grün, weil es ein gewollter aktiver Zustand ist
   und keine Warnung (die IP-Ortung darüber nutzt `is-error`). */
.map-hud-status.is-tracking {
  border-color: #16a34a;
  color: #15803d;
  background: color-mix(in srgb, #16a34a 12%, var(--panel));
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .map-hud-status.is-tracking,
:root[data-theme="system"] .map-hud-status.is-tracking {
    color: #86efac;
  }
}

/* Derselbe Satz Regeln für den von Hand gewählten Dunkelmodus.
   Änderungen gehören IMMER in beide Fassungen — die eine gilt bei
   „Systemvorgabe", die andere bei ausdrücklicher Wahl. */
:root[data-theme="dunkel"] .map-hud-status.is-tracking {
    color: #86efac;
  }


/* Eine Schalter-Gruppe = eine Entscheidung (Basiskarte / Overlay / Extras). */
.map-pills {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(16, 21, 28, 0.16);
}

.map-pills button {
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.map-pills button:active {
  transform: scale(0.97);
}

.map-pills button.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Ebenen-Panel (v227): jede Karte hat genau eine Stelle, an der Ebenen an- und
   ausgeschaltet werden — ein Blatt IN der Karte, geöffnet über „🗺️ Ebenen".
   Es überdeckt die Karte bewusst nur zum Teil und scrollt in sich selbst,
   damit auch die Infokarte mit ihren vier Gruppen hineinpasst.
   --------------------------------------------------------------------------- */
.map-ebenen {
  position: absolute;
  top: 56px;
  right: 12px;
  z-index: 1100;
  width: min(320px, calc(100% - 24px));
  max-height: calc(100% - 76px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(16, 21, 28, 0.26);
  overflow: hidden;
}

/* Ohne eigene Kopfzeile: der Knopf „Ebenen" trägt den Titel und schließt das
   Panel auch wieder — Überschrift und ✕ wären nur zweimal dasselbe und kosten
   auf dem Telefon eine ganze Zeile Karte. */
.map-ebenen__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  display: grid;
  gap: 12px;
}

.map-ebenen__block h4 {
  margin: 0 0 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 800;
  color: #5a6673;
}

.map-ebenen__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.map-ebenen__chips .chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Die Zonen-Kategorien hängen an der Geo-Zonen-Ebene — eingerückt, damit die
   Zugehörigkeit ohne Überschrift lesbar ist. */
.map-ebenen__unter {
  margin: 8px 0 0 10px;
  padding-left: 10px;
  border-left: 2px solid rgba(22, 33, 43, 0.12);
}

.map-ebenen__unter-titel {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5a6673;
  margin-bottom: 6px;
}

/* Das Panel ist bewusst hell: es liegt auf der Karte, nicht auf der Seite. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .map-ebenen,
:root[data-theme="system"] .map-ebenen {
    background: rgba(18, 27, 38, 0.97);
  }
:root:not([data-theme]) .map-ebenen__block h4,
:root:not([data-theme]) .map-ebenen__unter-titel,
:root[data-theme="system"] .map-ebenen__block h4,
:root[data-theme="system"] .map-ebenen__unter-titel {
    color: var(--muted);
  }
:root:not([data-theme]) .map-ebenen__unter,
:root[data-theme="system"] .map-ebenen__unter {
    border-left-color: rgba(160, 188, 214, 0.2);
  }
}

/* Derselbe Satz Regeln für den von Hand gewählten Dunkelmodus.
   Änderungen gehören IMMER in beide Fassungen — die eine gilt bei
   „Systemvorgabe", die andere bei ausdrücklicher Wahl. */
:root[data-theme="dunkel"] .map-ebenen {
    background: rgba(18, 27, 38, 0.97);
  }
:root[data-theme="dunkel"] .map-ebenen__block h4,
:root[data-theme="dunkel"] .map-ebenen__unter-titel {
    color: var(--muted);
  }
:root[data-theme="dunkel"] .map-ebenen__unter {
    border-left-color: rgba(160, 188, 214, 0.2);
  }


/* Seit v227 steht rechts nur noch „Ebenen" und „Vollbild" — zwei Knöpfe
   passen auf jeder Breite IN die Karte. Die Leiste bricht deshalb nicht mehr
   unter die Karte um; genau dieses Wandern („mal in, mal unter der Karte")
   war der Anlass für das Ebenen-Panel. Die Suche links braucht auf schmalen
   Karten weiterhin die volle Breite. */
@media (max-width: 820px) {
  /* Auf schmalen Karten trägt der Ebenenknopf nur noch sein Symbol — der
     Suche bleibt sonst kein Feld mehr übrig. */
  .map-pills__label {
    display: none;
  }

  .map-hud--left {
    width: calc(100% - 140px);
  }

  .einsatz-map-shell--fullscreen .map-hud--left,
  .map-shell--fullscreen .map-hud--left {
    top: max(12px, env(safe-area-inset-top));
  }
}

@container mapshell (max-width: 760px) {
  .map-pills__label {
    display: none;
  }

  .map-hud--left {
    width: calc(100% - 140px);
  }
}

/* Zusätzliche Vordrucke auf einer Vorlagenseite (Bildanlage). */
.template-download {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.template-download:first-of-type {
  border-top: none;
}

.template-download__label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

/* --- Flugbuch: Reiter, Import-Bericht, Auswertung (v172) ------------------ */

.flug-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 16px;
}

.flug-tabs .chip-toggle {
  flex: 1 1 0;
  min-height: 46px;
  font-size: 0.95rem;
}

.flug-art--ausbildung { background: #dcfce7; color: #166534; }

.flug-export__hinweis {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

.import-bericht {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(1, 136, 254, 0.28);
  background: rgba(1, 136, 254, 0.07);
}

.import-bericht--fehler {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.07);
}

.import-bericht__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.import-bericht__liste {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 0.84rem;
  line-height: 1.5;
}

.import-bericht__liste li + li { margin-top: 5px; }

.import-bericht__probleme {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.import-bericht__probleme ul,
ul.import-bericht__probleme { margin: 6px 0 0; padding-left: 20px; }
.import-bericht__hinweis { font-size: 0.82rem; color: var(--muted, #64748b); }

/* Je Datei eine Zeile — Zusatzangaben darunter, eingerückt und leiser. */
.import-datei__zeile {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--muted, #64748b);
}

.import-datei--fehler { color: #b91c1c; }

/* ---------------------------------------------------------------------------
   Vorschau vor dem Schreiben (v221). Absichtlich anders eingefärbt als der
   Bericht: gelb heißt „steht noch offen", blau heißt „ist passiert".
   ------------------------------------------------------------------------- */
.import-vorschau {
  border-color: rgba(217, 119, 6, 0.38);
  background: rgba(217, 119, 6, 0.08);
}

.import-vorschau__liste {
  margin: 12px 0 4px;
  padding-left: 0;
  list-style: none;
  max-height: 360px;
  overflow-y: auto;
}

.import-vorschau__flug {
  padding: 7px 10px;
  border-radius: 10px;
  border-left: 3px solid rgba(100, 116, 139, 0.45);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.84rem;
  line-height: 1.45;
}

.import-vorschau__flug + .import-vorschau__flug { margin-top: 6px; }

.import-vorschau__flug--neu { border-left-color: #16a34a; }
.import-vorschau__flug--ergaenzt { border-left-color: #0188fe; }
.import-vorschau__flug--unveraendert,
.import-vorschau__flug--dublette { border-left-color: rgba(100, 116, 139, 0.45); opacity: 0.7; }

.import-vorschau__marke {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.import-vorschau__ziel,
.import-vorschau__aenderung {
  display: block;
  margin-top: 2px;
  font-size: 0.79rem;
  color: var(--muted, #64748b);
}

.import-vorschau__ziel em { font-style: normal; opacity: 0.8; }

.import-vorschau__sichern { width: 100%; margin-top: 8px; }

@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .import-vorschau__flug,
:root[data-theme="system"] .import-vorschau__flug { background: rgba(15, 23, 42, 0.45); }
:root:not([data-theme]) .import-vorschau__marke,
:root[data-theme="system"] .import-vorschau__marke { background: rgba(255, 255, 255, 0.12); }
}

/* Derselbe Satz Regeln für den von Hand gewählten Dunkelmodus.
   Änderungen gehören IMMER in beide Fassungen — die eine gilt bei
   „Systemvorgabe", die andere bei ausdrücklicher Wahl. */
:root[data-theme="dunkel"] .import-vorschau__flug { background: rgba(15, 23, 42, 0.45); }
:root[data-theme="dunkel"] .import-vorschau__marke { background: rgba(255, 255, 255, 0.12); }


/* Bei acht Kacheln würde ein starres Dreierraster eine Waise erzeugen. */
.flug-stats--vier {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.auswertung-kennzahlen { margin-bottom: 8px; }

.auswertung-arten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 16px;
  font-size: 0.84rem;
}

.auswertung-art { display: inline-flex; align-items: center; gap: 6px; }
.auswertung-art .flug-art { margin-left: 0; }

/* Die Art-Kacheln stehen im selben Raster wie die Kennzahlen darüber. */
.flug-stat .flug-art { margin-left: 0; margin-right: 4px; }

.auswertung-filter h3,
.auswertung-pivot h3 { margin: 0 0 12px; font-size: 1rem; }

.auswertung-zeitraum { margin-bottom: 12px; }

.auswertung-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
  margin-bottom: 12px;
}

.auswertung-felder .input-field { margin: 0; }

.auswertung-schalter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.86rem;
}

/* Ankreuzkästchen in Flex-Zeilen dürfen nicht mitschrumpfen. */
.auswertung-schalter input { flex: 0 0 auto; width: 20px; height: 20px; }

.auswertung-hinweis {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted, #64748b);
}

.auswertung-tabelle { min-width: 560px; }
.auswertung-tabelle td { white-space: nowrap; }
.auswertung-zeile--unter th { font-weight: 500; opacity: 0.85; }
.auswertung-zeile--unter td { opacity: 0.85; }

.auswertung-tabelle tfoot th,
.auswertung-tabelle tfoot td {
  font-weight: 700;
  background: rgba(1, 136, 254, 0.2);
}

.auswertung-export { margin-top: 14px; }

.auswertung-gruppen {
  margin-top: 16px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.auswertung-gruppen summary { cursor: pointer; font-weight: 600; }
.auswertung-gruppen ul { margin: 8px 0; padding-left: 20px; }

/* Bearbeitungsmaske eines Flugs (v177) */
.flug-entry-aktionen { display: inline-flex; gap: 2px; }

.flug-dialog--edit { max-width: 640px; }

.flug-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 14px;
}

.flug-edit-grid .input-field { margin: 0; }

.flug-edit-hinweis {
  margin: 8px 0 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

/* Namen brauchen mehr Platz als Zeiten — sonst steht „Arne Hildebr…“ im Feld. */
.flug-edit-grid--namen { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Fallstrick Grid: `input[type=date]` und `[type=time]` haben eine intrinsische
   Mindestbreite und schrumpfen NICHT auf ihre Rasterspalte — ohne `min-width: 0`
   am Rasterelement laufen sie über die Nachbarspalte. Gilt für jedes Raster mit
   Datums- oder Zeitfeldern. */
.flug-edit-grid > .input-field,
.auswertung-felder > .input-field {
  min-width: 0;
}

.flug-edit-grid input,
.flug-edit-grid select,
.auswertung-felder input,
.auswertung-felder select {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.flug-edit-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Doppelte Klasse, damit diese Regel nach der schmaleren Grundbreite oben
   greift — Namen brauchen mehr Platz als Zeiten. */
.flug-edit-grid.flug-edit-grid--namen {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* --- ETB: Zeitfeld, Bemerkungen, Anlagen-Vorschlag (v190) ---------------- */

.etb-zeit-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 12px;
}

.etb-zeit-feld { flex: 0 0 auto; min-width: 0; margin: 0; }
.etb-zeit-feld input { min-width: 0; }

.etb-zeit-status { flex: 1 1 180px; padding-bottom: 12px; }

.etb-zeit-hinweis {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted, #64748b);
}

.etb-bemerkung-feld { margin-top: 14px; }

.etb-anlage-vorschlag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: -4px;
}

.etb-anlage-vorschlag span {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted, #64748b);
}

.etb-bausteine {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.etb-bausteine__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

/* Die Stichworte einer Phase hängen sichtbar an ihr — dieselbe Einrückung
   wie bei den Auftrags-Bausteinen im Briefing. */
.etb-bausteine__liste {
  padding-left: 8px;
  border-left: 2px solid var(--line);
}

/* Lage und Auftrag kommen aus dem Briefing, nicht aus dem Baustein-Katalog —
   das darf man den Chips ansehen. */
.chip-toggle--quelle {
  border-style: dashed;
}

.etb-art-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.etb-art-toggle {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

.etb-erstellen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 4px;
}

.etb-erstellen__button { flex: 0 0 auto; }
.etb-erstellen .etb-zeit-hinweis { flex: 1 1 200px; }

.etb-entry-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.etb-entry-bemerkung {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--muted, #64748b);
}

.confirm-typed { margin: 4px 0 14px; text-align: left; }
.confirm-typed input { text-align: center; letter-spacing: 1px; }

/* --- Grafische Auswertung (v190) ---------------------------------------- */

.auswertung-diagramme { margin: 4px 0 18px; }

.auswertung-diagramm-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.auswertung-diagramm-kopf h4 { margin: 0; font-size: 0.95rem; }
.auswertung-metrik { margin: 0; flex: 0 1 auto; }

.diagramm-block { margin-bottom: 18px; }

.diagramm-block h5 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted, #64748b);
}

.balken-liste { display: grid; gap: 6px; }

.balken-zeile {
  display: grid;
  grid-template-columns: minmax(90px, 30%) 1fr minmax(64px, auto);
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}

.balken-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balken-spur {
  display: block;
  height: 16px;
  border-radius: 8px;
  background: rgba(1, 136, 254, 0.12);
  overflow: hidden;
}

.balken-fuell {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: var(--blue, #0188fe);
}

.balken-wert { text-align: right; font-variant-numeric: tabular-nums; }

/* Verlauf: eine Säule je Monat, Lücken bleiben sichtbar leer. */
.verlauf-diagramm {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border, #e3e8ef);
  overflow-x: auto;
}

.verlauf-saeule {
  flex: 1 1 6px;
  min-width: 6px;
  height: 100%;
  /* Platz für die Jahreszahl INNERHALB der Säule: der Container scrollt
     waagerecht und würde ein außen liegendes Label abschneiden. */
  padding-bottom: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  position: relative;
}

.verlauf-balken {
  display: block;
  border-radius: 3px 3px 0 0;
  background: var(--blue, #0188fe);
  min-height: 0;
}

.verlauf-monat {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  color: var(--muted, #64748b);
}

.verlauf-diagramm + .auswertung-hinweis { margin-top: 8px; }

/* Leeren-Knopf an Datums-/Uhrzeitfeldern (syncZeitfelder in main.js).
   Auf iPadOS ist ein gesetztes date-/time-Feld ueber die Bordmittel nicht mehr
   zu leeren — der Knopf ist dort der einzige Weg zurueck auf „leer“. */
.zeitfeld {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.zeitfeld input[type="date"],
.zeitfeld input[type="time"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* flex: 0 0 auto — sonst schrumpft der Knopf je nach Feldbreite (Fallstrick
   wie bei den ETB-Ankreuzkaestchen). 44 px, damit er mit Handschuh trifft. */
.zeitfeld__leeren {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--line, #d9dce3);
  border-radius: 12px;
  background: var(--panel-muted, #f2f4f8);
  color: var(--text-secondary, #5b6f84);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.zeitfeld__leeren:active {
  background: var(--line, #d9dce3);
}

.zeitfeld__leeren[hidden] {
  display: none;
}

/* ===========================================================================
   Einsatz abschließen (v204)
   Teilt sich die Schrittkarten (.einsatz-step) mit dem Vorbereitungs-Workflow;
   hier stehen nur die Bausteine, die es dort nicht gibt.
   ========================================================================= */

.abschluss-banner {
  margin-bottom: 12px;
}

.abschluss-fortschritt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.abschluss-fortschritt__bar {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  overflow: hidden;
}

.abschluss-fortschritt__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--green);
  transition: width 0.25s ease;
}

.abschluss-fortschritt__zahl {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Offene Flüge: eine Zeile je Flug mit direktem Landen-Knopf — der Weg ins
   Flugbuch und zurück wäre im Einsatz ein Umweg zu viel. */
.abschluss-offene {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.abschluss-offen-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  background: var(--red-soft);
}

.abschluss-offen-zeile span { font-size: 0.88rem; }

/* Zeile „etwas ist im ETB vermerkt / noch nicht" — links der Zustand, rechts
   die eine Handlung. */
.abschluss-etb-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.abschluss-etb-zeile > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  flex: 1 1 200px;
}

.abschluss-etb-zeile small { color: var(--muted); font-size: 0.78rem; }

.abschluss-haken {
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green);
}

/* Abmeldungen */
.abschluss-abmeldung {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-muted);
}

.abschluss-abmeldung.is-done {
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: var(--green-soft);
}

.abschluss-abmeldung.is-warn {
  border-color: color-mix(in srgb, var(--orange) 50%, transparent);
  background: var(--orange-soft);
}

.abschluss-hinweis {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.abschluss-optional {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Dokumentenliste: Zustand · Bezeichnung · eine Handlung */
.abschluss-dok-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 14px;
}

.abschluss-dok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
}

.abschluss-dok.is-done {
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: var(--green-soft);
}

.abschluss-dok__status {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
}

.abschluss-dok.is-done .abschluss-dok__status { color: var(--green); }

.abschluss-dok__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.abschluss-dok__copy strong { font-size: 0.9rem; }
.abschluss-dok__copy small { font-size: 0.76rem; color: var(--muted); }

.ghost-button--small {
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   Gefährdungsbeurteilung Einsatzstelle (v205, #gfb)

   Draußen-Regeln: die Stufenknöpfe sind das einzige, was im Regelfall getippt
   wird — sie tragen deshalb die volle 44-px-Fingerhöhe und stehen in einer
   eigenen Zeile unter dem Merkmal, sobald der Platz eng wird. Die Farbe sitzt
   am Zeilenrand (linker Balken), nicht als Flächenfüllung: ein Bildschirm voll
   Rot ist im Einsatz unlesbar.
   --------------------------------------------------------------------------- */
.gfb-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px 16px;
  margin: 14px 0;
}

.gfb-block__kopf,
.gfb-liste__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.gfb-block__kopf small,
.gfb-liste__kopf small {
  color: var(--muted);
  font-size: 0.82rem;
}

.gfb-kennwerte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.gfb-kennwerte span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.gfb-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
}

.gfb-zeile {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
}

.gfb-zeile--gering { border-left-color: var(--green); }
.gfb-zeile--mittel { border-left-color: var(--orange); }
.gfb-zeile--hoch { border-left-color: var(--red); }

.gfb-zeile__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  flex-wrap: wrap;
}

.gfb-zeile__titel {
  flex: 1 1 190px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  background: none;
  padding: 4px 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.gfb-zeile__titel strong { font-size: 0.95rem; }

.gfb-zeile__titel small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.gfb-hand {
  color: var(--blue);
  font-size: 0.8rem;
}

.gfb-stufen {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.gfb-stufe {
  min-width: 52px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-muted);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.gfb-stufe.is-active { color: #fff; border-color: transparent; }
.gfb-stufe--gering.is-active { background: var(--green); }
.gfb-stufe--mittel.is-active { background: var(--orange); }
.gfb-stufe--hoch.is-active { background: var(--red); }
.gfb-stufe:not([class*="--"]).is-active {
  background: var(--panel-strong, var(--panel));
  color: var(--text);
  border-color: var(--line);
}

.gfb-zeile__body {
  padding: 0 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: 10px;
}

.gfb-zeile__body .chip-toggle--small {
  text-align: left;
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}

.gfb-zeile__body textarea {
  min-height: 54px;
  resize: vertical;
}

/* Auf schmalen Geräten rutschen die Stufenknöpfe unter das Merkmal und teilen
   sich die volle Breite — mit Handschuhen ist ein 52-px-Knopf am Rand nicht
   mehr sicher zu treffen. */
@media (max-width: 560px) {
  .gfb-stufen { flex: 1 1 100%; }
  .gfb-stufe { flex: 1 1 0; min-width: 0; }
}

/* Zusammenfassung der Maßnahme in der zugeklappten Zeile — höchstens zwei
   Zeilen, sonst ist die kompakte Liste wieder so lang wie die aufgeklappte. */
.gfb-zeile__mass {
  color: var(--text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gfb-zeile__chev {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8rem;
}

/* Lesbarkeit der aktiven Stufenknöpfe: Weiß auf Orange trägt nicht (rund 2:1).
   Die Farbtöne sind im dunklen Schema durchweg heller, dort steht dunkler Text
   auf allen drei Stufen — im hellen nur auf dem gelben. Draußen bei Sonne ist
   das der Unterschied zwischen lesbar und geraten. */
.gfb-stufe--mittel.is-active { color: #1b1200; }

@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .gfb-stufe--gering.is-active,
:root:not([data-theme]) .gfb-stufe--mittel.is-active,
:root:not([data-theme]) .gfb-stufe--hoch.is-active,
:root[data-theme="system"] .gfb-stufe--gering.is-active,
:root[data-theme="system"] .gfb-stufe--mittel.is-active,
:root[data-theme="system"] .gfb-stufe--hoch.is-active { color: #0f1722; }
}

/* Derselbe Satz Regeln für den von Hand gewählten Dunkelmodus.
   Änderungen gehören IMMER in beide Fassungen — die eine gilt bei
   „Systemvorgabe", die andere bei ausdrücklicher Wahl. */
:root[data-theme="dunkel"] .gfb-stufe--gering.is-active,
:root[data-theme="dunkel"] .gfb-stufe--mittel.is-active,
:root[data-theme="dunkel"] .gfb-stufe--hoch.is-active { color: #0f1722; }


/* ===========================================================================
   Flugplätze (AIP) auf der Informationskarte und im Einsatz-Workflow.
   Die Rollen-Chips sind bewusst unterscheidbar: TWR ist die einzige Nummer,
   die das AIP wirklich als Flugverkehrskontrolle führt — sie darf sich optisch
   nicht mit einer OPS- oder Zentralnummer verwechseln lassen.
   =========================================================================== */
.ad-marker {
  background: none;
  border: 0;
}
.ad-marker .ad-sign {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  /* Ueber der Trefferflaeche (siehe oben). */
  position: relative;
}
.ad-sign {
  vertical-align: middle;
  flex: 0 0 auto;
}

.ad-tel-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 3px 0;
}
.ad-tel-rolle {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 5px;
  color: #fff;
  background: #64748b;
}
.ad-tel-rolle--twr { background: #b91c1c; }
.ad-tel-rolle--ops { background: #0f6fc4; }
.ad-tel-rolle--auf { background: #6d28d9; }
.ad-tel-rolle--zent,
.ad-tel-rolle--gat,
.ad-tel-rolle--none { background: #64748b; }

.ad-tel-nr {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ad-tel-label {
  opacity: 0.7;
  font-size: 0.76rem;
}
.ad-kein-tel {
  display: block;
  opacity: 0.7;
}
.ad-tel-liste {
  display: grid;
  gap: 1px;
}

/* Der Herkunftshinweis läuft überall mit, wo Nummern stehen. */
.ad-hinweis {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.45;
  opacity: 0.85;
}
.ad-hinweis--twr {
  opacity: 1;
  font-weight: 600;
}
.ad-freitext {
  display: block;
  line-height: 1.45;
  opacity: 0.8;
}

/* Flugplatzkontakte im Block „Zuständige Flugsicherung" (Schritt Einsatz) */
.einsatz-atc-ad {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.09);
}
.einsatz-atc-ad-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.einsatz-atc-ad-head strong {
  display: block;
  line-height: 1.2;
}
.einsatz-atc-ad-head small {
  display: block;
  opacity: 0.7;
  font-size: 0.76rem;
}


/* ===========================================================================
   Bevölkerungsdichte (v218) — Messpanel in Schritt 8 und Kartenlegende.
   =========================================================================== */

.input-hint--warn {
  color: #b3261e;
  font-weight: 600;
}

.dichte-messung {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-muted);
}

.dichte-messung--hoch {
  border-color: rgba(211, 47, 47, 0.4);
  background: rgba(211, 47, 47, 0.07);
}

.dichte-messung--niedrig {
  border-color: rgba(46, 125, 50, 0.4);
  background: rgba(46, 125, 50, 0.07);
}

.dichte-messung__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.dichte-messung__zahlen span {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
}

.dichte-messung__zahlen b {
  font-size: 1.5rem;
  line-height: 1.15;
}

.dichte-messung__zahlen small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  max-width: 32ch;
}

.dichte-messung__urteil {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 600;
}

.dichte-legende {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-muted);
}

.dichte-legende__titel {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dichte-legende__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
}

.dichte-legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.dichte-legende__eintrag i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.dichte-legende__fuss {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.dichte-legende__fehler {
  color: #b3261e;
  font-weight: 600;
}


/* ===========================================================================
   Überzogene Flugdauer (v220) — roter Glühsaum um die ganze App.

   Vier Farbverläufe, je einer pro Kante: außen deckend, nach innen auf null.
   15 mm sind hier bewusst als `mm` gesetzt und nicht in px — die Breite soll
   auf dem iPad im Cockpit dieselbe sein wie auf dem Rechner.

   Eigenes Element statt eines Rahmens an `body`: ein Rahmen würde das Layout
   verschieben, und in der als Vollbild installierten PWA säße er hinter der
   Statusleiste. `pointer-events: none`, damit darunter alles bedienbar bleibt.
   =========================================================================== */

#flug-glow {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  background:
    linear-gradient(to right, rgba(211, 28, 28, 0.92), rgba(211, 28, 28, 0)) left top / 15mm 100% no-repeat,
    linear-gradient(to left, rgba(211, 28, 28, 0.92), rgba(211, 28, 28, 0)) right top / 15mm 100% no-repeat,
    linear-gradient(to bottom, rgba(211, 28, 28, 0.92), rgba(211, 28, 28, 0)) left top / 100% 15mm no-repeat,
    linear-gradient(to top, rgba(211, 28, 28, 0.92), rgba(211, 28, 28, 0)) left bottom / 100% 15mm no-repeat;
}

body.flug-ueberzogen #flug-glow {
  opacity: 1;
  animation: flug-glow-puls 2.4s ease-in-out infinite;
}

/* Langsames Atmen statt Blinken: auffällig genug, um am Rand des Blickfelds
   bemerkt zu werden, ohne das Ablesen der Karte darunter zu stören. */
@keyframes flug-glow-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  body.flug-ueberzogen #flug-glow { animation: none; }
}

/* --- Flugbuch-Blase unten -------------------------------------------------- */
.etb-fab--alarm {
  background: #d31c1c;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(211, 28, 28, 0.25), 0 0 26px 6px rgba(211, 28, 28, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.3);
  animation: flug-fab-puls 2.4s ease-in-out infinite;
}

.etb-fab--alarm .etb-fab__label,
.etb-fab--alarm .etb-fab__icon {
  color: #fff;
}

@keyframes flug-fab-puls {
  0%, 100% { box-shadow: 0 0 0 4px rgba(211, 28, 28, 0.25), 0 0 26px 6px rgba(211, 28, 28, 0.55), 0 6px 18px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(211, 28, 28, 0.12), 0 0 34px 10px rgba(211, 28, 28, 0.32), 0 6px 18px rgba(0, 0, 0, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .etb-fab--alarm { animation: none; }
}

/* --- Der betroffene Flug --------------------------------------------------- */
/* Die Karte des laufenden Flugs ist blau mit weißer Schrift. Ein bloßer roter
   Tönungsschleier darüber machte die weiße Schrift unlesbar — deshalb wird die
   Karte im Alarmfall ganz rot und behält ihre weiße Schrift. */
.flug-offen--ueberzogen {
  background: linear-gradient(135deg, #a3140f 0%, #d31c1c 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(211, 28, 28, 0.45), 0 0 26px 4px rgba(211, 28, 28, 0.35);
}

.flug-offen--ueberzogen .flug-landen-button {
  background: #fff;
  color: #a3140f;
}

.flug-offen__alarm {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* In der Flugliste bleibt die Zeile hell — dort steht dunkle Schrift. */
.flug-entry--ueberzogen {
  border-color: rgba(211, 28, 28, 0.75);
  background: rgba(211, 28, 28, 0.1);
  box-shadow: 0 0 22px 2px rgba(211, 28, 28, 0.35);
}

.flug-art--ueberzogen {
  background: #d31c1c;
  color: #fff;
}


/* ===========================================================================
   Flugbuch-Filter (v220) — Datumsbereich, Fernpilot, Einsatz.
   Zweck ist der Export: was hier eingegrenzt wird, ist das, was unten
   exportiert wird. Deshalb steht der Filter direkt unter „Start eintragen"
   und nicht bei den Exportknöpfen.
   =========================================================================== */

.flug-filter__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.flug-filter__kopf h3 {
  margin: 0;
  font-size: 1rem;
}

.flug-filter--aktiv {
  border-color: rgba(1, 136, 254, 0.45);
  box-shadow: 0 0 0 2px rgba(1, 136, 254, 0.12);
}

.flug-filter__felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.flug-filter__felder .input-field {
  margin: 0;
}

.flug-filter__stand {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.flug-filter--aktiv .flug-filter__stand {
  color: var(--blue);
  font-weight: 600;
}

.flug-export__gruppe--filter {
  border-left: 3px solid var(--blue);
  padding-left: 12px;
}

/* ============================================================================
   Map-First (v222): eingebettete Karten im Einsatz-Workflow, Ampel-Popup am
   Punkt und die Werkzeuge zum Zeichnen des Fluggebiets.
   ============================================================================ */

/* Halbhoch: die Karte soll im Schritt stehen, nicht den Schritt ersetzen.
   Im Vollbild greift .map-shell--fullscreen und überschreibt die Höhe. */
.map-frame--mid {
  height: min(46vh, 420px);
}

/* Zeichenwerkzeuge liegen unten IN der Karte — dort, wo der Blick beim
   Zeichnen ohnehin ist. Mittig, damit sie mit keiner der beiden oberen
   Leisten kollidieren. */
.map-hud--bottom {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

/* v232: Umgekehrt zu vorher. Die Lizenzangabe (OSM/BKG/DIPUL) gehört an den
   unteren Kartenrand — dort steht sie auf jeder Karte, dort wird sie gesucht,
   und sie muss sichtbar bleiben. Bis v231 schob diese Regel sie 56 px nach
   oben, damit die Werkzeugleiste darunter passt; dann lagen die Pills
   „Kreis ziehen / Polygon zeichnen" unter der Lizenzzeile und optisch außerhalb
   der Karte. Jetzt bleibt Leaflets Fußzeile unten und die Werkzeugleiste rückt
   darüber. Gilt nur für die Gebietskarte: nur sie trägt Zeichenwerkzeuge. */
.map-canvas--werkzeuge .map-hud--bottom {
  bottom: 34px;
}

@media (max-width: 820px) {
  /* Anders als die rechte Leiste bleibt diese IN der Karte: sie ist der
     Bedienschritt selbst und wäre unter der Karte nutzlos. */
  .map-hud--bottom {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Auch am Telefon über der Lizenzzeile (v232). */
  .map-canvas--werkzeuge .map-hud--bottom {
    bottom: calc(34px + env(safe-area-inset-bottom));
  }
}

/* Ziehbare Griffe an Kreis und Polygon. Bewusst groß (18 px sichtbar, 30 px
   Trefferfläche): mit Handschuhen ist ein 8-px-Punkt nicht bedienbar. */
/* Entfernung messen (v235, Backlog `C`).
   Die Schilder liegen auf der Karte und müssen auf Luftbild wie auf heller
   Basiskarte lesbar sein — deshalb eigener Grund statt nur Textfarbe, und
   `pointer-events: none`, damit sie den nächsten Messpunkt nicht abfangen. */
.mess-label {
  pointer-events: none;
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #7c3aed;
  background: rgba(255, 255, 255, 0.94);
  color: #5b21b6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  /* Leaflet setzt divIcons über die linke obere Ecke — ohne Versatz klebt das
     Schild auf dem Punkt statt daneben. */
  transform: translate(-50%, -140%);
}

.mess-label--summe {
  border-color: #4c1d95;
  background: #4c1d95;
  color: #ffffff;
}

/* Die laufende Summe in der Werkzeugleiste ist Text, kein Knopf. */
.mess-summe {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.gebiet-griff {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0f766e;
  box-shadow: 0 1px 4px rgba(16, 21, 28, 0.35);
  cursor: grab;
}

.gebiet-griff::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* --- Ampel-Popup am Punkt -------------------------------------------------- */
.map-popup-shell .leaflet-popup-content {
  margin: 10px 12px;
}

.map-popup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.map-popup strong {
  font-size: 0.9rem;
}

.map-popup small {
  color: var(--muted);
}

.map-popup__hero {
  font-weight: 800;
  font-size: 1.02rem;
}

.map-popup--go strong,
.map-popup--go .map-popup__hero { color: #15803d; }
.map-popup--caution strong,
.map-popup--caution .map-popup__hero { color: #b45309; }
.map-popup--nogo strong,
.map-popup--nogo .map-popup__hero { color: #b91c1c; }

.map-popup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.map-popup__chip {
  border: 1px solid var(--line);
  background: var(--panel-muted);
  border-radius: 999px;
  padding: 3px 9px;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.map-popup__chip:active {
  background: var(--blue-soft);
}

/* --- Fluggebiet-Block in Schritt 6 ----------------------------------------- */
.gebiet-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 18px;
  background: var(--panel-muted);
}

.gebiet-block__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.gebiet-block__kopf strong {
  font-size: 1rem;
}

.gebiet-block__kopf span {
  color: var(--muted);
  font-size: 0.84rem;
}

/* Geplante Flugzeit (v235) — teilt sich den Rahmen mit dem Fluggebiet, steht
   aber darüber: die Zeit bestimmt, worauf sich alles Folgende bezieht. */
.flugzeit-block input[type="datetime-local"] {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  /* Auf iOS wächst das Feld sonst über die Zeile hinaus. */
  max-width: 100%;
}

/* Bei geplanter Zeit: für wann gelten die Werte? Steht über den Kacheln, nicht
   in der Quellenzeile darunter — sonst liest man erst die Zahlen und dann,
   dass sie für später gelten. */
.flight-weather__geplant {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}

.flight-weather__geplant b {
  color: var(--text);
}

.gebiet-ergebnis {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left-width: 4px;
  padding: 10px 12px;
  margin-top: 12px;
  background: var(--panel);
}

.gebiet-ergebnis--go { border-left-color: #15803d; }
.gebiet-ergebnis--caution { border-left-color: #b45309; }

.gebiet-treffer {
  list-style: none;
  margin: 8px 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gebiet-treffer li {
  font-size: 0.85rem;
}

.gebiet-treffer small {
  color: var(--muted);
}

/* Tippen bleibt der Hauptweg — das Eingabefeld ist der Rückfall für Adressen
   aus dem Einsatzauftrag und liegt deshalb eingeklappt darunter. */
.ort-eingabe {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.ort-eingabe > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ===========================================================================
   Kartendekor (v221) — Nordpfeil und Maßstabsleiste auf allen Karten.

   Klassische Schachbrettleiste: vier Felder abwechselnd schwarz und weiß.
   Heller Träger, damit sie auch über einem Luftbild lesbar bleibt. Im
   PDF-Export wird dasselbe direkt auf die Leinwand gezeichnet — Leaflet-
   Controls sind DOM und landen nicht im Kartenfoto.
   =========================================================================== */

.map-dekor {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 6px 6px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.map-dekor__nord {
  width: 18px;
  height: 28px;
  flex: none;
}

.map-dekor__balken {
  display: flex;
  height: 8px;
  border: 1px solid #111827;
  box-sizing: content-box;
}

.map-dekor__balken i {
  flex: 1;
  background: #fff;
}

.map-dekor__balken i:nth-child(odd) {
  background: #111827;
}

.map-dekor__marken {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.2;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

.map-dekor__marken span:first-child { margin-left: -2px; }
.map-dekor__marken span:last-child { margin-right: -2px; white-space: nowrap; }

/* --- Fundstelle: Foto (v236) ---------------------------------------------- */

.fund-foto {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #0f172a;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 4px 0 8px;
}

/* Ein <label> mit verstecktem <input type="file"> — sieht aus wie ein Knopf
   und öffnet auf dem Telefon direkt die Kamera. */
.fund-foto-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* --- Fundstellen: Liste weggeparkter Erfassungen (v246) -------------------- */

.fund-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.fund-zeile:hover { border-color: #b91c1c; }
.fund-zeile__symbol { font-size: 18px; }
.fund-zeile__copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fund-zeile__copy strong { font-size: 14px; }
.fund-zeile__copy small { font-size: 12px; opacity: 0.75; }
.fund-zeile__marken { font-variant-numeric: tabular-nums; opacity: 0.6 !important; }
.fund-zeile__pfeil { opacity: 0.4; font-size: 20px; }

/* --- Fundstellen: Fotogalerie (v247) -------------------------------------- */

.fund-foto-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 4px 0 8px;
}

.fund-foto-karte { margin: 0; }
.fund-foto-karte .fund-foto { max-height: 180px; margin: 0 0 4px; }
.fund-foto-karte figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fund-foto-karte figcaption small { opacity: 0.7; }

/* Fotos einer Fundstelle: dieselbe Ablegezone wie beim Stand-Import, aber als
   <label> — damit ein Tap ohne eigenen Handler den Dateidialog öffnet. Die
   Regel `.transfer-drop * { pointer-events: none }` gilt hier ebenso, das
   versteckte <input> stört das nicht. */
.fund-drop { cursor: pointer; padding: 18px 16px; }

/* Rad-Auswahl auf der Funkrufnamen-Karte (v250, Auftrag Manó 09.09.2026).
   Zwei Räder statt Nachschlagen in zwei Tabellen: links die taktische
   Einheit, rechts die Kfz-Art. Die Mitte ist die Auswahl — das Fenster darüber
   markiert sie, ohne die Werte zu verdecken (`pointer-events: none`). */
.funkruf-picker {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid rgba(22, 33, 43, 0.08);
}

.funkruf-picker__kopf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute, #8a94a6);
}

.funkruf-picker__raeder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.funkruf-rad {
  position: relative;
  height: 200px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Oben und unten ausblenden: das Rad soll nicht wie eine Liste enden,
     sondern wie eine Walze weiterlaufen. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%);
}

.funkruf-rad::-webkit-scrollbar {
  display: none;
}

/* Erster und letzter Wert müssen sich ebenfalls in die Mitte schieben lassen. */
.funkruf-rad__spur {
  padding: 80px 0;
  display: grid;
  gap: 0;
}

.funkruf-rad__wert {
  scroll-snap-align: center;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.funkruf-rad__wert.is-active {
  opacity: 1;
  font-weight: 700;
}

.funkruf-rad__kennung {
  min-width: 3.2em;
  font-variant-numeric: tabular-nums;
}

.funkruf-rad__text {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.funkruf-rad-box {
  position: relative;
  min-width: 0;
}

.funkruf-rad__fenster {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 40px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(0, 51, 153, 0.35);
  border-bottom: 1px solid rgba(0, 51, 153, 0.35);
  pointer-events: none;
}

.funkruf-picker__ergebnis {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 51, 153, 0.08);
}

.funkruf-picker__ergebnis small {
  color: var(--text-mute, #8a94a6);
}

/* Bildanlage als Seite statt als Popup (v252).
   Die eingebettete Fassung trägt die Formularbausteine der App (input-field,
   chip-row, primary-button) und damit deren Farbtokens — die Sheet-Optik hatte
   Weiß und Graustufen fest verdrahtet und war im Dunkelmodus unlesbar. Hier
   steht nur noch, was die Seite von einer beliebigen anderen unterscheidet. */
.bildanlage-inline {
  display: block;
}

.bildanlage-seite {
  display: grid;
  gap: 14px;
}

.bildanlage-seite__body {
  display: grid;
  gap: 14px;
}

/* Ablegezone: der Text darin gehört zur Zone, nicht zum Fließtext. */
.bildanlage-seite .transfer-drop span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Selects erben in der App keine eigene Flächenfarbe — ohne diese Zeile
   stünde schwarze Schrift auf schwarzem Grund. */
.bildanlage-seite select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-muted);
  color: var(--text);
  font: inherit;
}

/* Koordinatenzeile: Feld und Scan-Knopf nebeneinander, auf schmalen Geräten
   untereinander — der Knopf soll nicht das Feld auf zwei Zeichen quetschen. */
.bildanlage-seite .bildanlage-koord__label,
.bildanlage-seite .bildanlage-koord__out {
  color: var(--muted);
}

.bildanlage-seite .bildanlage-koord__row .ghost-button {
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-muted);
}

.bildanlage-seite .bildanlage-thumb {
  background: var(--panel);
  border-color: var(--line);
}

.bildanlage-seite .bildanlage-thumb figcaption {
  color: var(--muted);
}

/* Auf dem Telefon steht alles untereinander: zwei Spalten mit 200 px Mindest-
   breite ergäben sonst Felder, in denen keine Koordinate mehr sichtbar ist. */
@media (max-width: 640px) {
  .bildanlage-seite .einsatz-briefing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bildanlage-seite .bildanlage-koord__row {
    flex-wrap: wrap;
  }

  .bildanlage-seite .bildanlage-koord__row .ghost-button {
    width: 100%;
    padding: 12px 14px;
  }
}

/* Verlaufszeile: wie die Fundstellenzeile, zusätzlich mit Vorschaubild und
   den beiden Knöpfen rechts. */
.bildanlage-zeile {
  gap: 12px;
}

.bildanlage-zeile__bild {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.bildanlage-zeile__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

/* ==========================================================================
   Nachtmodus (v254) — Erhalt der Dunkeladaption
   ==========================================================================
   Von Hand geschaltet (`data-nacht` am <html>), nicht an `prefers-color-scheme`
   gekoppelt: Er ist ein Betriebszustand, kein Geschmack.

   Gearbeitet wird mit EINEM Rotton in fünf Helligkeitsstufen. Zwei flache
   Farben (schwarz + rot) würden die ganze Hierarchie auf An/Aus reduzieren —
   Überschrift, Fließtext, Hinweis und Rahmen sähen gleich aus. Im Dunkeln
   trägt Helligkeit die Lesbarkeit, nicht der Farbton.

   Der Fließtext ist ein leicht entsättigtes Rot-Orange statt reinem Rot:
   gesättigtes Rot auf Schwarz flimmert an den Kanten (die Augenlinse fokussiert
   langwelliges Licht anders). Rahmen und Flächen dürfen dafür satter sein.

   Der Grund ist sehr dunkel, aber nicht reines Schwarz — ein Hauch Rot darin
   nimmt den Kanten die Härte, ohne zu leuchten.

   Weil damit die Farbcodierung der App (grün Normalbetrieb, rot Notverfahren,
   gelb Workflow, Ampel) wegfällt, tragen die Sektionsköpfe unten Helligkeit
   und Rahmenstärke als Unterscheidung.
   ========================================================================== */
:root[data-theme="rot"] {
  --bg: #0a0403;
  --panel: #150807;
  --panel-muted: #1c0a08;
  --panel-strong: #210d0a;
  --line: #4d1811;
  --text: #ff7a55;
  --muted: #bf5238;

  /* Akzente sind alle derselbe Ton, unterschieden nur über Helligkeit:
     „gut" heller, „Hinweis" mittel, „Warnung" am hellsten und sattesten. */
  --blue: #ff8a66;
  --blue-soft: #2e0f0a;
  --green: #e0714f;
  --green-soft: #260d09;
  --orange: #d0603c;
  --orange-soft: #2c0f0a;
  --red: #ff5a35;
  --red-soft: #380f09;

  --shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  --page-glow: rgba(255, 90, 53, 0.06);
  --page-top: #080302;
  --page-bottom: #0b0403;
  --sidebar-bg: rgba(10, 4, 3, 0.94);
  --section-bg: rgba(21, 8, 7, 0.9);
  --header-sticky-top: rgba(12, 5, 4, 0.98);
  --header-sticky-bottom: rgba(12, 5, 4, 0.94);
  --active-strip: #ff8a66;
  --item-completed-bg: #1d0a07;
  --item-skipped-bg: #24100a;
  --item-active-bg: #2a0f0b;
  --item-not-required-bg: #180907;
  --modal-panel: #120605;

  color-scheme: dark;
}

/* Rahmen und Flächen, die im Dunkelmodus blaustichig gesetzt sind, tragen im
   Nachtmodus denselben Rotton — sonst leuchtet ein kaltes Blau durch. */
:root[data-theme="rot"] .sidebar,
:root[data-theme="rot"] .sidebar-section,
:root[data-theme="rot"] .sidebar-header,
:root[data-theme="rot"] .detail-header,
:root[data-theme="rot"] .notes-panel,
:root[data-theme="rot"] .gnss-panel,
:root[data-theme="rot"] .result-card,
:root[data-theme="rot"] .landing-panel,
:root[data-theme="rot"] .pilot-image-card,
:root[data-theme="rot"] .log-entry,
:root[data-theme="rot"] .log-group,
:root[data-theme="rot"] .empty-state,
:root[data-theme="rot"] .pilot-card,
:root[data-theme="rot"] .item-card,
:root[data-theme="rot"] .mobile-backline,
:root[data-theme="rot"] .status-menu,
:root[data-theme="rot"] .image-modal {
  border-color: rgba(255, 122, 85, 0.18);
}

:root[data-theme="rot"] .sidebar-row.is-active {
  border-color: rgba(255, 138, 102, 0.4);
}

:root[data-theme="rot"] .pilot-table th,
:root[data-theme="rot"] .pilot-table td,
:root[data-theme="rot"] .pilot-table__header-cell {
  border-color: rgba(255, 122, 85, 0.2);
  background: rgba(45, 15, 10, 0.55);
}

:root[data-theme="rot"] .status-pill--summary,
:root[data-theme="rot"] .status-pill--success,
:root[data-theme="rot"] .status-pill--warning,
:root[data-theme="rot"] .status-pill--active,
:root[data-theme="rot"] .expected-badge {
  background: #2a0f0a;
  color: #ff8a66;
}

/* Der Zustand steht dann in der Helligkeit, nicht in der Farbe. */
:root[data-theme="rot"] .status-pill--warning {
  color: #ff5a35;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 53, 0.5);
}

:root[data-theme="rot"] .status-pill--success {
  color: #c25a3c;
}

:root[data-theme="rot"] .progress-segment {
  background: #3a1109;
}

:root[data-theme="rot"] .item-status-icon,
:root[data-theme="rot"] .row-reset-button,
:root[data-theme="rot"] .segmented-control,
:root[data-theme="rot"] .ghost-button,
:root[data-theme="rot"] .status-menu-button,
:root[data-theme="rot"] .status-menu-toggle {
  background: var(--panel-muted);
  color: var(--text);
}

/* Sektionsköpfe: keine großen leuchtenden Flächen mehr. Alle tragen denselben
   dunklen Grund; unterschieden werden sie über die Helligkeit der Schrift und
   einen Streifen an der Kante — die Reihenfolge entspricht der bisherigen
   Farbcodierung von „wichtigste" bis „Nachschlagematerial". */
:root[data-theme="rot"] .section-toggle {
  background: #1c0806;
  color: #a8482f;
  border-left: 4px solid #6b1f14;
}

:root[data-theme="rot"] .section-toggle[data-section="einsatzworkflow"] {
  color: #ff9470;
  border-left-color: #ff9470;
}

:root[data-theme="rot"] .section-toggle[data-section="emergency"] {
  color: #ff5a35;
  border-left-color: #ff5a35;
  border-left-width: 6px;
}

:root[data-theme="rot"] .section-toggle[data-section="normal"] {
  color: #e0714f;
  border-left-color: #c04b2e;
}

:root[data-theme="rot"] .section-toggle[data-section="tools"],
:root[data-theme="rot"] .section-toggle[data-section="vorlagen"] {
  color: #8f3d27;
  border-left-color: #4d1811;
}

/* Chips und Hauptknöpfe: gefüllt nur dort, wo etwas ausgewählt IST. */
:root[data-theme="rot"] .primary-button,
:root[data-theme="rot"] .chip-toggle.is-active,
:root[data-theme="rot"] .etb-fab {
  background: #3a1109;
  color: #ff9470;
  box-shadow: none;
}

:root[data-theme="rot"] .etb-fab {
  border: 1px solid rgba(255, 148, 112, 0.45);
}

:root[data-theme="rot"] .lage-cta {
  background: var(--panel);
  color: var(--text);
}

/* Die Karte bleibt farbig — die DIPUL-Kategorien sind nur über ihre Farben
   auseinanderzuhalten. Gedimmt wird sie trotzdem: Eine hell leuchtende
   Kartenfläche macht jede Dunkeladaption in Sekunden zunichte. */
:root[data-theme="rot"] .leaflet-tile-pane {
  filter: brightness(0.55) saturate(0.85);
}

:root[data-theme="rot"] img,
:root[data-theme="rot"] .pilot-image-card img {
  filter: brightness(0.8);
}

/* Ausnahmen vom Rot (Auftrag Manó, 09.09.2026): „erledigt" bleibt grün und die
   Ankreuzfelder bleiben blau. Das kostet ein wenig Dunkeladaption — Grün und
   Blau treffen die Stäbchen deutlich stärker als Rot —, ist aber vertretbar,
   weil es kleine Punkte sind und keine Flächen: Man erkennt den Fortschritt
   im Vorbeigehen, ohne zu lesen. Große Flächen bleiben rot. */
:root[data-theme="rot"] {
  --erledigt: #3f9c62;
  --erledigt-soft: #10250f;
}

:root[data-theme="rot"] .einsatz-step__num.is-done {
  background: var(--erledigt-soft);
  color: var(--erledigt);
  border-color: var(--erledigt);
}

:root[data-theme="rot"] .item-card--completed .item-status-icon,
:root[data-theme="rot"] .item-card--completed .item-status-icon-button {
  background: var(--erledigt);
  color: #06120a;
}

/* Ankreuzfelder tragen die Systemfarbe des Browsers — die bleibt blau. */
:root[data-theme="rot"] input[type="checkbox"],
:root[data-theme="rot"] input[type="radio"] {
  filter: none;
}

/* Ampel im Nachtmodus (Auftrag Manó, 09.09.2026): Ein NO-GO zu übersehen wiegt
   schwerer als ein Stück Dunkeladaption. Die Urteilsfarben bleiben deshalb als
   einzige Stellen echte Farben — aber nur dort, wo ein Urteil steht, und mit
   drei zusätzlichen Merkmalen, die ohne Farbe funktionieren:
     · GO steht ruhig da (nur Rahmen und Schrift, keine Fläche),
     · NO-GO trägt eine gefüllte Fläche und den kräftigsten Rahmen,
     · dazwischen liegt Bernstein.
   Wer den Farbton im Dunkeln nicht sicher unterscheidet, sieht immer noch:
   „hier ist etwas gefüllt und dick umrandet" — und das heißt nie „geht klar". */
:root[data-theme="rot"] {
  --ampel-go: #3f9c62;
  --ampel-go-soft: #0d1f13;
  --ampel-halt: #d08a1e;
  --ampel-halt-soft: #241a08;
  --ampel-stop: #ff4a2a;
  --ampel-stop-soft: #47120a;
}

:root[data-theme="rot"] .flight-verdict--go,
:root[data-theme="rot"] .flight-weather--go,
:root[data-theme="rot"] .dichte-messung--niedrig {
  background: var(--ampel-go-soft);
  border-color: var(--ampel-go);
}

:root[data-theme="rot"] .flight-verdict--caution,
:root[data-theme="rot"] .flight-weather--caution {
  background: var(--ampel-halt-soft);
  border-color: var(--ampel-halt);
  border-width: 2px;
}

:root[data-theme="rot"] .flight-verdict--nogo,
:root[data-theme="rot"] .flight-weather--nogo,
:root[data-theme="rot"] .dichte-messung--hoch {
  background: var(--ampel-stop-soft);
  border-color: var(--ampel-stop);
  border-width: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 74, 42, 0.35);
}

:root[data-theme="rot"] .flight-verdict--go .flight-verdict__head strong,
:root[data-theme="rot"] .flight-weather--go .flight-weather__head strong,
:root[data-theme="rot"] .flight-verdict__hero--go {
  color: var(--ampel-go);
}

:root[data-theme="rot"] .flight-verdict--caution .flight-verdict__head strong,
:root[data-theme="rot"] .flight-weather--caution .flight-weather__head strong,
:root[data-theme="rot"] .flight-verdict__hero--caution {
  color: var(--ampel-halt);
}

:root[data-theme="rot"] .flight-verdict--nogo .flight-verdict__head strong,
:root[data-theme="rot"] .flight-weather--nogo .flight-weather__head strong,
:root[data-theme="rot"] .flight-verdict__hero--nogo {
  color: #ffd7cd;
  text-shadow: 0 0 12px rgba(255, 74, 42, 0.5);
}

/* Das Urteil selbst muss lesbar bleiben, nicht nur der Rahmen. */
:root[data-theme="rot"] .dichte-messung--hoch .dichte-messung__urteil,
:root[data-theme="rot"] .flight-verdict--nogo .flight-verdict__hero {
  color: #ffd7cd;
}

/* ---------------------------------------------------------------------------
   Höhenrad im Briefing (v284)
   Dieselbe Walze wie beim Funkrufnamen-Picker, nur kleiner: drei Werte hoch,
   damit das Feld nicht mehr Platz frisst als das Auswahlmenü vorher.
   --------------------------------------------------------------------------- */
.hoehen-rad-box {
  position: relative;
  min-width: 0;
}

.hoehen-rad {
  position: relative;
  height: 114px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-soft, #f7f7fa);
  border: 1px solid var(--line, #d9dce3);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 68%, transparent 100%);
}

.hoehen-rad::-webkit-scrollbar {
  display: none;
}

/* Erster und letzter Wert müssen sich ebenfalls in die Mitte schieben lassen. */
.hoehen-rad__spur {
  padding: 40px 0;
  display: grid;
  gap: 0;
}

.hoehen-rad__wert {
  scroll-snap-align: center;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.hoehen-rad__wert.is-active {
  opacity: 1;
  font-weight: 700;
}

.hoehen-rad__fenster {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 34px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(0, 51, 153, 0.35);
  border-bottom: 1px solid rgba(0, 51, 153, 0.35);
  pointer-events: none;
}

/* Einsatzablage (v291) — der aktive Einsatz und die abgelegten daneben.
   Bewusst eine schlichte Liste und kein Karussell: draußen wird sie selten
   gebraucht, und wenn, dann unter Zeitdruck. */
.einsatz-ablage { margin-bottom: 2rem; }
.einsatz-liste {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.einsatz-liste__eintrag {
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}
.einsatz-liste__eintrag.is-aktiv {
  border-color: rgba(0, 51, 153, 0.45);
  background: rgba(0, 51, 153, 0.05);
}
.einsatz-liste__kopf {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.einsatz-liste__kopf strong { font-size: 0.95rem; }
.einsatz-liste__status {
  margin-left: auto;
  font-size: 0.78rem;
  white-space: nowrap;
  opacity: 0.8;
}
.einsatz-liste__status--abgeschlossen { color: var(--go, #2e7d32); opacity: 1; }
.einsatz-liste__status--leer { opacity: 0.55; }
.einsatz-liste__meta,
.einsatz-liste__offen {
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: 0.25rem;
}
.einsatz-liste__offen--fertig { color: var(--go, #2e7d32); opacity: 1; }
.einsatz-liste__eintrag .einsatz-inline-actions { margin-top: 0.5rem; }