/* Meine Flüge – Oberfläche im Liquid-Glass-Stil */

:root {
  color-scheme: dark;

  --base:        #05070c;
  --text:        #eef2f8;
  --muted:       rgba(233, 240, 250, .56);
  --faint:       rgba(233, 240, 250, .34);

  /* Glasflächen: je „höher“ die Ebene, desto heller */
  --glass-1:     rgba(255, 255, 255, .045);
  --glass-2:     rgba(255, 255, 255, .075);
  --glass-3:     rgba(255, 255, 255, .11);
  /* dichtere Flächen für große Fenster, damit Text ruhig bleibt */
  --surface:     rgba(14, 19, 28, .55);
  --surface-2:   rgba(20, 26, 38, .66);
  /* Lichtverlauf, der Glasflächen von oben „anleuchtet“ */
  --lift:        linear-gradient(178deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .01) 100%);
  --rim:         rgba(255, 255, 255, .12);
  --rim-strong:  rgba(255, 255, 255, .2);
  --sheen:       rgba(255, 255, 255, .3);
  --shadow:      0 18px 50px rgba(0, 0, 0, .5);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, .35);

  --accent:      #4fa8ff;
  --accent-ink:  #ffffff;
  --accent-fill: linear-gradient(180deg, #5cb0ff 0%, #1f7fe0 100%);
  --accent-glow: 0 6px 20px rgba(31, 127, 224, .45);
  --good:        #5ee9a0;
  --warn:        #ffc861;
  --danger:      #ff7b7b;

  --blur:        26px;
  --r-lg:        22px;
  --r-md:        14px;
  --r-sm:        10px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --base:        #c9d8ee;
    --text:        #0d1420;
    --muted:       rgba(13, 20, 32, .58);
    --faint:       rgba(13, 20, 32, .38);
    --glass-1:     rgba(255, 255, 255, .45);
    --glass-2:     rgba(255, 255, 255, .6);
    --glass-3:     rgba(255, 255, 255, .75);
    --surface:     rgba(246, 249, 253, .72);
    --surface-2:   rgba(252, 253, 255, .8);
    --lift:        linear-gradient(178deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 60%, rgba(255, 255, 255, 0) 100%);
    --rim:         rgba(255, 255, 255, .75);
    --rim-strong:  rgba(255, 255, 255, .95);
    --sheen:       rgba(255, 255, 255, .9);
    --shadow:      0 18px 50px rgba(31, 45, 70, .26);
    --shadow-soft: 0 10px 28px rgba(31, 45, 70, .18);
    --accent:      #0a6fd8;
    --accent-glow: 0 6px 20px rgba(10, 111, 216, .3);
    --good:        #12915c;
    --warn:        #a56a00;
    --danger:      #c33b3b;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Farbiger Hintergrund, durch den das Glas hindurchschimmert */
body::before {
  content: "";
  position: fixed; inset: -20%;
  z-index: -4;
  background:
    radial-gradient(46% 42% at 16% 10%, rgba(46, 128, 230, .62), transparent 66%),
    radial-gradient(44% 40% at 86% 6%,  rgba(126, 78, 224, .55), transparent 64%),
    radial-gradient(58% 52% at 74% 74%, rgba(20, 148, 178, .5), transparent 68%),
    radial-gradient(46% 44% at 10% 72%, rgba(214, 84, 148, .34), transparent 66%),
    radial-gradient(70% 50% at 50% 108%, rgba(58, 96, 200, .4), transparent 70%);
  filter: blur(28px);
  animation: drift 46s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background: radial-gradient(130% 100% at 50% 0%, transparent 52%, rgba(0, 0, 0, .42) 100%);
}

@media (prefers-color-scheme: light) {
  body::before { opacity: .85; filter: blur(36px) saturate(120%); }
  body::after { background: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .05) 55%, rgba(120, 145, 185, .22) 100%); }
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--muted); }

