/* ═══════════════════════════════════════════════════════════════════════════
   Fassung 7, Konzept „Umlauf"
   Aus dem Logo gelesen: Das C ist ein Ring, der 298 Grad umläuft und sich auf
   62 Grad nach rechts öffnet. Das D ist ein halber Ring, der an einer geraden
   Kante beginnt. Die Seite besteht aus genau diesen zwei Formen.

   Die eine Regel: eine Kante gerade, eine gebogen. Das Rechteck mit vier
   gleichen Radien ist damit ausgeschlossen, ohne dass jemand daran denken muss.

   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 auf die neuen weiter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kursivschnitte, die das Konzept braucht ────────────────────────────── */
@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 warm, Drehschliff ─────────────────────────────────────── */
:root {
  color-scheme: light;
  --weiss:     #FFFFFF;
  --papier:    var(--r0);
  --silber-1:  #EAE7E6;
  --silber-2:  #D5CFCF;
  --silber-3:  #B6AFAF;

  --grund:     var(--weiss);
  --band:      var(--papier);
  --band-2:    var(--silber-1);
  --platte:    var(--silber-1);
  --platte-kante: transparent;
  --ring-kontur: var(--silber-2);
  --lichtfeld: none;
  --haar:      rgba(16, 11, 10, 0.10);

  --ink:       var(--r9);
  --ink-soft:  #474241;
  --ink-muted: var(--r3);
  --ghost:     var(--r2);
  --akzent:    var(--r5);
  --akzent-schrift: var(--r5);
  --akzent-schrift-platte: var(--r5);
  --on-akzent: #FFFFFF;

  --ring-silber: conic-gradient(from 121deg,
    #FFFFFF 0deg, #D5CFCF 70deg, #F9F6F6 150deg, #B6AFAF 220deg, #EAE7E6 298deg,
    transparent 298deg 360deg);
  --ring: var(--ring-silber);
  --silber-gedreht: radial-gradient(circle at 67% 64%, #FFFFFF 0%, #EAE7E6 45%, #D5CFCF 100%);
  --schatten:  0 12px 32px -16px rgba(16, 11, 10, 0.18);

  /* Hero-Farben für den WebGL-Shader */
  --hero-grund: #F5F0EF;
  --hero-akzent: #921221;
  --hero-wuerfel: #CBC4C3;   /* Silber, bevor die Würfel einrasten */

  /* Form */
  --bogen:        999px;
  --bogen-gross:  clamp(3rem, 7.619vw + 1.1429rem, 8rem);
  --d-form:       0 var(--bogen) var(--bogen) 0;
  --d-form-spiegel: var(--bogen) 0 0 var(--bogen);
  --band-ecke-r:  0 0 var(--bogen-gross) 0;
  --band-ecke-l:  0 0 0 var(--bogen-gross);
  --licht-x: 67%; --licht-y: 64%;

  /* Typografie */
  --t-hero:     clamp(2.25rem, 3.810vw + 1.3214rem, 4.75rem);
  --t-satz:     clamp(1.625rem, 1.905vw + 1.1607rem, 2.875rem);
  --t-h3:       clamp(1.25rem, 0.381vw + 1.1571rem, 1.5rem);
  --t-body:     clamp(1.062rem, 0.190vw + 1.0161rem, 1.188rem);
  --t-label:    clamp(0.7812rem, 0.048vw + 0.7696rem, 0.8125rem);
  --t-kennzahl: clamp(2.75rem, 4.952vw + 1.5429rem, 6rem);
  --w-hero: 400; --w-satz: 400; --w-h3: 500;
  --tr-hero: -0.012em; --tr-satz: -0.010em; --tr-body: 0.002em; --tr-kennzahl: -0.020em;
  --lh-body: 1.62;

  /* Rhythmus und Bewegung */
  --sp-sektion: clamp(4.5rem, 6.095vw + 3.0143rem, 8.5rem);
  --dur:        240ms;
  --dur-lang:   720ms;
  --ease:       cubic-bezier(0.32, 0.72, 0, 1);
  --seite-fuellung: 0deg;

  /* Mapping auf die Tokennamen, die Hero, Szenen, Navigation und
     Einwilligung in styles.css verwenden. Damit laufen sie unverändert. */
  --ground:    var(--grund);
  --ground-2:  var(--band);
  --panel:     var(--platte);
  --panel-2:   var(--band-2);
  --panel-hi:  var(--silber-2);
  --ink-faint: var(--ink-muted);
  --rule:      var(--haar);
  --rule-strong: var(--ring-kontur);
  --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: var(--bogen-gross);
  --modus-bahn: var(--silber-1);
  --modus-rand: var(--silber-2);
  --modus-punkt: var(--ink);
}

/* ── Dunkel: der Ring wird zum Licht ────────────────────────────────────── */
[data-theme="dunkel"] {
  color-scheme: dark;
  --grund:     var(--r9);
  --band:      var(--r8);
  --band-2:    var(--r8);
  --platte:    var(--r7);
  --platte-kante: rgba(245, 240, 239, 0.12);
  --ring-kontur: rgba(245, 240, 239, 0.32);
  --lichtfeld: radial-gradient(60% 50% at 67% 64%, rgba(245, 240, 239, 0.07), transparent 70%);
  --haar:      rgba(245, 240, 239, 0.12);

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

  --ring-licht: conic-gradient(from 121deg,
    rgba(207,90,90,0.55) 0deg, rgba(207,90,90,0.10) 70deg,
    rgba(245,240,239,0.35) 150deg, rgba(207,90,90,0.10) 220deg,
    rgba(207,90,90,0.55) 298deg, transparent 298deg 360deg);
  --ring: var(--ring-licht);
  --silber-gedreht: radial-gradient(circle at 67% 64%, #241C1B 0%, #181212 55%, #100B0A 100%);
  --schatten:  none;

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

  --w-hero: 350; --w-h3: 450;
  --tr-hero: -0.006em; --tr-satz: -0.004em; --tr-body: 0.006em; --tr-kennzahl: -0.014em;
  --lh-body: 1.68;

  --panel-hi:  var(--r6);
  --brand-glow: var(--r4);
  --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-feature-settings: "onum";
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--lichtfeld);
}
.page { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--font-display); font-feature-settings: "lnum"; }
h1 em, h2 em, .satz em {
  font-style: italic; font-weight: inherit; color: var(--akzent-schrift);
}
p { max-width: 64ch; }
.container { width: min(var(--container, 1200px), calc(100% - 2 * var(--gutter, 24px))); margin-inline: auto; }

