/* REACH Website, Gestaltung WEB-04, finales Branding WEB-08 (Tokens marken/reach/marken-tokens-2026-10-03.md)
   REACH-Blau #065EDD ist Markenfarbe für Flächen mit weißem Text, primäre Buttons, Band, empfohlene Paketspalte,
   markante Sektionen; Schwarz #050505 Grund, Weiß Text. #5B97F0 nur funktional (Links, Fokus, kleine Marker auf Schwarz),
   weil #065EDD auf Schwarz nur 3,55 : 1 erreicht (nie Text oder Links auf Schwarz). Markenwinkel 10,5 Grad (tan 0,1851),
   Motiv Speed-Linien: Bündel aus 4 Linien, nach unten dicker (Komponente .speed, siehe WEB-08 am Ende der Datei).
   Bewegung nur über transform und opacity, nur mit Klasse .motion (fehlt bei prefers-reduced-motion)
   und zusätzlich in @media (prefers-reduced-motion: no-preference). Ohne JavaScript bleibt alles sichtbar.
   Schriften lokal (SIL Open Font License 1.1, ../fonts/OFL.txt), keine Anfragen an fremde Server. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600-italic-latin.woff2") format("woff2"); }
/* Ersatzschriften mit angepassten Metriken gegen Textverschiebung beim Schriftwechsel (Näherung) */
@font-face { font-family: "Barlow Ersatz"; src: local("Arial"), local("Helvetica"); size-adjust: 94%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Semi Condensed Ersatz"; src: local("Arial Narrow"), local("Arial"); size-adjust: 92%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  /* WEB-08: Marken-Tokens */
  --blau: #065EDD;             /* reach.blau: Weiß darauf 5,75 : 1; auf Schwarz nur Grafik/Flächen */
  --blau-hell: #5B97F0;        /* reach.blau.hell: 6,9 : 1 auf #050505, nur Links, Fokus, kleine Marker */
  --blau-tief: #04163A;        /* reach.blau.tief: optionale dunkle Blaufläche, Bildtiefen */
  --hell: var(--blau-hell);    /* Altname (WEB-06), zeigt auf den funktionalen Ton */
  --marke: var(--blau);        /* Flächen */
  --marke-hell: var(--blau-hell);
  --marke-tief: var(--blau-tief);
  --akzent: var(--blau);

  --grund: #050505;            /* Grundfläche */
  --nacht: #000000;            /* tiefstes Schwarz */
  --flaeche: #0D0D0D;          /* Flächenstufe 1 */
  --flaeche-2: #161616;        /* Flächenstufe 2 */
  --text: #FFFFFF;
  --text-sek: rgba(255, 255, 255, 0.7);    /* 10,4 : 1 auf Grund */
  --text-leise: rgba(255, 255, 255, 0.56); /* 6,9 : 1, nur kleine Kennzeichen */
  --rahmen: #707070;           /* Feldränder, 4,2 : 1 (Nicht-Text-Kontrast) */
  --linie: rgba(255, 255, 255, 0.1);
  --linie-stark: rgba(255, 255, 255, 0.2);
  --link: var(--hell);
  --positiv: var(--hell);
  --fehler: #FF9A85;

  --font-titel: "Barlow Semi Condensed", "Barlow Semi Condensed Ersatz", "Arial Narrow", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text: "Barlow", "Barlow Ersatz", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --kante: 0.1851;           /* tan(10,5 Grad), Markenwinkel aus der Wortmarke (Tokens 2026-10-03) */
  --wrap: 84rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --s: 0.75rem;
  --m: 1.5rem;
  --l: 3rem;
  --xl: clamp(4.5rem, 2rem + 8vw, 9.5rem);
  --kopf: 4.5rem;
  --kopf-gesamt: 4.25rem;      /* Pille 3.5rem + Abstand oben 0.75rem */
  --ease-schwer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-feder: cubic-bezier(0.22, 1.2, 0.36, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: var(--hell);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 1.5rem); background: var(--grund); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--grund);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-titel);
  font-weight: 600;
  line-height: 1.04;
  margin: 0 0 var(--m);
  overflow-wrap: break-word;
  hyphens: manual;
  letter-spacing: -0.01em;
}
h1, h2 { font-style: italic; }
h1 { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 6rem); line-height: 0.98; letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.75rem); max-width: 22ch; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem); line-height: 1.15; margin-bottom: var(--s); }
h4 { font-size: 1.2rem; line-height: 1.25; margin-bottom: 0.5rem; }

p { margin: 0 0 var(--m); max-width: 66ch; }
ul, ol { margin: 0 0 var(--m); padding-left: 1.2rem; }
li { margin-bottom: 0.45rem; max-width: 64ch; }
li::marker { color: var(--marke-hell); }
strong { font-weight: 600; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -5rem; z-index: 200;
  background: #fff; color: var(--grund); padding: 0.7rem 1.1rem; font-weight: 600;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- Prototyp-Leiste ---------- */
.prototype-bar {
  background: var(--nacht); color: var(--text-sek);
  font: 500 0.85rem/1.3 var(--font-titel); letter-spacing: 0.02em; padding: 0.45rem 0;
  border-bottom: 1px solid var(--linie);
}

/* ---------- Kopf (WEB-05: schwebende Pille, Vollbild-Menü unter 64rem) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--kopf-gesamt); padding: 0.75rem var(--gutter) 0;
  pointer-events: none;
  view-transition-name: kopf;
}
.header-inner {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 0.35rem 0.4rem 0.35rem 1.35rem;
  max-width: var(--wrap); margin-inline: auto; border-radius: 999px;
}
.header-inner::before {
  /* Glas der Pille als eigene Ebene: backdrop-filter am Kopf selbst würde das Vollbild-Menü einsperren */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(12, 12, 12, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}
.brand { display: inline-flex; align-items: center; padding: 0.5rem 0; position: relative; z-index: 3; }
.brand img { width: auto; height: 1.45rem; }

.nav-toggle {
  display: none; position: relative; z-index: 3;
  align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.5rem 1.05rem 0.5rem 1.1rem;
  font: 600 1rem var(--font-titel); letter-spacing: 0.04em; color: #fff;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; cursor: pointer;
}
/* Hamburger aus zwei Linien, wird zum X */
.nav-toggle-bars { display: block; width: 1.25rem; height: 0.75rem; position: relative; order: 2; }
.nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
}
.nav-toggle-bars::before { top: 0.125rem; }
.nav-toggle-bars::after { bottom: 0.125rem; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(0.25rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-0.25rem) rotate(-45deg); }

