/* =========================================================
   fabian-jobst.de — gemeinsames Design
   ========================================================= */

:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #f3f5f8;
  --border: #e3e6ec;
  --text: #0e1320;
  --muted: #566074;
  --faint: #8b94a6;
  --accent: #2f6fed;
  --tap-green: #3aaa35;
  --tap-red: #e0282e;
  --good: #12a150;
  --warn: #d97706;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 20px rgba(16, 24, 40, 0.06);
  --shadow-lift: 0 4px 10px rgba(16, 24, 40, 0.08), 0 22px 44px rgba(16, 24, 40, 0.14);
  --glow-a: rgba(47, 111, 237, 0.22);
  --glow-b: rgba(58, 170, 53, 0.18);
  --glow-c: rgba(224, 40, 46, 0.12);
  --radius: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e14;
    --surface: #131823;
    --surface-2: #1a2030;
    --border: #252c3b;
    --text: #eef1f6;
    --muted: #a3acbd;
    --faint: #6f788b;
    --accent: #6b95ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.4), 0 22px 44px rgba(0, 0, 0, 0.5);
    --glow-a: rgba(107, 149, 255, 0.2);
    --glow-b: rgba(58, 170, 53, 0.14);
    --glow-c: rgba(224, 40, 46, 0.1);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* Weicher, langsam treibender Farbschleier im Hintergrund (nur transform, 15 Bilder/s reichen) */
.aurora {
  position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(32% 28% at 22% 20%, var(--glow-a), transparent 70%),
    radial-gradient(30% 26% at 78% 30%, var(--glow-b), transparent 70%),
    radial-gradient(28% 26% at 60% 82%, var(--glow-c), transparent 70%);
  animation: drift 26s steps(39) infinite alternate;
  will-change: transform;
}
@keyframes drift {
  0% { transform: translate3d(0%, 0%, 0) rotate(0deg) scale(1); }
  10% { transform: translate3d(0.059%, -0.079%, 0) rotate(0.118deg) scale(1.001); }
  20% { transform: translate3d(0.245%, -0.327%, 0) rotate(0.49deg) scale(1.0041); }
  30% { transform: translate3d(0.562%, -0.75%, 0) rotate(1.124deg) scale(1.0094); }
  40% { transform: translate3d(0.996%, -1.328%, 0) rotate(1.991deg) scale(1.0166); }
  50% { transform: translate3d(1.5%, -2%, 0) rotate(3deg) scale(1.025); }
  60% { transform: translate3d(2.004%, -2.672%, 0) rotate(4.009deg) scale(1.0334); }
  70% { transform: translate3d(2.438%, -3.25%, 0) rotate(4.876deg) scale(1.0406); }
  80% { transform: translate3d(2.755%, -3.673%, 0) rotate(5.51deg) scale(1.0459); }
  90% { transform: translate3d(2.941%, -3.921%, 0) rotate(5.882deg) scale(1.049); }
  100% { transform: translate3d(3%, -4%, 0) rotate(6deg) scale(1.05); }
}

/* ---------- Navigation (Tabs) ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
/* Unscharf erst, wenn Inhalt unter die Leiste scrollt */
.topnav.scrolled { backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.brand { font-weight: 800; letter-spacing: -0.02em; font-size: 17px; white-space: nowrap; }
.brand span { color: var(--accent); }
.tabs {
  margin-left: auto; display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none; position: relative;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--muted);
  transition: color 0.2s;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--text); }
.tab .ext { font-size: 12px; opacity: 0.6; }
.tab .short { display: none; }
.tab-indicator {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  transition: transform 0.35s var(--ease), width 0.35s var(--ease);
}