/* Wechsel als Kreis, der vom Ring aus wächst */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
  animation: kreis 640ms var(--ease);
  clip-path: circle(0 at var(--wechsel-x, 100%) var(--wechsel-y, 100%));
}
@keyframes kreis { to { clip-path: circle(160% at var(--wechsel-x, 100%) var(--wechsel-y, 100%)); } }

/* ── Kapitelvorspann: Ring mit Ziffer in der Öffnung ────────────────────── */
.kapitel {
  display: flex; align-items: center; gap: 0.75em;
  font-size: var(--t-label); font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink-muted); margin-bottom: 1.25rem;
}
.ring {
  --groesse: 44px; --breite: 2px; --fuellung: 298deg;
  position: relative; flex: none;
  width: var(--groesse); height: var(--groesse);
  display: grid; place-items: center;
  font-family: var(--font-display); font-feature-settings: "lnum", "tnum";
  font-size: calc(var(--groesse) * 0.34); color: var(--ink);
}
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 121deg, var(--ring-kontur) 0deg,
    var(--ring-kontur) var(--fuellung), transparent var(--fuellung) 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--breite)), #000 calc(50% - var(--breite) + 0.5px));
          mask: radial-gradient(circle, transparent calc(50% - var(--breite)), #000 calc(50% - var(--breite) + 0.5px));
  transition: --fuellung var(--dur) var(--ease);
}
.ring--silber::before { background: var(--ring); }
.ring--klein { --groesse: 22px; --breite: 1px; font-size: 0.7rem; }
.ring--gross { --groesse: clamp(140px, 18vw, 256px); --breite: 4px; }
.ring__zahl {
  /* Die Ziffer sitzt dort, wo das C aufhört: in der Öffnung rechts. */
  position: absolute; left: calc(100% + 0.35em); top: 50%; transform: translateY(-50%);
  white-space: nowrap; color: var(--ink);
}

