/* ═══════════════════════════════════════════════════════════════════════════
   Fassung 8, Konzept „Verschränkung"
   Aus dem Logo gelesen: D und C entstehen aus einer Linie, und erst dort,
   wo sie sich überlagern, wird aus zwei Buchstaben ein Zeichen. Jede
   Fläche der Seite wird von einer zweiten angeschnitten, und die
   Schnittmenge hat einen eigenen Ton. Versatz 5 : 4 wie im Logo, Winkel
   38 Grad, Radius null.

   Die eine Regel: Eine Fläche zeigt nie vier freie Kanten.

   Diese Datei wird nach styles.css geladen und ersetzt dort die Tokens und
   alle Inhaltskomponenten. Hero, Szenen, Navigation und Einwilligung laufen
   über ein Mapping der alten Tokennamen weiter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kursivschnitte: die Kursive ist das C ──────────────────────────────── */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 300 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-italic-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* ── Rampe, zehn Stopps, Hue 22.68 aus Bordeaux ─────────────────────────── */
:root {
  --hue: 22.68;
  --r0: #F5F0EF;  --r1: #D3CAC9;  --r2: #948988;  --r3: #635857;
  --r4: #CF5A5A;  --r5: #921221;  --r6: #570D13;
  --r7: #241C1B;  --r8: #181212;  --r9: #100B0A;
}
@supports (color: oklch(0.5 0.1 20)) {
  :root {
    --r0: oklch(0.958 0.006 var(--hue));  --r1: oklch(0.845 0.010 var(--hue));
    --r2: oklch(0.640 0.013 var(--hue));  --r3: oklch(0.470 0.014 var(--hue));
    --r4: oklch(0.615 0.148 var(--hue));  --r5: oklch(0.425 0.160 var(--hue));
    --r6: oklch(0.300 0.105 var(--hue));  --r7: oklch(0.235 0.012 var(--hue));
    --r8: oklch(0.190 0.010 var(--hue));  --r9: oklch(0.155 0.009 var(--hue));
  }
}

