/* =========================================================
   My Cortex – oeffentliche Seiten (Startseite, Trust Center,
   Impressum, Datenschutz, AVV-Fassungen)

   SEIT DEM 16.09.2026 IM VERWALTUNGS-SYSTEM (DESIGN.md).
   Vorher trug diese Datei ein eigenes Markenregister: IBM Plex
   Serif/Sans, Blau-Cyan-Verlauf in Hero, CTA-Band, Rechtstitel
   und Fassungsumschalter. Jetzt dieselbe Formensprache wie die
   Verwaltungsoberflaeche: Inter, grauer Grund, weisse Karten mit
   feiner Kante, dunkler Hauptknopf, Blau nur fuer Links und Fokus.

   Damit sind die Offenen Enden 1 bis 3 aus design-system/README.md
   erledigt: es gibt keinen Verlauf mehr hinter oder in Schrift.

   Die alten Namen (--bg, --ink, --accent ...) bleiben stehen, weil
   Regeln und Vorlagen sie lesen; sie zeigen alle auf --ds-* aus
   static/tokens.css. Hell und Dunkel schaltet tokens.css um, hier
   steht kein zweiter Satz Farbwerte.
   ========================================================= */

:root {
  --bg: var(--ds-grund);
  --surface: var(--ds-flaeche);
  --surface-2: var(--ds-flaeche-2);
  --ink: var(--ds-text);
  --ink-soft: var(--ds-text-2);
  --muted: var(--ds-text-2);
  --border: var(--ds-rand);

  --accent: var(--ds-link);
  --accent-strong: var(--ds-link-hover);
  --accent-contrast: var(--ds-text-auf-link);
  --ring: var(--ds-rand-fokus);

  --container: var(--ds-seite-breite-weit);
  --radius: var(--ds-r-3);

  --serif: var(--ds-schrift);
  --sans: var(--ds-schrift);

  --shadow-sm: var(--ds-schatten-karte);
  --shadow-md: var(--ds-schatten-ueber);

  --ease: var(--ds-kurve);
  --t-fast: var(--ds-zeit);
  --t-med: var(--ds-zeit-lang);

  --z-nav: 40;

  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ds-kopfleiste-hoehe) + 16px); }

/* hidden-Attribut muss zuverlaessig ausblenden, auch wenn eine Klasse
   display setzt (sonst ueberdeckt z. B. das Intro unsichtbar die Seite). */
[hidden] { display: none !important; }
body {
  background: var(--ds-grund);
  color: var(--ds-text);
  font-family: var(--ds-schrift);
  font-size: var(--ds-t-lg);
  line-height: var(--ds-zh-lg);
  font-weight: var(--ds-gew-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 1;
}
img { max-width: 100%; display: block; }
a { color: var(--ds-link); text-decoration: none; }
a:hover { color: var(--ds-link-hover); text-decoration: underline; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--ds-rand-fokus); outline-offset: 2px; border-radius: var(--ds-r-1); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

h1, h2, h3 { font-family: var(--ds-schrift); color: var(--ds-text); text-wrap: balance; }
p { text-wrap: pretty; }

/* Kleine Zeile ueber dem Abschnittstitel. Grau und ruhig, keine
   Versalien, kein Blau: Blau ist Links vorbehalten. */
.eyebrow {
  font-size: var(--ds-t-md);
  line-height: var(--ds-zh-md);
  font-weight: var(--ds-gew-mittel);
  color: var(--ds-text-2);
  margin-bottom: 4px;
}
.section-title {
  font-size: var(--ds-t-h-xl);
  line-height: var(--ds-zh-h-xl);
  font-weight: var(--ds-gew-fett);
  letter-spacing: var(--ds-sperr-dichter);
  max-width: 34ch;
  margin-bottom: 20px;
}
.fineprint {
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm);
  color: var(--ds-text-2); margin-top: 12px;
}

/* Abschnitts-Rhythmus: gleichmaessig, wie Kartengruppen einer Seite */
section { padding: 40px 0; }

/* ---------- Knoepfe ----------
   Die Optik kommt aus bausteine.css (.ds-knopf, .ds-knopf--primaer),
   die Vorlagen tragen beide Klassen. Hier bleibt nur, was die alten
   Klassen an Mass beitragen. */
