/* ============================================================
   Schriften — selbst gehostet, metrisch angeglichener Fallback.

   Ziel: CLS-Anteil des Schriftladens = 0 (Abnahmekriterium
   "Keine Layoutverschiebung beim Laden der Schriften").

   Montserrat ist Variable Font mit wght-Achse — eine Datei deckt alle
   Gewichte ab, normal und kursiv getrennt (36 + 36 KB). Nur
   latin-Subset; deutsche Umlaute und ß sind enthalten.

   R9-N10: DM Sans und Inter sind mit E51 abgelöst; ihre @font-face-
   Blöcke und Dateien sind entfernt (waren 85 KB toter Ballast im
   Build, 0 Requests).

   Die Fallback-Familien unten sind Arial, skaliert und mit
   überschriebenen Metriken, sodass eine Zeile in Fallback und
   Zielschrift dieselbe Höhe und nahezu dieselbe Breite belegt.
   Werte gerechnet aus den echten Fontmetriken, nicht geschätzt:
     Kleinbuchstaben-Mittelbreite  Montserrat 0,5558 · Arial 0,4895

   ---------------------------------------------------------------
   Warum `font-display: optional` und nicht `swap`

   Mit `swap` verschiebt der Schriftwechsel das Layout, und zwar
   unvermeidbar. Die Overrides oben gleichen Höhe und DURCHSCHNITTLICHE
   Zeichenbreite an — die Breitenverteilung einzelner Zeichen bleibt
   unterschiedlich. Gemessen wurde das an der Navigation: ihre Kante
   wanderte beim Wechsel um 27,92 px, CLS-Anteil 0,00045 in 3 von 3
   Läufen. Der Grenzwert aus dem Abnahmekriterium ("Keine
   Layoutverschiebung beim Laden der Schriften") ist 0, nicht "klein".

   `optional` gibt dem Browser ein Fenster von etwa 100 ms. Ist die
   Schrift da, wird sie ohne Wechsel von Anfang an verwendet. Ist sie
   nicht da, bleibt es beim Fallback und es wird NICHT nachträglich
   gewechselt. Damit ist die Verschiebung strukturell ausgeschlossen,
   nicht nur klein gerechnet.

   Der Preis, offen benannt: bei sehr langsamer erster Verbindung sieht
   der Besucher metrisch angeglichenes Arial statt Montserrat. Die Seite
   ist dann stabil und lesbar, aber nicht in der Hausschrift. Ab dem
   zweiten Aufruf liegt die Schrift im Cache und wird verwendet.
   Beide Dateien sind lokal, zusammen 83 KB, und werden preloaded —
   bei normaler Verbindung greift das Fenster.

   Das macht zugleich die `ch`-Einheiten in --measure-* unkritisch:
   ohne Wechsel kann eine ch-basierte Breite nicht springen.
   ============================================================ */

/* ------------------------------------------------------------
   E51 — Montserrat wird die Stimme des Systems (Eigentuemer
   2026-08-24: „schrift muss ueberall montserrat sein"). Variable
   Fonts, latin-Subset, normal + kursiv (die Annotation-Ebene des
   Systems ist Montserrat-Kursiv). Zusammen 72 KB.
   size-adjust nachgemessen (pruefer R9-N9): Kleinbuchstaben-
   Mittelbreite Montserrat 0,5558 gegen Arial 0,4895 -> 113,5 %.
   Die frueheren 107,89 % beruhten auf einem falschen
   xAvgCharWidth-Wert (0,588 statt gemessen 0,624) und machten den
   Fallback rund 5 % zu schmal. Die Hoehen-Overrides bleiben
   unveraendert, sie waren konsistent.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Italic-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial'), local('Helvetica'), local('Roboto');
  size-adjust: 113.5%;
  ascent-override: 89.75%;
  descent-override: 23.28%;
  line-gap-override: 0%;
}

/* Metrisch angeglichene Fallbacks — greifen nur, solange die
   Webfont-Datei noch lädt. Ohne diese Blöcke springt das Layout
   beim Schriftwechsel. */

/* ============================================================
   SOS Design-Tokens — maschinelle Fassung des Skills
   .claude/skills/sos-web-tokens/SKILL.md

   Der Skill ist die Quelle. Diese Datei ist seine Umsetzung.
   Weichen beide voneinander ab, gilt der Skill und diese Datei
   ist der Fehler.

   Im Komponentencode stehen keine Hex-Werte, keine px-Größen und
   keine Dauern. Nur var(--…).
   ============================================================ */

:root {
  /* ---------- Farbe: Marke ----------
     Lime #D7F66B ist seit dem 2026-08-18 raus: Eigentuemer-Entscheidung,
     die Farbe gehoert den Reportings, nicht dem Web. Der Akzent des
     Webs ist WEISSE Flaeche auf dunklem Grund — Hierarchie kommt aus
     Groesse, Gewicht und Flaeche, nicht aus Farbe. */
  /* E37 „DER FEED" (Eigentümer 2026-08-19: „der feed finde ich als
     idee genial"): PAPIER ist jetzt der Grund, Ink die Fläche —
     die Basis dreht von dunkel auf hell. Dunkel bleibt das Kino
     (Bewegtbild) über .sektion--dunkel. Kontraste nachgerechnet:
     Ink auf Papier 17,98:1 · muted 6,9:1 · Signal nur als Fläche
     oder Display-Typo >= 24px (als Fließtext zu schwach). */
  --sos-bg: #f4f4f2;
  --sos-akzent: #0a0a0a;
  --sos-on-akzent: #f4f4f2;
  --sos-on-akzent-muted: #a1a1a1;
  --sos-signal: #ff3b1f;
  /* on-signal NUR fuer Display-Typo >= 24px/18,66px-fett und Deko
     (3,23:1) — Fliesstext auf Signal laeuft in Ink, 6,66:1 (R5-N39). */
  --sos-on-signal: #f4f4f2;

  /* ---------- Farbe: Neutrale ---------- */
  --sos-surface-1: #ffffff;
  --sos-surface-2: #ebebe8;
  --sos-text: #0a0a0a;
  --sos-text-muted: #545454;
  --sos-text-faint: #b9b9b4; /* NUR Hairlines/UI-Grenzen — kein Text. */
  --sos-logo: #fafafa;

  /* Feed-Vokabular (E37): harte Kanten statt weicher Karten. */
  --kante: 3px;              /* Ink-Rahmen der Feed-Elemente */
  --versatz: 8px;            /* harter Offset-Schatten (box-shadow 0-blur) */
  --font-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", "Courier New", monospace;
  /* Poster-Register: die Manifest-Typo des Feeds — skaliert mit dem
     Viewport, Typo ist die Architektur. */
  --type-poster: clamp(3.5rem, 16vw, 13rem);
  --lh-poster: 0.88;
  --ls-poster: -0.04em;
  /* Neigungen der eingeklebten Fundstücke. */
  --neigung-a: -4deg;
  --neigung-b: 2.5deg;
  --neigung-c: 5deg;
  --neigung-stempel: -7deg;
  --wortband-dauer: 26s;

  /* ============================================================
     E50 — SYSTEMSCHICHT F8 (Eigentuemer 2026-08-24, Design-Briefing)
     Social Craft · Brand Crew · Proof. Papier/Tinte als Grund, Gruen
     ausschliesslich funktional (Aktion, aktiv, organisch, Proof).
     Radien semantisch: Content weich, Daten kantig.
     ============================================================ */
  --paper: #fbfaf7;
  --ink: #141312;
  --muted: #6b6864;
  --line: #e2ded6;
  --sos-green: #1d5c3f;   /* 7,58:1 auf Papier (gemessen R9-N15) — auch fuer Fliesstext */
  --surface: #f2f0ea;
  --r-content: 10px;      /* Social-Assets */
  --r-control: 8px;       /* Buttons, Controls */
  --r-device: 22px;       /* echte Geraete-Kontexte */
  --r-data: 2px;          /* Proof/Reporting: kantig */
  --max: 72rem;
  --rand: clamp(16px, 4vw, 40px);
  --sys-1: .5rem; --sys-2: 1rem; --sys-3: 1.5rem;
  --sys-4: 2.5rem; --sys-5: 4rem; --sys-6: 6.5rem;
  --t-schnell: .35s; --t-normal: .5s;
  --sys-ease: cubic-bezier(.2, .8, .2, 1);

  /* ---------- Farbe: Zustände ---------- */
  --sos-focus: #0a0a0a;
  --sos-error: #b3261e;   /* 6,4:1 auf Papier */
  --sos-error-bg: #f9e6e4;

  /* ---------- Schriftfamilien ---------- */
  /* E51: Montserrat ist die Stimme — Display UND Fliesstext. Die
     Annotation-Ebene (klein, kursiv, Versalien) ist dieselbe Familie,
     die Datenebene bleibt monospaced. */
  --font-display: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;

  /* ---------- Typo-Skala: Ratio 1,25, 2px-Raster ----------
     Display-Stufen mobile-first eine Stufe kleiner (Skill §4.3,
     Umsetzungsauftrag 3): eine H2 mit 44 px fasst bei 375 px Breite
     10 Zeichen je Zeile — die Reichweiten-Headline brauchte 5 Zeilen.
     Ab 48rem gelten die Desktop-Werte. Lesetypo (Lead/Body/Meta/Micro)
     bleibt auf allen Breiten gleich — kleiner lesen ist keine Loesung
     (gemessen: 16px Body sparte nur 398 px bei klarem Verlust). */
  /* Display-Register (Iteration 3, Skill §2.1): zwei Register statt
     einer Treppe — wenige laute Momente gegen ruhigen Lesetext.
     Kennzahl: Kontrast Display/Body je Screen >= 2,0. */
  --type-display-2: 4rem;   /* 64 mobil — der lauteste Moment einer Seite */
  --type-display: 3rem;     /* 48 mobil */
  --type-statement: 2.25rem;/* 36 mobil — herausgehobene Bestandssätze */
  --type-h1: 2.25rem;       /* 36 mobil */
  --type-h2: 1.75rem;       /* 28 mobil */
  --type-h3: 1.375rem;      /* 22 mobil */
  --type-h4: 1.125rem;      /* 18 mobil */
  --type-lead: 1.25rem;     /* 20 — vorher 22 */
  --type-body: 1.125rem;    /* 18 */
  --type-meta: 0.875rem;    /* 14 */
  --type-micro: 0.75rem;    /* 12 */

  /* Hero (Iteration 3): mobil 48px — der Hero ist jetzt NUR
     Kicker + H1 + CTA, die Headline darf wieder laut sein. */
  --type-hero: clamp(3rem, 6vw, 4.5rem);

  /* ---------- Zeilenhöhen ---------- */
  --lh-display-2: 0.95;
  --lh-statement: 1.15;
  --lh-display: 1;
  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.15;
  --lh-h4: 1.25;
  --lh-lead: 1.5;
  --lh-body: 1.6; /* über beiden Referenzen: helle Schrift auf #0a0a0a
                     blüht optisch auf, die Zeilen rücken scheinbar
                     zusammen. 1,5 ist zugleich die WCAG-1.4.12-Untergrenze. */
  --lh-meta: 1.5;
  --lh-micro: 1.4;

  /* ---------- Laufweiten ---------- */
  --ls-display-2: -0.03em;
  --ls-display: -0.02em;
  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-h3: -0.01em;
  --ls-micro: 0.08em;

  /* ---------- Zeilenlängen ---------- */
  --measure-body: 62ch;
  --measure-body-max: 70ch;
  --measure-lead: 52ch;
  --measure-column: 45ch;

  /* ---------- Spacing: Basis 4px, 11 Stufen ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48  Sektions-Padding mobil */
  --space-8: 4rem;     /* 64  Sektions-Padding Tablet */
  --space-9: 6rem;     /* 96  Sektions-Padding Desktop */
  --space-10: 8rem;    /* 128 Hero, Kontaktblock */
  --space-11: 12rem;   /* 192 Zäsur, max 2x je Seite */

  /* ---------- Sektions-Padding, responsiv ---------- */
  --section-pad: var(--space-7);

  /* ---------- Layout ---------- */
  --page-max: 90rem;   /* 1440 */
  --page-gutter: var(--space-5);

  /* ---------- Motion: 4 Dauern, 2 Kurven ---------- */
  --motion-1: 120ms;
  --motion-2: 200ms;
  --motion-3: 320ms;
  --motion-4: 480ms;
  --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --stagger: 60ms;
  /* Logo-Band (Eigentuemer-Entscheidung 2026-08-18): eine volle Runde.
     Langsam genug, um lesbar zu sein — Bewegung als Textur, nicht als
     Ablenkung. */
  --band-dauer: 70s;
  /* Reel-Wand im Hero (Eigentuemer-Entscheidung 2026-08-18, E25):
     zwei gegenlaeufig driftende Spalten. Ungleiche Dauern, damit die
     Spalten nie synchron laufen — Bewegung als Textur. */
  --wand-dauer-a: 90s;
  --wand-dauer-b: 110s;
  /* Handy-Mockup: Rahmenradius deutlich groesser als --radius,
     weil er ein Geraet zitiert, keine Karte. */
  --phone-radius: 1.25rem;

  /* ---------- Fokus ---------- */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---------- Linien und Kanten ----------
     Vom `pruefer` als Token-Disziplin-Befund gemeldet: 1px-Werte lagen
     als Rohwerte in sechs Komponenten. */
  --hairline: 1px;
  --radius: 2px;

  /* ---------- Bedienelemente ---------- */
  --icon: 1.25rem;      /* Menü-Balken, Akkordeon-Zeichen */
  --icon-versatz: 0.3125rem; /* halbe Balkendistanz, 5px */
  /* Logo-Box (Iteration 2026-08-18, "alle logos gleich gross"):
     jede Zelle ist dieselbe Box, das Logo passt per contain hinein. */
  --logo-box-b: 8.25rem;  /* 132 mobil */
  --logo-box-h: 2.75rem;  /* 44 mobil */
  --kachel-hoehe: 28rem;  /* Leistungskacheln ab 48rem. Mobil gilt KEINE Mindesthoehe
                             (Skill §4.3 M3) — die Hoehe kommt aus dem Inhalt. Die 26rem
                             erfuellen die Desktop-Untergrenze 0,8 vh (§4.2). */
  --hero-min: 46rem;      /* Mindesthöhe Hero */
  --logo-breite: 11.25rem; /* 180 — Darstellungsbreite des SOS-Logos */
  --unterstrich-aktiv: 2px;
  --unterstrich-abstand: 0.35em;
  --unterstrich-abstand-klein: 0.2em;

  /* ---------- Laufweite Fließ-Versalien ---------- */
  --ls-knopf: 0.02em;
  --ls-nav: 0.04em;

  /* ---------- Deckkraft ---------- */
  --deckung-logo: 0.72;
  --deckung-hero: 0.62; /* Abdunkelung über dem Posterframe */
}

