/* ═══════════════════════════════════════════════════════════════════════════
   Fassung 9, Konzept „Stamm und Haar"
   Aus dem Logo gelesen: Das D besteht aus einem schweren Stamm und zwei
   Haarstrichen, Verhältnis 2,4 : 1. Die Seite kennt nur zwei Linien: den
   Stamm, der trägt und immer senkrecht steht, und das Haar, das gliedert
   und immer waagerecht liegt. Alles andere ist Schrift und Weißraum.

   Die eine Regel: senkrecht dick, waagerecht dünn, ohne Ausnahme.
   Es gibt keine Fläche, mit genau drei Ausnahmen: das Stahlband, die
   Primärschaltfläche, Formularfelder. Radius null. Tiefe null.

   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.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 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: Stahl, kühl, Hue 250 ─────────────────────────────────────────── */
:root {
  color-scheme: light;
  --weiss:    #FFFFFF;
  --stahl-1:  #E9EBEE;
  --stahl-2:  #D4D8DC;
  --stahl-3:  #B3B8BE;
  --stahl-4:  #8D9399;

  --grund:    var(--weiss);
  --band:     var(--stahl-1);
  --stamm-farbe: var(--r5);
  --stamm-licht: transparent;
  --haar:     var(--stahl-3);
  --haar-stark: var(--stahl-4);
  --haar-band: var(--stahl-4);
  --feld:     var(--weiss);

  --ink:       var(--r9);
  --ink-soft:  #534F4F;
  --ink-muted: #666362;
  --ghost:     var(--stahl-4);
  --akzent:    var(--r5);
  --akzent-schrift: var(--r5);
  --on-akzent: #FFFFFF;

  --blech: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 48%, transparent 100%),
           repeating-linear-gradient(180deg, #E9EBEE 0 1px, #D4D8DC 1px 2px);
  --schatten: none;

  --hero-grund:   #F3F4F6;
  --hero-akzent:  #921221;
  --hero-wuerfel: #C2C6CB;

  /* Form: Stamm 0,16 der Größe, Keil 36 Grad, Radius null */
  --stamm:      0.16em;
  --stamm-fix:  clamp(0.375rem, 0.190vw + 0.3286rem, 0.5rem);
  --keil-btn:   24px;
  --keil-bild:  32px;
  --radius:     0px;
  --bild-balken: 21 / 9;
  --bild-stamm:  2 / 3;

  /* Typografie: sehr groß und leicht gegen sehr klein und fett */
  --t-hero:     clamp(2.75rem, 6.476vw + 1.1714rem, 7rem);
  --t-satz:     clamp(1.875rem, 2.857vw + 1.1786rem, 3.75rem);
  --t-h3:       clamp(1.188rem, 0.381vw + 1.0946rem, 1.438rem);
  --t-body:     clamp(1rem, 0.143vw + 0.9652rem, 1.094rem);
  --t-label:    clamp(0.6875rem, 0.095vw + 0.6643rem, 0.75rem);
  --t-kennzahl: clamp(4rem, 7.619vw + 2.1429rem, 9rem);
  --w-hero: 300; --w-satz: 300; --w-h3: 500; --w-label: 700;
  --tr-hero: -0.032em; --tr-satz: -0.022em; --tr-h3: -0.004em;
  --tr-body: 0em; --tr-label: 0.22em; --tr-kennzahl: -0.035em;
  --lh-hero: 0.98; --lh-satz: 1.06; --lh-body: 1.50; --lh-kennzahl: 0.90;

  /* Rhythmus und Bewegung: Strichführung */
  --sp-sektion: clamp(3.5rem, 3.810vw + 2.5714rem, 6rem);
  --dur:        240ms;
  --dur-haar:   360ms;
  --dur-schrift: 120ms;
  --dur-lang:   520ms;
  --ease:       cubic-bezier(0.77, 0, 0.175, 1);

  /* Mapping auf die Tokennamen aus styles.css */
  --ground:    var(--grund);
  --ground-2:  var(--band);
  --panel:     var(--feld);
  --panel-2:   var(--band);
  --panel-hi:  var(--stahl-2);
  --ink-faint: var(--ink-muted);
  --rule:      var(--haar);
  --rule-strong: var(--haar-stark);
  --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-lg: 0px;
  --modus-bahn: var(--stahl-2);
  --modus-rand: var(--stahl-3);
  --modus-punkt: var(--ink);
}

