/* cp-motorsport — site.css — Tokens aus design.md, verbindlich übernommen */

@font-face {
  font-family: "Saira Condensed";
  src: url("../fonts/saira-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("../fonts/saira-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben — gemessen, design.md */
  --cp-rot: oklch(64.5% 0.235 33); /* #FC3800 */
  --rot-tief: oklch(47% 0.18 33); /* #A81A00 */
  --grund: oklch(15.4% 0.026 33); /* #150805 */
  --flaeche: oklch(21.2% 0.028 33); /* #241410 */
  --kante: oklch(27.5% 0.03 33); /* #35221E */
  --blech: oklch(93.4% 0.008 66); /* #EDE8E4 */
  --alu: oklch(72.6% 0.012 214); /* #9EA9AB */
  --alu-tief: oklch(47% 0.01 214); /* #555C5E */

  /* Typo */
  --font-display: "Saira Condensed", sans-serif;
  --font-body: "Sora", sans-serif;
  --fs-display-xxl: clamp(3.6rem, 11.5vw, 10.5rem);
  --fs-display-l: clamp(2.6rem, 6vw, 5.6rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.4rem);
  --fs-h3: clamp(1.35rem, 1.8vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-meta: 0.8125rem;

  /* Motion */
  --ease-zug: cubic-bezier(0.62, 0.02, 0.2, 1);
  --t-reveal: 620ms;
  --t-wipe: 280ms;
  --t-micro: 140ms;

  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --sticky-pad-bottom: 84px;
}

@media (min-width: 720px) {
  :root {
    --sticky-pad-bottom: 0px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
/* Fix 3 (duell-entscheid): Abstand jedes Sektionskopfs zur fixen Kopfleiste,
   auch bei Anker-Sprüngen (§0e-…, Sticky-Kopfleiste ~90-100px hoch) */
section,
[id] {
  scroll-margin-top: 6.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--blech);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--sticky-pad-bottom);
}

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

p,
h1,
h2,
h3,
li,
a,
span {
  overflow-wrap: break-word;
  hyphens: auto;
}
.no-hyphens {
  hyphens: none;
}
a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cp-rot);
  outline-offset: 3px;
}

/* ===== Typografie ===== */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alu);
}
.d-xxl {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--fs-display-xxl);
  letter-spacing: -0.015em;
  line-height: 0.86;
  text-wrap: balance;
  color: var(--blech);
  margin: 0;
}
.d-xxl em {
  font-style: italic;
  color: var(--cp-rot);
}
.d-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--fs-display-l);
  letter-spacing: -0.012em;
  line-height: 0.92;
  text-wrap: balance;
  color: var(--blech);
  margin: 0;
}
.d-l em {
  font-style: italic;
  color: var(--cp-rot);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--blech);
  margin: 0;
}
.h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--blech);
  margin: 0;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 38ch;
  color: var(--alu);
  font-weight: 400;
}
.meta {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alu);
}
.body-text {
  max-width: 56ch;
  color: var(--blech);
}
.body-text.on-flaeche {
  color: var(--blech);
}

/* ===== Dachlinie-Device (Signature) ===== */
.dachlinie-bullet {
  width: 22px;
  height: 14px;
  flex: none;
  display: block;
  stroke: var(--cp-rot);
  fill: none;
  stroke-width: 1.75;
}
.dachlinie-trenner {
  width: 100%;
  height: 16px;
  display: block;
  margin-block: 1.25rem;
  stroke: var(--cp-rot);
  fill: none;
  stroke-width: 1.75;
  opacity: 0.9;
}
.dachlinie-watermark {
  position: absolute;
  width: 58vw;
  max-width: 920px;
  opacity: 0.09;
  stroke: var(--cp-rot);
  fill: none;
  stroke-width: 1.5;
  pointer-events: none;
  z-index: 0;
}
.dachlinie-watermark.links {
  left: calc(var(--rand) * -1);
}
.dachlinie-watermark.rechts {
  right: calc(var(--rand) * -1);
}

/* ===== Layout-Grund ===== */
.rand {
  padding-inline: var(--rand);
}
.container {
  max-width: 1360px;
  margin-inline: auto;
}
.buehne {
  position: relative;
  width: 100%;
  overflow: clip;
  background: var(--grund);
}
.buehne-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne-inhalt {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.buehne-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(21, 8, 5, 0.05) 0%,
    rgba(21, 8, 5, 0.15) 55%,
    rgba(21, 8, 5, 0.72) 100%
  );
  pointer-events: none;
}
.buehne-scrim.top {
  background: linear-gradient(
    0deg,
    rgba(21, 8, 5, 0.1) 0%,
    rgba(21, 8, 5, 0.05) 40%,
    rgba(21, 8, 5, 0.55) 100%
  );
}