/* ── Hell: Silber neutral, Chroma null, Schnittmenge per Multiply ───────── */
:root {
  color-scheme: light;
  --weiss:     #FFFFFF;
  --silber-1:  #E8E8E8;
  --silber-2:  #D4D4D4;
  --silber-3:  #B7B7B7;
  --schnitt:   #B0B0B0;

  --grund:     var(--weiss);
  --band:      var(--silber-1);
  --ebene-d:   var(--silber-2);
  --ebene-c:   var(--weiss);
  --ebene-c-band: var(--weiss);
  --schnitt-farbe:   var(--silber-2);
  --schnitt-blend:   multiply;
  --schnitt-deckung: 1;
  --schnittkante:    transparent;
  --haar:      rgba(16, 11, 10, 0.12);

  --ink:       var(--r9);
  --ink-soft:  #534F4F;
  --ink-muted: #706D6C;
  --ghost:     var(--silber-3);
  --akzent:    var(--r5);
  --akzent-schrift: var(--r5);
  --on-akzent: #FFFFFF;

  --silber-poliert: linear-gradient(128deg,
    #F2F2F2 0%, #D4D4D4 34%, #FFFFFF 50%, #B7B7B7 66%, #E8E8E8 100%);
  --schatten: none;

  --hero-grund:   #F2F2F2;
  --hero-akzent:  #921221;
  --hero-wuerfel: #C4C4C4;

  /* Form: Versatz 5 : 4, Winkel 38 Grad, Radius null */
  --u:          clamp(0.5rem, 0.762vw + 0.3143rem, 1rem);
  --versatz-x:  calc(var(--u) * 5);
  --versatz-y:  calc(var(--u) * 4);
  --winkel:     128deg;
  --bild-quer:  5 / 4;
  --bild-hoch:  4 / 5;

  /* Typografie */
  --t-hero:     clamp(2.5rem, 4.952vw + 1.2929rem, 5.75rem);
  --t-satz:     clamp(1.75rem, 2.286vw + 1.1929rem, 3.25rem);
  --t-h3:       clamp(1.25rem, 0.571vw + 1.1107rem, 1.625rem);
  --t-body:     clamp(1.062rem, 0.143vw + 1.0277rem, 1.156rem);
  --t-label:    clamp(0.75rem, 0.048vw + 0.7384rem, 0.7812rem);
  --t-kennzahl: clamp(3rem, 6.095vw + 1.5143rem, 7rem);
  --w-hero: 300; --w-satz: 400; --w-h3: 500; --w-label: 600;
  --tr-hero: -0.026em; --tr-satz: -0.018em; --tr-h3: -0.006em;
  --tr-body: 0em; --tr-label: 0.18em; --tr-kennzahl: -0.030em;
  --lh-hero: 1.00; --lh-satz: 1.08; --lh-body: 1.55; --lh-kennzahl: 0.92;

  /* Rhythmus und Bewegung */
  --sp-sektion: clamp(4rem, 5.333vw + 2.7rem, 7.5rem);
  --dur:        240ms;
  --dur-lang:   640ms;
  --ease:       cubic-bezier(0.23, 1, 0.32, 1);

  /* Mapping auf die Tokennamen, die Hero, Szenen, Navigation und
     Einwilligung in styles.css verwenden */
  --ground:    var(--grund);
  --ground-2:  var(--band);
  --panel:     var(--ebene-c);
  --panel-2:   var(--band);
  --panel-hi:  var(--silber-2);
  --ink-faint: var(--ink-muted);
  --rule:      var(--haar);
  --rule-strong: var(--silber-2);
  --brand:     var(--akzent);
  --brand-text: var(--akzent-schrift);
  --brand-line: rgba(146, 18, 33, 0.5);
  --brand-soft: rgba(146, 18, 33, 0.10);
  --brand-glow: var(--r4);
  --brand-lift: var(--r4);
  --on-brand:  var(--on-akzent);
  --radius:    0px;
  --radius-lg: 0px;
  --modus-bahn: var(--silber-2);
  --modus-rand: var(--silber-3);
  --modus-punkt: var(--ink);
}

/* ── Dunkel: die Schnittmenge glüht Bordeaux tief ───────────────────────── */
[data-theme="dunkel"] {
  color-scheme: dark;
  --grund:     var(--r8);
  --band:      var(--r9);
  --ebene-d:   var(--r9);
  --ebene-c:   var(--r7);
  --ebene-c-band: var(--r7);
  --schnitt:   var(--r6);
  --schnitt-farbe:   var(--r6);
  --schnitt-blend:   normal;
  --schnitt-deckung: 0.85;
  --schnittkante:    rgba(245, 240, 239, 0.12);
  --haar:      rgba(245, 240, 239, 0.12);

  --ink:       var(--r0);
  --ink-soft:  #BCB6B6;
  --ink-muted: #928C8C;
  --ghost:     #5A5453;
  --akzent-schrift: var(--r4);

  --silber-poliert: linear-gradient(128deg,
    #181212 0%, #241C1B 34%, rgba(245, 240, 239, 0.06) 50%, #100B0A 66%, #181212 100%);

  --hero-grund:   #181212;
  --hero-akzent:  #921221;
  --hero-wuerfel: #0E0A09;

  --w-hero: 300; --w-satz: 350; --w-h3: 450;
  --tr-hero: -0.018em; --tr-satz: -0.010em; --tr-h3: 0.002em;
  --tr-body: 0.004em; --tr-kennzahl: -0.022em;
  --lh-hero: 1.04; --lh-body: 1.62;

  --panel-hi:  var(--r6);
  --rule-strong: rgba(245, 240, 239, 0.25);
  --modus-bahn: var(--r7);
  --modus-rand: rgba(245, 240, 239, 0.25);
  --modus-punkt: var(--r0);
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-theme="dunkel"] { --dur: 0.01ms; --dur-lang: 0.01ms; }
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
html { font-synthesis: none; font-optical-sizing: auto; }
body {
  background: var(--grund); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body);
  line-height: var(--lh-body); letter-spacing: var(--tr-body);
  font-variant-numeric: lining-nums tabular-nums;
}
.page { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--font-display); }
p { max-width: 62ch; }
.container { width: min(var(--container, 1200px), calc(100% - 2 * var(--gutter, 24px))); margin-inline: auto; }
::selection { background: var(--r5); color: #fff; }

/* Wechsel als Diagonalwischer bei 38 Grad, von links oben nach rechts unten */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: wischer 560ms var(--ease); }
@keyframes wischer {
  from { clip-path: polygon(0 0, 0 0, 0 0); }
  to   { clip-path: polygon(0 0, 300vmax 0, 0 300vmax); }
}
html.modus-wechsel body, html.modus-wechsel body * {
  transition: background-color 300ms var(--ease), color 300ms var(--ease) !important;
}

/* ── Schrift ────────────────────────────────────────────────────────────── */
.kapitel {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.25rem;
}
/* Das Zeichen vor dem Label: zwei Quadrate, versetzt 5 : 4 */
.kapitel::before {
  content: ""; width: 10px; height: 10px; flex: none; margin-right: 6px;
  background: var(--akzent);
  box-shadow: 5px 4px 0 0 var(--silber-2);
}
[data-theme="dunkel"] .kapitel::before { box-shadow: 5px 4px 0 0 var(--r7); }

/* Kapitelziffer auf der Sektionsgrenze: die obere Hälfte liegt noch in der
   vorigen Sektion, so greift das Kapitel in das vorige wie das C ins D */
.kapitelziffer {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-kennzahl); line-height: 1; letter-spacing: var(--tr-kennzahl);
  color: var(--ghost); margin: calc(var(--t-kennzahl) * -0.5 - var(--sp-sektion)) 0 0.5rem;
  position: relative; z-index: 2; pointer-events: none;
}
.satz {
  font-family: var(--font-display); font-weight: var(--w-satz); font-size: var(--t-satz);
  line-height: var(--lh-satz); letter-spacing: var(--tr-satz); max-width: 20ch; margin: 0 0 1.25rem;
}
.satz--breit { max-width: 26ch; }
/* Die Kursive ist eine Ebene: eigene Zeile, um den Versatz eingerückt */
.satz em, h1 em {
  display: block; font-style: italic; font-weight: inherit; color: var(--akzent-schrift);
  padding-left: var(--versatz-x); line-height: 1.14;
}
.vorspann { font-size: var(--t-body); color: var(--ink-soft); max-width: 58ch; }
.vorspann + .vorspann { margin-top: 1rem; }

