/* ==================================================================
 * Flight26 — das zweite, ruhige Design der Websites
 * (Anzeige „Klassisch", Markenname Flight26; Code-ID flight26).
 *
 * Aktiv, wenn das Boot-Skript (shared/boot.mjs) html[data-design='flight26']
 * gesetzt hat. Ohne das Attribut ist diese Datei wirkungslos — das heutige
 * Design (Code-ID cockpit, Anzeige „Spielerisch") bleibt pixelgleich.
 *
 * Verbraucher (nach theme.css eingebunden):
 *   • website-home/src/index.css, website/src/index.css (@import)
 *   • /themen/ + Docroot-Seiten über staticAssetsHtml() in site-header.mjs
 *
 * Aufbau:
 *   1. Rohe Tokens --f26-*  (Werte = FLIGHT26_SPEC §1.2, kontrastgeprüft)
 *      hell auf :root, dunkel bei data-theme='dark' und in .dark-scope,
 *      dazu erhöhter Kontrast, reduzierte Transparenz, Glas-Fallback.
 *      Sie gelten IMMER (auch im Cockpit), damit die Design-Auswahl eine
 *      Flight26-Miniatur zeichnen kann; .f26-light/.f26-dark erzwingen eine Seite.
 *   2. Umbiegen der vorhandenen Seiten-Variablen (theme.css) — das färbt
 *      jede Seite um, ohne eine Komponente anzufassen (Web-Pendant zu den
 *      synthetischen ThemeTokens der Apps).
 *   3. Typografie, Radius, Schatten, Zier-Bewegung: ruhig.
 *   4. Brücke für den Web-Trainer (.trainer-f26).
 *
 * Spezifität (geprüft): html[data-design] (0,1,1) steht NACH theme.css und
 * schlägt darum html[data-theme='dark'] (0,1,1); Zonen- und Gold-Regeln
 * brauchen (0,2,1), um .dark-scope / .bg-gold (0,1,0) zu schlagen. Diese
 * Datei steht VOR den Tailwind-Utilities und den Regeln in index.css — alles,
 * was dort mit gleicher Spezifität kommt, gewinnt. Deshalb tragen die
 * Rücksetz-Regeln hier immer das html[data-design]-Präfix.
 * ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Rohe Tokens                                                      */