.satz {
  font-size: var(--t-satz); font-weight: var(--w-satz);
  letter-spacing: var(--tr-satz); line-height: 1.16;
  max-width: 22ch; margin: 0 0 1rem;
}
.satz--breit { max-width: 28ch; }
.vorspann { color: var(--ink-soft); max-width: 56ch; margin: 0 0 1rem; }
.section-head { margin-bottom: 2.5rem; }

/* ── Bänder mit einer Bogenecke, abwechselnd rechts und links ───────────── */
.band {
  position: relative; background: var(--band);
  padding-block: var(--sp-sektion); height: auto; overflow: visible;
  border: 0;
}
.band--ecke-r { border-radius: var(--band-ecke-r); }
.band--ecke-l { border-radius: var(--band-ecke-l); }
.band--silber { background: var(--band-2); }
.abschnitt { padding-block: var(--sp-sektion); position: relative; }

/* ── Kennzahlen in Ringen ───────────────────────────────────────────────── */
.zahlen-ring {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem;
  padding-block: 2rem;
}
.zahl {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.25rem; align-items: center;
}
.zahl .ring { --groesse: clamp(64px, 7vw, 96px); --breite: 3px; }
.zahl__wert {
  grid-column: 2; font-family: var(--font-display); font-weight: 300;
  font-size: var(--t-kennzahl); line-height: 0.95; letter-spacing: var(--tr-kennzahl);
  font-feature-settings: "lnum", "tnum"; color: var(--ink);
}
.zahl__wert sup { font-size: 0.4em; vertical-align: super; color: var(--akzent-schrift); }
.zahl__label {
  grid-column: 2; margin-top: 0.5rem; font-size: var(--t-label);
  color: var(--ink-muted); letter-spacing: 0.04em; max-width: 22ch;
}
@media (max-width: 900px) { .zahlen-ring { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .zahlen-ring { grid-template-columns: 1fr; } }

/* ── Text neben D-Form-Bild ─────────────────────────────────────────────── */
.zweispalt {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.zweispalt--bild-links > .figur { order: -1; }
@media (max-width: 860px) { .zweispalt { grid-template-columns: 1fr; } .zweispalt--bild-links > .figur { order: 0; } }

.figur {
  position: relative; margin: 0; overflow: hidden; background: var(--platte);
  aspect-ratio: 8 / 9; border-radius: var(--d-form);
}
.figur--spiegel { border-radius: var(--d-form-spiegel); }
.figur--kreis { aspect-ratio: 1 / 1; border-radius: 50%; }
.figur img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04) brightness(0.90);
}
[data-theme="dunkel"] .figur img { filter: grayscale(1) contrast(1.04) brightness(0.78); }
.figur::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--licht-x) var(--licht-y), var(--r5) 0%, transparent 65%);
  mix-blend-mode: soft-light; opacity: 0.85;
}
.figur__nachweis {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 6px 12px; font-size: 0.6875rem; letter-spacing: 0.02em;
  color: rgba(245, 240, 239, 0.6); background: rgba(16, 11, 10, 0.5);
  backdrop-filter: blur(6px);
}
.figur--spiegel .figur__nachweis { left: auto; right: 0; }
.figur__nachweis a { color: inherit; text-decoration: none; }
.figur__nachweis a:hover { color: #fff; text-decoration: underline; }
.bildtext { margin-top: 0.75rem; font-size: var(--t-label); color: var(--ink-muted); font-weight: 500; }

/* ── Der Umlauf: neun Felder um einen großen Ring ───────────────────────── */
.umlauf {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.umlauf > .ring--gross { position: sticky; top: calc(var(--header-h, 80px) + 2rem); }
.umlauf__liste { list-style: none; margin: 0; padding: 0; }
.feld {
  display: grid; grid-template-columns: auto minmax(0, 22rem) 1fr auto;
  gap: 0 clamp(1rem, 2.5vw, 2rem); align-items: baseline;
  padding: clamp(1rem, 1.8vw, 1.4rem) 0; border-bottom: 1px solid var(--haar);
  transition: padding-left var(--dur) var(--ease);
}
.feld:hover { padding-left: 0.75rem; }
.feld:hover .ring { --fuellung: 298deg; }
.feld .ring { --fuellung: 0deg; align-self: center; }
.feld__titel { font-family: var(--font-display); font-weight: var(--w-h3); font-size: var(--t-h3); margin: 0; }
.feld__text { color: var(--ink-soft); font-size: 0.95em; margin: 0; }
.feld__marke {
  font-size: 0.6875rem; letter-spacing: 0.04em; font-weight: 500;
  color: var(--akzent-schrift); white-space: nowrap;
}
@media (max-width: 900px) {
  .umlauf { grid-template-columns: 1fr; }
  .umlauf > .ring--gross { position: static; margin-bottom: 1.5rem; --groesse: 120px; }
  .feld { grid-template-columns: auto 1fr; }
  .feld__text, .feld__marke { grid-column: 2; }
}

/* ── Schritte mit Ring ──────────────────────────────────────────────────── */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.schritt {
  display: grid; grid-template-columns: auto 1fr; gap: 0 2.9rem; align-items: start;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--haar);
}
.schritt .ring { --groesse: 56px; --breite: 2px; }
.schritt h3 { font-size: var(--t-h3); font-weight: var(--w-h3); margin: 0 0 0.4rem; }
.schritt p { color: var(--ink-soft); margin: 0; max-width: 58ch; }
.schritt--nein .ring { --fuellung: 0deg; }
.schritt--nein .ring::before { background: conic-gradient(from 121deg, var(--akzent) 0deg 298deg, transparent 298deg); }

/* ── Haltung ────────────────────────────────────────────────────────────── */
.statement p {
  font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  line-height: 1.15; letter-spacing: -0.012em; max-width: 24ch; margin: 0;
}
.statement .accent { font-style: italic; font-weight: inherit; color: var(--akzent-schrift); }

/* ── Gruppe: zwei D-Form-Platten ────────────────────────────────────────── */
.platten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.platte {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--silber-gedreht);
  border-radius: var(--d-form); box-shadow: var(--schatten);
  border-left: 1px solid var(--platte-kante);
  text-decoration: none; color: inherit;
  transition: padding-right var(--dur) var(--ease);
}
.platte:nth-child(2) { border-radius: var(--d-form-spiegel); border-left: 0; border-right: 1px solid var(--platte-kante); }
.platte:hover { padding-right: calc(clamp(1.5rem, 3vw, 2.5rem) + 0.4em); }
.platte h3 { font-size: var(--t-h3); margin: 0; }
.platte p { color: var(--ink-soft); margin: 0; }
.platte__status { font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--akzent-schrift-platte); font-weight: 500; }
.platte__fuss { margin-top: auto; padding-top: 0.75rem; font-size: 0.6875rem; color: var(--ink-muted); }
@media (max-width: 720px) { .platten { grid-template-columns: 1fr; } .platte:nth-child(2) { border-radius: var(--d-form); border-right: 0; border-left: 1px solid var(--platte-kante); } }