/* ── Das Modul: D-Ebene, C-Ebene, Schnittmenge ──────────────────────────── */
.modul {
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: start;
  isolation: isolate;
  --d-spalten: 1 / 8; --c-spalten: 6 / 13;
  --ueberlappung: 28.5714%;       /* zwei von sieben Spalten */
}
.modul--spiegel { --d-spalten: 6 / 13; --c-spalten: 1 / 8; }
.ebene-d {
  grid-column: var(--d-spalten); grid-row: 1; position: relative; z-index: 0;
  background: var(--ebene-d); margin: 0; min-height: 100%;
}
.ebene-c {
  grid-column: var(--c-spalten); grid-row: 1; position: relative; z-index: 1;
  background: var(--ebene-c); margin-top: var(--versatz-y);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem)
           calc(var(--ueberlappung) + clamp(1.25rem, 2.5vw, 2rem));
  clip-path: inset(0 0 0 var(--ueberlappung));
  translate: 0 var(--ebene-shift, 0px);
}
.modul--spiegel .ebene-c {
  padding: clamp(1.5rem, 3vw, 2.5rem) calc(var(--ueberlappung) + clamp(1.25rem, 2.5vw, 2rem))
           clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  clip-path: inset(0 var(--ueberlappung) 0 0);
}
/* Die Schnittmenge: wo C über D liegt. Hell rechnet sie sich, dunkel wird sie gesetzt */
.ebene-d::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  top: var(--versatz-y); bottom: 0; right: 0; width: var(--ueberlappung);
  background: var(--schnitt-farbe); mix-blend-mode: var(--schnitt-blend);
  opacity: var(--schnitt-deckung); border-top: 1px solid var(--schnittkante);
}
.modul--spiegel .ebene-d::after { right: auto; left: 0; }
.ebene-c .kapitel { margin-bottom: 1rem; }
.ebene-c .satz { max-width: 18ch; }

/* Bild als D-Ebene: 5 : 4 quer, 4 : 5 hoch, Bordeaux fällt auf der Diagonale ein */
.figur { overflow: hidden; }
.figur img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: var(--bild-quer); filter: grayscale(1) contrast(1.05) brightness(0.94);
}
.figur--hoch img { aspect-ratio: var(--bild-hoch); }
[data-theme="dunkel"] .figur img { filter: grayscale(1) contrast(1.05) brightness(0.80); }
.figur::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--winkel), var(--r5) 0%, transparent 60%);
  mix-blend-mode: soft-light; opacity: 0.85;
}
[data-theme="dunkel"] .figur::before { opacity: 0.9; }
.figur__nachweis {
  position: absolute; z-index: 3; left: 0; bottom: 0;
  font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--ink-muted);
  background: var(--grund); padding: 4px 8px;
}
.figur__nachweis a { color: inherit; text-decoration: none; }
.figur__nachweis a:hover { color: var(--akzent-schrift); }
.modul--spiegel .figur__nachweis { left: auto; right: 0; }

/* ── Kennzahlen: das Label steht auf der Ziffer ─────────────────────────── */
.kennzahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--versatz-y) var(--versatz-x);
  padding-block: 1rem;
}
.kennzahl { position: relative; padding-bottom: calc(var(--u) * 3); }
.kennzahl__wert {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-kennzahl); line-height: var(--lh-kennzahl); letter-spacing: var(--tr-kennzahl);
  color: var(--ink);
}
.kennzahl__wert sup { font-size: 0.4em; color: var(--akzent-schrift); vertical-align: super; margin-left: 0.05em; }
.kennzahl__label {
  position: absolute; left: calc(var(--u) * 4); bottom: 0; z-index: 1;
  max-width: calc(100% - var(--u) * 4);
  background: var(--ebene-d); color: var(--ink);
  padding: calc(var(--u) * 0.75) calc(var(--u) * 1.25);
  font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: 0.08em;
  line-height: 1.35;
}
[data-theme="dunkel"] .kennzahl__label { background: var(--r7); border-top: 1px solid var(--schnittkante); }

/* ── Die neun Felder: drei Paare mit gemeinsamer Schnittmenge, drei Einzel */
.paare { display: grid; gap: calc(var(--sp-sektion) * 0.5) 0; }
.paar { --ueberlappung: 28.5714%; }
.paar .ebene-d { background: var(--ebene-d); padding: clamp(1.5rem, 3vw, 2.25rem); padding-right: calc(var(--ueberlappung) + 1rem); }
.paar .ebene-c { background: var(--ebene-c-band); }
.paar .ebene-d::after {
  content: attr(data-schnitt);
  display: grid; place-items: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); font-size: var(--t-label); font-weight: var(--w-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink);
}
.feld__nr {
  display: block; font-family: var(--font-display); font-weight: 300; font-size: 2rem;
  line-height: 1; color: var(--ghost); margin-bottom: 0.5rem;
}
.feld__titel { font-family: var(--font-display); font-weight: var(--w-h3); font-size: var(--t-h3); line-height: 1.22; margin: 0 0 0.5rem; }
.feld__text { color: var(--ink-soft); margin: 0; }
.feld__marke { display: inline-block; margin-top: 0.75rem; font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--akzent-schrift); }
[data-theme="dunkel"] .paar .ebene-c .feld__marke { color: var(--r1); }
.einzel { list-style: none; margin: calc(var(--sp-sektion) * 0.5) 0 0; padding: 0; border-top: 1px solid var(--haar); }
.einzel li {
  display: grid; grid-template-columns: 3.5rem minmax(0, 20rem) 1fr auto; gap: 0 clamp(1rem, 2.5vw, 2rem);
  align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--haar);
  transition: translate var(--dur) var(--ease);
}
.einzel li:hover { translate: var(--u) calc(var(--u) * 0.8); }
.einzel .feld__nr { font-size: 1.75rem; margin: 0; }
.einzel .feld__marke { margin: 0; }