.btn { text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn.ds-knopf--gross { padding: 8px 16px; }

/* =========================================================
   1. Kopfleiste (sticky)
   ENTSCHEIDUNG: helle Leiste statt der schwarzen Kopfleiste der
   Verwaltung. Oeffentliche Seiten haben keine Navigationsspalte, und
   der Anmeldeknopf soll der dunkle Hauptknopf sein, der auf Schwarz
   nicht traegt. Auf den Rechtstexten waere ein schwarzes Band das
   schwerste Element einer Leseseite. Masse, Knoepfe und Schrift sind
   dieselben wie in der Verwaltung (56 px hoch, 13 px Eintraege).
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--ds-flaeche);
  border-bottom: 1px solid var(--ds-rand);
}
.nav.is-scrolled { box-shadow: var(--ds-schatten-1); }
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
  height: var(--ds-kopfleiste-hoehe);
  display: flex; align-items: center; gap: 16px;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ds-text); text-decoration: none;
}
.nav-brand:hover { color: var(--ds-text); text-decoration: none; }
.nav-logo { width: 28px; height: 28px; border-radius: var(--ds-r-2); }
.nav-name {
  font-weight: var(--ds-gew-halbfett); font-size: var(--ds-t-lg);
  line-height: var(--ds-zh-lg); white-space: nowrap;
}
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; height: 32px; padding: 0 10px;
  border-radius: var(--ds-r-2);
  color: var(--ds-text-2);
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-mittel);
}
.nav-link:hover {
  color: var(--ds-text); background: var(--ds-fuell-transparent-hover); text-decoration: none;
}
.nav-actions { display: flex; align-items: center; gap: 8px; }
.btn-nav { min-height: 32px; }

/* Hamburger: sekundaerer Symbolknopf */
.nav-burger {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--ds-r-2);
  background: var(--ds-fuell); box-shadow: var(--ds-schatten-knopf);
  color: var(--ds-icon); cursor: pointer;
  transition: background-color var(--ds-zeit-kurz) var(--ds-kurve);
}
.nav-burger:hover { background: var(--ds-fuell-hover); box-shadow: var(--ds-schatten-knopf-hover); color: var(--ds-text); }
.nav-burger:active { background: var(--ds-fuell-aktiv); box-shadow: var(--ds-schatten-knopf-aktiv); }

/* Hamburger-Knopf: auf breiten Screens unsichtbar, unter 860px anstelle der
   immer sichtbaren Links. */
.nav-burger { display: none; }
.nav-burger svg { width: 18px; height: 18px; display: block; }

@media (max-width: 860px) {
  .nav-burger { display: grid; }

  /* Dasselbe .nav-links wie auf dem Desktop, als Menue unter der Leiste.
     position:absolute haengt am positionierten Vorfahren (.nav ist sticky),
     top:100% setzt es also unter die Leiste. */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 4px); left: 8px; right: 8px;
    margin-left: 0;
    flex-direction: column;
    gap: 0;
    padding: 6px;
    background: var(--ds-flaeche);
    border-radius: var(--ds-r-3);
    box-shadow: var(--ds-schatten-ueber);
  }
  .nav-links.is-open { display: flex; }
  .nav-link {
    height: 44px;                  /* Fingergroesse, nicht Zeilenabstand */
    padding: 0 12px;
    font-size: var(--ds-t-lg);
    color: var(--ds-text);
  }
}
@media (max-width: 420px) {
  .nav-inner { padding: 0 16px; gap: 8px; }
  .nav-actions { gap: 6px; }
}

/* Offen: zwei Striche kippen zum Kreuz, der mittlere geht weg. Die Urspruenge
   liegen in SVG-Nutzerkoordinaten (Mitte jeder Linie). */
