/* Planescope – öffentliche Startseite ohne Anmeldung (templates/landing.html, landing_page.py), seit 07.11.2026.
   Übernommen aus dem Entwurf design/startseite-gast/index.html (Reiter „Startseite“, Version 28, von Marco freigegeben).
   Alle Regeln unter .lx (body der Startseite) gekapselt, damit nichts in die App läuft; nicht Teil von Tailwind.
   Themes wie compact.css: hell = Standard, dunkel = [data-theme="planescope-dark"] (Theme-Knopf der Kopfzeile). */
/* Figtree-Datei ist variabel (300–900); chrome_x.css meldet nur 400–700 an, der Entwurf nutzt 800 für Überschriften */
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap; src: url("/static/fonts/figtree-latin.woff2") format("woff2"); }
.lx {
  /* Flächen, Linien, Schrift und Schilder von der zentralen Stelle (chrome_x.css, --ps-*) */
  --bg: var(--ps-bg); --card: var(--ps-card); --line: var(--ps-line); --soft: var(--ps-soft); --zebra: var(--ps-zebra); --fg: var(--ps-fg);
  --muted: var(--ps-muted); --faint: var(--ps-faint);
  --rwy: #b9b9c0; --now: var(--ps-now); --unsched: #f5c518; --on-unsched: #15171a; --btn: var(--ps-pri); --on-btn: var(--ps-on-pri);
  --t-l: var(--ps-t-l); --t-c: var(--ps-t-c); --i-l: var(--ps-i-l); --i-c: var(--ps-i-c); --line-l: 0.58; --line-c: 0.15;
  --vlate: #e5484d; --on-vlate: #ffffff; --done: #1f8f4e; --on-done: #ffffff;
  --land: oklch(0.86 0.014 var(--ah)); --coast: oklch(0.81 0.018 var(--ah)); --plane: #707079; --trail: 96 96 106; --apdot: #66666e;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--fg); font: 15px/1.5 var(--font);
}
[data-theme="planescope-dark"] .lx {
  --rwy: #3f3f46; --line-l: 0.78; --line-c: 0.15;
  --vlate: #c93a3f; --on-vlate: #ffffff; --done: #2f9e5f; --on-done: #0c1a12; --land: #1e1e22; --coast: #26262b; --plane: #7c7c86; --trail: 150 150 160; --apdot: #a1a1aa;
  color-scheme: dark;
}
.lx a { color: inherit; text-decoration: none; }
.lx h1, .lx h2, .lx h3 { margin: 0; text-wrap: balance; }
/* app.css setzt Überschriften in Montserrat: hier wie im Entwurf alles in Figtree */
.lx h1, .lx h2, .lx h3, .lx h4, .lx button, .lx input { font-family: var(--font); }
.lx p { margin: 0; }
.lx .tnum { font-variant-numeric: tabular-nums; }
.lx .muted { color: var(--muted); }
.lx .gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.lx .inner { max-width: 1320px; margin: 0 auto; }
.lx :focus-visible { outline: 2px solid oklch(var(--line-l) var(--line-c) 250); outline-offset: 2px; }
.lx .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px;
  font: 600 14.5px var(--font); border: 1px solid var(--ps-field-b); background: var(--ps-btn); color: var(--fg); cursor: pointer; white-space: nowrap; }
