/* Die Token-Ebene der Landing — Schriften, Farben, Masse, Modul-Umschaltung.
   AUS index.html HERAUSGELOEST am 19.08.2026, unveraendert.

   Der Grund ist eine zweite Seite: `/flotten` ist die B2B-Landing und braucht
   dieselben Tokens. Sie zu kopieren waere die Bauart, die dieses Repo an
   genau dieser Stelle schon einmal bezahlt hat — zwei Fassungen derselben
   Farbleiter driften nicht langsam, sie driften an der Stelle, an der eine
   von beiden korrigiert wird (`aurora-700`, 4,09:1, gefunden am 19.08.).

   REIHENFOLGE IST TRAGEND: themes.css kommt NACH elevation.css/motion.css.
   [data-theme="…"] und :root haben dieselbe Spezifitaet — wer spaeter kommt,
   gewinnt. Diese Datei traegt die Reihenfolge in sich; wer sie einbindet,
   bindet sie als ERSTES ein. */
/* Webfonts, selbst gehostet. Alle unter der SIL Open Font License
   (Lizenztext: assets/fonts/OFL.txt) — Self-Hosting braucht keine Zusatzlizenz.
   Variable Fonts direkt aus dem google/fonts-Repo (ofl/*). Kein CDN, kein Drittanbieter-Request. */