.nav-burger[aria-expanded="true"] .burger-linie-1 {
  transform: translateY(5px) rotate(45deg);
  transform-origin: 12px 7px;
}
.nav-burger[aria-expanded="true"] .burger-linie-2 { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-linie-3 {
  transform: translateY(-5px) rotate(-45deg);
  transform-origin: 12px 17px;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-burger path {
    transition: transform var(--ds-zeit) var(--ds-kurve), opacity var(--ds-zeit) var(--ds-kurve);
  }
  .nav-links.is-open { animation: menue-auf var(--ds-zeit) var(--ds-kurve); }
}
@keyframes menue-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================
   2. Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 0 0 16px;
  background: none;
  color: var(--ds-text);
}
.hero-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: 64px 0;
  background: #fff;
  color: var(--ds-text);
  isolation: isolate;
  contain: paint;
}
.hero-loop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-inner {
  position: relative; z-index: 1; width: 100%;
  padding: 0 clamp(16px, 3.75vw, 72px);
  text-align: left;
}
.hero-title {
  font-weight: var(--ds-gew-fett);
  font-size: clamp(40px, 5.6vw, 132px); line-height: 1.02;
  letter-spacing: -0.035em;
  color: #0b1622; text-wrap: balance;
}
.hero-line { display: inline; }
.hero-subtitle {
  margin: clamp(20px, 3vw, 48px) 0 0; max-width: none;
  font-size: clamp(18px, 1.8vw, 34px); line-height: 1.3;
  font-weight: var(--ds-gew-halbfett);
  color: #0b1622; text-wrap: pretty;
}
.hero-actions { margin-top: clamp(24px, 3vw, 48px); display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; }
.hero-band .ds-knopf--primaer {
  min-height: clamp(48px, 3.4vw, 66px);
  padding: 0 clamp(24px, 1.9vw, 36px);
  font-size: clamp(16px, 1.15vw, 22px); font-weight: var(--ds-gew-halbfett);
  border-radius: 12px;
  background: #0b1622; box-shadow: none; color: #fff;
}
.hero-band .ds-knopf--primaer:hover { background: #1c2a3a; }

.login-schwebend {
  position: fixed; top: 16px; right: clamp(16px, 3.75vw, 72px); z-index: var(--z-nav);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--ds-zeit) var(--ds-kurve), transform var(--ds-zeit) var(--ds-kurve);
  background: #0b1622; box-shadow: var(--ds-schatten-1); color: #fff;
}
.login-schwebend:hover { background: #1c2a3a; color: #fff; text-decoration: none; }
.login-schwebend:focus-visible, .login-schwebend.ist-sichtbar {
  opacity: 1; transform: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .login-schwebend { transition: none; transform: none; }
}

.section-title--mitte { margin-left: auto; margin-right: auto; text-align: center; }

.fakten { padding-top: 72px; }
.fakten-titel { max-width: 30ch; font-size: var(--ds-t-h-3xl); line-height: var(--ds-zh-h-3xl); letter-spacing: var(--ds-sperr-am-dichtesten); }
.faktenkarten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-karte-luecke); margin-top: 40px;
}
.faktenkarte {
  --fk-tief: #e4ecf8; --fk-blau: #9dbfec; --fk-licht: #ffffff;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 460px;
  border-radius: 20px;
  background: radial-gradient(130% 70% at 70% 100%, var(--fk-blau), var(--fk-tief) 72%);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.14);
  color: #0b1f36;
}
.faktenkarte[data-muster="punkte"] { --fk-tief: #dde9f8; --fk-blau: #3f7ecb; }
.faktenkarte[data-muster="ringe"] { --fk-tief: #e2eef9; --fk-blau: #86b6e8; }
.faktenkarte[data-muster="faeden"] { --fk-tief: #edf1f6; --fk-blau: #8fb1dc; }
.faktenkarte-muster {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; display: block;
}
.faktenkarte-inhalt { padding: 28px 24px; }
.faktenkarte-name {
  color: inherit;
  font-size: 28px; line-height: 34px;
  font-weight: var(--ds-gew-halbfett); letter-spacing: var(--ds-sperr-am-dichtesten);
  text-wrap: initial;
}
.faktenkarte-name span { display: block; }
.faktenkarte-text {
  margin-top: 16px;
  font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg);
  color: #1f3550;
}
.faktenkarte--dunkel {
  --fk-tief: #0a1729; --fk-blau: #285a98; --fk-licht: #d4e6ff;
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.22);
  color: #fff;
}
.faktenkarte--dunkel[data-muster="faeden"] { --fk-tief: #08131f; --fk-blau: #1c416e; --fk-licht: #d2e3f7; }
.faktenkarte--dunkel .faktenkarte-text { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 1080px) {
  .faktenkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faktenkarte { min-height: 380px; }
}
@media (max-width: 560px) {
  .fakten-titel { font-size: var(--ds-t-h-2xl); line-height: var(--ds-zh-h-2xl); }
  .faktenkarten { grid-template-columns: 1fr; }
  .faktenkarte { min-height: 320px; }
  .faktenkarte-name { font-size: 24px; line-height: 30px; }
}

.ueberblick { padding: 88px 0 72px; overflow-x: clip; }
.ueberblick .container { max-width: 1360px; }
.ueberblick-titel {
  max-width: 24ch; margin-bottom: 0;
  font-size: var(--ds-t-h-3xl); line-height: var(--ds-zh-h-3xl); letter-spacing: var(--ds-sperr-am-dichtesten);
}
.ueberblick-buehne {
  --p: 1;
  --q: calc(1 - var(--p));
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 40px;
  margin-top: 56px;
}
.ueberblick-raum { width: 100%; max-width: 960px; justify-self: center; perspective: 2200px; perspective-origin: 50% 20%; }
.ueberblick-kippe {
  transform-origin: 50% 40%;
  transform:
    translate3d(0, calc(var(--q) * 220px), 0)
    rotateX(calc(14deg + var(--q) * 26deg))
    rotateY(calc(-9deg + var(--q) * 5deg))
    rotateZ(calc(2.5deg + var(--q) * 3deg))
    scale(calc(0.97 - var(--q) * 0.1));
  opacity: calc(0.15 + var(--p) * 0.85);
  will-change: transform, opacity;
}
.ueberblick-rahmen {
  position: relative; overflow: hidden;
  aspect-ratio: 8 / 5;
  border-radius: 18px;
  background: #eef1f5;
  box-shadow:
    0 0 0 1px rgba(11, 22, 34, 0.08),
    0 2px 4px rgba(11, 22, 34, 0.06),
    24px 48px 90px -24px rgba(11, 22, 34, 0.38),
    8px 20px 40px -20px rgba(11, 22, 34, 0.3);
  transition: background-color 450ms var(--ds-kurve);
}
.ueberblick-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 450ms var(--ds-kurve);
}
.ueberblick-bild--dunkel { opacity: 0; }
.ueberblick-buehne[data-modus="dunkel"] .ueberblick-rahmen { background: #15171b; }
.ueberblick-buehne[data-modus="dunkel"] .ueberblick-bild--dunkel { opacity: 1; }
.ueberblick-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 500ms var(--ds-kurve);
}
.ueberblick-rahmen.ist-film .ueberblick-film { opacity: 1; }
.ueberblick-quelle {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  opacity: 0; pointer-events: none;
}
.ueberblick-glanz {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%);
  mix-blend-mode: soft-light;
}