/* ===== Nav ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--rand);
  background: linear-gradient(180deg, rgba(21, 8, 5, 0.72), rgba(21, 8, 5, 0));
  transition: background var(--t-micro) ease;
}
.nav.ist-solide {
  /* Voll deckend statt 92 %: bei der Sticky-Zustandsszene schoben sich die
     auslaufenden Kapitel-Karten sichtbar durch die Kopfleiste (Geister-Text hinter
     Logo und Navigation, auf 390 px deutlich). Fremd-Blick-Fund 16.08.2026. */
  background: var(--grund);
  border-bottom: 1px solid var(--kante);
}
.nav-logo {
  height: 60px;
  width: auto;
  display: block;
}
@media (min-width: 1000px) {
  .nav-logo {
    height: 64px;
  }
}
.nav-links {
  display: none;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (min-width: 900px) {
  .nav-links {
    display: flex;
  }
}
.nav-links a {
  position: relative;
  padding-bottom: 6px;
  color: var(--blech);
}
.nav-links a .dachlinie-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  stroke: var(--cp-rot);
  fill: none;
  stroke-width: 1.75;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-micro) var(--ease-zug);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover .dachlinie-underline {
    clip-path: inset(0 0 0 0);
  }
}
.nav-links a[aria-current="page"] .dachlinie-underline {
  clip-path: inset(0 0 0 0);
}
.nav-cta {
  display: none;
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  background: var(--rot-tief);
  color: var(--blech);
  transition:
    transform var(--t-micro) ease-out,
    background var(--t-micro) ease-out;
}
@media (min-width: 900px) {
  .nav-cta {
    display: inline-block;
  }
}
.nav-cta:hover {
  background: var(--cp-rot);
}
.nav-cta:active {
  transform: scale(0.97);
}
.nav-burger {
  display: inline-flex;
  background: none;
  border: 0;
  color: var(--blech);
  padding: 0.4rem;
}
@media (min-width: 900px) {
  .nav-burger {
    display: none;
  }
}
.nav-burger:active {
  transform: scale(0.97);
}

/* ===== Nav Mobile (Drawer) ===== */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--grund);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-micro) ease-out;
}
.nav-mobile.ist-offen {
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
.nav-mobile a {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  color: var(--blech);
}
@media (min-width: 900px) {
  .nav-mobile {
    display: none;
  }
}

/* ===== Reveal (Masken-Wipe, §0e-95: NIE das maskierte Element beobachten) ===== */
.js .wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-reveal) var(--ease-zug);
}
.js .wipe.ist-da {
  clip-path: inset(0 0 0 0);
}
.js .wipe-text {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-reveal) var(--ease-zug) 140ms;
}
.js .wipe-text.ist-da {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .js .wipe,
  .js .wipe-text {
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }
}

/* ===== S0 Head ===== */
.head {
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: clip;
  background: var(--grund);
}
.head__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.head video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.head-inhalt {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(4rem, 11vh, 6.5rem);
}
.head-eyebrow {
  padding: 0 var(--rand);
  margin-bottom: 0.75rem;
}
.head-titel {
  padding: 0 var(--rand);
  margin-bottom: 1.75rem;
}
.head-titel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.head-titel .zeile1 {
  line-height: 0.86;
}
.head-titel .zeile2 {
  display: block;
  color: var(--blech);
  line-height: 0.98;
}
.head-titel .zeile3 {
  display: block;
  line-height: 1.08;
  max-width: 34ch;
}
/* Fix 1 (duell-entscheid): Grad eine Stufe kleiner, Motiv bleibt in den oberen
   zwei Dritteln frei sichtbar; die Pointe fällt ~15% kleiner aus als Z1/Z2 */
.head-titel .zeile1 {
  font-size: clamp(2.1rem, 4.8vw, 4.2rem);
  line-height: 0.94;
}
.head-titel .zeile2 {
  font-size: clamp(1.5rem, 3.1vw, 2.7rem);
  line-height: 1;
  opacity: 0.92;
}
/* Die Pointe ist eine Pointe, kein Display-Grad (§0e-123b, Juwelier-Nachtrag):
   sie fällt sichtbar kleiner aus, damit der Textblock unten links sitzt und das
   Motiv die oberen zwei Drittel behält. */
.head-titel .zeile3 {
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  line-height: 1.14;
  max-width: 30ch;
}
.head-fuss {
  padding: 0 var(--rand);
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
}
.head-beweis {
  color: var(--blech);
  font-size: 1.0625rem;
  max-width: 52ch;
}
.cta-fuellung {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  background: var(--rot-tief);
  color: var(--blech);
  padding: 1rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition:
    transform var(--t-micro) ease-out,
    background var(--t-micro) ease-out;
}
.cta-fuellung:hover {
  background: var(--cp-rot);
}
.cta-fuellung:active {
  transform: scale(0.97);
}

/* ===== Meta-Band (überlappt Head, data-overlap-ok) ===== */
.meta-band {
  position: relative;
  z-index: 5;
  margin-top: -4rem;
  margin-inline: var(--rand);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
@media (max-width: 720px) {
  .meta-band {
    margin-top: -3rem;
    padding: 1rem 1.15rem;
    gap: 0.6rem 1.25rem;
  }
}
.meta-band .stueck {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alu);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.meta-band .stueck::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cp-rot);
  flex: none;
}
.meta-band .stueck:first-child::before {
  display: none;
}

/* ===== S1 Manifest ===== */
.manifest {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding-block: 6rem;
}
.manifest-inhalt {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding-inline: var(--rand);
}
.manifest-zitat {
  margin-bottom: 2rem;
}
.manifest-text {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--blech);
  max-width: 60ch;
}
/* Schutz-Karte für Text auf hellen/unruhigen Bühnen ohne die .manifest-Zentrierung
   (§0e-123c gerichteter Scrim, gleiches Prinzip wie Fix 4 der Startseite) */
.manifest-inhalt.karte {
  background: rgba(21, 8, 5, 0.78);
  backdrop-filter: blur(8px);
  padding-block: 1.75rem 2rem;
}