/* ── Schritte, Fragen, Listen: Haarlinien, keine Rahmen ─────────────────── */
.schritte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--haar); }
.schritt {
  display: grid; grid-template-columns: 5rem 1fr; gap: 0 clamp(1rem, 3vw, 2.5rem); align-items: start;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0; border-bottom: 1px solid var(--haar);
  transition: translate var(--dur) var(--ease);
}
.schritt:hover { translate: var(--u) calc(var(--u) * 0.8); }
.schritt__nr { font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--ghost); }
.schritt h3 { font-size: var(--t-h3); font-weight: var(--w-h3); margin: 0.2rem 0 0.4rem; }
.schritt p { color: var(--ink-soft); margin: 0; max-width: 58ch; }
.schritt--nein .schritt__nr { color: var(--akzent-schrift); font-weight: 400; }

.fragen { border-top: 1px solid var(--haar); }
.frage { border-bottom: 1px solid var(--haar); }
.frage summary {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem; align-items: center;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--w-h3);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary .marke {
  width: 10px; height: 10px; background: var(--silber-2);
  box-shadow: 5px 4px 0 0 var(--akzent); transition: box-shadow var(--dur) var(--ease);
}
[data-theme="dunkel"] .frage summary .marke { background: var(--r7); }
.frage[open] summary .marke { box-shadow: 0 0 0 0 var(--akzent); background: var(--akzent); }
.frage__antwort { padding: 0 0 1.25rem 2.5rem; color: var(--ink-soft); max-width: 62ch; }

/* ── Platten der Gruppe: zwei Rechtecke, versetzt ───────────────────────── */
.platten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--versatz-y) calc(var(--versatz-x) * 2); padding: var(--versatz-y) 0 0 var(--versatz-x); }
.platte {
  position: relative; isolation: isolate; display: block; text-decoration: none; color: inherit;
  background: var(--ebene-c-band); padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: translate var(--dur) var(--ease);
}
.platte::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ebene-d); translate: calc(var(--versatz-x) * -1) calc(var(--versatz-y) * -1);
  transition: translate var(--dur) var(--ease);
}
.platte::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 0; top: 0; width: var(--versatz-x); height: calc(100% - var(--versatz-y));
  background: var(--schnitt-farbe); mix-blend-mode: var(--schnitt-blend); opacity: var(--schnitt-deckung);
}
.platte:hover::before { translate: calc(var(--versatz-x) * -0.5) calc(var(--versatz-y) * -0.5); }
.platte__status { display: block; font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--akzent-schrift); margin-bottom: 0.75rem; padding-left: var(--versatz-x); }
[data-theme="dunkel"] .platte__status { color: var(--r1); }
.platte h3 { font-size: var(--t-h3); font-weight: var(--w-h3); margin: 0 0 0.5rem; padding-left: var(--versatz-x); }
.platte p { color: var(--ink-soft); margin: 0; padding-left: var(--versatz-x); }
.platte__fuss { display: block; margin-top: 1.25rem; font-size: 0.75rem; color: var(--ink-muted); padding-left: var(--versatz-x); }

/* ── Schaltflächen: zwei Rechtecke, bei Hover rasten sie ein ────────────── */
.btn, .btn--primary, .btn--sm, .header-cta, .nav__mobile-cta {
  position: relative; isolation: isolate; border-radius: 0 !important;
  transition: background-color var(--dur) var(--ease);
}
.btn::before, .header-cta::before, .nav__mobile-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--silber-2); translate: var(--u) calc(var(--u) * 0.8);
  transition: translate var(--dur) var(--ease);
}
[data-theme="dunkel"] .btn::before, [data-theme="dunkel"] .header-cta::before, [data-theme="dunkel"] .nav__mobile-cta::before { background: var(--r6); }
.btn:hover::before, .header-cta:hover::before, .nav__mobile-cta:hover::before { translate: 0 0; }
.btn--primary, .header-cta, .nav__mobile-cta { background: var(--akzent); color: var(--on-akzent); border: 0; }
.btn--outline { border: 0; color: var(--ink); background: transparent; }
.btn--outline::before { background: var(--silber-1); }
[data-theme="dunkel"] .btn--outline::before { background: var(--r7); }
.btn--ghost::before { display: none; }
.arrow-link { color: var(--akzent-schrift); font-weight: 600; letter-spacing: 0.02em; }

/* ── Sektionen: Bandwechsel ohne Linie ──────────────────────────────────── */
.abschnitt { padding-block: var(--sp-sektion); }
.band { background: var(--band); padding-block: var(--sp-sektion); }
.band .ebene-c { background: var(--ebene-c-band); }
.section-head { max-width: 62ch; }
.section-head .vorspann { margin-top: 0.5rem; }

