/* =============================================================================
   KITTY – ein schlankes, statisches Website-Kit
   -----------------------------------------------------------------------------
   Aufbau der Datei:
     1. Design-Tokens (:root)        -> hier stellst du fast alles ein
     2. Reset & Basis
     3. Typografie
     4. Layout (Canvas, Sections, Container, Spalten)
     5. Bausteine (Header, Slider, Buttons, Overline, Bilder, Formular, Footer)
     6. Hilfsklassen & Reduced Motion
     7. Landing- / Marketing-Bausteine
     8. Theming & Bewegung

   Prinzip: Wiederkehrende, gestaltungsrelevante Farben, Schriftgrößen und
   Abstände kommen aus den Tokens unten. Willst du das Erscheinungsbild ändern,
   änderst du zuerst die Tokens – nicht dieselbe Eigenschaft in vielen Bausteinen.
============================================================================= */

/* --- Selbstgehostete Schrift (kein externer Schriftanbieter) ----------------- */
/* Lexend 600 ist der Kern-Schnitt für Headlines. Die ergänzenden Schnitte der
   Typografie-Demo werden weiter unten separat registriert. */
@font-face {
  font-family: "Lexend";
  src: url("fonts/lexend-v26-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 1. ------------------------------------------------------------- TOKENS ---- */
:root {
  color-scheme: light dark;   /* light-dark() folgt dem System; [data-theme] überschreibt */

  /* --- Schriftfamilien ---------------------------------------------------- */
  /* Vier grundlegende Rollen plus die abgeleitete Display-Rolle: Familie und
     Größe werden erst im Textstil kombiniert. Heading: Lexend (lokal), Body:
     lesefreundliche Serif, UI: funktionale Texte, Mono: technische Werte.    */
  --font-heading: "Lexend", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-body: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-ui: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Display: kurze, markenprägende Texte. Folgt standardmäßig der Heading-
     Schrift, kann im Theme aber unabhängig überschrieben werden. */
  --font-display: var(--font-heading);

  /* --- Lesetext ----------------------------------------------------------- */
  /* Der Fließtext ist die stabile Mitte des Systems. Lead, UI und Headlines
     haben eigene responsive Kurven, weil sie optisch andere Aufgaben lösen. */
  --text-base-source: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --text-size-adjust: 0.0625rem;
  --text-base:  calc(var(--text-base-source) + var(--text-size-adjust));

  /* --- UI-Skala ----------------------------------------------------------- */
  /* Bewusste Abstände zur Base: bei 20px ergeben sich 16px und 14px.
     Mindestwerte schützen funktionale Texte auf schmalen Viewports. */
  --text-small-offset: 0.25rem;
  --text-tiny-offset: 0.375rem;
  --text-small: max(0.875rem, calc(var(--text-base) - var(--text-small-offset)));
  --text-tiny:  max(0.75rem,  calc(var(--text-base) - var(--text-tiny-offset)));

  /* Kompatibilitäts-Aliase für die bisherige Benennung. */
  --text-body: var(--text-base);
  --text-overline: var(--text-tiny);

  /* H1-Einleitung: auf Mobile nah am Fließtext, mit wachsendem Raum größer. */
  --text-lead: clamp(1.125rem, 1.06rem + 0.35vw, 1.375rem);

  /* --- Headline-Skala ----------------------------------------------------- */
  /* Zwei optische Endpunkte statt einer starren Ratio: kompakt auf Mobile,
     ausdrucksstark auf großen Screens. Jede Stufe darf passend skalieren. */
  --text-h5:       clamp(1.125rem, 1.06rem + 0.35vw, 1.375rem);
  --text-h4:       clamp(1.35rem,  1.20rem + 0.70vw, 1.75rem);
  --text-h3:       clamp(1.6rem,   1.35rem + 1.10vw, 2.25rem);
  --text-h2:       clamp(2rem,     1.60rem + 1.90vw, 3rem);
  --text-h1:       clamp(2.6rem,   1.90rem + 3.40vw, 4.5rem);
  --text-logo:     clamp(1.5rem,    1.35rem + 0.75vw, 1.875rem);

  /* Zeilenhöhe folgt der Rolle: große Display- und Section-Headlines bleiben
     bewusst luftig; kleinere Überschriften funktionieren auch in Cards. */
  --leading-tight: 1.08;     /* Fallback für Sondertexte (z. B. Slider-Titel) */
  --leading-h1:    1.16;
  --leading-h2:    1.28;
  --leading-h3:    1.20;
  --leading-h4:    1.25;
  --leading-h5:    1.30;
  --leading-snug:  1.25;
  --leading-body:  1.68;
  --leading-ui:    1.35;
  --leading-mono:  1.5;

  /* Tracking skaliert optisch mit der Größe: groß enger, klein offener. */
  --tracking-h1: -0.022em;
  --tracking-h2: -0.02em;
  --tracking-h3: -0.017em;
  --tracking-h4: -0.014em;
  --tracking-h5: -0.01em;
  --tracking-button: 0.015em;
  --tracking-wide: 0.14em;   /* für Overlines / Nav in Versalien */

  /* --- FARB-SYSTEM ---------------------------------------------------------
     Drei Ebenen. Du stellst NUR die oberste ein (Marken-Identität); alles
     darunter wird per color-mix() daraus abgeleitet. Theming = ein Wert rein,
     viele raus. Werte liegen als light-dark(HELL, DUNKEL); welcher greift,
     entscheidet das color-scheme (System oder [data-theme] auf <html>).

     Browser-Basis: color-mix() + oklch() + light-dark() – Chrome/Edge 123+,
     Firefox 120+, Safari 17.5+. Bewusst kein Legacy-Fallback; Details stehen
     in README.md und KIT.md.

     >>> WAS DIE KI BEIM THEMING PRÜFT <<<
     Zwei Stellen sind Kontrast-ENTSCHEIDUNGEN, keine Mischungen, und stehen
     deshalb als literale Werte hier: --color-on-brand* (Text AUF der Fläche)
     und --color-brand-ink (Marke ALS Text auf Hell). Regel: Wird eine Brand-
     Farbe gesetzt, Label-/Text-Kontrast auf >= 4.5:1 prüfen und bei Bedarf
     hell<->dunkel kippen bzw. eine dunklere Ink-Variante anbieten.
  ------------------------------------------------------------------------- */

  /* === 1. MARKEN-IDENTITÄT — hier stellst du das Theme ein ================ */
  /* Brand 1: dominante Marke. Links, Primary-Button, Quelle ALLER Tönungen.  */
  --color-brand:            #ffd400;
  /* Brand 2: zweite, meist ruhigere Marke. Secondary-Button (leichte
     Hierarchie zu Brand 1). Ohne echte zweite Marke: gleich Brand 1 lassen.  */
  --color-brand-2:          #175bd6;
  /* Complementary: bewusster Kontrast. Störer, Emphasis, Icons, Quote-Kante.
     Sparsam. Ohne Wunsch: auf Brand 1 zurückfallen lassen.                   */
  --color-brand-complement: #ff5a36;

  /* Text AUF gefüllten Markenflächen (Buttons, Solid-Pills). SOLIDE.
     Default hell/dunkel je Marke gewählt – KI prüft 4.5:1 und kippt ggf.     */
  --color-on-brand:            #171716;   /* auf Brand 1: dunkel             */
  --color-on-brand-2:          #ffffff;   /* auf Brand 2: hell               */
  --color-on-brand-complement: #171716;   /* auf Complement: dunkel          */

  /* Marke ALS Textfarbe auf hellem Grund (farbige Links).
     Default = Textfarbe, weil Brand 1 im Default als Text unlesbar wäre.
     Text-taugliche Marke (Blau/Grün/…)? Auf var(--color-brand) setzen.       */
  --color-brand-ink: var(--color-text);

  /* === interne Basis (nicht direkt verwenden – führendes _) =============== */
  /* Theme-kippender Vordergrund: im Light dunkel, im Dark hell. Ein Token für
     Text-Tinte und kontrastierende Detailtöne in beiden Themes.              */
  --_ink: light-dark(#15140f, #ffffff);
  /* Neutrale Ton-Leiter – Elevation je Theme bewusst gesetzt (robust, kein
     Auto-Raten „heller oder dunkler"). Der Markenstich kommt eine Ebene
     tiefer per color-mix() gleichmäßig darüber.                              */
  --_n-surface:        light-dark(#ffffff, #1a1916);  /* Leinwand / primäre Leseebene   */
  --_n-dim:            light-dark(#ececeb, #100f0d);  /* zurückgesetzter Seitenrahmen   */
  --_n-tint:           light-dark(#f6f6f4, #232219);  /* getöntes Section-Band          */
  --_n-container:      light-dark(#f0f0ed, #262521);  /* Card / Chip (angehobene Fläche)*/
  --_n-inset:          light-dark(#e9e9e5, #141310);  /* Well: Code, Prompt (vertieft)  */
  --_n-outline:        light-dark(#e4e4e2, #34322b);  /* ruhige Kante                   */
  --_n-outline-strong: light-dark(#d4d3d0, #47453d);  /* betonte Kante                  */

  /* === 2a. NEUTRALE Flächen & Outlines (abgeleitet) ====================== */
  /* EIN Knopf: wie viel Marke in den „neutralen" Grautönen steckt. 0% = echtes
     Grau; 1–2% = zarter warmer/kalter Stich, der mit der Marke harmoniert.   */
  --tint-strength: 0.75%;
  --color-surface:           color-mix(in oklch, var(--_n-surface),        var(--color-brand) var(--tint-strength));
  --color-surface-dim:       color-mix(in oklch, var(--_n-dim),            var(--color-brand) var(--tint-strength));
  --color-surface-tint:      color-mix(in oklch, var(--_n-tint),           var(--color-brand) var(--tint-strength));
  --color-surface-container: color-mix(in oklch, var(--_n-container),      var(--color-brand) var(--tint-strength));
  --color-surface-inset:     color-mix(in oklch, var(--_n-inset),          var(--color-brand) var(--tint-strength));
  --color-outline:           color-mix(in oklch, var(--_n-outline),        var(--color-brand) var(--tint-strength));
  --color-outline-strong:    color-mix(in oklch, var(--_n-outline-strong), var(--color-brand) var(--tint-strength));

  /* === 2b. FARBIGE Flächen (stärker aus der Marke getönt) ================ */
  /* Für getönte Sections, Pill-/Chip-Hintergründe, Quote-Flächen, Highlights.
     In den Surface-Neutral gemischt -> im Light hell & lesbar, im Dark dunkel.*/
  --surface-brand-strength: 10%;
  --color-surface-brand:      color-mix(in oklch, var(--_n-surface), var(--color-brand)            var(--surface-brand-strength));
  --color-surface-brand-2:    color-mix(in oklch, var(--_n-surface), var(--color-brand-2)          var(--surface-brand-strength));
  --color-surface-complement: color-mix(in oklch, var(--_n-surface), var(--color-brand-complement) var(--surface-brand-strength));

  /* === 2c. HOVER-/DETAIL-Shades der Marke (abgeleitet) =================== */
  /* Hover dreht die Brand-Farbe subtil Richtung Complementary. Die Mischung
     bleibt in OKLCH farbig und klar, statt Richtung Grau/Weiß auszuwaschen.  */
  --hover-shift: 6%;
  --color-brand-hover:   color-mix(in oklch, var(--color-brand),   var(--color-brand-complement) var(--hover-shift));
  --color-brand-2-hover: color-mix(in oklch, var(--color-brand-2), var(--color-brand-complement) var(--hover-shift));
  --color-brand-strong:  color-mix(in oklch, var(--color-brand),   var(--_ink) 8%);   /* Ränder/Details/Signatur */

  /* === 3. TEXT — Alpha, damit Text die Fläche mitvererbt ================= */
  /* NICHT auf Markenflächen (dort gilt --color-on-brand). Alpha-Stufen so
     gewählt, dass Primary/Secondary/Tertiary auf den neutralen Flächen AA
     (>= 4.5:1) halten; Disabled bewusst darunter. Bei Marken-Tuning prüfen.  */
  --color-text-primary:   color-mix(in srgb, var(--_ink) 90%, transparent);
  --color-text-secondary: color-mix(in srgb, var(--_ink) 68%, transparent);
  --color-text-tertiary:  color-mix(in srgb, var(--_ink) 62%, transparent);
  --color-text-disabled:  color-mix(in srgb, var(--_ink) 38%, transparent);

  /* Fokus: Die Kontur trägt den barrierearmen Kontrast, der Marken-Glow ist
     eine rein visuelle, weiche Ergänzung.                                   */
  --color-focus-outline: var(--color-text-tertiary);
  --color-focus-glow: color-mix(in srgb, var(--color-brand) 22%, transparent);

  /* Fließtext-Link-Highlight (Hover-„Textmarker"). Default = weiche
     Markentönung -> funktioniert für JEDE Marke (dunkler Text bleibt lesbar).
     Für den klassischen Voll-Ton-Look: auf var(--color-brand) setzen.        */
  --link-highlight: var(--color-surface-brand);

  /* === Immer-dunkle Bänder & Overlays (theme-unabhängig) ================= */
  /* .section--dark, dunkler Footer, CTA-Band: bewusst IMMER dunkel, NICHT an
     --color-text gekoppelt (sonst Umkippen im Dark-Theme).                   */
  --color-inverse:    light-dark(#171716, #0a0a09);
  --color-on-inverse: #ffffff;
  --color-scrim:      light-dark(rgba(20, 20, 19, 0.42), rgba(0, 0, 0, 0.62)); /* über Slider-Bildern */

  /* === Kompatibilitäts-Aliase (ältere Bausteine/Seiten) ==================
     Halten die vorhandenen Komponenten und alle bestehenden HTML-Seiten am
     Leben, ohne sie anzufassen. Neu bauen: die semantischen Tokens oben
     benutzen, nicht diese Aliase.                                            */
  --color-accent:         var(--color-brand);
  --color-on-accent:      var(--color-on-brand);
  --color-accent-strong:  var(--color-brand-strong);
  --color-border:         var(--color-outline);
  --color-bg:             var(--color-surface-dim);
  --color-surface-2:      var(--color-surface-tint);
  --color-text:           var(--color-text-primary);
  --color-text-2:         var(--color-text-secondary);
  --color-text-3:         var(--color-text-tertiary);

  /* --- Abstands-Skala (8er-Raster, in rem) -------------------------------- */
  --space-8:   0.5rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-56:  3.5rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-128: 8rem;

  /* Jeder Contentblock (.section) bringt sein eigenes Padding oben UND unten mit.
     Wert läuft über die 8er-Token-Skala (relativ, rem – niemals fixes px).
     Größer/kleiner: einfach einen anderen --space-*-Token einsetzen.           */
  --section-padding-block: var(--space-56);   /* 56px = 3.5rem */

  /* Zusätzlicher Abstand ZWISCHEN Blöcken (Gap des äußeren Layouts).
     Fuge zwischen zwei Blöcken = 2x Block-Padding + Gap = 56 + 56 + 24 = 136px. */
  --section-gap: var(--space-24);              /* 24px */

  /* Extra-Luft nur an Farbwechseln (getönt <-> ungetönt), addiert sich zum Gap. */
  --section-gap-shift: var(--space-32);        /* 32px (Abstand dort = 24 + 32 = 56) */

  /* Zusätzliches Außen-Padding am ERSTEN/LETZTEN Block (oben bzw. unten).
     Es liegt IM Rand-Block, damit eine Tönung bis an die Rahmenkante reicht.
     An den Gap gekoppelt: Außenrand = Block-Padding + Gap = 56 + 24 = 80px.
     Mehr Luft am Rand? Einfach einen größeren Wert setzen (z. B. --space-48). */
  --frame-padding-block: var(--section-gap);  /* = Gap (24px) */
  --heading-text-gap: 0.66em;          /* Headline -> Text: proportional zur Headline (em) */
  --heading-text-gap-compact: 0.45em;  /* kompakter für zentrierte Sections */
  --content-gap: var(--space-56); /* Intro -> Inhaltsblock: mobil wie Desktop (56px), damit der Eingang nie kleiner als der blockinterne Abstand wird */
  --flow-gap: var(--space-32);         /* Text/Code -> Control (Buttons, Swatches) */
  --gutter:       clamp(var(--space-32), 3vw + 1rem, var(--space-80)); /* Spaltenabstand */

  /* --- Layout-Breiten ----------------------------------------------------- */
  /* ZWEI entkoppelte Breiten – das ist der Kern des Systems:                 */
  /*   --content-max : Breite, auf die JEDER Textinhalt zentriert wird        */
  /*                   (Header, Slider-Text, Sections, Footer-Spalten)        */
  /*   --frame-max   : Breite der weißen "Box" im Boxed-Layout                */
  /* Standard: gleich groß -> die Box umschließt exakt die Contentbreite.     */
  --content-max: 1160px;
  --frame-max:   var(--content-max);
  --pad-inline:  clamp(var(--space-24), 5vw, var(--space-64)); /* Innenabstand links/rechts */
  --measure:     66ch;    /* optimale Lesebreite für Fließtext */

  /* Header-Höhe: von main.js exakt gemessen und als Inline-Style auf <html>
     gesetzt; der Wert hier ist nur der Fallback ohne JS (~5rem). Davon leiten
     sich der Anker-Versatz und die Viewport-Slider-Höhe ab.                    */
  --header-height:  5rem;
  --scroll-offset:  var(--header-height);   /* Anker-Versatz (hier ggf. + Luft) */

  /* Slider-Höhe: per Ratio-Preset oder Viewport-Modus steuerbar.
     Ratio-Modus: aspect-ratio + --slide-min.
     Viewport-Modus: slider--viewport füllt die sichtbare Höhe unter dem Header. */
  --slide-ratio: 16 / 9;
  --slide-min:   clamp(320px, 44vh, 560px);  /* Mindesthöhe im Ratio-Modus */
  --slide-viewport-height: calc(100vh - var(--header-height));

  /* --- Radien ------------------------------------------------------------- */
  /* Primitive Skala: Themes dürfen diese Werte überschreiben. Komponenten
     verwenden darunter ausschließlich die semantischen Rollen.              */
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-16: 1rem;
  --radius-24: 1.5rem;
  --radius-full: 999px;

  /* Semantische Rollen: gleiche Funktion = gleicher Radius. Große Flächen
     gehen eine Stufe höher, Elemente innerhalb einer Fläche eine Stufe tiefer. */
  --radius-small: var(--radius-8);
  --radius-control: var(--radius-16);
  --radius-container: var(--radius-16);
  --radius-large: var(--radius-24);

  /* Rückwärtskompatibilität für bestehende, noch nicht migrierte Sites. */
  --radius: var(--radius-container);
  --radius-pill: var(--radius-full);
  --border: 1px solid var(--color-border);
  --shadow-card:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 18px 50px -20px rgba(0, 0, 0, 0.16);
  --shadow-focus:
      0 0 0 4px var(--color-focus-glow),
      0 6px 18px -8px var(--color-focus-glow);
  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Dynamische Viewport-Einheiten nutzen, wenn verfügbar.
   Im Viewport-Modus soll Header + Slider exakt in die sichtbare Browserhöhe passen. */
@supports (height: 100dvh) {
  :root { --slide-viewport-height: calc(100dvh - var(--header-height)); }
}

/* Manuelles Umschalten des Farbschemas. Ohne [data-theme] folgt light-dark()
   der Systemvorgabe; diese beiden Regeln erzwingen ein Theme (z. B. per
   Umschalter, siehe main.js / .theme-toggle). Reine color-scheme-Umschaltung –
   die Farbwerte selbst stehen zentral in :root.                               */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* 2. -------------------------------------------------------------- RESET ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img, svg, picture { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* Sichtbarer, ruhiger Fokusring – gilt für alles Interaktive. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* 3. ---------------------------------------------------------- TYPOGRAFIE --- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 600;
  /* Farbe bewusst NICHT gesetzt: Headlines erben die Kontextfarbe (Body, Section,
     Marke). So kann ein Projekt Farbe am Container setzen und die Headline zieht mit;
     Kontext-Overrides wie .section--dark bleiben. Farbe ist Kontext, nicht Komponente. */
  text-wrap: balance;      /* verhindert einzelne "Hurenkinder" in Headlines */
  overflow-wrap: anywhere; /* lange Namen/Wörter sprengen schmale Viewports nicht */
}
/* Größe, Zeilenhöhe und Tracking gehören zusammen – je Stufe aufeinander abgestimmt. */
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); }
h5 { font-size: var(--text-h5); line-height: var(--leading-h5); letter-spacing: var(--tracking-h5); }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-24); }

/* Fließtext-Links: Textfarbe (oder farbige Marke via --color-brand-ink) mit
   Marken-Unterstreichung; Hover = „Textmarker".
   Alle drei Rollen laufen über Tokens -> funktioniert für JEDE Marke:
   - Farbe   : --color-brand-ink  (Default = Textfarbe; farbige Links = Marke)
   - Strich  : --color-brand
   - Highlight: --link-highlight   (Default = weiche Markentönung, lesbar) */
.prose a,
a.link {
  color: var(--color-brand-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: background-color var(--dur) var(--ease);
}
.prose a:hover,
a.link:hover {
  background: var(--link-highlight);
  text-decoration-color: var(--color-brand);
}

/* Overline: kleines Label über einer Headline mit kurzer Marken-Signatur.     */
.overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--text-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: var(--space-16);
}
.overline::before {
  content: "";
  inline-size: var(--space-40);
  block-size: 3px;
  background: var(--color-accent);
}

/* Lesebreite begrenzen */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-24); }

/* Einleitungssatz unter einer Headline: eine echte Größenstufe, nicht nur Farbe. */
.lead {
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-text-2);
}

/* Einleitung einer Inhalts-Section: normale Body-Typografie, aber dieselbe
   Lesebreite und dieselben Layout-Abstände wie ein Lead. */
.section-intro { max-width: var(--measure); }

/* Abstand Headline -> Text: als margin-bottom der HEADLINE, in em -> skaliert
   automatisch mit der Schriftgröße. Overline -> Headline bleibt enger (16px). */
:where(h1, h2, h3, h4, h5):has(+ :where(.prose, .lead, .section-intro, .form)) {
  margin-bottom: var(--heading-text-gap);
}
/* Abstand Intro (Headline/Lead) -> Inhaltsblock: eine fluide Systemgröße,
   ersetzt die früheren Inline-margin-top im Markup. */
:where(h1, h2, h3, h4, h5, .lead, .section-intro) + :where(.feature-grid, .steps, .cols, .cards, .stats, .faq, .media, .toc, .embed-consent) {
  margin-top: var(--content-gap);
}
/* Text/Code -> Control (Buttons, Swatches) innerhalb einer Spalte. */
:where(.prose, pre) + :where(.button-row, .swatches) {
  margin-top: var(--flow-gap);
}

/* 4. -------------------------------------------------------------- LAYOUT --- */
/*
   ARCHITEKTUR IN KÜRZE
   --------------------
   - Bänder (Header, Slider, Sections, Footer) sind volle Breite.
   - Ein <div class="container"> IN jedem Band zentriert den Inhalt auf
     --content-max. So sind alle Textinhalte gleich ausgerichtet – egal ob
     das Band voll breit ist oder nicht.
   - <div class="frame"> umschließt die Inhalts-Sections. Ob es eine
     zentrierte "Box" (Boxed) oder volle Breite (Full) ist, steuert eine
     Klasse auf <body>: .layout-boxed (Standard) oder .layout-full.
   - Header/Slider/Footer liegen AUSSERHALB des frame -> immer volle Breite.
*/

/* --- Container: die eine, geteilte Contentbreite ------------------------ */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* --- Boxed-Layout (Standard): Inhalt als Box auf grauem Grund ----------- */
.layout-boxed { background: var(--color-bg); }
.frame {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);        /* Abstand zwischen den Blöcken */
  background: var(--color-surface);
}
/* Außenränder gehören zum RAND-Block selbst (erster/letzter Block), damit eine
   Tönung/Fill bis an die Rahmenkante reicht – statt eines weißen Rahmen-Rands.
   Gesamtmaß = eigenes Block-Padding + Zusatz (--frame-padding-block).          */
.frame > .section:first-child {
  padding-top: calc(var(--section-padding-block) + var(--frame-padding-block));
}
.frame > .section:last-child {
  padding-bottom: calc(var(--section-padding-block) + var(--frame-padding-block));
}
@media (min-width: 60em) {
  .layout-boxed .frame {
    max-width: var(--frame-max);
    margin-inline: auto;
    margin-block: var(--space-48);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    overflow: clip;          /* rundet die Ecken der inneren Sections mit */
  }
}

/* --- Full-Width-Layout: keine Box, kein Schatten, kein Rand ------------- */
/* Seite = Contentfarbe, alles läuft randlos durch.                         */
.layout-full { background: var(--color-surface); }
.layout-full .frame {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- Section = Contentblock: eigenes, großzügiges Padding oben UND unten ---- */
/* Jeder Block ist in sich abgeschlossen. Deshalb wird das obere Padding NICHT
   gekappt – zwei weiße Blöcke ergeben bewusst viel Weißraum, und ein Block mit
   Hintergrundfarbe (.section--tint) bringt seine Farbfläche allseitig mit Luft
   mit. Die Tönung lässt sich so an JEDEN beliebigen Block hängen.             */
.section { padding-block: var(--section-padding-block); }
.section--tint {
  --callout-bg: var(--color-surface);
  background: var(--color-surface-2);
}

/* Farbwechsel zwischen zwei Blöcken braucht mehr Luft als weiß-zu-weiß.
   Die Regel greift nur, wenn getönt und ungetönt aufeinandertreffen, und
   addiert sich zum Gap. (CSS kann keinen "vorherigen" Nachbarn wählen, darum
   liegt der Zuschlag als margin-top auf dem FOLGENDEN Block – optisch identisch
   zu "der Block davor bekommt mehr padding-bottom".)                          */
.frame > .section:not(.section--tint):not(.section--dark) + .section--tint,
.frame > .section--tint + .section:not(.section--tint):not(.section--dark) {
  margin-top: var(--section-gap-shift);
}

/* Zwei bewusst gefüllte Flächen bilden eine zusammenhängende Farbkante. Das
   negative Margin hebt nur den Frame-Gap auf; das Innen-Padding beider Sections
   bleibt unverändert.                                                       */
.frame > .section--tint + .section--dark,
.frame > .section--dark + .section--tint {
  margin-top: calc(0rem - var(--section-gap));
}

.section--center { text-align: center; }
.section--center :where(h1, h2, h3, h4, h5):has(+ :where(.prose, .lead, .section-intro)) {
  margin-bottom: var(--heading-text-gap-compact);
}
.section--center .prose,
.section--center .lead,
.section--center .section-intro,
.section--center .overline { margin-inline: auto; }

/* --- Spalten-System ----------------------------------------------------- */
/* Mobile: immer einspaltig. Ab 48em greifen die Aufteilungen.               */
.cols {
  display: grid;
  gap: var(--gutter);
  align-items: center;
}
@media (min-width: 48em) {
  .cols--2    { grid-template-columns: 1fr 1fr; }
  .cols--3070 { grid-template-columns: 3fr 7fr; }
  .cols--7030 { grid-template-columns: 7fr 3fr; }
  /* Bild rechts statt links: schmale Spalte wandert nach rechts, DOM bleibt
     gleich (Bild zuerst -> gut für Screenreader/Reihenfolge).                 */
  .cols--3070.cols--reverse { grid-template-columns: 7fr 3fr; }
  .cols--reverse > :first-child { order: 2; }
}

/* 5. ------------------------------------------------------------ BAUSTEINE -- */

/* --- Layout-Primitives: neutrale Anordnungs-Helfer ------------------------- */
/* Bewusst OHNE visuelle Meinung — nur „wie wird angeordnet". Ergänzen .container,
   .cols und .prose für stark gestaltete Seiten, die keine fertige Komponente
   wollen. Abstände je über ein lokales Custom Property überschreibbar.          */
.flow > * + * { margin-top: var(--flow-space, var(--space-24)); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-16));
  align-items: var(--cluster-align, center);
}
.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

/* --- Header / Navigation ------------------------------------------------ */
.site-header {
  border-bottom: var(--border);
  background: var(--color-surface);
  position: relative;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-24);
}

/* Sticky-Header: Klasse .nav-sticky auf <body> setzen.
   Der Anker-Versatz liegt als scroll-margin-top auf den Sprungzielen und
   entspricht exakt der Header-Höhe (--header-height, gesetzt von main.js;
   CSS-Fallback ~5rem). So landet die Section bündig unter dem Header – ohne
   Lücke, in der sonst der Bereich darüber (Slider/Rand) durchblitzt. */
.nav-sticky .site-header {
  position: sticky;
  top: 0;
  box-shadow: 0 1px 0 var(--color-border), 0 8px 24px -16px rgba(0, 0, 0, 0.28);
}
.nav-sticky :where(section[id]) { scroll-margin-top: var(--scroll-offset); }
.logo {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-32);
  flex: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-logo);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}