/* ===== S2 Sticky-Zustandsszene ===== */
.szene-sticky-wrap {
  position: relative;
}
.szene-sticky-media {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: clip;
  background: var(--grund);
}
.szene-frame {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-wipe) var(--ease-zug);
}
.szene-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.szene-frame.ist-aktiv {
  clip-path: inset(0 0 0 0);
  z-index: 2;
}
.szene-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 8rem var(--rand) 2rem;
}
/* Kontrast-Sicherung: der Kopf sitzt direkt auf wechselnden, teils sehr
   hellen Zustandsfotos (Rohkarosse, Lack) — der buehne-scrim allein reicht
   im oberen Drittel nicht (§0e-123c). Gleiches Karten-Prinzip wie Fix 4. */
.szene-header-karte {
  display: inline-block;
  max-width: 640px;
  background: rgba(21, 8, 5, 0.82);
  backdrop-filter: blur(10px);
  padding: 1.5rem 1.75rem 1.75rem;
}
.szene-kapitel-liste {
  position: relative;
  z-index: 3;
}
.szene-kapitel {
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  padding-inline: var(--rand);
  padding-bottom: clamp(3rem, 9vh, 6rem);
}
.szene-kapitel-inhalt {
  max-width: 420px;
  /* Fix 4 (duell-entscheid): gerichteter Scrim statt schwacher Transparenz —
     auf hellen Frames (z.B. Kapitel 3, grundierte/lackierte Front) war der
     Lead-Absatz unlesbar. Deckung nah an --grund, Motivmitte bleibt frei. */
  background: rgba(21, 8, 5, 0.88);
  backdrop-filter: blur(10px);
  padding: 1.75rem 1.75rem 1.75rem 1.5rem;
  border-left: 1.75px solid var(--cp-rot);
}
@media (min-width: 900px) {
  .szene-kapitel-inhalt {
    margin-left: calc(var(--rand) * -1);
  }
}
.szene-kapitel-nr {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  color: var(--cp-rot);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  display: block;
}
.szene-kapitel-titel {
  margin-bottom: 0.75rem;
}
.szene-kapitel-text {
  color: var(--alu);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  max-width: 42ch;
}

/* ===== S3 Leistungs-Register ===== */
.register {
  padding-block: 6rem 7rem;
}
.register-kopf {
  padding-inline: var(--rand);
  margin-bottom: 2.5rem;
}
.register-zeile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--kante);
}
.register-zeile:last-child {
  border-bottom: 1px solid var(--kante);
}
@media (min-width: 860px) {
  .register-zeile {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: stretch;
  }
}
.register-zeile-text {
  padding: 2.25rem var(--rand);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.register-nr {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--cp-rot);
}
.register-zeile-titel {
  margin: 0;
}
.register-zeile-satz {
  color: var(--alu);
  max-width: 52ch;
  margin: 0;
}
.register-zeile-bild {
  position: relative;
  overflow: clip;
  min-height: 220px;
}
@media (min-width: 860px) {
  .register-zeile-bild {
    min-height: auto;
  }
}
.register-zeile-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ===== S4 Ausstattung: horizontale Snap-Strecke ===== */
.strecke {
  padding-block: 2.5rem 4rem;
}
.strecke-kopf {
  padding-inline: var(--rand);
  margin-bottom: 2rem;
}
.strecke-scroller {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: var(--rand);
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--kante) transparent;
}
.strecke-station {
  flex: 0 0 min(340px, 78vw);
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 4/5;
  overflow: clip;
}
.strecke-station img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.strecke-station-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(21, 8, 5, 0.92), rgba(21, 8, 5, 0));
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--blech);
}

/* ===== S5 Peter ===== */
.peter {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
}
.peter-inhalt {
  position: relative;
  z-index: 2;
  padding: 0 var(--rand) 4.5rem;
  max-width: 560px;
}
.peter-beleg {
  margin-top: 1.25rem;
  color: var(--alu);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* ===== S6 Projekte-Diptychon ===== */
.projekte {
  padding-block: 7rem 10rem;
}
.projekte-kopf {
  padding-inline: var(--rand);
  margin-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.projekte-kopf .lead {
  max-width: 46ch;
}
.projekte-link {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cp-rot);
  border-bottom: 1.75px solid var(--cp-rot);
  padding-bottom: 0.3rem;
  white-space: nowrap;
}
.diptychon-liste {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding-inline: var(--rand);
}
.diptychon {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  position: relative;
}
@media (min-width: 900px) {
  .diptychon {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
  }
  .diptychon .bild-b {
    margin-left: -6rem;
    margin-bottom: -2rem;
  }
  .diptychon--einzel {
    grid-template-columns: 1fr;
  }
  /* Kollaps-Schutz (Fremd-Blick-Fund 16.08.): `justify-items:end` staucht das Grid-Item
     auf seine INHALTSBREITE — und das figure hat als einziges Kind ein
     `position:absolute`-Bild, also Inhaltsbreite 0. Zusammen mit `aspect-ratio:4/3`
     kollabierte die Kachel auf 0x0 und hinterließ ~700px Schwarz. Deshalb: Breite kommt
     vom Grid (`width:100%`), die Rechtsbündigkeit über `margin-left:auto` statt über
     `justify-items`. */
  .diptychon--einzel figure {
    max-width: 620px;
    width: 100%;
  }
  .diptychon--einzel.diptychon--rechts figure {
    margin-left: auto;
  }
  .diptychon--einzel.diptychon--rechts figcaption {
    text-align: right;
    margin-left: auto;
  }
}
.diptychon figure {
  margin: 0;
  position: relative;
  aspect-ratio: 4/3;
  overflow: clip;
}
.diptychon figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.diptychon figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--alu);
  max-width: 42ch;
}