.main-nav { width: 100%; padding-bottom: var(--m); }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav li { margin: 0; max-width: none; }
.main-nav a:not(.btn) { color: #fff; text-decoration: none; }
.nav-main a { display: block; padding: 0.55rem 0; font: 600 italic 1.6rem/1.1 var(--font-titel); }
.nav-neben { display: flex; gap: var(--m); margin: var(--m) 0 !important; }
.nav-neben a { color: var(--text-sek) !important; font-size: 1rem; }
.main-nav a[aria-current] > span, .nav-neben a[aria-current] { color: var(--link); }
.nav-cta { margin-top: var(--s); }

/* Mobil: Vollbild-Menü mit schwerem Glas */
.js .nav-toggle { display: inline-flex; }
.js .main-nav {
  position: fixed; inset: 0; z-index: 2; width: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--kopf-gesamt) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  background: #000000;
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  visibility: hidden; opacity: 0;
  overflow-y: auto;
}
.js .main-nav::before {
  /* WEB-08: Speed-Linien-Bündel am unteren Rand des Menüs (Linien 1 / 1,5 / 2,5 / 4, Lücken 6 / 6 / 4) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(25 * var(--u));
  background: linear-gradient(to bottom, var(--blau) 0 calc(1 * var(--u)), transparent 0 calc(7 * var(--u)), var(--blau) 0 calc(8.5 * var(--u)), transparent 0 calc(14.5 * var(--u)), var(--blau) 0 calc(17 * var(--u)), transparent 0 calc(21 * var(--u)), var(--blau) 0);
  transform-origin: left; pointer-events: none;
}
.js .main-nav.is-open { visibility: visible; opacity: 1; }
.js .nav-main li { overflow: hidden; }
.js .nav-main a { font-size: clamp(2.8rem, 1.4rem + 8vw, 5rem); padding: 0.2rem 0; letter-spacing: -0.02em; line-height: 1.02; }
.js .main-nav .nav-cta, .js .main-nav .sound-toggle { align-self: flex-start; }
.js .main-nav .sound-toggle { margin: 0 0 var(--m); }
html.nav-open { overflow: hidden; }

@media (min-width: 64rem) {
  .header-inner { width: max-content; gap: 2.2rem; }
  .js .nav-toggle { display: none; }
  .main-nav, .js .main-nav {
    position: static; display: flex; flex-direction: row; align-items: center; gap: 1.6rem; width: auto; padding: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; visibility: visible; opacity: 1; overflow: visible;
  }
  .js .main-nav::before { display: none; }
  .js .nav-main li { overflow: visible; }
  .nav-main, .js .nav-main { display: flex; gap: 1.7rem; }
  .nav-main a, .js .nav-main a { font: 500 1rem/1 var(--font-text); padding: 0.6rem 0; position: relative; letter-spacing: 0.01em; }
  .nav-main a > span { position: relative; display: inline-block; padding-bottom: 0.35rem; }
  .nav-main a > span::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: var(--marke-hell); transform: scaleX(0); transform-origin: left;
  }
  .nav-main a:hover > span::after, .nav-main a[aria-current] > span::after { transform: scaleX(1); }
  .main-nav a[aria-current] > span { color: #fff; }
  .nav-neben { display: none !important; }
  .js .main-nav .sound-toggle, .main-nav .sound-toggle { margin: 0 -0.6rem 0 0; align-self: center; }
  .nav-cta { margin: 0; }
}

/* ---------- Brotkrümel ---------- */
.breadcrumb { font-size: 0.92rem; border-bottom: 1px solid var(--linie); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0.7rem 0; display: flex; flex-wrap: wrap; }
.breadcrumb li { margin: 0; max-width: none; color: var(--text-sek); }
.breadcrumb li + li::before { content: "/"; margin: 0 0.6rem; color: var(--text-leise); }
.breadcrumb a { color: var(--text-sek); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* ---------- Schaltflächen und Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 3.25rem; padding: 0.85rem 1.6rem;
  font: 600 1.1rem/1.1 var(--font-titel); letter-spacing: 0.02em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  position: relative; border-radius: 999px;
}
.btn--primary { background: var(--marke); color: #fff; }
.btn--primary:hover { background: var(--hell); }
.btn--light { background: #fff; color: var(--grund); }
.btn--light:hover { background: var(--hell); }
.btn--outline { background: transparent; color: #fff; border-color: #fff; }
.btn--outline:hover { background: rgba(255, 255, 255, 0.1); }
.btn--primary::after, .btn--light::after { content: "\2192"; display: inline-block; font-style: normal; }
.main-nav .nav-cta::after, .form .btn::after, .inline-form .btn::after { content: none; }
.btn--xl { min-height: 4.25rem; padding: 1.1rem 2.2rem; font-size: 1.35rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--m) var(--l); align-items: center; margin-top: var(--l); }

/* WEB-05: Pill-Button mit Icon im eigenen Kreis (magnetisch über main.js) */
.btn--pill {
  border-radius: 999px; padding: 0.42rem 0.42rem 0.42rem 1.45rem; gap: 1rem; min-height: 3.25rem;
  background: var(--marke); color: #fff; border: 0; font-size: 1.08rem; letter-spacing: 0.03em;
}
.btn--pill:hover { background: var(--hell); }
.btn__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: currentColor;
}
.btn__icon svg { display: block; }
.btn--hell { background: #fff; color: var(--nacht); }
.btn--hell:hover { background: var(--hell); }
.btn--hell .btn__icon { background: var(--nacht); color: #fff; }
.btn--glas { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.btn--glas:hover { background: rgba(255, 255, 255, 0.16); }
.btn--glas .btn__icon { background: #fff; color: var(--nacht); }
.btn--pill.btn--xl { min-height: 4.25rem; padding: 0.5rem 0.5rem 0.5rem 2rem; font-size: 1.3rem; }
.btn--pill.btn--xl .btn__icon { width: 3.2rem; height: 3.2rem; }
.nav-cta.btn--pill { min-height: 2.75rem; padding: 0.3rem 0.3rem 0.3rem 1.15rem; font-size: 1rem; gap: 0.75rem; }
.nav-cta .btn__icon { width: 2.15rem; height: 2.15rem; }
.btn--pill:active { transform: scale(0.98); }

/* Körnung: fest, ohne Zeigerereignisse */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eigener Cursor (main.js, nur pointer: fine und Bewegung erlaubt) */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; }
.cursor__punkt, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.cursor__punkt { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor__ring { width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; }
.cursor__ring-form {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55);
  display: grid; place-items: center;
}
.cursor__label {
  font: 600 0.62rem/1 var(--font-titel); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nacht);
  opacity: 0; transform: scale(0.6);
}
.cursor.is-hover .cursor__ring-form { transform: scale(1.9); background: rgba(255, 255, 255, 0.92); border-color: transparent; }
.cursor.is-hover .cursor__label { opacity: 1; transform: scale(0.53); }
.cursor.is-hover .cursor__punkt, .cursor.is-text .cursor__punkt { opacity: 0; }
.cursor.is-weg { opacity: 0; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor label { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

.link-arrow {
  font: 600 1.12rem/1.3 var(--font-titel); letter-spacing: 0.01em; color: #fff;
  text-decoration: underline; text-decoration-color: var(--marke-hell); text-decoration-thickness: 2px; text-underline-offset: 0.35em;
}
.link-arrow::after { content: "\2192"; display: inline-block; margin-left: 0.45rem; }
.link-arrow:hover { color: var(--link); }

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--xl); position: relative; }
.section--flaeche { background: var(--flaeche); }
.section--dunkel { background: var(--nacht); }
.section--marke { background: var(--marke); }
.section + .section:not(.section--flaeche):not(.section--dunkel):not(.cta-band) { border-top: 1px solid var(--linie); }

.lead { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); line-height: 1.55; color: var(--text-sek); max-width: 52ch; }
.muted { color: var(--text-sek); }
.small { font-size: 0.95rem; }
.source { font-size: 0.9rem; color: var(--text-sek); margin-top: var(--m); line-height: 1.55; }
.source a { color: inherit; }

.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.section-head p { margin-top: var(--m); }

.eyebrow, .claim-line, .label {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font: 600 0.95rem/1.2 var(--font-titel); letter-spacing: 0.14em; text-transform: uppercase;
  font-style: normal; color: var(--text-sek); margin: 0 0 var(--m); max-width: none;
}
.claim-line::before {
  /* WEB-08: kleines Speed-Linien-Bündel als Marke vor dem Kennzeichen (ersetzt die Startflagge) */
  content: ""; width: 1.6rem; height: 0.78rem; flex: none;
  background: linear-gradient(to bottom, var(--blau-hell) 0 4%, transparent 0 28%, var(--blau-hell) 0 34%, transparent 0 58%, var(--blau-hell) 0 68%, transparent 0 84%, var(--blau-hell) 0);
}
.label::before { content: ""; width: 2rem; height: 2px; background: var(--marke-hell); flex: none; }

/* ---------- Raster ---------- */
.grid { display: grid; gap: var(--l) clamp(1.5rem, 4vw, 5rem); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--7-5 { grid-template-columns: 7fr 5fr; align-items: start; }
  .grid--5-7 { grid-template-columns: 5fr 7fr; align-items: start; }
}
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Platzhalter Foto und Video ---------- */
.placeholder {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2; display: flex; align-items: flex-end;
  padding: var(--m); color: var(--text-sek);
  font: 500 0.92rem/1.35 var(--font-titel); letter-spacing: 0.01em;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, 0.034), transparent 60%),
    repeating-linear-gradient(100.5deg, transparent 0 28px, rgba(255, 255, 255, 0.045) 28px 29px),
    var(--flaeche);
  border: 1px solid var(--linie);
}
.placeholder strong { display: block; color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.2rem; }
.placeholder span { display: block; max-width: 34ch; position: relative; }
.placeholder--kante { clip-path: polygon(0 0, 100% 0, 87.66% 100%, 0 100%); }
.placeholder--portrait { aspect-ratio: 4 / 5; max-width: 26rem; }
.placeholder--wide { aspect-ratio: 16 / 9; }
/* Bilder (derzeit Dummy-Illustrationen, gleiche Geometrie wie die Platzhalter) */
.bild { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--flaeche); border: 1px solid var(--linie); }
.bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bild--kante { clip-path: polygon(0 0, 100% 0, 87.66% 100%, 0 100%); }   /* 3:2: Versatz tan 10,5 x Höhe = 12,34 % der Breite */
.bild--portrait { aspect-ratio: 4 / 5; max-width: 26rem; }
.bild--wide { aspect-ratio: 16 / 9; }
.format__media .bild, .hero__media .bild { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.hero__media .bild { clip-path: polygon(13.9% 0, 100% 0, 100% 100%, 0 100%); }
.tile .bild { aspect-ratio: 16 / 9; margin: calc(-1 * var(--m)) calc(-1 * var(--m)) var(--s); border: 0; }

/* ---------- Offen-Markierung ---------- */
.offen {
  font: 500 0.92em/1.4 var(--font-titel); letter-spacing: 0.01em;
  background: var(--flaeche-2); color: #fff; font-style: normal; text-transform: none;
  padding: 0.05em 0.35em; border: 1px dashed var(--rahmen); white-space: normal;
}

/* ---------- Startseite: Öffner mit Wortmarke ---------- */
.opener {
  position: relative; overflow: hidden;
  min-height: calc(100svh - var(--kopf) - 2rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(2rem, 5vh, 4.5rem) clamp(2.5rem, 7vh, 5.5rem);
  background:
    radial-gradient(60% 55% at 92% 8%, rgba(255, 255, 255, 0.036), transparent 70%),
    radial-gradient(40% 40% at 8% 100%, rgba(91, 151, 240, 0.10), transparent 70%),
    var(--grund);
}
.opener__inner { position: relative; }
@media (max-width: 47.99rem) { .opener { justify-content: center; min-height: calc(100svh - var(--kopf) - 3rem); } }
.opener__mark { margin: clamp(0.5rem, 2vh, 2rem) 0 clamp(1.5rem, 4vh, 3.5rem); max-width: max(18rem, calc((100svh - 25rem) * 4.55)); }
.wortmarke { width: 100%; height: auto; overflow: visible; }
.wortmarke__buchstaben path { fill: #fff; }
.wortmarke__kante { fill: var(--akzent); }
.opener__text { display: grid; gap: var(--m) var(--l); align-items: end; }
.opener__title { font-size: clamp(2.1rem, 1.2rem + 3vw, 4.2rem); max-width: 15ch; margin: 0; }
.opener__text .lead { margin-bottom: 0; }
.opener__text .btn-row { margin-top: var(--m); }
@media (min-width: 64rem) { .opener__text { grid-template-columns: 1.1fr 1fr; } }
.opener__scroll {
  position: absolute; left: 50%; bottom: 1.2rem; margin: 0; transform: translateX(-50%);
  font: 600 0.75rem var(--font-titel); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-leise);
  display: none;
}
@media (min-width: 64rem) and (min-height: 46rem) { .opener__scroll { display: block; } }
.opener__scroll span::after {
  content: ""; display: block; width: 1px; height: 2.2rem; margin: 0.5rem auto 0; background: var(--text-leise);
  transform-origin: top;
}

/* ---------- Startseite: Video-Bühne mit Kurskante ---------- */
.stage { position: relative; background: var(--nacht); }
.stage__sticky { position: relative; height: 88svh; min-height: 30rem; overflow: hidden; }
.stage__frame {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(70% 70% at 70% 30%, rgba(255, 255, 255, 0.042), transparent 70%),
    repeating-linear-gradient(100.5deg, transparent 0 46px, rgba(91, 151, 240, 0.10) 46px 47px),
    var(--grund);
}
.stage__frame.has-canvas { background: radial-gradient(70% 70% at 70% 30%, rgba(255, 255, 255, 0.038), transparent 70%), var(--grund); }
.stage__canvas, .stage__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__video { object-fit: cover; }
.stage__video.is-missing { display: none; }
.stage__frame::after {
  /* Textschutz unten (farbe.bild.abdunklung) */
  content: ""; position: absolute; inset: 40% 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0), rgba(5, 5, 5, 0.85));
}
.stage__label {
  position: absolute; top: 1.25rem; right: var(--gutter); z-index: 2; margin: 0;
  font: 500 0.85rem/1.3 var(--font-titel); letter-spacing: 0.04em; color: var(--text-sek);
  padding: 0.35rem 0.6rem; background: rgba(0, 0, 0, 0.7); border: 1px dashed var(--rahmen);
}
.stage__label strong { color: #fff; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 0.4rem; }
.stage__caption {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 6vh, 4rem); margin-inline: auto; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--m);
}
.stage__caption p {
  margin: 0; max-width: 18ch;
  font: 600 italic clamp(2rem, 1rem + 3.6vw, 4.6rem)/1 var(--font-titel); letter-spacing: -0.01em; color: #fff;
}