.logo span { color: var(--color-accent-strong); } /* Markenakzent im Logo */

.nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-32);
  padding: 0;
}
.nav a {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-text);
  padding-block: var(--space-8);
  position: relative;
}
/* animierter Marken-Unterstrich beim Hover / für aktiven Punkt */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="true"]::after,
.nav a[aria-current="location"]::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Top-Level-Links teilen sich auf Desktop dieselbe Zeilenbox. Dadurch bleiben
   einfache Links und Elternlinks mit separatem Flyout-Toggle exakt auf einer
   Schriftlinie, unabhängig von der Höhe des Toggle-Buttons. */
@media (min-width: 48em) {
  .nav > ul { align-items: center; }
  .nav > ul > li {
    display: flex;
    align-items: center;
  }
  .nav > ul > li > a,
  .nav__link-row > a {
    display: inline-flex;
    align-items: center;
    block-size: var(--space-40);
    padding-block: 0;
    line-height: 1;
  }
}

/* Burger-Button – nur auf Mobile sichtbar */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-8);
}
.nav-toggle svg { inline-size: 26px; block-size: 26px; }

@media (max-width: 47.99em) {
  .site-header__inner { justify-content: center; position: relative; flex-wrap: wrap; }
  .js .nav-toggle {
    display: block;
    position: absolute;
    right: var(--pad-inline);
    top: 50%;
    transform: translateY(-50%);
  }
  .nav {
    position: static;
    width: 100%;
    background: var(--color-surface);
    border-top: var(--border);
    display: block;
  }
  .js .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    width: auto;
    border-top: 0;
    border-bottom: var(--border);
    box-shadow: var(--shadow-card);
    display: none;
  }
  .js .nav[data-open="true"] { display: block; }
  .nav ul {
    flex-direction: column;
    gap: 0;
    padding-inline: var(--pad-inline);
  }
  .nav li { border-top: var(--border); }
  .nav li:first-child { border-top: none; }
  .nav a { display: block; padding-block: var(--space-16); }
  .nav a::after { display: none; }
}