/* ===== S7 Bewertungen — Diashow ===== */
.bewertungen {
  position: relative;
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 5rem;
}
.bewertungen-kopf {
  position: relative;
  z-index: 2;
  padding-inline: var(--rand);
  margin-bottom: 2.5rem;
}
.stars {
  color: var(--cp-rot);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
}
.marquee-wrap {
  position: relative;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    black 6%,
    black 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    black 6%,
    black 94%,
    transparent
  );
}
.marquee-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: marquee-lauf 38s linear infinite;
}
.marquee-wrap:hover .marquee-track,
.marquee-wrap:focus-within .marquee-track,
.marquee-track.pausiert {
  animation-play-state: paused;
}
@keyframes marquee-lauf {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.review-karte {
  flex: 0 0 min(340px, 82vw);
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  padding: 1.5rem;
  align-self: stretch;
}
.review-karte .stars {
  margin-bottom: 0.85rem;
}
.review-karte blockquote {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--blech);
  white-space: normal;
}
.review-karte .review-autor {
  margin-top: auto;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--alu);
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
}
.reviews-grid-statisch {
  display: none;
}
@media (max-width: 720px) {
  .marquee-wrap {
    display: none;
  }
  .reviews-grid-statisch {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-inline: var(--rand);
    position: relative;
    z-index: 2;
  }
  .reviews-grid-statisch .review-karte {
    flex: none;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) {
  .marquee-wrap {
    display: none;
  }
  .reviews-grid-statisch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding-inline: var(--rand);
    position: relative;
    z-index: 2;
  }
}

/* ===== S8 Kontakt / Formular ===== */
.kontakt {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding-block: 6rem;
}
.kontakt-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-inline: var(--rand);
}
@media (min-width: 960px) {
  .kontakt-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }
}
.kontakt-insel {
  background: rgba(21, 8, 5, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--kante);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.kontakt-intro {
  margin-bottom: 1.5rem;
  color: var(--alu);
}
.feld {
  margin-bottom: 1.15rem;
}
.feld label {
  display: block;
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alu);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  background: var(--grund);
  border: 1px solid var(--kante);
  color: var(--blech);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--t-micro) ease;
}
.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  border-color: var(--cp-rot);
  outline: none;
}
.feld-zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}
@media (min-width: 520px) {
  .feld-zeile {
    grid-template-columns: 1fr 1fr;
  }
}
.feld-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--alu);
}
.feld-check input {
  width: auto;
  margin-top: 0.2rem;
}
.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.btn-senden {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--rot-tief);
  color: var(--blech);
  padding: 1rem 1.9rem;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  transition:
    transform var(--t-micro) ease-out,
    background var(--t-micro) ease-out;
  margin-top: 0.5rem;
}
.btn-senden:hover {
  background: var(--cp-rot);
}
.btn-senden:active {
  transform: scale(0.97);
}
.kontakt-fakten {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
}
.kontakt-fakten-block {
}
.kontakt-fakten-block h3 {
  margin-bottom: 0.6rem;
}
.kontakt-fakten-block p {
  color: var(--alu);
  margin: 0;
  line-height: 1.6;
}
.kontakt-fakten-block a {
  color: var(--blech);
  border-bottom: 1px solid var(--kante);
}

/* ===== S9 Anfahrt / Karte 2-Klick ===== */
.anfahrt {
  padding-block: 5rem 6rem;
}
.anfahrt-grid {
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .anfahrt-grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
  }
}
.karte-box {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}
.karte-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.karte-start-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: 0;
  color: var(--blech);
  cursor: pointer;
  padding: 1rem;
}
.karte-start-btn span {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alu);
}
.karte-pin {
  width: 34px;
  height: 34px;
}
.route-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-rot);
  border-bottom: 1.75px solid var(--cp-rot);
  padding-bottom: 0.2rem;
}

/* ===== Footer ===== */
.fuss {
  border-top: 1px solid var(--kante);
  padding: 4rem var(--rand) 6rem;
  background: var(--flaeche);
}
.fuss-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1360px;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .fuss-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}
.fuss-logo {
  height: 44px;
  width: auto;
  margin-bottom: 1.25rem;
}
.fuss-block h3 {
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alu);
  font-weight: 600;
}
.fuss-block p,
.fuss-block a {
  color: var(--blech);
  font-size: 0.9rem;
  line-height: 1.7;
}
.fuss-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fuss-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kante);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  max-width: 1360px;
  margin-inline: auto;
  font-size: 0.8rem;
  /* --alu-tief (1,32:1 auf --grund) war unlesbar — BFSG-Befund der Kontrast-Messung */
  color: var(--alu);
}
.fuss-legal a {
  color: var(--alu);
}

/* ===== Sticky-Kontakt (unten rechts) ===== */
.sticky-kontakt {
  position: fixed;
  right: var(--rand);
  bottom: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--rot-tief);
  color: var(--blech);
  padding: 0.9rem 1.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
  transition:
    transform var(--t-micro) ease-out,
    background var(--t-micro) ease-out;
}
.sticky-kontakt:hover {
  background: var(--cp-rot);
}
.sticky-kontakt:active {
  transform: scale(0.97);
}
@media (max-width: 720px) {
  .sticky-kontakt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    justify-content: center;
    padding: 1rem;
  }
}

/* ===== Skip-Link ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rot-tief);
  /* auf roter Flaeche immer blechweiss, sonst erbt die helle Ansicht Dunkel */
  color: var(--auf-medium);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus {
  left: var(--rand);
  top: 1rem;
}