::selection { background: rgba(79, 168, 255, .35); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--glass-3); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--rim-strong); background-clip: content-box; }

/* --- Glas-Grundrezept --- */
/* Bewusst sparsam: jede Weichzeichner-Ebene kostet auf dem iPhone Leistung,
   deshalb liegt sie nur auf den wenigen wirklich schwebenden Flächen. */
.topbar, .panel, .toast, .btn.ghost, select,
.field input, .field textarea, .field select, .listenkopf input {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
}

/* --- Kopfzeile --- */

.topbar {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 12px 12px 0; padding: 10px 14px;
  background: var(--glass-2);
  border: 1px solid var(--rim);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), inset 0 1px 0 var(--sheen);
}

.brand {
  font-weight: 640; letter-spacing: .2px; white-space: nowrap; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-sm); transition: background .15s;
}
.brand:hover { background: var(--glass-2); }

.topactions { display: flex; align-items: center; gap: 8px; }

.btn {
  padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--accent-fill); color: var(--accent-ink);
  box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .12s, filter .15s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost {
  background: var(--glass-2); color: var(--text);
  border-color: var(--rim); box-shadow: inset 0 1px 0 var(--sheen);
}
.btn.ghost:hover { background: var(--glass-3); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }

select {
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--rim); outline: none;
  box-shadow: inset 0 1px 0 var(--sheen);
}
select:hover { background: var(--glass-3); }
select option { background: #131a26; color: #eef2f8; }
@media (prefers-color-scheme: light) { select option { background: #fff; color: #0d1420; } }

.viewswitch {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--glass-1); border: 1px solid var(--rim);
}
.viewswitch button {
  border: none; background: none; color: var(--muted); cursor: pointer;
  padding: 5px 14px; border-radius: 999px; font-size: 13px; transition: all .15s;
}
.viewswitch button:hover { color: var(--text); }
.viewswitch button.active {
  background: var(--accent-fill); color: var(--accent-ink);
  box-shadow: var(--accent-glow);
}

/* Ansichtsumschaltung links, alles Übrige rechts */
.viewswitch.top { margin-left: 6px; margin-right: auto; }

#jahrWahl { max-width: 210px; }

/* --- Fenster --- */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 26px;
  background: rgba(4, 7, 12, .55);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  animation: fade .18s ease;
}
@media (prefers-color-scheme: light) { .overlay { background: rgba(180, 195, 215, .5); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.panel {
  background: var(--lift), var(--surface-2);
  border: 1px solid var(--rim-strong);
  border-radius: 26px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--sheen);
  padding: 26px; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  animation: pop .22s cubic-bezier(.2, .9, .3, 1);
}
.panel h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: .2px; }
.panel p.muted { margin: 6px 0 10px; font-size: 13px; }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(8px); } }

.row { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.row.end { justify-content: flex-end; }

.badge {
  background: var(--glass-3); border: 1px solid var(--rim); border-radius: 999px;
  padding: 0 7px; font-size: 11px; margin-left: 4px;
}

.sechead {
  margin: 22px 0 6px; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--rim); padding-top: 16px;
}

.phoneurls { margin-top: 8px; }
.phoneurl {
  display: block;
  background: var(--glass-1); border: 1px solid var(--rim); border-radius: var(--r-sm);
  padding: 9px 12px; margin-bottom: 7px; overflow-x: auto;
}
.phoneurl, .panel code {
  font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--accent); white-space: nowrap;
}

/* --- Eingabefelder --- */