/* ---------- Einblenden beim Laden (gestaffelt) ---------- */
.reveal { opacity: 0; transform: translateY(14px); animation: rise 0.7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Startseite ---------- */
.home { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 9vh, 96px) clamp(16px, 4vw, 40px) 48px; }
.hero { margin-bottom: clamp(28px, 6vh, 56px); }
.hello { font-size: 18px; color: var(--muted); font-weight: 600; }
.hero h1 {
  font-size: clamp(44px, 8vw, 84px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 850;
  margin: 8px 0 14px;
}
/* Farbiger Lichtfleck in der Schrift: folgt der Maus, am Handy gleitet er langsam (heroGlow in site.js) */
@property --hx { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --hy { syntax: '<percentage>'; inherits: false; initial-value: 45%; }
.hero-name {
  --hx: 70%; --hy: 45%;
  background: radial-gradient(38% 150% at var(--hx) var(--hy),
    color-mix(in srgb, var(--tap-green) 65%, var(--accent)) 0%, var(--accent) 42%, var(--text) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero .lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 560px; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 220px;
  padding: 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
  --mx: 50%; --my: 50%;
}
.tile.wide { grid-column: span 2; }
.tile::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--tile-accent, var(--accent)) 16%, transparent), transparent 60%);
  transition: opacity 0.35s;
}
@media (hover: hover) {
  a.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--tile-accent, var(--accent)) 40%, var(--border)); }
  a.tile:hover::before { opacity: 1; }
  a.tile:hover .go { transform: translateX(4px); background: var(--tile-accent, var(--accent)); color: #fff; }
}
a.tile:active { transform: translateY(-2px) scale(0.995); }
a.tile:focus-visible { outline: 3px solid var(--tile-accent, var(--accent)); outline-offset: 3px; }
.tile .top { display: flex; align-items: center; gap: 12px; margin-bottom: auto; }
.tile .icon {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 22px;
  background: color-mix(in srgb, var(--tile-accent, var(--accent)) 14%, transparent);
  color: var(--tile-accent, var(--accent));
}
.tile .icon svg { width: 24px; height: 24px; fill: currentColor; }
.badge {
  margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.badge.live { color: var(--good); position: relative; isolation: isolate; }
.badge.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.live::after {
  content: ''; position: absolute; z-index: -1; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: currentColor; opacity: 0; animation: pulse 2s steps(3) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.55; }
  10% { transform: scale(1.342); opacity: 0.456; }
  20% { transform: scale(1.969); opacity: 0.283; }
  30% { transform: scale(2.443); opacity: 0.153; }
  40% { transform: scale(2.729); opacity: 0.074; }
  50% { transform: scale(2.894); opacity: 0.029; }
  60% { transform: scale(2.976); opacity: 0.007; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
.tile h2 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; margin-top: 22px; }
.tile p { color: var(--muted); font-size: 16px; margin-top: 6px; max-width: 46ch; }
.tile .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tile .stat { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tile .stat small { color: var(--muted); font-weight: 500; }
.go {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: var(--surface-2); color: var(--text);
  transition: transform 0.35s var(--ease), background 0.25s, color 0.25s;
}
.tile.placeholder { border-style: dashed; background: transparent; box-shadow: none; justify-content: center; align-items: center; text-align: center; color: var(--faint); }
.tile.placeholder h2 { margin-top: 10px; font-size: 18px; color: var(--muted); }
.tile.placeholder p { font-size: 15px; }

/* Reise-Kachel */
.tile.trip { --tile-accent: var(--tap-green); }
.trip-route { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-weight: 800; font-size: 20px; letter-spacing: 0.01em; }
.trip-route .seg {
  --p: 0; position: relative; flex: 1; min-width: 40px; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--faint) 0 5px, transparent 5px 10px);
}
.trip-route .fill {
  position: absolute; inset: -1px 0; border-radius: 2px; background: var(--tap-green);
  transform-origin: left center; transform: scaleX(var(--p)); transition: transform 1.2s var(--ease);
}
.trip-route b { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.trip-route b svg { width: 100%; height: 100%; fill: currentColor; transform: rotate(90deg); }

/* Echtes Flugzeug: steht am aktuellen Punkt der Reise */
.trip-route .plane {
  left: calc(var(--p) * 100%); color: var(--tap-green); opacity: 0;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--tap-green) 45%, transparent));
  transition: left 1.2s var(--ease), opacity 0.4s;
}
.trip-route .seg.active .plane { opacity: 1; }
.trip-route .seg.active:not(.flying) .plane { animation: idle 2.4s steps(3) infinite; }
@keyframes idle {
  0% { transform: translateY(0px); }
  8.333% { transform: translateY(-0.112px); }
  16.667% { transform: translateY(-0.464px); }
  25% { transform: translateY(-1px); }
  33.333% { transform: translateY(-1.536px); }
  41.667% { transform: translateY(-1.888px); }
  50% { transform: translateY(-2px); }
  58.333% { transform: translateY(-1.888px); }
  66.667% { transform: translateY(-1.536px); }
  75% { transform: translateY(-1px); }
  83.333% { transform: translateY(-0.464px); }
  91.667% { transform: translateY(-0.112px); }
  100% { transform: translateY(0px); }
}