/* ===== Variante B — Boxengasse (Snap-Bahnen) ===== */
.bahn-wrap {
  padding-block: 7rem 2.5rem;
}
.bahn-kopf {
  padding-inline: var(--rand);
  margin-bottom: 2rem;
}
.bahn-scroller {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--kante) transparent;
}
.bahn-karte {
  flex: 0 0 min(86vw, 620px);
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3/4;
  margin-right: 1.25rem;
  overflow: clip;
}
.bahn-karte:first-child {
  margin-left: var(--rand);
}
.bahn-karte:last-child {
  margin-right: var(--rand);
}
.bahn-karte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.bahn-karte-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.5rem;
  background: linear-gradient(
    0deg,
    rgba(21, 8, 5, 0.94),
    rgba(21, 8, 5, 0) 65%
  );
}
.standbuehne {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.standbuehne-inhalt {
  position: relative;
  z-index: 2;
  padding-inline: var(--rand);
  max-width: 640px;
}

/* ===== Unterseiten: kompaktes Head-H1 (§0e-123b, Textblock unten links) ===== */
.sub-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.014em;
  line-height: 0.94;
  font-size: clamp(2.3rem, 4.4vw, 4.1rem);
  color: var(--blech);
  margin: 0 0 1.1rem;
  text-wrap: balance;
  padding: 0 var(--rand);
}
.sub-sub {
  padding: 0 var(--rand);
  max-width: 52ch;
  color: var(--blech);
  font-size: 1.0625rem;
}

/* ===== Merkmal-Band (nicht-überlappende Variante des Meta-Bands) ===== */
.merkmal-band {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-inline: var(--rand);
}
.merkmal-band .stueck {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alu);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.merkmal-band .stueck::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cp-rot);
  flex: none;
}
.merkmal-band .stueck:first-child::before {
  display: none;
}

/* ===== Abschnitt (generischer Textblock/Sektionskopf) ===== */
.abschnitt {
  padding-block: 5rem;
}
.abschnitt.auf-flaeche {
  background: var(--flaeche);
}
.abschnitt-kopf {
  padding-inline: var(--rand);
  margin-bottom: 2rem;
}
.abschnitt-text {
  padding-inline: var(--rand);
  max-width: 68ch;
  color: var(--blech);
  margin: 0;
}
.abschnitt-text + .abschnitt-text {
  margin-top: 1rem;
}
.abschnitt-text.alu {
  color: var(--alu);
}
.abschnitt-beleg {
  padding-inline: var(--rand);
  color: var(--alu);
  font-size: 0.85rem;
  margin-top: 1.5rem;
  max-width: 68ch;
}
.abschnitt-rechtszeile {
  padding-inline: var(--rand);
  color: var(--alu);
  font-size: 0.8rem;
  margin-top: 2rem;
  max-width: 68ch;
}

/* ===== Zeilen-Liste (Register ohne Bild, für Leistungs-Zeilen auf Unterseiten) ===== */
.zeilen-liste {
  border-top: 1px solid var(--kante);
}
.zeilen-liste .zeile {
  padding: 1.85rem var(--rand);
  border-bottom: 1px solid var(--kante);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.zeile-nr {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--cp-rot);
}
.zeile-titel {
  margin: 0;
}
.zeile-text {
  color: var(--alu);
  max-width: 62ch;
  margin: 0;
}

/* ===== FAQ ===== */
.faq-item {
  padding: 2rem var(--rand);
  border-top: 1px solid var(--kante);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--kante);
}
.faq-frage {
  margin-bottom: 0.75rem;
}
.faq-antwort {
  color: var(--alu);
  max-width: 68ch;
  margin: 0;
}

/* ===== Team-Grid (die eine erlaubte Karten-Reihe sitewide, nur team.html) ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-inline: var(--rand);
}
@media (max-width: 1100px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}
.team-karte {
  position: relative;
  overflow: clip;
  background: var(--flaeche);
  border: 1px solid var(--kante);
}
.team-karte figure {
  margin: 0;
  position: relative;
  aspect-ratio: 4/5;
  overflow: clip;
}
.team-karte figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.team-karte-text {
  padding: 1.5rem;
}
.team-karte-rolle {
  color: var(--cp-rot);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.team-karte-zitat {
  color: var(--alu);
  font-style: italic;
  margin-top: 0.85rem;
  font-size: 0.92rem;
}

/* ===== Projekt-Kapitel (Deep-Anker-Bühnen auf projekte.html) ===== */
.projekt-kapitel {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--kante);
}
.projekt-kapitel:last-child {
  border-bottom: 1px solid var(--kante);
}
@media (min-width: 900px) {
  .projekt-kapitel {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .projekt-kapitel.rechts .projekt-kapitel-bild {
    order: 2;
  }
}
.projekt-kapitel-bild {
  position: relative;
  min-height: 320px;
  overflow: clip;
}
.projekt-kapitel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.projekt-kapitel-text {
  padding: 3rem var(--rand);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}
.projekt-kapitel-nr {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  color: var(--cp-rot);
  font-size: 1.65rem;
}
.projekt-kapitel-text p {
  color: var(--alu);
  max-width: 48ch;
  margin: 0;
}

/* ===== Legal / Fehlerseiten ===== */
.legal {
  padding-block: 9rem 6rem;
}
.legal .container {
  padding-inline: var(--rand);
  max-width: 820px;
}
.legal h1 {
  margin-bottom: 1.25rem;
}
.legal h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--blech);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  text-transform: none;
}
.legal p,
.legal li {
  color: var(--alu);
  line-height: 1.75;
  margin: 0 0 1rem;
}
.legal a {
  color: var(--cp-rot);
  text-decoration: underline;
}
.legal ul {
  padding-left: 1.25rem;
}
.fehlerseite {
  min-height: 70svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 5rem;
}
.fehlerseite .container {
  padding-inline: var(--rand);
  max-width: 640px;
}