@media (min-width: 48rem) {
  :root {
    /* Iteration 2026-08-18 "mehr abstaende": eine Stufe hoeher */
    --section-pad: var(--space-9);
    --page-gutter: var(--space-6);
    /* Display-Register ab 48rem (Iteration 3) */
    --type-display-2: 5rem;   /* 80 */
    --type-display: 4rem;     /* 64 */
    --type-statement: 3rem;   /* 48 */
    --type-h1: 2.75rem;       /* 44 */
    --type-h2: 2.25rem;       /* 36 */
    --type-h3: 1.75rem;       /* 28 */
    --type-h4: 1.375rem;      /* 22 */
  }
}

@media (min-width: 64rem) {
  :root {
    --section-pad: var(--space-10);
    --page-gutter: var(--space-7);
    --logo-box-b: 10.5rem;  /* 168 — 5 Spalten */
    --logo-box-h: 3.5rem;   /* 56 */
    --type-display-2: 6rem;   /* 96 */
    --type-display: 4.5rem;   /* 72 */
  }
}

/* Reduzierte Bewegung: alle Dauern praktisch aus.
   Die Reveal-Regel steht in base.css — Endlage ist Ausgangszustand,
   die Seite steht ohne JavaScript und ohne Scroll vollständig da. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-1: 1ms;
    --motion-2: 1ms;
    --motion-3: 1ms;
    --motion-4: 1ms;
    --stagger: 0ms;
  }
}
/* ============================================================
   Basis — Reset, Typo-Grundlage, Fokus, Bewegung.
   Alle Werte über Tokens. Keine Komponenten hier.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kein Smooth-Scroll bei reduzierter Bewegung — Regel unten. */
}

