/* Nocturne – Design-System (nur Dark Mode). Tokens aus dem Handoff; die bisherigen
   Variablennamen bleiben als Aliase bestehen, damit vorhandene Komponenten mitlaufen. */
:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  /* Akzent: Koralle (OKLCH-Ton 28°), Stufen auf denselben Helligkeiten wie das Nocturne-Blurple */
  --color-accent: #d47266;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #fff2f0;
  --color-accent-200: #fee0dc;
  --color-accent-300: #fcc5bd;
  --color-accent-400: #f89a8e;
  --color-accent-500: #da786c;
  --color-accent-600: #b95a4f;
  --color-accent-700: #8f443b;
  --color-accent-800: #67302a;
  --color-accent-900: #40221e;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 0 0 1px #3f424d;
  /* Ring der schwebenden Elemente (Bottom-Nav, Menü-Knopf und -Popup) */
  --color-ring: #595d6c;
  --shadow-md: 0 0 0 1px var(--color-ring), 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Aliase auf die bisherigen Namen (Nocturne-Mapping laut Handoff) */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-neutral-500);
  --border: var(--color-divider);
  --brand: var(--color-accent);
  --brand-text: var(--color-accent-100);
  --link: var(--color-accent-300);
  --accent: var(--color-accent);
  --ok: var(--color-accent-300);
  --warn: var(--color-accent-300);
  --error: #ff6b5e;
  --radius: var(--radius-lg);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 500; }

main { width: 100%; max-width: 560px; margin: 0 auto; padding: 32px 20px; flex: 1; }

h1 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -0.02em; }
h2 { margin: 4px 0; font-size: 1.35rem; }
h3 { margin: 28px 0 8px; font-size: 1rem; color: var(--muted); font-weight: 600; }
.lead { margin: 0 0 24px; color: var(--muted); }

button {
  font: inherit;
  cursor: pointer;
}

#locate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #1a1200;
  font-weight: 650;
  font-size: 0.92rem;
}
#locate .loc-ico { font-size: 1.05rem; line-height: 1; }
#locate:hover { filter: brightness(1.05); }
#locate:focus-visible, .link:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.hint, .meta, .note { color: var(--muted); font-size: 0.875rem; }
.hint { margin: 8px 0 0; }

.message {
  margin: 20px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.message[data-kind="error"] { border-color: var(--error); color: var(--error); }

.manual { margin: 20px 0; }
.manual label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }
.manual-row { display: flex; gap: 8px; }
.manual input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  /* mindestens 16px, sonst zoomt iOS Safari beim Antippen hinein */
  font-size: max(1.1rem, 16px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.manual input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--muted); }
.manual input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.manual button {
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: var(--brand-text);
  font-weight: 600;
}

#result { margin-top: 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Kopf 1b: IATA groß links, Name + Caret und Meta rechts daneben; Drei-Punkt-Menü rechts */
.finder-bar { display: flex; align-items: center; gap: 10px; }
.ap-summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
}
.ap-summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.ap-iata {
  flex: none;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.ap-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-neutral-500);
  min-width: 0;
}
.ap-title #ap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-caret { flex: none; font-size: 12px; color: var(--color-neutral-500); transition: transform 0.15s ease; }
.ap-summary[aria-expanded="true"] .ap-caret { transform: rotate(180deg); }
.ap-meta {
  font-size: 11px; color: var(--color-neutral-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.menu-wrap { position: relative; flex: none; display: flex; }
.menu-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  /* Umrandung und Fläche wie die Bottom-Nav */
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: 0 0 0 1px var(--color-ring);
  color: var(--color-neutral-300);
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-open:hover { color: var(--color-text); }
.menu-open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.menu-open[aria-expanded="true"] { color: var(--color-text); }

.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.menu-pop[hidden] { display: none; }
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.menu-item:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.menu-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Fixierter Kopfbereich (Flughafen-Leiste) in Web und App: der Inhalt scrollt darunter durch.
   Im Browser sind die env()-Werte 0, sodass dieselben Regeln dort neutral wirken. */
main {
  padding-top: 0;
  /* unten Platz für die schwebende Bottom-Nav */
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
#intro {
  padding-top: 2px;
}
/* Kein rechteckiger Vollbreite-Hintergrund: nur die Flughafen-Leiste selbst (abgerundete Karte)
   deckt den durchscrollenden Inhalt ab – in der Form des Dropdown-Felds. */
#finder {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 4px 0 10px;
  background: var(--color-bg);
}
/* Auf „Meine Flüge" ersetzt der Seitentitel den Flughafen-Kopf (Menü bleibt) */
body[data-tab="meine"] #ap-toggle { display: none; }
/* „Meine Flüge": etwas mehr Luft nach oben (Titel + erste Karte) */
body[data-tab="meine"] #finder { padding-top: 16px; }
body[data-tab="meine"] #tab-meine { padding-top: 6px; }
.finder-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.finder-title[hidden] { display: none; }
.finder-title-text { font-size: 33px; font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.finder-title-sub { font-size: 11px; color: var(--color-neutral-500); }

/* Abschnittstitel (Anreise, Lounges): Titel links, Zusatz rechts */
.section-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 2px 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
}
.section-title .section-sub { font-size: 11px; font-weight: 400; color: var(--color-neutral-500); }

.empty-note { margin: 24px 2px; color: var(--color-neutral-400); font-size: 13px; }
/* Aufgeklapptes Bedienfeld als abgehobene Karte (Dropdown-Breite, vom Hintergrund abgesetzt) */
#finder-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 8px;
}
#finder-panel .hint { margin-bottom: 0; }