/* ── Dunkel: das Haar ist das Silber, die Seite ist Druck auf Karton ────── */
[data-theme="dunkel"] {
  color-scheme: dark;
  --grund:    var(--r9);
  --band:     var(--r8);
  --stamm-licht: var(--r4);
  --haar:     rgba(245, 240, 239, 0.16);
  --haar-stark: rgba(245, 240, 239, 0.32);
  --haar-band: rgba(245, 240, 239, 0.16);
  --feld:     var(--r7);

  --ink:       var(--r0);
  --ink-soft:  #B9B4B3;
  --ink-muted: #8E8988;
  --ghost:     #676261;
  --akzent-schrift: var(--r4);

  --blech: linear-gradient(90deg, transparent 0%, rgba(245, 240, 239, 0.04) 48%, transparent 100%),
           repeating-linear-gradient(180deg, rgba(245, 240, 239, 0.06) 0 1px, transparent 1px 2px);

  --hero-grund:   #100B0A;
  --hero-wuerfel: #0E0A09;

  --tr-hero: -0.024em; --tr-satz: -0.014em; --tr-h3: 0.004em; --tr-body: 0.004em; --tr-kennzahl: -0.026em;
  --lh-hero: 1.02; --lh-body: 1.58;

  --panel-hi:  var(--r6);
  --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-haar: 0.01ms; --dur-schrift: 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: 60ch; }
.container { width: min(var(--container, 1200px), calc(100% - 2 * var(--gutter, 24px))); margin-inline: auto; }
::selection { background: var(--r5); color: #fff; }
/* Der Wechsel ist ein harter Schnitt. Ein Druckbogen blendet nicht. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* ── Der Stamm ──────────────────────────────────────────────────────────────
   Bordeaux, senkrecht, 0,16 der Größe dessen, was er begleitet, unten mit
   einem Keil bei 36 Grad. Auf Dunkel mit 1 px Lichtkante rechts. */
.stamm, .satz, .hero h1, .kennzahl, .figur, .felder, .schritte, .platten, .fragen, .pagehead h1, .duo__view, .founder__portrait, .tiles, .steps, .facts {
  position: relative;
}
.satz::before, .hero h1::before, .pagehead h1::before, .kennzahl::before,
.felder::before, .schritte::before, .platten::before, .fragen::before,
.figur::before, .duo__view::before, .founder__portrait::before, .tiles::before, .steps::before, .facts::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  width: var(--stamm-breite, var(--stamm-fix));
  background: var(--stamm-farbe);
  box-shadow: inset -1px 0 0 var(--stamm-licht);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--stamm-breite, var(--stamm-fix)) * 0.727), 0 100%);
  transform-origin: top;
}