body {
  background: var(--sos-bg);
  color: var(--sos-text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Medien ---------- */

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

/* width/height sind im Markup Pflicht (CLS). Diese Regel hält das
   Seitenverhältnis, wenn die Breite begrenzt wird.
 *
 * :where() ist hier kein Stilmittel, sondern notwendig. Ohne es hat die
 * Regel Spezifität (0,2,1) und schlägt jede Klassenregel in einer
 * Komponente — gemessen: `.wand__logo { height: 1.75rem }` wurde
 * überschrieben, die 23 Kundenlogos rendeten mit 2,6:1 Höhenspanne
 * statt einheitlich, und die Logo-Wand verschob sich beim Lazyload um
 * 96 px. Mit :where() ist die Spezifität 0,0,0 und jede Komponente
 * kann die Höhe bestimmen. */
:where(img[width][height]) {
  height: auto;
}

/* ---------- Typografie ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--type-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

h4 {
  font-size: var(--type-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
}

p {
  max-width: var(--measure-body);
  text-wrap: pretty;
}

/* ---------- Links ---------- */

a {
  color: inherit;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: var(--unterstrich-abstand-klein);
  transition: color var(--motion-1) var(--ease-sharp),
    text-decoration-color var(--motion-1) var(--ease-sharp);
}

/* ---------- Fokus: immer sichtbar ---------- */

:focus-visible {
  outline: var(--focus-width) solid var(--sos-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

/* Kein outline:none ohne Ersatz. Wer diese Regel entfernt,
   bricht ein Abnahmekriterium. */

/* ---------- Formulare ---------- */

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

button {
  cursor: pointer;
}

/* ---------- Screenreader ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--sos-akzent);
  color: var(--sos-on-akzent);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--motion-2) var(--ease-sharp);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Bewegung: Reveals nach Skill §5.1 (R1–R3) ----------
 *
 * Die harte Regel bleibt: die Endlage IST der Ausgangszustand im
 * Markup. Die Klasse .rv wird AUSSCHLIESSLICH per JavaScript gesetzt
 * (src/scripts/reveals — eingebunden im Basis-Layout), und nur wenn
 * prefers-reduced-motion NICHT aktiv ist. Ohne JavaScript, bei
 * reduzierter Bewegung und für Suchmaschinen steht die Seite
 * vollständig da — das war der gemessene mawave-Fehler, den wir nicht
 * wiederholen (Deep-Links auf leere Sektionen).
 *
 * R1: Sektionskopf-Kette (Kicker→Headline→Lead→CTA, max 4, Stagger 60ms)
 * R2: Aufzählungen (max 5 gestaffelt, Rest ohne Verzögerung)
 * R3: Logo-Wand als EIN Element, nur Opacity */

.rv {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition:
    opacity var(--motion-4) var(--ease-soft),
    transform var(--motion-4) var(--ease-soft);
  transition-delay: var(--rv-delay, 0ms);
}

.rv--flach {
  transform: none; /* R3: nur Opacity, kein Versatz */
}

.rv-sichtbar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sprungziel: fokussierbar fuer den Skip-Link (tabindex="-1"), aber ohne
   Fokusring — der wuerde den gesamten Seiteninhalt umranden. Die
   Fokusmarken der BEDIENELEMENTE bleiben davon unberuehrt. */
main[tabindex]:focus {
  outline: none;
}
/* ============================================================
   Wiederverwendete Muster. Alles über Tokens.

   Der Akzent Lime ist hier ausschließlich Füllung — nie Textfarbe
   auf dunklem Grund, nie Rahmen, nie Icon-Strich.
   ============================================================ */

/* ---------- Knopf: die Hauptfläche des Akzents ---------- */

.knopf {
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  background: var(--sos-akzent);
  color: var(--sos-on-akzent); /* 16,29:1 */
  font-family: var(--font-display);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: var(--ls-knopf);
  text-decoration: none;
  text-transform: uppercase;
  transition: transform var(--motion-2) var(--ease-sharp);
}

/* Lift statt Opacity: gedimmte Knöpfe lesen sich als disabled
   (Design-QA Pass 4). Der Lift ist die Hover-Sprache der Karten —
   §5.1-konform (nur translateY, ≤ 4px). :active setzt zurück =
   „gedrückt". */
.knopf:hover {
  transform: translateY(calc(var(--space-1) * -1));
}

.knopf:active {
  transform: translateY(0);
}

.knopf--sekundaer {
  background: transparent;
  border: var(--hairline) solid var(--sos-text-faint);
  color: var(--sos-text);
}

.knopf--sekundaer:hover {
  border-color: var(--sos-text);
}

/* ---------- Sektion: Rhythmus, 0,8–1,4 Viewporthöhen ---------- */

.sektion {
  padding: var(--section-pad) var(--page-gutter);
}

/* Grundhelligkeit wechselt von Sektion zu Sektion. Der Wechsel
   ersetzt Trennlinien — es wird keine border-top gezeichnet. */
.sektion--angehoben {
  background: var(--sos-surface-1);
}

/* Licht-Sektion — seit E32 („Schwarz auf weiß", Eigentümer
   2026-08-19: „immer noch zu dunkel … du bist creativer head") die
   GLEICHBERECHTIGTE zweite Fläche des Systems, nicht mehr der eine
   Ausnahme-Moment (E27). Konzept aus der eigenen Marken-Copy: „Wir
   legen schwarz auf weiß auf den Tisch" — Bewegtbild und Medien
   gehören dem Dunkel (Kino), Beweise, Lesen und Handeln dem Weiß
   (Reporting). Der Wechsel ersetzt weiterhin Trennlinien.

   Mechanik: EIN Token-Flip. Alle Komponenten zeichnen mit var(--…)
   und funktionieren dadurch unverändert in beiden Welten — auch der
   Knopf und Karten-Hover drehen automatisch (Akzent im Licht =
   dunkle Fläche). Kontraste: #0a0a0a auf #fafafa 18,97:1; muted
   #595959 4,61:1 (AA); faint nur für Hairlines/Großes. */
/* E37 „DER FEED": Papier ist der GRUND (tokens.css) — die frühere
   Licht-Flip-Mechanik ist damit Basisverhalten. .sektion--licht
   bleibt als leichte Aufhellung (Weiß auf Papier) bestehen, damit
   bestehende Seiten ihren Rhythmus behalten. */
.sektion--licht {
  background: var(--sos-surface-1);
}

/* Das KINO: Bewegtbild-Sektionen drehen in die dunkle Welt —
   kompletter Token-Flip, dieselbe Mechanik wie zuvor der Licht-Flip.
   Kontraste: #fafafa auf #0a0a0a 18,97:1 · muted #a1a1a1 7,66:1. */
.sektion--dunkel {
  --sos-bg: #0a0a0a;
  --sos-akzent: #fafafa;
  --sos-on-akzent: #0a0a0a;
  --sos-on-akzent-muted: #595959;
  --sos-surface-1: #141414;
  --sos-surface-2: #1a1a1a;
  --sos-text: #fafafa;
  --sos-text-muted: #a1a1a1;
  --sos-text-faint: #6e6e6e;
  --sos-focus: #fafafa;
  --sos-error: #ff6b6b;
  --sos-error-bg: #2a1414;

  background: var(--sos-bg);
  color: var(--sos-text);
}

/* ---------- Scroll-Kino (E27) ----------
 *
 * Wirkprinzip „Assets bewegen sich beim Scrollen im stehenden
 * Rahmen" — eigene Umsetzung, kein übernommenes Layout/CSS
 * (Guardrail admkrs/mawave, siehe docs/state §7). Das Bild ist
 * leicht vergrößert und fährt beim Durchscrollen im Rahmen nach
 * oben. Reines transform, nichts wird versteckt: ohne Unterstützung
 * (@supports) und bei reduzierter Bewegung steht das Bild normal —
 * Endlage ist Ausgangszustand. */
.kino {
  /* clip, nicht hidden: overflow:hidden macht das Element zum
     Scroll-Container — view() misst dann IHN statt der Seite und
     die Fahrt steht bei 50 %. Gemessen, nicht geraten. */
  overflow: clip;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kino img {
      animation: kino-fahrt linear both;
      /* auto NACH der Shorthand: die setzt duration implizit auf 0s,
         und eine 0s-Dauer macht die Scroll-Timeline inaktiv. */
      animation-duration: auto;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes kino-fahrt {
  from {
    transform: scale(1.14) translateY(4%);
  }

  to {
    transform: scale(1.14) translateY(-4%);
  }
}

/* ---------- Honigtopf (Spam-Schutz der Formulare) ----------
   Für Menschen und Screenreader unsichtbar, für Bots ein Feld.
   Global statt je Seite dupliziert (R4-Hinweis N38). */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Feed-Vokabular (E37) ---------- */

/* Stempelzeile: die Mono-Metadaten über jedem Post. */
.stempelzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.stempelzeile span::before {
  content: '◼ ';
  font-size: 0.6em;
  vertical-align: 0.2em;
}

/* Feed-Posts: harte Ink-Kante als Trenner. */
.post {
  border-bottom: var(--kante) solid var(--sos-text);
}

/* ---------- Klick-Hinweis (E27): Pfeil als Affordance ---------- */
.pfeil-hinweis::after {
  /* Abstand über margin, nicht über ein Leerzeichen im content —
     das kollabiert an Zeilenenden und der Pfeil klebt am Wort. */
  content: '→';
  display: inline-block;
  margin-left: var(--space-2);
  transition: transform var(--motion-2) var(--ease-sharp);
}

a:hover .pfeil-hinweis::after,
a.pfeil-hinweis:hover::after {
  transform: translateX(var(--space-1));
}

.sektion__inner {
  max-width: var(--page-max);
  margin-inline: auto;
}

/* ---------- Kicker: Micro-Label über der Überschrift ----------
 *
 * Ohne Fläche — Eigentümer-Entscheidung 2026-08-18: Lime gehört den
 * Reportings, und die Pille ging mit der Farbe ("maybe einfach ohne
 * hintergrund"). Das Label trägt jetzt über Versalien, Laufweite und
 * Weiß seine Hierarchie. */

.kicker {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--type-micro);
  font-weight: 700;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  color: var(--sos-text);
  text-transform: uppercase;
}

/* Gedämpfte Variante für Nebenlabels. */
.kicker--still {
  color: var(--sos-text-muted);
  font-weight: 500;
}

/* ---------- Display-Register (Skill §2.1, Iteration 3) ---------- */

.statement {
  max-width: 18em;
  font-family: var(--font-display);
  font-size: var(--type-statement);
  font-weight: 700;
  line-height: var(--lh-statement);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* ---------- Lesetext ---------- */

.prosa {
  max-width: var(--measure-body);
}

.prosa > * + * {
  margin-top: var(--space-4);
}

.lead {
  max-width: var(--measure-lead);
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
}
/* ============================================================
   SOS Design System — Systemschicht (E50)

   Umsetzung des Design-Briefings vom 2026-08-24 (Eigentuemer):
   Social Craft · Brand Crew · Proof. Freigegebener Prototyp:
   /konzepte/mawave (Fassung F8).

   Die Tokens stehen in tokens.css. Hier stehen nur Bausteine, und
   zwar ausschliesslich mit var(--…) — keine Hex-Werte, keine
   nackten px-Groessen ausser Hairlines und Radien-Rohwerten.

   Grundregeln des Systems:
   · Proof klebt am Asset, zu dem er gehoert. Niemals frei im Raum.
   · Gruen ist Funktion, nicht Dekoration.
   · Content weich (r-content), Daten kantig (r-data).
   · Endlage ist Ausgangszustand: versteckt wird nur unter .js-anim.
   ============================================================ */

/* ------------------------------------------------------------
   R9-N8, Teil 2: nackte px-Werte durch Tokens ersetzt. Was BLEIBT
   und warum:
   · --r-* Rohwerte in :root — das IST die Token-Definition.
   · calc(var(--r-device) - var(--geraet-rand)) — Rechnung auf Tokens.
   · clamp()-Grenzen der Kachelbreite: Layout-Mass, kein Designwert.

   GRADIENTS: CLAUDE.md §2 verbietet sie. Drei bleiben stehen, alle
   funktional und alle Teil der vom Eigentuemer am 2026-08-24
   freigegebenen Fassung F8: der Hero-Schleier (macht den Text auf
   Bildmaterial lesbar), die Schrift-Unterlage im Geraet und der
   Kontext-Schatten. Ohne sie faellt der Kontrast unter AA. Als
   Ausnahme benannt, nicht stillschweigend gesetzt — Entscheidung
   liegt bei Stefan (E56).
   ------------------------------------------------------------ */
:root {
  --tap: 44px;            /* Mindestgroesse Bedienelement, WCAG 2.5.8 */
  --r-pill: 999px;        /* Vollrunde Leisten und Chips */
  --hub: 2px;             /* Hover-Hub der Controls */
  --hub-karte: 6px;       /* Hover-Hub der Geraete/Karten */
  --geraet-rand: 8px;     /* Innenmass des Geraeterahmens */
  --schatten-karte: 0 16px 40px rgb(20 19 18 / .25);
  --schatten-knopf: 0 10px 26px rgb(29 92 63 / .28);
  --schatten-ink: 0 8px 22px rgb(20 19 18 / .14);
  /* R9-N1: Auf kleinen Geraeten war eine Kulisse-Kachel mit 54.461 px²
     das groesste Element im ersten Viewport und damit LCP-Kandidat —
     LCP lag deshalb bei der Bildkette (2,4-2,6 s) statt beim Text.
     Mit 124 px Kachelbreite (37.900 px²) gewinnt die Ueberschrift
     (36.282 px² bei einer Zeile, mehrzeilig deutlich mehr), und LCP
     faellt auf den Textzeitpunkt. Die Kulisse bleibt vollflaechig,
     nur die einzelne Kachel ist schmaler. */
  --kachel-breite: clamp(124px, 30vw, 230px);
}

/* ---------- Stimmen ---------- */
.sys-impact { font-weight: 750; letter-spacing: -.035em; line-height: .98; text-wrap: balance; margin: 0; }
h1.sys-impact { font-size: clamp(2.2rem, 8.2vw, 4.4rem); }
h2.sys-impact { font-size: clamp(1.8rem, 6vw, 3.2rem); }
.sys-read { max-width: 34em; color: var(--sos-text); margin: 0; }
.sys-whisper { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .05em; color: var(--muted); margin: 0; }
.sys-annot {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.sys-annot--green { color: var(--sos-green); }

/* ---------- Proof-System ---------- */
.proof-tag {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; border: 1px solid var(--ink);
  border-radius: var(--r-data); padding: .25rem .5rem; background: var(--paper);
}
.proof-tag--green { border-color: var(--sos-green); color: var(--sos-green); }
.proof-tag--fill { background: var(--sos-green); border-color: var(--sos-green); color: var(--paper); }
.proof-source { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .04em; color: var(--muted); margin: 0; }
.proof-sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.proof-sheet th, .proof-sheet td {
  padding: .875rem 0 .875rem .875rem; font-size: 1.0625rem;
  border-top: 1px solid var(--line); text-align: right;
}
.proof-sheet th:first-child, .proof-sheet td:first-child { padding-left: 0; }
.proof-sheet th {
  text-align: left; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .05em; font-weight: 400; color: var(--muted); text-transform: uppercase;
}
.proof-sheet thead th { border-top: 0; border-bottom: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.proof-sheet thead th:first-child { color: var(--muted); font-weight: 400; }
.proof-sheet td { font-weight: 600; letter-spacing: -.01em; }
.proof-sheet td.org { color: var(--sos-green); font-weight: 750; font-size: 1.15rem; }
.proof-sheet .faktor { font-family: var(--font-mono); font-size: .625rem; color: var(--muted); font-weight: 400; display: block; }

/* ---------- Controls ---------- */
.sys-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  background: var(--sos-green); color: var(--paper); text-decoration: none;
  font-weight: 600; font-size: .9375rem; padding: .875rem 1.375rem;
  border-radius: var(--r-control); min-height: var(--tap);
  transition: transform var(--t-schnell) var(--sys-ease), box-shadow var(--t-schnell) var(--sys-ease);
}
.sys-btn:hover { transform: translateY(calc(var(--hub) * -1)); box-shadow: var(--schatten-knopf); }
.sys-btn:active { transform: none; }
.sys-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.sys-btn--ghost:hover { box-shadow: var(--schatten-ink); }

/* ---------- Layout ---------- */
.sys-bund { max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }
.sys-kapitel { padding-block: var(--sys-6) 0; }
.sys-kopf { display: flex; flex-direction: column; gap: var(--sys-2); margin-bottom: var(--sys-4); }

/* ---------- Hero: diagonale Reel-Kulisse ---------- */
.sys-hero { position: relative; min-height: 94svh; overflow: hidden; display: flex; align-items: flex-end; }
.kulisse {
  position: absolute; inset: -22% -30%; transform: rotate(-9deg);
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  z-index: 0; pointer-events: none;
}
.bahn { display: flex; gap: 1rem; width: max-content; }
.bahn--b { margin-left: -8.75rem; }
.kachel {
  flex: none; width: var(--kachel-breite); aspect-ratio: 9 / 16;
  border-radius: var(--r-content); overflow: hidden; background: var(--ink); position: relative;
}
.kachel img, .kachel picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kachel:nth-child(odd) { transform: translateY(1.375rem); }
@keyframes sys-driftL { to { transform: translateX(-50%); } }
@keyframes sys-driftR { from { transform: translateX(-50%); } to { transform: none; } }
.js-anim .bahn--a { animation: sys-driftL 80s linear infinite; }
.js-anim .bahn--b { animation: sys-driftR 96s linear infinite; }
.sys-schleier {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--paper) 4%, rgb(251 250 247 / .86) 22%,
    rgb(251 250 247 / .42) 48%, rgb(251 250 247 / .12) 72%, rgb(251 250 247 / .35) 100%);
}
.sys-hero .vorn { position: relative; z-index: 2; width: 100%; padding-block: clamp(4rem, 16svh, 8rem) var(--sys-5); }
.sys-hero h1 { font-size: clamp(2.5rem, 10.4vw, 5.8rem); max-width: 11ch; }
.sys-hero h1 em { font-style: italic; font-weight: 800; letter-spacing: -.01em; color: var(--sos-green); }
.sys-hero .zeile { display: flex; gap: .875rem; flex-wrap: wrap; align-items: center; }
.sys-hero .knoepfe { display: flex; gap: .75rem; flex-wrap: wrap; }
.sys-hero .whisper-hell { color: var(--ink); opacity: .75; }
@media (max-width: 47rem) {
  .sys-schleier {
    background: linear-gradient(to top, var(--paper) 6%, rgb(251 250 247 / .94) 34%,
      rgb(251 250 247 / .84) 60%, rgb(251 250 247 / .62) 82%, rgb(251 250 247 / .7) 100%);
  }
  .sys-hero { min-height: 88svh; }
}

/* ---------- Partner-Laufband ---------- */
.sys-marquee-band { border-block: 1px solid var(--line); padding-block: 1.375rem; }
.sys-marquee { overflow: hidden; margin-top: 1rem; }
.sys-marquee .spur { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 3.5rem; width: max-content; }
.js-anim .sys-marquee .spur { animation: sys-driftL 36s linear infinite; }
.sys-marquee:hover .spur, .sys-marquee:focus-within .spur { animation-play-state: paused; }
.sys-marquee img { height: 1.25rem; width: auto; filter: invert(1); opacity: .75; }

/* ---------- Geraet ---------- */
.device {
  background: var(--sos-akzent); border: 2px solid var(--sos-surface-2);
  border-radius: var(--r-device); padding: calc(var(--geraet-rand) / 2);
  box-shadow: var(--schatten-karte);
  transition: transform var(--t-normal) var(--sys-ease);
}
.device:hover { transform: translateY(calc(var(--hub-karte) * -1)) rotate(-.5deg); }
/* E58: Geraete koennen Links sein (Jam: Beispiele klickbar) */
a.device { display: block; text-decoration: none; color: inherit; }
a.device:focus-visible { outline: var(--focus-width) solid var(--sos-focus); outline-offset: var(--focus-width); }
.device .screen { position: relative; border-radius: calc(var(--r-device) - var(--geraet-rand)); overflow: hidden; aspect-ratio: 9 / 16; background: var(--sos-akzent); }
.device .screen > img, .device .screen > picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device .screen .vid { position: absolute; inset: 0; z-index: 1; }
.device .screen iframe { position: absolute; inset: 0; width: 178%; height: 100%; left: -39%; border: 0; }
@keyframes sys-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.js-anim .device .screen { animation: sys-schweben 7s ease-in-out infinite; }
.js-anim .sys-rail > *:nth-child(2) .screen { animation-delay: 1.4s; }
.js-anim .sys-rail > *:nth-child(3) .screen { animation-delay: 2.8s; }
.js-anim .sys-rail > *:nth-child(4) .screen { animation-delay: 4.2s; }
.screen .lage {
  position: absolute; inset: auto 0 0; padding: 2.5rem .625rem .625rem;
  background: linear-gradient(to top, rgb(0 0 0 / .82), transparent);
  display: flex; flex-direction: column; gap: .375rem; align-items: flex-start; z-index: 2;
}
.screen .marke {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sos-on-akzent);
}

/* Kontext-Modus: Plattform-UI nur, wo die Kennzahlen der Beweis sind */
.context { color: var(--sos-on-akzent); font-family: var(--font-body); }
.context .schatten { position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(to top, rgb(0 0 0 / .8), transparent); z-index: 2; }
/* NAMENSKOLLISION vermieden (E57): .kopf ist global die Seiten-Kopfzeile
   mit Papier-Hintergrund und z-index 100 — als Feed-Label hat sich das
   Reels-Wort diese Regeln eingefangen und stand als heller Kasten mit
   fast unsichtbarer Schrift im Bild. Eigener Name, eigene Regeln. */
.context .feed-marke {
  position: absolute; top: .625rem; left: .75rem;
  font-size: .75rem; font-weight: 700; z-index: 3;
  color: #fff; background: none;
  text-shadow: 0 1px 4px rgb(0 0 0 / .6);
}
.context .rail {
  position: absolute; right: .5rem; bottom: .875rem; z-index: 3; display: flex; flex-direction: column;
  gap: .625rem; text-align: center; font-size: .53rem; font-weight: 600;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgb(0 0 0 / .6);
}
.context .rail svg { width: 1rem; height: 1rem; display: block; margin-inline: auto; }
.context .konto { position: absolute; left: .625rem; bottom: .75rem; right: 2.75rem; z-index: 3; font-size: .625rem; line-height: 1.4; }
.context .konto b { display: block; font-size: .6563rem; }

/* ---------- Schienen (wischbar) ---------- */
.sys-rail {
  display: flex; gap: .875rem; overflow-x: auto; padding: var(--sys-3) var(--rand) var(--sys-1);
  scroll-snap-type: x proximity; max-width: var(--max); margin-inline: auto;
}
.sys-rail > figure { margin: 0; flex: none; width: min(64vw, 250px); scroll-snap-align: start; display: flex; flex-direction: column; gap: .625rem; }
.sys-rail figcaption { display: flex; flex-direction: column; gap: .25rem; }

/* ---------- Services ---------- */
.sys-service { border-top: 1px solid var(--line); padding-block: var(--sys-4); }
.sys-service--kern { border-top: 1.5px solid var(--ink); }
.sys-service .innen { display: grid; gap: var(--sys-2); }
@media (min-width: 48rem) { .sys-service .innen { grid-template-columns: minmax(9rem, .35fr) 1fr; gap: var(--sys-4); } }
.sys-service h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1; }
.sys-service--kern h3 { font-size: clamp(2rem, 7vw, 3.2rem); }
.sys-service .rolle { align-self: start; }
.sys-service a { color: var(--sos-green); font-weight: 600; text-decoration: none; }
.sys-service a:hover { text-decoration: underline; }

/* ---------- Crew ---------- */
.crew-fluss { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; font-family: var(--font-mono); font-size: .7188rem; letter-spacing: .04em; }
.crew-fluss i { font-style: normal; color: var(--muted); }
.crew-fluss b { border: 1px solid var(--ink); border-radius: var(--r-data); padding: .3125rem .625rem; font-weight: 600; }
.crew-fluss b.gruen { border-color: var(--sos-green); color: var(--sos-green); }
.crew-band { display: flex; gap: .875rem; overflow-x: auto; padding: var(--sys-3) var(--rand) 0; max-width: var(--max); margin-inline: auto; }
.crew-band figure { margin: 0; flex: none; width: 150px; }
.crew-band img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: var(--r-content); }
.crew-band figcaption { padding-top: .5rem; font-size: .875rem; font-weight: 650; line-height: 1.3; }
.crew-band figcaption span { display: block; font-family: var(--font-mono); font-size: .65rem; font-weight: 400; color: var(--muted); letter-spacing: .03em; padding-top: .125rem; }



/* ---------- Stimmen ---------- */
.sys-quote { border-top: 1px solid var(--line); padding-block: var(--sys-4); }
.sys-quote blockquote { margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.6rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.4; max-width: 30em; }
.sys-quote cite { display: block; margin-top: var(--sys-2); font-style: normal; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; color: var(--muted); }

/* ---------- Final CTA ---------- */
.sys-final { background: var(--ink); color: var(--sos-on-akzent); margin-top: var(--sys-6); padding-block: var(--sys-6); }
.sys-final .innen { display: flex; flex-direction: column; gap: var(--sys-3); align-items: flex-start; }
.sys-final .sys-impact { color: var(--sos-on-akzent); font-size: clamp(2.2rem, 9vw, 4.5rem); }
.sys-final .sys-impact em { font-style: italic; }
.sys-final .sys-read { color: rgb(255 255 255 / .82); }
.sys-final .sys-btn { background: var(--paper); color: var(--ink); }

/* ---------- Portal (E59, Richtung 3 'Der Sog') ----------
   Das Buchstaben-Portal ist das Motiv der Startseite: ein Buchstabe
   steht im Bildmittelpunkt, beim Scrollen zieht er auf und die
   naechste Szene kommt aus seiner Punze — die Rueckebene ist auf einen
   Kreis geclippt, dessen Radius an der Glyphengroesse haengt und bis
   zum Durchbruch innerhalb der Punze bleibt. Monochrom (Eigentuemer
   2026-08-28: "clean bleiben mit schwarz weiss"). */
:root { --gf: clamp(7rem, 26vw, 21rem); }
.portalbuehne { height: 240svh; position: relative; }
.portal { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; text-align: center; overflow: clip; background: var(--ink); color: var(--paper); }
.p-hinten { position: absolute; inset: 0; display: grid; place-items: center; clip-path: circle(0px at var(--px, 50%) var(--py, 50%)); }
.p-hinten--hell { background: var(--paper); color: var(--ink); }
.p-hinten--dunkel { background: var(--ink); color: var(--paper); }
.p-vorn { position: absolute; inset: 0; background: var(--ink); }
.p-vorn .glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--gf); line-height: .9; font-weight: 800; letter-spacing: -.04em; color: var(--paper); }
.p-vorn .glyph__zeile { white-space: nowrap; }
/* Anker-Praezision: die Box des Portal-Buchstabens soll seiner
   sichtbaren Form entsprechen — ohne nachlaufendes Letter-Spacing,
   vertikal auf Cap-Hoehe getrimmt (Browser ohne text-box behalten
   die kleine Abweichung, der JS-Anker bleibt die Grundkorrektur). */