.ueberblick-modus {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 0; border-radius: 999px;
  background: var(--ds-flaeche);
  box-shadow: 0 0 0 1px var(--ds-rand), 0 6px 16px -8px rgba(11, 22, 34, 0.25);
  color: var(--ds-text-2); cursor: pointer;
  transition: box-shadow var(--ds-zeit) var(--ds-kurve);
}
.ueberblick-modus[hidden] { display: none; }
.ueberblick-modus:hover { box-shadow: 0 0 0 1px var(--ds-rand-hover), 0 8px 20px -8px rgba(11, 22, 34, 0.3); }
.ueberblick-modus svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: color var(--ds-zeit) var(--ds-kurve);
}
.ueberblick-modus[aria-pressed="false"] .ueberblick-modus-sonne,
.ueberblick-modus[aria-pressed="true"] .ueberblick-modus-mond { color: var(--ds-text); }
.ueberblick-modus-spur {
  position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: #d9dee6;
  transition: background-color var(--ds-zeit) var(--ds-kurve);
}
.ueberblick-modus-knauf {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(11, 22, 34, 0.3);
  transition: transform var(--ds-zeit) var(--ds-kurve);
}
.ueberblick-modus[aria-pressed="true"] .ueberblick-modus-spur { background: #0b1622; }
.ueberblick-modus[aria-pressed="true"] .ueberblick-modus-knauf { transform: translateX(18px); }

@media (max-width: 900px) {
  .ueberblick { padding: 64px 0 48px; }
  .ueberblick-buehne { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
  .ueberblick-modus { justify-self: center; }
  .ueberblick-rahmen { border-radius: 10px; }
}
@media (max-width: 560px) {
  .ueberblick-titel { font-size: var(--ds-t-h-2xl); line-height: var(--ds-zh-h-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .ueberblick-buehne { --p: 1; }
  .ueberblick-kippe { will-change: auto; }
  .ueberblick-bild, .ueberblick-rahmen, .ueberblick-modus-knauf { transition: none; }
}

.laufband { position: relative; z-index: 1; padding: 32px 0; }
.laufband-titel {
  text-align: center; margin-bottom: 16px;
  color: var(--ds-text-2);
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-mittel);
}
.laufband-fenster {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.laufband-spur { display: flex; gap: 48px; width: max-content; padding: 4px 24px; }
.laufband-wort {
  white-space: nowrap;
  font-size: var(--ds-t-h-lg); line-height: var(--ds-zh-h-lg);
  font-weight: var(--ds-gew-halbfett); letter-spacing: var(--ds-sperr-dicht);
  color: var(--ds-text-2);
  display: flex; align-items: center; gap: 14px;
}
.laufband-logo { flex: none; width: 32px; height: 32px; object-fit: contain; }
.laufband-logo-einfarbig {
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .laufband-spur { animation: laufband 40s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { flex-wrap: wrap; justify-content: center; width: auto; gap: 16px 32px; }
  .laufband-wort[aria-hidden="true"] { display: none; }
}
@keyframes laufband { to { transform: translateX(calc(-50% - 24px)); } }

.modelle { padding: 72px 0 56px; text-align: center; overflow: hidden; }
.agent-kopf {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 auto 80px;
}
.agent-bild { width: clamp(140px, 18vw, 220px); height: auto; display: block; position: relative; z-index: 1; }
.agent-buehne {
  position: relative; container-type: size;
  width: 100%; height: clamp(500px, 44vw, 560px);
  display: grid; place-items: center;
  margin-bottom: clamp(16px, 2.6vw, 40px);
}
.gesetze { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.gesetz {
  position: absolute;
  left: calc(50% + var(--x) * 1%); top: calc(50% + var(--y) * 1%);
  width: calc(clamp(108px, 15.5%, 180px) * var(--s));
  translate: -50% -50%;
}
.gesetz-hub, .gesetz-bild { display: block; }
.gesetz-bild { width: 100%; height: auto; rotate: var(--r); }
.gesetz:nth-child(1)  { --x: -22.1; --y: -1.5; --s: 1;   --r: -4deg; --hub: 7px; --hub-t: 6.2s; --kipp-t: 9.4s;  --phase: -0.8s; }
.gesetz:nth-child(2)  { --x: 36.5; --y: -21.4; --s: .82; --r: 3deg;  --hub: 6px; --hub-t: 7.1s; --kipp-t: 8.3s;  --phase: -3.1s; }
.gesetz:nth-child(3)  { --x: -26; --y: 33; --s: .96;  --r: 4deg;  --hub: 8px; --hub-t: 5.6s; --kipp-t: 10.2s; --phase: -1.9s; }
.gesetz:nth-child(4)  { --x: 25; --y: -1.5; --s: .96;   --r: 5deg;  --hub: 7px; --hub-t: 6.7s; --kipp-t: 9.8s;  --phase: -4.4s; }
.gesetz:nth-child(5)  { --x: 21; --y: 36; --s: .96;  --r: -2deg; --hub: 6px; --hub-t: 7.6s; --kipp-t: 8.8s;  --phase: -2.6s; }
.gesetz:nth-child(6)  { --x: -34.7; --y: -31.3; --s: .9; --r: -5deg; --hub: 8px; --hub-t: 5.9s; --kipp-t: 11s;   --phase: -0.3s; }
.gesetz:nth-child(7)  { --x: 17.4; --y: -33; --s: .9;  --r: -3deg; --hub: 6px; --hub-t: 6.9s; --kipp-t: 9.1s;  --phase: -5.2s; }
.gesetz:nth-child(8)  { --x: -43.4; --y: 10.7; --s: .8;  --r: 6deg;  --hub: 7px; --hub-t: 8.1s; --kipp-t: 10.6s; --phase: -3.7s; }
.gesetz:nth-child(9)  { --x: -15.5; --y: -37.5; --s: .78; --r: 3deg;  --hub: 7px; --hub-t: 7.3s; --kipp-t: 8.6s;  --phase: -6.1s; }
.gesetz:nth-child(10) { --x: 41.7; --y: 21.4; --s: .8; --r: -6deg; --hub: 6px; --hub-t: 6.4s; --kipp-t: 9.9s;  --phase: -1.4s; }
@media (max-width: 760px) {
  .agent-buehne { max-width: 440px; height: clamp(500px, 146vw, 600px); }
  .gesetz { width: calc(clamp(84px, 31%, 120px) * var(--s)); }
  .gesetz:nth-child(1)  { --x: 0;   --y: -38; --s: 1; }
  .gesetz:nth-child(2)  { --x: -32; --y: -34; --s: .88; }
  .gesetz:nth-child(3)  { --x: 36;  --y: -11; --s: .92; }
  .gesetz:nth-child(4)  { --x: 32;  --y: -34; --s: .9; }
  .gesetz:nth-child(5)  { --x: -36; --y: -11; --s: .92; }
  .gesetz:nth-child(6)  { --x: -36; --y: 14;  --s: .88; }
  .gesetz:nth-child(7)  { --x: 36;  --y: 14;  --s: .9; }
  .gesetz:nth-child(8)  { --x: -31; --y: 36;  --s: .86; }
  .gesetz:nth-child(9)  { --x: 0;   --y: 39;  --s: .84; }
  .gesetz:nth-child(10) { --x: 31;  --y: 36;  --s: .86; }
}
@keyframes gesetz-heben {
  0%, 100% { transform: translate3d(0, calc(var(--hub) * -1), 0); }
  50% { transform: translate3d(0, var(--hub), 0); }
}
@keyframes gesetz-kippen {
  0%, 100% { transform: rotate(-1.8deg); }
  50% { transform: rotate(1.8deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .gesetz-hub { animation: gesetz-heben var(--hub-t) ease-in-out var(--phase) infinite; will-change: transform; }
  .gesetz-bild { animation: gesetz-kippen var(--kipp-t) ease-in-out calc(var(--phase) * 1.7) infinite; will-change: transform; }
  .gesetz {
    transition: opacity 700ms var(--ds-kurve), transform 1500ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(80ms + var(--g-i) * 70ms);
  }
  .agent-buehne.wartet .gesetz {
    opacity: 0;
    transform: translate(calc(var(--x) * -1cqw), calc(var(--y) * -1cqh)) scale(.2);
  }
}
.agent-titel {
  margin: 0;
  font-weight: var(--ds-gew-fett);
  font-size: clamp(44px, 7vw, 120px); line-height: 1.02;
  letter-spacing: -0.035em;
}
.agent-zeile {
  margin: clamp(12px, 1.6vw, 24px) 0 0;
  font-size: clamp(22px, 2.6vw, 44px); line-height: 1.2;
  font-weight: var(--ds-gew-halbfett);
  letter-spacing: -0.02em;
  color: var(--ds-text-2);
}
.modelle .section-title {
  max-width: 22ch; margin-bottom: 0;
  font-size: var(--ds-t-h-3xl); line-height: var(--ds-zh-h-3xl); letter-spacing: var(--ds-sperr-am-dichtesten);
}
.modelle-reihe {
  list-style: none; padding: 0; margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px; max-width: 1040px;
}
.modell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.modell-bild { width: 100%; max-width: 168px; height: auto; display: block; }
.modell-name {
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md);
  font-weight: var(--ds-gew-mittel); color: var(--ds-text-2);
}
@media (max-width: 760px) {
  .modelle-reihe { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 28px; }
  .modell { flex: 0 0 calc((100% - 32px) / 3); }
  .modell-bild { max-width: 112px; }
}
@keyframes modell-schweben {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .modell.reveal {
    opacity: 0; transform: translateY(120px) scale(.92);
    transition: opacity 700ms var(--ds-kurve), transform 900ms cubic-bezier(.2, .9, .25, 1.15);
    transition-delay: calc(var(--rv-i, 0) * 110ms);
  }
  html.js .modell.reveal.in { opacity: 1; transform: none; }
  html.js .modell.in .modell-bild {
    animation: modell-schweben calc(5s + var(--rv-i, 0) * 400ms) ease-in-out infinite;
    animation-delay: calc(900ms + var(--rv-i, 0) * 110ms);
  }
}

.agentfilm { padding: 112px 0 128px; }
.agentfilm .container { max-width: 1360px; }
.agentfilm-kopf { margin-bottom: 64px; }
.agentfilm-titel {
  margin: 0;
  font-size: clamp(36px, 5.6vw, 88px); line-height: 1.04;
  font-weight: var(--ds-gew-fett); letter-spacing: -0.035em;
}
.agentfilm-raster {
  display: grid; grid-template-columns: 360px minmax(0, 1fr);
  grid-template-areas: "schritte film";
  gap: 64px; align-items: center;
}
.agentfilm-rahmen {
  grid-area: film;
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 14px;
  background: var(--ds-flaeche-2); box-shadow: 0 0 0 1px rgba(11, 22, 34, 0.07);
}
.agentfilm-rahmen--weiss { background: var(--ds-grund); }
.agentfilm-rahmen--dunkel { background: #0b1622; }
.agentfilm--gespiegelt .agentfilm-raster {
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "film schritte";
}
.agentfilm-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.agentfilm-schritte { grid-area: schritte; border-top: 1px solid var(--ds-rand); }
.agentfilm-text {
  grid-area: schritte; margin: 0;
  font-size: 20px; line-height: 30px; color: var(--ds-text-2);
}
.agentfilm-schritt { border-bottom: 1px solid var(--ds-rand); }
.agentfilm-sprung {
  display: flex; align-items: baseline; gap: 16px;
  width: 100%; padding: 16px 0; text-align: left;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; line-height: 22px; font-weight: var(--ds-gew-mittel);
  color: var(--ds-text-2);
  transition: color 200ms var(--ds-kurve), padding 320ms var(--ds-kurve);
}
.agentfilm-schritt.ist-aktiv .agentfilm-sprung { color: var(--ds-text); }
@media (hover: hover) {
  .agentfilm-sprung:hover { color: var(--ds-text); }
}
.agentfilm-nr { flex: none; width: 20px; font-size: var(--ds-t-md); font-variant-numeric: tabular-nums; }
.agentfilm-mehr {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 320ms var(--ds-kurve);
}
.agentfilm-mehr > div { overflow: hidden; min-height: 0; }
.agentfilm-mehr p {
  min-height: 58px; padding: 0 0 16px 36px;
  font-size: var(--ds-t-lg); line-height: 21px; color: var(--ds-text-2);
  transition: opacity 240ms var(--ds-kurve);
}
html.js .agentfilm-schritt:not(.ist-aktiv) .agentfilm-mehr { grid-template-rows: 0fr; }
html.js .agentfilm-schritt:not(.ist-aktiv) .agentfilm-mehr p { opacity: 0; }
.agentfilm-schritt.ist-aktiv .agentfilm-sprung { padding-bottom: 8px; }
@media (max-width: 1080px) {
  .agentfilm-raster,
  .agentfilm--gespiegelt .agentfilm-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "film" "schritte"; gap: 32px; }
}
@media (max-width: 900px) {
  .agentfilm { padding: 72px 0 88px; }
  .agentfilm-kopf { margin-bottom: 32px; }
  .agentfilm-rahmen { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .agentfilm-sprung, .agentfilm-mehr, .agentfilm-mehr p { transition: none; }
}

/* =========================================================
   11. Fussleiste
   ========================================================= */
.footer { border-top: 1px solid var(--ds-rand); background: var(--ds-flaeche); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 24px 32px; padding-top: 32px; padding-bottom: 24px;
}
.footer-claim {
  color: var(--ds-text-2); margin: 8px 0 4px;
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md);
}
.footer-mail { font-size: var(--ds-t-md); line-height: var(--ds-zh-md); }
.footer-head {
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-halbfett);
  color: var(--ds-text);
  margin-bottom: 8px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 4px; }
.footer-col a {
  color: var(--ds-text-2);
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md);
}
.footer-col a:hover { color: var(--ds-text); text-decoration: underline; }
.footer-news-text { color: var(--ds-text-2); font-size: var(--ds-t-md); margin-bottom: 12px; }
.footer-form { display: flex; gap: 8px; }
.footer-form input {
  flex: 1; min-width: 0; min-height: var(--ds-feld-hoehe); padding: 6px 12px;
  border: 1px solid var(--ds-rand-feld); border-radius: var(--ds-r-2);
  background: var(--ds-feld-grund); color: var(--ds-text);
  font: var(--ds-gew-normal) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);
}
.footer-form input:focus { outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 16px; padding-bottom: 24px;
  border-top: 1px solid var(--ds-rand-2);
  color: var(--ds-text-2); font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); flex-wrap: wrap;
}

.footer-recht { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-recht a { color: var(--ds-text-2); }
.footer-recht a:hover { color: var(--ds-text); text-decoration: underline; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================
   Scroll-Reveals
   Inhalte sind IMMER sichtbar; nur mit JS (html.js) und ohne
   reduzierte Bewegung blenden Kacheln kurz ein (250 ms, 4 px).
   Der Fallback-Timer im JS loest zusaetzlich.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0; transform: translateY(4px);
    transition: opacity var(--ds-zeit-lang) var(--ds-kurve), transform var(--ds-zeit-lang) var(--ds-kurve);
    transition-delay: calc(var(--rv-i, 0) * 40ms);
  }
  html.js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Reduzierte Bewegung: alles ruhig, alles sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================================
   Rechtstexte und Trust Center (/impressum, /datenschutz,
   /avv*, /trust): eine Dokumentseite. Schmale Spalte als Karte
   auf dem grauen Grund, klare Ueberschriftenstufen, Lesetext 15 px.
   ========================================================= */
.legal {
  padding: 32px 24px 64px;
}
.legal-inner {
  max-width: 760px; margin: 0 auto;
  padding: 32px 40px 40px;
  background: var(--ds-flaeche);
  border-radius: var(--ds-r-3);
  box-shadow: var(--ds-schatten-karte);
  font-size: 15px; line-height: 24px;
}
.legal .eyebrow { margin-bottom: 4px; }
.legal-title {
  font-weight: var(--ds-gew-fett);
  font-size: var(--ds-t-h-2xl); line-height: var(--ds-zh-h-2xl);
  letter-spacing: var(--ds-sperr-am-dichtesten);
  color: var(--ds-text);
  overflow-wrap: break-word; hyphens: auto;   /* lange Rechtstitel (AVV) sauber umbrechen */
}
.legal .legal-lead {
  color: var(--ds-text-2); font-size: 16px; line-height: 24px;
  margin-top: 8px; max-width: 60ch;
}
.legal .legal-lead + .fineprint { margin-top: 4px; }
.legal p.fineprint, .legal p.eyebrow { color: var(--ds-text-2); }
.legal address {
  font-style: normal; font-size: 15px; line-height: 24px; color: var(--ds-text);
  margin-top: 24px;
}
.legal address.legal-card {
  padding: 12px 16px;
  background: var(--ds-flaeche-2);
  border-radius: var(--ds-r-2);
  box-shadow: inset 0 0 0 1px var(--ds-rand-2);
}
.legal address .legal-name { font-weight: var(--ds-gew-halbfett); }
.legal h2 {
  font-size: var(--ds-t-h-lg); line-height: 28px; font-weight: var(--ds-gew-halbfett);
  letter-spacing: var(--ds-sperr-dicht);
  color: var(--ds-text);
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ds-rand-2);
}
.legal p { color: var(--ds-text); margin-top: 8px; }
.legal a { color: var(--ds-link); }
.legal a:hover { color: var(--ds-link-hover); text-decoration: underline; }
.legal-stand {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--ds-rand-2);
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm);
}
.legal p.legal-stand { color: var(--ds-text-2); }

/* Zusaetzliche Rechtstext-Elemente (AVV): Zwischenueberschrift, Listen, Tabelle */
.legal h3 {
  font-size: 15px; line-height: 24px; font-weight: var(--ds-gew-halbfett);
  color: var(--ds-text); margin-top: 20px;
}
.legal ul {
  list-style: disc; margin: 8px 0 0; padding-left: 22px;
  color: var(--ds-text);
}
.legal li { margin-top: 4px; }
.legal li::marker { color: var(--ds-text-2); }
.legal strong { color: var(--ds-text); font-weight: var(--ds-gew-halbfett); }
.legal-tablewrap {
  margin-top: 16px; overflow-x: auto;
  border-radius: var(--ds-r-2);
  border: 1px solid var(--ds-rand);
}
.legal-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md); min-width: 560px;
}
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: 8px 12px;
}
.legal-table th {
  background: var(--ds-flaeche-2);
  color: var(--ds-text-2); font-weight: var(--ds-gew-mittel);
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm);
  border-bottom: 1px solid var(--ds-rand);
  white-space: nowrap;
}
.legal-table td { color: var(--ds-text); border-top: 1px solid var(--ds-rand-2); }
.legal-table tr:first-child td { border-top: 0; }