@font-face {
  font-family: "Archivo";
  src: url("f/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("f/archivo-it.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("f/fraunces.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("f/fraunces-it.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("f/inter.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("f/jetbrains.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("f/caveat.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Loguna — Farbpalette 2026. Eigene Palette, dunkel-nativ.
   Herleitung: Abgrund (Grund), Aurora (Interaktion), Tide (Daten), Ember (Aufmerksamkeit).
   Kein Marine-Navy mehr: Navy liest brav, das Produkt ist es nicht. */
:root {
  /* Abyss — der Grund. Fast schwarz mit grünblauem Stich, nicht blau. */
  --abyss-1000: #05070a; /* Seite */
  --abyss-900: #080c11;
  --abyss-800: #0b1118; /* Fläche */
  --abyss-700: #101822; /* Karte */
  --abyss-600: #141c26; /* gehoben */
  --abyss-500: #1e2a38;
  --line-1: #1b2634; /* Haarlinie auf Grund */
  --line-2: #26333f; /* Haarlinie auf Karte */

  /* Aurora — DIE Akzentfarbe. Instrumenten-Phosphor, Nordlicht über Wasser.
     Trägt jede Interaktion: Buttons, Links, Fokus, die Welle der Marke. */
  --aurora-300: #8ff8d6;
  --aurora-400: #5cf2c0;
  --aurora-500: #2be5a8;
  --aurora-600: #12c48c;
  --aurora-700: #0a8f66;
  /*
    800 und 900 stehen NICHT in der gelieferten CI-Datei und sind gemessen
    dazugekommen — dieselben zwei Werte, die die App seit T124a fuehrt
    (`packages/ui/src/tokens/index.ts`).

    Der Anlass ist ein Befund vom 19.08.2026 und er stand hier live: Der helle
    Scope und die Knochen-Flaeche setzten `--accent: var(--aurora-700)`, und
    `#0a8f66` erreicht auf Weiss **4,09:1** — unter AA, fuer jeden Link und
    jeden Knopf im Hellmodus. Die App hatte genau das korrigiert, die Landing
    nicht: zwei Listen derselben Farben, und gedriftet ist sie an der Stelle,
    an der die erste repariert wurde.

    Gefunden hat es kein Auge, sondern der Rollentest der Modulfarben, der
    ueber alle drei Module lief und beim EIGNER rot wurde.
  */
  --aurora-800: #087a58; /* 5,34:1 auf Weiss */
  --aurora-900: #06694a; /* 6,72:1 — der Zeigefinger geht hell nach UNTEN */
  --on-aurora: #04120d;

  /* Tide — die Datenfarbe. Kurven, Serien, Scan. Nie ein Bedienelement. */
  --tide-300: #a9d4ff;
  --tide-400: #7bbeff;
  --tide-500: #3a9dff;
  --tide-600: #1f7ad6;

  /* Ember — der warme Gegenpol. Aufmerksamkeit, Überfällig, ein Highlight je Fläche. */
  --ember-300: #ffb499;
  --ember-400: #ff8a63;
  --ember-500: #ff6a3d;
  --ember-600: #e04a1e;

  /* Violet — ausschließlich Verlaufs-Atmosphäre und 4. Serie. Nie als Fläche. */
  --violet-500: #8b6cff;

  /* Ink — Text auf dunklem Grund. Kühles Weiß, kein reines #fff. */
  --ink-0: #eaf2f0;
  --ink-100: #cfdbdb;
  --ink-200: #9db0b4;
  --ink-300: #6b8088;
  --ink-400: #54666e;
  --ink-500: #3b4a52;
  --ink-1000: #05070a;

  /* Bone — die Papier-Ebene, modernisiert. Knochenweiß statt Sepia,
     kühle Tinte statt Braun. Das Erbe bleibt, die Patina geht. */
  --bone-base: #f2efe8;
  --bone-shade: #e6e1d6;
  --bone-ink: #12181c;
  --bone-ink-soft: #5e6a70;
  --bone-rule: #d5cec0;
  --bone-margin: #ff6a3d;
  --bone-hand: #123a4a;

  /* Status. Eigene Familie, getrennt von Serienfarben — eine Kurve ist kein Urteil. */
  --state-ok: #2be5a8;
  --state-due: #ffc24a;
  --state-over: #ff6a3d;
  --state-crit: #ff4d5e;
  --state-info: #3a9dff;

  /* Nacht (IHO S-52). Schwarz plus entsättigtes Rot, sonst nichts. */
  --night-ink: #000000;
  --night-surface: #0b0303;
  --night-surface-elevated: #150606;
  --night-line: #5c1f18;
  --night-primary: #f0564a;
  --night-secondary: #db5449;
  --night-tertiary: #b03a31;
  --night-bright: #ff8578;

  /* Diagramm-Serien je Theme. */
  --series-dark-1: #2be5a8;
  --series-dark-2: #3a9dff;
  --series-dark-3: #8b6cff;
  --series-dark-4: #ff8a63;
  --series-light-1: #0a8f66;
  --series-light-2: #1f7ad6;
  --series-light-3: #6248c9;
  --series-light-4: #d1521f;
  --series-hc-1: #8ff8d6;
  --series-hc-2: #ffffff;
  --series-hc-3: #a9d4ff;
  --series-hc-4: #ffb499;
  --series-night-1: #ff8578;
  --series-night-2: #d14a3f;
  --series-night-3: #a63229;
  --series-night-4: #f0564a;

  /* ── Legacy v1 (Navy/Messing). Nur damit die archivierten Flächen unter
     ui_kits/landing/ und templates/instagram-kit/ weiter rendern. Nicht mehr verwenden. ── */
  --navy-950: #071019; --navy-900: #0a1724; --navy-800: #0f2233; --navy-700: #16324a;
  --navy-600: #27506f; --navy-500: #356a8f; --line-web: #1d3448;
  --neutral-0: #ffffff; --neutral-50: #e9eef2; --neutral-100: #d3dfe8; --neutral-200: #afc0cc;
  --neutral-300: #7d93a3; --neutral-400: #63798a; --neutral-500: #455a6b; --neutral-900: #05121e;
  --brass-500: #c9a45c; --brass-400: #e2c078; --data-500: #4fb3ab; --data-400: #7fd4cc; --data-300: #a6e9e2;
  --paper-base: #f4eedf; --paper-shade: #ece3ce; --paper-ink: #2b2a24; --paper-ink-soft: #6b6552;
  --paper-rule: #cdc2a6; --paper-margin: #b0563c;
}

/* Typografie 2026 — editorial-groß, technisch präzise.
   Vier Rollen, klar getrennt:
   Archivo  → Display. Groß, eng, schwer. Trägt jede Überschrift.
   Fraunces → GENAU EIN kursives Wort je Überschrift. Die Spannung, nicht die Regel.
   Inter    → alles, was als Satz gelesen wird.
   JetBrains Mono → jede Zahl, jedes Label, jede Marke im Raster. */
:root {
  --font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-hand: "Caveat", cursive;

  /* Web — editoriale Skala. Display bricht bewusst aus. */
  --web-display: clamp(3.4rem, 9vw, 9.5rem); /* @kind font */
  --web-display-line: 0.92; /* @kind font */
  --web-display-track: -0.045em; /* @kind font */
  --web-h1: clamp(2.6rem, 5.6vw, 5rem); /* @kind font */
  --web-h1-line: 0.98; /* @kind font */
  --web-h2: clamp(2rem, 3.8vw, 3.2rem); /* @kind font */
  --web-h2-line: 1.04; /* @kind font */
  --web-h3: 1.375rem; /* @kind font */
  --web-track-tight: -0.035em; /* @kind font */
  --web-track-display: -0.045em; /* @kind font */
  --web-lead: clamp(1.05rem, 1.5vw, 1.3rem); /* @kind font */
  --web-body: 1rem; /* @kind font */
  --web-small: 0.875rem; /* @kind font */
  --web-micro: 0.75rem; /* @kind font */
  --web-body-line: 1.6; /* @kind font */

  /* Eyebrow und Index — mono, versal, weit. Das einzige gesperrte Set. */
  --eyebrow-size: 0.7rem; /* @kind font */
  --eyebrow-track: 0.24em; /* @kind font */
  --index-size: 0.75rem; /* @kind font */
  --micro-label-size: 0.68rem; /* @kind font */
  --micro-label-track: 0.16em; /* @kind font */
  --value-row-label-track: 0.08em; /* @kind font */

  /* App — die Zahl bekommt ihre eigene, sehr große Stufe. Sie IST das Produkt. */
  --text-display-number: 60px; /* @kind font */
  --text-display-number-line: 60px;
  --text-display-number-small: 34px; /* @kind font */
  --text-display-number-small-line: 38px;
  --text-title: 26px; /* @kind font */
  --text-title-line: 30px;
  --text-heading: 19px; /* @kind font */
  --text-heading-line: 25px;
  --text-body: 16px; /* @kind font */
  --text-body-line: 23px;
  --text-label: 14px; /* @kind font */
  --text-label-line: 19px;
  --text-caption: 13px; /* @kind font */
  --text-caption-line: 18px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;
}

/* Raster, Radien, Trefferflächen.
   48 px ist keine Empfehlung, sondern die Untergrenze für Einhand-Bedienung bei Seegang. */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --space-section: 72px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --control-height: 52px; /* @kind spacing */
  --touch-min: 48px;
  --touch-critical: 56px;
  --touch-navigation: 60px;

  --hairline: 1px;
  --content-max: 1280px;
  --content-gutter: 32px;
  /* Von clamp(88,11vw,168) heruntergenommen (Befund Carolin, 15.08.): Auf
     einem 1440er Schirm standen 168 px unter dem Inhalt UND 168 ueber der
     naechsten Ueberschrift — 336 px Leere zwischen zwei Saetzen, plus die
     72 px `sec-head`-Marge. Der Rhythmus soll trennen, nicht entkoppeln.

     ZWEITE Verkleinerung (Carolin, 12.09.2026): „bitte beide landing pages
     nochmal prüfen für zu viel whitespace und ungenutzte flächen; das ist
     viel zu viel noch vorhanden."

     Gemessen mit `scripts/landing-weissraum.mjs` — es sammelt, wo wirklich
     Tinte steht, verschmilzt die Baender und nennt die Luecken dazwischen.
     Bei 6.5vw ergaben 94 px unten plus 94 px oben 187 px zwischen zwei
     Saetzen; zwoelf Stellen lagen ueber 200 px, die groesste bei 391.

     Jetzt 4.4vw: 63 px je Seite, 127 px zwischen zwei Abschnitten. Das
     trennt noch — ein Abschnitt beginnt sichtbar neu —, aber es entkoppelt
     nicht mehr. Die Zahl steht hier EINMAL und regiert beide Fassungen;
     zwei Rhythmen waeren zwei Seiten. */
  --section-rhythm: clamp(40px, 4.4vw, 72px); /* @kind spacing */
  --grid-cols: 12; /* @kind other */
}

/* Tiefe entsteht dunkel-nativ: Kante + Glut, nicht Schlagschatten.
   Sonnenregel: bei Tageslicht ist ein Schatten Matsch, keine Tiefe — deshalb
   trennen Light, Hochkontrast und Nacht ausschließlich über Kanten. */
:root {
  --shadow-none: none;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-cluster: 0 40px 100px rgba(0, 0, 0, 0.65);
  --shadow-photo: 0 30px 70px rgba(0, 0, 0, 0.6);
  --shadow-bone: 0 24px 60px rgba(18, 24, 28, 0.22);

  /*
    Der Akzent als RGB-TRIPEL — und warum es das braucht.

    Ein Dutzend Stellen auf dieser Seite schreibt `rgba(43, 229, 168, .28)`
    aus, weil eine Glut, ein Ring und eine Bluete Transparenz brauchen und
    `var(--accent)` das nicht kann. Solange die Marke eine Farbe hatte, war das
    egal. Mit dem zweiten Modul ist es genau die Naht, an der ein Umschalter
    still danebengeht: `--accent` waere magenta, die Glut darunter bliebe
    gruen, und niemandem faellt auf, WELCHE der zwoelf Stellen vergessen wurde.

    Deshalb steht die Zahl einmal da und die Regeln lesen sie.
  */
  --akzent-rgb: 43, 229, 168; /* @kind other */

  /* Aurora-Glut. Nur unter dem primären Button und der aktiven Kachel. */
  --glow-accent: 0 8px 30px rgba(var(--akzent-rgb), 0.28);
  --glow-accent-hover: 0 12px 44px rgba(var(--akzent-rgb), 0.42);
  --glow-data: 0 8px 30px rgba(58, 157, 255, 0.25);

  /* Ringe statt Rahmen, wenn etwas bestätigt ist. */
  --ring-accent: 0 0 0 1px rgba(var(--akzent-rgb), 0.4);
  --ring-data: 0 0 0 1px rgba(58, 157, 255, 0.3);
  --ring-focus: 0 0 0 2px var(--background), 0 0 0 4px var(--aurora-500);

  /* Atmosphäre: weiche Blüten im Hintergrund. Immer Radial, nie linear über die ganze Seite. */
  --bloom-aurora: radial-gradient(900px 520px at 76% -12%, rgba(var(--akzent-rgb), 0.14), transparent 62%); /* @kind color */
  --bloom-tide: radial-gradient(760px 520px at 8% 108%, rgba(58, 157, 255, 0.12), transparent 58%); /* @kind color */
  --bloom-ember: radial-gradient(620px 420px at 92% 106%, rgba(255, 106, 61, 0.1), transparent 60%); /* @kind color */
  --gradient-aurora: linear-gradient(120deg, #2be5a8 0%, #3a9dff 58%, #8b6cff 100%); /* @kind color */
  --gradient-edge: linear-gradient(90deg, transparent, rgba(var(--akzent-rgb), 0.55), transparent); /* @kind color */

  /* Glas — transparente Ebenen über den Blüten. Je Theme überschrieben. */
  --glass-surface: rgba(13, 20, 29, 0.55); /* @kind color */
  --glass-strong: rgba(13, 20, 29, 0.78); /* @kind color */
  --glass-border: rgba(255, 255, 255, 0.08); /* @kind color */
  --glass-blur: 22px; /* @kind other */

  --scrim: rgba(0, 0, 0, 0.62); /* @kind color */
  --nav-blur: 18px; /* @kind other */
  --nav-background: rgba(5, 7, 10, 0.72); /* @kind color */
  --grid-line: rgba(255, 255, 255, 0.035); /* @kind color */
}

/* Bewegung. Ein Auftritt, ein Bedien-Takt, ein Laufband.
   Nichts läuft in Schleife, was Fortschritt behaupten würde (Regel 29). */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */
  --duration-control: 0.22s; /* @kind other */
  --duration-state: 0.45s; /* @kind other */
  --duration-reveal: 0.9s; /* @kind other */
  --duration-scan: 1.6s; /* @kind other */
  --duration-meter: 1.4s; /* @kind other */
  --stagger: 80ms; /* @kind other */
  --reveal-offset: 34px; /* @kind other */
  --press-scale: 0.975; /* @kind other */
  --marquee-cycle: 32s; /* @kind other */
  --bloom-cycle: 22s; /* @kind other */
  --glow-cycle: 3.2s; /* @kind other */
  --wave-cycle: 7s; /* @kind other */
  --swell-cycle: 3.4s; /* @kind other */
}

@keyframes loguna-rise { from { opacity: 0; transform: translateY(var(--reveal-offset)); } to { opacity: 1; transform: none; } }
@keyframes loguna-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes loguna-bloom { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 2%, 0) scale(1.08); } }
@keyframes loguna-glow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
/* Blättern: das ganze Buch kippt um den Bund, nicht eine einzelne Karte. */
/* Die vier Buch-Umblaetter-Animationen sind mit dem Album entfallen. */
@keyframes loguna-sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@keyframes loguna-scan { from { top: -14%; } to { top: 104%; } }
@keyframes loguna-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes loguna-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Semantische Aliase. Komponenten lesen nur diese, nie die Palette.
   Dunkel ist nicht der Nachtmodus — dunkel ist die Marke. */

:root {
  --background: var(--abyss-1000);
  --surface: var(--abyss-800);
  --surface-elevated: var(--abyss-700);
  --surface-raised: var(--abyss-600);
  --border: var(--line-1);
  --border-strong: var(--line-2);
  --text-primary: var(--ink-0);
  --text-secondary: var(--ink-200);
  --text-tertiary: var(--ink-300);
  --text-inverse: var(--ink-1000);
  --accent: var(--aurora-500);
  --accent-hover: var(--aurora-400);
  --accent-pressed: var(--aurora-600);
  --on-accent: var(--on-aurora);
  --accent-disabled: #10241d;
  --on-accent-disabled: #5d8c7c;
  --data: var(--tide-500);
  --attention: var(--ember-500);
  --status-ok-fg: var(--state-ok);
  --status-due-soon-fg: var(--state-due);
  --status-overdue-fg: var(--state-over);
  --status-critical-fg: var(--state-crit);
  --status-info-fg: var(--state-info);
  --estimate-background: #2a2313;
  --estimate-text: #ffd79a;
  --series-1: var(--series-dark-1);
  --series-2: var(--series-dark-2);
  --series-3: var(--series-dark-3);
  --series-4: var(--series-dark-4);
  --allows-shadow: 1; /* @kind other */
}

[data-theme="light"] {
  --akzent-rgb: 18, 196, 140; /* aurora-600 — auf Weiss dichter als 500 */
  --nav-background: rgba(248, 250, 249, 0.82);
  --glass-surface: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(11, 17, 24, 0.12);
  --grid-line: rgba(11, 17, 24, 0.05);
  /* Tiefe auf Weiß: weiche Schatten statt Kanten-plus-Glut. */
  --shadow-card: 0 1px 2px rgba(11, 17, 24, 0.04), 0 12px 28px rgba(11, 17, 24, 0.07);
  --shadow-panel: 0 18px 44px rgba(11, 17, 24, 0.1);
  --shadow-cluster: 0 26px 60px rgba(11, 17, 24, 0.12);
  --shadow-photo: 0 22px 50px rgba(11, 17, 24, 0.14);
  --ring-accent: 0 0 0 1px rgba(10, 143, 102, 0.35);
  --ring-data: 0 0 0 1px rgba(31, 122, 214, 0.3);
  --glow-accent: 0 10px 30px rgba(10, 143, 102, 0.22); /* @kind shadow */
  --glow-accent-hover: 0 14px 40px rgba(10, 143, 102, 0.3); /* @kind shadow */
  --background: #f4f6f5;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-raised: #eef1f0;
  --border: #d8dedd;
  --border-strong: #c2cbc9;
  --text-primary: #0b1118;
  --text-secondary: #47565c;
  --text-tertiary: #6b8088;
  --text-inverse: #ffffff;
  --accent: var(--aurora-800);
  --accent-hover: var(--aurora-900);
  --accent-pressed: #06694a;
  --on-accent: #ffffff;
  --accent-disabled: #dfe6e4;
  --on-accent-disabled: #4a5c58;
  --data: var(--tide-600);
  --attention: var(--ember-600);
  --status-ok-fg: #0a8f66;
  --status-due-soon-fg: #a9700c;
  --status-overdue-fg: #c2400f;
  --status-critical-fg: #c0273a;
  --status-info-fg: #1f7ad6;
  --estimate-background: #fdf2df;
  --estimate-text: #7a4e0b;
  --series-1: var(--series-light-1);
  --series-2: var(--series-light-2);
  --series-3: var(--series-light-3);
  --series-4: var(--series-light-4);
  --allows-shadow: 0; /* @kind other */
}

[data-theme="high-contrast"] {
  --akzent-rgb: 143, 248, 214; /* aurora-300 */
  --nav-background: rgba(0, 0, 0, 0.9);
  --glass-surface: rgba(0, 0, 0, 0.85);
  --glass-strong: #000000;
  --glass-border: #ffffff;
  --glow-accent: none; /* @kind shadow */
  --glow-accent-hover: none; /* @kind shadow */
  --background: #000000;
  --surface: #000000;
  --surface-elevated: #111111;
  --surface-raised: #1a1a1a;
  --border: #ffffff;
  --border-strong: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #e8e8e8;
  --text-tertiary: #c4c4c4;
  --text-inverse: #000000;
  --accent: var(--aurora-300);
  --accent-hover: #b6ffe8;
  --accent-pressed: var(--aurora-400);
  --on-accent: #000000;
  --accent-disabled: #0c2b22;
  --on-accent-disabled: var(--aurora-300);
  --data: var(--tide-300);
  --attention: var(--ember-300);
  --status-ok-fg: #6bffcb;
  --status-due-soon-fg: #ffd24a;
  --status-overdue-fg: #ffb499;
  --status-critical-fg: #ff7f8b;
  --status-info-fg: #a9d4ff;
  --estimate-background: #332800;
  --estimate-text: #ffd24a;
  --series-1: var(--series-hc-1);
  --series-2: var(--series-hc-2);
  --series-3: var(--series-hc-3);
  --series-4: var(--series-hc-4);
  --allows-shadow: 0; /* @kind other */
}

[data-theme="night"] {
  --akzent-rgb: 240, 86, 74; /* Nachtwache bleibt Nachtwache — S-52, kein Modul. */
  --nav-background: rgba(0, 0, 0, 0.85);
  --glass-surface: rgba(11, 3, 3, 0.7);
  --glass-strong: rgba(11, 3, 3, 0.9);
  --glass-border: rgba(240, 86, 74, 0.18);
  --grid-line: rgba(240, 86, 74, 0.05);
  --glow-accent: none; /* @kind shadow */
  --glow-accent-hover: none; /* @kind shadow */
  --background: var(--night-ink);
  --surface: var(--night-surface);
  --surface-elevated: var(--night-surface-elevated);
  --surface-raised: var(--night-surface-elevated);
  --border: var(--night-line);
  --border-strong: var(--night-tertiary);
  --text-primary: var(--night-primary);
  --text-secondary: var(--night-secondary);
  --text-tertiary: var(--night-tertiary);
  --text-inverse: var(--night-ink);
  --accent: var(--night-primary);
  --accent-hover: var(--night-bright);
  --accent-pressed: var(--night-secondary);
  --on-accent: var(--night-ink);
  --accent-disabled: #2a0d0b;
  --on-accent-disabled: var(--night-bright);
  --data: var(--night-secondary);
  --attention: var(--night-bright);
  --status-ok-fg: var(--night-secondary);
  --status-due-soon-fg: var(--night-primary);
  --status-overdue-fg: var(--night-bright);
  --status-critical-fg: var(--night-bright);
  --status-info-fg: var(--night-tertiary);
  --estimate-background: var(--night-surface-elevated);
  --estimate-text: var(--night-secondary);
  --series-1: var(--series-night-1);
  --series-2: var(--series-night-2);
  --series-3: var(--series-night-3);
  --series-4: var(--series-night-4);
  --allows-shadow: 0; /* @kind other */
}

/* Bone — Fläche, kein Theme. Bordbuch-Seiten und Druck-Export. */
[data-surface="bone"], [data-surface="paper"] {
  --background: var(--bone-base);
  --surface: #fbf9f4;
  --surface-elevated: #ffffff;
  --surface-raised: var(--bone-shade);
  --border: var(--bone-rule);
  --border-strong: #bdb5a4;
  --text-primary: var(--bone-ink);
  --text-secondary: var(--bone-ink-soft);
  --text-tertiary: #8a938f;
  --accent: var(--aurora-800);
  --on-accent: #ffffff;
  --attention: var(--bone-margin);
  --allows-shadow: 1; /* @kind other */
}

/* ======================================================================== */
/*  MODUL-FARBWELT: Charter & Flotte                                        */
/* ======================================================================== */
/*
  Drei Module, drei Farbwelten (Carolins Auftrag, 18.08.2026). Die Rechnung
  dazu steht in `packages/ui/src/tokens/module-identitaet.ts` und wird dort als
  Test gehalten — hier stehen nur die Werte, und `tests/landing-modulfarben`
  haelt beide Listen aneinander. Zwei Listen derselben Farben laufen
  auseinander, sobald eine korrigiert wird; genau das ist zwei Bildschirme
  weiter oben gerade passiert (aurora-700).

  ## Warum die AURORA-Leiter umgehaengt wird und nicht nur `--accent`

  Weil ein Umschalter, der eine Naht vergisst, schlimmer ist als keiner. Auf
  dieser Seite steht `var(--aurora-600)` in einer Hover-Regel, `var(--aurora-500)`
  in `::selection`, `var(--aurora-400)` in `.em` — drei Stellen, die kein
  `--accent` erreicht. Wer die Leiter selbst umhaengt, kann keine davon
  uebersehen. Der Name „aurora" wird dabei zur ROLLE: die Farbe, die bedient.

  Ausdruecklich NICHT umgehaengt:
  - `--state-*` (Status). Gruen heisst in jedem Modul „in Ordnung".
  - `--tide-*` / `--series-*` (Daten). Eine Kurve ist kein Bekenntnis.
  - Nachtwache. Nach IHO S-52 gibt es dort Schwarz und entsaettigtes Rot;
    ein Modul-Bekenntnis ist kein Grund, die Dunkeladaption zu opfern.

  ## Warum der Akzent Bernstein ist (Carolins Entscheid, 02.10.2026)

  „Die Flotte ist ueberall Bernstein, also Figma role/Fleet, in Web, App und
  Landing." Bis dahin stand hier Magenta (`#E8459B`), weil das Korallenrot des
  alten Ankers 7 Grad neben der Alarmfarbe lag. Bernstein `#FF8A3D` erreicht
  auf dem dunklen Grund 8,6:1; im Hellmodus traegt die Akzent-Schrift von
  Fleet (`#775105`). „Ueberfaellig" hat dafuer eine eigene Farbe bekommen
  (Magenta aus Figma), sonst saesse der Status auf jedem Knopf.
*/
[data-aud="b2b"] {
  /* Bernstein = Figma role/Fleet (Carolins Entscheid, 02.10.2026); Rechnung in module-identitaet.ts. */
  --akzent-rgb: 255, 138, 61;
  --aurora-300: #fd9653;
  --aurora-400: #fe924c;
  --aurora-500: #ff8a3d;
  --aurora-600: #ff8a3d; /* der Anker — seit 02.10.2026 derselbe Bernstein */
  --aurora-700: #6e4b06;
  --aurora-800: #775105;
  --aurora-900: #5c4009;
  --on-aurora: #070b14;

  /* Der Bogen, den Carolin genannt hat: Gelb → Orange → Rot → Pink → Lila. */
  --gradient-aurora: linear-gradient(120deg, #ffc24b 0%, #ff8a3d 24%, #d81e45 52%, #e8459b 76%, #a855f7 100%); /* @kind color */
  --bloom-aurora: radial-gradient(900px 520px at 76% -12%, rgba(255, 138, 61, 0.16), transparent 62%); /* @kind color */
  --bloom-tide: radial-gradient(760px 520px at 8% 108%, rgba(168, 85, 247, 0.13), transparent 58%); /* @kind color */
  --bloom-ember: radial-gradient(620px 420px at 92% 106%, rgba(255, 194, 75, 0.12), transparent 60%); /* @kind color */
}
/* Die Blueten sind eigene Regeln und lesen die Tokens nicht — hier nachgezogen. */
[data-aud="b2b"] .bloom .b{background:radial-gradient(closest-side,rgba(168,85,247,.15),transparent 70%)}
[data-aud="b2b"] .bloom .c{background:radial-gradient(closest-side,rgba(255,194,75,.12),transparent 70%)}

/*
  Hell: die Akzent-Schrift von Fleet (Figma Tag, 7,09:1 auf Weiss), sonst kein
  AA — Bernstein selbst erreicht auf Weiss 2,3:1.
  Zweistellige Spezifitaet, damit sie den Block darueber ueberholt.
*/
[data-theme="light"][data-aud="b2b"], [data-surface="bone"][data-aud="b2b"] {
  --akzent-rgb: 119, 81, 5;
  --accent: var(--aurora-800);
  --accent-hover: var(--aurora-900);
  --accent-pressed: #4a350b;
}
[data-theme="high-contrast"][data-aud="b2b"] {
  --akzent-rgb: 253, 150, 83;
}
/* Nachtwache: unveraendert. Begruendung oben. */
[data-theme="night"][data-aud="b2b"] {
  --akzent-rgb: 240, 86, 74;
  --gradient-aurora: none; /* @kind color */
}
[data-theme="light"][data-aud="b2b"] a:hover,
[data-surface="bone"][data-aud="b2b"] a:hover { color: var(--aurora-900); }

/* Die wenigen globalen Regeln, die die Marke wirklich besitzt. */
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--text-primary);
  line-height: var(--web-body-line);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--aurora-500); color: var(--on-aurora); }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--web-h1-line);
  letter-spacing: var(--web-track-tight);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