/* --- Buttons ------------------------------------------------------------ */
/* Drei Hierarchie-Stufen, jede mit eigenem Job:
     .button              Primary   – solide Brand 1 (der eine Haupt-CTA)
     .button--secondary   Secondary – solide Brand 2 (zweiter, gleichrangiger CTA)
     .button--ghost       Ghost     – nur Outline+Text (starke Hierarchie, z. B.
                                       Abbrechen im Modal)
   Fläche/Schrift/Rand laufen je Variante über --btn-bg / --btn-fg / --btn-border.
   Primary/Secondary drehen beim Hover subtil Richtung Complementary. Der
   Ghost-Button bleibt transparent und behält Primary-Text; nur seine ruhige
   Outline wird beim Hover stärker. Complementary bleibt bewusst DRAUSSEN aus
   der Button-Familie (die ist für Emphasis/Störer).                          */
.button {
  --btn-bg: var(--color-brand);
  --btn-fg: var(--color-on-brand);
  --btn-border: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-button);
  text-decoration: none;
  line-height: 1;
  padding: var(--space-16) var(--space-32);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Primary-Hover: Brand subtil Richtung Complementary gedreht. */
.button:hover {
  --btn-bg: var(--color-brand-hover);
  --btn-border: var(--color-brand-hover);
}