/* Schrift mit Stamm: die Stammbreite folgt der Schriftgröße */
.kapitel {
  display: block; font-size: var(--t-label); font-weight: var(--w-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; line-height: 1.3;
  color: var(--akzent-schrift); margin-bottom: 1rem;
}
.satz {
  --stamm-breite: var(--stamm);
  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: 22ch; margin: 0 0 1.25rem; padding-left: calc(var(--stamm) + 0.45em);
}
.satz::before { top: 0.08em; bottom: 0.1em; }
.satz--breit { max-width: 28ch; }
.satz em, h1 em { font-style: normal; font-weight: inherit; color: var(--akzent-schrift); }
.vorspann { font-size: var(--t-body); color: var(--ink-soft); max-width: 60ch; }
.vorspann + .vorspann { margin-top: 1rem; }
.stamm-satz { padding-left: calc(var(--stamm) + 0.45em); }

/* Das Haar: 1 px, waagerecht, nie allein */
.haar { border: 0; border-top: 1px solid var(--haar); margin: 0; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero h1 {
  --stamm-breite: var(--stamm);
  font-weight: var(--w-hero); font-size: var(--t-hero); line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero); max-width: 14ch; padding-left: calc(var(--stamm) + 0.4em);
}
.hero h1::before { top: 0.06em; bottom: 0.08em; }
.hero__trust { font-size: 0.8125rem; color: var(--ink-muted); letter-spacing: 0.02em; }
.hero__trust b { color: var(--ink); font-weight: 700; }
html:not([data-theme="dunkel"]) .hero__sticky {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 55%, rgba(255, 255, 255, 0) 80%), var(--hero-grund);
}
html:not([data-theme="dunkel"]) .hero__sticky::before {
  background: linear-gradient(100deg, var(--hero-grund) 4%, rgba(243, 244, 246, 0.9) 26%, rgba(243, 244, 246, 0.5) 44%, rgba(243, 244, 246, 0) 66%);
}
.hero__phase span.on { color: var(--akzent-schrift); }

/* ── Kennzahlen: die Ziffer steht, das Haar zieht darunter durch ────────── */
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.kennzahl { --stamm-breite: 0.16em; font-size: var(--t-kennzahl); padding-left: 0.3em; }
.kennzahl::before { top: 0.05em; bottom: 0.14em; }
.kennzahl__kicker {
  display: block; 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(--akzent-schrift); line-height: 1.3;
  margin-bottom: 0.15em; font-variant-numeric: normal;
}
.kennzahl__wert {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: 1em; line-height: var(--lh-kennzahl); letter-spacing: var(--tr-kennzahl);
  color: var(--ink); padding-bottom: 0.08em; border-bottom: 1px solid var(--haar-stark);
}
.kennzahl__label { display: block; font-size: var(--t-body); color: var(--ink-muted); margin-top: 0.75rem; line-height: 1.4; font-size: 0.9375rem; }
.band .kennzahl__wert { border-bottom-color: var(--haar-band); }

/* ── Bilder: Balken 21 : 9 oder Stammformat 2 : 3, Stamm links, Keil rechts unten */
.figur { margin: 0; overflow: hidden; --stamm-breite: var(--stamm-fix); }
.figur img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: var(--bild-balken); filter: grayscale(1) contrast(1.15) brightness(0.95);
}
.figur--stamm img { aspect-ratio: var(--bild-stamm); }
[data-theme="dunkel"] .figur img { filter: grayscale(1) contrast(1.15) brightness(0.80); }
.figur__bild {
  position: relative; display: block; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--keil-bild) * 0.727), calc(100% - var(--keil-bild)) 100%, 0 100%);
}
.figur__bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--r5) 0%, transparent 45%);
  mix-blend-mode: soft-light; opacity: 0.7;
}
[data-theme="dunkel"] .figur__bild::after { opacity: 0.85; }
.figur figcaption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.5; }
.figur figcaption b { display: block; font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink); margin-bottom: 0.2rem; }
.figur figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--haar); }
.figur figcaption a:hover { border-bottom-color: var(--akzent); color: var(--akzent-schrift); }

/* Zwei Spalten: Text und Stammformat */
.zweispalt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.zweispalt--bild-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.zweispalt--bild-links > .figur { order: -1; }