/* ── Fragen ─────────────────────────────────────────────────────────────── */
.fragen { border-top: 1px solid var(--haar); }
.frage { border-bottom: 1px solid var(--haar); }
.frage summary {
  display: grid; grid-template-columns: auto 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 .ring { --groesse: 28px; --breite: 1.5px; --fuellung: 0deg; transition: transform 320ms var(--ease); }
.frage[open] summary .ring { --fuellung: 298deg; transform: rotate(62deg); }
.frage__antwort { padding: 0 0 1.25rem 2.75rem; color: var(--ink-soft); max-width: 62ch; }

/* ── Schaltflächen: D-Form ──────────────────────────────────────────────── */
.btn, .btn--primary, .btn--sm, .header-cta, .nav__mobile-cta {
  border-radius: var(--d-form) !important;
  transition: padding-right var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn--primary { background: var(--akzent); color: var(--on-akzent); border: 0; }
.btn--primary:hover { padding-right: calc(1.25em + 0.4em); background: var(--akzent); }
.btn--ghost { background: transparent; border: 1px solid var(--ring-kontur); color: var(--ink); }
.arrow-link { color: var(--akzent-schrift); }

/* ── Abschlussband ──────────────────────────────────────────────────────── */
.cta-band {
  position: relative; padding-block: var(--sp-sektion);
  background: var(--akzent); color: #fff; border-radius: var(--band-ecke-l);
}
.cta-band .satz, .cta-band h2 { color: #fff; }
.cta-band .satz em { color: rgba(255,255,255,0.75); }
.cta-band p { color: rgba(255,255,255,0.82); }
.cta-band .btn--primary { background: #fff; color: var(--r5); }
.cta-band .arrow-link { color: #fff; }
.cta-band__mikro { font-size: var(--t-label); color: rgba(255,255,255,0.6); margin-top: 1rem; }

/* ── Umschalter: der Ring rechts unten ──────────────────────────────────── */
.ring-modus {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70;
  width: 52px; height: 52px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center;
}
.ring-modus__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 121deg, var(--akzent) 0deg,
    var(--akzent) var(--seite-fuellung), var(--ring-kontur) var(--seite-fuellung) 298deg,
    transparent 298deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2.5px));
          mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2.5px));
  transition: transform 600ms var(--ease);
}
.ring-modus.dreht .ring-modus__ring { animation: ringdreh 600ms var(--ease); }
@keyframes ringdreh { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
.ring-modus__punkt {
  width: 12px; height: 12px; border-radius: 50%; background: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
[data-theme="dunkel"] .ring-modus__punkt { background: #fff; }
.ring-modus__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ring-modus:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 50%; }
/* Der Fassungsumschalter weicht dem Ring aus */
.fassung { left: 16px; right: auto; }
.scroll-top, [data-scrolltop] { display: none !important; }

/* ── Szenen: Kapitelvorspann darin ──────────────────────────────────────── */
.scene__copy .kapitel { color: var(--ink-muted); }
.scene__copy .satz { color: var(--ink); }

/* ── Hero: Kursive im Satz ──────────────────────────────────────────────── */
.hero h1 { font-size: var(--t-hero); font-weight: var(--w-hero); letter-spacing: var(--tr-hero); line-height: 1.06; }
.hero__lead { color: var(--ink-soft); }
.hero__trust { margin-top: 1.5rem; font-size: var(--t-label); color: var(--ink-muted); letter-spacing: 0.04em; }
.hero__trust b { color: var(--ink); font-weight: 500; }

/* ── Reveal auf Bogen ───────────────────────────────────────────────────── */
html.js [data-reveal] { opacity: 0; transform: translate(-12px, 12px); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity var(--dur-lang) var(--ease), transform var(--dur-lang) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
  .ring-modus.dreht .ring-modus__ring { animation: none; }
  ::view-transition-new(root) { animation: none; clip-path: none; }
}

/* Netz-Szene braucht den laengeren Scrubweg, Orbit den kuerzeren */
.scene { height: 140vh; }
.scene--lang { height: 190vh; }
@media (max-width: 860px) { .scene { height: 120vh; } .scene--lang { height: 150vh; } }

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

/* Die Ziffer steht rechts in der Öffnung des Rings, der Text rückt dahinter */
.kapitel .ring--klein { margin-inline-end: 1.9em; }

/* Szenenvignette: auf hellem Grund hell, sonst frisst sie den Text */
html:not([data-theme="dunkel"]) .scene__sticky::after {
  background: radial-gradient(72% 62% at 50% 46%, rgba(245, 240, 239, 0) 0%, rgba(245, 240, 239, 0.78) 100%);
}

/* ── Hero auf hellem Grund: Silber statt Schatten ───────────────────────────
   styles.css legt links einen dunklen Schleier über die Würfel, damit der
   Text auf dunklem Grund lesbar bleibt. Auf Weiß kehrt sich das um: ein
   heller Schleier links, der Drehschliff-Lichtpunkt rechts bei 67 % / 64 %. */
html:not([data-theme="dunkel"]) .hero__sticky {
  background:
    radial-gradient(70% 80% at var(--licht-x) var(--licht-y), #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(245, 240, 239, 0.88) 26%,
    rgba(245, 240, 239, 0.5) 44%, rgba(245, 240, 239, 0) 66%);
}

/* ── Ringe auf Bändern: Drehschliff eine Stufe tiefer, sonst Silber auf Silber */
:root { --ring-silber-tief: conic-gradient(from 121deg,
    #D5CFCF 0deg, #B6AFAF 70deg, #EAE7E6 150deg, #948988 220deg, #D5CFCF 298deg,
    transparent 298deg 360deg); }
html:not([data-theme="dunkel"]) .band .ring { --ring: var(--ring-silber-tief); }

/* ── Schmale Breiten: der große Ring wird zum Auftakt, nicht zum Vorhang ── */
@media (max-width: 860px) {
  .umlauf { grid-template-columns: 1fr; gap: 1.5rem; }
  .umlauf > .ring--gross { position: static; --groesse: 96px; --breite: 6px; }
  .feld { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .feld .ring { grid-row: 1 / 3; }
  .feld__text, .feld__marker { grid-column: 2; }
  .ring-modus { width: 44px; height: 44px; }
}

/* Ringe vor den Fragen: eine Stufe tiefer, sonst Silber auf Weiß */
html:not([data-theme="dunkel"]) .frage summary .ring { --ring: var(--ring-silber-tief); }

/* ═══════════════════════════════════════════════════════════════════════════
   Unterseiten: die Bausteine aus styles.css in die Ringsprache übersetzt.
   Kein Rahmenraster mehr, keine Chips, keine geraden Vierecke.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Seitenkopf: auf hell kein grauer Schleier, die Szene liegt auf Silber */
.pagehead { border-bottom: 0; }
html:not([data-theme="dunkel"]) .pagehead::after {
  background: linear-gradient(to top, var(--grund) 4%, rgba(245, 240, 239, 0.62) 48%, rgba(245, 240, 239, 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); }

/* Vorzeile: kleiner Ring statt Versalien in Bordeaux */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--t-label); font-weight: 500; letter-spacing: 0.04em;
  text-transform: none; color: var(--ink-muted);
}
.eyebrow::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--ring-silber-tief);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2px));
          mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2px));
}
[data-theme="dunkel"] .eyebrow::before { background: var(--ring-licht); }
.section-head h2, .section h2:not(.satz) { font-weight: var(--w-satz); letter-spacing: var(--tr-satz); }