.p-vorn .glyph .o { display: inline-block; letter-spacing: 0; text-box: trim-both cap alphabetic; }
.p-vorn .p-ober { position: absolute; top: 16svh; left: 0; right: 0; }
.p-vorn .p-satz { position: absolute; bottom: 18svh; left: 0; right: 0; font-size: clamp(1.2rem, 2.6vw, 1.8rem); font-weight: 600; letter-spacing: -.01em; margin: 0; padding-inline: var(--sys-2); }
.p-vorn .p-wink { position: absolute; bottom: 6svh; left: 0; right: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.p-hinten .p-inhalt { display: grid; gap: var(--sys-2); place-items: center; padding: var(--sys-2); }
.p-hinten .p-these { font-size: clamp(2rem, 5.6vw, 4.8rem); max-width: 14ch; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
.p-hinten .p-beleg { display: grid; gap: .15rem; }
.p-hinten .p-beleg b { font-size: clamp(1.8rem, 4vw, 3.2rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.p-hinten .p-beleg small { font-size: .8rem; opacity: .68; max-width: 36ch; }
.p-hinten .p-kulisse { position: absolute; inset: 0; z-index: -1; opacity: .12; display: flex; gap: var(--sys-2); justify-content: center; align-items: center; transform: rotate(-8deg) scale(1.2); }
.p-hinten .p-kulisse img { width: 11rem; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--r-content); }
.p-reel { width: min(21rem, 68vw); aspect-ratio: 9/16; border-radius: var(--r-device); overflow: hidden; position: relative; }
.p-reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-insight { position: absolute; left: var(--sys-1); right: var(--sys-1); bottom: var(--sys-1); background: color-mix(in srgb, var(--ink) 85%, transparent); color: var(--paper); border-radius: var(--r-content); padding: .7rem 1rem; text-align: left; }
.p-insight b { font-size: 1.4rem; font-variant-numeric: tabular-nums; display: block; }
.p-insight small { font-size: .72rem; opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .portalbuehne { view-timeline: --portal; }
    .p-vorn { animation: p-portal both linear; animation-timeline: --portal; animation-range: contain 5% contain 90%; transform-origin: var(--px, 50%) var(--py, 50%); }
    .p-vorn .p-ober, .p-vorn .p-satz, .p-vorn .p-wink { animation: p-weg both linear; animation-timeline: --portal; animation-range: contain 5% contain 18%; }
    .p-hinten { animation: p-blende both linear; animation-timeline: --portal; animation-range: contain 10% contain 90%; }
    .p-hinten .p-reel { animation: p-wachsen both linear; animation-timeline: --portal; animation-range: contain 15% contain 90%; }
    /* kritiker-design D2: Text niemals vom Clip-Kreis anschneiden —
       der Inhalt kommt erst MIT dem Durchbruch, im Rahmen-Akt ist nur
       Bildmaterial (Reel, Kulisse) im Kreis zu sehen. */
    .p-hinten .p-inhalt { animation: p-auftauchen both linear; animation-timeline: --portal; animation-range: contain 62% contain 85%; }
    @keyframes p-portal {
      0%   { transform: scale(1); }
      20%  { background: transparent; }
      35%  { transform: scale(3.6); }
      65%  { transform: scale(4.2); background: transparent; opacity: 1; }
      100% { transform: scale(30); background: transparent; opacity: 0; }
    }
    @keyframes p-blende {
      0%   { clip-path: circle(0px at var(--px, 50%) var(--py, 50%)); }
      35%  { clip-path: circle(calc(var(--gf) * .76) at var(--px, 50%) var(--py, 50%)); }
      65%  { clip-path: circle(calc(var(--gf) * .90) at var(--px, 50%) var(--py, 50%)); }
      90%, 100% { clip-path: circle(160vmax at var(--px, 50%) var(--py, 50%)); }
    }
    @keyframes p-weg { to { opacity: 0; } }
    @keyframes p-wachsen { 0% { transform: scale(.55); } 65% { transform: scale(.72); } 100% { transform: scale(1); } }
    @keyframes p-auftauchen { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
  }
}
/* Endlage ist Ausgangszustand: ohne Scroll-Timeline oder mit
   reduzierter Bewegung stehen Buchstabe und Szene ruhig nacheinander. */
@supports not (animation-timeline: scroll()) {
  .portalbuehne { height: auto; }
  .portal { position: static; height: auto; }
  .p-vorn { position: static; padding: var(--sys-6) var(--sys-2); }
  .p-vorn .glyph, .p-vorn .p-ober, .p-vorn .p-satz, .p-vorn .p-wink { position: static; }
  .p-vorn .glyph { padding-block: var(--sys-2); }
  .p-hinten { position: static; clip-path: none; padding: var(--sys-5) var(--sys-2); min-height: 60svh; }
}
@media (prefers-reduced-motion: reduce) {
  .portalbuehne { height: auto; }
  .portal { position: static; height: auto; }
  .p-vorn { position: static; padding: var(--sys-6) var(--sys-2); }
  .p-vorn .glyph, .p-vorn .p-ober, .p-vorn .p-satz, .p-vorn .p-wink { position: static; }
  .p-vorn .glyph { padding-block: var(--sys-2); }
  .p-hinten { position: static; clip-path: none; padding: var(--sys-5) var(--sys-2); min-height: 60svh; }
  .p-vorn .p-wink { display: none; }
}
@media print {
  .portalbuehne { height: auto; }
  .portal { position: static; height: auto; }
  .p-vorn, .p-hinten { position: static; clip-path: none; animation: none !important; }
}

/* Statische Portal-Szene (E63): kein Scroll-Effekt — Buchstabe als
   Kapitelmarke, Szene direkt darunter. Gilt fuer O/C/P; der Effekt
   bleibt allein dem SOS-Einstieg vorbehalten. */
.portalbuehne--statisch { height: auto; }
.portalbuehne--statisch .portal { position: static; height: auto; }
.portalbuehne--statisch .p-vorn,
.portalbuehne--statisch .p-hinten { position: static; clip-path: none; animation: none !important; }
.portalbuehne--statisch .p-vorn { padding: var(--sys-5) var(--sys-2) 0; }
.portalbuehne--statisch .p-vorn .glyph { position: static; font-size: clamp(4rem, 12vw, 8rem); }
.portalbuehne--statisch .p-vorn .p-ober,
.portalbuehne--statisch .p-vorn .p-satz,
.portalbuehne--statisch .p-vorn .p-wink { position: static; padding: 0; animation: none !important; }
.portalbuehne--statisch .p-vorn .p-satz { display: none; }
.portalbuehne--statisch .p-hinten { padding: var(--sys-2) var(--sys-2) var(--sys-6); min-height: 0; }
.portalbuehne--statisch .p-hinten .p-inhalt { animation: none !important; }
.portalbuehne--statisch .p-hinten--hell { background: var(--paper); }

/* Drift-Buehne (E64): hinter dem O liegt die ganze Seite voller
   Test-Reels — diagonal angeordnet, alle "laufen" (Platzhalter mit
   wanderndem Fortschrittsbalken), die Bahnen driften gegenlaeufig
   durch. Reduced motion: alles steht. */
/* Reihen packen sich dicht (max-content statt 1fr — 1fr riss auf
   hohen Fenstern Luecken zwischen die Bahnen); fuenf Bahnen plus
   hoehenabhaengige Kachelgroesse decken jede Fensterform, Rest clippt. */
.p-drift { position: absolute; inset: -18%; display: grid; gap: var(--sys-2); grid-auto-rows: max-content; align-content: center; justify-content: start; transform: rotate(-9deg); overflow: clip; }
/* justify START ist Pflicht: die Bahn laeuft von 0 bis -50 % — nur
   links angeschlagen deckt sie den Ausschnitt in jedem Frame. Zentriert
   fehlte rechts eine halbe Bahn (Skibidy-Screenshot 2026-08-28). */
/* align-items center statt stretch: der Flex-Stretch zog die Kacheln
   auf Bahnhoehe und brach das 9:16 der aspect-ratio. */
.p-drift .bahn { display: flex; align-items: center; width: max-content; gap: 0; /* R11-T1: kein geerbtes gap — die Naht haengt an den Haelften-Zwillingen */ }
/* Zwei identische Haelften-Container je Bahn: Breite der Haelfte =
   exakt 50 % der Bahn, der -50%-Umsprung ist damit zwingend nahtlos
   (R11-T1: mit gap/scrollWidth-Mathe blieb ein 20-px-Sprung). */
.p-drift .haelfte { display: flex; align-items: center; }
.p-drift .drift-reel { margin-right: var(--sys-2); }
/* Breite so, dass EINE Bahn-Haelfte (10 Kacheln + Margen) immer die
   ganze Buehne deckt (Buehne = 136 vw wegen inset -18%): sonst klafft
   in der um 50 % versetzten Reihe rechts eine Luecke nach dem Laden. */
.drift-reel { width: clamp(7rem, max(13.5vw, 16svh), 26rem); aspect-ratio: 9/16; border-radius: var(--r-device); border: var(--hairline) dashed color-mix(in srgb, var(--paper) 60%, transparent); background: color-mix(in srgb, var(--paper) 14%, var(--ink)); display: grid; place-content: end center; padding-bottom: var(--sys-2); position: relative; overflow: hidden; }
.drift-reel small { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.drift-reel::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 8%; height: 2px; background: color-mix(in srgb, var(--paper) 25%, transparent); border-radius: var(--r-data); }
.drift-reel i { position: absolute; left: 8%; bottom: 8%; height: 2px; width: 84%; transform: scaleX(0); transform-origin: left; background: var(--paper); border-radius: var(--r-data); }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .p-drift .bahn--a { animation: sys-driftL 60s linear infinite; }
  .js-anim .p-drift .bahn--b { animation: sys-driftR 72s linear infinite; }
  .js-anim .p-drift .bahn--c { animation: sys-driftL 84s linear infinite; }
  .js-anim .p-drift .bahn--d { animation: sys-driftR 66s linear infinite; }
  .js-anim .p-drift .bahn--e { animation: sys-driftL 78s linear infinite; }
  .js-anim .drift-reel i { animation: drift-lauf 6s linear infinite; }
  @keyframes drift-lauf { to { transform: scaleX(1); } }
}
@keyframes sys-driftR { from { transform: translateX(-50%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .p-drift .bahn, .drift-reel i { animation: none !important; } .drift-reel i { transform: scaleX(.4); } }

/* E64: die statischen Stufen kommen ohne Buchstaben aus — das Wort
   steht ausgeschrieben in der Kapitelzeile. */
.portalbuehne--statisch .glyph { display: none; }
.portalbuehne--statisch .p-vorn { padding: var(--sys-5) var(--sys-2) var(--sys-1); }

/* Dreiklang (E66/E67): EINE Szene fuer Organisch/Creator/Paid.
   E67 ("hochwertig: ebenen, felder, zeichen, icons"): drei Feld-Karten
   mit Lucide-Icons um einen Synergie-Kern, dahinter eine Buehnen-Ebene
   mit Punktraster und Verbinderbahnen, auf denen Pulse laufen.
   Monochrom; reduced motion: alles steht. */
.dreiklang { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: var(--sys-3); background: var(--paper); color: var(--ink); padding: var(--sys-5) var(--sys-2); text-align: center; }
.dreiklang__buehne { position: relative; width: min(58rem, 94vw); padding: var(--sys-4) var(--sys-3); border: var(--hairline) solid var(--line); border-radius: var(--r-content); background: var(--surface); }
.dreiklang__netz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dreiklang__netz .raster { fill: var(--line); }
.dreiklang__netz .bahn { fill: none; stroke: var(--line); stroke-width: 2; }
.dreiklang__netz .puls { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dreiklang__lage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sys-5) var(--sys-6); justify-items: center; }
.dreiklang__lage > :nth-child(3) { grid-column: 1 / -1; }
.knoten { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sys-1); width: min(17rem, 100%); padding: var(--sys-3) var(--sys-2); background: var(--paper); border: var(--hairline) solid var(--line); border-radius: var(--r-content); }
.knoten__chip { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ink); color: var(--paper); margin-bottom: var(--sys-1); }
.knoten__chip svg { width: 1.5rem; height: 1.5rem; }
.knoten__stufe { font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.knoten__titel { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.knoten__rolle { font-size: .9rem; color: var(--muted); max-width: 24ch; margin: 0; }
.knoten__metrik { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--sys-1); padding: .4rem .8rem; border-radius: var(--r-pill); background: var(--surface); border: var(--hairline) solid var(--line); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.knoten__metrik svg { width: .95rem; height: .95rem; flex: none; }
.knoten__metrik small { font-weight: 500; color: var(--muted); }
.dreiklang__kern { position: absolute; left: 50%; top: 38%; translate: -50% -50%; z-index: 2; display: grid; justify-items: center; gap: .35rem; }
.dreiklang__kern .scheibe { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--ink); color: var(--paper); border: calc(var(--geraet-rand) / 2) solid var(--paper); }
.dreiklang__kern .scheibe svg { width: 1.6rem; height: 1.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .dreiklang__kern .scheibe svg { animation: kern-dreht 14s linear infinite; }
  .js-anim .dreiklang__netz .puls { stroke-dasharray: 30 460; animation: bahn-puls 4.5s linear infinite; }
  .js-anim .dreiklang__netz .puls--b { animation-delay: -1.5s; }
  .js-anim .dreiklang__netz .puls--c { animation-delay: -3s; }
  @keyframes kern-dreht { to { transform: rotate(1turn); } }
  @keyframes bahn-puls { to { stroke-dashoffset: -490; } }
}
@media (prefers-reduced-motion: reduce) { .dreiklang__netz .puls { stroke-dasharray: none; } }
.dreiklang__kern .wort { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; background: var(--paper); border: var(--hairline) solid var(--line); border-radius: var(--r-pill); padding: .3rem .7rem; }
@media (max-width: 44rem) {
  .dreiklang__lage { grid-template-columns: 1fr; gap: var(--sys-3); }
  .dreiklang__lage > :nth-child(3) { grid-column: auto; }
  /* R14-4: alle Karten haben order 0 — ohne eigene Ordnung rutschte
     der Kern ANS ENDE statt zwischen die Karten. Paid rueckt hinter
     den Kern. */
  .dreiklang__kern { position: static; translate: none; order: 2; margin-block: calc(var(--sys-2) * -1); }
  .dreiklang__lage > .knoten:nth-of-type(3) { order: 3; }
  .dreiklang__netz { display: none; }
}
.dreiklang__belege { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sys-2); width: min(58rem, 94vw); }
.dreiklang__belege .beleg { display: grid; justify-items: center; gap: .3rem; padding: var(--sys-2); background: var(--paper); border: var(--hairline) solid var(--line); border-radius: var(--r-content); }
.dreiklang__belege .beleg svg { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.dreiklang__belege b { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dreiklang__belege small { font-size: .75rem; color: var(--muted); max-width: 22ch; }
.dreiklang__quelle { font-size: .72rem; color: var(--muted); }

/* Reel-Platzhalter (E63, Eigentuemer 2026-08-28: "nicht mit echten
   reels arbeiten; sondern mit platzhaltern") — der Slot zeigt offen,
   dass hier noch kuratiert wird: Rahmen, Formatangabe, Slot-Name. */
.p-reel--leer { display: grid; place-content: center; gap: var(--sys-1); text-align: center; background: color-mix(in srgb, var(--paper) 6%, var(--ink)); border: var(--hairline) dashed color-mix(in srgb, var(--paper) 45%, transparent); }
.p-hinten--hell .p-reel--leer, .sektion--licht .p-reel--leer { background: var(--surface); border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); }
.p-reel--leer b { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.p-reel--leer small { font-size: .72rem; opacity: .6; max-width: 16ch; margin-inline: auto; }

/* Stufenzeile (E60): das O/C/P-Motiv der Startseite als ruhige Zeile
   auf /leistungen/ — wiedererkennbar, ohne Scroll-Buehne. */
.stufenzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sys-2); padding: 0; margin: 0; list-style: none; font-weight: 700; }
.stufenzeile li { display: flex; align-items: center; gap: var(--sys-1); }
.stufenzeile__glyph { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 1.25rem; }
.stufenzeile__pfeil { color: var(--sos-text-muted); }
.sys-block__status { display: block; padding-top: .375rem; font-size: .85rem; color: var(--sos-text-muted); font-style: italic; }

/* Vollbild-Faelle (E59): eine Zahl, ein Geraet, ein Ziel je Bildschirm */
.fall-slide { min-height: 92svh; display: grid; place-items: center; text-decoration: none; color: var(--paper); background: var(--ink); padding: var(--sys-4) var(--sys-2); }
.fall-slide .lage { display: grid; grid-template-columns: auto auto; gap: var(--sys-4); align-items: center; }
.fall-slide .p-reel { width: min(14rem, 38vw); }
.fall-slide .zahl { text-align: left; }
.fall-slide .zahl b { display: block; font-size: clamp(2.4rem, 6vw, 4.6rem); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.fall-slide .zahl span { font-weight: 700; font-size: 1.05rem; }
.fall-slide .zahl small { display: block; opacity: .6; font-size: .8rem; padding-top: .4rem; max-width: 30ch; }
.fall-slide:hover .zahl span, .fall-slide:focus-visible .zahl span { text-decoration: underline; }
.fall-slide:focus-visible { outline: var(--focus-width) solid var(--paper); outline-offset: calc(var(--focus-width) * -2); }
@media (max-width: 56rem) { .fall-slide .lage { grid-template-columns: 1fr; gap: var(--sys-2); justify-items: center; } .fall-slide .zahl { text-align: center; } .fall-slide .zahl small { margin-inline: auto; } }

/* E61b (Eigentuemer): die Startseite oeffnet als reiner Loadscreen —
   Kopf und Bodenleiste erscheinen erst mit dem Scroll. Nur dort, nur
   mit Scroll-Timeline-Support und nur ohne reduced motion; in allen
   anderen Faellen ist die Navigation sofort da (nichts verstecken). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* header.kopf.kopf--start: schlaegt die gescopte .kopf-Regel
       (position: relative) in der Spezifitaet. */
    header.kopf[data-start] {
      position: fixed;
      inset: 0 0 auto;
      z-index: 30;
      animation: kopf-rein both linear;
      animation-timeline: scroll(root block);
      animation-range: 40svh 90svh;
    }

    .nav[data-start] {
      animation: nav-rein both linear;
      animation-timeline: scroll(root block);
      animation-range: 40svh 90svh;
    }

    @keyframes kopf-rein {
      from { transform: translateY(-100%); visibility: hidden; }
      to { transform: none; visibility: visible; }
    }

    @keyframes nav-rein {
      from { transform: translate(-50%, 200%); visibility: hidden; }
      to { transform: translateX(-50%); visibility: visible; }
    }
  }
}