/* Abschluss: Bordeaux als D-Ebene, die polierte Platte als C-Ebene */
.cta-band { background: var(--akzent); padding: var(--sp-sektion) 0 0; color: var(--on-akzent); }
.cta-band__platte {
  position: relative; isolation: isolate; margin-left: var(--versatz-x); margin-bottom: 0;
  background: var(--silber-poliert); color: var(--r9);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  translate: 0 var(--versatz-y);
}
.cta-band__platte::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 0; top: 0; width: var(--versatz-x); height: 100%;
  background: #790F1B; opacity: 0.9;
}
[data-theme="dunkel"] .cta-band__platte { color: var(--r0); }
[data-theme="dunkel"] .cta-band__platte::before { background: var(--r6); }
.cta-band__platte > * { position: relative; z-index: 2; margin-left: var(--versatz-x); }
.cta-band__platte .satz { color: inherit; max-width: 24ch; }
.cta-band__platte .satz em { color: var(--akzent-schrift); }
[data-theme="dunkel"] .cta-band__platte .satz em { color: var(--r4); }
.cta-band__platte .vorspann { color: inherit; opacity: 0.85; }
.cta-band__platte .arrow-link { color: inherit; }
.cta-band__mikro { font-size: 0.8125rem; opacity: 0.8; margin-top: 1rem; }
.site-footer { padding-top: calc(var(--versatz-y) + var(--sp-sektion) * 0.6); }

/* ── Umschalter im Kopf: zwei Quadrate, das vordere gleitet ─────────────── */
.wechsel {
  position: relative; width: 44px; height: 44px; flex: none;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center; margin-right: 0.25rem;
}
.wechsel__hinten, .wechsel__vorn { position: absolute; width: 14px; height: 14px; }
.wechsel__hinten { background: var(--silber-2); translate: 2px 2px; }
.wechsel__vorn { background: var(--akzent); translate: -3px -2px; transition: translate var(--dur) var(--ease); }
[data-theme="dunkel"] .wechsel__hinten { background: var(--r9); }
[data-theme="dunkel"] .wechsel__vorn { background: var(--r7); translate: 7px 6px; }
.wechsel__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wechsel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Szenen und Hero ────────────────────────────────────────────────────── */
.scene { height: 140vh; }
.scene--lang { height: 190vh; }
.scene__copy .kapitel { color: var(--ink-muted); }
.scene__copy .satz { color: var(--ink); margin-inline: auto; }
.scene__copy .satz em { padding-left: 0; display: inline; }
html:not([data-theme="dunkel"]) .scene__sticky::after {
  background: radial-gradient(72% 62% at 50% 46%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 100%);
}
html:not([data-theme="dunkel"]) .hero__sticky {
  background: radial-gradient(70% 80% at 62% 60%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), var(--hero-grund);
}
html:not([data-theme="dunkel"]) .hero__sticky::before {
  background: linear-gradient(100deg, var(--hero-grund) 4%, rgba(242, 242, 242, 0.88) 26%, rgba(242, 242, 242, 0.5) 44%, rgba(242, 242, 242, 0) 66%);
}
.hero h1 { font-weight: var(--w-hero); font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-hero); max-width: 16ch; }
.hero__trust { font-size: 0.875rem; color: var(--ink-muted); }
.hero__trust b { color: var(--ink); font-weight: 600; }

/* ── Einrasten: die Ebenen kommen von zwei Seiten auf der Diagonale ─────── */
html.js [data-reveal] { opacity: 0; translate: calc(var(--u) * 1.25) var(--u); }
html.js [data-reveal].is-visible { opacity: 1; translate: 0 0; transition: opacity var(--dur-lang) var(--ease), translate var(--dur-lang) var(--ease); }
html.js .modul[data-reveal] { translate: 0 0; opacity: 1; }
html.js .modul[data-reveal] .ebene-d { transform: translate(calc(var(--versatz-x) * -1), calc(var(--versatz-y) * -1)); opacity: 0; }
html.js .modul[data-reveal] .ebene-c { transform: translate(var(--versatz-x), var(--versatz-y)); opacity: 0; }
html.js .modul[data-reveal] .ebene-d::after { opacity: 0; }
html.js .modul[data-reveal].is-visible .ebene-d,
html.js .modul[data-reveal].is-visible .ebene-c { transform: none; opacity: 1; transition: transform var(--dur-lang) var(--ease), opacity var(--dur-lang) var(--ease); }
html.js .modul[data-reveal].is-visible .ebene-d::after { opacity: var(--schnitt-deckung); transition: opacity 260ms var(--ease) 380ms; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .modul[data-reveal] .ebene-d, html.js .modul[data-reveal] .ebene-c { opacity: 1; translate: 0 0; transform: none; }
  html.js .modul[data-reveal] .ebene-d::after { opacity: var(--schnitt-deckung); }
  ::view-transition-new(root) { animation: none; clip-path: none; }
}