/* ===== Utility ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Choreografie 3: Gegenlauf-Parallax auf den Bildbühnen (§0b Nr. 3, §0e-54) =====
   Tiefe aus unterschiedlich schnell laufenden Ebenen statt aus Festhalten — kein Pin,
   kein Scrub. Der Überstand deckt den Versatz, damit an keiner Kante eine Lücke entsteht. */
.buehne-media[data-parallax] {
  inset: -7% 0;
  height: 114%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .buehne-media[data-parallax] {
    inset: 0;
    height: 100%;
    transform: none !important;
  }
}

/* ===== Kopfleiste über MEHRERE Desktop-Breiten (§0e-130) =====
   Befund bei 1024: Logo und erster Link berührten sich (Abstand 0 statt >24px), und die
   Nav-Punkte brachen mit Trennstrich um („WERK-STATT", „RESTAURIE-RUNG"). Reihenfolge des
   Ausräumens nach §0e-130c: erst Abstände und Logogröße, NIE die Navigation selbst. */
.nav-links a,
.nav-links li {
  white-space: nowrap;
  hyphens: none;
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav {
    padding-inline: 1.5rem;
    gap: 1.5rem;
  }
  .nav-logo {
    height: 52px;
  }
  .nav-links {
    gap: 1.15rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav-links {
    gap: 1.5rem;
  }
}

/* ===== Szenen-Auftakt vor der klebenden Bühne =====
   Ersetzt den früheren .szene-header, der absolut IN der Sticky-Fläche lag und ab
   Kapitel 02 unter den Kapitel-Karten lag (Text auf Text, §0e-58 Gegenrichtung).
   Als eigener Block davor gibt es nie zwei Textebenen gleichzeitig — und der
   Auftakt braucht keine Karte mehr, weil er auf ruhigem Grund steht. */
.szene-auftakt {
  max-width: 720px;
  padding-block: clamp(3rem, 7vh, 5rem) clamp(2rem, 5vh, 3.5rem);
}
.szene-auftakt .lead {
  max-width: 54ch;
}

/* ===== Alternative Sektions-Öffnungen (§0b Nr. 2 / §0e-87) =====
   Die Formel Eyebrow → H2 → Lead darf 2× pro Seite vorkommen. Vorher stand sie 8×
   und machte genau den Templated-Eindruck, den §0e-87 beschreibt. Sechs Sektionen
   bekommen deshalb eine eigene Öffnungsform. */

/* a) Zahl als Auftakt — „Die Halle" */
.zahl-auftakt {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 0.4rem;
}
.zahl-auftakt__zahl {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3.4rem, 7vw, 6rem);
  line-height: 0.8;
  color: var(--cp-rot);
}
.zahl-auftakt__wort {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--blech);
}

/* b) Riesen-Zeile über die volle Breite — „Projekte" */
.riesenzeile {
  max-width: 100%;
  margin-bottom: 0.5rem;
}

/* c) Wert als Auftakt — „Bewertungen" */
.bewertung-auftakt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
}
.bewertung-auftakt__wert {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3.2rem, 6.5vw, 5.4rem);
  line-height: 0.82;
  color: var(--blech);
}
.bewertung-auftakt__sterne {
  color: var(--cp-rot);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: 0.1em;
}
.bewertung-auftakt__zusatz {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alu);
}

/* d) Zeile im Anschnitt — „Anfahrt" */
.anschnitt-zeile {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alu);
  margin: 0 0 0.5rem;
  padding-left: 2.75rem;
  position: relative;
}
.anschnitt-zeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 2rem;
  height: 1.75px;
  background: var(--cp-rot);
}

/* ============================================================================
   HELL / DUNKEL — Umschaltung (Hamada-Korrektur 16.08.2026)
   ============================================================================
   Grundsatz: die helle Ansicht ist NICHT invertiert, sondern aus derselben
   Logo-Hue 33 abgeleitet (§0e-14b) — warmes Blechweiß statt kaltem Reinweiß,
   die Marke #FC3800 bleibt in beiden Ansichten identisch.

   Der entscheidende Punkt: **Flächen, auf denen ein Vollbild-Medium liegt,
   behalten IMMER helle Schrift.** Das Hero-Video und die Bühnen-Fotos sind
   dunkle Motive — dunkler Text darauf wäre im Hellmodus unlesbar. Dafür gibt
   es eigene Tokens (--auf-medium…), die von der Umschaltung unberührt bleiben.
   ========================================================================== */

:root {
  /* Tokens für Text, der auf einem Foto/Video liegt — themen-unabhängig */
  --auf-medium: oklch(93.4% 0.008 66);
  --auf-medium-leise: oklch(80% 0.01 214);
  --auf-medium-grund: 21, 8, 5;
}

html[data-theme="hell"] {
  --grund: oklch(96.8% 0.008 33); /* #FAF3F1 warmes Blechweiß */
  --flaeche: oklch(93.5% 0.011 33); /* #F1E7E5 */
  --kante: oklch(87% 0.014 33); /* #DDD1CE */
  --blech: oklch(23.5% 0.022 33); /* #281A17 — Text, 15,32:1 */
  --alu: oklch(47% 0.012 214); /* #545D5F — Meta, 6,16:1 */
  --alu-tief: oklch(38% 0.012 214); /* #3B4446 — 9,12:1 */
  /* --cp-rot und --rot-tief bleiben unverändert: die Marke wechselt nicht */
  color-scheme: light;
}
html[data-theme="dunkel"] {
  color-scheme: dark;
}