.lx .btn.primary { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.lx .btn.ghost { background: transparent; border-color: transparent; }
.lx .btn.lg { height: 42px; padding: 0 18px; font-size: 15.5px; }
.lx .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; padding: 2px 8px; font-weight: 600; font-size: 13.5px; white-space: nowrap;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.lx .c-mil { --h: 125; }
.lx .c-vip { --h: 300; }
.lx .c-unusual, .lx .c-variant { --h: 190; }
.lx .c-new { --h: 250; }
.lx .c-livery, .lx .c-sticker { --h: 45; }
.lx .c-emerg { --h: 25; }
.lx .c-ldg { --h: 155; }
.lx .c-dep { --h: 250; }
.lx .c-rare { --h: 0; --t-c: 0; --i-c: 0; }
.lx .chip.c-unsched { background: var(--unsched); color: var(--on-unsched); }
.lx .chip.c-sticker, .lx .chip.c-variant { background: transparent; box-shadow: inset 0 0 0 1.5px oklch(0.6 0.13 var(--h)); }
.lx .xb { --xcols: 2.5rem 8.4rem minmax(0, 1fr) minmax(0, .9fr) 6.2rem 8rem minmax(12rem, 1.35fr) 7.4rem 2.25rem; }
.lx .xb .phead { align-items: center; padding: 12px 16px; }
.lx .xb .phead .btn.more { font-size: 14.5px; }
.lx .xb .phead .btn.more:hover { text-decoration: none; border-color: var(--faint); }
.lx .xb .bt { display: grid; }
.lx .xb .bt h2 { font-size: 19px; }
.lx .xb .bt small { font-size: 13px; color: var(--muted); }
.lx .xhead, .lx .xr { display: grid; grid-template-columns: var(--xcols); gap: 14px; align-items: center; }
.lx .xhead { padding: 0 16px; height: 38px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.lx .xr { min-height: 68px; padding: 10px 16px 10px 12px; border-left: 4px solid transparent; border-bottom: 1px solid var(--line); background: var(--card); }
.lx .xb [data-cat="mil"] { --h: 125; }
.lx .xb [data-cat="vip"] { --h: 300; }
.lx .xb [data-cat="unusual"] { --h: 190; }
.lx .xb [data-cat="new"] { --h: 250; }
.lx .xb [data-cat="livery"], .lx .xb [data-cat="sticker"] { --h: 45; }
.lx .xb [data-cat="emerg"] { --h: 25; }
.lx .xb [data-cat="rare"], .lx .xb [data-cat="widebody"] { --h: 0; --t-c: 0; --i-c: 0; }
.lx .xr.cat { background: color-mix(in oklab, oklch(var(--t-l) var(--t-c) var(--h, 0)) 38%, var(--card)); border-left-color: oklch(0.68 0.13 var(--h, 0)); }
.lx .xr.cat[data-cat="rare"] { border-left-color: var(--faint); }
.lx .xr.cat[data-cat="unsched"] { background: color-mix(in oklab, #f5c518 16%, var(--card)); border-left-color: #e0a800; }
.lx .xdir { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.lx .xdir svg { width: 19px; height: 19px; }
.lx .xt { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.lx .tbox { font-size: 1.3rem; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--line); background: var(--bg); font-variant-numeric: tabular-nums; }
.lx .tbox.late { background: var(--unsched); color: var(--on-unsched); border-color: transparent; }
.lx .tbox.very { background: var(--vlate); color: var(--on-vlate); border-color: transparent; }
.lx .xt small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lx .xt small b { color: var(--fg); font-weight: 700; }
.lx .xt small .early { color: oklch(var(--i-l) 0.12 155); font-weight: 700; }
.lx .xf, .lx .xo, .lx .xg, .lx .xs { min-width: 0; }
.lx .xf b, .lx .xo b, .lx .xg b { display: block; font-size: 1.3rem; font-weight: 600; line-height: 1.75rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* nichts abschneiden, lieber umbrechen (Regel Marco) */
.lx .xf small, .lx .xo small { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.lx .tybox { display: inline-block; font-size: 1.3rem; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: 3px; border: 1px solid color-mix(in oklab, var(--fg) 30%, transparent); }
.lx .xg b.tba { font-size: 14px; color: var(--muted); }
.lx .xexp { display: inline-block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--muted); border: 1px dashed color-mix(in oklab, var(--fg) 45%, transparent); border-radius: 4px; padding: 0 6px; }
.lx .xliv { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: oklch(var(--i-l) 0.13 45); line-height: 1.35; overflow-wrap: anywhere; }
.lx .xliv svg { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.lx .xs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.lx .lvl { display: inline-flex; align-items: flex-end; gap: 2px; margin-right: 2px; }
.lx .lvl i { width: 3px; border-radius: 1px; background: color-mix(in oklab, var(--fg) 20%, transparent); }
.lx .lvl i.on { background: var(--fg); }
.lx .ctag { font-size: 13.5px; font-weight: 600; line-height: 1.25; border-radius: 5px; padding: 3px 8px; white-space: nowrap;
  background: oklch(var(--t-l) var(--t-c) var(--h, 0)); color: oklch(var(--i-l) var(--i-c) var(--h, 0)); }
.lx .ctag[data-cat="unsched"] { background: #f5c518; color: #15171a; }
.lx .ctag[data-cat="sticker"] { background: transparent; box-shadow: inset 0 0 0 1.5px oklch(0.6 0.13 var(--h)); }
.lx .ctag.exp { background: transparent; outline: 1.5px dashed oklch(0.6 0.13 var(--h, 0)); outline-offset: -1.5px; }
.lx .xs small { flex-basis: 100%; font-size: 12.5px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.lx .xst { justify-self: start; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 5px 9px; border-radius: 3px;
  border: 1px solid color-mix(in oklab, var(--fg) 35%, transparent); color: color-mix(in oklab, var(--fg) 72%, transparent); white-space: nowrap; }
.lx .xst.ok { background: var(--done); color: var(--on-done); border-color: transparent; }
.lx .xgo { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); }
.lx .xgo svg { width: 16px; height: 16px; }
.lx .xnow { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.lx .xnow span { background: var(--unsched); color: var(--on-unsched); font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.lx .xnow::after { content: ""; flex: 1; height: 2px; background: var(--now); }
@media (max-width: 1099px) {
.lx .xhead { display: none; }
.lx .xr { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; grid-template-areas: "t f s" "o y a" "o r a" "x x x"; gap: 6px 12px; align-items: start; padding: 12px 14px 12px 10px; }
.lx .xdir { display: none; }
.lx .xt { grid-area: t; }
.lx .xf { grid-area: f; }
.lx .xst { grid-area: s; justify-self: end; }
.lx .xo { grid-area: o; }
.lx .xy { grid-area: y; }
.lx .xg { grid-area: r; }
.lx .xgo { grid-area: a; align-self: center; }
.lx .xs { grid-area: x; }
.lx .xs:empty { display: none; }
}
.lx .lblp { overflow: hidden; }
.lx .lblp .terms div { padding: 18px 22px; gap: 10px; }
.lx .lblp .terms > div:nth-child(-n+3) { border-top: 0; }
.lx .lblp .terms p { font-size: 15px; }
.lx .lvlrow { display: inline-flex; gap: 10px; align-items: flex-end; height: 26px; }
.lx .chip.exp { background: transparent; box-shadow: none; outline: 1.5px dashed oklch(0.6 0.13 var(--h)); outline-offset: -1.5px; }
.lx .dtag { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); border: 1px dashed var(--faint); border-radius: 5px; padding: 1px 7px; }
.lx .code { display: inline-block; border: 1px solid var(--faint); border-radius: 5px; padding: 0 6px; font-weight: 700; font-size: 14px; }
.lx .apc { display: inline-block; min-width: 3.1em; text-align: center; border-radius: 5px; padding: 1px 6px; font-weight: 700; font-size: 13.5px; background: var(--soft); }
.lx .page { padding-block: 28px 56px; }
.lx .page > .inner { display: grid; gap: 28px; }
.lx .panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.lx .phead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.lx .phead h2 { font-size: 18px; font-weight: 600; }
.lx .phead .sum { color: var(--muted); font-size: 14px; }
.lx .phead .more { margin-left: auto; font-weight: 600; font-size: 14px; }
.lx .phead .more:hover { text-decoration: underline; }
.lx .live { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.65 0.17 150); display: inline-block; margin-right: 6px; }
@media (prefers-reduced-motion: no-preference) {
.lx .live { animation: pulse 2s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .35; } }
.lx .nowline { display: flex; align-items: center; gap: 10px; padding: 0 20px; height: 22px; font-size: 12.5px; font-weight: 700; color: var(--fg); }
.lx .nowline::before { content: ""; height: 2px; flex: 0 0 14px; background: var(--now); }
.lx .nowline::after { content: ""; height: 2px; flex: 1; background: var(--now); }
.lx .pfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.lx .pfoot .btn { margin-left: auto; }
.lx .rwgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); }
.lx .rw { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.lx .rw:hover { background: var(--zebra); }
.lx .rw svg { width: 76px; height: 60px; display: block; }
.lx .rw h3 { font-size: 15.5px; font-weight: 700; }
.lx .rw h3 span { color: var(--muted); font-weight: 500; }
.lx .rw .ch { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lx .rw .ch .chip { font-size: 12.5px; padding: 1px 6px; }
.lx .terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lx .terms div { padding: 14px 20px; border-top: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.lx .terms p { color: var(--muted); font-size: 14.5px; }
.lx .faq details { border-top: 1px solid var(--line); padding: 0 20px; }
.lx .faq details:first-of-type { border-top: 0; }
.lx .faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lx .faq summary::after { content: "+"; color: var(--muted); font-weight: 500; }
.lx .faq details[open] summary::after { content: "\2212"; }
.lx .faq details p { padding-bottom: 14px; color: var(--muted); max-width: 75ch; }
.lx .foot { border-top: 1px solid var(--line); background: var(--card); padding-block: 32px 28px; font-size: 14px; }
.lx .foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 24px; }
.lx .foot h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.lx .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--muted); }
.lx .foot a:hover { color: var(--fg); text-decoration: underline; }
.lx .foot .cols { grid-template-columns: minmax(160px, 1fr) minmax(0, 4fr); gap: 24px 40px; }
.lx .fapl { display: block !important; columns: 4; column-gap: 32px; }
.lx .fapl li { break-inside: avoid; margin-bottom: 4px; }
.lx .fapl span { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; margin-left: 3px; }
.lx .fapl a:hover span { color: inherit; }
@media (max-width: 1040px) {
.lx .fapl { columns: 3; }
}
@media (max-width: 720px) {
.lx .foot .cols { grid-template-columns: minmax(0, 1fr); }
.lx .fapl { columns: 2; }
}
.lx .foot .base { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lx .heroband { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); padding-block: 30px 36px; }
.lx #sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lx .skyfade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0, var(--bg) 38%, color-mix(in oklab, var(--bg) 72%, transparent) 52%, transparent 68%); }
.lx .herogrid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.lx .herogrid .lead-col h1 { max-width: 57rem; }
.lx .herogrid .lead-col > .board { max-width: 72rem; width: 100%; }
.lx .herogrid .lead-col { gap: 18px; padding-top: 0; }
.lx .herogrid .lead-col > :not(h1):not(.board) { max-width: 42rem; }
.lx .herogrid .lead-col h1 { font-size: clamp(42px, min(4.4vw, 100svh * .49 - 371px), 66px); line-height: 1.02; letter-spacing: -0.035em; }
@media (max-width: 1040px) {
.lx .herogrid .lead-col h1 { font-size: clamp(32px, 6.4vw, 48px); line-height: 1.05; }
}
.lx .herogrid .intro { font-size: 16.5px; }
.lx .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1040px) {
.lx .skyfade { background: color-mix(in oklab, var(--bg) 78%, transparent); }
}
.lx .board { margin-top: 0; }
.lx .board .phead { align-items: center; }
.lx .bmask { height: min(330px, max(230px, calc(100vh - 610px))); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 40px), transparent); }
@media (prefers-reduced-motion: no-preference) {
.lx .ticker { animation: tick 60s linear infinite; }
.lx .bmask:hover .ticker { animation-play-state: paused; }
}
@keyframes tick { to { transform: translateY(-50%); } }
.lx { interpolate-size: allow-keywords; }
.lx .page > .inner.land { gap: 112px; padding-top: 24px; }
.lx .sect { display: grid; gap: 32px; }
.lx .shead { display: grid; gap: 10px; }
.lx .shead.big h2 { font-size: clamp(36px, 5.2vw, 68px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.lx .shead.big p { color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); max-width: 62ch; }
.lx .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.lx .stats div { display: grid; gap: 4px; }
.lx .stats b { font-size: clamp(38px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.lx .stats span { color: var(--muted); font-size: 15.5px; }
.lx .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.lx .s4 { grid-column: span 4; }
.lx .s2 { grid-column: span 2; }
.lx .s6 { grid-column: 1 / -1; }
.lx .fcard { position: relative; overflow: hidden; isolation: isolate; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px; min-width: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.lx .fcard::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--fg) 7%, transparent), transparent 60%); }
.lx .fcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .35); border-color: color-mix(in oklab, var(--fg) 22%, var(--line)); }
.lx .fcard:hover::before { opacity: 1; }
.lx .fcard.wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 28px; align-items: start; }
.lx .fct { display: grid; gap: 10px; align-content: start; }
.lx .fct h3 { font-size: clamp(21px, 1.9vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.lx .fct p { color: var(--muted); font-size: 15.5px; }
.lx .cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lx .cats .chip { font-size: 12.5px; padding: 1px 7px; }
.lx .flink { font-weight: 600; justify-self: start; align-self: flex-start; margin-top: auto; }
.lx .fcard.wide .flink { margin-top: 6px; }
.lx .flink::after { content: "\2192"; display: inline-block; margin-left: .35em; transition: transform .25s; }
.lx .flink:hover::after { transform: translateX(4px); }
.lx .mini { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.lx .mhead { display: flex; align-items: center; padding: 8px 12px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.lx .mr { display: grid; grid-template-columns: 2.9rem 3.1rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; font-size: 14px; }
.lx .mr + .mr, .lx .nowline + .mr { border-top: 1px solid var(--line); }
.lx .mr.past { color: var(--muted); }
.lx .mr .t { font-weight: 700; }
.lx .mr .m { min-width: 0; }
.lx .mr .m small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.lx .mr .chip { font-size: 12px; padding: 1px 6px; }
.lx .mini .nowline { padding: 0 12px; }
.lx .mini .rwgrid { grid-template-columns: minmax(0, 1fr); }
.lx .mini .rw { border-right: 0; padding: 10px 12px; grid-template-columns: 64px minmax(0, 1fr); }
.lx .mini .rw:first-child { border-top: 0; }
.lx .mini .rw svg { width: 64px; height: 50px; }
.lx .apc.sq { position: relative; --h: 25; background: oklch(var(--t-l) var(--t-c) var(--h)); color: oklch(var(--i-l) var(--i-c) var(--h)); }
.lx .alrts { display: grid; gap: 8px; }
.lx .alrt { display: grid; gap: 3px; justify-items: start; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.lx .alrt small { color: var(--muted); font-size: 13px; }
.lx .radar { position: absolute; z-index: -1; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; opacity: .9;
  background: repeating-radial-gradient(circle, transparent 0 29px, color-mix(in oklab, var(--fg) 9%, transparent) 29px 30px); }
.lx .radar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, oklch(0.72 0.12 125 / .38), transparent 22%); }
.lx .radar b { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: oklch(0.62 0.14 125); opacity: .25; }
.lx .three .lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.lx .three .lift:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .35); }
.lx .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lx .plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lx .plan.on { border: 2px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--ang), var(--fg), color-mix(in oklab, var(--fg) 15%, transparent) 30%, var(--fg) 55%, color-mix(in oklab, var(--fg) 15%, transparent) 80%, var(--fg)) border-box; }
.lx .pl-k { font-size: 13px; font-weight: 600; color: var(--muted); }
.lx .plan h3 { font-size: 20px; font-weight: 700; }
.lx .price { font-size: clamp(36px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.03em; }
.lx .price small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.lx .plan ul { margin: 0 0 8px; padding-left: 18px; color: var(--muted); display: grid; gap: 5px; }
.lx .plan .btn { margin-top: auto; align-self: flex-start; }
.lx .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.lx .faq details[open]::details-content { block-size: auto; }
.lx .ctaband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 56px);
  border-radius: 24px; background: var(--btn); color: var(--on-btn); }