[data-theme="light"] a:hover, [data-surface="bone"] a:hover, [data-surface="paper"] a:hover { color: var(--aurora-900); }
.loguna-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
/* Ein kursives Fraunces-Wort je Überschrift — die Ausnahme, die die Regel trägt. */
.loguna-em { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--aurora-400); }

/* v1-Aliase (Navy/Messing-Ära). Existieren nur, damit die archivierten Flächen
   ui_kits/landing/ und ui_kits/mobile-app/ weiter rendern. Nichts Neues damit bauen. */
:root {
  --font-serif-display: var(--font-accent);
  --radius-web: 14px;
  --radius-web-lg: 22px;
  --shadow-accent: var(--glow-accent);
  --shadow-accent-hover: var(--glow-accent-hover);
  --shadow-book: var(--shadow-bone);
  --eyebrow-tracking: var(--eyebrow-track);
  --micro-label-tracking: var(--micro-label-track);
  --value-row-label-tracking: var(--value-row-label-track);
  --web-body-line-height: var(--web-body-line);
  --web-display-tracking: var(--web-track-display);
  --web-display-line-height: var(--web-display-line);
}


/* ---------------------------------------------------------------------------
   Der Bogen: planen — fahren — zeigen (AUFTRAG Landing, 20.08.2026)

   Die CSS steht HIER und nicht in `index.html`, obwohl alle anderen Abschnitte
   dort liegen. Zwei Gruende, und beide sind praktisch:

   1. Es gibt VIER `index.html` (de/en/hr/it) mit identischem `<style>`-Block.
      Ein neuer Abschnitt hiesse dieselbe Regel viermal — und beim ersten
      Nachbessern dreimal richtig.
   2. `tokens.css` wird von allen vieren als erstes eingebunden. Sie ist der
      Ort, an dem eine Regel nur einmal steht.

   Wer hier etwas aendert, aendert es fuer alle vier Sprachen zugleich. Das ist
   der Zweck.
--------------------------------------------------------------------------- */
.bogen { position: relative; }
.bogen-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) {
  /* Auf dem Telefon volle Breite, Text zuerst — das Video ist die Zugabe. */
  .bogen-raster { grid-template-columns: minmax(0, 1fr); }
}
/* Mehr Luft zwischen den Zeilen der Ueberschrift (Carolin, 21.08.2026).
   Lokal und nicht ueber `--web-h2-line`: Nur DIESE Ueberschrift bricht
   zweizeilig um, und die Variable zoege jede andere der Seite mit. */
