/* ==========================================================================
   JARII · Design-Tokens
   Quelle: docs/brand-tokens.md (Markenbuch v1.1). Diese Datei ist die einzige
   Stelle, an der Farben, Abstände und Schriftstile definiert werden. Alle
   Sektions-CSS (intro, product, form) verwenden nur diese Variablen, damit
   das Theme „Nacht“ später ohne Suchen und Ersetzen umschaltbar bleibt.

   Kontraste (WCAG 2.2, berechnet am 25.10.2026 mit der Formel aus WCAG 2.x):
   - ink auf surface-100 15,2:1 · auf surface-200 13,9:1 · auf sage 10,9:1
   - ink-muted auf surface-100 7,1:1 · auf surface-200 6,5:1 · auf sage 5,1:1
   - violet auf surface-100 5,7:1 · auf surface-200 5,2:1 · auf raised 6,2:1
   - violet auf sage 4,0:1: nur für große Schrift (Zweitakt-Headline) zulässig
   - on-violet auf violet 6,2:1 (Button-Text)
   - on-navy auf navy 13,4:1 · on-navy-accent auf navy 10,2:1
   - violet auf navy nur 2,4:1: deshalb auf navy weder violetter Text noch
     violetter Button noch violetter Fokusring (siehe .surface-navy unten)
   - signal-clear auf surface-100 5,2:1 · signal-alert auf surface-100 4,7:1

   Wortmarke, Kapselfarben (Agent W, berechnet 26.10.2026, gleiche Formel).
   Grafik, die Text trägt: Ziel mindestens 3:1 (WCAG 1.4.11); Schriftzüge von
   Marken sind von 1.4.3 ausgenommen, wir halten 3:1 trotzdem ein.
   - hell, links sage-deep #3D7A57 / rechts violet #6C4FB0:
     surface-100 4,6 / 5,7 · surface-200 4,3 / 5,2 · raised 5,1 / 6,2 ·
     lilac 3,5 / 4,3 · sage 3,3 / 4,0
   - dunkel, links logo-mint #B4E7D1 / rechts logo-lilac #C1BAFD:
     navy 10,7 / 8,2 · Nacht surface-100 13,1 / 10,0 · Nacht surface-200
     11,6 / 8,9 · Nacht raised 10,5 / 8,0 · Nacht lilac 8,7 / 6,6 ·
     Nacht navy #3A4A8C 6,0 / 4,6
   - zum Vergleich, warum nicht überall Mint/Lila: auf surface-100 nur
     1,3 / 1,6, auf sage 1,1 / 1,2 (Kapseln verschwinden)
   - Lücke: Salbei im Theme „Nacht“ (#9CC7AA) mit sage-deep nur 2,7:1, mit
     violet 3,3:1. Kommt derzeit nicht vor (Nacht-Salbei wird nirgends benutzt).
   ========================================================================== */