/* ── Die neun Felder: neun Zeilen, ein Stamm, Haare dazwischen ──────────── */
.felder { list-style: none; margin: 0; padding: 0 0 0 calc(var(--stamm-fix) + 1.5rem); --stamm-breite: var(--stamm-fix); }
.feld {
  display: grid; grid-template-columns: 3.5rem minmax(0, 20rem) 1fr auto; gap: 0 clamp(1rem, 2.5vw, 2rem);
  align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--haar); position: relative;
  transition: padding-left 160ms var(--ease);
}
.feld:first-child { border-top: 1px solid var(--haar); }
.feld::before {
  content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px;
  background: var(--stamm-farbe); transform: scaleY(0); transform-origin: top;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2px), 0 100%);
  transition: transform 160ms var(--ease);
}
.feld:hover { padding-left: 15px; }
.feld:hover::before { transform: scaleY(1); }
.feld__nr { font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--ghost); }
.feld__titel { font-family: var(--font-display); font-weight: var(--w-h3); font-size: var(--t-h3); line-height: 1.25; margin: 0; }
.feld__text { color: var(--ink-soft); margin: 0; font-size: 0.9375rem; }
.feld__marke { font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--akzent-schrift); white-space: nowrap; }

/* ── Schritte: Zeilen mit Ghost-Ziffer ──────────────────────────────────── */
.schritte { list-style: none; margin: 0; padding: 0 0 0 calc(var(--stamm-fix) + 1.5rem); --stamm-breite: var(--stamm-fix); }
.schritt {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 clamp(1rem, 3vw, 2.5rem); align-items: start;
  padding: 1.25rem 0; border-bottom: 1px solid var(--haar);
}
.schritt:first-child { border-top: 1px solid var(--haar); }
.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); }

/* ── Fragen ─────────────────────────────────────────────────────────────── */
.fragen { padding-left: calc(var(--stamm-fix) + 1.5rem); --stamm-breite: var(--stamm-fix); border-top: 1px solid var(--haar); }
.frage { border-bottom: 1px solid var(--haar); }
.frage summary {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: 1rem; align-items: center;
  padding: 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: 3px; height: 14px; background: var(--haar-stark); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2px), 0 100%); transition: background-color 120ms; }
.frage[open] summary .marke { background: var(--stamm-farbe); }
.frage__antwort { padding: 0 0 1.25rem 2.25rem; color: var(--ink-soft); max-width: 60ch; }

/* ── Gruppe: zwei Zeilen am Stamm ───────────────────────────────────────── */
.platten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); padding-left: calc(var(--stamm-fix) + 1.5rem); --stamm-breite: var(--stamm-fix); }
.platte { display: block; text-decoration: none; color: inherit; padding: 1.25rem 0; border-top: 1px solid var(--haar); border-bottom: 1px solid var(--haar); }
.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.5rem; }
.platte h3 { font-size: var(--t-h3); font-weight: var(--w-h3); margin: 0 0 0.4rem; }
.platte p { color: var(--ink-soft); margin: 0; }
.platte__fuss { display: block; margin-top: 1rem; font-size: 0.75rem; color: var(--ink-muted); }
.platte:hover h3 { color: var(--akzent-schrift); }

/* ── Schaltflächen: Bordeaux mit Keil, oder Schrift mit Stamm ───────────── */
.btn, .btn--primary, .btn--sm, .header-cta, .nav__mobile-cta {
  border-radius: 0 !important; border: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--keil-btn) * 0.727), calc(100% - var(--keil-btn)) 100%, 0 100%);
  transition: clip-path 160ms var(--ease), background-color var(--dur) var(--ease);
}
.btn:hover, .header-cta:hover, .nav__mobile-cta:hover {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--keil-btn) * 1.5 * 0.727), calc(100% - var(--keil-btn) * 1.5) 100%, 0 100%);
}
.btn--primary, .header-cta, .nav__mobile-cta { background: var(--akzent); color: var(--on-akzent); }
.btn--sm, .header-cta { --keil-btn: 16px; }
.btn--outline, .btn--ghost {
  background: transparent; color: var(--ink); clip-path: none; padding-left: 0;
  border-left: 3px solid var(--stamm-farbe); padding-left: 0.9rem;
}
.btn--outline:hover, .btn--ghost:hover { clip-path: none; color: var(--akzent-schrift); }
.arrow-link { color: var(--akzent-schrift); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; }
.arrow-link svg { width: 12px; height: 12px; }