.bogen h2 { line-height: 1.28; }
.bogen-lead {
  color: var(--text-secondary);
  font-size: var(--web-lead);
  line-height: var(--web-body-line, 1.6);
  max-width: 46ch;
  margin-top: 1.2rem;
}
.bogen-kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* DREI Zeilen — Zeichen, Ueberschrift, Text —, die sich die Kacheln per
     `subgrid` teilen. Damit beginnt der Text in allen dreien auf DERSELBEN
     Hoehe, auch wenn eine Ueberschrift zweizeilig umbricht („Unterwegs
     mitschreiben"). Vorher rutschte er dort eine Zeile tiefer, und die Reihe
     sah aus wie versehentlich gesetzt (Carolin, 21.08.2026).

     `min-height` an der Ueberschrift waere naheliegend und schlechter: Sie
     haelt bis zur ersten Uebersetzung, die drei Zeilen braucht. `subgrid`
     traegt jede Laenge. */
  grid-template-rows: auto auto auto;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(24px, 2.6vw, 38px);
}
@media (max-width: 720px) { .bogen-kacheln { grid-template-columns: minmax(0, 1fr); } }
.bogen-kachel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 20px);
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--surface-glass, rgba(255, 255, 255, 0.03));
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
/* Ohne `subgrid` faellt es auf das alte Verhalten zurueck: Die Kacheln stehen
   wie vorher, nichts bricht — der Text beginnt nur nicht ueberall gleich
   hoch. Ein Schoenheitsfehler, kein Defekt. */
@supports not (grid-template-rows: subgrid) {
  .bogen-kachel { display: block; }
}
.bogen-kachel svg { width: 26px; height: 26px; stroke: var(--accent); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; fill: none; display: block; margin-bottom: 12px; }
.bogen-kachel h3 { font-family: var(--font-display); font-size: var(--web-body); letter-spacing: -.02em;
  margin: 0 0 .35rem; color: var(--text-primary); }
.bogen-kachel p { margin: 0; color: var(--text-secondary); font-size: var(--web-small); line-height: 1.55; }
/* Der Telefonrahmen. Kein Bild eines Geraets — nur eine Kante mit Radius, wie
   ueberall im Haus. Ein fotorealistisches iPhone waere eine Fremdmarke im
   Bild. */