/* Fakten: offene Zeilen mit Haarlinie statt Rahmenraster */
.facts { gap: 0 clamp(1.5rem, 3vw, 3rem); background: transparent; border: 0; border-top: 1px solid var(--haar); }
.fact { background: transparent; padding: clamp(1.25rem, 2.5vw, 1.75rem) 0; border-bottom: 1px solid var(--haar); }
.fact b { font-size: clamp(1.6rem, 2.4vw, 2.25rem); color: var(--akzent-schrift); letter-spacing: var(--tr-kennzahl); }
.fact p { color: var(--ink-soft); font-size: var(--t-body); }

/* Neun Felder: D-Platten im Drehschliff, abwechselnd gespiegelt */
.tiles { gap: 1rem; background: transparent; }
.tile {
  background: var(--silber-gedreht); border: 0; box-shadow: var(--schatten);
  border-radius: var(--d-form);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(2.75rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.tile:nth-child(even) {
  border-radius: var(--d-form-spiegel);
  padding-inline: clamp(2.75rem, 5vw, 3.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
[data-theme="dunkel"] .tile { border-left: 1px solid var(--platte-kante); }
[data-theme="dunkel"] .tile:nth-child(even) { border-left: 0; border-right: 1px solid var(--platte-kante); }
.tile__light { border-radius: inherit; }
.tile__mark {
  border: 0; padding: 0; font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.02em; text-transform: none; color: var(--akzent-schrift-platte);
}
.tile__mark--demo { color: var(--ink-muted); }
.tile__more { text-transform: none; letter-spacing: 0.02em; font-weight: 500; color: var(--akzent-schrift-platte); }

/* Schritte: Ziffer im Ring, Haarlinien statt Rahmen */
.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: 44px 1fr; gap: var(--sp-5, 1.5rem); }
.step__num {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--font-body); font-size: var(--t-label); font-weight: 500; color: var(--ink);
}
.step__num::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ring-silber-tief);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2px));
          mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2px));
}
[data-theme="dunkel"] .step__num::before { background: var(--ring-licht); }