.motion-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.5rem 0.9rem;
  font: 600 0.95rem var(--font-titel); letter-spacing: 0.04em; color: #fff;
  background: rgba(0, 0, 0, 0.6); border: 1px solid var(--rahmen); cursor: pointer;
}
.motion-toggle::before { content: ""; width: 0.55rem; height: 0.75rem; border-inline: 3px solid currentColor; }
.motion-toggle[aria-pressed="true"]::before { border: 0; width: 0; height: 0; border-left: 0.6rem solid currentColor; border-block: 0.4rem solid transparent; }
.motion-toggle:hover { border-color: #fff; }
html:not(.motion) .stage__pause { display: none; }
html:not(.motion) .motion-toggle { display: none; }

/* ---------- Startseite: Nutzen in einem Satz ---------- */
.nutzen { padding-block: var(--xl) calc(var(--xl) * 0.7); }
.bigline {
  font: 600 italic clamp(2rem, 1rem + 3vw, 4.4rem)/1.08 var(--font-titel); letter-spacing: -0.012em;
  max-width: 26ch; margin: 0; color: #fff;
}
.bigline .w, .statement .w { display: inline-block; }

/* ---------- Lieferzusagen als Laufband ---------- */
.promise-bar { padding-block: var(--l); border-block: 1px solid var(--linie); background: var(--nacht); overflow: hidden; }
.promise-bar h2 {
  font: 600 0.95rem/1.2 var(--font-titel); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal;
  color: var(--text-sek); margin: 0 0 var(--m); max-width: none;
}
.promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m); }
.promise-list li { margin: 0; max-width: none; display: grid; gap: 0.25rem; }
.promise-list strong { font: 600 italic clamp(2rem, 1.3rem + 2.4vw, 3.4rem)/1 var(--font-titel); color: #fff; letter-spacing: -0.01em; }
.promise-list span { font-size: 1rem; color: var(--text-sek); max-width: 28ch; }
.ticker { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 48rem) { .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .promise-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.promise-bar .source { margin: var(--m) 0 0; }

/* Laufband (nur mit .motion, JS setzt .is-ticker und verdoppelt die Liste für die Endlosschleife) */
.ticker.is-ticker {
  max-width: none; padding: 0; display: flex; width: max-content;
}
.ticker.is-ticker .promise-list { display: flex; gap: 0; flex: none; }
.ticker.is-ticker .promise-list li {
  flex: none; display: flex; align-items: baseline; gap: 1rem; padding-inline: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--linie);
}
.ticker.is-ticker .promise-list li::before {
  content: ""; width: 0.4rem; height: 1.6rem; background: var(--marke-hell); transform: skewX(-10.5deg); flex: none; align-self: center;
}
.ticker.is-ticker .promise-list span { max-width: 22ch; line-height: 1.35; }
.ticker-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ---------- Startseite: Formate als Karten mit Vorschau ---------- */
.formats { display: grid; gap: clamp(2.5rem, 4vw, 4rem) clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 48rem) { .formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .format--weit { grid-column: 1 / -1; } }
.format { position: relative; display: grid; gap: var(--m); }
.format__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--flaeche); }
.format--weit .format__media { aspect-ratio: 4 / 3; }
@media (min-width: 48rem) {
  .format--weit .format__media { aspect-ratio: 21 / 9; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .format--weit { grid-template-columns: 1fr; }
}
.format__media .placeholder { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.format__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.format__video.is-playing { opacity: 1; }
.format__media::after {
  /* Vorschau-Kennzeichen */
  content: "Vorschau"; position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font: 600 0.75rem var(--font-titel); letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  padding: 0.35rem 0.6rem 0.35rem 1.6rem; background: rgba(0, 0, 0, 0.65);
  opacity: 0;
}
.format__media::before {
  content: ""; position: absolute; top: 1.42rem; left: 1.6rem; z-index: 3; width: 0; height: 0;
  border-left: 0.5rem solid var(--marke-hell); border-block: 0.32rem solid transparent; opacity: 0;
}
.format:hover .format__media::after, .format:hover .format__media::before,
.format:focus-within .format__media::after, .format:focus-within .format__media::before { opacity: 1; }
.format__text { display: grid; grid-template-columns: auto 1fr; gap: 0 1.25rem; align-items: baseline; }
.format__text > :not(.format__nr) { grid-column: 2; }
.format__nr { grid-row: 1 / span 2; margin: 0; font: 600 italic 1.1rem var(--font-titel); color: var(--marke-hell); }
.format h3 { font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); margin-bottom: 0.5rem; }
.format h3 a { color: #fff; text-decoration: none; }
.format h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.format h3 a:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.format p { color: var(--text-sek); margin: 0; max-width: 48ch; }
.format .offen { position: relative; z-index: 5; }

/* ---------- Startseite: drei Bereiche als große Typo-Liste ---------- */
.areas { list-style: none; margin: 0 0 var(--xl); padding: 0; border-top: 1px solid var(--linie-stark); }
.area {
  position: relative; margin: 0; max-width: none;
  display: grid; gap: var(--s) var(--l); padding-block: clamp(1.75rem, 3vw, 3rem);
  border-bottom: 1px solid var(--linie-stark);
}
@media (min-width: 64rem) { .area { grid-template-columns: 4rem minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; } }
.area__nr { margin: 0; font: 600 italic 1.1rem var(--font-titel); color: var(--marke-hell); }
.area__name { margin: 0; font-style: italic; font-size: clamp(2.4rem, 1rem + 5.4vw, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; }
.area__name a { color: #fff; text-decoration: none; display: inline-block; }
.area__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.area__pre { display: block; font-size: 0.24em; letter-spacing: 0.14em; color: var(--text-sek); font-style: normal; margin-bottom: 0.4em; }
.area__body { position: relative; z-index: 2; pointer-events: none; }
.area__body a, .area__body .offen { pointer-events: auto; }
.area__body p { color: var(--text-sek); font-size: 1.05rem; margin-bottom: var(--s); }
.area::before {
  /* Kurskante als Licht beim Überfahren */
  content: ""; position: absolute; left: -1.5rem; top: 18%; bottom: 18%; width: 0.45rem;
  background: var(--marke-hell); transform: skewX(-10.5deg) scaleY(0); transform-origin: bottom;
}
.area:hover::before, .area:focus-within::before { transform: skewX(-10.5deg) scaleY(1); }
.area__name a:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }

.zusammenhang__titel { font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); max-width: 30ch; margin-bottom: var(--l); }

/* ---------- Tags ---------- */
.tag {
  display: inline-block; align-self: flex-start; font: 600 0.8rem/1 var(--font-titel); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.45rem 0.65rem; border: 1px solid currentColor; margin-bottom: var(--s); color: var(--text-sek);
}
.tag--ok { color: var(--positiv); }
.tag--next { color: var(--text-sek); }
.tag--akzent { background: var(--nacht); color: #fff; border-color: var(--akzent); }
.tag--akzent::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; background: var(--akzent); transform: skewX(-10.5deg); }

/* ---------- Statement ---------- */
.statement {
  font: 600 italic clamp(3rem, 1rem + 7.6vw, 9rem)/0.95 var(--font-titel); letter-spacing: -0.02em;
  max-width: 12ch; margin: 0 0 var(--xl); color: #fff;
}
.statement-sec { overflow: hidden; }
.statement-sec::after { content: none; }
.statement-sec .wrap { position: relative; z-index: 1; }
.statement-sec__grid { align-items: end; }

/* ---------- Schritte ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--l) var(--m); counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-top: 1.25rem; margin: 0; max-width: none; border-top: 1px solid var(--linie-stark); }
.steps > li::before {
  content: "0" counter(step); display: block; margin-bottom: var(--m);
  font: 600 italic clamp(2.4rem, 1.6rem + 2vw, 3.6rem)/1 var(--font-titel); color: var(--marke-hell);
}
.steps p { color: var(--text-sek); }
.steps h3, .steps h4 { font-style: italic; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); margin-bottom: var(--s); }
@media (min-width: 48rem) {
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }

/* Ablauf mit Scroll-Fortschritt */
.flow { list-style: none; margin: 0; padding: 0 0 0 clamp(2rem, 4vw, 3.5rem); position: relative; --fp: 1; }
.flow::before, .flow::after {
  content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--linie-stark);
}
.flow::after { background: var(--marke-hell); transform-origin: top; transform: scaleY(var(--fp)); }
.flow > li { position: relative; margin: 0 0 clamp(3rem, 8vh, 6rem); max-width: none; }
.flow > li:last-child { margin-bottom: 0; }
.flow > li::before {
  content: ""; position: absolute; left: calc(-1 * clamp(2rem, 4vw, 3.5rem) - 0.5rem + 1px); top: 0.55rem;
  width: 1rem; height: 1rem; background: var(--grund); border: 2px solid var(--marke-hell); transform: skewX(-10.5deg);
}
.flow > li.is-active::before { background: var(--marke-hell); }
.flow__nr { margin: 0 0 0.25rem; font: 600 italic 1.1rem var(--font-titel); color: var(--marke-hell); }
.flow h3 { font-style: italic; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1; }
.flow p { color: var(--text-sek); font-size: 1.15rem; }
@media (min-width: 64rem) { .sticky-aside { position: sticky; top: calc(var(--kopf) + 2rem); } }

/* ---------- Finale ---------- */
.finale {
  position: relative; overflow: hidden; padding-block: calc(var(--xl) * 1.2);
  background:
    radial-gradient(55% 70% at 85% 100%, rgba(255, 255, 255, 0.046), transparent 70%),
    radial-gradient(35% 50% at 10% 0%, rgba(91, 151, 240, 0.10), transparent 70%),
    var(--grund);
  border-top: 1px solid var(--linie);
}
.finale__title { font-size: clamp(3.2rem, 0.8rem + 9.4vw, 11rem); line-height: 0.9; letter-spacing: -0.025em; max-width: 11ch; margin-bottom: var(--l); }
.finale__row { display: flex; flex-wrap: wrap; gap: var(--m) var(--l); align-items: center; justify-content: space-between; }
.finale__row .lead { margin: 0; }
.contact-lines { list-style: none; padding: 0; margin: var(--l) 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem var(--l); color: var(--text-sek); }
.contact-lines li { margin: 0; }
.contact-lines--stack { display: block; }
.contact-lines--stack li { margin-bottom: 0.4rem; }

/* ---------- Kontaktband auf Unterseiten ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 80% at 90% 100%, rgba(255, 255, 255, 0.041), transparent 70%),
    var(--grund);
  border-top: 1px solid var(--linie);
}
.cta-band h2 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem); line-height: 0.95; max-width: 16ch; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .lead { color: var(--text-sek); }

/* ---------- Unterseiten: Hero mit Bildfläche ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(60% 60% at 95% 0%, rgba(255, 255, 255, 0.031), transparent 70%), var(--grund); }
.hero__inner { display: grid; max-width: var(--wrap); margin-inline: auto; padding: clamp(3rem, 8vh, 6rem) var(--gutter) 0; gap: clamp(2.5rem, 5vw, 4.5rem); }
.hero__panel { position: relative; }
.hero__panel h1 { max-width: 16ch; }
.hero__panel .lead { max-width: 56ch; }
.hero__note { font-size: 0.98rem; color: var(--text-sek); margin-top: var(--m); }
.hero__media { position: relative; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); }
.hero__media .placeholder {
  position: absolute; inset: 0; aspect-ratio: auto; border: 0;
  clip-path: polygon(13.9% 0, 100% 0, 100% 100%, 0 100%);
  padding-left: calc(13.9% + var(--m));
}
@media (min-width: 48rem) {
  .hero__media { aspect-ratio: 21 / 9; margin-inline: 0; }
  .hero__media .bild, .hero__media .placeholder { clip-path: polygon(7.9% 0, 100% 0, 100% 100%, 0 100%); }
  .hero__media .placeholder { padding-left: 11%; }
}
@media (min-width: 64rem) {
  .hero__panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--l); align-items: end; }
  .hero__panel > * { grid-column: 1 / -1; }
  .hero__panel h1 { grid-column: 1; margin-bottom: 0; }
  .hero__panel .lead, .hero__panel .hero__note, .hero__panel .btn-row { grid-column: 2; }
  .hero__panel .lead { margin: 0; }
  .hero__panel .claim-line, .hero__panel .tag { grid-column: 1; justify-self: start; }
}

/* ---------- Unterseiten: kompakter Seitenkopf ---------- */
.page-head { position: relative; overflow: hidden; background: radial-gradient(55% 80% at 100% 0%, rgba(255, 255, 255, 0.026), transparent 70%), var(--grund); border-bottom: 1px solid var(--linie); }
.page-head .wrap { position: relative; padding-block: clamp(3.5rem, 9vh, 7.5rem) clamp(2.5rem, 6vh, 4.5rem); }
.page-head h1 { font-size: clamp(2.4rem, 1.3rem + 3.8vw, 5.2rem); max-width: 17ch; }
.page-head .wrap > * { position: relative; z-index: 1; max-width: 52rem; }
.page-head h1 { max-width: 17ch; }
.page-head { --u: 0.2rem; }
.page-head .wrap { padding-bottom: calc(clamp(2.5rem, 6vh, 4.5rem) + 25 * var(--u)); }
.page-head::after {
  /* WEB-08: Speed-Linien-Bündel als Unterkante (fährt beim Laden von links ein) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(25 * var(--u)); pointer-events: none;
  background: linear-gradient(to bottom, var(--blau) 0 calc(1 * var(--u)), transparent 0 calc(7 * var(--u)), var(--blau) 0 calc(8.5 * var(--u)), transparent 0 calc(14.5 * var(--u)), var(--blau) 0 calc(17 * var(--u)), transparent 0 calc(21 * var(--u)), var(--blau) 0);
  transform-origin: left;
}

/* ---------- Unter-Navigation ---------- */
.subnav { border-bottom: 1px solid var(--linie); background: var(--grund); }
.subnav ul { list-style: none; margin: 0; padding: 0.6rem 0; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: thin; }
.subnav li { margin: 0; flex: none; }
.subnav a {
  display: block; padding: 0.5rem 0.9rem; text-decoration: none; color: var(--text-sek); white-space: nowrap;
  font: 600 0.98rem var(--font-titel); letter-spacing: 0.02em; border: 1px solid var(--linie-stark);
}
.subnav a:hover { color: #fff; border-color: #fff; }

/* ---------- Karten, Kacheln ---------- */
.area-card { display: flex; flex-direction: column; padding: var(--m); background: var(--flaeche); border-top: 3px solid var(--marke-hell); }
.area-card h3 { font-style: italic; font-size: 1.7rem; }
.area-card p { flex: 1; color: var(--text-sek); }
.area-card .link-arrow { margin-top: var(--s); }
.area-card .link-arrow + .link-arrow { margin-top: 0.4rem; }
.area-card--next { border-top-color: var(--rahmen); }

.tiles { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .tiles--3 { grid-template-columns: 1.4fr 1fr 1fr; } .tiles--4 { grid-template-columns: repeat(4, 1fr); } }
.tile { background: var(--grund); padding: var(--m); display: flex; flex-direction: column; gap: var(--s); border: 1px solid var(--linie); }
.section--flaeche .tile { background: var(--grund); }
.tile h3, .tile h4 { margin: 0; font-style: italic; font-size: 1.45rem; }
.tile p, .tile ul { margin: 0; color: var(--text-sek); }
.tile .placeholder { aspect-ratio: 16 / 9; margin: calc(-1 * var(--m)) calc(-1 * var(--m)) var(--s); border: 0; }
.tile--muted { background: transparent; border-style: dashed; border-color: var(--rahmen); }
.sub-head { font: 600 0.95rem/1.2 var(--font-titel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sek); margin: var(--xl) 0 var(--m); }
.sub-head.mt-0 { margin-top: 0; }

.bignum { font: 600 italic clamp(4rem, 2.5rem + 6vw, 8rem)/0.95 var(--font-titel); color: var(--marke-hell); margin-bottom: var(--s); letter-spacing: -0.02em; }

/* ---------- Ablauf, Zeitleiste ---------- */
.timeline { display: grid; gap: var(--m); }
.timeline__phase { background: var(--grund); padding: var(--m); border-top: 3px solid var(--marke-hell); }
.timeline__phase--main { border-top-color: #fff; }
.timeline__phase h3 { font-style: italic; }
@media (min-width: 64rem) { .timeline { grid-template-columns: 1fr 1.4fr 1fr; } }
.band {
  margin-top: var(--l); padding: 1.1rem var(--m); background: var(--marke); color: #fff; max-width: none;
  font: 600 italic clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem)/1.25 var(--font-titel);
}

/* ---------- Paketvergleich ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pkg-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 44rem; }
.pkg-table caption { text-align: left; font-size: 0.92rem; color: var(--text-sek); caption-side: bottom; padding-top: var(--s); }
.pkg-table th, .pkg-table td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.pkg-table thead th { font: 600 italic 1.6rem/1.1 var(--font-titel); background: var(--nacht); color: #fff; vertical-align: bottom; border-bottom: 0; }
.pkg-table thead th.is-rec { background: var(--marke); }
.pkg-table thead th .tag { margin: 0 0 0.6rem; display: inline-block; color: #fff; font-style: normal; }
.pkg-table tbody th { font-weight: 500; width: 34%; color: var(--text-sek); }
.pkg-table td.is-rec { background: rgba(255, 255, 255, 0.014); }
.pkg-table .no { color: var(--text-leise); }
.pkg-table .dev { color: var(--text-sek); font-style: italic; }
.pkg-cards { display: grid; gap: var(--m); }
.pkg-card { background: var(--grund); border: 1px solid var(--linie); }
.pkg-card header { background: var(--nacht); padding: var(--m); }
.pkg-card.is-rec { border-color: var(--marke-hell); }
.pkg-card.is-rec header { background: var(--marke); }
.pkg-card header h3 { font-size: 1.9rem; font-style: italic; margin: 0; }
.pkg-card header p { margin: 0.3rem 0 0; }
.pkg-card header .tag { color: #fff; }
.pkg-card dl { margin: 0; padding: var(--s) var(--m) var(--m); }
.pkg-card dl div { display: grid; grid-template-columns: 1fr auto; gap: var(--m); padding: 0.65rem 0; border-bottom: 1px solid var(--linie); }
.pkg-card dt { color: var(--text-sek); }
.pkg-card dd { margin: 0; text-align: right; }
.pkg-card dd.no { color: var(--text-leise); }
@media (min-width: 48rem) { .pkg-cards { display: none; } }
@media (max-width: 47.99rem) { .pkg-table-block { display: none; } }
.addons { display: grid; gap: var(--s); margin-top: var(--l); }
@media (min-width: 48rem) { .addons { grid-template-columns: repeat(4, 1fr); } }
.addon { background: var(--grund); padding: var(--m); border-top: 3px solid var(--marke-hell); }
.addon p { margin: 0; font-size: 0.98rem; color: var(--text-sek); }
.recommend {
  margin-top: var(--l); padding: var(--l) var(--m); background: var(--nacht); display: grid; gap: var(--s);
  border-left: 4px solid var(--marke-hell);
}
@media (min-width: 48rem) { .recommend { grid-template-columns: 1fr 2fr; align-items: center; gap: var(--l); padding: var(--l); } }
.recommend h3 { font-style: italic; font-size: 2.1rem; margin: 0; }
.recommend p { margin: 0; color: var(--text-sek); }

/* ---------- Spalten ---------- */
.split { display: grid; gap: var(--m); }
@media (min-width: 64rem) { .split { grid-template-columns: 1.15fr 1fr 0.85fr; } }
.split__col { background: var(--grund); padding: var(--m); border: 1px solid var(--linie); }
.split__col--muted, .split__col--line { background: transparent; border: 1px dashed var(--rahmen); color: var(--text-sek); }
.split__col--flaeche { background: var(--flaeche); }
.split__col h3 { font-style: italic; }
.split__col h4 { margin-top: var(--m); }
.note { margin-top: var(--m); padding: var(--s) var(--m); border-left: 3px solid var(--marke-hell); background: var(--grund); }

/* ---------- Ausweichplan ---------- */
.fallback { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.fallback__row { display: grid; gap: 0.3rem var(--m); padding: var(--m); background: var(--nacht); }
.fallback__row h3 { font-size: 1.3rem; margin: 0; font-style: italic; }
.fallback__cell { margin: 0; color: var(--text-sek); }
.fallback__label { display: block; font: 600 0.78rem var(--font-titel); color: var(--text-leise); letter-spacing: 0.12em; text-transform: uppercase; }
.fallback__head { display: none; }
@media (min-width: 48rem) {
  .fallback__row, .fallback__head { grid-template-columns: 1fr 1.25fr 1.25fr; align-items: start; }
  .fallback__head { display: grid; gap: var(--m); padding: 0.9rem var(--m); background: var(--nacht); font: 600 0.82rem var(--font-titel); color: var(--text-sek); letter-spacing: 0.12em; text-transform: uppercase; }
  .fallback__label { display: none; }
}

/* ---------- Rechte ---------- */
.stair { list-style: none; padding: 0; margin: 0 0 var(--l); display: grid; gap: var(--s); }
.stair li { background: var(--flaeche); padding: var(--m); margin: 0; max-width: none; border-left: 3px solid var(--marke-hell); }
.section--flaeche .stair li { background: var(--grund); }
@media (min-width: 64rem) { .stair li:nth-child(2) { margin-left: 3rem; } .stair li:nth-child(3) { margin-left: 6rem; } }
.stair h3 { font-size: 1.3rem; margin-bottom: 0.35rem; font-style: italic; }
.stair p { margin: 0; color: var(--text-sek); }

/* ---------- Team ---------- */
.roles { list-style: none; padding: 0; margin: var(--m) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s); }
@media (min-width: 48rem) { .roles { grid-template-columns: repeat(4, 1fr); } }
.roles li { margin: 0; padding: 0.8rem; border: 1px solid var(--linie); font: 600 1.05rem/1.2 var(--font-titel); }
.roles-text { font: 600 italic 1.4rem/1.35 var(--font-titel); max-width: 50ch; }
.ref-list { list-style: none; padding: 0; display: grid; gap: var(--l) var(--m); margin: var(--m) 0 0; }
@media (min-width: 48rem) { .ref-list { grid-template-columns: repeat(2, 1fr); } }
.ref-list li { margin: 0; max-width: none; }
.ref-list h3 { font-size: 1.4rem; margin: var(--m) 0 0.3rem; font-style: italic; }
.ref-list p { color: var(--text-sek); }

/* ---------- Fragen ---------- */
.faq { border-top: 1px solid var(--linie-stark); max-width: 60rem; }
.faq details { border-bottom: 1px solid var(--linie-stark); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 3rem 1.35rem 0; position: relative;
  font: 600 clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem)/1.3 var(--font-titel);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 1.1rem; height: 2px; background: var(--marke-hell);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--link); }
.faq .faq__body { padding: 0 0 var(--m); color: var(--text-sek); }
.faq .faq__body p:last-child { margin-bottom: 0; }

.more { border-block: 1px solid var(--linie-stark); margin-top: var(--l); max-width: 60rem; }
.more summary { cursor: pointer; padding: 1.1rem 0; font: 600 1.15rem/1.3 var(--font-titel); color: #fff; letter-spacing: 0.01em; }
.more summary::marker { color: var(--marke-hell); }
.more summary:hover { color: var(--link); }
.more > div { padding-bottom: var(--m); color: var(--text-sek); }
.more h4 { color: #fff; margin-top: var(--m); }

/* ---------- Formulare ---------- */
.form { display: grid; gap: var(--l); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); min-width: 0; }
.form legend { font: 600 italic clamp(2rem, 1.4rem + 2vw, 3rem)/1.05 var(--font-titel); padding: 0; margin-bottom: var(--m); }
.form legend h2 { font-size: inherit; margin: 0; }
.field { display: grid; gap: 0.5rem; align-content: start; }
.field-row { display: grid; gap: var(--m); }
@media (min-width: 40rem) { .field-row--2 { grid-template-columns: 1fr 1fr; } .field-row--3 { grid-template-columns: 1fr 1fr 1fr; } }
.field label, .field .label { font: 600 1.15rem/1.3 var(--font-titel); letter-spacing: 0.01em; text-transform: none; color: #fff; }
.req { color: var(--link); font-weight: 600; }
.hint { font-size: 0.95rem; color: var(--text-sek); margin: 0; line-height: 1.5; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; font: 400 1.25rem/1.4 var(--font-text); color: #fff;
  background: var(--nacht); border: 1px solid var(--rahmen); border-bottom-width: 2px; border-radius: 0;
  padding: 1rem 1.1rem; min-height: 3.9rem;
}
.section--flaeche input, .section--flaeche select, .section--flaeche textarea { background: var(--grund); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 1.4rem) 52%, calc(100% - 1rem) 52%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.8rem;
}
select option { background: var(--grund); color: #fff; }
textarea { min-height: 9rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--text-sek); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--marke-hell); outline-offset: 2px; border-color: #fff; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }
.error-msg { color: var(--fehler); font-size: 0.98rem; font-weight: 500; margin: 0; }
.error-msg::before { content: "Fehler: "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.choice-group { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) { .choice-group--2 { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem;
  background: var(--nacht); border: 1px solid var(--rahmen); cursor: pointer; font-weight: 400; color: #fff;
}
.section--flaeche .choice { background: var(--grund); }
.choice:hover { border-color: #fff; }
.choice input { width: 1.3rem; height: 1.3rem; margin: 0.2rem 0 0; accent-color: var(--marke-hell); flex: none; }
.choice:has(input:checked) { border-color: var(--marke-hell); background: rgba(91, 151, 240, 0.12); }
.choice:has(input:focus-visible) { outline: 3px solid var(--marke-hell); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.choice > span { font: 600 1.15rem/1.3 var(--font-titel); }
.choice small { display: block; color: var(--text-sek); font: 400 0.92rem/1.4 var(--font-text); margin-top: 0.15rem; }
.optional { font-weight: 400; color: var(--text-sek); font-family: var(--font-text); font-size: 0.9em; }
.legend-small, .form .legend-small { font: 600 1.15rem/1.3 var(--font-titel); font-style: normal; margin-bottom: 0.5rem; padding: 0; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: var(--m); background: var(--flaeche); border-left: 4px solid var(--marke-hell); }
.form-status strong { font: 600 italic 1.6rem var(--font-titel); display: block; margin-bottom: 0.3rem; }
.form-status p { margin: 0 0 0.4rem; color: var(--text-sek); }
.privacy-note { font-size: 0.95rem; color: var(--text-sek); max-width: 60ch; }
.inline-form { display: grid; gap: var(--s); max-width: 46rem; margin-top: var(--m); }
@media (min-width: 40rem) {
  .inline-form .inline-row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: var(--s); align-items: end; }
  .inline-form .inline-row--2 { grid-template-columns: 1fr auto; }
}
.inline-form .btn { min-height: 3.9rem; }
.inline-form .field label { font-size: 1rem; }

/* Schritt-Anzeige */
.progress { list-style: none; margin: 0 0 var(--l); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; counter-reset: p; }
.progress li {
  counter-increment: p; position: relative; margin: 0; max-width: none; padding: 0.9rem 0 0;
  font: 600 1.05rem/1.2 var(--font-titel); color: var(--text-leise); border-top: 4px solid var(--linie-stark);
}
.progress li::before { content: "0" counter(p) " "; color: inherit; margin-right: 0.3rem; }
.progress li::after {
  content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--marke-hell);
  transform: scaleX(0); transform-origin: left;
}
.progress li[aria-current="step"], .progress li.is-done { color: #fff; }
.progress li[aria-current="step"]::after, .progress li.is-done::after { transform: scaleX(1); }
.progress li.is-done::after { background: #fff; }
.progress-text { font: 600 0.95rem var(--font-titel); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sek); margin: 0 0 var(--s); }
.form-step[hidden] { display: none; }
.step-actions { display: flex; flex-wrap: wrap; gap: var(--s) var(--l); align-items: center; margin-top: var(--s); }
.btn-link {
  background: none; border: 0; padding: 0.4rem 0; min-height: 2.75rem; cursor: pointer;
  font: 600 1.1rem var(--font-titel); color: #fff; text-decoration: underline; text-decoration-color: var(--marke-hell); text-underline-offset: 0.3em;
}
.btn-link::before { content: "\2190  "; }
.error-summary { border: 3px solid var(--fehler); padding: var(--m); margin-bottom: var(--m); background: rgba(255, 154, 133, 0.07); }
.error-summary h2, .error-summary h3 { font-size: 1.5rem; font-style: normal; margin-bottom: var(--s); max-width: none; }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary a { color: var(--fehler); font-weight: 600; }
.error-summary:focus { outline: 3px solid #fff; outline-offset: 3px; }
.field--error { border-left: 3px solid var(--fehler); padding-left: var(--s); }
.summary-list { margin: 0; display: grid; border-top: 1px solid var(--linie-stark); }
.summary-list div { display: grid; gap: 0.2rem; padding: 0.7rem 0; border-bottom: 1px solid var(--linie-stark); }
@media (min-width: 40rem) { .summary-list div { grid-template-columns: 14rem 1fr; gap: var(--m); } }
.summary-list dt { color: var(--text-sek); }
.summary-list dd { margin: 0; overflow-wrap: anywhere; }
.count-note { font-weight: 600; }
.field-row--date { display: grid; gap: var(--m); }
@media (min-width: 40rem) { .field-row--date { grid-template-columns: 1fr 1fr; } }

/* ---------- Seitenleisten ---------- */
.aside-box { background: var(--flaeche); padding: var(--m); border-top: 3px solid var(--marke-hell); }
.aside-box + .aside-box { margin-top: var(--m); }
.aside-box h2 { font-size: 1.7rem; }
.aside-box ol { padding-left: 1.3rem; }
.aside-box p, .aside-box li { color: var(--text-sek); }
.aside-box--white { background: var(--flaeche-2); }
.aside-box--outline { background: transparent; border: 1px solid var(--linie-stark); }

/* ---------- Hilfen ---------- */
.mt-0 { margin-top: 0; }
.mt-m { margin-top: var(--m); }
.mt-l { margin-top: var(--l); }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--s); }
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: var(--s); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.75rem; height: 0.75rem;
  background: var(--marke-hell); transform: skewX(-10.5deg);
}
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--l) var(--m); }
.facts li { margin: 0; max-width: none; padding: var(--m) 0 0; border-top: 1px solid var(--linie-stark); color: var(--text-sek); }
.facts strong { display: block; font: 600 italic 1.5rem/1.15 var(--font-titel); margin-bottom: 0.5rem; color: #fff; }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
.grid--gap-m { gap: var(--m); }
.plain-list { padding-left: 1.2rem; }
.meta-line { font-size: 0.95rem; color: var(--text-sek); margin-top: var(--s); }

/* ---------- Ratgeber ---------- */
.article-layout { display: grid; gap: var(--l); }
@media (min-width: 64rem) { .article-layout { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); align-items: start; gap: var(--xl); } }
.article-body { min-width: 0; }
.article-body h2 { margin-top: var(--xl); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem); max-width: 26ch; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin-top: var(--l); }
.article-body ol, .article-body ul { margin-bottom: var(--m); }
.article-body li { margin-bottom: 0.6rem; }
.article-body .table-wrap, .article-body table { max-width: 100%; }
.answer-box { background: var(--flaeche); border-left: 4px solid var(--marke-hell); padding: var(--m) var(--l) var(--m) var(--m); margin-bottom: var(--l); }
.answer-box h2 { margin-top: 0; font-size: 1.5rem; font-style: normal; }
.answer-box p:last-child { margin-bottom: 0; }
.callout { border: 1px solid var(--linie-stark); padding: var(--m); margin: var(--m) 0; max-width: 46rem; }
.callout strong:first-child { font-family: var(--font-titel); font-size: 1.2rem; }
.callout p:last-child { margin-bottom: 0; }
.sources { font-size: 0.95rem; color: var(--text-sek); }
.sources li { margin-bottom: 0.5rem; max-width: 72ch; overflow-wrap: anywhere; }
.byline { display: grid; gap: 0.2rem; padding: var(--m); background: var(--flaeche); }
.byline p { margin: 0; color: var(--text-sek); }
.byline strong { font-family: var(--font-titel); font-size: 1.15rem; color: #fff; }
.toc ol { padding-left: 1.2rem; margin: 0; }
.toc li { margin-bottom: 0.35rem; }
.checklist { counter-reset: c; list-style: none; padding: 0; }
.checklist > li { counter-increment: c; position: relative; padding-left: 3rem; margin-bottom: var(--m); max-width: 66ch; }
.checklist > li::before {
  content: counter(c); position: absolute; left: 0; top: 0.1rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; border: 1px solid var(--marke-hell); color: var(--marke-hell); font: 600 italic 1.1rem var(--font-titel);
}
.checklist > li > strong:first-child { display: block; font-family: var(--font-titel); font-size: 1.25rem; }
.hub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--m); }
@media (min-width: 48rem) { .hub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-list li { position: relative; margin: 0; max-width: none; background: var(--grund); border: 1px solid var(--linie); border-top: 3px solid var(--marke-hell); padding: var(--m); display: flex; flex-direction: column; gap: var(--s); }
.hub-list li:hover { border-color: var(--linie-stark); border-top-color: #fff; }
.hub-list h3 { margin: 0; font-size: 1.6rem; font-style: italic; }
.hub-list h3 a { color: #fff; text-decoration: none; }
.hub-list h3 a:hover { text-decoration: underline; }
.hub-list p { margin: 0; color: var(--text-sek); }

/* ---------- Tabellen ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 36rem; }
.data-table caption { text-align: left; font: 600 1.15rem var(--font-titel); padding-bottom: var(--s); }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--linie); }
.data-table thead th { background: var(--nacht); color: #fff; font: 600 1.05rem/1.2 var(--font-titel); letter-spacing: 0.02em; border-bottom: 0; }
.data-table tbody th { font-weight: 500; }
.data-table td { color: var(--text-sek); }
.data-table .leer { color: var(--text-leise); font-style: italic; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 50rem; }
.legal h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-top: var(--xl); max-width: none; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin-top: var(--l); }
.legal p, .legal li { color: var(--text-sek); }
.legal-warning { padding: var(--m); border: 1px solid var(--linie-stark); border-left: 4px solid var(--akzent); background: var(--flaeche); margin-bottom: var(--l); max-width: 50rem; }
.legal-warning strong { font-family: var(--font-titel); font-size: 1.3rem; display: block; }
address { font-style: normal; }

/* ---------- Vorstandsvorlage (druckbar) ---------- */
.vorlage { max-width: 52rem; background: var(--flaeche); border: 1px solid var(--linie); padding: clamp(1.25rem, 3vw, 2.5rem); }
.vorlage h2 { margin-top: 0; }
.vorlage__liste > div { display: grid; gap: 0.25rem 1rem; padding-block: 0.8rem; border-top: 1px solid var(--linie); }
@media (min-width: 40rem) { .vorlage__liste > div { grid-template-columns: 11rem minmax(0, 1fr); } }
.vorlage__liste dt { font-weight: 600; }
.vorlage__liste dd { margin: 0; color: var(--text-sek); }
.eintrag { display: inline-block; min-width: 8rem; border-bottom: 1px dashed var(--rahmen); color: var(--text-sek); font-style: italic; padding-inline: 0.2rem; }
.eintrag::before { content: "{"; } .eintrag::after { content: "}"; }
.vorlage__optionen { list-style: none; padding: 0; margin: 0 0 var(--m); }
.vorlage__optionen li { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.75rem; }
.kasten { flex: 0 0 1.1rem; height: 1.1rem; border: 2px solid #fff; margin-top: 0.3rem; }

/* ---------- 404 ---------- */
.notfound-links { columns: 2; column-gap: var(--l); padding-left: 1.2rem; }
@media (max-width: 30rem) { .notfound-links { columns: 1; } }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--flaeche); }

/* ---------- Fuß ---------- */
.site-footer { background: var(--nacht); color: var(--text-sek); padding-block: var(--xl) var(--m); font-size: 0.98rem; border-top: 1px solid var(--linie); }
.site-footer a { color: #fff; text-decoration-color: var(--linie-stark); }
.site-footer a:hover { text-decoration-color: var(--marke-hell); }
.footer-grid { display: grid; gap: var(--l) var(--m); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font: 600 0.85rem var(--font-titel); color: var(--text-sek); margin-bottom: var(--m); letter-spacing: 0.14em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.footer-brand { margin: 0 0 0.6rem; }
.footer-brand img { height: 2.2rem; width: auto; }
.footer-claim { font: 600 italic 1.35rem var(--font-titel); color: #fff; margin: 0 0 var(--m); }
.footer-bottom { border-top: 1px solid var(--linie); margin-top: var(--xl); padding-top: var(--m); display: flex; flex-wrap: wrap; gap: var(--s) var(--l); justify-content: space-between; align-items: center; font-size: 0.9rem; }
.footer-bottom span { max-width: 60ch; }
.site-footer .motion-toggle { background: transparent; font-size: 0.85rem; min-height: 2.5rem; }

[hidden] { display: none !important; }
html:not(.js) .js-only { display: none !important; }

@media (max-width: 63.99rem) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .article-body table { display: block; overflow-x: auto; min-width: 0; }
}

/* =====================================================================
   Bewegung. Nur mit .motion (gesetzt im Kopf, wenn prefers-reduced-motion nicht "reduce" ist)
   und nur über transform und opacity. html.motion-paused hält alles an (Schalter "Bewegung anhalten").
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Wow: Seitenwechsel als blauer Wischer im Markenwinkel (main.js + Kopf-Skript), statt Überblendung per View Transition */

  .motion .site-header { transition: transform 0.45s var(--ease); }
  .motion .site-header.is-hidden { transform: translate3d(0, -100%, 0); }
  .motion .btn::after, .motion .link-arrow::after { transition: transform 0.3s var(--ease); }
  .motion .btn:hover::after, .motion .link-arrow:hover::after { transform: translateX(0.3rem); }
  .motion .btn { transition: background-color 0.2s var(--ease), transform 0.3s var(--ease); }
  .motion .nav-main a > span::after { transition: transform 0.35s var(--ease); }
  .motion .faq summary::after { transition: transform 0.3s var(--ease); }

  /* Vollbild-Menü (nur unter 64rem) */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 63.99rem) {
  .motion .main-nav { transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s; }
  .motion .main-nav.is-open { transition: opacity 0.35s var(--ease), visibility 0s; }
  .motion .main-nav::before { transition: transform 0.9s var(--ease-schwer) 0.1s; transform: scaleX(0); }
  .motion .main-nav.is-open::before { transform: scaleX(1); }
  .motion .main-nav li, .motion .main-nav .nav-cta { opacity: 0; transform: translate3d(0, 3rem, 0); transition: opacity 0.5s var(--ease), transform 0.9s var(--ease-schwer); }
  .motion .nav-main li a { transform: translate3d(0, 105%, 0); transition: transform 0.9s var(--ease-schwer); }
  .motion .main-nav.is-open .nav-main li a { transform: none; }
  .motion .main-nav.is-open li, .motion .main-nav.is-open .nav-cta { opacity: 1; transform: none; }
  .motion .main-nav.is-open .nav-main li:nth-child(2) { transition-delay: 0.05s; }
  .motion .main-nav.is-open .nav-main li:nth-child(3) { transition-delay: 0.1s; }
  .motion .main-nav.is-open .nav-main li:nth-child(4) { transition-delay: 0.15s; }
  .motion .main-nav.is-open .nav-neben li, .motion .main-nav.is-open .nav-cta { transition-delay: 0.22s; }
}
@media (prefers-reduced-motion: no-preference) {

  /* Öffner: Wortmarke baut sich auf, Kurskante fährt ein */
  .motion .wortmarke__buchstaben path { transform-box: fill-box; animation: buchstabe 1.1s var(--ease) both; }
  .motion .wortmarke__buchstaben path:nth-child(2) { animation-delay: 0.06s; }
  .motion .wortmarke__buchstaben path:nth-child(3) { animation-delay: 0.12s; }
  .motion .wortmarke__buchstaben path:nth-child(4) { animation-delay: 0.18s; }
  .motion .wortmarke__buchstaben path:nth-child(5) { animation-delay: 0.24s; }
  .motion .wortmarke__kante { transform-box: fill-box; animation: kante 1.2s var(--ease) 0.45s both; }
  .motion .opener__text, .motion .opener .eyebrow { animation: einblenden 1s var(--ease) 0.5s both; }
  .motion .opener__scroll span::after { animation: lot 2.4s var(--ease) infinite; }
  @keyframes buchstabe { from { opacity: 0; transform: translate3d(0, 18%, 0); } }
  @keyframes kante { from { opacity: 0; transform: translate3d(-60%, 0, 0); } }
  @keyframes einblenden { from { opacity: 0; transform: translate3d(0, 1.5rem, 0); } }
  @keyframes lot { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* Kopf der Unterseiten: Kurskante wächst */
  .motion .page-head::after { animation: linien-ein 1.3s var(--ease-schwer) 0.15s both; }
  @keyframes linien-ein { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .motion .hero__media .placeholder::after {
    content: ""; position: absolute; inset: 0 -50% 0 -50%;
    background: repeating-linear-gradient(100.5deg, transparent 0 90px, rgba(91, 151, 240, 0.08) 90px 92px); /* 100,5 Grad = Markenwinkel 10,5 */
    animation: drift 24s linear infinite;
  }
  @keyframes drift { to { transform: translate3d(25%, 0, 0); } }

  /* Video-Bühne: Höhe für die Öffnung über die Kurskante (JS setzt clip-path je Scrollstand) */
  .motion .stage[data-js] { height: 230vh; }
  .motion .stage[data-js] .stage__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
  .motion .stage[data-js] .stage__caption { opacity: var(--cap, 1); transform: translate3d(0, calc((1 - var(--cap, 1)) * 2rem), 0); }

  /* Wortweise Einblendung (JS teilt in .w) */
  .motion [data-words].is-split .w { opacity: 0.16; transition: opacity 0.5s var(--ease); }
  .motion [data-words].is-split .w.is-on { opacity: 1; }

  /* Laufband */
  .motion .ticker.is-ticker { animation: laufband 70s linear infinite; }
  .motion .ticker.is-ticker:hover, .motion .ticker.is-ticker:focus-within { animation-play-state: paused; }
  @keyframes laufband { to { transform: translate3d(-50%, 0, 0); } }

  /* Formate: Vorschau beim Überfahren */
  .motion .format__media .placeholder, .motion .format__media .bild, .motion .format__video { transition: transform 1.2s var(--ease), opacity 0.6s var(--ease); }
  .motion .format:hover .format__media .placeholder, .motion .format:hover .format__media .bild, .motion .format:hover .format__video { transform: scale(1.045); }
  .motion .format__media::after, .motion .format__media::before { transition: opacity 0.3s var(--ease); }

  /* Bereiche */
  .motion .area__name a { transition: transform 0.6s var(--ease), color 0.3s var(--ease); }
  .motion .area:hover .area__name a { transform: translate3d(1.25rem, 0, 0); color: var(--link); }
  .motion .area::before { transition: transform 0.5s var(--ease); }
  .motion .area { transition: opacity 0.4s var(--ease); }
  .motion .areas:hover .area:not(:hover) { opacity: 0.55; }

  /* Ablauf */
  .motion .flow > li::before { transition: background-color 0.3s var(--ease); }

  /* WEB-05: Pill-Buttons, Cursor, Hamburger */
  .motion .btn--pill { transition: background-color 0.4s var(--ease-schwer); }
  /* Transform-Übergang nur während der Magnet-Bewegung, sonst stört er GSAP-Einblendungen */
  .motion [data-magnet].is-zurueck, .motion .btn--pill.is-zurueck { transition: transform 0.7s var(--ease-schwer), background-color 0.4s var(--ease-schwer); }
  .motion .btn--pill .btn__icon { transition: transform 0.6s var(--ease-feder); }
  .motion .btn--pill:hover .btn__icon { transform: translate3d(2px, -2px, 0) scale(1.06); }
  .motion .btn--pill:hover .btn__icon svg { animation: pfeil 0.7s var(--ease-schwer); }
  @keyframes pfeil { 0% { transform: none; } 45% { transform: translate3d(140%, -140%, 0); opacity: 0; } 46% { transform: translate3d(-140%, 140%, 0); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .motion [data-magnet].is-magnet, .motion .btn--pill.is-magnet { transition: transform 0.15s var(--ease), background-color 0.4s var(--ease-schwer); }
  .motion .cursor__ring-form, .motion .cursor__label { transition: transform 0.55s var(--ease-schwer), opacity 0.3s var(--ease), background-color 0.3s var(--ease); }
  .motion .cursor__punkt { transition: opacity 0.2s var(--ease); }
  .motion .cursor { transition: opacity 0.3s var(--ease); }
  .motion .nav-toggle-bars::before, .motion .nav-toggle-bars::after { transition: transform 0.5s var(--ease-schwer); }

  /* Einblenden beim Scrollen (JS setzt data-reveal und .is-in) */
  .motion [data-reveal] { opacity: 0; transform: translate3d(0, 4rem, 0); transition: opacity 1s var(--ease-schwer), transform 1.3s var(--ease-schwer); transition-delay: calc(var(--i, 0) * 80ms); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }

  /* Schritt-Anzeige im Formular */
  .motion .progress li::after { transition: transform 0.7s var(--ease); }
  .motion .form-step:not([hidden]) { animation: einblenden 0.6s var(--ease) both; }
}

/* Schalter "Bewegung anhalten" */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused [data-reveal] { opacity: 1 !important; transform: none !important; }
.motion-paused [data-words].is-split .w { opacity: 1 !important; }

/* Harte Absicherung bei reduzierter Bewegung (unabhängig vom Skript) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-words] .w { opacity: 1 !important; transform: none !important; }
  .stage__frame { clip-path: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Druck ---------- */
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; }
  .skip-link, .prototype-bar, .site-header, .breadcrumb, .site-footer, .cta-band, .finale, .subnav, .nav-toggle, .stage, .motion-toggle { display: none !important; }
  .page-head, .section, .section--flaeche, .section--dunkel, .vorlage, .hero { background: #fff !important; color: #000 !important; border: 0 !important; }
  .page-head::after { display: none; }
  * { color: #000 !important; }
  .vorlage { padding: 0; }
  .section { padding-block: 0.5rem; }
  a { text-decoration: none; }
  .kasten { border-color: #000; }
}

/* Ton-Schalter der Navigation entfällt seit WEB-11 (Funk im Hero der Startseite, home.css) */

/* WEB-07: Sprachumschalter DE/EN (Navigation-Pille, mobiles Menü) */
.main-nav .sprache { display: flex; gap: 0.15rem; list-style: none; margin: 0 0 var(--m); padding: 0; }
.main-nav .sprache li { margin: 0; }
.main-nav .sprache a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.55rem;
  border-radius: 999px; font: 600 0.85rem/1 var(--font-titel); letter-spacing: 0.12em; text-decoration: none; color: var(--text-sek);
}
.main-nav .sprache a:hover { color: var(--hell); }
.main-nav .sprache a[aria-current] { background: #fff; color: #000; }
@media (min-width: 64rem) { .main-nav .sprache { margin: 0 -0.6rem 0 0; } }

/* =====================================================================
   WEB-08 Finales Branding (Tokens 2026-10-03)
   Flächen: REACH-Blau mit weißem Text (Buttons, Band, empfohlene Paketspalte, Kontaktband, Fußabschluss).
   Auf Schwarz: Text Weiß, Links/Fokus/kleine Marker #5B97F0, Blau nur als Grafik (Linien, Flächen).
   Motiv: Speed-Linien-Bündel, 4 Linien nach unten dicker. Maße in Einheiten u, gemessen am gelieferten
   Anwendungsmotiv (raster/anwendung_*): Linien 1 / 1,5 / 2,5 / 4 u, Lücken 6 / 6 / 4 u, gesamt 25 u.
   Einsatz nur an Nahtstellen: Unterkante Seitenkopf, Übergang in blaue Sektionen, Fußabschluss, Intro,
   Hover der blauen Buttons, mobiles Menü, kleine Marke vor Kennzeichen.
   ===================================================================== */
:root { --u: 0.22rem; }
@media (min-width: 64rem) { :root { --u: 0.28rem; } }

/* Kontext blaue Fläche: nur volles Weiß als Text (Weiß 70 % auf Blau wäre 3,6 : 1) */
.on-blau, .band, .section--marke, .cta-band, .pkg-table thead th.is-rec, .pkg-card.is-rec header {
  --text-sek: #FFFFFF; --text-leise: #FFFFFF; --link: #FFFFFF; --focus: #FFFFFF; --marke-hell: #FFFFFF;
  background-color: var(--blau); color: #fff;
}
.on-blau a:not(.btn), .cta-band a:not(.btn), .band a, .section--marke a:not(.btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.on-blau ::selection, .cta-band ::selection { background: #fff; color: var(--blau); }
.cta-band li::marker, .on-blau li::marker { color: #fff; }

/* Buttons: primär REACH-Blau mit weißer Schrift; auf blauen Flächen Weiß mit schwarzer Schrift */
.btn--primary, .btn--light, .btn--pill { background: var(--blau); color: #fff; }
.btn--primary:hover, .btn--light:hover, .btn--pill:hover { background: var(--blau); color: #fff; }
.btn--pill .btn__icon { background: #fff; color: var(--blau); }
.btn--pill.btn--hell, .btn--hell { background: #fff; color: #000; }
.btn--pill.btn--hell:hover, .btn--hell:hover { background: #fff; color: #000; }
.btn--pill.btn--hell .btn__icon, .btn--hell .btn__icon { background: var(--blau); color: #fff; }
.cta-band .btn--primary, .cta-band .btn--light, .on-blau .btn--primary, .on-blau .btn--light, .section--marke .btn--primary { background: #fff; color: #000; }
.btn--outline { border-color: rgba(255, 255, 255, 0.5); }
.btn--outline:hover { border-color: var(--blau-hell); background: transparent; color: var(--blau-hell); }
.btn--pill.btn--glas, .btn--glas { background: rgba(255, 255, 255, 0.04); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.btn--pill.btn--glas:hover, .btn--glas:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--blau-hell); color: #fff; }
.btn--glas .btn__icon { background: #fff; color: #000; }
.btn--glas:hover .btn__icon { background: var(--blau); color: #fff; }
/* Hover: ein Speed-Linien-Bündel zieht einmal durch den Button (nur transform, nur mit Bewegung) */
.btn--primary, .btn--light, .btn--pill { overflow: hidden; isolation: isolate; }
.btn--primary::before, .btn--light::before, .btn--pill::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 18%; height: 42%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--sl, rgba(255, 255, 255, 0.34)) 0 4%, transparent 0 28%, var(--sl, rgba(255, 255, 255, 0.34)) 0 34%, transparent 0 58%, var(--sl, rgba(255, 255, 255, 0.34)) 0 68%, transparent 0 84%, var(--sl, rgba(255, 255, 255, 0.34)) 0);
  transform: translate3d(-101%, 0, 0);
}
.btn--hell::before, .cta-band .btn::before, .on-blau .btn::before { --sl: rgba(6, 94, 221, 0.3); }
.btn--glas::before { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .motion .btn--primary:hover::before, .motion .btn--light:hover::before, .motion .btn--pill:hover::before { animation: linien-zug 0.85s var(--ease-schwer) both; }
  @keyframes linien-zug { from { transform: translate3d(-101%, 0, 0); } to { transform: translate3d(101%, 0, 0); } }
}

/* Navigation */
.brand img { height: 2rem; width: auto; }                 /* WEB-09: 32 px Versalhöhe = Mindestgröße laut Brandbook (digital) */
.header-inner { padding-left: 1.2rem; }
.brand { text-decoration: none; }
.brand__bereich { display: none; }
@media (min-width: 64rem) {
  /* Bereichs-Lockup in der Pille: Wortmarke | BEREICH (Barlow Semi Condensed 600, Versalien, +0,08 em) */
  .brand__bereich {
    display: inline-flex; align-items: center; margin-left: 0.8rem; padding-left: 0.8rem; height: 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font: 600 0.72rem/1 var(--font-titel); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; white-space: nowrap;
  }
}
.main-nav .sprache a[aria-current] { background: #fff; color: #000; }
.main-nav .sprache a:hover { color: var(--blau-hell); }

/* Kennzeichen, Marker, Cursor, Auswahl */
.tag { border-color: rgba(255, 255, 255, 0.24); }
.tag--ok { color: var(--blau-hell); border-color: currentColor; }
.tag--akzent { background: var(--blau); color: #fff; border-color: var(--blau); }
.tag--akzent::before { background: #fff; }
.pkg-table thead th.is-rec .tag, .pkg-card.is-rec header .tag { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.pkg-table thead th.is-rec .tag--akzent, .pkg-card.is-rec header .tag--akzent { background: #fff; color: #000; border-color: #fff; }
.pkg-table thead th.is-rec .tag--akzent::before, .pkg-card.is-rec header .tag--akzent::before { background: var(--blau); }
.pkg-table td.is-rec { background: rgba(6, 94, 221, 0.12); }
.pkg-table thead th .tag { display: block; width: max-content; }
@media (min-width: 64rem) { .facts--3 { grid-template-columns: repeat(3, 1fr); } }
.pkg-card.is-rec { border-color: var(--blau); }
.recommend { border-left-color: var(--blau); }
.cursor.is-hover .cursor__ring-form { background: var(--blau); }
.cursor__label { color: #fff; }
.cursor__punkt { background: var(--blau-hell); }
::selection { background: var(--blau); color: #fff; }
.band { font-style: italic; }

/* Seitenkopf: Bündel braucht Platz unten (siehe .page-head::after) */
@media (max-width: 63.99rem) { .page-head .wrap > * { padding-right: 0; } }

/* Kontaktband (Unterseiten): REACH-Blau; darüber laufen die Speed-Linien aus dem Schwarz in die Fläche */
.cta-band { overflow: visible; border-top: 0; background-image: none; margin-top: calc(21 * var(--u)); }
.cta-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-21 * var(--u)); height: calc(21 * var(--u)); pointer-events: none;
  background: linear-gradient(to bottom, var(--blau) 0 calc(1 * var(--u)), transparent 0 calc(7 * var(--u)), var(--blau) 0 calc(8.5 * var(--u)), transparent 0 calc(14.5 * var(--u)), var(--blau) 0 calc(17 * var(--u)), transparent 0);
  transform-origin: left;
}
.cta-band .lead, .cta-band p, .cta-band li { color: #fff; }
.cta-band .offen { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.6); }
.cta-band .link-arrow { color: #fff; text-decoration-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .motion .cta-band::before { transform: scaleX(0); transition: transform 1.4s var(--ease-schwer); }
  .motion .cta-band.is-sichtbar::before { transform: scaleX(1); }
}

/* Bereichs-Lockup im Hero der Bereichsseiten: Wortmarke | BEREICH, Name ca. 28 % der Versalhöhe */
.lockup { display: flex; align-items: center; gap: 0; margin: 0 0 var(--l); max-width: none; }
.lockup::before { content: none !important; }
.lockup__marke { height: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); width: auto; flex: none; }
.lockup__name {
  display: inline-flex; align-items: center; align-self: stretch;
  margin-left: 0.55em; padding-left: 0.6em; border-left: 1.5px solid rgba(255, 255, 255, 0.5);
  font: 600 clamp(0.78rem, 0.62rem + 0.5vw, 1.1rem)/1 var(--font-titel); letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}

/* WEB-09: echte Fotos in Farbe (Brandbook: Farbe für Dokumentation, kein Blau-Duoton). Nur verbliebene
   Platzhalter (Dummy-Silhouetten) bleiben gedämpft. Abdunkeln nur dort, wo Text auf dem Bild liegt (home.css). */
.bild img { filter: none; }
.hero__media .bild img { object-position: 50% 35%; }
.bild:has(img[src*="/dummy/"]) img { filter: grayscale(1) brightness(0.74); }
/* Hero-Bild der Bereichsseiten löst sich unten in Speed-Linien auf: Proportionen der Wortmarke (Schnitt bei 56 % H,
   Lücken 1,2 / 1,9 / 3,0 / 4,8 %, Linien 7,4 / 7,4 / 4,9 %, Fuß 13,4 %), skaliert auf die unteren 30 % des Bildes */
.hero__media .bild {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, transparent 0 70.8%, #000 0 75.9%, transparent 0 77.2%, #000 0 82.2%, transparent 0 84.3%, #000 0 87.6%, transparent 0 90.9%, #000 0);
  mask-image: linear-gradient(to bottom, #000 0 70%, transparent 0 70.8%, #000 0 75.9%, transparent 0 77.2%, #000 0 82.2%, transparent 0 84.3%, #000 0 87.6%, transparent 0 90.9%, #000 0);
}
.bild--portrait.bild--kante { clip-path: polygon(0 0, 100% 0, 76.9% 100%, 0 100%); }   /* 4:5: tan 10,5 x 1,25 = 23,1 % */

/* Fuß: Abschluss auf REACH-Blau mit Wortmarke (Weiß auf Blau) und Linienbündel über die ganze Breite */
.site-footer { padding-bottom: 0; }
.fuss-marke { background: var(--blau); color: #fff; margin-top: var(--xl); padding: clamp(2.5rem, 6vw, 5rem) 0 0; overflow: hidden; }
.fuss-marke__wort { display: block; width: 100%; height: auto; }
.fuss-marke .speed { margin-top: clamp(2rem, 5vw, 4.5rem); }
.fuss-marke .footer-bottom { border-top: 0; margin: 0; padding: var(--m) 0 calc(var(--m) + env(safe-area-inset-bottom, 0px)); color: #fff; }
.fuss-marke .footer-bottom span { color: #fff; }
.fuss-marke .motion-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.7); background: transparent; }
.fuss-marke .motion-toggle:hover { border-color: #fff; }
.fuss-marke :focus-visible { outline-color: #fff; }
.site-footer a:hover { text-decoration-color: var(--blau-hell); }

/* Komponente Speed-Linien-Bündel (Markup: <div class="speed" aria-hidden="true"><i></i><i></i><i></i><i></i></div>) */
.speed { position: relative; height: calc(25 * var(--u)); --sf: var(--blau); }
.speed i { position: absolute; left: 0; right: 0; background: var(--sf); transform-origin: left; }
.speed i:nth-child(1) { top: 0; height: calc(1 * var(--u)); }
.speed i:nth-child(2) { top: calc(7 * var(--u)); height: calc(1.5 * var(--u)); }
.speed i:nth-child(3) { top: calc(14.5 * var(--u)); height: calc(2.5 * var(--u)); }
.speed i:nth-child(4) { top: calc(21 * var(--u)); height: calc(4 * var(--u)); }
.speed--weiss { --sf: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .motion .speed[data-ein] i { transform: scaleX(0); transition: transform 1.3s var(--ease-schwer); }
  .motion .speed[data-ein] i:nth-child(2) { transition-delay: 0.08s; }
  .motion .speed[data-ein] i:nth-child(3) { transition-delay: 0.16s; }
  .motion .speed[data-ein] i:nth-child(4) { transition-delay: 0.24s; }
  .motion .speed[data-ein].is-sichtbar i { transform: scaleX(1); }
}
.motion-paused .speed[data-ein] i, .motion-paused .cta-band::before { transform: none !important; }
@media print { .fuss-marke, .speed { display: none !important; } }

/* =====================================================================
   WEB-10 Projekte und Partner (erzeugt aus _inhalte/ über _werkzeuge/inhalte.py)
   ===================================================================== */
.tag--muster { color: #fff; background: transparent; border: 1px dashed var(--blau-hell); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { margin: 0; max-width: none; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--linie-stark);
  font: 600 0.78rem/1.2 var(--font-titel); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.wimpel { display: inline-block; width: 1.6rem; height: auto; flex: none; }
.wimpel--gross { width: 2.2rem; }
.leer-hinweis { font: 600 italic clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.3 var(--font-titel); color: var(--text-sek); max-width: 34ch; }
.ml-l { margin-left: var(--l); }

/* Kacheln */
.projekt-kacheln { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 48rem) { .projekt-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .projekt-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projekt-kachel { position: relative; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden; }
.projekt-kachel__bild { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--nacht); }
.projekt-kachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.projekt-kachel__text { display: grid; gap: 0.6rem; padding: var(--m); }
.projekt-kachel__text .tag { justify-self: start; margin: 0; }
.projekt-kachel__veranstalter { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.92rem; color: var(--text-sek); }
.projekt-kachel__titel { margin: 0; font-style: italic; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); }
.projekt-kachel__titel a { color: #fff; text-decoration: none; }
.projekt-kachel__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.projekt-kachel__titel a:focus-visible { outline: none; }
.projekt-kachel:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.projekt-kachel__meta { margin: 0; color: var(--text-sek); font-size: 0.95rem; }
.projekt-kachel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blau); transform: scaleX(0); transform-origin: left; }
.projekt-kachel:hover::after, .projekt-kachel:focus-within::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .motion .projekt-kachel__bild img { transition: transform 1s var(--ease); }
  .motion .projekt-kachel:hover .projekt-kachel__bild img { transform: scale(1.04); }
  .motion .projekt-kachel::after { transition: transform 0.6s var(--ease-schwer); }
}
.projekt-kachel[hidden] { display: none; }

/* Filter */
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--l); }
.filter__knopf { min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--linie-stark); background: transparent; color: #fff;
  font: 600 0.95rem/1 var(--font-titel); letter-spacing: 0.04em; cursor: pointer; }
.filter__knopf:hover { border-color: var(--blau-hell); }
.filter__knopf[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); }

/* Projektseite: Kopf */
.projekt-kopf { position: relative; isolation: isolate; min-height: min(78svh, 46rem); display: grid; align-items: end; overflow: hidden; background: var(--nacht); }
.projekt-kopf__bild { position: absolute; inset: 0; z-index: -2; display: block; }
.projekt-kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.projekt-kopf::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.72) 38%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.45) 100%); }
.projekt-kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(25 * var(--u)); pointer-events: none;
  background: linear-gradient(to bottom, var(--blau) 0 calc(1 * var(--u)), transparent 0 calc(7 * var(--u)), var(--blau) 0 calc(8.5 * var(--u)), transparent 0 calc(14.5 * var(--u)), var(--blau) 0 calc(17 * var(--u)), transparent 0 calc(21 * var(--u)), var(--blau) 0);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) { .motion .projekt-kopf::after { animation: linien-ein 1.3s var(--ease-schwer) 0.2s both; } }
.projekt-kopf { --u: 0.2rem; }
.projekt-kopf__inhalt { padding-block: calc(var(--kopf-gesamt) + 4rem) calc(clamp(2.5rem, 6vh, 4rem) + 25 * var(--u)); }
.projekt-kopf__inhalt h1 { max-width: 18ch; margin-bottom: var(--m); }
.projekt-kopf__inhalt .lead { color: #fff; }
.projekt-kopf__inhalt .tag { margin-bottom: var(--m); }

/* Eckdatenleiste */
.eckdaten-leiste { background: var(--nacht); border-bottom: 1px solid var(--linie); }
.eckdaten { margin: 0; display: grid; gap: 0; padding-block: var(--m); }
@media (min-width: 48rem) { .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .eckdaten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eckdaten > div { padding: 0.9rem 1.25rem 0.9rem 0; border-top: 1px solid var(--linie); }
.eckdaten dt { font: 600 0.75rem/1.2 var(--font-titel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sek); margin-bottom: 0.35rem; }
.eckdaten dd { margin: 0; font: 600 1.1rem/1.35 var(--font-titel); color: #fff; }
.eckdaten__leistungen { grid-column: 1 / -1; }
.eckdaten__veranstalter { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.eckdaten a { color: #fff; }
.extern { color: var(--blau-hell); }

/* Ausgangslage, Umsetzung, Ergebnis */
.projekt-herkunft { display: inline-block; margin: 0 0 var(--l); padding: 0.55rem 0.9rem; border-left: 3px solid var(--blau-hell); background: var(--flaeche); color: #fff; font-size: 0.98rem; max-width: none; }
.projekt-schritte { display: grid; gap: var(--l) clamp(1.5rem, 4vw, 4rem); }
@media (min-width: 64rem) { .projekt-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projekt-schritt { border-top: 1px solid var(--linie-stark); padding-top: 1.25rem; }
.projekt-schritt__nr { margin: 0 0 var(--s); font: 600 italic clamp(2rem, 1.5rem + 1.5vw, 3rem)/1 var(--font-titel); color: var(--blau-hell); }
.projekt-schritt h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.projekt-schritt p:last-child { color: var(--text-sek); }

/* Kennzahlen */
.kennzahlen { list-style: none; margin: var(--l) 0 0; padding: 0; display: grid; gap: var(--l) var(--m); }
@media (min-width: 48rem) { .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kennzahlen li { margin: 0; display: grid; gap: 0.4rem; border-top: 3px solid var(--blau); padding-top: var(--m); max-width: none; }
.kennzahlen strong { font: 600 italic clamp(2.6rem, 2rem + 2vw, 4rem)/1 var(--font-titel); color: #fff; }
.kennzahlen small { color: var(--text-sek); font-size: 0.88rem; }

/* Galerie und Großansicht */
.galerie-raster { list-style: none; margin: var(--l) 0 0; padding: 0; display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .galerie-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie-raster li { margin: 0; max-width: none; }
.galerie-raster__link { display: block; position: relative; overflow: hidden; }
.galerie-raster__bild, .galerie-raster__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.galerie-raster__link::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--blau); transform: scaleX(0); transform-origin: left; }
.galerie-raster__link:hover::after, .galerie-raster__link:focus-visible::after { transform: scaleX(1); }
.galerie-raster__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .motion .galerie-raster__link img { transition: transform 0.9s var(--ease); }
  .motion .galerie-raster__link:hover img { transform: scale(1.04); }
  .motion .galerie-raster__link::after { transition: transform 0.5s var(--ease-schwer); }
}
.lightbox { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0.96); color: #fff; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; align-items: center; }
.lightbox__rahmen { grid-column: 2; display: grid; justify-items: center; gap: 0.8rem; padding: 4.5rem 0 1.5rem; height: 100%; align-content: center; min-width: 0; }
.lightbox__bild { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; }
.lightbox__text { margin: 0; text-align: center; color: #fff; font-size: 0.95rem; }
.lightbox__zaehler { color: var(--text-sek); margin-left: 0.6rem; }
.lightbox__knopf { min-height: 2.75rem; padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.6); color: #fff;
  font: 600 0.9rem/1 var(--font-titel); letter-spacing: 0.04em; cursor: pointer; margin: 0 var(--gutter); }
.lightbox__knopf:hover { border-color: var(--blau-hell); }
.lightbox__knopf:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lightbox__zurueck { grid-column: 1; grid-row: 1; }
.lightbox__weiter { grid-column: 3; grid-row: 1; }
.lightbox__zu { position: absolute; top: 1rem; right: 0; }
@media (max-width: 47.99rem) {
  .lightbox[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
  .lightbox__rahmen { grid-column: 1 / -1; grid-row: 1; padding-inline: var(--gutter); }
  .lightbox__zurueck { grid-column: 1; grid-row: 2; justify-self: start; margin-bottom: 1rem; }
  .lightbox__weiter { grid-column: 2; grid-row: 2; justify-self: end; margin-bottom: 1rem; }
}

/* Medien, Zitat, Video, Weiter */
.medien-leiste { list-style: none; margin: var(--m) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.medien-leiste li { margin: 0; }
.medien-link { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.7rem 1.3rem; border-radius: 999px; border: 1px solid var(--linie-stark);
  color: #fff; text-decoration: none; font: 600 1rem/1 var(--font-titel); letter-spacing: 0.03em; }
.medien-link:hover { border-color: var(--blau-hell); }
.zitat { margin: 0; max-width: 54rem; }
.zitat blockquote { margin: 0 0 var(--m); padding-left: 1.5rem; border-left: 4px solid var(--blau); }
.zitat blockquote p { font: 600 italic clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem)/1.25 var(--font-titel); color: #fff; max-width: none; }
.zitat figcaption { color: var(--text-sek); }
.zitat figcaption strong { color: #fff; }
.zitate { display: grid; gap: var(--l); margin-top: var(--xl); }
.video-klick { margin-top: var(--m); max-width: 60rem; }
.video-klick__knopf { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; gap: 0.6rem; border: 1px solid var(--linie-stark);
  background: var(--flaeche); color: #fff; font: 600 1.1rem var(--font-titel); cursor: pointer; }
.video-klick__play { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--blau); position: relative; }
.video-klick__play::after { content: ""; position: absolute; left: 1.85rem; top: 1.45rem; border-left: 1.2rem solid #fff; border-block: 0.8rem solid transparent; }
.video-klick iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.projekt-weiter { border-top: 1px solid var(--linie); background: var(--grund); }
.projekt-weiter .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m); padding-block: var(--l); }
.projekt-weiter__link { display: grid; gap: 0.3rem; color: #fff; text-decoration: none; }
.projekt-weiter__link span { font: 600 0.8rem var(--font-titel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sek); }
.projekt-weiter__link strong { font: 600 italic clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem)/1.05 var(--font-titel); }
.projekt-weiter__link:hover strong { color: var(--blau-hell); }

/* Partner */
.partner-kategorie { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem); }
.partner-liste { list-style: none; margin: var(--l) 0 0; padding: 0; display: grid; gap: var(--m); }
@media (min-width: 48rem) { .partner-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .partner-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partner-karte { margin: 0; max-width: none; display: grid; gap: 0.6rem; align-content: start; padding: var(--m); background: var(--flaeche); border: 1px solid var(--linie); }
.partner-karte h3 { margin: 0; font-style: italic; }
.partner-karte p { margin: 0; color: var(--text-sek); }
.partner-karte .tag { justify-self: start; margin: 0; }
.partner-karte__logo { display: grid; place-items: center start; height: 5rem; margin-bottom: var(--s); }
.partner-logo { max-height: 4rem; width: auto; max-width: 14rem; filter: brightness(0) invert(1); opacity: 0.86; }
.partner-karte:hover .partner-logo, .partner-karte:focus-within .partner-logo { filter: none; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .motion .partner-logo { transition: opacity 0.3s var(--ease); } }
.partner-karte__seit { font: 600 0.78rem var(--font-titel); letter-spacing: 0.12em; text-transform: uppercase; }
.partner-karte a { color: var(--link); }
.haltung-partner { grid-column: 2; }
.projekte-start { background: var(--grund); }
.kennzahlen strong .offen { font-size: 0.42em; vertical-align: middle; }

/* =====================================================================
   WEB-11 Production-Hero als Vollbild mit Foto (Text auf mindestens 60 % Schwarz)
   ===================================================================== */
.hero--voll { isolation: isolate; min-height: min(100svh, 60rem); display: grid; align-items: end; background: var(--nacht); }
.hero--voll .hero__inner { padding-top: clamp(6rem, 18vh, 12rem); padding-bottom: calc(clamp(2.5rem, 6vh, 4.5rem) + 25 * var(--u)); width: 100%; }
.hero--voll .hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; aspect-ratio: auto; }
.hero--voll .hero__media .bild { position: absolute; inset: 0; clip-path: none; -webkit-mask-image: none; mask-image: none; border: 0; aspect-ratio: auto; }
.hero--voll .hero__media .bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.3) 72%, rgba(0, 0, 0, 0.15) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 45%);
}
.hero--voll::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(25 * var(--u)); pointer-events: none;
  background: linear-gradient(to bottom, var(--blau) 0 calc(1 * var(--u)), transparent 0 calc(7 * var(--u)), var(--blau) 0 calc(8.5 * var(--u)), transparent 0 calc(14.5 * var(--u)), var(--blau) 0 calc(17 * var(--u)), transparent 0 calc(21 * var(--u)), var(--blau) 0);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) { .motion .hero--voll::after { animation: linien-ein 1.3s var(--ease-schwer) 0.2s both; } }
.hero--voll .hero__panel .lead, .hero--voll .hero__note { color: #fff; }
@media (min-width: 64rem) {
  .hero--voll .hero__panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .hero--voll::before { background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.45) 100%); }
}

/* =====================================================================
   WEB-11 Termine, Social-Liste, Produktionsnetzwerk
   ===================================================================== */
.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
.termin { margin: 0; max-width: none; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--m); align-items: center; padding: var(--m) 0; background: var(--grund); }
.termin__datum { margin: 0; display: grid; gap: 0.2rem; }
.termin__tag { font: 600 italic clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 var(--font-titel); color: #fff; }
.termin__monat { font: 600 0.78rem var(--font-titel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blau-hell); }
.termin__text h3 { margin: 0 0 0.3rem; font-style: italic; }
.termin__text p { margin: 0; color: var(--text-sek); }
.termin__links { margin-top: 0.5rem !important; display: flex; flex-wrap: wrap; gap: 1rem; }
.termin[hidden] { display: none; }
.termine-leer { display: grid; gap: var(--s); max-width: 44rem; }
.termine-start { background: var(--grund); border-top: 1px solid var(--linie); }
.termine-start__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--m); margin-bottom: var(--l); }
.termine-start__kopf h2 { margin: 0; }
.termine-start__leer { font: 600 italic clamp(1.2rem, 1rem + 0.8vw, 1.6rem)/1.35 var(--font-titel); color: var(--text-sek); max-width: 40ch; margin: 0; }
.social-liste { list-style: none; margin: var(--s) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.social-liste li { margin: 0; }
.social-liste__name { color: #fff; font-weight: 600; }
.social-liste--fuss { margin-top: var(--m); }
.rollen-raster .area-card h3 { font-size: 1.5rem; }

/* WEB-11 Korrektur Production-Hero: Text links gestapelt, Personen im Foto rechts frei */
@media (min-width: 64rem) {
  .hero--voll .hero__panel { display: block; max-width: 44rem; }
  .hero--voll .hero__panel .lead { margin-top: var(--m); }
  .hero--voll .hero__media .bild img { object-position: 15% 50%; }
  .hero--voll::before {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.78) 38%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 80%),
      linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 40%);
  }
}

/* =====================================================================
   Wow (Branch v1plus-wow): Seitenwechsel im Markenwinkel, Hover-Speed-Lines, Satz-Regeln für Überschriften
   ===================================================================== */
.wisch { position: fixed; top: 0; bottom: 0; left: -30vw; right: -30vw; z-index: 1000; pointer-events: none; background: var(--blau);
  transform: translate3d(-150vw, 0, 0) skewX(-10.5deg); }
.wisch.is-an { transform: translate3d(0, 0, 0) skewX(-10.5deg); }
html.wisch-ein body::before { content: ""; position: fixed; top: 0; bottom: 0; left: -30vw; right: -30vw; z-index: 1000; pointer-events: none;
  background: var(--blau); transform: skewX(-10.5deg); }
:root { --ease-wisch: cubic-bezier(0.7, 0, 0.2, 1); }
@media (prefers-reduced-motion: no-preference) {
  .wisch.is-an { transition: transform 0.3s var(--ease-wisch); }
  html.wisch-ein body::before { animation: wisch-aus 0.42s var(--ease-wisch) 0.06s both; }
  @keyframes wisch-aus { to { transform: translate3d(150vw, 0, 0) skewX(-10.5deg); } }
}
.btn { isolation: isolate; }
.btn__speed { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.btn__speed i { position: absolute; left: -10%; width: 120%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0));
  transform: translate3d(-110%, 0, 0); }
.btn__speed i:nth-child(1) { top: 26%; height: 1px; }
.btn__speed i:nth-child(2) { top: 46%; height: 2px; }
.btn__speed i:nth-child(3) { top: 66%; height: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover .btn__speed i, .btn:focus-visible .btn__speed i { transform: translate3d(110%, 0, 0); transition: transform 0.6s var(--ease-wisch); }
  .btn:hover .btn__speed i:nth-child(2), .btn:focus-visible .btn__speed i:nth-child(2) { transition-delay: 0.05s; }
  .btn:hover .btn__speed i:nth-child(3), .btn:focus-visible .btn__speed i:nth-child(3) { transition-delay: 0.1s; }
}
@media (prefers-reduced-motion: reduce) { .wisch, .btn__speed { display: none !important; } html.wisch-ein body::before { content: none; } }

/* Satz (Typografie wie gesetzt): Überschriften ausgeglichen umbrechen, keine Silbentrennung, Kerning; Fließtext ohne Einzelwort in der letzten Zeile */
/* nur text-wrap-style (Langform): die Kurzform würde white-space: nowrap (Laufband, Bildfolge) aufheben */
h1, h2, h3, .bignum { text-wrap-style: balance; hyphens: manual; -webkit-hyphens: manual; font-kerning: normal; }
p, li, dd { text-wrap-style: pretty; }
.nw { white-space: nowrap; }
br.nur-mobil { display: none; }
@media (max-width: 47.99rem) { br.nur-mobil { display: inline; } br.nur-desktop { display: none; } }
/* "Unsere Arbeit": zwei Einträge, zwei Spalten (vier Spalten würden "Tempest · Training Gardasee" dreifach umbrechen) */
@media (min-width: 48rem) { .projekte-start .promise-list, #arbeit .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 72rem; } }
.promise-list span.nw { font: inherit; color: inherit; }
/* Satz: "Auf dem Wasser." usw. bleiben auch mobil einzeilig (ruhige Fassung und Wow gleich) */
[data-tempo] .bignum { font-size: clamp(2.5rem, 0.1rem + 9.4vw, 10.5rem); }

/* =====================================================================
   Mobile First (05.10.2026, MOBILE_FIRST_BERICHT.md)
   Gleicher Look; nur Bedienung mit dem Daumen, Notch/Safe Area und Umbrüche auf Handys.
   Quellen: WebKit „Designing Websites for iPhone X“ (max() + env()), Apple HIG 44 pt, WCAG 2.2 SC 2.5.8.
   ===================================================================== */
/* Safe Area: viewport-fit=cover lässt die dunklen Flächen unter Notch/Home-Balken laufen; Inhalte halten Abstand.
   Ohne Aussparung (Hochformat, Desktop) ist env() = 0 und alles bleibt wie bisher. */
:root {
  --gutter: max(clamp(1.25rem, 0.6rem + 2.6vw, 3rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --sicher-oben: env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
}
.site-header { height: calc(var(--kopf-gesamt) + var(--sicher-oben)); padding-top: calc(0.75rem + var(--sicher-oben)); }
@media (max-width: 63.99rem) { .js .main-nav { padding-top: calc(var(--kopf-gesamt) + 2rem + var(--sicher-oben)); } }   /* nur Vollbild-Menü; Desktop-Pille ohne Abstand (Fix 05.10.) */

/* Menü-Nebenlinks: „Für Ausrichter“, „Über uns“ nie trennen (vorher „Für / Ausrichter“ in zwei Zeilen) */
.nav-neben { flex-wrap: wrap; column-gap: var(--m); row-gap: 0.25rem; }
.nav-neben a { white-space: nowrap; }

/* Tap-Ziele >= 44 px bei Finger-Bedienung (Maus/Trackpad unverändert) */
@media (pointer: coarse) {
  .site-footer li { margin-bottom: 0; }
  .site-footer li > a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .site-footer .motion-toggle, .motion-toggle { min-height: 2.75rem; }
  .nav-neben a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .main-nav .sprache a { min-width: 2.75rem; min-height: 2.75rem; }
  .subnav a { display: flex; align-items: center; min-height: 2.75rem; }
  /* einzeln stehende Links: Trefferfläche wächst, Satz/Abstände bleiben gleich (Innenabstand + Gegenrand) */
  .breadcrumb a { display: inline-block; padding-block: 0.8rem; margin-block: -0.8rem; }
  .hub-list h3 a, .intro-wieder { display: inline-block; padding-block: 0.45rem; margin-block: -0.45rem; }
  .link-arrow, .aside-box p > a { display: inline-block; padding-block: 0.65rem; margin-block: -0.65rem; }
  .claim-line a { padding-block: 0.85rem; margin-block: -0.85rem; }
  .breadcrumb li:first-child a { padding-inline: 0.4rem; margin-inline: -0.4rem; }
  /* Inhaltsverzeichnis im Ratgeber: Zeilen werden zu vollen Tippzeilen */
  nav.aside-box li { margin-block: 0; }
  nav.aside-box li > a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .intro-wieder { padding-block: 0.7rem; margin-block: -0.7rem; }
}

/* Vorschau-Variante B (nur ?variante=b, Entscheidung offen): Menü-Links unten im Daumenbereich statt mittig */
@media (max-width: 63.99rem) {
  html.variante-b.js .main-nav { justify-content: flex-end; padding-bottom: calc(25 * var(--u) + 2.5rem + var(--sicher-unten)); }
}

/* =====================================================================
   WELLE 2 (06.10.2026): Technik ohne Look-Wechsel; neue Bausteine nur hinter Schaltern
   ===================================================================== */
/* S3: Fuß-Überschriften sind keine H2 mehr (p.fuss-titel), Aussehen wie vorher .site-footer h2 */
.site-footer .fuss-titel { font: 600 0.85rem var(--font-titel); color: var(--text-sek); margin: 0 0 var(--m); max-width: none; letter-spacing: 0.14em; text-transform: uppercase; }
/* S4: Frage als Überschrift im <summary>, sieht aus wie vorher der reine summary-Text */
.faq summary .faq__frage { display: inline; font: inherit; color: inherit; letter-spacing: inherit; margin: 0; max-width: none; text-wrap: inherit; hyphens: inherit; -webkit-hyphens: inherit; }
/* B1: Mission im Quelltext in normaler Schreibung (Screenreader buchstabieren Versalwörter), sichtbar weiter in Versalien */
.versal { text-transform: uppercase; }
/* Consent (nur mit aktivem Dienst): Fußlink „Cookie-Einstellungen“ als Knopf im Aussehen der Fußlinks */
.fuss-knopf { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: #fff; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 0.15em; }
.fuss-knopf:hover { text-decoration-color: var(--marke-hell); }
@media (pointer: coarse) { .fuss-knopf { min-height: 2.75rem; } }

/* Partner-Leiste (Startseite, Über uns): nur mit freigegebenen Partnern; Musteransicht nur Vorschau ?partner=test */
.partner-leiste { background: var(--grund); border-top: 1px solid var(--linie); padding-block: var(--l); }
.partner-leiste__titel { font: 600 0.85rem var(--font-titel); color: var(--text-sek); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--m); max-width: none; }
.partner-leiste__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); }
@media (min-width: 48rem) { .partner-leiste__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .partner-leiste__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.partner-leiste__karte { margin: 0; max-width: none; }
.partner-leiste__kern { display: grid; place-items: center; aspect-ratio: 3 / 1.4; padding: 1rem 1.25rem; border-radius: calc(1.6rem - 0.45rem); background: var(--flaeche); color: #fff; text-decoration: none; }
.partner-leiste__logo { max-height: 3.2rem; width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: 0.8; }
.partner-leiste__name { font: 600 italic 1.2rem var(--font-titel); text-align: center; }
a.partner-leiste__kern:hover .partner-leiste__logo, a.partner-leiste__kern:focus-visible .partner-leiste__logo { opacity: 1; }
a.partner-leiste__kern:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .motion .partner-leiste__logo { transition: opacity 0.3s var(--ease); } }

/* Mobiler Anfrage-Knopf (LOOK-Variante, nur Vorschau ?cta=mobil, Entscheidung Niklas): am Handy dauerhaft unten erreichbar */
.cta-mobil { position: fixed; z-index: 120; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translate3d(-50%, 0, 0);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.55); white-space: nowrap; }
.cta-mobil.ist-weg { opacity: 0; transform: translate3d(-50%, 150%, 0); pointer-events: none; }
html.nav-open .cta-mobil, html.intro-an .cta-mobil { display: none; }
@media (min-width: 48rem) { .cta-mobil { display: none !important; } }
@media (prefers-reduced-motion: no-preference) { .motion .cta-mobil { transition: transform 0.45s var(--ease), opacity 0.3s var(--ease); } }

/* Fix 05.10.: Datentabellen am Handy gestapelt statt rechts abgeschnitten (Spaltenkopf je Zelle über data-label aus main.js) */
@media (max-width: 47.99rem) {
  .data-table { min-width: 0; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-table tr { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
  .data-table th, .data-table td { display: block; width: auto; padding: 0.25rem 0; border-bottom: 0; }
  .data-table tbody th { color: #fff; font-weight: 600; }
  .data-table td[data-label]::before { content: attr(data-label); display: block; font: 600 0.78rem/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); margin-top: 0.35rem; }
}