/* ── Fassungsumschalter, nur Vorschau ───────────────────────────────────── */
.fassung {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 4px;
  background: color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--haar);
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.fassung__titel { padding: 0 8px; color: var(--ink-muted); }
.fassung a { padding: 7px 10px; color: var(--ink-soft); text-decoration: none; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.fassung a:hover { background: var(--band); color: var(--ink); }
.fassung a[aria-current="true"] { background: var(--akzent); color: #fff; }
.scroll-top, [data-scrolltop] { display: none !important; }

/* ── Logo je Grund ──────────────────────────────────────────────────────── */
.logo--auf-dunkel { display: none; }
[data-theme="dunkel"] .logo--auf-hell { display: none; }
[data-theme="dunkel"] .logo--auf-dunkel { display: inline-block; }

/* ═══════════════════════════════════════════════════════════════════════════
   Unterseiten: die Bausteine aus styles.css in die Sprache der Verschränkung
   ═══════════════════════════════════════════════════════════════════════════ */
.pagehead { border-bottom: 0; }
html:not([data-theme="dunkel"]) .pagehead::after {
  background: linear-gradient(to top, var(--grund) 4%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0.08) 100%);
}
.pagehead h1 { font-weight: var(--w-hero); letter-spacing: var(--tr-hero); }
.pagehead p { color: var(--ink-soft); }
.crumb, .crumb a { color: var(--ink-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-muted);
}
.eyebrow::before { content: ""; width: 10px; height: 10px; flex: none; margin-right: 6px; background: var(--akzent); box-shadow: 5px 4px 0 0 var(--silber-2); }
[data-theme="dunkel"] .eyebrow::before { box-shadow: 5px 4px 0 0 var(--r7); }
.section-head h2, .section h2:not(.satz) { font-weight: var(--w-satz); letter-spacing: var(--tr-satz); }

/* Fakten: Kennzahl mit aufliegendem Label */
.facts { gap: var(--versatz-y) var(--versatz-x); background: transparent; border: 0; }
.fact { background: transparent; padding: 0 0 calc(var(--u) * 3); position: relative; gap: 0; }
.fact b { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 300; color: var(--ink); letter-spacing: var(--tr-kennzahl); line-height: 1; }
.fact p {
  position: absolute; left: calc(var(--u) * 3); bottom: 0; max-width: calc(100% - var(--u) * 3);
  background: var(--ebene-d); color: var(--ink); padding: calc(var(--u) * 0.6) var(--u);
  font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: 0.06em; line-height: 1.35;
}
[data-theme="dunkel"] .fact p { background: var(--r7); border-top: 1px solid var(--schnittkante); }

/* Neun Felder als Doppelplatten */
.tiles { gap: calc(var(--versatz-y) * 1.5) calc(var(--versatz-x) * 1.5); background: transparent; border: 0; padding: var(--versatz-y) 0 0 var(--versatz-x); }
.tile { background: var(--ebene-c-band); border: 0; isolation: isolate; overflow: visible; padding: clamp(1.5rem, 3vw, 2.25rem); transition: translate var(--dur) var(--ease); }
.section--raised .tile, .band .tile { background: var(--grund); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ebene-d); translate: calc(var(--versatz-x) * -1) calc(var(--versatz-y) * -1); transition: translate var(--dur) var(--ease); }
.tile::after { content: ""; position: absolute; z-index: 1; pointer-events: none; left: 0; top: 0; width: var(--versatz-x); height: calc(100% - var(--versatz-y)); background: var(--schnitt-farbe); mix-blend-mode: var(--schnitt-blend); opacity: var(--schnitt-deckung); }
.tile:hover::before { translate: calc(var(--versatz-x) * -0.5) calc(var(--versatz-y) * -0.5); }
.tile > * { padding-left: var(--versatz-x); }
.tile__light { display: none; }
.tile__mark { border: 0; padding: 0; font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--akzent-schrift); }
[data-theme="dunkel"] .tile__mark { color: var(--r1); }
.tile__mark--demo { color: var(--ink-muted); }
.tile__more { letter-spacing: var(--tr-label); color: var(--akzent-schrift); }

/* Schritte */
.steps { gap: 0; background: transparent; border: 0; border-top: 1px solid var(--haar); }
.step { background: transparent; border-bottom: 1px solid var(--haar); padding-inline: 0; grid-template-columns: 5rem 1fr; }
.step__num { font-weight: 300; font-size: 2.5rem; color: var(--ghost); }

/* Bild-Text-Paare: das Bild ist D-Ebene, der Text schneidet es an */
.duo { align-items: start; gap: 0; grid-template-columns: repeat(12, 1fr); isolation: isolate; }
.duo__view { grid-column: 6 / 13; grid-row: 1; position: relative; z-index: 0; height: auto; aspect-ratio: var(--bild-quer); background: var(--ebene-d); }
.duo__view canvas { width: 100%; height: 100%; }
.duo__view::after { content: ""; position: absolute; z-index: 2; pointer-events: none; top: var(--versatz-y); bottom: 0; left: 0; width: 28.5714%; background: var(--schnitt-farbe); mix-blend-mode: var(--schnitt-blend); opacity: var(--schnitt-deckung); border-top: 1px solid var(--schnittkante); }
.duo__copy { grid-column: 1 / 8; grid-row: 1; position: relative; z-index: 1; background: var(--ebene-c); margin-top: var(--versatz-y); padding: clamp(1.5rem, 3vw, 2.5rem) calc(28.5714% + 1.25rem) clamp(1.5rem, 3vw, 2.5rem) 0; clip-path: inset(0 28.5714% 0 0); }
.band .duo__copy, .section--raised .duo__copy { background: var(--ebene-c-band); }
.duo--rev .duo__view { grid-column: 1 / 8; }
.duo--rev .duo__view::after { left: auto; right: 0; }
.duo--rev .duo__copy { grid-column: 6 / 13; order: 0; padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem) calc(28.5714% + 1.25rem); clip-path: inset(0 0 0 28.5714%); }
.founder__portrait { position: relative; }
.founder__portrait::after { content: ""; position: absolute; inset: var(--versatz-y) 0 0 var(--versatz-x); z-index: -1; background: var(--ebene-d); }
.founder__portrait img { filter: grayscale(1) contrast(1.05); }