/* Text auf Medien-Bühnen bleibt in BEIDEN Ansichten hell.
   Wichtig: NICHT einzelne Elemente einfärben — die Typo-Klassen (.d-xxl, .h2, .lead …)
   setzen ihre eigene  und schlagen jede Vererbung. Stattdessen werden die
   TOKENS im Geltungsbereich umdefiniert: innerhalb einer Medien-Bühne zeigen
   --blech und --alu immer auf die hellen Werte, egal welches Theme aktiv ist.
   Damit funktioniert jede bestehende Regel automatisch mit. */
.head,
.buehne,
.szene-sticky-media,
.szene-kapitel-inhalt,
.szene-header-karte,
.manifest-inhalt.karte {
  --blech: var(--auf-medium);
  --alu: var(--auf-medium-leise);
  --alu-tief: var(--auf-medium-leise);
}
.buehne,
.head,
.szene-sticky-media {
  background: rgb(var(--auf-medium-grund));
}
.szene-kapitel-inhalt,
.szene-header-karte,
.manifest-inhalt.karte {
  background: rgba(var(--auf-medium-grund), 0.88);
}

/* Kopfleiste: in der hellen Ansicht deckend hell statt deckend dunkel */
/* Ueber dem Hero liegt in BEIDEN Ansichten dasselbe dunkle Video — der Verlauf
   der Kopfleiste bleibt deshalb auch in der hellen Ansicht dunkel, sonst stuende
   heller Text auf hellem Verlauf ueber dunklem Bild (Befund 16.08.2026). */
html[data-theme="hell"] .nav:not(.ist-solide) {
  background: linear-gradient(180deg, rgba(21, 8, 5, 0.72), rgba(21, 8, 5, 0));
}
html[data-theme="hell"] .nav.ist-solide {
  background: var(--grund);
}
html[data-theme="hell"] .nav.ist-solide .nav-links a,
html[data-theme="hell"] .nav.ist-solide .nav-burger,
html[data-theme="hell"] .nav.ist-solide .theme-schalter {
  color: var(--blech);
}
/* Über dem Hero liegt ein dunkles Video — dort bleibt die Nav-Schrift hell,
   bis sie beim Scrollen auf den hellen Grund trifft. */
html[data-theme="hell"] .nav:not(.ist-solide) .nav-links a,
html[data-theme="hell"] .nav:not(.ist-solide) .nav-burger {
  color: var(--auf-medium);
}

/* Das Logo wechselt mit: auf hellem Grund die Originalmarke mit schwarzer
   Dachlinie, auf dunklem die Fassung in Blechweiß (§0e-24: die Wortmarke
   bleibt in beiden Fällen im gemessenen CP-Rot). */
.nav-logo--dunkel,
.fuss-logo--dunkel {
  display: block;
}
.nav-logo--hell,
.fuss-logo--hell {
  display: none;
}
html[data-theme="hell"] .nav.ist-solide .nav-logo--dunkel,
html[data-theme="hell"] .fuss-logo--dunkel {
  display: none;
}
html[data-theme="hell"] .nav.ist-solide .nav-logo--hell,
html[data-theme="hell"] .fuss-logo--hell {
  display: block;
}

/* Umschalter */
.theme-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--kante);
  color: inherit;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  transition:
    border-color var(--t-micro) ease,
    color var(--t-micro) ease;
}
.theme-schalter:hover {
  border-color: var(--cp-rot);
}
.theme-schalter svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}
.theme-schalter__text {
  display: none;
}
@media (min-width: 1200px) {
  .theme-schalter__text {
    display: inline;
  }
}
.theme-schalter .ikon-hell {
  display: none;
}
html[data-theme="hell"] .theme-schalter .ikon-hell {
  display: block;
}
html[data-theme="hell"] .theme-schalter .ikon-dunkel {
  display: none;
}
html[data-theme="hell"] .nav:not(.ist-solide) .theme-schalter {
  color: var(--auf-medium);
  border-color: rgba(237, 232, 228, 0.4);
}

/* Fuß und Formular-Inseln in der hellen Ansicht */
html[data-theme="hell"] .fuss {
  background: var(--flaeche);
}
html[data-theme="hell"] input,
html[data-theme="hell"] textarea,
html[data-theme="hell"] select {
  background: var(--grund);
  color: var(--blech);
  border-color: var(--kante);
}

/* --- Hell/Dunkel, Nachzug 1: Karten INNERHALB einer Medien-Bühne ---------
   Die Bewertungskarten liegen auf der abgedunkelten Foto-Bühne. Ihr Grund war
   var(--flaeche) und wurde in der hellen Ansicht hell — heller Meta-Text auf
   heller Karte (gemessen 1,54:1). Im Bühnen-Scope bleibt der Kartengrund dunkel. */
.buehne .revkarte,
.buehne .marquee-track > *,
.buehne .karte,
.szene-sticky-media .karte {
  background: rgba(var(--auf-medium-grund), 0.86);
  border-color: rgba(237, 232, 228, 0.16);
}

/* --- Hell/Dunkel, Nachzug 2: Akzentfarbe für kleinen Text ----------------
   #FC3800 trägt auf dunklem Grund 5,34:1, auf hellem nur 3,36:1 — für 13-px-Text
   zu wenig. In der hellen Ansicht übernimmt deshalb --rot-tief die Textrolle.
   Die Marke selbst (Flächen, Logo, Display) bleibt unverändert #FC3800. */