/* Secondary: solide Brand 2. */
.button--secondary {
  --btn-bg: var(--color-brand-2);
  --btn-fg: var(--color-on-brand-2);
  --btn-border: var(--color-brand-2);
}
.button--secondary:hover {
  --btn-bg: var(--color-brand-2-hover);
  --btn-border: var(--color-brand-2-hover);
}

/* Ghost: immer transparent und mit gut lesbarem Primary-Text. Nur die Kante
   wechselt beim Hover von Tertiary auf Primary.                              */
.button--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-primary);
  --btn-border: var(--color-text-tertiary);
}
.button--ghost:hover {
  --btn-bg: transparent;
  --btn-border: var(--color-text-primary);
}

/* Formen: Standard nutzt die Control-Rolle. Voll abgerundet: --pill. */
.button--pill { border-radius: var(--radius-full); }

/* Größen (Standard sitzt dazwischen). */
.button--sm { padding: var(--space-8) var(--space-24);  font-size: var(--text-tiny); }
.button--lg { padding: var(--space-24) var(--space-40); font-size: var(--text-base); }

/* Icons IM Button: skalieren mit der Schrift (nicht --icon-size).            */
.button .icon { inline-size: 1.15em; block-size: 1.15em; }

/* Icon-only-Button: gleiches Padding ringsum. Rund via zusätzlich --pill.    */
.button--icon { padding: var(--space-16); }
.button--icon .icon { inline-size: 1.25em; block-size: 1.25em; }