/* Faelle-Schiene (E69): horizontal wischbar statt Vollbild-Slides */
.faelle { background: var(--ink); color: var(--paper); padding-block: var(--sys-5); }
/* E69b (Eigentuemer): mobil horizontal scrollbar, auf breiten Screens
   spannen die vier Karten die volle Bildschirmbreite auf. */
.faelle__rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(15rem, 66vw); gap: var(--sys-3); overflow-x: auto; padding: var(--sys-3) var(--page-gutter, var(--sys-2)) var(--sys-2); scroll-snap-type: x proximity; /* R14-5: mandatory schnappte Tastatur-Schritte zurueck */ scroll-padding-inline: var(--page-gutter, var(--sys-2)); }
@media (min-width: 64rem) {
  .faelle__rail { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow-x: visible; scroll-snap-type: none; }
}
.faelle__rail:focus-visible { outline: var(--focus-width) solid var(--paper); outline-offset: calc(var(--focus-width) * -1); }
.faelle__karte { scroll-snap-align: start; display: grid; gap: var(--sys-2); text-decoration: none; color: inherit; }
.faelle__karte .p-reel { width: 100%; }
.faelle__karte .zahl b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.faelle__karte .zahl span { font-weight: 700; }
.faelle__karte .zahl small { display: block; opacity: .6; font-size: .78rem; padding-top: .3rem; max-width: 26ch; }
.faelle__karte:hover .zahl span, .faelle__karte:focus-visible .zahl span { text-decoration: underline; }
.faelle__karte:focus-visible { outline: var(--focus-width) solid var(--paper); outline-offset: var(--focus-width); }