.section--raised { background: var(--band); border-block: 0; }
.consent { border-radius: 0; }

/* ── Schmale Breiten: die Ebenen stapeln sich, der Versatz bleibt ───────── */
@media (max-width: 900px) { .kennzahlen { grid-template-columns: 1fr 1fr; } .platten { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .modul, .duo { grid-template-columns: 1fr; }
  .ebene-d, .modul--spiegel .ebene-d, .duo__view, .duo--rev .duo__view { grid-column: 1; grid-row: 1; }
  .ebene-c, .modul--spiegel .ebene-c, .duo__copy, .duo--rev .duo__copy {
    grid-column: 1; grid-row: 2; margin: calc(var(--versatz-y) * -2) 0 0 var(--versatz-x);
    padding: calc(var(--versatz-y) * 2 + 1rem) 1.25rem 1.5rem 1.25rem; clip-path: inset(calc(var(--versatz-y) * 2) 0 0 0);
  }
  .ebene-d::after, .modul--spiegel .ebene-d::after, .duo__view::after, .duo--rev .duo__view::after {
    top: auto; bottom: 0; left: var(--versatz-x); right: 0; width: auto; height: calc(var(--versatz-y) * 2); border-top: 0;
  }
  .paar .ebene-d { padding-right: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: calc(var(--versatz-y) * 2 + 1rem); }
  .paar .ebene-d::after { writing-mode: horizontal-tb; transform: none; }
  .einzel li { grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto auto; }
  .einzel .feld__nr { grid-row: 1 / 4; }
  .einzel .feld__titel, .einzel .feld__text, .einzel .feld__marke { grid-column: 2; }
  .scene { height: 120vh; } .scene--lang { height: 150vh; }
  .kapitelziffer { font-size: clamp(2.5rem, 8vw, 4rem); margin-top: calc(-1.25rem - var(--sp-sektion)); }
  .wechsel { margin-right: 0; }
  .cta-band__platte { margin-left: calc(var(--u) * 2); }
}
@media (max-width: 480px) { .kennzahlen { grid-template-columns: 1fr; } }

/* ── Korrekturen nach der ersten Sichtung ───────────────────────────────────
   Ein Kind mit negativem z-index liegt über dem Grund seines Elternelements.
   Deshalb bekommen Schaltfläche, Platte und Kachel keinen eigenen Grund:
   ::before ist die hintere Platte (z -2), ::after die vordere (z -1),
   der Inhalt liegt darüber. */
.btn, .btn--primary, .header-cta, .nav__mobile-cta, .platte, .tile, .section--raised .tile, .band .tile {
  background: transparent;
}
.btn::after, .header-cta::after, .nav__mobile-cta::after, .platte::after, .tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  width: auto; height: auto; top: 0; left: 0;
  background: var(--akzent); mix-blend-mode: normal; opacity: 1; border: 0;
  transition: none;
}
.btn::before, .header-cta::before, .nav__mobile-cta::before, .platte::before, .tile::before { z-index: -2; }
.btn--outline::after { background: transparent; box-shadow: inset 0 0 0 1px var(--silber-2); }
[data-theme="dunkel"] .btn--outline::after { box-shadow: inset 0 0 0 1px rgba(245, 240, 239, 0.25); }
.btn--ghost::after { display: none; }
.platte::after, .tile::after { background: var(--ebene-c-band); }
.section--raised .tile::after { background: var(--grund); }
.platte__status, .platte h3, .platte p, .platte__fuss, .tile > * { padding-left: 0; }

/* Die Kapitelziffer ragt eine halbe Höhe in die vorige Sektion. Die vorige
   Sektion lässt unten entsprechend Luft, sonst liegt die Ziffer auf Text. */
.abschnitt, .band { padding-bottom: calc(var(--sp-sektion) + var(--t-kennzahl) * 0.5); }
.scene + .band, .scene + .abschnitt { padding-top: var(--sp-sektion); }
.ebene-c .satz { max-width: 22ch; }
@media (max-width: 860px) {
  .abschnitt, .band { padding-bottom: calc(var(--sp-sektion) + 1.5rem); }
}

/* Die Kapitelziffer als absolut gesetztes Element: ein negativer Rand
   kollabierte mit dem Container und zog den ganzen Abschnitt nach oben. */
.abschnitt, .band { position: relative; padding-block: calc(var(--sp-sektion) + var(--t-kennzahl) * 0.5); }
.kapitelziffer {
  position: absolute; margin: 0; top: calc(var(--t-kennzahl) * -0.5);
  left: max(var(--gutter, 24px), calc((100% - var(--container, 1200px)) / 2));
}
.scene + .band, .scene + .abschnitt { padding-top: calc(var(--sp-sektion) + var(--t-kennzahl) * 0.5); }
/* Kacheln: beide Platten sichtbar, die vordere in Silber 1 */
.tile::after { background: var(--silber-1); }
[data-theme="dunkel"] .tile::after { background: var(--r7); }
@media (max-width: 860px) {
  .abschnitt, .band { padding-block: calc(var(--sp-sektion) + 1.5rem); }
  .kapitelziffer { top: -1.25rem; }
}
/* Oben reicht der normale Abstand: die Ziffer ragt nur eine halbe Höhe herein */
.abschnitt, .band, .scene + .band, .scene + .abschnitt { padding-top: var(--sp-sektion); }