.lx .ctaband h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.03em; }
.lx .ctaband p { opacity: .75; max-width: 60ch; margin-top: 8px; font-size: 16.5px; }
.lx .ctaband:has(.ctalist) { flex-direction: column; align-items: stretch; gap: 32px; }
.lx .ctatop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.lx .ctalist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; }
.lx .ctalist li { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid color-mix(in oklab, var(--on-btn) 22%, transparent); }
.lx .ctalist b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.lx .ctaband .ctalist p { margin: 0; font-size: 15px; max-width: none; }
@media (max-width: 1040px) {
.lx .ctalist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.lx .ctalist { grid-template-columns: minmax(0, 1fr); }
}
.lx .ctaband .btn.primary { background: var(--on-btn); color: var(--btn); border-color: var(--on-btn); }
.lx .ctaband .btn:not(.primary) { background: transparent; color: var(--on-btn); border-color: color-mix(in oklab, var(--on-btn) 35%, transparent); }
@media (prefers-reduced-motion: no-preference) {
html.rv .lx [data-sc] { opacity: var(--p, 1); transform: translateY(calc((1 - var(--p, 1)) * 56px)) scale(calc(.955 + var(--p, 1) * .045)); transform-origin: 0 100%; will-change: transform, opacity; }
html.rv .lx [data-words] .w { opacity: calc(.14 + .86 * var(--wp, 1)); }
html.rv .lx .heroband .herogrid { transform: translateY(calc(var(--hp, 0) * -70px)); opacity: calc(1 - var(--hp, 0) * .8); }
html.rv .lx #sky { transform: scale(calc(1 + var(--hp, 0) * .09)) translateY(calc(var(--hp, 0) * 40px)); transform-origin: 75% 50%; }
}
.lx .tsearch { position: relative; z-index: 20; }
.lx .tfield { display: flex; align-items: stretch; height: 48px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; }
.lx .tfield:hover { border-color: var(--faint); }
.lx .tfield:focus-within { border-color: var(--muted); }
.lx .tscope { display: flex; align-items: center; gap: 14px; padding: 0 11px 0 13px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--fg); font: 600 14px var(--font); border-radius: 9px 0 0 9px; cursor: pointer; }
.lx .tscope svg { width: 16px; height: 16px; color: var(--muted); }
.lx .tscope:hover, .lx .tscope[aria-expanded="true"] { background: var(--soft); }
.lx .tq { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; color: var(--muted); cursor: text; }
.lx .tq svg { width: 18px; height: 18px; flex: none; }
.lx .tq input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--fg); font: 16px var(--font); }
.lx .tq input::placeholder { color: var(--muted); }
.lx .tq input::-webkit-search-cancel-button { display: none; }
.lx .tq kbd { font: 600 12px var(--font); color: var(--muted); border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.lx .tdd { position: absolute; z-index: 30; top: calc(100% + 8px); background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .35); }
.lx .tdd[hidden] { display: none; }
.lx .tdd:not([hidden]) { animation: ddin .18s ease-out; }
@keyframes ddin { from { opacity: 0; transform: translateY(-4px); } }
.lx .tscopes { left: 0; width: 200px; display: grid; gap: 2px; }
.lx .tscopes button { display: flex; align-items: center; width: 100%; padding: 7px 10px; border-radius: 7px; border: 0; background: transparent; color: var(--fg); font: 500 14px var(--font); cursor: pointer; text-align: left; }
.lx .tscopes button:hover { background: var(--soft); }
.lx .tscopes button[aria-selected="true"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); }
.lx .tres { left: 0; right: 0; max-height: 70vh; overflow-y: auto; }
.lx .tres .tg { font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: .04em; }
.lx .tres a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 7px; }
.lx .tres a:hover, .lx .tres a.on { background: var(--soft); }
.lx .tres .ti small { display: block; color: var(--muted); font-size: 12.5px; }
.lx .tres .rt { color: var(--muted); font-size: 12.5px; }
.lx .tnone { padding: 10px; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
.lx .tq kbd { display: none; }
.lx .tscope { gap: 8px; }
}
.lx .quick { align-items: center; }
.lx .quick .ql { font-size: 13.5px; color: var(--muted); margin-right: 4px; }
.lx .apf { display: flex; flex-wrap: wrap; gap: 8px; }
.lx .apf button { font: 600 14px var(--font); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lx .apf button small { color: var(--muted); font-weight: 500; margin-left: 2px; }
.lx .apf button:hover { border-color: var(--fg); }
.lx .apf button[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.lx .apf button[aria-pressed="true"] small { color: inherit; opacity: .7; }
.lx .aptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.lx .apt { display: grid; gap: 10px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, opacity .3s; }
.lx .apt:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgb(0 0 0 / .4); border-color: color-mix(in oklab, var(--fg) 25%, var(--line)); }
.lx .apt.off { display: none; }
.lx .apt-h { display: flex; align-items: center; justify-content: space-between; }
.lx .apt-code { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.lx .apt-cc { font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.lx .apt-n { font-weight: 600; font-size: 15px; line-height: 1.3; }
.lx .apt-n small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }
.lx .apt-s { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.lx .apt-s span { display: grid; gap: 1px; }
.lx .apt-s b { color: var(--fg); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.lx .faqgrid { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 32px; align-items: start; }
.lx .faqnav { position: sticky; top: 24px; display: grid; gap: 2px; }
.lx .faqnav a { padding: 8px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.lx .faqnav a:hover { background: var(--card); color: var(--fg); }
.lx .faqcols { display: grid; gap: 18px; }
.lx .faqcols .faq { scroll-margin-top: 20px; }
.lx .faqcols .faq .phead h3 { font-size: 17px; font-weight: 700; }
@media (max-width: 900px) {
.lx .faqgrid { grid-template-columns: minmax(0, 1fr); }
.lx .faqnav { position: static; display: flex; flex-wrap: wrap; }
}
@media (min-width: 1041px) {
.lx .heroband { height: max(calc(100svh - 56px), 660px); display: flex; flex-direction: column; }
.lx .heroband > .herogrid { flex: 1; width: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.lx .herogrid .lead-col { display: flex; flex-direction: column; min-height: 0; }
.lx .herogrid .board { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lx .herogrid .bmask { flex: 1; height: auto; min-height: 240px; }
}
@media (prefers-reduced-motion: no-preference) {
html.rv .lx [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--d, 0) * 90ms); }
html.rv .lx [data-rv].in { opacity: 1; transform: none; }
html.rv .lx .fcard[data-rv].in { transition: opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 90ms), transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
html.rv .lx .fcard .mr, html.rv .lx .fcard .nowline, html.rv .lx .fcard .rw, html.rv .lx .fcard .alrt { opacity: 0; transform: translateX(-10px);
    transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
html.rv .lx .fcard.in .mr, html.rv .lx .fcard.in .nowline, html.rv .lx .fcard.in .rw, html.rv .lx .fcard.in .alrt { opacity: 1; transform: none; }
html.rv .lx .fcard .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .5s; }
html.rv .lx .fcard.in .ln { stroke-dashoffset: 0; }
.lx .radar i { animation: sweep 4s linear infinite; }
.lx .radar b { animation: blip 4s ease-out infinite; animation-delay: var(--t); }
.lx .apc.sq::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 oklch(0.65 0.18 25 / .55); animation: sq 2s ease-out infinite; }
.lx .plan.on { animation: ang 7s linear infinite; }
.lx .alrt.fresh { animation: drop .6s cubic-bezier(.2,.7,.2,1); }
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: .15; transform: scale(.8); } 8% { opacity: 1; transform: scale(1.3); } 40% { opacity: .35; transform: scale(1); } }
@keyframes sq { to { box-shadow: 0 0 0 9px oklch(0.65 0.18 25 / 0); } }
@keyframes ang { to { --ang: 360deg; } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@media (max-width: 1040px) {
.lx .page > .inner.land { gap: 80px; }
.lx .bento { grid-template-columns: minmax(0, 1fr); }
.lx .s4, .lx .s2, .lx .s6 { grid-column: auto; }
.lx .fcard.wide { grid-template-columns: minmax(0, 1fr); }
.lx .plans { grid-template-columns: minmax(0, 1fr); }
.lx .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 480px) {
.lx .mr { grid-template-columns: 2.9rem 3.1rem minmax(0, 1fr); }
.lx .mr .chip { grid-column: 3; justify-self: start; }
.lx .fcard { padding: 20px; }
}


/* ---------- Live-Ergänzungen (nicht im Entwurf) ---------- */
/* app.css (Tailwind-Grundregeln) setzt Listen ohne Punkte und SVGs als Block */
.lx .plan ul { list-style: disc; }
.lx .chip svg, .lx .xliv svg { display: inline-block; }
.lx .faq summary::-webkit-details-marker { display: none; }
/* Suche für Gäste: Hinweis, dass Flüge/Airlines/Kennzeichen eine Anmeldung brauchen */
.lx .tres .tsign { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 9px 10px; margin-top: 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.lx .tres .tsign a { color: var(--fg); font-weight: 600; text-decoration: underline; }
.lx .tres a.ap { display: grid; }
/* Pistenbild aus airport_box.runway_svg (Landung grün, Start blau, ungenutzt grau) */
.lx .rw svg line.l { stroke: oklch(var(--line-l) var(--line-c) 155); }
.lx .rw svg line.d { stroke: oklch(var(--line-l) var(--line-c) 250); }
.lx .rw svg line.n { stroke: var(--rwy); }
/* Fuß: Rechtliches wie auf den übrigen öffentlichen Seiten (_legal_links.html) */
.lx .foot .base nav, .lx .foot .base > div { display: contents; }
.lx .foot .base a:hover { color: var(--fg); text-decoration: underline; }
/* Kopfspalte, Popular-Kürzel, Knopfgruppe (im Entwurf im alten Kopfbereich definiert) */
.lx .lead-col { display: grid; gap: 22px; padding-top: 10px; }
.lx .lead-col h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; }
.lx .lead-col .intro { font-size: 17px; color: var(--muted); max-width: 54ch; }
.lx .quick { display: flex; flex-wrap: wrap; gap: 6px; }
.lx .quick a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; font-weight: 600; font-size: 14px; background: var(--card); }
.lx .quick a:hover { border-color: var(--fg); }
.lx .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* Verkehrskarte blendet ein, sobald die Daten da sind */
.lx #sky { opacity: 0; transition: opacity .8s ease; }
.lx #sky.on { opacity: 1; }
/* daisyUI (app.css) hat eigene Klassen .stats und .btn: deren Raster bzw. Schatten hier zurücksetzen
   (.stats setzte grid-auto-flow: column → am Handy lagen die Zahlen übereinander) */
.lx .stats { grid-auto-flow: row; position: static; overflow: visible; border-radius: 0; }
.lx .btn { box-shadow: none; flex-wrap: nowrap; flex-shrink: 0; text-decoration: none; }

/* ---------- Abschnitt „Airports“: Abdeckungskarte (coverage_map.py), Kacheln, Wunsch-Formular (07.11.2026) ----------
   Entwurf design/startseite-airports/, Fassung A (Marco 07.11.2026): am PC Karte links fest beim Scrollen, rechts Kacheln und
   Formular; am Handy nur die Karte, Kacheln und Länderfilter hinter „Show all … airports“ (bleiben im HTML, für Suchmaschinen). */
.lx .cov { display: grid; gap: 20px; }
.lx .covmap { position: relative; overflow: hidden; container: covmap / inline-size; }
.lx .cm { display: block; width: 100%; height: auto; }
.lx .cm-sea { fill: var(--card); }
.lx .cm-land { fill: color-mix(in oklab, var(--fg) 9%, var(--card)); }
.lx .cm-lake { fill: var(--card); }
.lx .cm-bord { fill: none; stroke: color-mix(in oklab, var(--fg) 24%, var(--card)); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lx .cm-o { fill: var(--card); stroke: color-mix(in oklab, var(--fg) 38%, var(--card)); stroke-width: 1.3; cursor: pointer;
  transform-box: fill-box; transform-origin: center; transition: transform .2s, stroke .2s; }
.lx .cm-o:hover, .lx .cm-o.hl { transform: scale(1.6); stroke: var(--fg); }
.lx .cm-a { cursor: pointer; transition: opacity .3s; }
.lx .cm-a.dim { opacity: .16; }
.lx .cm-d { fill: var(--fg); stroke: var(--card); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.lx .cm-h { fill: transparent; stroke: transparent; transition: fill .2s, stroke .2s; }
.lx .cm-a:hover .cm-h, .lx .cm-a:focus-visible .cm-h, .lx .cm-a.hl .cm-h { fill: color-mix(in oklab, var(--fg) 14%, transparent); stroke: var(--fg); stroke-width: 1.5; }
.lx .cm-a:hover .cm-d, .lx .cm-a.hl .cm-d { transform: scale(1.25); }
.lx .cm-a:focus { outline: none; }
.lx .cm text { font: 700 12.5px var(--font); fill: var(--fg); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: 3.5px;
  stroke-linejoin: round; pointer-events: none; }
.lx .cm .lbp { display: none; font-size: 21px; stroke-width: 5px; }
@container covmap (max-width: 600px) { .lx .cm .lb { display: none; } .lx .cm .lbp { display: inline; } }
.lx .cm-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.lx .cm-leg span { display: inline-flex; align-items: center; gap: 7px; }
.lx .cm-leg i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lx .cm-leg .k-d { background: var(--fg); }
.lx .cm-leg .k-o { border: 1.5px solid color-mix(in oklab, var(--fg) 38%, var(--card)); }
.lx .cm-leg .k-s { display: inline-flex; align-items: center; gap: 3px; }
.lx .cm-leg .k-s i { background: var(--muted); }
/* Hinweisfenster über dem Punkt */
.lx .cm-tip { position: absolute; z-index: 3; min-width: 190px; max-width: 250px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); font-size: 13.5px; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); }
.lx .cm-tip.below { transform: translate(-50%, 14px); }
.lx .cm-tip b.c { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.lx .cm-tip .n { display: block; font-weight: 600; margin-top: 1px; }
.lx .cm-tip .s { display: flex; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.lx .cm-tip .s b { color: var(--fg); font-size: 15px; display: block; }
.lx .cm-tip .go { display: block; margin-top: 8px; font-weight: 600; }
/* Kacheln: zur Karte passend hervorheben */
.lx .apt.hl { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
/* Wunsch-Formular */
.lx .covreq { padding: 22px 24px; display: grid; gap: 16px; align-content: start; scroll-margin-top: 20px; }
.lx .covreq h3 { font-size: 20px; font-weight: 700; }
.lx .covreq > div > p { color: var(--muted); margin-top: 4px; font-size: 14.5px; }
.lx .rq { display: grid; gap: 14px; }
.lx .fl { display: grid; gap: 6px; min-width: 0; }
.lx .fl > span:first-child { font-size: 14px; font-weight: 600; }
.lx .fl small { font-weight: 500; color: var(--muted); font-size: 13px; }
.lx .fin { width: 100%; height: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 8px; padding: 0 12px; font: 15px var(--font); }
.lx .fin::placeholder { color: var(--faint); }
.lx .fin:focus { outline: 2px solid oklch(var(--line-l) var(--line-c) 250); outline-offset: 0; border-color: transparent; }
.lx .acw { position: relative; display: block; }
.lx .acl { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45); }
.lx .acl li { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.lx .acl li b { width: 2.6em; flex: none; }
.lx .acl li span { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.lx .acl li:hover, .lx .acl li[aria-selected="true"] { background: var(--zebra); }
.lx .acl li.cov { cursor: default; }
.lx .acl li.cov span::after { content: " · covered"; }
.lx .rq .btn { justify-self: start; }
.lx .rqok { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; --h: 150;
  background: oklch(var(--t-l) var(--t-c) var(--h)); color: oklch(var(--i-l) var(--i-c) var(--h)); }
.lx .rqtop { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.lx .rqtop h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.lx .rqtop li { display: flex; gap: 10px; font-size: 14px; }
.lx .rqtop ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lx .rqtop li b { width: 2.6em; flex: none; }
.lx .rqtop li span { flex: 1; color: var(--muted); }
.lx .covwrap { display: contents; }
.lx .cov .covmap { order: 1; }
.lx .covmore { order: 2; display: none; justify-self: start; }
.lx .cov .aptiles { order: 3; }
.lx .cov .covreq { order: 4; }
.lx .covmore svg { transition: transform .25s; }
.lx .covmore[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 1040px) {
  .lx .covmore { display: inline-flex; }
  .lx #airports:not(.open) .apf, .lx #airports:not(.open) .aptiles { display: none; }
}
@media (min-width: 1041px) {
  .lx .cov { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "map tiles" "map req"; align-items: start; }
  .lx .cov .covmap { grid-area: map; position: sticky; top: 16px; }
  .lx .cov .aptiles { grid-area: tiles; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .lx .cov .covreq { grid-area: req; }
  .lx .cov .apt-s { grid-template-columns: auto auto; justify-content: start; column-gap: 18px; }
  .lx .rq { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .lx .rq .btn { grid-column: 1 / -1; }
}
.lx .rqerr { --h: 25; }
/* /airports für Angemeldete: derselbe Abschnitt in der App-Hülle (site/airports.html, .lx.lx-app). Hintergrund der Seite wie
   die übrigen neuen Seiten (compact.css body:has(.psx)), Karte unter der festen Kopfzeile (3.5rem) stehen lassen */
.lx.lx-app { background: transparent; }
[data-theme="planescope"] body:has(.lx-app) { background: var(--ps-bg); }
.lx-app .shead h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.lx-app .shead p { color: var(--muted); font-size: 16px; }
@media (min-width: 1041px) { .lx-app .cov .covmap { top: calc(3.5rem + 16px); } }

/* ---------- Farben der Startseite: Fassung B „Kategorie-Farben“ (Entwurf design/startseite-farbe/, Marco 07.11.2026) ----------
   Nur die Gast-Startseite (body.lx); /airports in der App (div.lx.lx-app) und die übrigen öffentlichen Seiten bleiben wie sie sind.
   Kennzahlen als farbige Felder, Funktionskarten in der Farbe ihres Themas, je Land eine Farbe (Kartenpunkt, Filter, Kachel),
   Knöpfe Indigo, Abschlussband dunkles Indigo. Schilder und Board unverändert. */
body.lx { --btn: oklch(0.45 0.14 265); --on-btn: #ffffff; }
[data-theme="planescope-dark"] body.lx { --btn: oklch(0.74 0.12 265); --on-btn: #0d1020; }
body.lx .tbx-btn.primary { background: var(--btn); color: var(--on-btn); }
/* Kennzahlen als farbige Felder: Bewegungen blau, Specials Livery-Orange, Militär grün, Flughäfen petrol */
body.lx .stats { border-bottom: 0; gap: 14px; }
body.lx .stats div { padding: 20px 22px; border-radius: 14px; background: oklch(var(--t-l) var(--t-c) var(--h)); }
body.lx .stats div b { color: oklch(var(--i-l) var(--i-c) var(--h)); }
body.lx .stats div span { color: oklch(var(--i-l) calc(var(--i-c) * .7) var(--h)); }
body.lx .stats div:nth-child(1) { --h: 250; } body.lx .stats div:nth-child(2) { --h: 45; }
body.lx .stats div:nth-child(3) { --h: 125; } body.lx .stats div:nth-child(4) { --h: 190; }
/* Funktionskarten in der Farbe ihres Themas (oben ein satter Streifen, Fläche leicht getönt) */
body.lx .fcard { --h: 250; background: color-mix(in oklab, oklch(var(--t-l) var(--t-c) var(--h)) 38%, var(--card));
  border-color: color-mix(in oklab, oklch(var(--t-l) var(--t-c) var(--h)) 80%, var(--line)); box-shadow: inset 0 4px 0 oklch(0.66 0.13 var(--h)); }
body.lx .fcard h3 { color: oklch(var(--i-l) var(--i-c) var(--h)); }
body.lx .fcard[aria-labelledby="ft-sp"] { --h: 45; } body.lx .fcard[aria-labelledby="ft-rw"] { --h: 160; }
body.lx .fcard[aria-labelledby="ft-mil"] { --h: 125; } body.lx .fcard[aria-labelledby="ft-em"] { --h: 25; }
body.lx .fcard[aria-labelledby="ft-al"] { --h: 250; }
/* Länder: Punkt auf der Karte, Filter und Kachel in derselben Farbe */
body.lx [data-c="DE"] { --ch: 250; } body.lx [data-c="AT"] { --ch: 20; } body.lx [data-c="CH"] { --ch: 345; }
body.lx [data-c="BE"] { --ch: 80; } body.lx [data-c="LU"] { --ch: 190; } body.lx [data-c="NL"] { --ch: 50; }
body.lx [data-c="FR"] { --ch: 295; }
body.lx .cm-a .cm-d { fill: oklch(0.58 0.15 var(--ch, 250)); }
[data-theme="planescope-dark"] body.lx .cm-a .cm-d { fill: oklch(0.74 0.13 var(--ch, 250)); }
body.lx .cm-a:hover .cm-h, body.lx .cm-a.hl .cm-h { fill: color-mix(in oklab, oklch(0.6 0.15 var(--ch, 250)) 25%, transparent); stroke: oklch(0.58 0.15 var(--ch, 250)); }
body.lx .cm-leg .k-d { background: conic-gradient(oklch(0.58 0.15 250) 0 50%, oklch(0.58 0.15 20) 0 75%, oklch(0.58 0.15 345) 0); }
body.lx .apf button[data-c]:not([data-c=""])::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px;
  background: oklch(0.58 0.15 var(--ch, 250)); vertical-align: 0; }
body.lx .apf button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
body.lx .apt-cc { border-color: transparent; background: oklch(var(--t-l) var(--t-c) var(--ch, 250)); color: oklch(var(--i-l) var(--i-c) var(--ch, 250)); }
body.lx .apt { box-shadow: inset 4px 0 0 oklch(0.62 0.14 var(--ch, 250)); }
body.lx .ctaband { background: oklch(0.32 0.09 270); color: #ffffff; }
body.lx .ctaband .btn.primary { background: #ffffff; color: oklch(0.32 0.09 270); border-color: #ffffff; }
body.lx .ctaband .btn:not(.primary) { color: #ffffff; border-color: rgb(255 255 255 / .4); }
body.lx .ctalist li b { color: oklch(0.86 0.09 var(--lh, 45)); }
body.lx .ctalist li:nth-child(1) { --lh: 45; } body.lx .ctalist li:nth-child(2) { --lh: 160; }
body.lx .ctalist li:nth-child(3) { --lh: 250; } body.lx .ctalist li:nth-child(4) { --lh: 300; }

/* Kachel: Länder-Streifen bleibt beim Überfahren und Hervorheben (sonst überschreibt der Schatten den Streifen) */
body.lx .apt:hover { box-shadow: inset 4px 0 0 oklch(0.62 0.14 var(--ch, 250)), 0 18px 36px -24px rgb(0 0 0 / .4); }
body.lx .apt.hl { box-shadow: inset 4px 0 0 oklch(0.62 0.14 var(--ch, 250)), 0 0 0 1px var(--fg); }