:root {
  /* Logo-Farben: ausschließlich im Logo verwenden, nie für Flächen oder Text
     (Markenbuch S. 5). Stehen hier nur, damit Inline-SVGs des Logos dieselben
     Werte lesen können. */
  --logo-navy: #0B2A63;
  --logo-mint: #B4E7D1;
  --logo-lilac: #C1BAFD;

  /* Marke und Signal · Theme „Hell“ */
  --navy: #1B2550;
  --violet: #6C4FB0;
  --violet-hover: #5A3F9A;  /* Hover der violetten Buttons, on-violet darauf 8,0:1 */
  --lilac: #DDD2F3;
  --sage: #B8D8C2;
  --sage-deep: #3D7A57;
  --on-sage: #141C3A;
  /* Signalfarben nur für Testergebnisse und nur zusammen mit Wort und Icon.
     Salbei zeigt nie ein Ergebnis: Grün würde als „alles gut“ gelesen. */
  --signal-clear: #1F6F8B;
  --signal-alert: #C4410F;
  --focus: #6C4FB0;

  /* Flächen und Text */
  --surface-100: #F7F4EE;
  --surface-200: #EFEAE1;
  --surface-raised: #FFFFFF;
  --ink: #141C3A;
  --ink-muted: #4A5170;
  --hairline: #D6CFC1;
  --on-navy: #F7F4EE;
  --on-navy-accent: #DDD2F3;
  --on-violet: #FFFFFF;

  /* Wortmarke JARII: Farben der zwei Kapseln. Entscheidung Tarik 26.10.2026
     (zweite Abnahme): überall Mint links, Lila rechts wie im Referenzbild
     docs/marke/wortmarke-tarik-2026-10-26.png, auch auf hellen Flächen.
     Die erste Fassung nahm auf hellen Flächen sage-deep #3D7A57 und violet
     #6C4FB0 (Kontrast 4,6:1 und 5,7:1 auf Porzellan); Mint und Lila erreichen
     dort nur etwa 1,3:1 und 1,6:1. WCAG 1.4.3 nimmt Text, der Teil eines
     Logos oder Markennamens ist, von der Kontrastanforderung aus, und der
     Name bleibt für Screenreader und Suche als Text „JARII“ im DOM.
     Rückweg: die zwei Zeilen --wm-hell-* wieder auf #3D7A57 / #6C4FB0.
     Die Aufteilung hell/dunkel bleibt bestehen, damit das eine Änderung an
     einer Stelle ist. --wm-surface-* ist der Wert der aktuellen
     Theme-Grundfläche; Flächenklassen und Karten setzen ihn als --wm-a/-b neu. */
  --wm-hell-a: var(--logo-mint);
  --wm-hell-b: var(--logo-lilac);
  --wm-dunkel-a: var(--logo-mint);
  --wm-dunkel-b: var(--logo-lilac);
  --wm-surface-a: var(--wm-hell-a);
  --wm-surface-b: var(--wm-hell-b);
  --wm-a: var(--wm-surface-a);
  --wm-b: var(--wm-surface-b);

  /* Geometrie der Kapseln je Schrift und Gewicht, in em (gemessen 26.10.2026
     an den lokalen WOFF2-Dateien, Glyphe „I“ bei 1000 px):
     --wm-w   Breite = Strichstärke des „I“
     --wm-sb  Abstand links und rechts = Vorbreite des „I“
     --wm-ls  Laufweite des Kontexts. Chrome gibt leeren Inline-Blöcken keine
              letter-spacing; deshalb rechnen die Kapsel-Ränder sie selbst ein.
     --wm-capfb  Versalhöhe als Rückfall, wo die Einheit cap fehlt.
     Grundwert: Inter 400 (Fließtext). Die Typo-Stile unten überschreiben. */
  --wm-w: 0.105em;   /* Inter 400 misst 0.093em; etwas kräftiger, sonst sind die Farben bei 16 px kaum zu sehen (1,5 px) */
  --wm-sb: 0.088em;
  --wm-ls: 0em;
  --wm-capfb: 0.727em;

  /* Aktuelle Akzentfarbe der Fläche. Flächenklassen überschreiben sie, damit
     Komponenten (Zweitakt, Links, Fokus) nicht wissen müssen, worauf sie stehen. */
  --accent: var(--violet);
  --text: var(--ink);
  --text-muted: var(--ink-muted);

  /* Schriften: lokal, Ersatz laut Markenbuch Helvetica Neue, dann Arial */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Abstände (px-Raster des Markenbuchs: 4/8/12/16/24/32/48/64/96) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Ecken: Kapsel (pill) ist die Grundform der Marke */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Nur für schwebende Elemente (Sticky-Bar, Mini-Header), nie am Logo */
  --shadow-soft: 0 12px 32px -16px rgba(20, 28, 58, 0.35);

  /* Layout */
  --wrap: 1200px;
  --gutter: 22px;
  --read: 820px;      /* Lesebreite der Rechtsseiten */
  --head-h: 68px;     /* Höhe des Mini-Headers, für scroll-margin-top */
  --bar-h: 72px;      /* Höhe der mobilen Bottom-Bar ohne Safe-Area */

  /* Bewegung: eine Dauer und eine Kurve für alle UI-Übergänge */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.4s;

  color-scheme: light;
}