/* Lade-Spinner für die Recherche-Reiter */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid color-mix(in srgb, var(--muted) 40%, transparent);
  border-top-color: var(--link);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* Nativer App-Container: die Statusleiste durch einen festen Streifen abdecken (immer, auch
   beim Scrollen) und den Inhalt darunter beginnen lassen. So braucht die sticky Flughafen-
   Leiste keinen eigenen Safe-Area-Abstand mehr – das vermeidet den zu großen Abstand oben. */
body.native::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--bg);
  z-index: 30;
}
body.native main { padding-top: env(safe-area-inset-top); }
body.native #finder { top: env(safe-area-inset-top); }

/* Reiter / Bottom-Nav – schwebende „Liquid Glass“-Leiste (durchscheinend, mit Blur) */
.tab-title { margin: 6px 0 14px; font-size: 1.3rem; }
.tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 40;
  margin: 0 auto;
  max-width: 440px;
  height: 62px;
  display: grid;
  /* vier Reiter, im Premium-Modus fünf (Assistent) */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 0 7px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
/* Fällt der Blur aus (ältere Browser), die Leiste deckend lassen, damit nichts durchscheint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: var(--color-surface); }
}
.tab-btn {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--color-neutral-400);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease;
}
/* Label einzeilig halten (sonst bricht „Meine Flüge" bei vier Reitern um) */
.tab-btn > span:not(.tab-ico) { white-space: nowrap; }
.tab-btn[hidden] { display: none; }
.tab-ico { font-size: 20px; line-height: 1; }
.tab-btn[aria-current="page"] { color: var(--color-accent); }
.tab-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
.tab-badge {
  position: absolute;
  top: 7px;
  left: calc(50% + 7px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent-800);
  color: var(--color-accent-100);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* Reiter „Anreise": Verkehrsanbindung als Karten (ÖPNV, Bus, Taxi, Limousine) */
.ground-opt {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
}
.ground-opt:last-of-type { border-bottom: 0; }
.ground-opt-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ground-ico { font-size: 22px; line-height: 1; flex: none; color: var(--color-accent); }
.ground-opt-title { margin: 0; font-size: 14px; color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }
/* Dauer/Preis als eigene Zeile unter dem Titel – bricht um statt überzulaufen */
.ground-meta { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.ground-desc { margin: 8px 0 0; color: var(--text); overflow-wrap: anywhere; }
.ground-apps { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.ground-apps a { color: var(--link); }
.ground-links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ground-links a {
  color: var(--link);
  text-decoration: none;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.ground-links a::before { content: "↗"; margin-right: 7px; color: var(--muted); }
.ground-links a:hover { text-decoration: underline; }
/* Aktuelle Verkehrslage: klar abgesetzter, dezent koralle-getönter Block mit internen Trennlinien */
.ground-disruptions {
  margin: 2px 0 20px;
  padding: 6px 14px 10px;
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
  border-radius: var(--radius-md);
}
.ground-disruptions-head {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 2px; font-size: 14px; font-weight: 500; color: var(--color-accent-200);
}
.ground-disruptions-head .ph-warning { color: var(--color-accent); font-size: 18px; }
.disruption-rows .rowx { border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.disruption-rows .rowx:last-child { border-bottom: 0; }
.disruption-rows .rowx-head { padding: 12px 0; }
.disruption-rows .rowx-title { color: var(--color-accent-100); }
.disruption-rows .rowx-detail { background: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.ground-current-asof { margin: 8px 0 0; }
.ground-date { color: var(--color-neutral-500); font-size: 11px; }
.ground-sources { margin: 16px 0 0; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.ground-sources > summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.ground-sources > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.ground-sources-list { margin: 8px 0 0; }
.ground-sources a { color: var(--link); }
.ground-current-asof { margin: 8px 0 0; color: var(--muted); font-size: 0.78rem; }
.ground-current-ok { margin: 10px 0; color: var(--muted); font-size: 0.85rem; }

/* Disclaimer + „Neu generieren" unter den Recherche-Reitern */
.disclaimer { margin: 16px 0 0; color: var(--muted); font-size: 0.78rem; }
.regen-btn {
  display: inline-block;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}
.regen-btn[hidden] { display: none; }
.regen-btn:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* Reiter „Lounges": je Lounge eine Karte mit Ort, Bewertung und Zugangsvoraussetzungen */
.lounge {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
}
.lounge:last-of-type { border-bottom: 0; }
.lounge-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lounge-title { margin: 0; font-size: 14px; color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }
/* Bewertung direkt unter dem Namen, hervorgehoben (kann ein ganzer Satz sein → umbrechen) */
.lounge-rating { margin: 6px 0 0; color: var(--color-accent-300); font-weight: 500; font-size: 13px; overflow-wrap: anywhere; }
/* Fließtext in gleicher Farbe und Größe wie die Zutritt-Aufzählung */
.lounge-loc { margin: 6px 0 0; color: var(--text); font-size: 0.92rem; overflow-wrap: anywhere; }
.lounge-hours { margin: 6px 0 0; color: var(--text); font-size: 0.92rem; overflow-wrap: anywhere; }
.lounge-figure { margin: 10px 0 0; }
.lounge-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}
.lounge-credit { margin: 4px 0 0; color: var(--muted); font-size: 0.72rem; }
.lounge-sec-head { margin: 14px 0 6px; font-size: 0.8rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.lounge-desc { margin: 0 0 6px; color: var(--text); font-size: 0.92rem; overflow-wrap: anywhere; }
.lounge-access { margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.lounge-access-row { display: flex; gap: 10px; align-items: baseline; }
.lounge-access-label { flex: none; width: 64px; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zugangs-Einträge als schlichte Aufzählung (keine Pillen) */
.lounge-chips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lounge-chip { position: relative; padding-left: 14px; color: var(--text); font-size: 0.92rem; overflow-wrap: anywhere; }
.lounge-chip::before { content: "–"; position: absolute; left: 0; color: var(--muted); }
.lounge-amenities { margin: 8px 0 0; color: var(--text); font-size: 0.92rem; overflow-wrap: anywhere; }

/* Vor der Auswahl: Bedienfeld offen. Nach der Auswahl: zugeklappt, bis die Leiste aufgeklappt wird. */
body.has-airport #intro { display: none; }
body.has-airport #finder-panel { display: none; margin-top: 0; }
/* Aufgeklappt: schwebt als Overlay über dem Seiteninhalt (verschiebt ihn nicht) */
body.has-airport #finder:has(#ap-toggle[aria-expanded="true"]) #finder-panel {
  display: block;
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  z-index: 25;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.label { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); }
.iata { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand); }
@media (prefers-color-scheme: dark) { .iata { color: var(--accent); } }
.meta { margin: 0; }

.pass {
  margin-top: 20px;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-text);
  padding: 20px;
  box-shadow: 0 8px 24px rgb(10 29 86 / 0.18);
}
.pass .meta, .pass .note { color: rgb(255 255 255 / 0.75); }
.pass-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.flight-number { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.status {
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
}
.status:empty { display: none; }
.status[data-code="cancelled"], .status[data-code="delayed"], .status[data-code="diverted"] { background: var(--accent); color: #1a1200; }

.route { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 4px; }
.route > div { display: flex; flex-direction: column; }
.route .to { text-align: right; }
.code { font-size: 2.5rem; font-weight: 750; line-height: 1; letter-spacing: 0.02em; }
.time { font-size: 1.1rem; font-variant-numeric: tabular-nums; margin-top: 4px; }
.arrow { font-size: 1.6rem; color: var(--accent); }

.details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgb(255 255 255 / 0.35);
}
.details dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.65); }
.details dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.pass .note { margin: 14px 0 0; }

.alternatives { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.link {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.link:hover { border-color: var(--muted); }
.link .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link .dist { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

#mock { margin-top: 24px; }

footer { text-align: center; padding: 16px; color: var(--muted); font-size: 0.75rem; }
footer a { color: inherit; }

/* Flugkarte: ganze Fläche per Maus anklickbar, zusätzlich ein Button für Touch/iOS */
.pass { cursor: pointer; }
.pass-cta {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.12);
  color: var(--brand-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.pass-cta:hover { background: rgb(255 255 255 / 0.2); }
.pass-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Dialog der Fake-Bordkarte */
.bp-dialog {
  width: min(92vw, 440px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
}
.bp-dialog::backdrop { background: rgb(5 8 15 / 0.65); }
.bp {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.4);
}
.bp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px;
  background: var(--brand);
  color: var(--brand-text);
}
.bp-airline { font-size: 1.4rem; font-weight: 750; letter-spacing: 0.04em; }
.bp-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }

.bp-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  border-bottom: 2px dashed var(--border);
}
.bp-route > div { display: flex; flex-direction: column; min-width: 0; }
.bp-route .bp-dest { text-align: right; }
.bp-code { font-size: 2.2rem; font-weight: 750; line-height: 1; color: var(--brand); }
@media (prefers-color-scheme: dark) { .bp-code { color: var(--accent); } }
.bp-city { margin-top: 4px; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-plane { color: var(--accent); font-size: 1.4rem; flex: none; }

.bp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding: 20px;
}
.bp-grid .bp-wide { grid-column: 1 / -1; }
.bp-grid dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.bp-grid dd { margin: 2px 0 0; font-weight: 650; font-size: 1.05rem; overflow-wrap: anywhere; }

.bp-barcode {
  padding: 0 20px 4px;
  background: #fff;
}
.bp-barcode svg { display: block; width: 100%; height: auto; }
.bp-bcbp {
  margin: 0;
  padding: 8px 20px 16px;
  background: #fff;
  color: #333;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  line-height: 1.4;
  word-break: break-all;
}
.bp-fake {
  margin: 0;
  padding: 12px 20px;
  background: var(--accent);
  color: #1a1200;
  font-size: 0.8rem;
  font-weight: 650;
  text-align: center;
}
.bp-close-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.bp-close-btn:hover { background: var(--bg); }

/* ─ Tags (Nocturne) ─ */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px;
  border: 1px solid transparent; border-radius: 6px;
  font-family: inherit; line-height: 1.3; cursor: pointer; white-space: nowrap;
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
/* Unplausibler Status (ADR-0023): „Am Flughafen prüfen“ */
.tag-warn { border-color: #f8c14a; color: #f8c14a; background: color-mix(in srgb, #f8c14a 12%, transparent); }
.tag:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tag-plus { padding: 3px 9px; font-size: 13px; }

/* ─ Filterzeile 1b: horizontal scrollbar, randlos ─ */
.filter-row {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 20px 8px;
  margin: 0 -20px 4px;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-tags { display: flex; gap: 6px; width: max-content; }
.filter-tags .tag { flex: none; }
/* Rand-Fade signalisiert horizontale Scrollbarkeit und vermeidet den harten Schnitt am Bildschirmrand.
   Die Klassen werden per JS je nach Scrollposition gesetzt (fade-left / fade-right). */
.filter-row { --fade: 28px; }
.filter-row.fade-right:not(.fade-left) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
}
.filter-row.fade-left:not(.fade-right) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade));
  mask-image: linear-gradient(to right, transparent, #000 var(--fade));
}
.filter-row.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
/* Variante „wrap": Tags brechen um statt horizontal zu scrollen; lange Tags werden gekürzt */
.filter-row.wrap {
  overflow-x: visible;
  margin: 0 0 4px;
  padding: 2px 0 4px;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.filter-row.wrap .filter-tags { flex-wrap: wrap; width: auto; row-gap: 6px; }
.filter-row.wrap .tag {
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.5;
}

/* ─ Abflugbrett 1b ─ */
.board { margin-top: 10px; }
.board-meta { display: block; margin: 0 0 6px; font-size: 11px; color: var(--color-neutral-500); }
.board-hint { margin: 14px 0 0; font-size: 11px; color: var(--color-neutral-500); text-align: center; }

.dep-list { list-style: none; margin: 0; padding: 0; }
.dep {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  /* Oben bündig: die rechte Spalte (Status, Boardingzeit, Gate) ist höher als Zeit und Ziel */
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.dep.has-star { grid-template-columns: 62px 1fr auto auto; }
.dep:last-child { border-bottom: 0; }
.dep.is-clickable { cursor: pointer; }
.dep.is-clickable:active { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.dep:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.dep-time { display: flex; flex-direction: column; min-width: 0; }
.dep-sched { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dep-sched.is-changed { font-size: 13px; text-decoration: line-through; color: var(--color-neutral-500); }
.dep-revised { font-size: 22px; font-weight: 400; color: var(--color-accent-300); font-variant-numeric: tabular-nums; line-height: 1.1; }

.dep-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dep-flight { font-size: 14px; }
.dep-ap { font-weight: 500; color: var(--color-accent); margin-right: 6px; font-variant-numeric: tabular-nums; }
.dep-dest { font-size: 11px; color: var(--color-neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dep-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.dep-status:empty { display: none; }
.dep-gate { font-size: 11px; color: var(--color-neutral-400); white-space: nowrap; }
.dep-gate:has(.dep-place) { display: inline-flex; gap: 10px; }
.dep-place { display: inline-flex; align-items: center; gap: 3px; }
.dep-place .ph { font-size: 13px; color: var(--color-neutral-500); }
/* Geschätzte Boardingzeit (ADR-0025): eigene Zeile unter Uhrzeit und Ziel; Status/Gate und Stern reichen über beide Zeilen */
.dep-boarding { grid-column: 1 / 3; grid-row: 2; display: inline-flex; align-items: center; gap: 4px; margin-top: -6px;
  font-size: 12px; color: var(--color-neutral-300); white-space: nowrap; }
.dep-boarding .ph { font-size: 13px; color: var(--color-neutral-500); }
.dep.has-boarding > .dep-meta, .dep.has-boarding > .dep-star { grid-row: 1 / span 2; }

/* Merken-Stern (nur in der Merk-Liste) */
.dep-star {
  border: 0; background: transparent; cursor: pointer;
  padding: 0 2px; font-size: 1.15rem; line-height: 1.2; color: var(--color-neutral-500);
}
.dep-star.is-saved { color: var(--color-accent); }
.dep-star:hover { color: var(--color-text); }
.dep-star:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }

/* Gemerkter Flug ~8 h nach der Landung: ausgegraut (bleibt anklick-/entfernbar) */
.dep.is-past { opacity: 0.45; }
.dep.is-past .dep-star { opacity: 1; }

/* ─ Flugdetails: unter der Flugzeile aufgeklappt (Nocturne-Panel) ─ */
.dep-detail {
  grid-column: 1 / -1;
  margin: 4px 0 2px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.dep-detail section { padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.dep-detail section:first-of-type { padding-top: 0; }
.dep-detail section:last-of-type { border-bottom: 0; }
.dep-detail h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-neutral-500); font-weight: 500; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.detail-grid dt { font-size: 11px; color: var(--color-neutral-500); }
.detail-grid dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.detail-tz { font-size: 11px; color: var(--color-neutral-500); }
.detail-grid .detail-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.detail-empty { margin: 0; font-size: 13px; color: var(--color-neutral-400); }
.detail-locked { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--color-accent); font-size: 14px; }
.detail-locked .ph-lock-simple { font-size: 16px; }
/* Fußzeile: Quelle links, Merken rechts */
.detail-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-divider);
}
.detail-source { font-size: 11px; color: var(--color-neutral-500); }
.detail-save {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--color-accent-300);
}
.detail-save .ph, .detail-save .ph-fill { font-size: 16px; }
.detail-save:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.asof { margin: 14px 0 0; font-size: 11px; color: var(--color-neutral-500); text-align: center; }
/* Warnhinweis bei Widersprüchen zur gemeldeten Abflugzeit */
.dep.has-warning .dep-flight::after { content: " ⚠"; color: var(--color-accent-300); }
.dep-warn {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 4px; padding: 10px 12px;
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.dep-warn-icon { flex: none; color: var(--color-accent-300); font-size: 1.15rem; line-height: 1.25; }
.dep-warn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }

.dep-map { margin: 12px 0 0; }
.dep-map img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-divider); background: var(--color-neutral-900); }
.dep-map figcaption { margin-top: 6px; font-size: 11px; color: var(--color-neutral-500); }


/* Sanftes Aus-/Einfaden der Inhalte an den Rändern: oben Richtung Uhr/Statusleiste, unten Richtung Bottom-Nav */
.edge-fade { position: fixed; left: 0; right: 0; pointer-events: none; }
/* Kein oberer Fade mehr – der feste Kopfbereich deckt oben voll ab. */
.edge-fade-bottom {
  bottom: 0;
  height: calc(env(safe-area-inset-bottom) + 168px);
  background: linear-gradient(
    to top,
    var(--bg) 12%,
    color-mix(in srgb, var(--bg) 60%, transparent) 42%,
    color-mix(in srgb, var(--bg) 24%, transparent) 70%,
    transparent
  );
  z-index: 39;
}

/* Einstellungen-Sheet */
.settings-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; }
.settings-group { margin: 6px 0 2px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-neutral-500); }
.settings-group:first-child { margin-top: 0; }
/* Modus-Auswahl als Box mit zwei Radio-Zeilen */
.seg-box { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.seg-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; }
.seg-row + .seg-row { border-top: 1px solid var(--color-divider); }
.seg-row input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-dot { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--color-neutral-600); }
.seg-row:hover .seg-dot { border-color: var(--color-accent); }
.seg-row input:checked + .seg-dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-surface); }
.seg-row input:focus-visible + .seg-dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seg-name { font-size: 15px; }
.seg-desc { font-size: 12px; color: var(--color-neutral-500); }
.settings-scroll .hint { margin: 4px 0 0; font-size: 11px; color: var(--color-neutral-500); }
.input {
  width: 100%; box-sizing: border-box; min-height: 40px;
  padding: 10px 12px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:focus-visible { border-color: var(--color-accent); outline: none; }
.settings-ok { margin: 4px 0 0; color: var(--color-accent-300); font-size: 12px; text-align: center; }
/* Benachrichtigungen (Einstellungen) und Info-Sheet */
.push-state { margin: 0; font-size: 14px; color: var(--color-text); }
/* Zwei gleich breite, klar erkennbare Knöpfe (Ein/Aus und Test) */
.push-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.push-actions .btn .ph { font-size: 18px; }
.push-actions .btn[hidden] { display: none; }
.push-intro-text { margin: 0 0 10px; line-height: 1.45; }
#push-intro .btn-block + .btn-block { margin-top: 8px; }
.info-uuid {
  display: block; padding: 10px 12px; font-size: 13px; word-break: break-all; user-select: all;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}

/* ─ Buttons (Nocturne: Outline, nie gefüllt) ─ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; padding: 10px 14px; border-radius: var(--radius-md);
}
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { color: var(--color-text); border-color: var(--color-neutral-700); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-ghost { color: var(--color-accent-300); border: 0; padding-inline: 2px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ─ Bottom-Sheets (Airline-Auswahl, später Einstellungen) ─ */
.sheet-dialog {
  border: 0; padding: 0; background: transparent; color: var(--color-text);
  width: 100%; max-width: 560px; max-height: 92dvh;
  margin: auto auto 0; /* unten verankert, horizontal zentriert */
}
.sheet-dialog::backdrop { background: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.sheet {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 92dvh;
  padding: 12px 20px calc(30px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg);
}
.sheet-dialog[open] .sheet { animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet-dialog[open] .sheet { animation: none; } }
/* Greifer: sichtbar 36 × 4 px, Griffzone größer (Herunterziehen schließt, siehe enableSheetDrag) */
.sheet-grabber {
  width: 36px; height: 4px; border-radius: 2px; background: var(--color-neutral-700);
  margin: -12px auto -4px; padding: 12px 40px; background-clip: content-box; box-sizing: content-box;
  cursor: grab; touch-action: none;
}
.sheet-head { touch-action: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-title { margin: 0; font-size: 20px; font-weight: 500; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sheet-sub { font-size: 11px; color: var(--color-neutral-500); font-weight: 400; }
.sheet-close {
  flex: none; width: 40px; height: 40px; border: 0; background: transparent;
  color: var(--color-neutral-400); font-size: 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sheet-close:hover { color: var(--color-text); }
.sheet-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 50%; }
.sheet-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  color: var(--color-neutral-500);
}
.sheet-search .ph { font-size: 18px; }
.sheet-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 14px; outline: none; }
.sheet-quick { flex-wrap: wrap; }

/* ─ Airline-Liste im Sheet ─ */
.airline-list { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; min-height: 120px; }
.airline-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent; text-align: left; cursor: pointer; color: var(--color-text); font: inherit;
}
.airline-row:last-child { border-bottom: 0; }
.airline-row:active { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.airline-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.airline-row-code { font-size: 13px; font-weight: 500; color: var(--color-accent); text-align: center; }
.airline-row-mid { display: flex; flex-direction: column; min-width: 0; }
.airline-row-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.airline-row-meta { font-size: 11px; color: var(--color-neutral-500); }
.airline-row-box { font-size: 20px; color: var(--color-neutral-600); }
.airline-row[aria-pressed="true"] .airline-row-box { color: var(--color-accent); }

/* ─ „Meine Flüge": Karten (Vorlage 1c) ─ */
.card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.flight-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-accent-700), 0 10px 30px color-mix(in srgb, var(--color-accent) 18%, transparent);
  cursor: pointer;
}
.flight-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.flight-card.is-past { opacity: 0.45; }
/* Wisch-zum-Löschen: Vorschau liegt über einer Lösch-Fläche (Papierkorb rechts) */
.fc-preview { position: relative; overflow: hidden; }
.fc-swipe {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; background: var(--color-surface);
  touch-action: pan-y;
  will-change: transform;
}
.fc-delete-bg {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 22px; font-size: 22px;
  color: var(--color-accent-100);
  background: color-mix(in srgb, var(--color-accent) 55%, var(--color-surface));
}
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-top-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fc-star { border: 0; background: transparent; cursor: pointer; color: var(--color-accent); font-size: 16px; line-height: 1; padding: 0; display: inline-flex; }
.fc-star:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.fc-date { font-size: 11px; color: var(--color-neutral-400); }
/* Zwei gleich breite Seiten (1fr) um das zentrierte Flugzeug → immer exakt mittig, egal wie breit die IATAs sind */
.fc-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.fc-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fc-side-to { justify-content: flex-end; }
.fc-iata { flex: none; font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fc-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--color-accent-600), transparent); }
.fc-plane { color: var(--color-accent); font-size: 20px; transform: rotate(90deg); }
/* Ab- und Ankunft getrennt: zwei Spalten mit je einer Trennlinie dazwischen */
.fc-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fc-leg { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-leg-head { margin-bottom: 2px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-300); }
.fc-leg + .fc-leg { padding-left: 14px; border-left: 1px solid var(--color-divider); }
.fc-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.fc-label { flex: none; font-size: 11px; color: var(--color-neutral-500); }
.fc-value { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.fc-value .fc-sched-strike { text-decoration: line-through; color: var(--color-neutral-500); margin-right: 5px; font-size: 12px; }
.fc-value .fc-revised { color: var(--color-accent-300); }
.fc-accent { color: var(--color-accent-300); }
.flight-card .dep-detail { margin: 0; padding: 12px 14px 14px; background: transparent; border-top: 1px solid var(--color-divider); border-radius: 0; }

/* ─ Aufklappbare Zeilen (Anreise, Lounges): Vorschau + Detailpanel ─ */
.rowx { border-bottom: 1px solid var(--color-divider); }
.rowx:last-child { border-bottom: 0; }
.rowx-head {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px 0; border: 0; background: transparent; color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer;
}
.rowx-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-sm); }
/* Icon oben ausgerichtet (optisch auf Höhe des Titels) */
.rowx-ico { flex: none; font-size: 22px; line-height: 1; color: var(--color-accent); margin-top: -1px; }
.rowx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rowx-title { font-size: 14px; line-height: 1.25; }
.rowx-sub { font-size: 11px; color: var(--color-neutral-500); white-space: normal; overflow-wrap: anywhere; }
/* Dauer (zweite Vorschau-Zeile) mit etwas mehr Abstand */
.rowx-sub + .rowx-sub { margin-top: 4px; }
.rowx-aside { flex: none; font-size: 13px; color: var(--color-accent-300); }
.rowx-rating { white-space: nowrap; }
.rowx-caret { flex: none; font-size: 14px; color: var(--color-neutral-500); transition: transform 0.15s ease; }
.rowx.is-open .rowx-caret { transform: rotate(180deg); }
.rowx-detail {
  margin: 0 0 14px; padding: 12px;
  background: var(--color-surface); border-radius: var(--radius-md);
}
.rowx-detail[hidden] { display: none; }
.rowx-detail > :first-child { margin-top: 0; }
.rowx-detail .lounge-sec-head:first-child { margin-top: 0; }