/* ---------- Bewegung ---------- */
/* Pruefer-Befund E58-1: Der Hero-Vordergrund darf nicht am JS-Reveal
   haengen — die H1 ist das LCP-Element, und ein Paint erst nach
   Skriptlauf + Verzoegerung + Transition schob den LCP auf ~3 s.
   Der Auftakt laeuft als reine CSS-Animation ab dem ersten Frame:
   der erste sichtbare Frame kommt sofort nach dem Stylesheet, die
   Bewegung bleibt. Endlage ist Ausgangszustand (forwards + Endwert). */
.auftakt {
  animation: sys-auftakt var(--t-normal) var(--sys-ease) both;
  animation-delay: var(--vz, 0s);
}
@keyframes sys-auftakt {
  from { opacity: 0; transform: translateY(.875rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auftakt { animation: none; }
}
@media print {
  .auftakt { animation: none; }
}

.js-anim [data-reveal] {
  opacity: 0; transform: translateY(.875rem);
  transition: opacity var(--t-normal) var(--sys-ease), transform var(--t-normal) var(--sys-ease);
  transition-delay: var(--vz, 0s);
}
.js-anim [data-reveal].da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .bahn--a, .js-anim .bahn--b, .js-anim .sys-marquee .spur, .js-anim .device .screen { animation: none; }
  .js-anim [data-reveal] { transform: none; transition: opacity .2s linear; }
  .sys-btn, .device { transition: none; }
  .sys-btn:hover, .device:hover { transform: none; }
  .sys-marquee .spur { flex-wrap: wrap; width: auto; gap: 1.25rem 2.125rem; padding-inline: var(--rand); }
  .sys-marquee .spur li[aria-hidden] { display: none; }
}

/* ---------- Header im System (E50) ----------
   Kein Pill-Balken: ruhige Leiste auf Papier, die beim Scrollen eine
   Linie bekommt. Der Primary-CTA sitzt rechts in der Liste. */
.kopf { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color var(--t-schnell) var(--sys-ease), box-shadow var(--t-schnell) var(--sys-ease); }
.kopf--fest { border-bottom-color: var(--line); box-shadow: 0 2px 18px color-mix(in srgb, var(--ink) 5%, transparent); }
.nav__cta .sys-btn { padding: .625rem 1rem; font-size: .8438rem; min-height: var(--tap); }
@media (max-width: 47rem) { .nav__cta { padding-top: var(--sys-2); } }

/* ---------- Leistungen als Aufklapper (E50, Eigentuemer 2026-08-24) ----------
   Die Startseite nennt Rolle und Titel; die Erklaerung kommt auf Wunsch.
   <details>/<summary> statt eigener Logik: Tastatur, Screenreader und
   Zustand kommen vom Browser. */
.sys-leistung { border-top: 1px solid var(--line); }
.sys-leistung--kern { border-top: 1.5px solid var(--ink); }
.sys-leistung:last-of-type { border-bottom: 1px solid var(--line); }
.sys-leistung summary {
  display: flex; align-items: center; gap: var(--sys-3); justify-content: space-between;
  padding-block: var(--sys-3); cursor: pointer; list-style: none; min-height: var(--tap);
}
.sys-leistung summary::-webkit-details-marker { display: none; }
.sys-leistung summary:focus-visible { outline: 2px solid var(--sos-green); outline-offset: 4px; }
.sys-leistung__kopf { display: flex; flex-direction: column; gap: .375rem; }
.sys-leistung__titel { font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.5rem, 4.6vw, 2.2rem); line-height: 1; }
.sys-leistung--kern .sys-leistung__titel { font-size: clamp(1.9rem, 6.4vw, 3rem); }
.sys-leistung__zeichen { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.sys-leistung__zeichen::before,
.sys-leistung__zeichen::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--ink);
  transition: transform var(--t-schnell) var(--sys-ease);
}
.sys-leistung__zeichen::after { transform: rotate(90deg); }
.sys-leistung[open] .sys-leistung__zeichen::after { transform: rotate(0deg); }
.sys-leistung__inhalt { display: flex; flex-direction: column; gap: var(--sys-2); padding-bottom: var(--sys-4); }
.sys-leistung__inhalt a { color: var(--sos-green); font-weight: 600; text-decoration: none; }
.sys-leistung__inhalt a:hover { text-decoration: underline; }