/* ── Sektionen, Stahlband ───────────────────────────────────────────────── */
.abschnitt { padding-block: var(--sp-sektion); }
.band {
  background: var(--blech); background-color: var(--band); padding-block: var(--sp-sektion);
  border-top: 1px solid var(--haar-band); border-bottom: 1px solid var(--haar-band);
  transform: translateZ(0);
}
.section-head { max-width: 62ch; }
.section-head .vorspann { margin-top: 0.5rem; }

/* Abschluss: Überschrift am Stamm, ein Haar oben, keine Fläche */
.cta-band { padding-block: var(--sp-sektion); }
.cta-band .container { border-top: 1px solid var(--haar); padding-top: var(--sp-sektion); }
.cta-band .satz { max-width: 26ch; }
.cta-band__mikro { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 1rem; }

/* ── Umschalter: ein Haar, darauf ein Stamm, links hell, rechts dunkel ──── */
.wechsel {
  position: relative; height: 44px; flex: none; border: 0; background: transparent; cursor: pointer;
  padding: 0 0.5rem; display: inline-flex; align-items: center; gap: 8px; margin-right: 0.25rem;
  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-muted);
}
.wechsel__haar { position: relative; width: 32px; height: 1px; background: var(--haar-stark); }
.wechsel__stamm {
  position: absolute; left: 0; bottom: 0; width: 3px; height: 14px; background: var(--stamm-farbe);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2px), 0 100%);
  transition: left var(--dur) var(--ease);
}
[data-theme="dunkel"] .wechsel__stamm { left: 29px; box-shadow: inset -1px 0 0 var(--stamm-licht); }
.wechsel__hell, .wechsel__dunkel { line-height: 1; }
.wechsel__hell { color: var(--ink); }
[data-theme="dunkel"] .wechsel__hell { color: var(--ink-muted); }
[data-theme="dunkel"] .wechsel__dunkel { color: var(--ink); }
.wechsel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Szenen ─────────────────────────────────────────────────────────────── */
.scene { height: 140vh; }
.scene--lang { height: 190vh; }
.scene__copy .kapitel { color: var(--akzent-schrift); }
.scene__copy .satz { color: var(--ink); margin-inline: auto; padding-left: 0; }
.scene__copy .satz::before { display: none; }
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%);
}

/* ── Strichführung: erst der Stamm, dann das Haar, dann steht der Text ──── */
html.js [data-reveal] { opacity: 1; }
html.js [data-reveal] > *:not(.figur), html.js [data-reveal] .satz, html.js [data-reveal] .kapitel { opacity: 0; transition: opacity var(--dur-schrift) linear 400ms; }
html.js [data-reveal].is-visible > *, html.js [data-reveal].is-visible .satz, html.js [data-reveal].is-visible .kapitel { opacity: 1; }
html.js [data-reveal] .satz::before, html.js [data-reveal] .felder::before, html.js [data-reveal] .schritte::before,
html.js [data-reveal] .figur::before, html.js [data-reveal] .kennzahl::before, html.js [data-reveal] .platten::before, html.js [data-reveal] .fragen::before {
  transform: scaleY(0); transition: transform var(--dur) var(--ease);
}
html.js [data-reveal].is-visible .satz::before, html.js [data-reveal].is-visible .felder::before, html.js [data-reveal].is-visible .schritte::before,
html.js [data-reveal].is-visible .figur::before, html.js [data-reveal].is-visible .kennzahl::before, html.js [data-reveal].is-visible .platten::before, html.js [data-reveal].is-visible .fragen::before {
  transform: scaleY(1);
}
html.js [data-reveal] .figur { opacity: 1; }
html.js [data-reveal] .figur__bild { opacity: 0; transition: opacity var(--dur-haar) linear 160ms; }
html.js [data-reveal].is-visible .figur__bild { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] > *, html.js [data-reveal] .satz, html.js [data-reveal] .kapitel, html.js [data-reveal] .figur__bild { opacity: 1; transition: none; }
  html.js [data-reveal] .satz::before, html.js [data-reveal] .felder::before, html.js [data-reveal] .schritte::before, html.js [data-reveal] .figur::before, html.js [data-reveal] .kennzahl::before, html.js [data-reveal] .platten::before, html.js [data-reveal] .fragen::before { transform: none; transition: 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);
  border-top: 1px solid var(--haar); border-bottom: 1px solid var(--haar);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.fassung__titel { padding: 0 8px; color: var(--ink-muted); }