/* Auf IMMER-dunklen Bändern (.section--dark): Primary/Secondary poppen von
   selbst (Marke != dunkler Grund). Nur Ghost braucht helle Kante/Schrift.    */
.section--dark .button--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-on-inverse);
  --btn-border: color-mix(in srgb, var(--color-on-inverse) 62%, transparent);
}
.section--dark .button--ghost:hover {
  --btn-bg: transparent;
  --btn-border: var(--color-on-inverse);
}

/* --- Pills / Chips / Badges --------------------------------------------- */
/* Kompaktes, rundes Label: Kategorien, Filter, Status, Störer.
   Fünf Ausprägungen decken hell/dunkel-Kontexte und Brand-Bezug ab:
     .pill              neutral  – getönte Neutralfläche + Textfarbe
     .pill--brand       weich    – Markentönung + dunkler Text (dezent)
     .pill--solid       laut     – solide Marke + --color-on-brand (Badge)
     .pill--complement  Störer   – solide Complementary (Emphasis)
     .pill--outline     ruhig    – transparent + Marken-/Neutralkante
   Neutrale Pills folgen automatisch dem Theme (Surface/Text sind theme-aware);
   auf --dark-Bändern greifen die Overrides weiter unten.                      */
.pill {
  --pill-bg: var(--color-surface-container);
  --pill-fg: var(--color-text);
  --pill-border: var(--color-outline);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  background: var(--pill-bg);
  color: var(--pill-fg);
  border: 1px solid var(--pill-border);
  border-radius: var(--radius-full);
}
.pill .icon { inline-size: 1.05em; block-size: 1.05em; }
a.pill, button.pill { cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
a.pill:hover, button.pill:hover { --pill-bg: var(--color-surface-tint); --pill-border: var(--color-outline-strong); }

.pill--brand {
  --pill-bg: var(--color-surface-brand);
  --pill-fg: var(--color-text);
  --pill-border: color-mix(in oklch, var(--color-surface-brand), var(--color-brand) 30%);
}
.pill--solid {
  --pill-bg: var(--color-brand);
  --pill-fg: var(--color-on-brand);
  --pill-border: var(--color-brand);
}
.pill--complement {
  --pill-bg: var(--color-brand-complement);
  --pill-fg: var(--color-on-brand-complement);
  --pill-border: var(--color-brand-complement);
}
.pill--outline {
  --pill-bg: transparent;
  --pill-fg: var(--color-text);
  --pill-border: var(--color-outline-strong);
}

/* Auf --dark-Bändern: neutrale/Outline-Pills auf helle Alphas umstellen;
   solide/complement bleiben unverändert (poppen auf Dunkel).                 */
.section--dark .pill {
  --pill-bg: color-mix(in srgb, var(--color-on-inverse) 12%, transparent);
  --pill-fg: var(--color-on-inverse);
  --pill-border: color-mix(in srgb, var(--color-on-inverse) 22%, transparent);
}
.section--dark .pill--outline {
  --pill-bg: transparent;
  --pill-border: color-mix(in srgb, var(--color-on-inverse) 45%, transparent);
}
.section--dark .pill--solid {
  --pill-bg: var(--color-brand);
  --pill-fg: var(--color-on-brand);
  --pill-border: var(--color-brand);
}
.section--dark .pill--complement {
  --pill-bg: var(--color-brand-complement);
  --pill-fg: var(--color-on-brand-complement);
  --pill-border: var(--color-brand-complement);
}

/* --- Runde Bilder (S/W) ------------------------------------------------- */
.round-media {
  aspect-ratio: 1;
  width: 100%;
  height: auto;              /* überschreibt das HTML-height beim Skalieren */
  max-width: 320px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);      /* echte Fotos werden automatisch S/W */
  background: var(--color-surface-2);
}
.figure { margin: 0; }
.figure figcaption {
  margin-top: var(--space-16);
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* --- Slider ------------------------------------------------------------- */
.slider { position: relative; }

/* Seitenverhältnis-Presets. Alternativ inline: style="--slide-ratio: 2 / 1"
   Für ganz schmale Streifen z. B. 3 / 1 oder 21 / 9.                        */
.slider--21x9 { --slide-ratio: 21 / 9; }
.slider--16x9 { --slide-ratio: 16 / 9; }
.slider--3x2  { --slide-ratio: 3 / 2; }
.slider--4x3  { --slide-ratio: 4 / 3; }
.slider--1x1  { --slide-ratio: 1 / 1; }
.slider--3x1  { --slide-ratio: 3 / 1; }

/* Viewport-Modus: Header + Slider füllen gemeinsam die sichtbare Browserhöhe.
   --header-height wird von main.js auf die gemessene Header-Höhe gesetzt. */
.slider--viewport .slider__track {
  block-size: var(--slide-viewport-height);
}
.slider--viewport .slide {
  aspect-ratio: auto;
  block-size: 100%;
  min-block-size: 0;
}

.slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Scrollbar ausblenden (Firefox) */
}
.slider__track::-webkit-scrollbar { display: none; } /* WebKit */

.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: var(--slide-ratio);
  min-height: var(--slide-min);
  display: flex;
  align-items: flex-end;                  /* Inhalt unten */
  overflow: hidden;
  isolation: isolate;
}
.slide__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  z-index: -2;
}
.slide::after {                           /* dunkler Verlauf für Lesbarkeit */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      var(--color-scrim) 0%,
      rgba(20, 20, 19, 0.15) 45%,
      rgba(20, 20, 19, 0) 75%);
  z-index: -1;
}
.slide__inner {                           /* trägt zusätzlich .container */
  position: relative;
  z-index: 1;
  padding-block-end: clamp(var(--space-48), 6vw, var(--space-80));
}
.slide__content {
  color: #fff;
  max-width: 46ch;
}
.slide__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: #fff;
}
.slide__text {
  margin-top: var(--space-16);
  font-size: var(--text-h5);
  color: rgba(255, 255, 255, 0.92);
}
.slide__content .button { margin-top: var(--space-32); }

/* Pfeile – auf Desktop, blenden beim Hover über dem Slider ein */
.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.slider__arrow svg { inline-size: 22px; block-size: 22px; }
.slider__arrow:hover { background: var(--color-accent); }
.slider__arrow:disabled { cursor: default; opacity: 0.28; }
.slider__arrow--prev { left: var(--space-24); }
.slider__arrow--next { right: var(--space-24); }
.slider:hover .slider__arrow,
.slider__arrow:focus-visible { opacity: 1; }
.slider:hover .slider__arrow:disabled { opacity: 0.28; }

@media (hover: none) {                    /* Touch-Geräte: keine Pfeile */
  .slider__arrow { display: none; }
}