/* Theme „Nacht“: nicht seitenweit aktiv (Basis bleibt „Hell“, kein
   automatisches Umschalten über prefers-color-scheme). Es funktioniert auf
   jedem Element, z. B. <section id="liste" data-theme="nacht">.
   Wichtig: Abgeleitete Variablen (--accent, --text, --text-muted, --focus,
   --violet-hover) werden hier noch einmal gesetzt. Eine Variable wie
   --accent: var(--violet) wird dort aufgelöst, wo sie deklariert ist (:root),
   und als fertiger Farbwert vererbt; ohne Neudeklaration bliebe sie im
   Nacht-Abschnitt hell. Hintergrund und Textfarbe setzt die Regel selbst,
   damit ein Abschnitt ohne Flächenklasse nicht helle Schrift von body erbt;
   Flächenklassen (.surface-200 usw.) stehen weiter unten und gewinnen,
   sie lesen dann die Nacht-Werte.
   Kontraste Nacht (berechnet 25.10.2026): ink auf surface-100 15,7:1 ·
   ink-muted auf raised 7,3:1 · violet auf surface-100 6,3:1, auf raised 5,1:1 ·
   on-violet auf violet 5,9:1 · signal-clear auf raised 7,5:1 · signal-alert
   auf raised 6,9:1 · on-navy auf navy 7,5:1 · on-navy-accent auf navy 5,8:1. */
[data-theme="nacht"] {
  --navy: #3A4A8C;
  --violet: #A48CE0;
  --violet-hover: #B7A3E8;  /* heller statt dunkler, weil der Button-Text dunkel ist (7,5:1) */
  --lilac: #3A2F63;
  --sage: #9CC7AA;
  --sage-deep: #9CC7AA;
  --on-sage: #141C3A;
  --signal-clear: #7CC6DD;
  --signal-alert: #FF9A6B;
  --focus: #A48CE0;
  --surface-100: #0F1530;
  --surface-200: #172042;
  --surface-raised: #1D2750;
  --ink: #F3EFE7;
  --ink-muted: #B4B8CC;
  --hairline: #2C3762;
  --on-navy: #F7F4EE;
  --on-navy-accent: #DDD2F3;
  --on-violet: #141C3A;
  --shadow-soft: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  /* Abgeleitete Variablen neu auflösen (siehe Kommentar oben) */
  --accent: var(--violet);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  /* Wortmarke auf dunklen Flächen: Mint links, Lila rechts */
  --wm-surface-a: var(--wm-dunkel-a);
  --wm-surface-b: var(--wm-dunkel-b);
  --wm-a: var(--wm-surface-a);
  --wm-b: var(--wm-surface-b);
  background-color: var(--surface-100);
  color: var(--ink);
  color-scheme: dark;
}

/* ==========================================================================
   Typo-Stile. Maximalwerte = Tabelle im Markenbuch, darunter fluid per clamp().
   Laufweiten negativ in em, damit sie mit der Größe mitskalieren.
   ========================================================================== */

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 7.5rem);   /* max 120 px */
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.055em;
  /* Wortmarken-Kapseln: Jakarta 800 */
  --wm-w: 0.155em; --wm-sb: 0.066em; --wm-ls: -0.055em; --wm-capfb: 0.745em;
  /* Punkt-Abstand (scripts/typo.mjs): Jakarta 800, Punkt steht 0.075em zu weit ab */
  --pt-l: -0.075em; --pt-r: -0.085em; --pt-c: -0.055em;
}

.display-l {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);  /* max 72 px */
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.05em;
  /* Wortmarken-Kapseln: Jakarta 800 */
  --wm-w: 0.155em; --wm-sb: 0.066em; --wm-ls: -0.05em; --wm-capfb: 0.745em;
  /* Punkt-Abstand (scripts/typo.mjs): Jakarta 800, Punkt steht 0.075em zu weit ab */
  --pt-l: -0.075em; --pt-r: -0.085em; --pt-c: -0.055em;
}

.heading-1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.75rem);   /* max 44 px */
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  /* Wortmarken-Kapseln: Jakarta 800 */
  --wm-w: 0.155em; --wm-sb: 0.066em; --wm-ls: -0.04em; --wm-capfb: 0.745em;
  /* Punkt-Abstand (scripts/typo.mjs): Jakarta 800, Punkt steht 0.075em zu weit ab */
  --pt-l: -0.075em; --pt-r: -0.085em; --pt-c: -0.055em;
}

.heading-2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.625rem); /* max 26 px */
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  /* Wortmarken-Kapseln: Jakarta 700 */
  --wm-w: 0.136em; --wm-sb: 0.072em; --wm-ls: -0.025em; --wm-capfb: 0.745em;
  /* Punkt-Abstand (scripts/typo.mjs): Jakarta 700, Punkt steht 0.06em zu weit ab */
  --pt-l: -0.06em; --pt-r: -0.073em; --pt-c: -0.042em;
}

/* Etiketten in Versalien. 12 px ist die Markengröße; als Button-Text wird
   .label nicht kleiner gerechnet, damit es lesbar bleibt. */