/* Hinweisband in Rechtstexten (Geltungsbereich einer Fassung,
   Drittlandhinweis): Info-Band, "warnung" als Warn-Band. */
.legal-hinweis {
  margin-top: 20px; padding: 12px 16px; border-radius: var(--ds-r-3);
  background: var(--ds-info-flaeche);
  box-shadow: inset 0 0 0 1px var(--ds-info-rand);
  color: var(--ds-info-text);
}
.legal .legal-hinweis p, .legal .legal-hinweis strong { color: inherit; }
.legal-hinweis p { margin-top: 8px; }
.legal-hinweis p:first-child { margin-top: 0; }
.legal-hinweis.warnung {
  background: var(--ds-warn-flaeche);
  box-shadow: inset 0 0 0 1px var(--ds-warn-rand);
  color: var(--ds-warn-text);
}
/* Abgeloeste Fassung: der erste Absatz im Warnband, abgesetzt */
.legal-hinweis .legal-abgeloest {
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ds-warn-rand);
}

/* Zurueckgenommener Zusatz innerhalb eines Rechtstexts */
.legal-mut { color: var(--ds-text-2); font-size: 0.92em; display: inline-block; margin-top: 4px; }

/* Uebersichtsraster im Trust Center: die sechs Kernaussagen */
.legal .trust-grid {
  list-style: none; margin: 16px 0 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}