/* Dot-Indikatoren unter/über dem Slider (hier: überlagert, unten zentriert) */
.slider__dots {
  position: absolute;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: var(--space-16);
}
.slider__dot {
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.slider__dot::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slider__dot[aria-current="true"]::before {
  background: var(--color-accent);
  transform: scale(1.25);
}

/* --- Kontaktformular ---------------------------------------------------- */
.form { max-width: 44rem; margin-top: var(--space-40); }
.form__row { margin-bottom: var(--space-24); }
.form__columns {
  display: grid;
  gap: 0 var(--space-16);
}
@media (min-width: 36em) {
  .form__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Honeypot: für Menschen (und Screenreader) unsichtbar, für Bots ein Köder */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 600;
  margin-bottom: var(--space-8);
}
.form input,
.form textarea,
.form select {
  width: 100%;
  padding: var(--space-16);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-control);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible {
  border-color: var(--color-outline-strong);
  box-shadow: var(--shadow-focus);
}
@media (forced-colors: active) {
  .form input:focus-visible,
  .form textarea:focus-visible,
  .form select:focus-visible { box-shadow: none; }
}
.form textarea { min-height: 8rem; resize: vertical; }
.form .button { margin-top: var(--space-8); }
.form[aria-busy="true"] .button[type="submit"] {
  cursor: wait;
  opacity: 0.72;
}

/* Wird von main.js nur für Formulare an send.php erzeugt. Text + Kante
   kennzeichnen den Zustand auch ohne alleinige Abhängigkeit von Farbe. */
.form__status {
  max-width: 42rem;
  margin-top: var(--space-16);
  padding: var(--space-16);
  border-inline-start: 4px solid var(--color-brand-2);
  border-radius: var(--radius-control);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  background: var(--color-surface-brand-2);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: var(--leading-ui);
}
.form__status[data-state="error"] {
  border-inline-start-color: var(--color-brand-complement);
  background: var(--color-surface-complement);
}
.form__status[hidden] { display: none; }
.form__status:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 3px;
}

/* Kompakte Formularvariante innerhalb eines Overlays. */
.form--overlay {
  max-width: none;
  margin-top: var(--space-32);
}

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--color-surface-2); border-top: var(--border); }

/* Dunkle Variante – z. B. als voll breiter Abschluss im Full-Width-Layout  */
.site-footer--dark {
  background: var(--color-inverse);
  border-top: none;
  color: var(--color-on-inverse);
}

.footer-top {
  padding-block: var(--section-padding-block);
  display: grid;
  gap: var(--space-40);
}
@media (min-width: 48em) {
  /* Entweder freie Tracks über --footer-columns oder gleiche Spalten über
     --footer-cols. Ohne Konfiguration bleibt der Footer dreispaltig. */
  .footer-top {
    grid-template-columns:
      var(--footer-columns, repeat(var(--footer-cols, 3), minmax(0, 1fr)));
    gap: var(--gutter);
  }
}
.footer-col :where(h2, .footer-title) {
  font-size: var(--text-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: var(--space-16);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li + li { margin-top: var(--space-8); }
.footer-col a { color: var(--color-text); text-decoration: none; }
.footer-col a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.18em;
}
.footer-col address { font-style: normal; color: var(--color-text-2); }
.footer-col p { color: var(--color-text-2); max-width: var(--measure); }
.footer-feedback-link {
  display: inline-block;
  margin-top: var(--space-24);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.footer-feedback-link:hover { background: var(--link-highlight); }

.footer-bottom { border-top: var(--border); }   /* Trenner über volle Breite */
.footer-bottom__inner {
  padding-block: var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--color-text-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-16);
}
.footer-bottom .heart { color: var(--color-accent-strong); }

/* Farbanpassungen für die dunkle Variante. Überschriften nutzen explizit den
   kontrastreichen Inverse-Ton, damit sie auch im erzwungenen Light-Theme auf
   der dauerhaft dunklen Fläche sichtbar bleiben. */
.site-footer--dark .footer-col :where(h2, .footer-title) { color: var(--color-on-inverse); }
.site-footer--dark .footer-col a,
.site-footer--dark .footer-col address,
.site-footer--dark .footer-col p,
.site-footer--dark .footer-feedback-link { color: rgba(255, 255, 255, 0.85); }
.site-footer--dark .footer-bottom      { border-top-color: rgba(255, 255, 255, 0.14); }
.site-footer--dark .footer-bottom__inner { color: rgba(255, 255, 255, 0.6); }
.site-footer--dark .heart              { color: var(--color-accent); }

/* 6. -------------------------------------------------- HILFSKLASSEN / A11Y -- */
/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* Skip-Link */
.skip-link {
  position: absolute;
  left: var(--space-16); top: var(--space-16);
  z-index: 100;
  background: var(--color-text);
  color: var(--color-surface);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-small);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Reduced Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .slider__track { scroll-behavior: auto; }
}

/* ===========================================================================
   Overlay / Scrim — wiederverwendbare modale Ebene
   Basis für: Cookie-Dialog, Bild-Lightbox, Kontakt-Formular-Overlay.
   Steuerung über main.js (Kitty.overlay.open/close). Der Scrim ist die
   abdunkelnde Fläche, das .modal die zentrierte Karte darauf.
   =========================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--space-24);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease);
}

.modal {
  width: 100%;
  max-width: 40rem;
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  padding: clamp(var(--space-24), 4vw, var(--space-40));
  transform: translateY(8px);
  transition: transform var(--dur) var(--ease);
}
.scrim.is-open .modal { transform: none; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.modal__title {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}
.modal__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface-container);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.modal__close > span[aria-hidden="true"] {
  position: relative;
  display: block;
  inline-size: 1rem;
  block-size: 1rem;
  font-size: 0;
}
.modal__close > span[aria-hidden="true"]::before,
.modal__close > span[aria-hidden="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1rem;
  block-size: 2px;
  border-radius: var(--radius-full);
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal__close > span[aria-hidden="true"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal__close:hover {
  background: var(--color-surface-tint);
  border-color: var(--color-outline-strong);
}

/* Varianten für spätere Nutzung */
.modal--wide  { max-width: 60rem; }
.modal--media {              /* z. B. Lightbox: Bild randlos */
  max-width: min(92vw, 1100px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Optionaler Darstellungsmodus: auf kleinen Viewports füllt das Modal die
   sichtbare Browserfläche, ab dem gemeinsamen 48-em-Breakpoint gelten wieder
   unverändert die normalen .scrim-/.modal-Regeln. Der Modifier sitzt am
   Scrim, weil sowohl dessen Außenabstand als auch die Modal-Geometrie wechseln. */
@media (max-width: 47.999em) {
  .scrim--fullscreen-mobile {
    place-items: stretch;
    padding: 0;
    overflow: hidden;
  }
  .scrim--fullscreen-mobile .modal {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding:
      calc(var(--space-24) + env(safe-area-inset-top))
      calc(var(--space-24) + env(safe-area-inset-right))
      calc(var(--space-24) + env(safe-area-inset-bottom))
      calc(var(--space-24) + env(safe-area-inset-left));
    background: var(--color-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Body-Sperre, während ein Overlay offen ist (Scrollbar-Breite kompensiert JS) */
.has-overlay { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .scrim, .modal { transition: none; }
}

/* ===========================================================================
   Inhaltsseiten (Impressum, Datenschutz, Über uns …)
   Bausteine für mehrseitige Sites. Header/Footer sind auf jeder Seite gleich
   (reines Static, kein Build → pro Seite dupliziert; kanonische Kopie in
   templates/). Jede Inhaltsseite beginnt mit einem Seitentitel (.page-header).
   =========================================================================== */

/* Seitentitel – auf ALLEN Inhaltsseiten. Als erste Section im .frame bekommt er
   automatisch den großzügigen Außenrand oben.                                 */
.page-title { font-size: var(--text-h1); }

/* Optional ausblendbar: h1 bleibt für SEO/Screenreader im DOM, nimmt aber
   keinen Platz ein; der folgende Block erhält dann den Außenrand oben.        */
.page-header--hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.frame > .page-header--hidden:first-child + .section {
  padding-top: calc(var(--section-padding-block) + var(--frame-padding-block));
}

/* Fließtext über die volle Container-Breite (statt Lesebreite --measure).
   Bewusst nur für kurze Absätze – lange Texte besser mit .prose (66ch).       */
.prose--wide { max-width: none; }

/* Medien über die volle Breite (z. B. 16:9). Ratio per --media-ratio. */
.media {
  display: block;
  width: 100%;
  height: auto;              /* Ratio steuert die Höhe, nicht das HTML-Attribut */
  aspect-ratio: var(--media-ratio, 16 / 9);
  object-fit: cover;
  border-radius: var(--radius-large);
  background: var(--color-surface-2);
  filter: grayscale(1);      /* echte Fotos automatisch S/W, wie im Kit üblich */
}

/* 4-Spalten-Raster (kleine Headline + Text je Spalte). Responsiv: 1 → 2 → 4.
   align-items:start, weil Textspalten oben bündig stehen sollen.              */
.cols--4 { align-items: start; }
@media (min-width: 40em) { .cols--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .cols--4 { grid-template-columns: repeat(4, 1fr); } }
.cols--4 h3 {
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-h5);
}

/* Inhaltsverzeichnis (z. B. lange Datenschutzseite) */
.toc {
  margin: 0;
  padding: var(--space-24);
  background: var(--color-surface-2);
  border: var(--border);
  border-radius: var(--radius-container);
}
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li + li { margin-top: var(--space-8); }
.toc a { color: var(--color-text); }

/* Untergeordnete Rechts-Links im Footer-Bottom (Impressum, Datenschutz …) */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  align-items: center;
}
.footer-legal a { color: inherit; }

/* ===========================================================================
   7. LANDING- / MARKETING-BAUSTEINE  (Kitty-Erweiterung)
   ---------------------------------------------------------------------------
   Zusätzliche, wiederkehrende Sektionen für Landing- und Produktseiten.
   Alles folgt der bestehenden Logik: Tokens statt roher Werte, gleiche
   Klassennamens-Systematik, ohne JavaScript nutzbar (FAQ = native <details>).
   Brand 1 bleibt Signalfarbe (nur interaktiv / als kurze Signatur); die
   Feature-Icons sind bewusst monochrom, damit die Regel erhalten bleibt.
   =========================================================================== */

:root { --icon-size: 28px; }   /* Standard-Icon-Kantenlänge (Feature-Grid, UI) */

/* --- Statischer Hero (ohne Slider) -------------------------------------- */
/* Ruhiger Seiteneinstieg mit großer Headline. Als erste Section im .frame
   erbt er automatisch den großzügigen Außenrand oben.                        */
.hero { text-align: center; }
.hero__title { font-size: var(--text-h1); text-wrap: balance; }
.hero .lead {
  margin-inline: auto;
  margin-top: var(--space-24);
  font-size: var(--text-lead);
  color: var(--color-text-2);
}
.hero .button-row { margin-top: var(--space-40); justify-content: center; }

/* --- Button-Reihe (mehrere Buttons nebeneinander, umbrechend) ----------- */
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.section--center .button-row,
.cta .button-row { justify-content: center; }

/* --- Icon-Konvention ----------------------------------------------------- */
/* Monochrome Inline-SVGs, die die Textfarbe erben (stroke="currentColor").
   Größe über --icon-size. Kein Icon-Font, keine externe Bibliothek.          */
.icon {
  display: inline-block;
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  flex: none;
  color: currentColor;
}

/* --- Feature-Grid: Blöcke mit Icon + Headline + Text -------------------- */
/* Responsiv 1 -> 2 -> 3 Spalten. Sechs Einträge ergeben das 2x3-Raster.
   Spaltenzahl bei Bedarf per style="--feature-cols: 3".                       */
.feature-grid { display: grid; gap: var(--space-56); align-items: start; }
@media (min-width: 40em) { .feature-grid { grid-template-columns: 1fr 1fr; gap: var(--gutter); } }
@media (min-width: 64em) {
  .feature-grid { grid-template-columns: repeat(var(--feature-cols, 3), 1fr); }
}
.feature__icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-bottom: var(--space-24);
  border: var(--border);
  border-radius: var(--radius-container);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.feature h3 {
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-h5);
}
.feature h3 + p { margin-top: var(--space-16); }
.feature p { color: var(--color-text-2); max-width: 42ch; }

/* --- Zahlen / Kennwerte -------------------------------------------------- */
.stats { display: grid; gap: var(--space-40); grid-template-columns: 1fr; }
@media (min-width: 40em) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__label {
  margin-top: var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  letter-spacing: 0.02em;
  color: var(--color-text-2);
}

/* --- Schritte / Prozess -------------------------------------------------- */
/* Nummer als Signatur mit Marken-Unterstrich (wie die Overline).             */
.steps { display: grid; gap: var(--space-40); align-items: start; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }
.step__num {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--color-text);
  padding-bottom: var(--space-16);
  border-bottom: 3px solid var(--color-accent);
  margin-bottom: var(--space-24);
}
.step h3 {
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-h5);
}
.step h3 + p { margin-top: var(--space-16); }
.step p { color: var(--color-text-2); }