.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px;
  letter-spacing: .3px; text-transform: uppercase;
}
.field > span small { text-transform: none; letter-spacing: 0; }
.field input, .field textarea, .field select {
  width: 100%; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--glass-1); border: 1px solid var(--rim);
  outline: none; resize: vertical;
  box-shadow: inset 0 1px 0 var(--sheen);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field select { cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus {
  background: var(--glass-3); border-color: rgba(79, 168, 255, .55);
  box-shadow: inset 0 1px 0 var(--sheen), 0 0 0 4px rgba(79, 168, 255, .16);
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }

.hint { font-size: 12px; color: var(--muted); margin: -7px 0 11px; min-height: 1px; }

.pickgrid {
  display: grid; gap: 4px 10px; margin-top: 6px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pick {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 9px; cursor: pointer; font-size: 13px;
  border: 1px solid transparent; transition: background .13s, border-color .13s;
}
.pick:hover { background: var(--glass-2); border-color: var(--rim); }
.pick input { flex: 0 0 auto; accent-color: var(--accent); width: 15px; height: 15px; }
.pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Hinweis --- */

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 100; padding: 11px 20px; border-radius: 999px;
  background: var(--lift), var(--surface-2); border: 1px solid var(--rim-strong); color: var(--text);
  box-shadow: var(--shadow), inset 0 1px 0 var(--sheen);
  animation: rise .22s cubic-bezier(.2, .9, .3, 1);
}
.toast.err { border-color: rgba(255, 123, 123, .55); color: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ===================== Inhalt ===================== */

.fmain {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 80px;
}

/* --- Leerer Anfang --- */

.leerstart {
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--rim);
  border-radius: var(--r-lg);
  background: var(--glass-1);
}
.leerstart h2 { margin: 0 0 8px; font-size: 20px; }
.leerstart p { max-width: 460px; margin: 0 auto 18px; }

/* --- Kennzahlen --- */

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

/* Bewusst ohne backdrop-filter: von diesen Kacheln liegen viele auf einer
   Seite, und jede Weichzeichner-Ebene kostet auf dem iPhone spürbar Leistung. */
.kachel {
  background: var(--surface);
  background-image: var(--lift);
  border: 1px solid var(--rim);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.kachel b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.15;
}
.kachel b i { font-size: 15px; font-style: normal; color: var(--muted); font-weight: 600; }
.kachel span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.vergleiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.vergleich {
  background: var(--glass-1);
  border: 1px solid var(--rim);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.vergleich b { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.vergleich span { margin-left: 7px; font-size: 13px; color: var(--muted); }
.vergleich .balken { margin-top: 9px; }

.balken {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: var(--glass-3);
  overflow: hidden;
}
.balken i { display: block; height: 100%; border-radius: 99px; background: var(--accent-fill); }

/* --- Blöcke --- */

.block, .kartenblock {
  background: var(--surface);
  background-image: var(--lift);
  border: 1px solid var(--rim);
  border-radius: var(--r-lg);
  padding: 16px 18px 18px;
  margin-bottom: 16px;
}

.blockkopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.blockkopf h2 { margin: 0; font-size: 15px; letter-spacing: .2px; }
.blockkopf .muted { font-size: 12px; }

.spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.spalten .block { margin-bottom: 0; }
.spalten + .spalten, .spalten + .block { margin-top: 16px; }

/* --- Karten --- */

.karte svg { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.karte .see { fill: var(--glass-1); }
.karte .netz { fill: none; stroke: var(--rim); stroke-width: .25; }
.karte .land { fill: var(--glass-2); stroke: var(--rim-strong); stroke-width: .3; }
.karte .bahn { fill: none; stroke: var(--accent); stroke-opacity: .85; stroke-linecap: round; }
.karte .ort { fill: var(--text); fill-opacity: .9; }

/* Flüge, die den Kontinent verlassen: gestrichelt und blasser, sie laufen
   auf den Detailkarten nur bis zum Rand. */
.karte .bahn.raus {
  stroke: var(--text);
  stroke-opacity: .42;
  stroke-dasharray: 1.6 1.4;
}

.karte .ortname {
  fill: var(--text); fill-opacity: .78;
  font-weight: 640; letter-spacing: .02em;
  paint-order: stroke; stroke: var(--base); stroke-width: .5px; stroke-opacity: .55;
}
.karte .zielname {
  fill: var(--text); fill-opacity: .45;
  text-anchor: middle; font-weight: 600;
  paint-order: stroke; stroke: var(--base); stroke-width: .5px; stroke-opacity: .5;
}
.kartenfuss { margin: 10px 2px 0; font-size: 12px; }

.detailkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.detailkarten .kartenblock { margin-bottom: 0; }

/* --- Ranglisten --- */

.rangliste { display: flex; flex-direction: column; gap: 1px; }

.rang {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 90px 46px 52px;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 13px;
}
.rang:nth-child(odd) { background: var(--glass-1); }
.rang .nr { color: var(--faint); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.rang .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang .name em { font-style: normal; color: var(--muted); margin-left: 7px; font-size: 12px; }
.rang .anzahl { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rang .anteil { text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- Mehrfach geflogene Flugzeuge --- */

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

.mehrfachreihe {
  border: 1px solid var(--rim);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  background: var(--glass-1);
}
.mkopf { display: flex; align-items: center; gap: 9px; }
.mkopf b { font-size: 14px; letter-spacing: .3px; }
.mkopf .muted { font-size: 12px; }
.mkopf .badge { margin-left: auto; }
.mfluege { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mflug {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--glass-2);
  color: var(--muted);
}
.mflug em { font-style: normal; opacity: .75; margin-left: 4px; }

/* --- Jahre --- */

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

.jahr {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 84px 96px;
  align-items: center;
  gap: 12px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.jahr:hover { background: var(--glass-2); }
.jahr.active { background: var(--glass-2); border-color: var(--accent); }
.jahr b { font-size: 14px; font-variant-numeric: tabular-nums; }
.jahr .jn, .jahr .jkm { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* --- Flugliste --- */

.listenkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.listenkopf input {
  width: min(340px, 55vw);
  padding: 8px 12px;
  border-radius: 99px;
  border: 1px solid var(--rim);
  background: var(--glass-1);
  color: var(--text);
  outline: none;
  font: inherit;
}
.listenkopf input:focus {
  background: var(--glass-3); border-color: rgba(79, 168, 255, .55);
}

.flugliste {
  border: 1px solid var(--rim);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.flug {
  display: grid;
  grid-template-columns: 110px 1.5fr 1.1fr 1.1fr 88px;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-top: 1px solid var(--rim);
  cursor: pointer;
}
.flug:first-child { border-top: none; }
.flug:hover { background: var(--glass-2); }
.flug > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flug b { font-weight: 600; }
.flug em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.fdatum b { font-variant-numeric: tabular-nums; }
.fstrecke b { letter-spacing: .4px; }
.pfeil { color: var(--faint); margin: 0 2px; }
.fairline em, .ftyp em { display: inline; margin-left: 7px; }
.fkm { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Formular --- */

.streckeinfo {
  font-size: 13px;
  margin: -6px 0 12px;
  min-height: 1px;
  color: var(--muted);
}
.streckeinfo.gut b { color: var(--text); font-size: 15px; }
.streckeinfo.warn { color: var(--warn); }

/* Kennzeichen: das Feld, aus dem alles Weitere folgt */

.reg-feld { margin-bottom: 6px; }
.reg-reihe { display: flex; gap: 7px; }
.reg-reihe input {
  flex: 1;
  font-weight: 660; letter-spacing: .9px; text-transform: uppercase; font-size: 15px;
}
.reg-reihe .btn { flex: 0 0 auto; }

.reginfo {
  font-size: 13px; color: var(--muted);
  margin: 0 0 12px; min-height: 18px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.reginfo b { color: var(--text); font-size: 14px; }
.reginfo.warn { color: var(--warn); }
.reginfo.laedt { color: var(--faint); font-style: italic; }
.reginfo .quelle {
  font-size: 11.5px; color: var(--faint);
  border: 1px solid var(--rim); border-radius: 99px; padding: 1px 8px;
}

/* kurz aufleuchten, wenn ein Feld automatisch gefüllt wurde */
.field input.uebernommen {
  border-color: rgba(94, 233, 160, .7);
  box-shadow: inset 0 1px 0 var(--sheen), 0 0 0 4px rgba(94, 233, 160, .16);
}

/* --- iPhone --- */

@media (max-width: 860px) {
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right)
                 env(safe-area-inset-bottom) env(safe-area-inset-left); }

  .fmain { padding: 14px 12px 90px; }
  .spalten { grid-template-columns: 1fr; }

  /* Zwei Reihen: oben Titel und Knöpfe, darunter Ansicht und Jahr nebeneinander.
     Sonst überlagern sich die Bedienelemente auf schmalen Geräten. */
  .topbar { margin: 8px 8px 0; padding: 9px 10px; row-gap: 8px; column-gap: 6px; }
  .brand { order: 1; flex: 0 0 auto; padding: 4px; font-size: 17px; }
  .brand span { display: none; }
  .topactions { order: 2; flex: 1 1 auto; justify-content: flex-end; gap: 6px; }
  .topactions .btn { padding: 7px 11px; font-size: 13px; }
  .viewswitch.top { order: 3; margin: 0; flex: 1 1 auto; min-width: 0; }
  #jahrWahl { order: 4; flex: 0 0 auto; max-width: 42vw; padding: 7px 11px; font-size: 13px; }

  .rang { grid-template-columns: 20px minmax(0, 1fr) 44px 46px; }
  .rang .balken { display: none; }
  .jahr { grid-template-columns: 46px minmax(0, 1fr) 70px; }
  .jahr .jkm { display: none; }
  .flug {
    grid-template-columns: 1fr auto;
    grid-template-areas: "strecke km" "airline datum" "typ typ";
    gap: 3px 12px;
  }
  .fstrecke { grid-area: strecke; }
  .fkm { grid-area: km; }
  .fairline { grid-area: airline; }
  .fdatum { grid-area: datum; text-align: right; }
  .ftyp { grid-area: typ; font-size: 12px; color: var(--muted); }
  .listenkopf input { width: 100%; }
  .kachel b { font-size: 22px; }
  .panel { padding: 20px 16px; }
}

/* --- Druck aus dem Browser --- */

@media print {
  body.drucken {
    background: #fff;
    color: #000;
    overflow: visible;
  }
  body.drucken::before, body.drucken::after,
  body.drucken .topbar, body.drucken .overlay, body.drucken .toast,
  body.drucken .listenkopf, body.drucken .leerstart { display: none !important; }

  /* Beide Ansichten hintereinander, egal was am Bildschirm zu sehen war */
  body.drucken .ansicht { display: block !important; }
  body.drucken #liste { break-before: page; }

  body.drucken .fmain { max-width: none; padding: 0; }
  body.drucken .block, body.drucken .kartenblock, body.drucken .kachel,
  body.drucken .flugliste, body.drucken .vergleich {
    background: none !important;
    backdrop-filter: none !important;
    border-color: #bbb;
    box-shadow: none;
    break-inside: avoid;
  }
  body.drucken .kartenblock, body.drucken .block { padding: 8px 0; border: none; }
  body.drucken .blockkopf { border-bottom: 1px solid #ccc; padding-bottom: 4px; }
  body.drucken .rang:nth-child(odd) { background: #f4f4f4; }
  body.drucken .balken { background: #ddd; }
  body.drucken .balken i { background: #888; }
  body.drucken .karte .see { fill: #fafafa; }
  body.drucken .karte .land { fill: #e8e8e8; stroke: #999; }
  body.drucken .karte .netz { stroke: #e0e0e0; }
  body.drucken .karte .bahn { stroke: #333; }
  body.drucken .karte .ort { fill: #000; }
  body.drucken .flug { break-inside: avoid; border-color: #ddd; }
  body.drucken .muted, body.drucken .flug em, body.drucken .kachel span { color: #555; }

  @page { margin: 14mm; }
}

/* --- Anmeldung --- */

.anmeldung {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.anmeldekarte {
  width: min(430px, 100%);
  background: var(--lift), var(--surface-2);
  border: 1px solid var(--rim-strong);
  border-radius: 26px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--sheen);
  padding: 32px 28px;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
}
.anmeldekarte h1 {
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: .2px;
}
.anmeldekarte p.muted { font-size: 13.5px; margin: 0 0 20px; }

.anmeldekarte form { display: flex; flex-direction: column; gap: 10px; }
.anmeldekarte input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--glass-1);
  border: 1px solid var(--rim);
  color: var(--text);
  outline: none;
  font: inherit;
  box-shadow: inset 0 1px 0 var(--sheen);
}
.anmeldekarte input:focus {
  background: var(--glass-3);
  border-color: rgba(79, 168, 255, .55);
  box-shadow: inset 0 1px 0 var(--sheen), 0 0 0 4px rgba(79, 168, 255, .16);
}
.anmeldekarte .btn { width: 100%; padding: 11px; }

.anmeldehinweis {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 1px;
}
.anmeldehinweis.gut { color: var(--good); }
.anmeldehinweis.warn { color: var(--warn); }

/* --- Fehlerleiste --- */

.fehlerleiste {
  margin: 12px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 123, 123, .5);
  background: rgba(255, 123, 123, .1);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.fehlerleiste b { color: var(--danger); }
.fehlerleiste code {
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--glass-2);
  border: 1px solid var(--rim);
  border-radius: 6px;
  padding: 3px 8px;
  word-break: break-word;
}

.anmeldewechsel {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.anmeldewechsel:hover { color: var(--text); }

/* --- Flugzeuge aus der Fotosammlung --- */

.flugzeugliste {
  border: 1px solid var(--rim);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.flugzeug {
  display: grid;
  grid-template-columns: 150px 1.3fr 1.2fr 1fr 80px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--rim);
  cursor: pointer;
}
.flugzeug:first-child { border-top: none; }
.flugzeug:hover { background: var(--glass-2); }
.flugzeug > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fzkennung { display: flex; align-items: center; gap: 6px; }
.fzkennung b { font-weight: 650; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.fzmarke {
  font-size: 10.5px; padding: 1px 6px; border-radius: 99px;
  background: var(--accent-fill); color: var(--accent-ink); white-space: nowrap;
}
.fzmarke.sonder { background: var(--glass-3); color: var(--warn); }
.fztyp em { font-style: normal; color: var(--faint); font-size: 12px; margin-left: 7px; }
.fzorte { color: var(--muted); font-size: 12.5px; }
.fzfotozahl { text-align: right; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Einzelnes Flugzeug */

.fzangaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 16px; }
.fzzeile {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--rim); font-size: 13px;
}
.fzzeile span { color: var(--muted); }

.fzfluege { margin-top: 16px; }
.fzfluege h3 { margin: 0 0 8px; font-size: 14px; }
.fzfluege .mflug, .fzliste .mflug { margin-right: 6px; margin-bottom: 6px; display: inline-block; }

.fzfotos { margin-top: 14px; }
.fzgalerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.fzgalerie figure { margin: 0; }
.fzgalerie img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--rim); display: block;
}
.fzgalerie figcaption {
  margin-top: 4px; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 860px) {
  .flugzeug {
    grid-template-columns: 1fr auto;
    grid-template-areas: "kennung fotos" "airline airline" "typ orte";
    gap: 3px 10px;
  }
  .fzkennung { grid-area: kennung; }
  .fzfotozahl { grid-area: fotos; }
  .fzairline { grid-area: airline; font-size: 13px; }
  .fztyp { grid-area: typ; font-size: 12px; color: var(--muted); }
  .fzorte { grid-area: orte; text-align: right; }
  #flugzeugSuche { width: 100%; }
}