.fassung a { padding: 7px 10px; color: var(--ink-soft); text-decoration: none; transition: color var(--dur) var(--ease); }
.fassung a:hover { color: var(--akzent-schrift); }
.fassung a[aria-current="true"] { background: var(--akzent); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 7px) 100%, 0 100%); }
.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 Stamm und Haar übersetzt
   ═══════════════════════════════════════════════════════════════════════════ */
.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 { --stamm-breite: var(--stamm); font-weight: var(--w-hero); letter-spacing: var(--tr-hero); padding-left: calc(var(--stamm) + 0.4em); }
.pagehead h1::before { top: 0.06em; bottom: 0.08em; }
.pagehead p { color: var(--ink-soft); }
.crumb, .crumb a { color: var(--ink-muted); font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 700; }

.eyebrow {
  display: block; font-size: var(--t-label); font-weight: var(--w-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--akzent-schrift);
}
.section-head h2, .section h2:not(.satz) {
  position: relative; font-weight: var(--w-satz); letter-spacing: var(--tr-satz);
  padding-left: calc(var(--stamm) + 0.45em);
}
.section-head h2::before, .section h2:not(.satz)::before {
  content: ""; position: absolute; left: 0; top: 0.08em; bottom: 0.1em; width: 0.16em;
  background: var(--stamm-farbe); box-shadow: inset -1px 0 0 var(--stamm-licht);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.116em), 0 100%);
}

/* Fakten: Kennzahl mit Haar */
.facts { gap: 2rem clamp(1.5rem, 3vw, 3rem); background: transparent; border: 0; padding-left: calc(var(--stamm-fix) + 1.5rem); --stamm-breite: var(--stamm-fix); }
.fact { background: transparent; padding: 0; gap: 0.5rem; }
.fact b { font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 300; color: var(--ink); letter-spacing: var(--tr-kennzahl); line-height: 0.95; padding-bottom: 0.1em; border-bottom: 1px solid var(--haar-stark); }
.fact p { color: var(--ink-muted); font-size: 0.9375rem; }

/* Neun Felder als Zeilen am Stamm */
.tiles { display: block; gap: 0; background: transparent; border: 0; padding-left: calc(var(--stamm-fix) + 1.5rem); --stamm-breite: var(--stamm-fix); }
.tile {
  display: grid; grid-template-columns: minmax(0, 22rem) 1fr auto; gap: 0.25rem clamp(1rem, 2.5vw, 2rem); align-items: baseline;
  background: transparent; border: 0; border-bottom: 1px solid var(--haar); padding: 1rem 0; overflow: visible; position: relative;
  transition: padding-left 160ms var(--ease);
}
.tile:first-child { border-top: 1px solid var(--haar); }
.tile::before { content: ""; position: absolute; left: -0.9rem; top: 0.6rem; bottom: 0.6rem; width: 3px; background: var(--stamm-farbe); transform: scaleY(0); transform-origin: top; transition: transform 160ms var(--ease); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2px), 0 100%); }
.tile:hover { padding-left: 0.6rem; }
.tile:hover::before { transform: scaleY(1); }
.tile__light { display: none; }
.tile__head { display: contents; }
.tile__marks { grid-column: 3; grid-row: 1; display: flex; gap: 1rem; }
.tile__head h3 { grid-column: 1; grid-row: 1; font-size: var(--t-h3); margin: 0; }
.tile__head p { grid-column: 2; grid-row: 1; margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.tile__more { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0.35rem 0 0; font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--akzent-schrift); }
.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); white-space: nowrap; }
.tile__mark--demo { color: var(--ink-muted); }