/* Geisterflugzeug: fliegt vor der Reise MUC → LIS → MIA als Vorschau (transform statt left) */
.trip-route .ghost { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.trip-route .ghost b { left: 0; color: var(--tap-green); }
.trip-route .ghost b::before {
  content: ''; position: absolute; right: 60%; top: 50%; height: 2px; width: 70px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tap-green) 55%, transparent));
}
.trip-route.preview #seg0 .ghost { animation: ghost-a 9s steps(12) infinite 1.2s; }
.trip-route.preview #seg1 .ghost { animation: ghost-b 9s steps(12) infinite 1.2s; }
@keyframes ghost-a {
  0% { transform: translateX(0%); opacity: 0; }
  2.2222% { transform: translateX(0.995%); opacity: 0.25; }
  4.4444% { transform: translateX(4.09%); opacity: 0.5; }
  6.6667% { transform: translateX(9.411%); opacity: 0.5; }
  8.8889% { transform: translateX(16.97%); opacity: 0.5; }
  11.1111% { transform: translateX(26.594%); opacity: 0.5; }
  13.3333% { transform: translateX(37.843%); opacity: 0.5; }
  15.5556% { transform: translateX(50%); opacity: 0.5; }
  17.7778% { transform: translateX(62.157%); opacity: 0.5; }
  20% { transform: translateX(73.406%); opacity: 0.5; }
  22.2222% { transform: translateX(83.03%); opacity: 0.5; }
  24.4444% { transform: translateX(90.589%); opacity: 0.5; }
  26.6667% { transform: translateX(95.91%); opacity: 0.5; }
  28.8889% { transform: translateX(99.005%); opacity: 0.5; }
  31.1111% { transform: translateX(100%); opacity: 0.5; }
  33.3333% { transform: translateX(100%); opacity: 0.25; }
  35.5556% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes ghost-b {
  0% { transform: translateX(0%); opacity: 0; }
  37.7778% { transform: translateX(0%); opacity: 0; }
  40% { transform: translateX(0.598%); opacity: 0.25; }
  42.2222% { transform: translateX(2.445%); opacity: 0.5; }
  44.4444% { transform: translateX(5.613%); opacity: 0.5; }
  46.6667% { transform: translateX(10.142%); opacity: 0.5; }
  48.8889% { transform: translateX(16.023%); opacity: 0.5; }
  51.1111% { transform: translateX(23.177%); opacity: 0.5; }
  53.3333% { transform: translateX(31.429%); opacity: 0.5; }
  55.5556% { transform: translateX(40.496%); opacity: 0.5; }
  57.7778% { transform: translateX(50%); opacity: 0.5; }
  60% { transform: translateX(59.504%); opacity: 0.5; }
  62.2222% { transform: translateX(68.571%); opacity: 0.5; }
  64.4444% { transform: translateX(76.823%); opacity: 0.5; }
  66.6667% { transform: translateX(83.977%); opacity: 0.5; }
  68.8889% { transform: translateX(89.858%); opacity: 0.5; }
  71.1111% { transform: translateX(94.387%); opacity: 0.5; }
  73.3333% { transform: translateX(97.555%); opacity: 0.5; }
  75.5556% { transform: translateX(99.402%); opacity: 0.5; }
  77.7778% { transform: translateX(100%); opacity: 0.5; }
  80% { transform: translateX(100%); opacity: 0.25; }
  82.2222% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: 8px 12px; height: 54px;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}
.logo-chip img { height: 38px; width: auto; }

.site-foot { max-width: 1080px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 36px; color: var(--faint); font-size: 14px; }

@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile.wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .topnav { gap: 10px; }
  .brand { font-size: 15px; }
  .tab { padding: 7px 11px; }
  .tab .long { display: none; }
  .tab .short { display: inline; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}