.label {
  font-family: var(--font-display);
  font-size: 0.75rem;     /* 12 px */
  line-height: 1rem;      /* 16 px */
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Wortmarken-Kapseln: Jakarta 700 */
  --wm-w: 0.136em; --wm-sb: 0.072em; --wm-ls: 0.22em; --wm-capfb: 0.745em;
}

/* Slogan: Inter 400, nie eng, nie übersetzt (lang="en" am Element setzen) */
.slogan {
  font-family: var(--font-text);
  font-size: clamp(1rem, 1.6vw, 1.25rem);   /* max 20 px */
  line-height: 1.4;                          /* 28 / 20 */
  font-weight: 400;
  letter-spacing: 0.005em;
  /* Wortmarken-Kapseln: Inter 400 */
  --wm-w: 0.105em; --wm-sb: 0.088em; --wm-ls: 0.005em; --wm-capfb: 0.727em;
}

.body-l {
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1.4vw, 1.125rem); /* max 18 px */
  line-height: 1.5556;                           /* 28 / 18 */
  font-weight: 400;
  letter-spacing: 0;
}

.body {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}

.body-strong {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
  /* Wortmarken-Kapseln: Inter 600 */
  --wm-w: 0.131em; --wm-sb: 0.073em; --wm-ls: 0em; --wm-capfb: 0.727em;
}

.caption {
  font-family: var(--font-text);
  font-size: 0.8125rem;   /* 13 px */
  line-height: 1.3846;    /* 18 / 13 */
  font-weight: 500;
  letter-spacing: 0;
  /* Wortmarken-Kapseln: Inter 500 */
  --wm-w: 0.111em; --wm-sb: 0.081em; --wm-ls: 0em; --wm-capfb: 0.727em;
}

/* ==========================================================================
   Flächenklassen. Jede setzt Hintergrund, Textfarbe und die Akzentfarbe der
   Fläche. Komponenten lesen nur --text, --text-muted, --accent und --focus.
   ========================================================================== */

.surface-100 {
  background-color: var(--surface-100);
  color: var(--ink);
  --wm-a: var(--wm-surface-a);
  --wm-b: var(--wm-surface-b);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--violet);
}

.surface-200 {
  background-color: var(--surface-200);
  color: var(--ink);
  --wm-a: var(--wm-surface-a);
  --wm-b: var(--wm-surface-b);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--violet);
}

.surface-raised {
  background-color: var(--surface-raised);
  color: var(--ink);
  --wm-a: var(--wm-surface-a);
  --wm-b: var(--wm-surface-b);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--violet);
}

/* Auf navy: violet erreicht nur 2,4:1. Akzent und Fokusring wechseln auf
   on-navy-accent (10,2:1). */
.surface-navy {
  background-color: var(--navy);
  color: var(--on-navy);
  --text: var(--on-navy);
  --text-muted: var(--on-navy-accent);
  --accent: var(--on-navy-accent);
  --focus: var(--on-navy-accent);
  /* Wortmarke auf navy: Mint und Lila wie im Logo (10,7 und 8,2:1) */
  --wm-a: var(--wm-dunkel-a);
  --wm-b: var(--wm-dunkel-b);
}

/* Salbei: violet als zweite Headline-Zeile nur in Display-Größen (4,0:1 reicht
   für große Schrift, nicht für Fließtext). Fokusring violet erreicht 4,0:1 > 3:1. */
.surface-sage {
  background-color: var(--sage);
  color: var(--on-sage);
  /* Wortmarke auf Salbei: feste helle Werte (3,3 und 4,0:1), Mint/Lila
     verschwänden hier (1,1 und 1,2:1) */
  --wm-a: var(--wm-hell-a);
  --wm-b: var(--wm-hell-b);
  --text: var(--on-sage);
  --text-muted: var(--ink-muted);
  --accent: var(--violet);
}

.surface-lilac {
  background-color: var(--lilac);
  color: var(--ink);
  --wm-a: var(--wm-surface-a);
  --wm-b: var(--wm-surface-b);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--violet);
}

/* Zweitakt: zweite Zeile in Akzentfarbe. Auf navy ausdrücklich on-navy-accent,
   überall sonst violet (über --accent der Fläche). */
.zweitakt .accent { color: var(--violet); }
.surface-navy .zweitakt .accent { color: var(--on-navy-accent); }