/* Schritte */
.steps { gap: 0; background: transparent; border: 0; padding-left: calc(var(--stamm-fix) + 1.5rem); --stamm-breite: var(--stamm-fix); }
.step { background: transparent; border-bottom: 1px solid var(--haar); padding-inline: 0; grid-template-columns: 4.5rem 1fr; }
.step:first-child { border-top: 1px solid var(--haar); }
.step__num { font-weight: 300; font-size: 2.5rem; color: var(--ghost); }

/* Bild-Text-Paare: das Bild im Stammformat, Stamm links, Keil rechts unten */
.duo__view {
  height: auto; aspect-ratio: var(--bild-stamm); max-height: 70vh; --stamm-breite: var(--stamm-fix);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--keil-bild) * 0.727), calc(100% - var(--keil-bild)) 100%, 0 100%);
}
.duo__view canvas { width: 100%; height: 100%; }
.founder__portrait { --stamm-breite: var(--stamm-fix); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--keil-bild) * 0.727), calc(100% - var(--keil-bild)) 100%, 0 100%); }
.founder__portrait img { filter: grayscale(1) contrast(1.15) brightness(0.95); }

.section--raised { background: var(--blech); background-color: var(--band); border-top: 1px solid var(--haar-band); border-bottom: 1px solid var(--haar-band); transform: translateZ(0); }
.consent { border-radius: 0; border: 0; border-top: 1px solid var(--haar); border-bottom: 1px solid var(--haar); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  border: 0; border-bottom: 1px solid var(--haar-stark); border-radius: 0; background: var(--feld);
}

/* ── Schmale Breiten ────────────────────────────────────────────────────── */
@media (max-width: 900px) { .kennzahlen { grid-template-columns: 1fr 1fr; } .platten { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .zweispalt, .zweispalt--bild-links { grid-template-columns: 1fr; }
  .feld { grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto auto; }
  .feld__nr { grid-row: 1 / 4; }
  .feld__titel, .feld__text, .feld__marke { grid-column: 2; }
  .tile { grid-template-columns: 1fr; }
  .tile__head h3, .tile__head p, .tile__marks, .tile__more { grid-column: 1; grid-row: auto; }
  .scene { height: 120vh; } .scene--lang { height: 150vh; }
  .wechsel__hell, .wechsel__dunkel { display: none; }
}
@media (max-width: 480px) { .kennzahlen { grid-template-columns: 1fr; } }

/* ── Korrekturen nach der ersten Sichtung ──────────────────────────────── */
/* Der Stamm gehört ans Bild, nicht an die Bildunterschrift */
.figur::before { display: none; }
.figur__bild::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  width: var(--stamm-fix); background: var(--stamm-farbe);
  box-shadow: inset -1px 0 0 var(--stamm-licht);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--stamm-fix) * 0.727), 0 100%);
  transform-origin: top;
}
html.js [data-reveal] .figur__bild::before { transform: scaleY(0); transition: transform var(--dur) var(--ease); }
html.js [data-reveal].is-visible .figur__bild::before { transform: scaleY(1); }
.figur figcaption { padding-left: calc(var(--stamm-fix) + 0.75rem); }
/* Das Logo gibt im Kopf nicht nach */
.site-header .brand, .site-header .brand__logo, .site-header .header-cta { flex-shrink: 0; }
@media (max-width: 1180px) { .wechsel__hell, .wechsel__dunkel { display: none; } }

/* Der Hero-Knopf nimmt das volle Bordeaux, styles.css hebt ihn sonst auf */
.hero .btn--primary { background: var(--akzent); }

/* 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;
}

/* ── 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: Titelgröße statt Kennzahlgröße, sonst laufen sie ineinander */
.facts:not([data-counters]) .fact b { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.25; border-bottom: 0; padding-bottom: 0; }
.facts:not([data-counters]) .fact p { color: var(--ink-soft); }

/* 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; }