/* --- Zitat / Testimonial ------------------------------------------------- */
.quote blockquote {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.quote figcaption,
.quote__cite {
  margin-top: var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--color-text-2);
  font-style: normal;
}

/* --- FAQ (native <details>, kein JavaScript nötig) ---------------------- */
.faq { max-width: var(--measure); }
.faq__item { border-top: var(--border); }
.faq__item:last-of-type { border-bottom: var(--border); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
  padding-block: var(--space-24);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-h5);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1;
  color: var(--color-text-3);
  transition: color var(--dur) var(--ease);
}
.faq__item[open] summary::after { content: "\2013"; }  /* – */
.faq__item summary:hover::after { color: var(--color-accent-strong); }
.faq__answer { padding-bottom: var(--space-24); color: var(--color-text-2); max-width: var(--measure); }

/* --- Callout ------------------------------------------------------------- */
/* Hervorgehobener Absatz mit linker Brand-Kante als Signatur.                 */
.callout {
  display: block;
  font-family: var(--font-ui);
  background: var(--callout-bg, var(--color-surface-2));
  border: var(--border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-container);
  /* Die Signaturkante bleibt gerade; nur die gegenüberliegende Seite rundet. */
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  padding: var(--space-16) var(--space-24);
  color: var(--color-text);
}
.callout + .callout { margin-top: var(--space-16); }

/* --- Farbfelder / Token-Vorschau (Styleguide) --------------------------- */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.swatch { display: flex; flex-direction: column; gap: var(--space-8); font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--leading-ui); }
.swatch__chip { inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius-container); border: var(--border); }
.swatch__label { color: var(--color-text); }
.swatch__value { color: var(--color-text-3); font-family: var(--font-mono); font-size: var(--text-tiny); line-height: var(--leading-mono); }

/* --- Code (inline und Block) -------------------------------------------- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  border: var(--border);
  border-radius: var(--radius-4);
  padding: 0.1em 0.4em;
}
pre {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: var(--leading-mono);
  background: var(--color-surface-2);
  border: var(--border);
  border-radius: var(--radius-container);
  padding: var(--space-24);
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* --- Dunkle Section-Variante (immer dunkles Full-Bleed-Band) ------------ */
.section--dark { background: var(--color-inverse); color: var(--color-on-inverse); }
.section--dark :where(h1, h2, h3, h4, h5) { color: var(--color-on-inverse); }
.section--dark p,
.section--dark .lead { color: rgba(255, 255, 255, 0.82); }
.section--dark .overline { color: rgba(255, 255, 255, 0.7); }
.section--dark .stat__label { color: rgba(255, 255, 255, 0.7); }
/* (Button-Verhalten auf --dark-Bändern steht jetzt im Buttons-Block.) */

/* --- CTA-Band ------------------------------------------------------------ */
.cta { text-align: center; }
.cta :where(.lead, .section-intro) { margin-inline: auto; }
/* Abstand Headline/Lead -> Buttons (sonst kleben sie an der Überschrift). */
.cta .button-row { margin-top: var(--space-40); }

/* --- Navigation: Flyout-Untermenü (Nav-Punkt mit Unterseiten) ------------ */
/* Zwei Interaktionen in einem Baustein:
     1. KLICK auf den Punkt  -> führt auf die erste Seite (z. B. Übersicht).
     2. HOVER / FOKUS         -> zeigt die Unterseiten als luftiges Kontextmenü.
   Reveal per :hover (Maus) und .is-open (main.js für Tastatur/Escape/aria).
   Ohne JS: Hover funktioniert; Tastatur fällt sauber auf den Seitenlink zurück.
   Struktur-Regeln sind unter .nav__item--has-menu gescoped, damit sie die
   Basis-Nav (.nav ul / .nav a) sicher überschreiben.                          */