/* styles.css kennt .band als Bildband mit fester Höhe und overflow hidden.
   Hier ist .band ein Abschnitt: er wächst mit seinem Inhalt. */
.band { height: auto; min-height: 0; max-height: none; overflow: visible; }

/* ── Keine Wortbetonung in Überschriften: keine Kursive, keine Akzentfarbe ─
   Ein farbiges oder kursives Wort mitten in der Zeile ist ein Erkennungs-
   zeichen generierter Seiten. Betonung entsteht hier nur aus Größe, Gewicht
   und Weißraum. */
h1 em, h2 em, h3 em, .satz em, .scene__copy .satz em, .cta-band em, .cta-band__platte .satz em {
  display: inline; font-style: normal; font-weight: inherit; color: inherit;
  padding: 0; margin: 0; line-height: inherit;
}

/* Labels ohne Vorzeichen, der Kopf-Knopf ohne zweite Platte */
.kapitel::before, .eyebrow::before { display: none; }
.header-cta::before, .nav__mobile-cta::before { display: none; }
.header-cta::after, .nav__mobile-cta::after { background: var(--akzent); }
/* Umschalter: das Quadratpaar in einem Feld, daneben die Beschriftung */
.wechsel { width: auto; padding: 0 0.5rem; display: inline-flex; align-items: center; gap: 8px; }
.wechsel__feld { position: relative; width: 22px; height: 22px; flex: none; }
.wechsel__hinten, .wechsel__vorn { width: 12px; height: 12px; }
.wechsel__hinten { left: 7px; top: 6px; translate: 0 0; }
.wechsel__vorn { left: 2px; top: 2px; translate: 0 0; }
[data-theme="dunkel"] .wechsel__vorn { translate: 10px 8px; }
.wechsel__text {
  position: static; width: auto; height: auto; overflow: visible; clip: auto;
  font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-muted); line-height: 1;
}
@media (max-width: 1180px) { .wechsel__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.hero h1 { max-width: 15ch; }
.satz { max-width: 24ch; }
.satz--breit { max-width: 30ch; }

/* ── Formulare ohne Kasten: nur Felder und Haarlinien ───────────────────── */
.formcard { background: transparent; border: 0; padding: 0; box-shadow: none; }
.formcard::before { display: none; }
.formstep { border-bottom: 1px solid var(--haar); }
.formstep b { color: var(--ink-muted); font-weight: 300; }

/* ── Markenkarte der Gruppenseiten: auf hellem Grund kein dunkler Schleier */
html:not([data-theme="dunkel"]) .brand-card::after {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 26%,
    rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0) 88%);
}
.brand-card { border: 0; }
.brand-card h3, .brand-card p, .brand-card .tag { text-shadow: none; }
.brand-card h3 { color: var(--ink); }
.brand-card p { color: var(--ink-soft); }
.brand-card .tag {
  background: transparent; padding: 0; border-radius: 0;
  font-size: var(--t-label); font-weight: var(--w-label, 600); letter-spacing: var(--tr-label, 0.08em);
  text-transform: uppercase; color: var(--akzent-schrift);
}
/* Statement: kein hervorgehobenes Wort */
.statement .w.accent.lit, .statement .w.accent { color: inherit; font-style: normal; }

/* Fakten ohne Zahl: das Label liegt nur auf Ziffern, sonst steht es darunter */
.facts:not([data-counters]) .fact { padding-bottom: 0; }
.facts:not([data-counters]) .fact b { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.25; }
.facts:not([data-counters]) .fact p {
  position: static; max-width: none; background: transparent; padding: 0; margin-top: 0.5rem;
  font-size: var(--t-body); font-weight: 400; letter-spacing: 0; color: var(--ink-soft); border: 0;
}

/* Gründerporträt: bis Falko ein Foto liefert, steht hier eine gekennzeichnete
   Fläche. Kein Stockfoto, das als Person ausgegeben wird. */
.founder__platz {
  display: grid; place-items: center; align-content: center; gap: 0.35rem;
  aspect-ratio: 4 / 5; width: 100%; background: var(--band); color: var(--ink-muted);
  font-size: var(--t-label); font-weight: var(--w-label, 600); letter-spacing: var(--tr-label, 0.08em);
  text-transform: uppercase; text-align: center;
}
.founder__platz b { font-family: var(--font-display); font-weight: 300; font-size: var(--t-satz); letter-spacing: var(--tr-satz); text-transform: none; color: var(--ink); }

/* Kein Lichtschein am Zeiger auf hellem Grund, kein farbiges Plus an Kennzahlen */
html:not([data-theme="dunkel"]) .pointer-light { display: none; }
.zahl__wert sup, .kennzahl__wert sup, .fact b sup { color: inherit; }

/* Gespiegelte Paare: die Schnittmenge liegt links an der D-Platte, der Text
   der Platte weicht ihr aus (vorher lag sie auf dem Titel) */
.modul--spiegel.paar .ebene-d {
  padding-left: calc(var(--ueberlappung) + 1rem);
  padding-right: clamp(1.5rem, 3vw, 2.25rem);
}

/* Die Phasen der Hero-Animation stehen im Fluss über dem Kicker, nicht mehr
   absolut oben, wo sie auf die Überschrift fielen */
.hero__phase { position: static; max-width: none; margin: 0 0 0.75rem; padding: 0; pointer-events: none; }