/* App-Namen rechts in der Anfahrt-Vorschau: feste Breite (~25 %), je App eine Zeile, lange gekürzt */
.rowx-apps {
  flex: 0 0 25%; max-width: 25%; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  text-align: right; font-size: 11px; color: var(--color-accent-300);
}
.rowx-apps span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Konsistenzprüfung (ADR-0022): Warnung über der Abflugtafel und am gemerkten Flug */
.board-warning {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--color-accent-600); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  color: var(--color-accent-100); font-size: 13px; line-height: 1.4;
}
.board-warning[hidden] { display: none; }
.board-warning .ph-warning { flex: none; margin-top: 1px; font-size: 18px; color: var(--color-accent-300); }
.fc-warning { margin: 0 0 12px; font-size: 12px; padding: 10px 12px; }

/* Volltextsuche über der Abflugtafel */
.board-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  color: var(--color-neutral-500);
}
.board-search[hidden] { display: none; }
.board-search .ph { font-size: 16px; }
.board-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text);
  font: inherit; font-size: 16px; /* 16 px: kein Auto-Zoom unter iOS */ outline: none;
}

/* Reiter „Assistent" (ADR-0028): Verlauf als Sprechblasen, Eingabe schwebt über der Bottom-Nav */
body[data-tab="chat"] main { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
.chat-intro .lead { margin-bottom: 14px; }
.chat-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.chat-chip {
  max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer;
}
.chat-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chat-log { display: flex; flex-direction: column; gap: 10px; }
.chat-msg {
  max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 0.95rem; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-user { align-self: flex-end; background: var(--color-accent-800); color: var(--color-accent-100); border-bottom-right-radius: 5px; }
.chat-assistant { align-self: flex-start; background: var(--surface); color: var(--text); border-bottom-left-radius: 5px; }
.chat-assistant.chat-error { color: var(--error); }
/* Karten im Verlauf (Lounges/Anreise wie in den Reitern) */
.chat-card {
  align-self: stretch; margin-top: -4px; padding: 6px 14px 10px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.chat-card-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 0 4px; color: var(--muted);
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.chat-card-head i { font-size: 15px; color: var(--accent); }
.chat-card-note { margin: 8px 0 0; color: var(--muted); font-size: 0.74rem; }
.chat-assistant.chat-pending { color: var(--muted); }
.chat-form {
  position: fixed; left: 12px; right: 12px; z-index: 39; margin: 0 auto; max-width: 440px;
  bottom: calc(env(safe-area-inset-bottom) + 18px + 62px + 10px);
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 22px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
body:not([data-tab="chat"]) .chat-form { display: none; }
.chat-form textarea {
  flex: 1; min-width: 0; max-height: 120px; padding: 8px 0; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 16px; line-height: 1.35; resize: none; outline: none;
}
.chat-form textarea::placeholder { color: var(--muted); }
.chat-send {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--accent);
  color: var(--color-accent-100); font-size: 18px; cursor: pointer; display: grid; place-items: center;
}
.chat-send:disabled { opacity: 0.45; cursor: default; }
.chat-send:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }

/* Bildschirmtastatur offen (iOS Safari, Android Chrome, Homescreen-App): Solange das Eingabefeld den Fokus hat, wird
   main auf den sichtbaren Bereich fixiert (--vv-top/--vv-h setzt app.js) und nur der Verlauf scrollt in sich. Die
   Seite selbst scrollt nicht mehr, so muss beim Scrollen nichts nachgeführt werden (kein Ruckeln). Bottom-Nav und
   unterer Rand-Fade aus (das fixierte main bildet eine eigene Ebene, der Fade läge sonst über der Eingabe). */
body.kb-open[data-tab="chat"] .tabbar,
body.kb-open[data-tab="chat"] .edge-fade-bottom { display: none; }
body.kb-open[data-tab="chat"] main {
  position: fixed; top: var(--vv-top, 0px); left: 0; right: 0; height: var(--vv-h, 100%);
  display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden;
}
body.kb-open[data-tab="chat"] #finder { position: static; flex: none; }
body.kb-open[data-tab="chat"] #tab-chat {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: 84px;
}
body.kb-open .chat-form { bottom: auto; top: calc(var(--vv-top, 0px) + var(--vv-h, 100vh) - 8px); transform: translateY(-100%); }