:root {
  --rot-text: var(--cp-rot);
}
html[data-theme="hell"] {
  --rot-text: var(--rot-tief);
}
/* (entfernt 16.08.2026) Eine pauschale a:not(...)-Regel im Hell-Theme hatte die
   Spezifitaet (0,4,2) und ueberschrieb damit JEDE spaetere Farbregel auf Links —
   darunter den Sprunglink auf roter Flaeche (gemessen 2,24:1). Sie war ausserdem
   redundant: die Basis setzt bereits a { color: inherit }. */
html[data-theme="hell"] .link-akzent,
html[data-theme="hell"] .mehr-link,
html[data-theme="hell"] .sterne,
html[data-theme="hell"] .bewertung-auftakt__sterne,
html[data-theme="hell"] .zahl-auftakt__zahl,
html[data-theme="hell"] .szene-kapitel-nr {
  color: var(--rot-text);
}
/* Im Bühnen-Scope bleibt der volle Markenton — dort ist der Grund dunkel. */
.buehne .bewertung-auftakt__sterne,
.buehne .sterne,
.szene-sticky-media .szene-kapitel-nr {
  color: var(--cp-rot);
}

/* --- Hell/Dunkel, Nachzug 3: Sprunglink ---------------------------------- */
.skip-link {
  background: var(--cp-rot);
  color: #fff;
}

/* --- Hell/Dunkel, Nachzug 4: Schrift auf gefüllten Akzentflächen ----------
   Alles, was auf einer roten Fläche steht, ist IMMER blechweiß — sonst erbt es
   in der hellen Ansicht die dunkle Textfarbe (gemessen: 2,24:1 auf dem Kontakt-
   Knopf, 3,68:1 im Sprunglink). Themen-unabhängig, weil die Fläche es ist. */
.nav-cta,
.cta-fuellung,
.skip-link,
.sticky-kontakt,
button[type="submit"],
.btn-senden {
  color: var(--auf-medium);
}
.skip-link {
  background: var(--rot-tief);
}

/* --- Hell/Dunkel, Nachzug 5: Ziffern-Auszeichnungen ---------------------- */
/* Kapitelnummern liegen auf der dunklen Karte → voller Markenton, nicht rot-tief */
.szene-kapitel .szene-kapitel-nr,
.szene-kapitel-inhalt .szene-kapitel-nr {
  color: var(--cp-rot);
}
/* Register-Ziffern stehen auf dem hellen Seitengrund → dunklerer Rotton */
html[data-theme="hell"] .register-nr {
  color: var(--rot-text);
}

/* --- Hell/Dunkel, Nachzug 6: Spezifität korrigieren -----------------------
   Die Theme-Regel `html[data-theme="hell"] .sterne` (0,2,1) schlug die
   Bühnen-Regel `.buehne .sterne` (0,2,0) — dadurch bekamen Elemente auf
   DUNKLEM Grund den abgedunkelten Rotton und fielen auf 2,6:1. Die
   Bühnen-Regel muss die spezifischere sein, weil sie den Sonderfall trägt. */
html[data-theme="hell"] .buehne .bewertung-auftakt__sterne,
html[data-theme="hell"] .buehne .sterne,
html[data-theme="hell"] .szene-kapitel .szene-kapitel-nr,
html[data-theme="hell"] .szene-kapitel-inhalt .szene-kapitel-nr,
html[data-theme="hell"] .szene-sticky-media .szene-kapitel-nr {
  color: var(--cp-rot);
}
html .skip-link {
  background: var(--rot-tief);
  color: var(--auf-medium);
}

/* --- Hell/Dunkel, Nachzug 7: alle Akzent-Textstellen ---------------------
   Vollständige Liste der Klassen, die Text in der Markenfarbe setzen. Auf
   dunklem Grund trägt #FC3800 5,34:1, auf hellem nur 3,36:1 — für Schrift
   unter 24 px zu wenig. In der hellen Ansicht übernimmt --rot-tief (7:1).
   Ausgenommen bleiben Stellen INNERHALB einer dunklen Medien-Bühne. */
html[data-theme="hell"] .projekte-link,
html[data-theme="hell"] .route-link,
html[data-theme="hell"] .team-karte-rolle,
html[data-theme="hell"] .projekt-kapitel-nr,
html[data-theme="hell"] .zeile-nr,
html[data-theme="hell"] .legal a,
html[data-theme="hell"] .stars {
  color: var(--rot-tief);
}
html[data-theme="hell"] .buehne .projekte-link,
html[data-theme="hell"] .buehne .route-link,
html[data-theme="hell"] .buehne .stars,
html[data-theme="hell"] .buehne .zeile-nr {
  color: var(--cp-rot);
}

/* --- Head-Titel: Absetzung gegen das Motiv ------------------------------
   Beim Hell/Dunkel-Durchgang aufgefallen (bestand schon vorher, in beiden
   Ansichten gleich): Das rote Akzentwort „Elfer" steht genau auf dem roten
   Heck des 911 und verschwindet dort. Der Kontrast-Check findet das nicht —
   er misst gegen den CSS-Hintergrund, nicht gegen das Videobild.
   Ein weicher Schlagschatten setzt die Schrift vom Motiv ab, ohne den
   Scrim hochzudrehen (§0e-13: Overlay hochdrehen tötet Material). */
.head-titel .zeile1,
.head-titel .zeile2,
.head-titel .zeile3,
.head-eyebrow,
.head-beweis {
  text-shadow:
    0 1px 2px rgba(21, 8, 5, 0.55),
    0 2px 14px rgba(21, 8, 5, 0.45);
}
.head-titel em {
  text-shadow:
    0 1px 2px rgba(21, 8, 5, 0.8),
    0 2px 10px rgba(21, 8, 5, 0.75),
    0 0 26px rgba(21, 8, 5, 0.6);
}