/* ------------------------------------------------------------------ */
:root,
.f26-light {
  --f26-canvas-top: #e6eff8;
  --f26-canvas-mid: #eef3f8;
  --f26-canvas-bottom: #f5f7fa;
  --f26-canvas-stop: 40%;
  --f26-canvas-flat: #f2f4f7;
  --f26-surface: #ffffff;
  --f26-surface2: #f3f5f8;
  --f26-fill-quiet: rgba(11, 20, 32, 0.06);
  --f26-text: #0b1420;
  --f26-text-secondary: #46525f;
  --f26-text-tertiary: #5f6a77;
  --f26-text-disabled: #8a94a0;
  --f26-separator: rgba(11, 20, 32, 0.1);
  --f26-separator-strong: rgba(11, 20, 32, 0.18);
  /* Kontur um Karten/Zeilen/Chips — nur bei erhöhtem Kontrast sichtbar. */
  --f26-outline: transparent;
  --f26-accent: #0b63d6;
  --f26-accent-text: #0b57ba;
  --f26-accent-tint: rgba(11, 99, 214, 0.1);
  --f26-on-accent: #ffffff;
  --f26-focus-ring: #0b63d6;
  --f26-correct: #1e8449;
  --f26-correct-text: #17703c;
  --f26-correct-tint: rgba(30, 132, 73, 0.12);
  --f26-wrong: #c92c36;
  --f26-wrong-text: #a81f2a;
  --f26-wrong-tint: rgba(201, 44, 54, 0.1);
  --f26-caution: #a85a00;
  --f26-caution-text: #9a5200;
  --f26-on-state: #ffffff;
  /* Glas nur für die Funktionsebene (Kopfzeile, Aktionsleiste, Banner, Toast).
     Text auf Glas: primär, sekundär oder accent-text — nie tertiär. */
  --f26-glass: rgba(255, 255, 255, 0.85);
  --f26-glass-solid: rgba(255, 255, 255, 0.94);
  --f26-glass-filter: blur(24px) saturate(180%);
  --f26-rim-inner: rgba(255, 255, 255, 0.6);
  --f26-rim-outer: rgba(11, 20, 32, 0.08);
  --f26-shadow-float: 0 6px 20px rgba(11, 20, 32, 0.1);
  --f26-media-dim: rgba(0, 0, 0, 0.55);

  /* Fach-Kacheln (einziger Ort für Fachfarben; weiße Glyphe ≥ 4,72:1).
     Gleich in hell und dunkel. */
  --f26-subj-met: #3a6ac8;
  --f26-subj-nav: #0e7490;
  --f26-subj-pof: #c0392f;
  --f26-subj-law: #8a4ac8;
  --f26-subj-com: #b35c00;
  --f26-subj-hpl: #b5307a;
  --f26-subj-agk: #4a6a8a;
  --f26-subj-fpp: #5a5ac8;
  --f26-subj-ops: #1e7a5e;

  /* Radien (konzentrisch: innen = außen − Abstand) */
  --f26-r-xs: 6px;
  --f26-r-m: 16px;
  --f26-r-l: 24px;
  --f26-r-xl: 32px;
  --f26-r-sheet: 28px;

  /* Bewegung: ruhig, kein Federn, kein Überschwingen */
  --f26-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --f26-dur-fast: 120ms;
  --f26-dur-base: 220ms;

  /* Systemschrift: SF Pro auf Apple, Segoe auf Windows, Roboto auf Android. */
  --f26-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

html[data-theme='dark'],
.f26-dark,
.dark-scope {
  --f26-canvas-top: #0e1726;
  --f26-canvas-mid: #0a111c;
  --f26-canvas-bottom: #05070b;
  --f26-canvas-stop: 45%;
  --f26-canvas-flat: #07090d;
  --f26-surface: #161b24;
  --f26-surface2: #1e2430;
  --f26-fill-quiet: rgba(242, 245, 248, 0.1);
  --f26-text: #f2f5f8;
  --f26-text-secondary: #a9b3bf;
  --f26-text-tertiary: #8f9aa8;
  --f26-text-disabled: #5e6773;
  --f26-separator: rgba(242, 245, 248, 0.12);
  --f26-separator-strong: rgba(242, 245, 248, 0.22);
  --f26-accent: #2468e0;
  --f26-accent-text: #6cb0ff;
  --f26-accent-tint: rgba(108, 176, 255, 0.16);
  --f26-on-accent: #ffffff;
  --f26-focus-ring: #4d94ff;
  --f26-correct: #3dd07a;
  --f26-correct-text: #5bd98e;
  --f26-correct-tint: rgba(61, 208, 122, 0.16);
  --f26-wrong: #ff6b70;
  --f26-wrong-text: #ff8a8e;
  --f26-wrong-tint: rgba(255, 107, 112, 0.16);
  --f26-caution: #ffb340;
  --f26-caution-text: #ffb84d;
  /* Dunkel kippt die Schrift auf hellen Zustandsflächen (Kontrast ≥ 6,95). */
  --f26-on-state: #0b0f14;
  --f26-glass: rgba(22, 27, 36, 0.85);
  --f26-glass-solid: rgba(22, 27, 36, 0.94);
  --f26-rim-inner: rgba(255, 255, 255, 0.14);
  --f26-rim-outer: transparent;
  --f26-shadow-float: 0 6px 24px rgba(0, 0, 0, 0.4);
}
/* Erhöhter Kontrast (LightHC / DarkHC): flache Leinwand, deckendes Glas,
   1-px-Kontur um Karten, Zeilen und Chips. */
@media (prefers-contrast: more) {
  :root,
  .f26-light {
    --f26-text-secondary: #333d48;
    --f26-text-tertiary: #4a5563;
    --f26-separator: rgba(11, 20, 32, 0.24);
    --f26-outline: #7f8996;
    --f26-accent: #0a55b8;
    --f26-accent-text: #0a4fa8;
    --f26-focus-ring: #0a55b8;
    --f26-glass: var(--f26-surface);
    --f26-glass-solid: var(--f26-surface);
    --f26-glass-filter: none;
  }
  html[data-theme='dark'],
  .f26-dark,
  .dark-scope {
    --f26-text-secondary: #c5cdd6;
    --f26-text-tertiary: #a9b3bf;
    --f26-separator: rgba(242, 245, 248, 0.24);
    --f26-outline: #7d8796;
    --f26-accent-text: #8cc2ff;
    --f26-glass: var(--f26-surface);
    --f26-glass-solid: var(--f26-surface);
    --f26-glass-filter: none;
  }
}

/* Transparenz reduzieren (Chromium) → Glas deckend. */
@media (prefers-reduced-transparency: reduce) {
  :root,
  .f26-light,
  html[data-theme='dark'],
  .f26-dark,
  .dark-scope {
    --f26-glass: var(--f26-surface);
    --f26-glass-solid: var(--f26-surface);
    --f26-glass-filter: none;
  }
}

/* Ohne backdrop-filter kein Weichzeichner: 94 % statt 85 % Deckkraft, sonst
   kippt sekundärer Text über dunklem Inhalt unter 4,5:1 (Spec §1.2). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  .f26-light,
  html[data-theme='dark'],
  .f26-dark,
  .dark-scope {
    --f26-glass: var(--f26-glass-solid);
    --f26-glass-filter: none;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Seiten-Variablen umbiegen                                        */
/* ------------------------------------------------------------------ */
/* Am <html> und erneut in jeder .dark-scope-Zone: eine Custom Property wird
   am deklarierenden Element aufgelöst — die Zonen (Hero-Video, Instrumente,
   Anzeigetafel, Fußzeile) brauchen die Zuordnung darum noch einmal, dann mit
   den dunklen Rohwerten (sie stehen auf dunklen Bildern). */
html[data-design='flight26'],
html[data-design='flight26'] .dark-scope {
  --c-night: var(--f26-canvas-mid);
  /* Karten deckend (Inhalt ist nie Glas, Spec D5). */
  --c-panel: var(--f26-surface);
  --c-panel2: var(--f26-surface2);
  --c-bone: var(--f26-text);
  --c-dim: var(--f26-text-secondary);
  --c-signalhi: var(--f26-wrong-text);
  --c-glass: var(--f26-glass);
  --c-line: var(--f26-separator);
  --c-linehi: var(--f26-separator-strong);
  /* Rot nur noch für Fehler/Löschen; Gold-Flächen (CTAs, hervorgehobener
     Tarif) werden der eine Akzent „Flight Blue". */
  --c-signal: var(--f26-wrong);
  --c-gold: var(--f26-accent);
  --c-onGold: var(--f26-on-accent);
  --c-goldtext: var(--f26-accent-text);
  /* Alt-SPA-Aliase erneut, damit sie in den Zonen die Zonenwerte tragen. */
  --c-ink: var(--c-bone);
  --c-soft: var(--c-dim);
  --c-surface: var(--c-panel);
  --c-surface2: var(--c-panel2);
  --c-edge: var(--c-line);
  /* Ruhige Leinwand „Horizon": statischer Verlauf, nie animiert. */
  --body-bg-img: linear-gradient(
    180deg,
    var(--f26-canvas-top) 0%,
    var(--f26-canvas-mid) var(--f26-canvas-stop),
    var(--f26-canvas-bottom) 100%
  );
  --body-bg-attach: fixed;
}

html[data-design='flight26'] {
  color-scheme: light;
  /* Systemschrift statt Anton/Space Grotesk/Plex — die Wortmarke behält
     --font-brand (Anton). */
  --font-display: var(--f26-font);
  --font-sans: var(--f26-font);
  --font-mono: var(--f26-font);
  --r-card: var(--f26-r-l);
  /* Inhalt wirft keine Schatten und leuchtet nicht (Spec §1.9). '0 0 #0000'
     statt 'none', damit Tailwinds Ring+Schatten-Liste gültig bleibt. */
  --sh-glow: 0 0 #0000;
  --sh-goldglow: 0 0 #0000;
  --sh-deep: 0 0 #0000;
  --sh-card: 0 0 #0000;
  --sh-card-hover: 0 0 #0000;
}
html[data-design='flight26'][data-theme='dark'] {
  color-scheme: dark;
}

/* Gold-Flächen der Alt-SPA tragen per Kaskade dunkle Schrift (index.css
   .bg-gold). Auf dem Flight26-Akzent muss sie weiß sein. */
html[data-design='flight26'] .bg-gold {
  --c-bone: var(--f26-on-accent);
  --c-dim: var(--f26-on-accent);
  --c-ink: var(--f26-on-accent);
  --c-soft: var(--f26-on-accent);
}

/* Erhöhter Kontrast oder reduzierte Transparenz: flache Leinwand. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  html[data-design='flight26'],
  html[data-design='flight26'] .dark-scope {
    --c-night: var(--f26-canvas-flat);
    --body-bg-img: none;
  }
}

/* Fokus: der Gold-Ring hätte auf Weiß nur 1,7:1 — Flight Blue trägt (≥ 4,99). */
html[data-design='flight26'] :focus-visible {
  outline-color: var(--f26-focus-ring);
}
html[data-design='flight26'] ::selection {
  background: color-mix(in srgb, var(--f26-accent) 28%, transparent);
  color: inherit;
}

/* ------------------------------------------------------------------ */
/* 3. Ruhig: Typografie, Groß-/Kleinschreibung, Zier-Bewegung          */
/* ------------------------------------------------------------------ */
/* Großbuchstaben-Überzeilen und Sperrung sind reine Zier (Spec §1.6):
   Satzschreibung, normale Laufweite. */
html[data-design='flight26'] .uppercase {
  text-transform: none;
}
html[data-design='flight26'] [class*='tracking-'] {
  letter-spacing: normal;
}
/* Display-Überschriften: Systemschrift fett statt Anton. Anton ist
   schmal — die breitere Systemschrift muss lange deutsche Komposita auf
   390 px umbrechen dürfen (Risiko R2). Aber nur, wenn ein Wort allein nicht
   in die Zeile passt: overflow-wrap:anywhere + hyphens:auto trennten auch
   Wörter, die in die nächste Zeile gepasst hätten („Theo-rie",
   „Instrumen-te"), und ließen Flex-Kinder bis auf ein Zeichen schrumpfen
   (anywhere zählt in die Mindestbreite). break-word fängt echte Überlängen
   weiter ab — geprüft DE/FI/HU auf 390 px, auch im Web-Trainer. */
html[data-design='flight26'] .font-display {
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Anzeige-Typo in Tabellenköpfen nie mitten im Wort trennen („SoloRea-dy"):
   die Spalte darf stattdessen breiter werden. */
html[data-design='flight26'] th.font-display,
html[data-design='flight26'] th .font-display {
  overflow-wrap: normal;
}
/* Jede Zahl tabellarisch (Spec §1.6). */
html[data-design='flight26'] .font-mono,
html[data-design='flight26'] .tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Keine Zier-Bewegung: dieselbe Liste wie die prefers-reduced-motion-Blöcke
   in website-home/src/index.css und website/src/index.css. Framer-Motion-
   Zier schaltet useCalmMotion() (shared/useDesign.ts) ab. */
html[data-design='flight26'] .rbf-sway,
html[data-design='flight26'] .flap-in,
html[data-design='flight26'] .kenburns,
html[data-design='flight26'] .needle-wander,
html[data-design='flight26'] .ticker-track,
html[data-design='flight26'] .cta-pulse,
html[data-design='flight26'] .plane-drift,
html[data-design='flight26'] .phone-float,
html[data-design='flight26'] .av-drift,
html[data-design='flight26'] .av-bob {
  animation: none;
}
html[data-design='flight26'] .ticker {
  overflow-x: auto;
}
html[data-design='flight26'] .av-drift {
  transform: translateX(45vw);
}
html[data-design='flight26'] .av-burst span {
  animation: none;
  opacity: 0;
}
html[data-design='flight26'] .btn-gold-shine .shine-label {
  animation: none;
  background-position: 50% 0;
}
html[data-design='flight26'] .btn-gold-shine::after {
  animation: none;
  opacity: 0;
}
/* Leuchtschrift aus. (0,2,2) schlägt die dunklen .glim-white-Regeln in
   website-home/src/index.css, die NACH dieser Datei stehen. */
html[data-design='flight26'] body .board-glow,
html[data-design='flight26'] body .glim-white,
html[data-design='flight26'] body .glim-gold {
  text-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 4. Web-Trainer-Brücke                                               */
/* ------------------------------------------------------------------ */
/* Der Trainer hat eigene Variablen (TrainerFrame setzt sie inline je
   Farbthema). Der Flight26-Rahmen setzt KEINE Inline-Variablen, sondern
   diese Klasse — dann färben sich auch die nicht geforkten Kinder
   (Kommentare, Geräte-Sperre, Gast-Hinweis, Login-Karte) um und folgen
   hell/dunkel automatisch. Das synchronisierte Farbthema bleibt unberührt. */
.trainer-f26 {
  --text: var(--f26-text);
  --soft: var(--f26-text-secondary);
  --card-bg: var(--f26-surface);
  --card-border: var(--f26-separator);
  --card-border-strong: var(--f26-separator-strong);
  --accent: var(--f26-accent);
  --on-accent: var(--f26-on-accent);
  --accent-soft: var(--f26-accent-tint);
  --correct: var(--f26-correct);
  --correct-soft: var(--f26-correct-tint);
  --wrong: var(--f26-wrong);
  --wrong-soft: var(--f26-wrong-tint);
  --warning: var(--f26-caution);
  --sky-1: var(--f26-canvas-top);
  --sky-2: var(--f26-canvas-mid);
  --sky-3: var(--f26-canvas-bottom);
}