/* Bild-Text-Paare: die Bildfläche bekommt den Bogen */
.duo__view { border-radius: var(--d-form); overflow: hidden; }
.duo--rev .duo__view { border-radius: var(--d-form-spiegel); }

/* Angehobene Abschnitte werden zu Bändern mit einer gebogenen Ecke */
.section--raised { background: var(--band); border-block: 0; border-radius: var(--band-ecke-r); }
.section--raised:nth-of-type(even) { border-radius: var(--band-ecke-l); }

/* Schaltfläche mit Kontur: gleiche D-Form, Haarlinie */
.btn--outline { border: 1px solid var(--ring-kontur); color: var(--ink); background: transparent; }

/* Kachelraster ohne Außenrahmen, der Bogen liegt zum Text hin */
.tiles { border: 0; }
.duo__view { border-radius: var(--d-form-spiegel); }
.duo--rev .duo__view { border-radius: var(--d-form); }
img[src*="portraet-thomas-drost"] { border-radius: var(--d-form); }

/* Der Modus-Ring steht auf einer Scheibe im Grundton, damit er auch auf
   dem Bordeauxband und über Bildern lesbar bleibt */
.ring-modus { background: var(--grund); border-radius: 50%; box-shadow: 0 0 0 1px var(--haar), var(--schatten); }