.legal .trust-punkt {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 0;
  padding: 12px; border-radius: var(--ds-r-2);
  background: var(--ds-flaeche-2);
  box-shadow: inset 0 0 0 1px var(--ds-rand-2);
  color: var(--ds-text); font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg);
}
.trust-punkt svg {
  width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 2px;
}

/* Umschalter zwischen den AVV-Fassungen: Segment-Leiste. Die aktive
   Fassung liegt als helle Flaeche auf der grauen Spur. */
.legal-fassungen {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: 20px;
  padding: 3px; border-radius: var(--ds-r-3);
  background: var(--ds-flaeche-3);
  box-shadow: inset 0 0 0 1px var(--ds-rand-2);
}
.legal-fassungen a, .legal-fassungen span {
  display: inline-flex; align-items: center;
  min-height: 28px; padding: 4px 10px; border-radius: var(--ds-r-2);
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel);
  color: var(--ds-text-2); text-decoration: none;
}
.legal .legal-fassungen a { color: var(--ds-text-2); }
.legal .legal-fassungen a:hover {
  color: var(--ds-text); background: var(--ds-fuell-transparent-hover); text-decoration: none;
}
.legal-fassungen .aktiv {
  background: var(--ds-flaeche);
  box-shadow: var(--ds-schatten-karte);
  color: var(--ds-text); font-weight: var(--ds-gew-halbfett);
}
@media (max-width: 560px) {
  .legal-fassungen { flex-direction: column; }
}

@media (max-width: 560px) {
  .legal { padding: 16px 12px 40px; }
  .legal-inner { padding: 24px 16px 32px; }
  .legal-title { font-size: var(--ds-t-h-xl); line-height: var(--ds-zh-h-xl); letter-spacing: var(--ds-sperr-dichter); }
  .legal h2 { font-size: 18px; line-height: 26px; }
}