/* ---------- Crew-Rollen statt Beispielbesetzung ---------- */
.crew-rollen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 48rem) { .crew-rollen { grid-template-columns: repeat(2, 1fr); } }
.crew-rollen li { background: var(--paper); padding: var(--sys-3); display: flex; flex-direction: column; gap: .375rem; }
.crew-rollen__nr { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; color: var(--sos-green); }
.crew-rollen__titel { font-weight: 700; letter-spacing: -.02em; font-size: 1.1875rem; }
.crew-rollen__text { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .sys-leistung__zeichen::before, .sys-leistung__zeichen::after { transition: none; } }

/* ============================================================
   E52 — MIGRATION DER UNTERSEITEN (Eigentuemer 2026-08-24)

   Die Unterseiten (Leistungen, Referenzen, Team, Blog, Karriere,
   Kontakt, Rechtstexte) bringen eigene, gescopte Layouts mit. Sie
   werden NICHT einzeln umgeschrieben — stattdessen zieht diese
   Schicht die gemeinsame visuelle Sprache auf das System:

     · Grund wird Papier, Kanten werden Linien
     · der FEED-Versatz (harter 8-px-Schatten) entfaellt
     · Knoepfe folgen dem System (gruen, weicher Radius, 44 px)
     · Ueberschriften verlieren die Poster-Versalien
     · Links tragen Gruen als Funktionsfarbe

   Damit bleibt jede Seite in ihrer bewaehrten Struktur (inklusive
   der gemessenen Fixes fuer Formular, Akkordeon und Tabellen), sieht
   aber aus wie die neue Startseite. Die alten Tokens bleiben
   definiert, damit nichts ins Leere zeigt.
   ============================================================ */

:root {
  --sos-bg: var(--paper);
  --sos-surface-1: var(--paper);
  --sos-surface-2: var(--surface);
  --sos-text: var(--ink);
  --sos-text-muted: var(--muted);
  --sos-text-faint: var(--line);
  --radius: var(--r-content);
  /* Feed-Vokabular abgeruestet: eine Haarlinie statt 3-px-Kante, kein
     harter Offset-Schatten mehr. */
  --kante: 1px;
  --versatz: 0px;
  --hairline: 1px;
}

/* Ueberschriften: Systemstimme statt Poster-Versalien. */
h1, h2, h3, h4 { letter-spacing: -.03em; }
h1 { font-weight: 750; }
h2, h3 { font-weight: 700; }
.kicker, .stempelzeile { font-family: var(--font-mono); letter-spacing: .05em; }
.statement { letter-spacing: -.03em; }

/* Knopf global auf Systemsprache. */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: var(--tap);
  padding: .875rem 1.375rem;
  background: var(--sos-green);
  color: var(--paper);
  border-radius: var(--r-control);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: 0;
  text-transform: none;
  transition: transform var(--t-schnell) var(--sys-ease), box-shadow var(--t-schnell) var(--sys-ease);
}
.knopf:hover { transform: translateY(calc(var(--hub) * -1)); box-shadow: var(--schatten-knopf); }
.knopf:active { transform: none; }
.knopf--sekundaer { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.knopf--sekundaer:hover { border-color: var(--ink); box-shadow: var(--schatten-ink); }

/* Fliesstext-Links: Gruen ist die Funktionsfarbe. */
.prosa a, .lead a, .rechtstext a { color: var(--sos-green); }

/* Karten und Kacheln der Unterseiten: weiche Content-Radien, ruhige
   Linien, kein harter Versatz. */
.leistung, .case, .person, .faq, .karte, .beitrag {
  border-radius: var(--r-content);
  box-shadow: none;
}

/* Dunkle Sektionen bleiben das Kino — jetzt in Systemtinte. */
.sektion--dunkel { background: var(--ink); color: var(--sos-on-akzent); }
.sektion--dunkel .knopf { background: var(--paper); color: var(--ink); }

/* Seitenkopf der Unterseiten: dieselbe Anmutung wie die Startseite. */
.seitenkopf { padding-block: var(--sys-5) var(--sys-3); }
.seitenkopf h1 { font-size: clamp(2.1rem, 7.4vw, 3.8rem); }

/* ---------- Referenzen im System (E53) ---------- */
.case-kachel { display: flex; flex-direction: column; gap: .625rem; text-decoration: none; color: inherit; }
.case-kachel figcaption { display: flex; flex-direction: column; gap: .125rem; }
.case-kachel__titel { font-weight: 650; font-size: .9375rem; letter-spacing: -.02em; }
.case-kachel:hover .case-kachel__titel { color: var(--sos-green); }

.quer-gitter, .namen-gitter { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sys-3); }
@media (min-width: 34rem) { .quer-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .quer-gitter { grid-template-columns: repeat(3, 1fr); } }
.quer-gitter a, .namen-gitter a { display: flex; flex-direction: column; gap: .375rem; text-decoration: none; color: inherit; }
.quer-gitter img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-content); display: block; transition: transform var(--t-normal) var(--sys-ease); }
.quer-gitter a:hover img { transform: translateY(-3px); }
.quer-gitter__titel { font-weight: 650; letter-spacing: -.02em; padding-top: .25rem; }
.quer-gitter a:hover .quer-gitter__titel, .namen-gitter a:hover .namen-gitter__titel { color: var(--sos-green); }

@media (min-width: 34rem) { .namen-gitter { grid-template-columns: repeat(2, 1fr); } }
.namen-gitter li { border-top: 1px solid var(--line); }
.namen-gitter a { padding-block: var(--sys-3); }
.namen-gitter__titel { font-weight: 700; font-size: 1.25rem; letter-spacing: -.025em; }

@media (prefers-reduced-motion: reduce) { .quer-gitter a:hover img { transform: none; } }

/* ---------- Linienblock (E54): Uebersichten ohne Karten ----------
   Ein Block ist eine Zeile mit Kante, kein Kaestchen. Der Kern-Block
   traegt die schwerere Kante und den groesseren Titel. */
.sys-block {
  display: flex; align-items: center; gap: var(--sys-3); justify-content: space-between;
  border-top: 1px solid var(--line); padding-block: var(--sys-3);
  text-decoration: none; color: inherit;
  transition: background var(--t-schnell) var(--sys-ease), padding-inline var(--t-schnell) var(--sys-ease);
}
.sys-block:last-of-type { border-bottom: 1px solid var(--line); }
.sys-block--kern { border-top: 1.5px solid var(--ink); }
a.sys-block:hover { background: var(--surface); padding-inline: var(--sys-2); }
.sys-block__innen { display: flex; flex-direction: column; gap: .625rem; }
@media (min-width: 48rem) {
  .sys-block__innen { display: grid; grid-template-columns: minmax(9rem, .34fr) 1fr; gap: var(--sys-4); align-items: start; }
}
.sys-block__titel { display: block; font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.5rem, 4.6vw, 2.2rem); line-height: 1.05; }
.sys-block--kern .sys-block__titel { font-size: clamp(1.9rem, 6.4vw, 3rem); }
.sys-block__text { padding-top: .5rem; }
.sys-block__zeilen { display: flex; flex-wrap: wrap; gap: .375rem; padding-top: .75rem; }
.sys-block__pfeil { flex: none; font-size: 1.25rem; color: var(--sos-green); }
.sys-leistung__frage { font-weight: 650; letter-spacing: -.02em; font-size: clamp(1.05rem, 3.2vw, 1.35rem); line-height: 1.3; }
@media (prefers-reduced-motion: reduce) {
  .sys-block, .sys-block__pfeil { transition: none; }
  a.sys-block:hover { padding-inline: 0; }
  a.sys-block:hover .sys-block__pfeil { transform: none; }
}

/* ---------- Case-Detail (E54) ---------- */
.fall__videos { display: grid; gap: var(--sys-2); }
@media (min-width: 48rem) { .fall__videos { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.fall__videos > * { border-radius: var(--r-content); overflow: hidden; }
/* Querformate nehmen die ganze Breite — sonst stehen sie verloren
   zwischen Hochkantspalten (Eigentuemer 2026-08-18: „ordentlicher"). */
@media (min-width: 48rem) { .fall__videos > [data-quer="true"] { grid-column: 1 / -1; } }

/* ---------- Unterseiten-Feinschliff (E54) ----------
   Team, Blog, Karriere und Kontakt behalten ihre gemessene Struktur
   (Formular-Fehlerpfade, Personen-Aufklapper, Stellen-Logik) und
   bekommen hier die Systemkanten. */
.team-kopf { display: flex; flex-direction: column; gap: var(--sys-2); margin-bottom: var(--sys-5); }
.team-kopf__zitat { font-size: 1.125rem; }
.person__bild { border-radius: var(--r-content); }
.person__name { font-weight: 700; letter-spacing: -.025em; }
.person__rolle { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sos-green); }
.beitrag, .stelle { border-radius: var(--r-content); }
.feld input, .feld textarea, .feld select {
  border-radius: var(--r-control); border: 1px solid var(--line); background: var(--paper);
  font-family: var(--font-body); min-height: var(--tap); padding: .75rem .875rem;
}
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
  outline: 2px solid var(--sos-green); outline-offset: 2px; border-color: var(--sos-green);
}
.feld label { font-weight: 600; font-size: .9375rem; }

/* Person ohne Foto (E55): Initialen auf ruhiger Flaeche — erkennbar
   KEIN Portraet. Fuenf Kolleg:innen sind neu im Team, ihre Fotos und
   Kurzprofile fehlen noch (docs/state/relaunch.md, Personalstand). */
.person__initialen {
  display: grid; place-items: center; aspect-ratio: 4 / 5; width: 100%;
  background: var(--surface); color: var(--muted);
  border-radius: var(--r-content);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 8vw, 3.5rem);
  letter-spacing: -.02em;
}
.person__offen { color: var(--muted); font-style: italic; }

/* Beleg-Block (E55): eine belegte Aussage steht fuer sich, mit Quelle
   und Verweis — nicht als Beschriftung an fremdem Bildmaterial. */
.proof-block {
  display: flex; flex-direction: column; gap: var(--sys-2);
  border-left: 2px solid var(--sos-green); padding-left: var(--sys-3);
  max-width: 40em;
}

/* ============================================================
   E56 — Befunde des technischen Gates R9
   ============================================================ */

/* R9-N4: Der globale Fokusring (--sos-focus, Ink) ist auf dunklem Grund
   unsichtbar gemessen worden (1,07:1). Auf dunklen Flaechen laeuft er
   in Papier. */
.sys-final :focus-visible,
.sektion--dunkel :focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* R9-N5: Tap-Targets. Gemessen wurden 18-41 px an Fusszeilen-Links,
   Menue-Schalter, Cookie-Schalter, Consent-Checkbox und Inline-Links. */
.nav__schalter,
.footer__cookies,
.kopf__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.fuss a,
.footer a,
.footer__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.consent__option { min-height: var(--tap); }
.consent__option input { width: 1.5rem; height: 1.5rem; }
.consent__option label,
.consent__option span { display: inline-flex; align-items: center; min-height: var(--tap); }
.sys-leistung__inhalt a,
.sys-service a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* R9-N6: Im Druck (und in jedem Kontext ohne Scroll-Ereignisse) muessen
   alle Inhalte sichtbar sein. Gemessen waren 32 von 36 Reveal-Elementen
   im Druckbild unsichtbar. */