.nav__item--has-menu { position: relative; }
.nav__link-row { display: flex; align-items: center; }
.nav__submenu-toggle {
  display: none;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.js .nav__submenu-toggle { display: inline-grid; }
.nav__submenu-toggle:hover { background: var(--color-surface-2); }
.nav__caret {
  display: block;
  inline-size: 10px;
  block-size: 6px;
  color: var(--color-text-3);
  transition: transform var(--dur) var(--ease);
}
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu.is-open .nav__caret { transform: rotate(180deg); }

.nav__item--has-menu .nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 14rem;
  margin: 0;
  padding: var(--space-8);
  list-style: none;
  display: block;                          /* überschreibt .nav ul (flex) */
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.nav__item--has-menu:hover > .nav__submenu,
.nav__item--has-menu:focus-within > .nav__submenu,
.nav__item--has-menu.is-open > .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.nav__item--has-menu .nav__submenu li { border: 0; margin: 0; }
.nav__item--has-menu .nav__submenu a {
  display: block;
  padding: var(--space-16) var(--space-24);    /* bewusst luftig */
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-small);
  white-space: nowrap;
}
.nav__item--has-menu .nav__submenu a::after { display: none; }  /* kein Unterstrich hier */
.nav__item--has-menu .nav__submenu a:hover,
.nav__item--has-menu .nav__submenu a:focus-visible { background: var(--color-surface-2); }
.nav__item--has-menu .nav__submenu a[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--color-accent);   /* aktive Unterseite: Brand-Kante */
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
/* Der Elternpunkt bleibt visuell aktiv, wenn eine seiner Unterseiten aktiv ist.
   aria-current bleibt dabei korrekt nur am Link der tatsächlichen Seite. */
.nav__item--has-menu:has(.nav__submenu a[aria-current="page"]) > .nav__link-row > a::after {
  transform: scaleX(1);
}

/* Mobile (im Burger-Menü): Untermenü inline und eingerückt statt Flyout. */
@media (max-width: 47.99em) {
  .nav__link-row { justify-content: space-between; }
  .nav__item--has-menu .nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 var(--space-8) 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .js .nav__item--has-menu .nav__submenu { display: none; }
  .js .nav__item--has-menu.is-open .nav__submenu { display: block; }
  .nav__item--has-menu .nav__submenu li { border-top: 0; }
  .nav__item--has-menu .nav__submenu a {
    padding-left: var(--space-40);               /* Einrückung = Hierarchie */
    font-weight: 400;
    color: var(--color-text-2);
  }
  .nav__item--has-menu .nav__submenu a[aria-current="page"] { color: var(--color-text); }
}

/* Rechtsbündig öffnen (äußerster rechter Nav-Punkt, damit nichts aus dem Viewport ragt). */
.nav__item--has-menu .nav__submenu--end { left: auto; right: 0; }

/* Weitere Lexend-Schnitte (selbst gehostet). Werden nur geladen,
   wenn eine Seite den jeweiligen font-weight tatsächlich nutzt (z. B. die
   Typografie-Beispielseite). Die Kern-Headlines bleiben auf 600. */
@font-face { font-family:"Lexend"; src:url("fonts/lexend-latin-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Lexend"; src:url("fonts/lexend-latin-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Lexend"; src:url("fonts/lexend-latin-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* --- Karten (verlinkbare Vorschau-Kacheln) ------------------------------ */
/* Für Übersichts-/Hub-Seiten. Ganze Karte klickbar (a.card).                 */
.cards { display: grid; gap: var(--gutter); }
@media (min-width: 40em) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .cards { grid-template-columns: repeat(var(--cards-cols, 3), 1fr); } }
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-container);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover,
a.card:focus-visible { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card h3 {
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4);
}
.card p { margin-top: var(--space-16); color: var(--color-text-2); }
.card__more {
  margin-top: var(--space-24);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--color-text);
}
.card__more::after { content: " \2192"; color: var(--color-accent-strong); }

/* ===========================================================================
   8. THEMING & BEWEGUNG: Umschalter, weiche Seitenübergänge
   ---------------------------------------------------------------------------
   Farbschema kommt aus den light-dark()-Tokens in :root. Hier: der optische
   Umschalter, die weichen Übergänge und die Bewegungs-Regeln. Grundsatz:
   Jede Animation trägt ein Easing (--ease) und respektiert reduzierte Bewegung.
   =========================================================================== */

/* --- Farbschema-Umschalter (Sonne/Mond) --------------------------------- */
.nav { margin-left: auto; }          /* schiebt Nav + Umschalter nach rechts */
.theme-toggle {
  display: none;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.js .theme-toggle { display: inline-grid; }
.theme-toggle:hover { background: var(--color-surface-2); }
.theme-toggle svg { inline-size: 20px; block-size: 20px; }

/* Passendes Icon zum AKTIVEN Schema: hell -> Mond (Wechsel zu dunkel),
   dunkel -> Sonne (Wechsel zu hell). Deckt System- und manuelle Wahl ab. */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: block; }
}
:root[data-theme="dark"]  .theme-toggle__moon { display: none; }
:root[data-theme="dark"]  .theme-toggle__sun  { display: block; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle__sun  { display: none; }

@media (max-width: 47.99em) {
  .theme-toggle { position: absolute; left: var(--pad-inline); top: 50%; transform: translateY(-50%); }
}

/* --- Weiche Seitenübergänge --------------------------------------------- */
/* 1) Moderne Browser: Cross-Document View Transitions -> sanftes Überblenden
      beim Seitenwechsel (kein hartes Aufblitzen). Mit Easing.                 */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease);
}
/* 2) Überall (auch lokal per file:// und in älteren Browsern): sanftes
      Einblenden des Inhalts beim Laden. Nur Opacity -> keine Layout-Sprünge. */
@keyframes kitty-fade-in { from { opacity: 0; } to { opacity: 1; } }
main { animation: kitty-fade-in 300ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* --- Robustheit: kein horizontales Überlaufen --------------------------- */
/* Grid-/Flex-Items dürfen unter ihre Inhaltsbreite schrumpfen (Default ist
   min-width:auto). Sonst sprengt breiter Inhalt (z. B. ein <pre>-Codeblock)
   die Spalte und die Seite scrollt auf Mobile horizontal weg.                */
.cols, .cols > *,
.feature-grid > *, .cards > *, .steps > *, .stats > *, .grid > * { min-width: 0; }
pre { max-width: 100%; }

/* --- Text-Hierarchie als Hilfsklassen ----------------------------------- */
/* Schnelles Auszeichnen der Fließtext-Gewichtung (Primary/Secondary/…).      */
.text-primary   { color: var(--color-text); }
.text-secondary { color: var(--color-text-2); }
.text-tertiary  { color: var(--color-text-3); }
.text-disabled  { color: var(--color-text-disabled); }


/* =============================================================================
   Sprachumschalter — .lang-switch   (EINFÜGEN in styles.css)

   Platzierung: im Komponenten-Teil von styles.css, sinnvoll direkt hinter
   .theme-toggle (beide sitzen rechts im Header, .site-header__inner).

   Wechselt zwischen den Sprachbäumen /<lang>/. BEWUSST ohne .js-Gate und ohne
   JavaScript: es sind echte Links auf die Gegenstücke der Seite (dieselben
   URLs wie ihre hreflang-Alternates). Sprache ist Kerninhalt, kein Darstellungs-
   State — deshalb nie ein JS-Textswap. Anders als .theme-toggle (nur mit .js
   sichtbar) muss der Sprachumschalter IMMER da sein.

   Skaliert von zwei bis wenige Sprachen; bei sehr vielen Sprachen stattdessen
   das nav-flyout-Muster verwenden. Die aktive Sprache trägt aria-current und
   ist nicht verlinkt.
============================================================================= */
.lang-switch { flex: none; }

.lang-switch__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}

.lang-switch__link,
.lang-switch__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--space-40);           /* ausreichendes Touch-Ziel */
  padding-inline: var(--space-16);
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: var(--text-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.lang-switch__link {
  color: var(--color-text-secondary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-switch__link:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

/* Aktuelle Sprache: sichtbar aktiv, nicht interaktiv. */
.lang-switch__current {
  color: var(--color-text);
  background: var(--color-surface-2);
  cursor: default;
}

/* Auf dunklen Bändern (.section--dark) erbt der Umschalter helle Kanten über
   die vorhandenen --color-*-Tokens automatisch — keine Extra-Regel nötig. */

/* Mobil: Der Header zentriert das Logo und positioniert nav-toggle/theme-toggle
   absolut an den Rändern. Der Sprachumschalter rückt dann auf eine eigene, unter
   dem Logo zentrierte Zeile. Wer ihn lieber ins geöffnete Menü legt, verschiebt
   die .lang-switch-Markup in die mobile .nav (Projektentscheidung, site.css). */
@media (max-width: 47.99em) {
  .lang-switch { order: 3; flex-basis: 100%; }
  .lang-switch__list { justify-content: center; }
}