.bogen-rahmen {
  position: relative;
  margin: 0 auto;
  /* Breite und Verhaeltnis kommen vom VIDEO, nicht von einer Vorstellung
     davon, wie ein Telefon aussieht.

     Hier stand `9 / 19.5` — das Seitenverhaeltnis eines modernen iPhones. Das
     Video ist aber 1080 x 1920, also 9:16. `object-fit: cover` skaliert dann
     auf die Hoehe und schneidet links und rechts je rund 33 Punkte ab:
     „FOUR STOPS" wurde zu „OUR STOPS", und rechts fehlte das halbe Wort
     (Carolin am 21.08.2026, am Mac und am Telefon).

     Ich hatte die Masse vorher falsch gemessen und 686 x 1541 gemeldet — der
     Treffer lag im Datei-Kopf, nicht in der Bildspur. Jetzt aus der
     `tkhd`-Box gelesen, und `landing-pruefen.mjs` vergleicht das Verhaeltnis
     des Rahmens gegen `videoWidth/videoHeight` des geladenen Videos. Damit
     kann kein Beschnitt mehr unbemerkt entstehen.

     Breiter als vorher (340 statt 300), weil ein 9:16-Rahmen bei gleicher
     Breite deutlich niedriger baut und neben der Textspalte sonst verloren
     wirkt. */
  width: min(340px, 100%);
  aspect-ratio: 1080 / 1920;
  border-radius: 40px;
  border: 1px solid var(--border);
  background: var(--surface-2, #0a1017);
  overflow: hidden;
  /* Der Schatten TRAEGT das Geraet, statt es auf die Flaeche zu kleben: eine
     weiche Tiefe darunter und ein Schimmer der Modulfarbe ringsum. Die Farbe
     kommt aus `--accent`, damit der Rahmen zur jeweiligen Fassung gehoert und
     nicht zu einer festen. */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .5),
    0 24px 60px -12px rgba(0, 0, 0, .75),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 70px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bogen-rahmen video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der Rueckfall, wenn die Datei fehlt oder das Geraet kein Autoplay erlaubt:
   dieselben Wellen wie in der Hero-Flaeche. Eine leere schwarze Kachel saehe
   aus wie ein Ladefehler. */
.bogen-rueckfall { display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--abyss-700, #101822), var(--abyss-1000, #05070a)); }
.bogen-rueckfall svg { width: 70%; height: auto; stroke-width: 2; fill: none; }
.bogen-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  margin-top: clamp(22px, 2.4vw, 32px); }
.bogen-quiet { color: var(--text-tertiary); font-size: var(--web-small); }

/* ── Zurueck an den Anfang ────────────────────────────────────────────────
   Mitfliessend rechts unten, mit Schatten und Lucide-Pfeil. Der Verlauf liegt
   auf `--accent`/`--accent-2` und gehoert damit zur jeweiligen Fassung: Aurora
   in der Eigner-Welt, Magenta in der Flotten-Welt. Ein fest eingebautes Gruen
   waere auf der Flotten-Seite ein Bauteil aus der falschen Welt.

   Er sitzt seit dem 09.09.2026 NICHT mehr selbst `fixed`, sondern in
   `.schwebeleiste` — zusammen mit der Themen-Umschaltung, die bis dahin
   genau auf ihm lag (gemessen: 1.824–2.160 px² Ueberdeckung auf 375, 768,
   1280 und 2560 px, in beiden Themen). Der Kommentar, der hier stand, sagte
   die Umschaltung sitze „links unten"; sie sass rechts, seit es sie gibt.

   Er ist IMMER im Baum und wird nur unsichtbar geschaltet. Ein Knopf, der
   erscheint und verschwindet, verschiebt sonst bei jedem Scrollen den
   Tabulator-Weg; `tabIndex -1` und `aria-hidden` nehmen ihn stattdessen aus
   der Reihenfolge, solange er nichts tut. */
/* Die gemeinsame Leiste. Von unten gewachsen, rechtsbuendig: Der Pfeil steht
   ueber der Themen-Umschaltung und schiebt sie beim Erscheinen nicht weg —
   er ist immer im Baum und nimmt seinen Platz durchgehend ein. */
.schwebeleiste {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.schwebeleiste > * { pointer-events: auto; }

.nach-oben {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  /* `--gradient-aurora` ist der Verlauf der jeweiligen Fassung: in der
     Eigner-Welt Gruen→Blau→Violett, in der Flotten-Welt Bernstein→Rot→Magenta.
     Genau das ist Carolins „color coding" — und es steht schon da, statt dass
     ich einen zweiten Satz Farben erfinde. Der Rueckfall auf `--accent` greift
     im Hochkontrast-Modus, wo der Verlauf ausdruecklich `none` ist. */
  background: var(--gradient-aurora, var(--accent));
  background-color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(.92);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, box-shadow .28s ease;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .45),
    0 14px 34px -10px rgba(0, 0, 0, .7),
    0 0 34px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.nach-oben.an { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .45),
    0 18px 42px -10px rgba(0, 0, 0, .75),
    0 0 46px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.nach-oben:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nach-oben svg {
  width: 21px; height: 21px; fill: none;
  /* Weiss auf dem Verlauf, nicht `--on-accent`: Der Verlauf laeuft in beiden
     Fassungen durch dunkle Toene (Violett, Rot), und `--on-accent` ist in der
     Eigner-Welt fast schwarz — auf dem violetten Ende waere der Pfeil dort
     kaum zu sehen. Gemessen an den Endfarben, nicht am Token. */
  stroke: #ffffff;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* Ohne Bewegungswunsch kein Gleiten — nur da oder nicht da. */
@media (prefers-reduced-motion: reduce) {
  .nach-oben { transition: opacity .01s linear; transform: none; }
}

/* ══ Block G, 09.09.2026 ═══════════════════════════════════════════════════
   Drei neue Bauteile der Landing. Sie stehen HIER und nicht im Kopf von
   `index.html`, weil dort die Grundschicht liegt (Leiste, Knopf, Karte) und
   hier die Abschnitte — dieselbe Trennung, die `.nach-oben` schon hat. */

/* ── Geld · Zeit · Ruhe (Spec §10 Nr. 7) ─────────────────────────────────
   Die Reihe steht zwischen Hero und Laufband und bekommt deshalb NICHT den
   Abschnitts-Rhythmus: Sie gehoert optisch zum Hero, nicht zum ersten
   Kapitel. Ein voller `--section-rhythm` riss sie vom Hero ab und machte aus
   der Antwort auf „was habe ich davon" einen eigenen Abschnitt. */
.mehrwert { padding: 0 0 clamp(26px, 4vw, 50px); }
.mehrwert-titel {
  font-family: var(--font-mono); font-size: var(--web-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-tertiary); font-weight: 600;
  margin-bottom: .9rem;
}
.mehrwert-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .mehrwert-reihe { grid-template-columns: 1fr; } }
/* `.card` davor: Die Regel `.card .big` im Stilblock von index.html kommt
   nach dieser Datei und setzte 2,4 rem — diese Groesse griff nie, gemessen am
   390-px-Bild vom 10.09.2026 („1.000–2.000 €" brach vor dem Euro um). */
.card.mehrwert-kachel .big { font-size: var(--web-h3); line-height: 1.2; }
/* Die Quellenzeile ist Teil der Aussage, nicht ihre Fussnote (Regel 80) —
   deshalb monospace wie jede andere Herkunftsangabe auf dieser Seite, und
   umbruchfaehig statt abgeschnitten. */
.mehrwert-kachel .foot {
  font-family: var(--font-mono); font-size: var(--web-micro); letter-spacing: .02em;
  line-height: 1.55; padding-top: 12px;
}
.mehrwert-fuss { margin-top: 14px; color: var(--text-tertiary); font-size: var(--web-small); }
/* Die Station ueber der Zahl, und die Kachel als Weg zu ihrem Abschnitt
   (Flotten-Fassung, 10.09.2026). Kein Unterstrich, keine Linkfarbe: Die
   Kachel ist der Link, die Haarlinie beim Darueberfahren sagt es. */
.mehrwert-stufe {
  display: block; margin-top: 10px;
  font-size: var(--web-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-tertiary);
}
a.mehrwert-ziel { color: inherit; text-decoration: none; display: block; }
a.mehrwert-ziel:hover, a.mehrwert-ziel:focus-visible { border-color: var(--accent); }
.beispiel-hinweis { margin-top: 18px; }

/* ── Für Skipper (Eigner-Seite, Carolins Entscheid 23.09.2026) ─────────────
   EINE Karte mit drei Spalten, keine drei gleichen Karten (DESIGN.md §6).
   Sie erbt die Eigner-Farbwelt; die Spalten trennt eine Haarlinie, nicht
   ein Ton. Die Breite ist die des `.wrap`, wie bei jedem Abschnitt. */
.skipper-karte {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: linear-gradient(168deg, var(--surface), var(--background));
  padding: clamp(22px, 2.8vw, 36px);
}
.skipper-funktionen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.skipper-funktion { padding: 0 clamp(16px, 2.2vw, 28px); min-width: 0; }
.skipper-funktion:first-child { padding-left: 0; }
.skipper-funktion:last-child { padding-right: 0; }
.skipper-funktion + .skipper-funktion { border-left: 1px solid var(--border); }
.skipper-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 8px; }
.skipper-kopf h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--web-body); letter-spacing: -.02em;
}
.skipper-etikett {
  font-family: var(--font-mono); font-size: var(--web-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.skipper-funktion p { color: var(--text-secondary); font-size: var(--web-small); line-height: 1.55; }
.skipper-preis {
  margin-top: clamp(18px, 2.4vw, 26px); padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--border);
  color: var(--text-primary); font-size: var(--web-small); line-height: 1.55;
}
@media (max-width: 820px) {
  .skipper-funktionen { grid-template-columns: 1fr; }
  .skipper-funktion, .skipper-funktion:first-child, .skipper-funktion:last-child { padding: 0; }
  .skipper-funktion + .skipper-funktion {
    border-left: 0; border-top: 1px solid var(--border);
    margin-top: 16px; padding-top: 16px;
  }
}

/* ── Das Meilenbuch im Preisabschnitt: ein Paket NEBEN der Leiter ──────────
   Bewusst nicht `.tier` — es ist keine vierte Stufe (`pricing/skipper-log.ts`).
   Eine liegende Karte unter den drei stehenden: dieselbe Flaeche, derselbe
   Radius, aber eine andere Form, damit sie nicht als billigste Stufe
   gelesen wird. */
.paket {
  margin-top: 16px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, 1.4fr) auto;
  gap: 18px 28px; align-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius-xl); background: var(--surface);
  padding: clamp(20px, 2.4vw, 28px);
}
.paket-kopf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.paket-kopf .tier-ueber { margin-bottom: 2px; }
.paket .name { font-family: var(--font-display); font-weight: 700; font-size: var(--web-lead); letter-spacing: -.02em; }
.paket-fuer { font-size: var(--web-micro); line-height: 1.35; color: var(--text-tertiary); }
.paket .price {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--web-h3); font-weight: 600; letter-spacing: -.03em;
}
.paket .tunit { font-family: var(--font-mono); font-size: var(--web-micro); color: var(--text-tertiary); line-height: 1.45; }
.paket .tier-spare { margin: 4px 0 0; min-height: 0; }
.paket ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.paket li { display: flex; gap: .7em; font-size: var(--web-small); color: var(--text-secondary); }
.paket li::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-top: .55em;
  border-radius: 50%; background: var(--accent);
}
.paket .btn { white-space: nowrap; }
@media (max-width: 1099px) {
  .paket { grid-template-columns: minmax(0, 1fr) auto; }
  .paket ul { grid-column: 1 / -1; }
  .paket .btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
@media (max-width: 560px) {
  .paket { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Die drei Bezugsgroessen (Spec §10 Nr. 4) ──────────────────────────────
   Ueber die ganze Breite: Sie sind die NEUE Aussage der Flottenseite, und
   eine neue Aussage in einer halben Spalte neben vier bekannten liest sich
   wie eine fuenfte bekannte. */
/* Eigenes Raster, NICHT `.fl-bento`: Dessen `grid-auto-rows: 1fr` haelt die
   vier Diagramm-Kacheln gleich hoch, und dieselbe Zeile riss den kurzen
   Argument-Blaettern 377 und 450 Punkte Loch (gemessen, 09.09.2026). Zwei
   Gruppen, zwei Raster — die Blaetter sind so hoch wie ihr Inhalt. */
.fl-argumente { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 1000px) {
  .fl-argumente { grid-template-columns: repeat(2, 1fr); }
  .fl-argumente .fl-blatt-breit { grid-column: 1 / -1; }
}
.fl-blatt h3 { margin-bottom: 6px; font-size: var(--web-lead); }
.fl-blatt .big { font-family: var(--font-mono); font-size: var(--web-h3); line-height: 1.3; margin-top: .3rem; letter-spacing: -.02em; }
.fl-blatt p { color: var(--text-secondary); font-size: var(--web-small); }
.fl-blatt .fl-quelle { margin-top: auto; }
.fl-ueber {
  font-family: var(--font-mono); font-size: var(--web-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.fl-bezug-reihe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 6px 0 12px;
}
@media (max-width: 700px) { .fl-bezug-reihe { grid-template-columns: 1fr; } }
.fl-bezug-zeile {
  display: flex; flex-direction: column; gap: .2rem; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg, 14px);
  background: var(--surface);
}
.fl-bezug-wert {
  font-size: var(--web-h3); font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.fl-bezug-name { font-size: var(--web-small); color: var(--text-secondary); }

/* ---- Das Flottenblatt als Karussell (10.09.2026) ------------------------ */
/* Gemessen war der Abschnitt als Raster 3.065 px hoch (1440) und 5.598 px
   (375) — 3,4 beziehungsweise 6,9 Bildschirme. Hier steht die Fassung, die
   daraus sechs Ansichten macht; das Bauteil liegt in `karussell.js`.

   Die BAHN ist der einzige waagerechte Bildlauf dieser Seite, und sie ist
   in sich abgeschlossen: `overflow-x` liegt auf ihr, nicht auf der Seite,
   und `overscroll-behavior-x: contain` verhindert, dass ein Wisch am letzten
   Blatt zur Zurueck-Geste des Browsers wird. Ohne diese Zeile verlaesst ein
   Betrieb die Seite genau in dem Moment, in dem er sie zu Ende gelesen hat. */
.kar { display: grid; gap: 14px; }
.kar-bahn {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-xl);
}
.kar-bahn::-webkit-scrollbar { display: none; }
.kar-bahn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* `min-width: 0` ist hier keine Vorsicht, sondern Pflicht: Ein Flex-Kind
   waechst sonst mit seinem laengsten unumbrechbaren Inhalt, und die
   Quellenzeile der Protokoll-Kachel („NN 42/17 Art. 25 Abs. 1 …") ist genau
   so einer. Ohne die Zeile waere ein Blatt breiter als die Bahn, und das
   Einrasten zeigte auf eine Stelle, die es nicht gibt. */
.kar-blatt { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

/* Auf dem Telefon ist jedes Blatt so hoch wie SEIN Inhalt.

   Gemessen bei 375 px: Die Bahn ist so hoch wie ihr hoechstes Blatt (803 px)
   — das laesst sich nicht aendern, sie ist ein Flex-Behaelter. Was sich
   aendern laesst, ist, ob die Leere INNERHALB der Karte liegt oder unter ihr.
   Gestreckt zeigte die Abdeckungs-Karte 400 px Loch unter ihrer letzten
   Zeile; ungestreckt endet die Karte, wo ihr Inhalt endet, und darunter ist
   Hintergrund. Genau der Unterschied, den Carolin am 21.08. an der vierten
   Kachel benannt hat („nicht einfach nur ein leeres loch klafft"). */
/* Seit dem 13.09.2026 gilt das auf JEDER Breite — nicht nur auf dem Telefon.

   Carolin, 12.09.2026: „im eigner carousel ist davor und danach viel zu viel
   whitespace und die darstellung der abschnitte einfach nur chaotisch;
   vermutlich durch das zitat in abschnitt 3."

   Sie hatte die Ursache genau benannt. Gemessen bei 1440 px: Blatt 3 traegt
   das Zitat und ist 898 px hoch; die Bahn streckt damit ALLE Blaetter auf
   932 px, und Blatt 2 stand mit 407 px Inhalt in einer 932 px hohen Karte —
   525 px schwarzes Loch INNERHALB des Rahmens.

   Der Kommentar oben beschrieb genau diesen Unterschied und zog die Grenze
   bei 1000 px. Das war die halbe Heilung: Auf dem Telefon faellt die Leere
   aus der Karte heraus, auf dem Schirm blieb sie drin. Jetzt faellt sie
   ueberall heraus — und die Bahn selbst folgt der Hoehe des AKTIVEN Blatts
   (`karussell.js`), damit auch darunter nichts stehen bleibt. */
.kar-bahn { align-items: flex-start; }

.kar-inhalt { display: grid; gap: clamp(18px, 2.4vw, 32px); align-content: start; }
.kar-bild { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.kar-text { min-width: 0; display: flex; flex-direction: column; }

/* Im Karussell klebt die Herkunftszeile NICHT am unteren Rand.

   Im Raster war `margin-top: auto` richtig: Dort standen vier gleich hohe
   Kacheln nebeneinander, und eine Quellzeile auf halber Hoehe haette wie ein
   abgeschnittener Text ausgesehen. Hier hat jedes Blatt eine eigene Flaeche,
   und dieselbe Zeile riss 201 px zwischen Fussnote und Herkunft auf
   (gemessen an `#fl-abdeckung`, 1440 px). Die Luft gehoert unter den Text,
   nicht mitten hinein. */
/* Dasselbe gilt fuer die Fussnote: `.card .foot` traegt `margin-top: auto`
   (index.html), und in der Textspalte der Abdeckung riss das 139 px zwischen
   der grossen Zahl und dem Satz darunter. Beide Zeilen gehoeren an ihren
   Text, nicht an den Kartenrand. */
.kar-text .fl-quelle { margin-top: 18px; }
.kar .kar-text .foot { margin-top: 14px; }
/* Drei Klassen und nicht zwei: `.card .foot { margin-top: auto }` steht im
   `<style>`-Block von `index.html`, also NACH dieser Datei und mit derselben
   Spezifitaet — bei Gleichstand gewinnt die Reihenfolge. Mit zwei Klassen
   aenderte sich nichts, und es sah aus, als greife die Regel nicht. Genau der
   Fall, den der Kommentar an `.card.fl-karte .big` schon einmal beschreibt:
   „Beide Male sah es aus wie ‚die Regel greift nicht', und beide Male griff
   die andere." */

/* Ab 1000 px steht das Bild NEBEN seinem Text und nicht darueber.

   Das ist der eigentliche Hebel gegen die Hoehe, und er ist gemessen: Die
   Deckungsbeitrags-Tabelle war 729 px hoch, weil sie in einer 600 px breiten
   Spalte stand. Ueber die volle Breite steht dieselbe Tabelle neben ihrem
   Text. `min-height` haelt die sechs Blaetter gleich hoch, damit die Leiste
   darunter beim Blaettern nicht springt — eine feste Zahl und nicht `1fr`:
   `1fr` verteilt die Hoehe der HOECHSTEN auf alle, und genau daran hingen
   die 148 px Luft in jeder Trichter-Zeile. */
@media (min-width: 1000px) {
  /* `stretch` und nicht `center`: Die Spalten sollen die Hoehe des Blattes
     FUELLEN, nicht in ihr sitzen. Zentriert wird innerhalb der Spalte
     (`.kar-bild { justify-content: center }`) — das ist derselbe Anblick fuer
     einen Ring und ein anderer fuer drei Kaesten, die sich strecken koennen. */
  .kar-inhalt {
    grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr;
    align-items: stretch; align-content: stretch; flex: 1;
  }
  /* `height: 100%` ist weg (13.09.2026): Es war die zweite Haelfte der
     Streckung — ohne sie endet die Karte, wo ihr Inhalt endet. Die
     Mindesthoehe bleibt, damit ein sehr kurzes Blatt nicht als Streifen
     dasteht — aber bei 300 statt 424 px. Gemessen auf der Flotten-Seite:
     Zwei Blaetter tragen 266 px Inhalt und standen mit 158 px Leere in einer
     424 px hohen Karte. Eine Mindesthoehe soll einen Streifen verhindern,
     nicht ein Loch erzeugen. */
  .kar-blatt > .card { min-height: 300px; }
  /* Ohne Bild keine Bildspalte — das Blatt ist eine Spalte (Kapitel der Eigner-Seite). */
  .kar-inhalt.kar-inhalt-voll { grid-template-columns: 1fr; }
}

/* Das sechste Blatt traegt zwei Karten statt Bild und Text. Der Rahmen faellt
   weg — zwei Karten in einer dritten sind drei Raender uebereinander. */
.kar-blatt > .fl-blatt-paar {
  background: none; border: 0; padding: 0; overflow: visible;
}
.kar-blatt > .fl-blatt-paar > .kar-inhalt { gap: 16px; }
.kar-blatt > .fl-blatt-paar .kar-bild,
.kar-blatt > .fl-blatt-paar .kar-text { display: block; }
.kar-blatt > .fl-blatt-paar .card { height: 100%; }
@media (min-width: 1000px) {
  .kar-blatt > .fl-blatt-paar > .kar-inhalt {
    grid-template-columns: 1fr 1fr; align-items: stretch;
  }
}


/* Die drei Bezugsgroessen STEHEN in der Karussell-Spalte, sie schweben nicht
   darin. Nebeneinander (`repeat(3, 1fr)`) sind sie 110 px hoch in einer
   424 px hohen Karte — gemessen am ersten Bild, 150 px Luft oben und unten.
   Untereinander fuellen dieselben drei Kaesten dieselbe Spalte, und der Wert
   steht links, seine Bezeichnung rechts: eine kleine Tabelle statt drei
   Kacheln. Das ist derselbe Fehler wie der Ring, den Carolin am 21.08. an der
   vierten Kachel benannt hat, nur eine Spalte weiter. */
@media (min-width: 1000px) {
  .kar-bild .fl-bezug-reihe {
    grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 12px; margin: 0;
    height: 100%;
  }
  .kar-bild .fl-bezug-zeile {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 16px; padding-block: clamp(14px, 1.6vw, 22px);
  }
  .kar-bild .fl-bezug-name { text-align: right; }
}

/* Zurueck ganz links, weiter ganz rechts, die Punkte in der Mitte. Der
   Zaehler steht daneben und nicht statt der Punkte: Die Punkte sagen, WIE
   VIELE noch kommen, der Zaehler sagt es noch einmal in Zahlen — fuer den
   Vorleser ist die zweite Form die einzige, die ankommt. */
/* 12 px waren zu wenig (Carolin, 13.09.2026: „die zwei pfeile haengen
   ineinander"). Der Fokusring des Pfeils traegt 2 px Breite und 2 px Abstand,
   also frisst er von jeder Seite 4 px — bei 12 px Luecke stehen Ring und
   Zaehler dann 4 px auseinander und lesen sich als ein Element. 18 px, und
   der Zaehler bekommt eigene Breite, damit er beim Wechsel von „1 / 3" auf
   „2 / 3" nicht springt. */
.kar-leiste { display: flex; align-items: center; gap: 18px; }
.kar-stand { min-inline-size: 5ch; text-align: right; }
.kar-pfeil {
  inline-size: 40px; block-size: 40px; flex: none; padding: 0;
  border: 1px solid var(--glass-border); border-radius: 999px;
  background: var(--glass-surface); color: var(--text-primary);
  font-size: var(--web-body); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-control) var(--ease-out-expo),
              color var(--duration-control) var(--ease-out-expo);
}
.kar-pfeil:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.kar-pfeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kar-pfeil:disabled { opacity: .38; cursor: default; }

/* Der Punkt ist 8 px gross, sein Knopf 28 x 28 — die Trefferflaeche ist das
   Bedienelement, nicht das Bild darin (DESIGN.md §2.3: >= 24 x 24 px im Web). */
.kar-punkte { display: flex; gap: 2px; margin-inline: auto; }
.kar-punkt {
  inline-size: 28px; block-size: 28px; padding: 0; border: 0; background: none;
  border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.kar-punkt:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.kar-punkt-kern {
  inline-size: 8px; block-size: 8px; border-radius: 999px;
  background: var(--glass-border);
  transition: inline-size var(--duration-control) var(--ease-out-expo),
              background var(--duration-control) var(--ease-out-expo);
}
.kar-punkt:hover .kar-punkt-kern { background: var(--text-tertiary); }
.kar-punkt.ist .kar-punkt-kern { inline-size: 22px; background: var(--accent); }
.kar-stand { font-size: var(--web-micro); color: var(--text-tertiary); flex: none; }

/* Anzeige == Wert (Regel 29), auch am Karussell selbst: Die Breite ist
   (Blatt + 1) / Anzahl, und `data-anteil` daneben ist die Zahl, gegen die
   `scripts/landing-pruefen.mjs` sie haelt. */
.kar-schiene {
  block-size: 3px; border-radius: 999px;
  background: var(--glass-border); overflow: hidden;
}
.kar-fortschritt {
  block-size: 100%; border-radius: 999px; background: var(--accent);
  transition: width var(--duration-state) var(--ease-out-expo);
}

/* Nur der Bildlauf. Die Uebergaenge oben braucht hier NIEMAND abzuschalten:
   Die Grundschicht dieser Datei setzt unter `prefers-reduced-motion` bereits
   `transition-duration: 0.001ms !important` auf alles. Eine zweite Zeile
   daneben sieht aus wie eine Zusicherung und ist eine Wiederholung — sie
   koennte nie rot werden, weil die erste ohnehin gewinnt.
   Gemessen: `.kar-fortschritt` meldet unter `reduce` 1e-06s, mit und ohne
   diesen Block. Das Springen statt Gleiten macht ohnehin `sanft()` in
   `karussell.js`; die Zeile hier faengt den Fall ab, dass jemand die Bahn
   auf einem anderen Weg bewegt. */
@media (prefers-reduced-motion: reduce) {
  .kar-bahn { scroll-behavior: auto; }
}

/* ── Die Kacheln im Rahmen der Messwerte (10.09.2026 abends) ──────────────
   Sie stehen jetzt IN `.cluster` unter den vier Messwerten: oben der Toern,
   darunter der Satz, der beides verbindet, darunter was er bringt. Kein
   eigener Abschnittsrhythmus mehr — eine Haarlinie trennt, der Rahmen haelt
   zusammen. */
.cluster .mehrwert {
  padding: 0;
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--border);
}
.mehrwert-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: .9rem; }
.mehrwert-kopf .mehrwert-titel { margin-bottom: 0; }
.mehrwert-bruecke { color: var(--text-secondary); font-size: var(--web-body); margin: 0; }

/* ── Wendekarten ──────────────────────────────────────────────────────────
   Beide Seiten liegen in DERSELBEN Rasterzelle, damit die Karte so hoch ist
   wie ihre hoehere Seite — nie springt die Reihe beim Wenden. */
/* 28.09.2026: dieselbe Perspektive fuer die neuen Wendekarten aus
   `kapitel.js` (`BaldKachel`) und `karten.js` (`ProblemKarte`) — geliehene
   Mechanik, keine zweite Fassung (siehe Kopf von `karten.js`). */
.mehrwert-kachel.wende, .bald-kachel.wende, .problem-karte.wende { perspective: 1400px; display: grid; }
.wende-innen {
  display: grid; transform-style: preserve-3d;
  transition: transform .6s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
}
.wende[data-gewendet="1"] .wende-innen { transform: rotateY(180deg); }
.wende-seite {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/*
  ## Die ungewendete Seite traegt den CI-Verlauf (Carolin, 12.09.2026)

  „Die Flip Cards sollten ungeflipped einen farbverlauf als hintergrund
  haben, sowohl für eigner wie charter in der eigenen ci."

  Der Verlauf ist derselbe wie ueberall — `--gradient-aurora` — nur so schwach
  aufgetragen, dass er die Flaeche faerbt und nicht den Text angreift. Deshalb
  als eigene Ebene ueber dem Kartengrund (`::before`) und nicht als
  `background`: Der Kartengrund selbst ist schon ein Verlauf, und zwei
  `background`-Angaben auf demselben Element ersetzen einander.

  Der Farbsatz kommt aus dem Token und nicht als Zahlen hierher: Die
  Eigner-Seite faehrt Aurora (gruen-blau-violett), die Flotten-Seite den
  waermeren Satz — beide setzen dasselbe Token, und diese Regel gilt fuer
  beide, ohne es zu wissen (Regel 59: eine Liste, nicht zwei).

  NUR vorn. Die Rueckseite bleibt ruhig: Dort steht der erklaerende Text, und
  ein Verlauf hinter einem Absatz ist das, was die Karte vorn interessant
  macht und hinten anstrengend.
*/
.wende-vorn { position: relative; isolation: isolate; }
.wende-vorn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gradient-aurora);
  opacity: .10;
  border-radius: inherit;
  pointer-events: none;
}
/* Beim Darueberfahren wird er einen Hauch deutlicher — die Karte sagt, dass sie sich drehen laesst. */
.wende:hover .wende-vorn::before { opacity: .16; }
@media (prefers-reduced-motion: reduce) {
  .wende:hover .wende-vorn::before { opacity: .10; }
}

.wende-hinten { transform: rotateY(180deg); }
.wende-wie { color: var(--text-primary); margin-top: 14px; line-height: 1.55; }
.wende-sprung {
  margin-top: 12px; font-family: var(--font-mono); font-size: var(--web-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none;
}
.wende-sprung:hover { text-decoration: underline; }
.wende-knopf {
  align-self: flex-start; margin-top: 14px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: var(--web-small); cursor: pointer;
  transition: color var(--duration-control, .2s), border-color var(--duration-control, .2s);
}
.wende-knopf:hover { color: var(--text-primary); border-color: var(--accent); }
.wende-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Die Quelle steht auf beiden Seiten unten; der Knopf darunter. */
.wende-seite .foot { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .wende-innen { transition: none; }
}

/* ── Flächen der Landing-Fassung vom 28.09.2026 (`landing-28-09.css`) ──

   Neu sind die Flächenfarben dieser Fassung: Grund, gehobener Grund,
   Karte, Kartenkopf, Fuss, drei Textstufen, Schriftakzent, Verlauf und
   Haarlinie, je Zielgruppe. Sie stehen HIER und nicht in der Seiten-CSS,
   aus demselben Grund wie alles in dieser Datei: Eigner-Seite und
   Fleet-Seite lesen dieselbe Leiter, und `data-aud="b2b"` an der Wurzel
   haengt sie um. Eine zweite Kopie der Werte je Seite oder je Sprachdatei
   waere die Bauart, die an `aurora-700` schon einmal bezahlt wurde.

   Die Werte stammen aus den freigegebenen Referenzen
   `design/referenz/landing-28-09/` (Briefing 28.09.2026, Abschnitt 3).
   Wo eine Farbe mit mehreren Deckkraften vorkommt, steht sie als
   RGB-Tripel (`--l-…-rgb`) — sonst stuende jede Stufe als eigenes Literal
   in der Seiten-CSS.

   Eigener Selektor `:root[data-aud="b2b"]` statt eines Nachtrags im Block
   oben: Dessen Inhalt pruefen zwei Web-Tests gegen die Charter-Schale der
   Web-App, und die Flaechen dieser Fassung gehoeren nicht dazu. */
:root {
  --l-grund: #0e1b27;
  --l-gehoben: #112030;
  --l-karte: #172a3c;
  --l-kopf: #1a3048;
  --l-fuss: #0b1620;
  --l-rueckseite: #152a3e;
  --l-geraet: #0f2030;
  --l-text-1: #eef4f2;
  --l-text-2: #a9bcc2;
  --l-text-3: #7a8f97;
  --l-text-hell: #cfdcdc;
  --l-text-zart: #dfe9e8;
  --l-akzent: #5cf2c0;
  --l-akzent-hell: #8ff8d6;
  --l-auf-verlauf: #06121a;
  --l-verlauf: linear-gradient(120deg, #2be5a8 0%, #3a9dff 58%, #8b6cff 100%); /* @kind color */
  --l-verlauf-90: linear-gradient(90deg, #2be5a8 0%, #3a9dff 58%, #8b6cff 100%); /* @kind color */
  --l-verlauf-rueck: linear-gradient(90deg, #8b6cff 0%, #3a9dff 42%, #2be5a8 100%); /* @kind color */
  --l-verlauf-kurz: linear-gradient(90deg, #2be5a8, #8b6cff); /* @kind color */
  --l-verlauf-punkt: linear-gradient(90deg, #2be5a8, #8b6cff); /* @kind color */
  --l-verlauf-nummer: linear-gradient(120deg, #2be5a8 0%, #3a9dff 58%, #8b6cff 100%); /* @kind color */
  --l-linie: rgba(234, 242, 240, 0.10);
  --l-tinte-rgb: 234, 242, 240;
  --l-karte-rgb: 23, 42, 60;
  --l-grund-rgb: 14, 27, 39;
  --l-akzent-rgb: 92, 242, 192;
  --l-glanz-1-rgb: 43, 229, 168;
  --l-glanz-2-rgb: 58, 157, 255;
  --l-glanz-3-rgb: 139, 108, 255;
  --l-daten-1: #2be5a8;
  --l-daten-2: #3a9dff;
  --l-daten-3: #8b6cff;
  --l-daten-blau: #7bbeff;
  --l-daten-blau-tief: #1f7ad6;
  --l-daten-violett: #b3a2ff;
  --l-hinweis: #ffc24b;
  --l-hinweis-rgb: 255, 194, 75;
  --l-status-gut: #2be5a8;
  --l-status-achtung: #ff6a3d;
  --l-status-faellig: #ffc24a;
  --l-status-neu: #ff8a63;
  --l-tag-gemessen: #5cf2c0;
  --l-tag-abgeleitet: #7bbeff;
  --l-tag-modelliert: #b3a2ff;
  --l-tag-muster: #c9a8ff;
  --l-tag-quelle: #2be5a8;
  /* Das Geraet ist in beiden Welten dasselbe Titan. */
  --l-titan: linear-gradient(150deg, #5a6773 0%, #232c35 35%, #3c4854 70%, #1c242c 100%); /* @kind color */
  --l-titan-taste: #3b4855;
  --l-einfassung: #030507;
  --l-insel: #000000;
  --l-schatten-rgb: 0, 0, 0;
}
:root[data-aud="b2b"] {
  --l-grund: #1a1424;
  --l-gehoben: #211a2e;
  --l-karte: #2a2038;
  --l-kopf: #33243f;
  --l-fuss: #150f1d;
  --l-rueckseite: #2a1f37;
  --l-fenster-kopf: #2f2440;
  --l-kachel: #33263f;
  --l-text-1: #f3eef4;
  --l-text-2: #bfb2c6;
  --l-text-3: #8f8198;
  --l-text-hell: #e2d9e6;
  --l-text-zart: #ece4ef;
  /* Akzent Bernstein = Figma role/Fleet (Carolins Entscheid, 02.10.2026); der Verlauf bleibt der warme Bogen. */
  --l-akzent: #ff8a3d;
  --l-akzent-hell: #fd9653;
  --l-auf-verlauf: #1a0714;
  --l-verlauf: linear-gradient(120deg, #ffc24b 0%, #ff8a3d 24%, #d81e45 52%, #e8459b 76%, #a855f7 100%); /* @kind color */
  --l-verlauf-90: linear-gradient(90deg, #ffc24b 0%, #ff8a3d 24%, #d81e45 52%, #e8459b 76%, #a855f7 100%); /* @kind color */
  --l-verlauf-rueck: linear-gradient(90deg, #a855f7 0%, #e8459b 30%, #d81e45 55%, #ff8a3d 78%, #ffc24b 100%); /* @kind color */
  --l-verlauf-kurz: linear-gradient(90deg, #ffc24b, #d81e45); /* @kind color */
  --l-verlauf-punkt: linear-gradient(90deg, #ffc24b, #e8459b, #a855f7); /* @kind color */
  --l-verlauf-nummer: linear-gradient(120deg, #ffc24b 0%, #ff8a3d 30%, #e8459b 70%, #a855f7 100%); /* @kind color */
  --l-linie: rgba(243, 238, 244, 0.10);
  --l-tinte-rgb: 243, 238, 244;
  --l-karte-rgb: 42, 32, 56;
  --l-grund-rgb: 26, 20, 36;
  --l-akzent-rgb: 255, 138, 61;
  --l-glanz-1-rgb: 255, 194, 75;
  --l-glanz-2-rgb: 216, 30, 69;
  --l-glanz-3-rgb: 168, 85, 247;
  --l-glanz-4-rgb: 232, 69, 155;
  --l-glanz-5-rgb: 255, 138, 61;
  --l-daten-1: #ffc24b;
  --l-daten-2: #e8459b;
  --l-daten-3: #a855f7;
  --l-daten-orange: #ff8a3d;
  --l-daten-rot: #d81e45;
  --l-tag-gemessen: #2be5a8;
  --l-tag-abgeleitet: #f27cbb;
  --l-tag-modelliert: #ffc24b;
}

/* ── Foundations (Landing 30.09.2026) ─────────────────────────────────────
   Aus „Loguna – Foundations" (Figma aydMYvNI6lFTBKi132IeLW), Abgleich gegen
   packages/ui/figma/tokens.json (Stand 30.09.2026, 432 Variablen). Namen wie
   in Figma: semantic/bg/base -> --semantic-bg-base, size/space/5 ->
   --size-space-5. Gelesen von den drei Landingpages (Eigner, Skipper, Fleet).
   Die Rechtsseiten lesen weiter die Tokens darueber; sie bleiben unveraendert.
   Modi: semantic = Nacht (Landing ist dunkel), role je Seite ueber
   [data-rolle], size = Desktop, unter 600 px Touch (Web mobil). */
.lg-v {
  --semantic-bg-base: #070b14;
  --semantic-bg-raised: #0e1422;
  --semantic-bg-overlay: #151c2e;
  --semantic-border-subtle: #1f2940;
  --semantic-border-strong: #2e3a55;
  --semantic-text-primary: #eef2f7;
  --semantic-text-secondary: #a9b4c8;
  --semantic-text-muted: #8591a8;
  --semantic-status-ok: #34c77b;
  --semantic-status-warn: #f5b942;
  --semantic-status-alarm: #f0524f;
  --semantic-status-info: #5aa9f0;
  --semantic-status-on-alarm: #070b14;
  --semantic-chart-1-liegeplatz-hafen: #3b82f6;
  --semantic-chart-2-treibstoff: #ff8a3d;
  --semantic-chart-3-wartung-werft: #2fd6a3;
  --semantic-chart-4-verpflegung: #e0469b;
  --semantic-chart-5-versicherung-gebuehren: #9cc3e6;
  --semantic-chart-6-charter-crew: #b9a6ff;
  --semantic-chart-weitere: #8591a8;
  --semantic-shadow-paneel: #070b1400;
  --size-button-primary: 40px;
  --size-button-secondary: 36px;
  --size-chip: 32px;
  --size-input: 40px;
  --size-radius-card: 12px;
  --size-radius-pill: 999px;
  --size-radius-buehne: 28px;
  --size-space-1: 4px;
  --size-space-2: 8px;
  --size-space-3: 12px;
  --size-space-4: 16px;
  --size-space-5: 24px;
  --size-space-6: 32px;
  --size-space-7: 48px;
  --size-space-8: 64px;
  --size-card-padding: 16px;
  --size-border-breite: 1px;
  --size-breakpoint-mobil: 390px;
  --size-breakpoint-tablet: 768px;
  --size-breakpoint-desktop: 1440px;
  --size-border-fokus: 2px;
  --size-border-fokus-abstand: 2px;
  --size-border-eingabe-aktiv: 1.5px;
  --size-icon-groesse: 24px;
  --size-icon-strich: 2px;
  --size-shadow-paneel-x: 0px;
  --size-shadow-paneel-y: 1px;
  --size-shadow-paneel-blur: 2px;
  --size-grid-desktop-spalten: 12;
  --size-grid-desktop-rand: 64px;
  --size-grid-desktop-abstand: 24px;
  --size-grid-tablet-spalten: 8;
  --size-grid-tablet-rand: 32px;
  --size-grid-tablet-abstand: 24px;
  --size-grid-mobil-spalten: 4;
  --size-grid-mobil-rand: 16px;
  --size-grid-mobil-abstand: 16px;
  --size-grid-basis: 4px;
  --size-type-display-xl-groesse: 144px;
  --size-type-display-xl-zeile: 136px;
  --size-type-display-l-groesse: 96px;
  --size-type-display-l-zeile: 96px;
  --size-type-display-m-groesse: 64px;
  --size-type-display-m-zeile: 68px;
  --size-type-h1-groesse: 40px;
  --size-type-h1-zeile: 48px;
  --size-type-h2-groesse: 28px;
  --size-type-h2-zeile: 36px;
  --size-type-h3-groesse: 20px;
  --size-type-h3-zeile: 28px;
  --size-type-body-groesse: 16px;
  --size-type-body-zeile: 24px;
  --size-type-small-groesse: 14px;
  --size-type-small-zeile: 20px;
  --size-type-label-groesse: 12px;
  --size-type-label-zeile: 16px;
  --size-type-kennzahl-groesse: 32px;
  --size-type-kennzahl-zeile: 36px;
  --size-type-data-groesse: 14px;
  --size-type-data-zeile: 20px;
  --size-type-meta-groesse: 12px;
  --size-type-meta-zeile: 16px;
  --size-type-familie-display: "Inter";
  --size-type-familie-text: "Inter";
  --size-type-familie-mono: "JetBrains Mono";
  --size-type-knopf-groesse: 15px;
  --size-type-knopf-zeile: 20px;
  --size-button-max-breite: 360px;
  --size-dialog-breite: 480px;
  --size-inhalt-mobil: 358px;
  --size-zustand-hover: 8%;
  --size-zustand-pressed: 12%;
  --size-zustand-deaktiviert: 40%;
  --size-navigation-breite: 240px;
  --size-navigation-schmal: 80px;
  --size-inhalt-desktop: 1200px;
  --size-inhalt-tablet: 688px;
  --size-breakpoint-desktop-hoehe: 900px;
  --size-breakpoint-tablet-hoehe: 1024px;
  --size-breakpoint-mobil-hoehe: 844px;
  --size-radius-geraet: 56px;
  --size-radius-geraet-bildschirm: 44px;
  --size-geraet-sicherheitsabstand-oben: 48px;
}
.lg-v[data-rolle="eigner"] {
  --role-accent: #2fd6a3;
  --role-accent-2: #3b82f6;
  --role-on-accent: #070b14;
}
.lg-v[data-rolle="skipper"] {
  --role-accent: #eef2f7;
  --role-accent-2: #9cc3e6;
  --role-on-accent: #070b14;
}
.lg-v[data-rolle="fleet"] {
  --role-accent: #ff8a3d;
  --role-accent-2: #e0469b;
  --role-on-accent: #070b14;
}
@media (max-width: 599px) {
  .lg-v {
    --size-button-primary: 48px;
    --size-button-secondary: 44px;
    --size-chip: 36px;
    --size-input: 48px;
    --size-type-label-groesse: 14px;
    --size-type-label-zeile: 20px;
    --size-type-kennzahl-groesse: 28px;
    --size-type-kennzahl-zeile: 32px;
    --size-type-meta-groesse: 14px;
    --size-type-meta-zeile: 20px;
    --size-type-knopf-groesse: 16px;
    --size-type-knopf-zeile: 24px;
    --size-dialog-breite: 358px;
  }
}

/*
  Die Bildmarke (brand/svg/loguna-logo-reise.svg) auf allen drei Seiten gleich
  (Carolin, 30.09.2026: „ein Logo, eine Wortmarke fuer alle drei
  Zielgruppen"). Eigene Namen, weil `[data-aud="b2b"]` die Aurora-Toene der
  Flottenseite umfaerbt — ein Logo, das `--aurora-500` liest, waere dort pink.
*/
:root {
  --marke-spur-1: #2be5a8;
  --marke-spur-2: #3a9dff;
  --marke-spur-3: #8b6cff;
}