/* ================= WOW-Schicht ================= */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .55; }
body::before { width: 55vw; height: 55vw; left: -15vw; top: -20vw; background: radial-gradient(circle, #1fa7e6 0%, transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
body::after { width: 50vw; height: 50vw; right: -15vw; top: 10vh; background: radial-gradient(circle, #8a3cff 0%, transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vw, 12vh) scale(1.2); } }
@keyframes drift2 { to { transform: translate(-16vw, 20vh) scale(1.15); } }
.stars { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 72%, #cfe6ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 61%, #cfe6ff 50%, transparent 51%), radial-gradient(1px 1px at 91% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 7% 88%, #ffd9f2 50%, transparent 51%), radial-gradient(1px 1px at 69% 91%, #fff 50%, transparent 51%);
  background-size: 520px 520px; animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .35; } to { opacity: .85; } }
main > * { animation: pageIn .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } }
.brand img { animation: logoGlow 3.6s ease-in-out infinite alternate; }
@keyframes logoGlow { from { box-shadow: 0 0 10px #38c8ff66; } to { box-shadow: 0 0 22px #ff4fb0aa, 0 0 8px #38c8ff; } }

/* Hero */
.hero2 { position: relative; display: grid; gap: 22px; grid-template-columns: 1.25fr 1fr; align-items: center; margin-bottom: 8px; }
.eyebrow { display: inline-block; letter-spacing: .32em; font-size: .72rem; color: var(--cyan2); text-transform: uppercase; padding: 5px 12px; border: 1px solid #2a6f93; border-radius: 999px; background: #0a1a4a88; }
.hero2 h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.05; margin: 14px 0 12px; font-weight: 700; }
.grad { background: linear-gradient(90deg, #8fe6ff, #38c8ff 35%, #c07bff 70%, #ff4fb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rotor { display: inline-block; min-width: 4ch; transition: opacity .35s, transform .35s; }
.rotor.out { opacity: 0; transform: translateY(-10px); }
.hero2 p.lead { color: #b9c6f0; max-width: 56ch; font-size: 1.08rem; margin: 0 0 18px; }
.searchbig { display: flex; gap: 8px; background: #0a0f33cc; border: 1px solid #2a3aa0; border-radius: 16px; padding: 6px; box-shadow: 0 10px 40px #0008; transition: .2s; max-width: 640px; }
.searchbig:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px #38c8ff33, 0 10px 40px #0008; }
.searchbig input { border: 0; background: transparent; font-size: 1.15rem; padding: 12px 14px; box-shadow: none !important; }
.moods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mood { padding: 8px 14px; border-radius: 999px; background: #0d1650aa; border: 1px solid var(--line); font-size: .92rem; }
.mood[aria-pressed="true"] { background: linear-gradient(135deg, #1fa7e6, #6a35e0); border-color: transparent; box-shadow: 0 0 18px #38c8ff55; }

.cd { background: linear-gradient(160deg, #141a5acc, #0b1038cc); border: 1px solid #2f3ca8; border-radius: 20px; padding: 18px 18px 16px; text-align: center; position: relative; overflow: hidden; backdrop-filter: blur(6px); box-shadow: 0 20px 60px #0009, inset 0 0 40px #38c8ff12; }
.cd::before { content: ""; position: absolute; inset: -40% -20% auto; height: 80%; background: conic-gradient(from 180deg, #38c8ff33, #ff4fb033, #8a3cff33, #38c8ff33); filter: blur(40px); animation: spin 14s linear infinite; z-index: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.cd > * { position: relative; z-index: 1; }
.cd .lbl { letter-spacing: .25em; text-transform: uppercase; font-size: .72rem; color: var(--cyan2); }
.cd .digits { display: flex; justify-content: center; gap: 10px; margin: 12px 0 8px; }
.cd .u { min-width: 66px; padding: 10px 6px 6px; background: #060a2acc; border: 1px solid #2a3aa0; border-radius: 12px; }
.cd .u b { display: block; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; text-shadow: 0 0 18px #38c8ffaa; }
.cd .u i { font-style: normal; font-size: .62rem; letter-spacing: .15em; color: var(--muted); text-transform: uppercase; }
.cd .when { color: #dbe5ff; font-size: .95rem; margin-bottom: 10px; }
.cd.live .u b { color: #ff7aa8; text-shadow: 0 0 18px #ff4fb0; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.btn.live { background: linear-gradient(135deg, #9146ff, #ff4fb0); border-color: transparent; font-weight: 700; }

/* Weltkarte */
.mapwrap { position: relative; margin: 6px 0 18px; border-radius: 22px; overflow: hidden; border: 1px solid #2a3aa0; background: radial-gradient(ellipse at 50% 30%, #101a66 0%, #070b2e 70%); box-shadow: 0 20px 60px #0008, inset 0 0 60px #38c8ff14; }
.mapwrap .caption { position: absolute; left: 16px; bottom: 12px; z-index: 2; display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: #cfe0ff; text-shadow: 0 1px 6px #000; }
.mapwrap .caption b { color: #fff; font-size: 1.3rem; margin-right: 5px; }
.wmap { display: block; width: 100%; height: auto; }
.wmap .land { stroke: #4d8dff; stroke-width: 2.1; stroke-linecap: round; fill: none; opacity: .55; }
.wmap .arc { fill: none; stroke: url(#arcgrad); stroke-width: 1.15; opacity: .5; stroke-dasharray: 3 5; animation: flow 40s linear infinite; }
.wmap .arc:hover, .wmap .arc.sel { opacity: 1; stroke-width: 2.6; stroke-dasharray: none; filter: url(#glow); }
@keyframes flow { to { stroke-dashoffset: -400; } }
.wmap .plane { fill: #fff; filter: drop-shadow(0 0 3px #8fe6ff) drop-shadow(0 0 6px #38c8ff); pointer-events: none; }
.wmap .dot { fill: #8fe6ff; }
.wmap .hub .dot { fill: #ff4fb0; filter: drop-shadow(0 0 6px #ff4fb0); }
.wmap .pulse { fill: #ff4fb0; }
.wmap text { fill: #e6f2ff; font-size: 9px; font-weight: 700; letter-spacing: .06em; paint-order: stroke; stroke: #060a26; stroke-width: 2.6px; pointer-events: none; }

/* Abflugtafel */
.board { background: #05071c; border: 1px solid #2a3aa0; border-radius: 18px; padding: 14px 16px 10px; box-shadow: inset 0 0 40px #000, 0 10px 40px #0007; overflow: hidden; }
.board h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1rem; letter-spacing: .22em; text-transform: uppercase; color: #ffcf5a; }
.board h2 small { color: var(--muted); letter-spacing: .08em; text-transform: none; font-weight: 400; margin-left: auto; }
.brow { display: flex; align-items: center; gap: 18px; padding: 5px 0; border-top: 1px solid #12185a; font-family: Consolas, "Courier New", monospace; font-size: 1.02rem; color: #ffcf5a; white-space: nowrap; }
.brow > .fl-chars:nth-child(3) { flex: 1; }
.brow:first-of-type { border-top: 0; }
.fl-chars { display: inline-flex; gap: 2px; }
.ch { display: inline-block; min-width: .78em; text-align: center; background: linear-gradient(180deg, #151a4a 0 49%, #0b0f33 50% 100%); border-radius: 3px; padding: 0 1px; }
.ch.flip { animation: flip .5s ease both; }
@keyframes flip { 0% { transform: rotateX(90deg); opacity: .2; } 60% { transform: rotateX(-14deg); } 100% { transform: none; } }
.brow .no { color: #fff; } .brow .st { color: #5af0a5; font-size: .85rem; }
.hint { color: var(--muted); font-size: .8rem; margin: 8px 0 2px; }

/* Bordkarten */
.passes { align-items: start; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); margin-top: 16px; perspective: 2400px; }
.pass { --h: 200; --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%; position: relative; display: flex; flex-direction: column; border-radius: 20px; background: linear-gradient(180deg, hsl(var(--h) 60% 18% / .95), #0b1038 55%); border: 1px solid hsl(var(--h) 60% 40% / .55);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out, box-shadow .25s; box-shadow: 0 14px 40px #0008; overflow: hidden; }
.pass:hover { box-shadow: 0 22px 60px #000a, 0 0 34px hsl(var(--h) 90% 55% / .35); }
.pass::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--gx) var(--gy), hsl(var(--h) 100% 80% / .13), transparent 45%); pointer-events: none; }
.pass::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, hsl(var(--h) 100% 65%), var(--violet), var(--pink)); }
.pass-top { padding: 18px 20px 14px; position: relative; }
.pass-top .brandrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--h) 90% 80%); }
.pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 10px 0 2px; }
.pass-route .big { font-size: 2.7rem; line-height: 1; font-weight: 700; letter-spacing: .03em; text-shadow: 0 0 22px hsl(var(--h) 100% 60% / .5); }
.pass-route .big.to { background: linear-gradient(90deg, #fff, hsl(var(--h) 100% 78%)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.trail { position: relative; height: 26px; }
.trail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed hsl(var(--h) 80% 70% / .55); }
.trail svg { position: absolute; top: 2px; left: 0; width: 22px; height: 22px; fill: #fff; filter: drop-shadow(0 0 5px hsl(var(--h) 100% 70%)); animation: fly 3.6s linear infinite; }
@keyframes fly { from { left: 0; } to { left: calc(100% - 22px); } }
.pass-names { display: flex; justify-content: space-between; gap: 10px; color: #c7d4ff; font-size: .86rem; }
.pass-names span:last-child { text-align: right; color: #fff; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.facts div { background: #ffffff0d; border: 1px solid #ffffff14; border-radius: 10px; padding: 7px 9px; }
.facts small { display: block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--h) 60% 75%); }
.facts b { font-size: 1.02rem; }
.perf { position: relative; height: 0; border-top: 2px dashed #ffffff30; margin: 0 14px; }
.perf::before, .perf::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: #070a1e; }
.perf::before { left: -26px; } .perf::after { right: -26px; }
.pass-bot { padding: 14px 20px 16px; display: grid; gap: 10px; position: relative; }
.pass details summary { cursor: pointer; color: hsl(var(--h) 90% 80%); font-size: .86rem; list-style: none; }
.pass details summary::-webkit-details-marker { display: none; }
.pass details summary::before { content: "▸ "; } .pass details[open] summary::before { content: "▾ "; }
.pass details[open] summary { margin-bottom: 6px; }
.stub { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.stub .nr small { display: block; font-size: .62rem; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.stub .nr b { font-size: 1.35rem; letter-spacing: .06em; }
.barcode { height: 38px; width: 140px; opacity: .85; }
.barcode rect { fill: #fff; }
.wm { position: absolute; right: -6px; bottom: 40px; font-size: 7rem; font-weight: 700; line-height: 1; color: hsl(var(--h) 90% 70% / .06); pointer-events: none; letter-spacing: -.04em; }
.rv { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }
.pass.rv { transform: translateY(26px) scale(.98); }
.pass.rv.in { opacity: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out, box-shadow .25s, opacity .6s; }

/* Logbuch-Spielerei */
.rank { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.rank .badge-big { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: radial-gradient(circle at 30% 25%, #6a35e0, #1b2a8a 70%); border: 2px solid var(--cyan); box-shadow: 0 0 30px #38c8ff66, inset 0 0 20px #0006; }
.rank h2 { margin: 0; font-size: 1.6rem; }
.xp { height: 14px; background: #060a2a; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; }
.xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #38c8ff, #8a3cff, #ff4fb0); border-radius: 99px; box-shadow: 0 0 14px #ff4fb099; transition: width 1s cubic-bezier(.2, .7, .2, 1); }
.medals { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 8px; }
.medal { text-align: center; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line); background: #0a0f33; filter: grayscale(1); opacity: .5; transition: .3s; }
.medal .ic { font-size: 2rem; display: block; }
.medal b { display: block; font-size: .9rem; } .medal small { color: var(--muted); font-size: .72rem; }
.medal.on { filter: none; opacity: 1; border-color: #ffd23f88; box-shadow: 0 0 22px #ffd23f33; background: linear-gradient(180deg, #1d1a4e, #0a0f33); }

@media (max-width: 880px) { .hero2 { grid-template-columns: 1fr; } .cd .u { min-width: 58px; } .passes { grid-template-columns: 1fr; } .brow { font-size: .8rem; gap: 8px; } .brow .st, .brow > .fl-chars:nth-child(4) { display: none; } }
@media (prefers-reduced-motion: reduce) { .stars, body::before, body::after { animation: none !important; } .rv { opacity: 1; transform: none; } main > * { animation: none; } }

/* Wetter in der Bordkarte */
.wx { background: #0a0f33; border: 1px solid hsl(var(--h) 60% 40% / .5); border-radius: 10px; padding: 8px 12px; font-size: .92rem; }
.wx[hidden] { display: none; }

/* Drucken / PDF: nur die Streckenliste, hell und platzsparend */
@media print {
  body { background: #fff !important; color: #000 !important; display: block; }
  body::before, body::after, .stars, header.top, #tray, #toasts, .hero2, .mapwrap, .board, details.panel, .no-print, .skip, .actions, .barcode, .wm, .perf, .trail { display: none !important; }
  main { max-width: none; padding: 0; }
  .passes { display: block; perspective: none; margin: 0; }
  .pass { break-inside: avoid; border: 1px solid #555 !important; background: #fff !important; box-shadow: none !important; transform: none !important; margin: 0 0 10px; border-radius: 8px; }
  .pass::before, .pass::after { display: none; }
  .pass * { color: #000 !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: #000 !important; }
  .pass-top, .pass-bot { padding: 8px 12px; }
  .pass-route .big { font-size: 1.4rem; }
  .facts { grid-template-columns: repeat(3, auto); }
  .days span { border: 1px solid #888; width: 24px; }
  .days span.on { font-weight: 800; border-color: #000; }
  .rv { opacity: 1 !important; transform: none !important; }
  footer { color: #555 !important; border-top: 1px solid #ccc; }
}

/* Flughafen-Auswahl direkt unter dem Eingabefeld */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; min-width: 100%; width: max-content; max-width: min(380px, 90vw); top: calc(100% + 4px); z-index: 45; max-height: 300px; overflow: auto; margin: 0; padding: 4px; list-style: none; background: #0a0f33; border: 1px solid var(--cyan); border-radius: 12px; box-shadow: 0 14px 40px #000c, 0 0 20px #38c8ff44; }
.ac-list[hidden] { display: none; }
.ac-list li { display: grid; grid-template-columns: 3.2em 1fr; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .92rem; }
.ac-list li b { color: var(--cyan2); letter-spacing: .06em; }
.ac-list li span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-list li:hover, .ac-list li.on { background: #1b2a8a; }
.ac-list li:hover span, .ac-list li.on span { color: #fff; }