@media print {
  /* transition: none ist hier entscheidend — sonst laeuft die Blende
     samt Verzoegerung noch, wenn der Druckauftrag das Bild schon
     abgegriffen hat (gemessen: bis 740 ms). */
  .js-anim [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .kulisse, .sys-schleier, .sys-marquee { display: none !important; }
  .sys-final { background: #fff !important; color: #000 !important; }
  .sys-final .sys-impact, .sys-final .sys-read { color: #000 !important; }
}

/* R9-N8: Die Reveal-Verzoegerungen standen als rohe ms-Werte in
   style-Attributen im Komponentencode. Jetzt Tokens plus Klassen. */
:root { --vz-1: 60ms; --vz-2: 120ms; --vz-3: 160ms; --vz-4: 200ms; --vz-5: 240ms; }
.vz-1 { --vz: var(--vz-1); }
.vz-2 { --vz: var(--vz-2); }
.vz-3 { --vz: var(--vz-3); }
.vz-4 { --vz: var(--vz-4); }
.vz-5 { --vz: var(--vz-5); }

/* R9-N8: rohe Farbwerte auf dunklem Grund -> Tokens. */
:root { --auf-ink-leise: rgb(255 255 255 / .65); --auf-ink-still: rgb(255 255 255 / .55); }
.sys-final .sys-annot { color: var(--auf-ink-leise); }
.sys-final .sys-whisper { color: var(--auf-ink-still); }

/* Ghost-Knopf auf dunklem Grund (R9-N8: war ein rohes rgb im Markup). */
.sys-final .sys-btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--auf-ink-leise);
}

/* R9-N11: Die Schienen sind fokussierbar (tabindex="0"), damit sie in
   JEDEM Browser mit den Pfeiltasten gescrollt werden koennen — Chrome
   vergibt implizit Fokus, Safari nicht. Der Ring muss sichtbar sein. */
.sys-rail:focus-visible { outline: 2px solid var(--sos-green); outline-offset: 4px; }

/* R9-N16: die Kennzahlen im Plattform-Kontext waren 8,5 px auf
   wechselndem Bildmaterial. Jetzt 10 px mit staerkerem Schatten. */
.context .rail { font-size: .625rem; text-shadow: 0 1px 5px rgb(0 0 0 / .85); }
.context .konto { text-shadow: 0 1px 5px rgb(0 0 0 / .85); }

/* E57: Aufrufzeile in der Konto-Zeile, wie im Feed unter dem Namen. */
.context .konto__views { display: block; opacity: .92; font-variant-numeric: tabular-nums; }

/* ---------- Ansatz: drei Schritte (E57) ----------
   Keine Karten — eine Kette mit Linien, damit der Zusammenhang sichtbar
   ist. Genau das war die Forderung: „wie das alles zusammenhaengt". */
.ansatz { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: schritt; }
@media (min-width: 52rem) { .ansatz { grid-template-columns: repeat(3, 1fr); gap: var(--sys-3); } }
.ansatz li {
  display: grid; gap: .5rem; align-content: start;
  padding-block: var(--sys-3); border-top: 1.5px solid var(--ink); position: relative;
}
@media (max-width: 51.99rem) {
  .ansatz li + li { border-top-color: var(--line); }
}
.ansatz__nr { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; color: var(--sos-green); }
.ansatz__titel { font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.1; }
.ansatz__text { color: var(--muted); font-size: .9375rem; line-height: 1.55; max-width: 34em; }
/* Verbindung zwischen den Schritten: der Pfeil zeigt die Richtung. */
@media (min-width: 52rem) {
  .ansatz li:not(:last-child)::after {
    content: '→'; position: absolute; top: calc(var(--sys-3) * -1 + .1rem);
    right: calc(var(--sys-3) / -2 - .4rem); color: var(--sos-green); font-size: .875rem;
  }
}

/* ---------- Proof-Stat: die grosse Einzelkennzahl ----------
   E57-Befund: Die Klasse wurde im Markup benutzt, hatte aber nie CSS —
   Zahl und Bedeutung klebten als Inline-Text aneinander
   („966.435Aufrufe"). Der Baustein war nur im Prototyp definiert. */
.proof-stat { margin: 0; }
.proof-stat b {
  display: block;
  font-weight: 750;
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  letter-spacing: -.045em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.proof-stat span {
  display: block;
  padding-top: .5rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.proof-stat--green b { color: var(--sos-green); }

/* Kopfzeile im Feed-Schirm: sie stand weiss auf hellem Bildmaterial.
   Ein schmaler Schleier oben macht sie unabhaengig vom Motiv lesbar —
   dieselbe Begruendung wie beim Hero-Schleier (E56-Ausnahme). */
.context .schatten--oben {
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  background: linear-gradient(to bottom, rgb(0 0 0 / .55), transparent);
  z-index: 2;
}
/* Platz fuer die Bodenleiste — sie liegt fix ueber dem Seitenende. */
  body { padding-bottom: calc(var(--tap) + var(--space-7)); }.kopf[data-astro-cid-nen7h5rs] {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--page-gutter);
  background: var(--sos-bg);
  border-bottom: var(--kante) solid var(--sos-text);
}

.kopf__logo[data-astro-cid-nen7h5rs] {
  display: block;
  flex-shrink: 0;
}

.kopf__logo[data-astro-cid-nen7h5rs] img {
  width: var(--logo-breite);
  height: auto;
  filter: invert();
}

.nav[data-astro-cid-nen7h5rs] {
  position: fixed;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: calc(100vw - var(--space-4) * 2);
}

.nav__liste[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  margin: 0;
  list-style: none;
  background: var(--sos-bg);
  border: var(--hairline) solid var(--sos-text);
  border-radius: var(--r-pill, 999px);
}

.nav__liste[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:not(.sys-btn) {
  display: grid;
  justify-items: center;
  gap: calc(var(--space-1) / 2);
  min-width: var(--tap);
  min-height: var(--tap);
  align-content: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-pill, 999px);
  color: var(--sos-text-muted);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav__liste[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:not(.sys-btn) svg[data-astro-cid-nen7h5rs] {
  width: 1.05rem;
  height: 1.05rem;
  stroke-width: 1.5px;
}

.nav__liste[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:not(.sys-btn):hover {
  background: var(--sos-surface-2);
  color: var(--sos-text);
}

.nav__liste[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs][aria-current="page"] {
  color: var(--sos-text);
}

.nav__liste[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs][aria-current="page"] span[data-astro-cid-nen7h5rs] {
  text-decoration: underline;
  text-decoration-thickness: var(--unterstrich-aktiv);
  text-underline-offset: var(--unterstrich-abstand);
}

.nav__cta[data-astro-cid-nen7h5rs] {
  display: none;
}

.kopf__cta[data-astro-cid-nen7h5rs] {
  flex-shrink: 0;
}

@media (width <= 30rem) {
  .kopf[data-astro-cid-nen7h5rs] {
    flex-wrap: wrap;
  }

  .kopf__cta[data-astro-cid-nen7h5rs] {
    flex: 100%;
    justify-content: center;
  }
}

@media (width <= 26rem) {
  .nav__liste[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:not(.sys-btn) {
    padding-inline: var(--space-1);
  }
}
.footer__cookies[data-astro-cid-jo6i4kqk] {
  margin-left: var(--space-4);
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  font-size: var(--type-meta);
  color: var(--sos-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.footer[data-astro-cid-jo6i4kqk] {
  padding: var(--section-pad) var(--page-gutter) var(--space-6);
  background: var(--sos-surface-1);
}

.footer__inner[data-astro-cid-jo6i4kqk] {
  display: grid;
  gap: var(--space-8);
  max-width: var(--page-max);
  margin-inline: auto;
}

@media (width >= 48rem) {
  .footer__inner[data-astro-cid-jo6i4kqk] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

.footer__titel[data-astro-cid-jo6i4kqk] {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--type-micro);
  font-weight: 500;
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  color: var(--sos-text-muted);
  text-transform: uppercase;
}

.footer__liste[data-astro-cid-jo6i4kqk] {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer__liste[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk] {
  font-family: var(--font-display);
  font-size: var(--type-meta);
  font-weight: 500;
  text-decoration: none;
}

.footer__liste[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk]:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
}

.footer__adresse[data-astro-cid-jo6i4kqk] {
  font-size: var(--type-meta);
  font-style: normal;
  line-height: var(--lh-body);
  color: var(--sos-text-muted);
}

.footer__adresse[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk] {
  color: var(--sos-text);
}

.footer__liste--social[data-astro-cid-jo6i4kqk] {
  margin-top: var(--space-5);
}

.footer__copyright[data-astro-cid-jo6i4kqk] {
  max-width: var(--page-max);
  margin: var(--space-9) auto 0;
  font-size: var(--type-meta);
  color: var(--sos-text-muted);
}
.consent[data-astro-cid-bm4qem4n] {
  position: fixed;
  right: var(--rand);
  bottom: var(--rand);
  left: var(--rand);
  z-index: 150;
  max-width: 26rem;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-content);
  box-shadow: 0 18px 44px #14131229;
}

@media (width >= 48rem) {
  .consent[data-astro-cid-bm4qem4n] {
    left: auto;
    margin-inline: 0;
  }
}

.consent[data-astro-cid-bm4qem4n][hidden] {
  display: none;
}

.consent__inner[data-astro-cid-bm4qem4n] {
  padding: var(--sys-3);
}

.consent__titel[data-astro-cid-bm4qem4n] {
  margin-bottom: var(--sys-1);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.consent__text[data-astro-cid-bm4qem4n] {
  margin-bottom: var(--sys-2);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
}

.consent__text[data-astro-cid-bm4qem4n] a[data-astro-cid-bm4qem4n] {
  color: var(--sos-green);
  text-decoration: underline;
}

.consent__optionen[data-astro-cid-bm4qem4n] {
  display: grid;
  gap: var(--sys-1);
  margin-bottom: var(--sys-3);
}

.consent__option[data-astro-cid-bm4qem4n] {
  display: flex;
  gap: .625rem;
  align-items: center;
  font-size: .875rem;
}

.consent__option[data-astro-cid-bm4qem4n] {
  min-height: var(--tap);
}

.consent__option[data-astro-cid-bm4qem4n] input[data-astro-cid-bm4qem4n] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--sos-green);
}

.consent__option[data-astro-cid-bm4qem4n] label[data-astro-cid-bm4qem4n] {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
}

.consent__hinweis[data-astro-cid-bm4qem4n] {
  color: var(--muted);
}

.consent__aktionen[data-astro-cid-bm4qem4n] {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.consent__aktionen[data-astro-cid-bm4qem4n] .knopf[data-astro-cid-bm4qem4n] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1.125rem;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  border-radius: var(--r-control);
  background: var(--sos-green);
  color: var(--paper);
  cursor: pointer;
  transition: transform var(--t-schnell) var(--sys-ease), box-shadow var(--t-schnell) var(--sys-ease);
}

.consent__aktionen[data-astro-cid-bm4qem4n] .knopf[data-astro-cid-bm4qem4n]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px #1d5c3f42;
}

.consent__aktionen[data-astro-cid-bm4qem4n] .knopf[data-astro-cid-bm4qem4n]:active {
  transform: none;
}

.consent__aktionen[data-astro-cid-bm4qem4n] .knopf--sekundaer[data-astro-cid-bm4qem4n] {
  background: none;
  color: var(--ink);
  border: 1.5px solid var(--line);
}

.consent__aktionen[data-astro-cid-bm4qem4n] .knopf--sekundaer[data-astro-cid-bm4qem4n]:hover {
  box-shadow: 0 8px 20px #1413121f;
}

@media (prefers-reduced-motion: reduce) {
  .consent__aktionen[data-astro-cid-bm4qem4n] .knopf[data-astro-cid-bm4qem4n] {
    transition: none;
  }

  .consent__aktionen[data-astro-cid-bm4qem4n] .knopf[data-astro-cid-bm4qem4n]:hover {
    transform: none;
  }
}