/* ── Fassungsumschalter, nur in der Vorschau. Links unten, D-Form ────────── */
.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) 90%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--haar), var(--schatten);
  border-radius: var(--d-form);
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.fassung__titel { padding: 0 8px 0 8px; color: var(--ink-muted); }
.fassung a {
  padding: 7px 10px; color: var(--ink-soft); text-decoration: none; border-radius: var(--d-form);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fassung a:hover { background: var(--band-2); color: var(--ink); }
.fassung a[aria-current="true"] { background: var(--akzent); color: #fff; }
@media (max-width: 620px) { .fassung { left: 10px; bottom: 10px; font-size: 0.625rem; } .fassung__titel { display: none; } }

/* ── 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; }
.brand-card { border-radius: var(--d-form); padding-right: clamp(3rem, 6vw, 5rem); }

/* 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); }
.founder__platz { border-radius: var(--d-form); }

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

/* Zahlenband: vier Ringe vor vier Zahlen lasen sich wie vier Logos.
   Die Zahl steht jetzt allein auf einer Haarlinie, das Plus in ihrer Größe. */
.zahl { grid-template-columns: 1fr; gap: 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--haar); }
.zahl .ring { display: none; }
.zahl__wert, .zahl__label { grid-column: 1; }
.zahl__wert sup { font-size: 0.55em; vertical-align: 0.35em; margin-left: 0.04em; color: inherit; }
.zahlen-ring { gap: 2.5rem 2rem; }

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