/* ==========================================================================
   WWB Digital — Stylesheet (Fassung 2, hell)
   --------------------------------------------------------------------------
   Weißes Papier, schwarze Tinte, flüssiges Gold. Farben aus dem Logo
   gemessen, Kontraste gerechnet — Begründung in DESIGN.md.

    1 Schriften · 2 Tokens · 3 Grundlagen · 4 Knöpfe · 5 Kopf & Menü
    6 Hero · 7 Laufband · 8 Szene & Goldscan · 9 Fakten · 10 Ablauf
   11 Website-Check (Formular) · 12 Kurzbericht · 13 Regeln (dunkle Bühne)
   14 Leistungen · 15 Projekte · 16 Fragen · 17 Brücke · 18 Kontaktband
   19 Unterseiten · 20 Fuß · 21 Zeiger · 22 Bewegung & Rückfälle
   ========================================================================== */

/* 1 ── Schriften ------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2 ── Tokens ---------------------------------------------------------------- */

@property --glanz {
  syntax: "<percentage>";
  inherits: true;   /* .gold .wort erbt den Wert — deshalb nur einmalig animieren, nie endlos */
  initial-value: 0%;
}

:root {
  --weiss: #FFFFFF;
  --papier: #F5F3EE;
  --papier-2: #EDEAE2;
  --tinte: #0A0A0A;
  --tinte-2: #55565B;
  --linie: #E4E0D6;
  --linie-stark: #CFCABD;
  --feldrand: #8C8A84;
  --fehler: #B3261E;

  --gold-tief: #A5731C;
  --gold-mitte: #D4AA46;
  --gold-hell: #F7E08F;
  --gold-text: #8A5F12;
  /* Der Verlauf des Logos — für Flächen und für Schrift auf Dunkel */
  --gold-verlauf: linear-gradient(100deg, #A5731C 0%, #CC9E3A 22%, #E6C565 48%, #F7E08F 66%, #EBCC70 84%, #D6B052 100%);
  /* Dunklere Fassung für Schrift auf Hell: jede Stelle ≥ 3,2 : 1 (Großschrift) */
  --gold-schrift: linear-gradient(100deg, #7D5510 0%, #A5731C 30%, #B07F24 50%, #A5731C 70%, #8A5F12 100%);

  --nacht: #0A0A0A;
  --nacht-2: #161616;
  --nacht-linie: #2A2A2A;
  --nacht-text: #F4F2EC;
  --nacht-text-2: #A9AAAE;

  --f-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --rand: clamp(1.25rem, 4vw, 4.5rem);
  --breite: 94rem;
  --kopfhoehe: 4.75rem;
  --r-gross: 1.75rem;
  --r: 1rem;
  --r-klein: .65rem;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: 320ms;
  --schatten-weich: 0 1px 2px rgba(10, 10, 10, .04), 0 12px 32px -12px rgba(10, 10, 10, .12);
  --schatten-gold: 0 50px 120px -50px rgba(165, 115, 28, .45), 0 18px 40px -24px rgba(10, 10, 10, .18);

  interpolate-size: allow-keywords;
}

/* 3 ── Grundlagen ------------------------------------------------------------ */

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

html {
  color-scheme: light;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
}
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 700; }

:focus-visible {
  outline: 2.5px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--gold-hell); color: var(--tinte); }

.rahmen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprung {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 300;
  padding: .8rem 1.1rem;
  border-radius: var(--r-klein);
  background: var(--tinte);
  color: var(--weiss);
  font-family: var(--f-display);
  font-weight: 700;
  translate: 0 -200%;
}
.sprung:focus { translate: 0 0; }

.zeile { display: block; }
/* Masken der Wort-Einblendung: Platz für Unterlängen (g, p, y) lassen */
.wort-mask { padding-bottom: .14em; margin-bottom: -.14em; padding-inline: .02em; margin-inline: -.02em; }

/* Gold als Schrift: der Logo-Verlauf, dunkel genug für weißen Grund */
.gold,
.gold .wort {
  background-image: var(--gold-schrift);
  background-size: 220% 100%;
  background-position: var(--glanz) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.label {
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-2);
}
.label--hell { color: var(--nacht-text-2); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .95rem .45rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kicker__punkt {
  position: relative;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--gold-verlauf);
}
.kicker__punkt::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-mitte);
  opacity: 0;
}

.abschnitt__kopf { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); max-width: 60rem; }
.abschnitt__kopf--split { max-width: none; align-items: end; }
.abschnitt__titel {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.6vw, 5.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.abschnitt__titel--gross { font-size: clamp(2.8rem, 6.6vw, 6.5rem); }
.abschnitt__lead { max-width: 36rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--tinte-2); }

@media (min-width: 62rem) {
  .abschnitt__kopf--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 4rem; }
  .abschnitt__kopf--split > :last-child { justify-self: end; }
}

/* 4 ── Knöpfe ----------------------------------------------------------------- */

.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; }

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.knopf__pfeil { transition: translate var(--t) var(--ease); }
.knopf:hover .knopf__pfeil { translate: .3rem 0; }
.knopf:disabled { opacity: .6; cursor: progress; }

/* Gold: der Logo-Verlauf als Fläche, schwarze Schrift (≥ 4,8 : 1 an jeder Stelle) */
.knopf--gold {
  background: var(--gold-verlauf);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: var(--tinte);
  box-shadow: 0 10px 30px -12px rgba(165, 115, 28, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: background-position 900ms var(--ease), box-shadow var(--t) var(--ease);
}
.knopf--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate 900ms var(--ease);
}
.knopf--gold:hover { background-position: 100% 50%; box-shadow: 0 16px 40px -12px rgba(165, 115, 28, .75), inset 0 1px 0 rgba(255, 255, 255, .5); }
.knopf--gold:hover::after { translate: 120% 0; }

.knopf--tinte { background: var(--tinte); color: var(--weiss); }
.knopf--tinte:hover { background: #262626; }

.knopf--kontur { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf--kontur:hover { background: var(--tinte); color: var(--weiss); }

/* 5 ── Kopf & Menü -------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--kopfhoehe);
  /* Kein backdrop-filter: über der bewegten 3D-Leinwand müsste der Browser den
     Weichzeichner in jedem Bild neu rechnen — auf Büro-PCs spürbares Ruckeln. */
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), translate 500ms var(--ease);
}
.kopf--gerollt { border-bottom-color: var(--linie); background: rgba(255, 255, 255, .98); }
.kopf--versteckt { translate: 0 -100%; }
.kopf:focus-within { translate: 0 0; }

.kopf__innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.kopf__marke { flex: none; display: block; padding-block: .4rem; border-radius: 6px; }
.marke { width: auto; height: 2.85rem; }

.kopf__nav { display: none; margin-left: auto; }
.kopf__nav ul { display: flex; gap: .25rem; }
.kopf__nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .85rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinte-2);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.kopf__nav a:hover { color: var(--tinte); background: var(--papier); }
.kopf__nav a[aria-current="page"] { color: var(--tinte); }
.kopf__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-verlauf);
}

.kopf__cta.knopf { display: none; min-height: 2.9rem; padding: 0 1.25rem; font-size: .88rem; }

.kopf__menueknopf {
  margin-left: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.9rem;
  padding: 0 1.1rem 0 .95rem;
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-display);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.kopf__striche { display: grid; gap: 5px; width: 1.2rem; }
.kopf__striche i { display: block; height: 2px; border-radius: 2px; background: var(--tinte); }
.kopf__striche i:last-child { width: 65%; background: var(--gold-tief); }

@media (min-width: 48rem) {
  .kopf__cta.knopf { display: inline-flex; margin-left: .5rem; }
}
@media (min-width: 76rem) {
  .kopf__nav { display: block; }
  .kopf__menueknopf { display: none; }
}
/* Unter 360 px passen Marke, Röntgenknopf und „Menü" mit den normalen Abständen nicht
   in die Zeile (320 px: 320 nötig, 280 da) — enger stellen statt etwas wegzulassen */
@media (max-width: 22.49rem) {
  .kopf__innen { gap: .75rem; }
  .kopf__marke .marke { height: 2.5rem; }
  .kopf__menueknopf { margin-left: 0; gap: .5rem; padding: 0 .85rem 0 .75rem; }
}

.menue {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: var(--weiss);
  color: var(--tinte);
  overflow: auto;
}
.menue::backdrop { background: rgba(255, 255, 255, .6); }
.menue__innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  min-height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.menue__kopf { display: flex; align-items: center; justify-content: space-between; min-height: var(--kopfhoehe); }
.menue__zu {
  min-height: 2.9rem;
  padding: 0 1.1rem;
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-display);
  font-weight: 700;
  cursor: pointer;
}
.menue__liste { display: grid; }
.menue__liste a {
  display: block;
  padding-block: .55rem;
  border-bottom: 1px solid var(--linie);
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
}
.menue__liste a[aria-current="page"] span {
  background-image: var(--gold-schrift);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.menue__cta { align-self: flex-start; }
.menue__kontakt { display: grid; gap: .25rem; margin-top: auto; font-weight: 600; color: var(--tinte-2); }
.menue__kontakt a { display: inline-block; padding-block: .5rem; }

/* 6 ── Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--kopfhoehe));
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 7vh, 5rem) clamp(4rem, 10vh, 6rem);
}
.hero__licht,
.unterkopf__licht,
.check__licht {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Das Licht reicht unter den gläsernen Kopf — sonst endet es an einer Kante. */
.hero__licht, .unterkopf__licht { top: calc(var(--kopfhoehe) * -1); }
.hero__licht::before {
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  right: -18vmax; top: -22vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 224, 143, .7) 0%, rgba(230, 197, 101, .28) 35%, rgba(255, 255, 255, 0) 68%);
}

.hero__raster {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hero__text { display: grid; gap: clamp(1.25rem, 2.6vh, 1.9rem); justify-items: start; }
.hero__titel {
  font-family: var(--f-display);
  font-size: clamp(3.1rem, 8.2vw, 9.25rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.05em;
}
.hero__lead { max-width: 36rem; font-size: clamp(1.125rem, 1.55vw, 1.4rem); line-height: 1.55; color: var(--tinte-2); }

.domainfeld { width: min(100%, 40rem); }
.domainfeld__label { display: block; margin-bottom: .55rem; font-family: var(--f-display); font-size: .82rem; font-weight: 700; }
.domainfeld__zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .45rem .45rem 1.2rem;
  border: 1.5px solid var(--feldrand);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--schatten-gold);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.domainfeld__zeile:focus-within { border-color: var(--tinte); box-shadow: 0 0 0 4px rgba(212, 170, 70, .35), var(--schatten-gold); }
.domainfeld__prefix { font-weight: 600; color: var(--tinte-2); }
.domainfeld__eingabe {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 3rem;
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  font-weight: 600;
}
.domainfeld__eingabe::placeholder { color: #767470; font-weight: 500; }
.domainfeld__eingabe:focus { outline: none; }
.domainfeld__knopf { flex: none; }
.domainfeld__fehler { min-height: 1.4rem; margin-top: .45rem; padding-left: 1.2rem; font-size: .95rem; font-weight: 600; color: var(--fehler); }
.domainfeld__fehler:empty { min-height: 0; }

@media (max-width: 34rem) {
  .hero__titel { font-size: 11.2vw; }
  .domainfeld__zeile { flex-wrap: wrap; border-radius: 1.4rem; padding: .6rem; }
  .domainfeld__prefix { padding-left: .6rem; }
  .domainfeld__knopf { flex: 1 1 100%; }
}

.versprechen { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .98rem; color: var(--tinte-2); }
.versprechen li { display: inline-flex; align-items: center; gap: .55rem; }
.versprechen li::before {
  content: "";
  flex: none;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.9 2.9 6-6.3' fill='none' stroke='%230A0A0A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat,
    var(--gold-verlauf);
}
.versprechen strong { color: var(--tinte); }

.hero__buehne { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .9; max-height: 72vh; }
.buehne__standbild { width: 100%; }

.hero__weiter {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  z-index: 2;
  width: 2.75rem; height: 2.75rem;
  translate: -50% 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.hero__weiter span {
  width: 1.4rem; height: 2.2rem;
  border: 2px solid var(--tinte);
  border-radius: 999px;
  position: relative;
}
.hero__weiter span::after {
  content: "";
  position: absolute;
  left: 50%; top: .35rem;
  width: 3px; height: .45rem;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--gold-tief);
}

@media (min-width: 62rem) {
  /* Die Überschrift richtet sich nach ihrer Spalte, nicht nach dem Fenster. „Durchleuchtet." ist
     7,32 em breit und lag bei 1920 px 250 px tief in der Bühne — über dem 3D-Stapel. Jetzt füllt
     die längste Zeile höchstens 97 % der Textspalte; dafür reicht die Bühne rechts bis an den
     Bildschirmrand (höchstens 12 rem über den Rahmen hinaus), damit der Stapel nicht schrumpft.
     Die paar Pixel, die 100vw bei einer festen Windows-Scrollleiste zu viel rechnet, schneiden html und body ab. */
  .hero__raster { grid-template-columns: minmax(0, 61%) minmax(0, 1fr); gap: 3rem; }
  .hero__text { container-type: inline-size; }
  .hero__titel { font-size: min(9.25rem, 13.2cqi); }
  .hero__buehne { margin-inline-end: calc(-1 * min(max(var(--rand), (100vw - var(--breite)) / 2), 12rem)); }
}
@media (max-width: 61.99rem) {
  .hero__buehne { max-width: 32rem; justify-self: center; width: 100%; }
  .hero__weiter { display: none; }
}

/* Das SVG-Standbild der Szene */
.stapel { width: 100%; height: auto; overflow: visible; }
.stapel__ebene { fill: rgba(255, 255, 255, .82); stroke: rgba(10, 10, 10, .28); stroke-width: 1.5; }
.stapel__ebene--oben { fill: #FFFFFF; stroke: #A5731C; stroke-width: 2; }
.stapel__ui polygon { fill: #D9D5CA; }
.stapel__ui .stapel__goldbalken { fill: #D4AA46; }
.stapel__punkte circle { fill: #D4AA46; stroke: #FFFFFF; stroke-width: 3; }
.stapel__name { font-family: var(--f-display); font-size: 17px; font-weight: 700; fill: #55565B; }

/* 7 ── Laufband ----------------------------------------------------------------- */

.laufband {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding-block: 1.35rem;
  background: var(--tinte);
  color: var(--nacht-text);
  rotate: -1.2deg;
  margin-block: -.6rem;
  box-shadow: 0 30px 60px -40px rgba(10, 10, 10, .5);
}
.laufband__spur { display: flex; width: max-content; }
.laufband ul { display: flex; flex: none; }
.laufband li {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.laufband li::after {
  content: "";
  width: .8rem; height: .8rem;
  rotate: 45deg;
  background: var(--gold-verlauf);
}

/* 8 ── Szene & Goldscan ---------------------------------------------------------- */

.goldscan {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}
.goldscan--aus { visibility: hidden; }
.webgl .buehne__standbild .stapel,
.webgl .szene__standbild .stapel { visibility: hidden; }

.szene { position: relative; padding-block: clamp(5rem, 12vh, 8rem); }
.szene__buehne { position: relative; }
.szene__raster { position: relative; z-index: 2; display: grid; gap: 3rem; align-items: center; }
.szene__text { display: grid; gap: 2rem; }
.szene__phasen { display: grid; }
.szene__phase {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 1rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--linie);
}
.szene__phase:last-child { border-bottom: 1px solid var(--linie); }
.szene__nr { grid-row: 1 / 3; font-family: var(--f-display); font-weight: 800; color: var(--tinte-2); padding-top: .2rem; transition: color var(--t) var(--ease); }
.szene__name { font-family: var(--f-display); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.szene__satz {
  margin-top: .3rem;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.035em;
  transition: color 500ms var(--ease);
}
.szene__fortschritt { display: none; height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.szene__fortschritt span { display: block; height: 100%; background: var(--gold-verlauf); transform-origin: left; transform: scaleX(0); }
.szene__standbild { width: 100%; }

.szene--aktiv { padding-block: 0; }
.szene--aktiv .szene__buehne { height: 100vh; display: grid; align-items: center; padding-top: var(--kopfhoehe); }
.szene--aktiv .szene__fortschritt { display: block; }
/* Ruhende Sätze: #737479 hält 4,7 : 1 auf Weiß */
.szene--aktiv .szene__satz { color: #737479; }
.szene--aktiv .szene__phase.ist-aktiv .szene__satz { color: var(--tinte); }
.szene--aktiv .szene__phase.ist-aktiv .szene__nr { color: var(--gold-text); }

@media (min-width: 62rem) {
  .szene__raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 4rem; }
}

/* Alles ab hier liegt über der Leinwand */
.fakten, .ablauf, .check, .bericht, .regeln, .leistungen, .projekte, .fragen, .bruecke, .kontaktband, .fuss {
  position: relative;
  z-index: 3;
}

/* 9 ── Fakten --------------------------------------------------------------------- */

.fakten { background: var(--weiss); padding-block: clamp(4rem, 9vh, 6rem); border-top: 1px solid var(--linie); }
.fakten__liste { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fakt { display: grid; gap: .6rem; align-content: start; padding-top: 1.4rem; border-top: 2px solid var(--tinte); }
.fakt__zahl {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.06em;
}
.fakt__wert {
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-variant-numeric: tabular-nums;
  background-image: var(--gold-schrift);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.fakt__einheit { font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.03em; }
.fakt__text { max-width: 20rem; color: var(--tinte-2); }

/* 10 ── Ablauf --------------------------------------------------------------------- */

.ablauf { background: var(--weiss); padding-block: clamp(5rem, 12vh, 9rem); }
.ablauf__schritte { position: relative; display: grid; gap: 2rem; }
.ablauf__linie { display: none; }
.schritt { position: relative; display: grid; gap: .7rem; align-content: start; }
.schritt__nr {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin-bottom: .6rem;
  border-radius: 50%;
  background: var(--weiss);
  border: 1.5px solid var(--tinte);
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
.schritt:last-child .schritt__nr { background: var(--gold-verlauf); border-color: transparent; }
.schritt__titel { font-family: var(--f-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.schritt__text { color: var(--tinte-2); }

@media (min-width: 48rem) { .ablauf__schritte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) {
  .ablauf__schritte { grid-template-columns: repeat(4, 1fr); column-gap: 2.5rem; }
  .ablauf__linie {
    display: block;
    position: absolute;
    left: 1.75rem; right: 1.75rem; top: 1.75rem;
    height: 2px;
    background: var(--linie);
  }
  .ablauf__linie span { display: block; height: 100%; background: var(--gold-verlauf); transform-origin: left; }
}

/* 11 ── Website-Check ---------------------------------------------------------------- */

.check {
  background: var(--papier);
  padding-block: clamp(5rem, 12vh, 9rem);
  /* clip statt hidden: hidden macht die Sektion zum Scrollbehälter, und dann klebt darin nichts */
  overflow: clip;
}
.check__licht::before {
  content: "";
  position: absolute;
  width: 60vmax; height: 60vmax;
  left: 40%; top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 224, 143, .65) 0%, rgba(247, 224, 143, 0) 65%);
}
.check__raster { position: relative; z-index: 1; display: grid; gap: 3rem; align-items: start; }
.check__intro { display: grid; gap: 1.4rem; align-content: start; }
.check__text { max-width: 34rem; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); color: var(--tinte-2); }

.garantien { display: grid; gap: .7rem; }
.garantien li { display: flex; align-items: center; gap: .75rem; font-weight: 700; }
.garantien li::before {
  content: "";
  flex: none;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.9 2.9 6-6.3' fill='none' stroke='%23F7E08F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.warum { max-width: 34rem; padding: 1.2rem 1.4rem; border: 1px solid var(--linie); border-radius: var(--r); background: rgba(255, 255, 255, .7); }
.warum__titel { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-weight: 800; margin-bottom: .4rem; }
.warum__titel::before {
  content: "?";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--gold-verlauf);
  font-size: .85rem;
  color: var(--tinte);
}
.warum p:last-child { color: var(--tinte-2); }

.glaskarte {
  position: relative;
  padding: clamp(1.4rem, 3.2vw, 3rem);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--schatten-gold);
}
.glaskarte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gold-verlauf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .6;
  pointer-events: none;
}

/* Schmal: Überschrift, Text — dann sofort das Formular, Garantien danach */
@media (max-width: 65.99rem) {
  .check__raster { gap: 1.4rem; }
  .check__intro { display: contents; }
  .check__karte { order: 4; margin-block: .6rem 1rem; }
  .garantien { order: 5; }
  .warum, .direkt { order: 6; }
}
@media (min-width: 66rem) {
  .check__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(3rem, 5vw, 6rem); }
  .check__intro { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
}

.formular { display: grid; gap: 1.4rem; }
/* hidden muss gegen display: grid gewinnen — sonst bleibt das Formular nach dem Absenden stehen */
.formular[hidden], .honig[hidden] { display: none; }
.schrittleiste { display: none; gap: .9rem; }
.formular--js .schrittleiste { display: grid; }
.schrittleiste ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.schrittleiste__punkt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--tinte-2);
}
.schrittleiste__punkt span {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--linie-stark);
  font-size: .75rem;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.schrittleiste__punkt.ist-aktiv { color: var(--tinte); }
.schrittleiste__punkt.ist-aktiv span { border-color: var(--tinte); background: var(--tinte); color: var(--weiss); }
.schrittleiste__punkt.ist-erledigt { color: var(--tinte); cursor: pointer; }
.schrittleiste__punkt.ist-erledigt span { border-color: transparent; background: var(--gold-verlauf); color: var(--tinte); }
.schrittleiste__balken { height: 4px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.schrittleiste__balken span {
  display: block;
  height: 100%;
  background: var(--gold-verlauf);
  transform-origin: left;
  transform: scaleX(var(--fortschritt, .333));
  transition: transform 600ms var(--ease);
}
@media (max-width: 30rem) { .schrittleiste__punkt { font-size: 0; gap: 0; } }

.formschritt { display: grid; gap: 1.1rem; }
.formschritt[hidden] { display: none; }
.formschritt__titel {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .2rem;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
}
.formschritt__titel span { font-size: .85rem; letter-spacing: .02em; color: var(--gold-text); }
.formschritt--vor { animation: schritt-vor 520ms var(--ease) both; }
.formschritt--zurueck { animation: schritt-zurueck 520ms var(--ease) both; }

.feld { display: grid; gap: .4rem; align-content: start; }
.feld__label { font-family: var(--f-display); font-size: .85rem; font-weight: 700; }
.feld__eingabe {
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--feldrand);
  border-radius: var(--r-klein);
  background: var(--weiss);
  font-size: 1.05rem;
  font-weight: 500;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.feld__eingabe::placeholder { color: #767470; }
.feld__eingabe:hover { border-color: var(--tinte-2); }
.feld__eingabe:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 4px rgba(212, 170, 70, .35); }
.feld__eingabe--text { min-height: 9rem; resize: vertical; line-height: 1.55; }
.feld__eingabe[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.feld__fehler { font-size: .9rem; font-weight: 600; color: var(--fehler); }
.feld__fehler:empty { display: none; }

.feldpaar { display: grid; gap: 1.1rem; }
@media (min-width: 36rem) {
  .feldpaar { grid-template-columns: 1fr 1fr; }
  .feldpaar--plz { grid-template-columns: 8rem 1fr; }
}

.haken { display: grid; grid-template-columns: 1.5rem 1fr; gap: .15rem .85rem; align-items: start; }
.haken__box {
  width: 1.4rem; height: 1.4rem;
  margin: .2rem 0 0;
  accent-color: var(--tinte);
  cursor: pointer;
}
.haken__label { font-size: .98rem; line-height: 1.5; cursor: pointer; }
.haken__label a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold-tief); text-underline-offset: .2em; }
.haken .feld__fehler { grid-column: 2; }

.honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.formular__meldung { font-weight: 700; color: var(--fehler); }
.formular__meldung:empty { display: none; }

/* Ohne JavaScript: alle Schritte offen, keine Knöpfe (Hinweis steht darunter) */
.formular__knoepfe { display: none; flex-wrap: wrap; align-items: center; gap: .8rem; }
.formular--js .formular__knoepfe { display: flex; }
.formular--js [data-absenden] { display: none; }
.formular--js.formular--offen [data-absenden],
.formular--js[data-letzter="true"] [data-absenden] { display: inline-flex; }
.formular--js[data-letzter="true"] [data-weiter] { display: none; }
.formular--js[data-schritt="1"] [data-zurueck] { display: none; }
.formular__knoepfe [data-weiter], .formular__knoepfe [data-absenden] { margin-left: auto; }
@media (max-width: 30rem) { .formular__knoepfe .knopf { flex: 1 1 auto; white-space: normal; text-align: center; line-height: 1.2; padding-block: .8rem; } }

.schutz { display: none; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; color: var(--tinte-2); }
.formular--js .schutz[data-zustand="laeuft"], .formular--js .schutz[data-zustand="fertig"] { display: flex; }
.schutz__ring {
  width: 1.1rem; height: 1.1rem;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-tief), var(--gold-hell), transparent 70%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%);
  mask: radial-gradient(circle, transparent 52%, #000 54%);
}
.schutz[data-zustand="fertig"] .schutz__ring {
  background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.9 2.9 6-6.3' fill='none' stroke='%23F7E08F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
  -webkit-mask: none;
  mask: none;
}

.ohnejs { display: grid; gap: .4rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--papier); font-size: .98rem; }
.ohnejs a { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.js .ohnejs { display: none; }

.erfolg { display: grid; gap: 1rem; justify-items: center; text-align: center; padding-block: 2rem; }
.erfolg[hidden] { display: none; }
.erfolg:focus { outline: none; }
.erfolg__zeichen svg { width: 5.5rem; height: 5.5rem; }
.erfolg__zeichen circle { fill: none; stroke: #D4AA46; stroke-width: 3; }
.erfolg__zeichen path { fill: none; stroke: #0A0A0A; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 0; }
.erfolg__titel { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.04em; }
.erfolg__text { max-width: 32rem; font-size: 1.1rem; }
.erfolg__spam { font-size: .95rem; color: var(--tinte-2); }

.direkt { display: grid; gap: .3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie-stark); }
.direkt__zeile a { display: inline-block; padding-block: .2rem; font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.direkt__zeile a:hover { color: var(--gold-text); }
.direkt__person { color: var(--tinte-2); }

.bestaetigen { margin-top: 1rem; }

/* 12 ── Kurzbericht ------------------------------------------------------------------ */

.bericht { background: var(--weiss); padding-block: clamp(5rem, 12vh, 9rem); }
.bericht__raster { display: grid; gap: 2rem; align-items: start; }
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.bento__feld {
  position: relative;
  display: grid;
  gap: .5rem;
  align-content: start;
  min-height: 11rem;
  padding: 1.5rem;
  border-radius: var(--r-gross);
  background: var(--papier);
  overflow: hidden;
  transition: translate var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
.bento__feld:hover { translate: 0 -4px; background: var(--weiss); box-shadow: var(--schatten-gold); }
.bento__feld::after {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem; bottom: 0;
  height: 3px;
  background: var(--gold-verlauf);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.bento__feld:hover::after { transform: scaleX(1); }
.bento__nr { font-family: var(--f-display); font-size: .82rem; font-weight: 800; color: var(--gold-text); }
.bento__titel { font-family: var(--f-display); font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.bento__text { color: var(--tinte-2); }
.bento__feld--1 { background: var(--tinte); color: var(--nacht-text); }
.bento__feld--1 .bento__text { color: var(--nacht-text-2); }
.bento__feld--1 .bento__nr { color: var(--gold-hell); }
.bento__feld--1:hover { background: #1C1C1C; }

.beispiel {
  --glanz-x: 50%; --glanz-y: 0%;
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border-radius: var(--r-gross);
  background:
    radial-gradient(40rem 20rem at var(--glanz-x) var(--glanz-y), rgba(247, 224, 143, .35), transparent 60%),
    var(--weiss);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-gold);
}
.beispiel__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding-bottom: 1.2rem; margin-bottom: .6rem; border-bottom: 1px solid var(--linie); }
.beispiel__marke {
  padding: .2rem .6rem;
  border: 1.5px solid var(--tinte);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.beispiel__titel { font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; }
.beispiel__domain { margin-left: auto; font-weight: 600; color: var(--tinte-2); }
.beispiel__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding-block: .8rem; border-bottom: 1px solid var(--linie); }
.beispiel__bereich { font-weight: 700; }
.beispiel__hinweis { margin-top: 1rem; font-size: .88rem; color: var(--tinte-2); }

.stufe { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; }
.stufe__punkt { width: .7rem; height: .7rem; flex: none; border-radius: 50%; }
.stufe--hoch .stufe__punkt { background: #E5484D; }
.stufe--mittel .stufe__punkt { background: #F08A24; }
.stufe--hinweis .stufe__punkt { background: #E9C23A; }
.stufe--ok .stufe__punkt { background: #3DBE7A; }

.legende { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin-top: 2.5rem; color: var(--tinte-2); }
.legende strong { color: var(--tinte); }
.bericht__grenze { margin-top: 1.5rem; max-width: 50rem; font-size: .95rem; color: var(--tinte-2); }

@media (min-width: 66rem) {
  .bericht__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: 2rem; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__feld--1, .bento__feld--6 { grid-column: span 2; }
  .beispiel { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
}

/* 13 ── Regeln: die dunkle Bühne --------------------------------------------------------- */

.regeln {
  position: relative;
  background: var(--nacht);
  color: var(--nacht-text);
  padding-block: clamp(6rem, 16vh, 12rem);
  overflow: hidden;
}
.regeln__glut {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50rem 30rem at 85% 20%, rgba(212, 170, 70, .28), transparent 70%),
    radial-gradient(40rem 30rem at 10% 100%, rgba(165, 115, 28, .22), transparent 70%);
}
.regeln .rahmen { position: relative; }
.regeln__titel {
  margin-top: 1.5rem;
  font-family: var(--f-display);
  font-size: clamp(3rem, 9.5vw, 10rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
/* Auf Dunkel darf das Gold des Logos voll leuchten */
.regeln .gold, .regeln .gold .wort, .fuss .gold, .fuss .gold .wort, .aussage .gold, .aussage .gold .wort { background-image: var(--gold-verlauf); }
.regeln__text { max-width: 44rem; margin-top: 2rem; font-size: clamp(1.125rem, 1.6vw, 1.45rem); line-height: 1.55; color: var(--nacht-text-2); }
.regeln__liste { display: grid; margin-top: clamp(3rem, 7vh, 5rem); border-block: 1px solid var(--nacht-linie); }
.regel { display: grid; gap: .6rem; align-content: start; padding: 2rem 0; }
.regel + .regel { border-top: 1px solid var(--nacht-linie); }
.regel__nr { font-family: var(--f-display); font-weight: 800; color: var(--gold-hell); }
.regel__titel { font-family: var(--f-display); font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -.035em; }
.regel__text { color: var(--nacht-text-2); }
.regeln :focus-visible { outline-color: var(--gold-hell); }
@media (min-width: 56rem) {
  .regeln__liste { grid-template-columns: repeat(3, 1fr); }
  .regel { padding: 2.2rem 2rem 2.4rem 0; }
  .regel + .regel { padding-left: 2rem; border-top: 0; border-left: 1px solid var(--nacht-linie); }
}

/* 14 ── Leistungen -------------------------------------------------------------------- */

.leistungen { position: relative; background: var(--weiss); padding-block: clamp(5rem, 12vh, 9rem); overflow: hidden; }
.leistungen__kopf { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.leistungen__spur { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.leistungen__liste { display: grid; gap: 1.2rem; }
.leistung { --glanz-x: 50%; --glanz-y: 50%; }
.leistung__link {
  position: relative;
  display: grid;
  gap: .9rem;
  align-content: start;
  height: 100%;
  min-height: 26rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--r-gross);
  background:
    radial-gradient(28rem 20rem at var(--glanz-x) var(--glanz-y), rgba(247, 224, 143, .45), transparent 65%),
    var(--papier);
  overflow: hidden;
  transition: box-shadow var(--t) var(--ease);
}
.leistung__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gold-verlauf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.leistung__link:hover { box-shadow: var(--schatten-gold); }
.leistung__link:hover::before { opacity: 1; }
.leistung__nr { font-family: var(--f-display); font-size: .9rem; font-weight: 800; color: var(--gold-text); }
.leistung__name { font-family: var(--f-display); font-size: clamp(2.4rem, 4.4vw, 4.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.leistung__zeile { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.leistung__text { color: var(--tinte-2); max-width: 30rem; }
.leistung__punkte { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.leistung__punkte span { padding: .35rem .8rem; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--weiss); font-size: .88rem; font-weight: 600; }
.leistung__mehr { margin-top: auto; padding-top: 1rem; font-family: var(--f-display); font-weight: 800; }

@media (min-width: 62rem) {
  .leistungen__kopf { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .leistungen__liste { grid-template-columns: repeat(3, 1fr); }
}

.leistungen--quer { padding-block: 0; }
.leistungen--quer .leistungen__buehne { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--kopfhoehe); }
.leistungen--quer .leistungen__spur { width: 100%; padding-inline: max(var(--rand), (100% - var(--breite)) / 2); }
.leistungen--quer .leistungen__liste { display: flex; width: max-content; gap: 1.5rem; will-change: transform; }
.leistungen--quer .leistung { width: min(40rem, 62vw); }
.leistungen--quer .leistung__link { min-height: min(30rem, 56vh); }

/* 15 ── Projekte ----------------------------------------------------------------------- */

.projekte { background: var(--weiss); padding-block: clamp(5rem, 12vh, 9rem); border-top: 1px solid var(--linie); }
.cases { border-bottom: 1px solid var(--linie-stark); }
.case {
  position: relative;
  display: grid;
  gap: .8rem 2rem;
  padding-block: clamp(1.8rem, 4vh, 2.6rem);
  border-top: 1px solid var(--linie-stark);
}
.case__nr { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--tinte-2); }
.case__titel { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.case__kontext { margin-top: .3rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
.case__zahl { display: grid; font-size: .92rem; color: var(--tinte-2); }
.case__zahl strong {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  background-image: var(--gold-schrift);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.case__kurz { color: var(--tinte-2); font-size: 1.05rem; }
.case__teile { display: grid; gap: 1.2rem; margin-top: 1rem; }
.case__teile div { padding-top: 1rem; border-top: 1px solid var(--linie); }
.case__teile dt { font-family: var(--f-display); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .4rem; }
.case__teile dd { color: var(--tinte-2); }
.case__stack { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; margin-top: 1rem; color: var(--tinte-2); }

@media (min-width: 62rem) {
  .case { grid-template-columns: 6rem minmax(0, 1.3fr) 11rem minmax(0, 1fr); align-items: baseline; }
  .case--voll { grid-template-columns: 6rem minmax(0, 1fr) 12rem; }
  .case--voll .case__teile, .case--voll .case__stack { grid-column: 2 / 4; }
  .case__teile { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
}

/* 16 ── Fragen ------------------------------------------------------------------------- */

.fragen { background: var(--papier); padding-block: clamp(5rem, 12vh, 9rem); }
.fragen__raster { display: grid; gap: 2rem; }
.fragen__liste { display: grid; gap: .7rem; }
.frage { border-radius: var(--r); background: var(--weiss); box-shadow: var(--schatten-weich); overflow: hidden; }
.frage::details-content { block-size: 0; overflow: clip; transition: block-size 450ms var(--ease), content-visibility 450ms allow-discrete; }
.frage[open]::details-content { block-size: auto; }
.frage__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.frage__kopf::-webkit-details-marker { display: none; }
.frage__zeichen { position: relative; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--papier); transition: background-color var(--t) var(--ease); }
.frage__zeichen::before, .frage__zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9rem; height: 2px; translate: -50% -50%; border-radius: 2px; background: var(--tinte); }
.frage__zeichen::after { rotate: 90deg; transition: rotate var(--t) var(--ease); }
.frage[open] .frage__zeichen { background: var(--gold-verlauf); }
.frage[open] .frage__zeichen::after { rotate: 0deg; }
.frage__antwort { padding: 0 1.4rem 1.4rem; color: var(--tinte-2); max-width: 52rem; }

@media (min-width: 62rem) {
  .fragen__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 4rem; align-items: start; }
  .fragen .abschnitt__kopf { position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
}

/* 17 ── Brücke ------------------------------------------------------------------------- */

.bruecke { background: var(--weiss); padding-block: clamp(5rem, 12vh, 9rem); }
.bruecke__raster { display: grid; gap: 2.5rem; align-items: center; }
.bruecke__text { display: grid; gap: 1.2rem; }
.bruecke__text .abschnitt__titel { font-size: clamp(2.2rem, 4.6vw, 4.5rem); }
.bruecke__karte {
  --glanz-x: 50%; --glanz-y: 50%;
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--r-gross);
  border: 1px solid var(--linie);
  background: radial-gradient(30rem 20rem at var(--glanz-x) var(--glanz-y), rgba(247, 224, 143, .4), transparent 65%), var(--weiss);
  box-shadow: var(--schatten-weich);
  transition: box-shadow var(--t) var(--ease);
}
.bruecke__karte:hover { box-shadow: var(--schatten-gold); }
.bruecke__karte img { width: min(100%, 26rem); mix-blend-mode: multiply; }
.bruecke__cta { font-family: var(--f-display); font-weight: 800; border-bottom: 2px solid var(--gold-tief); padding-bottom: .15rem; }
@media (min-width: 62rem) { .bruecke__raster { grid-template-columns: 1fr 1fr; column-gap: 5rem; } }

/* 18 ── Kontaktband ------------------------------------------------------------------------ */

.kontaktband { background: var(--papier); padding-block: clamp(5rem, 12vh, 8rem); overflow: hidden; }
.kontaktband::before {
  content: "";
  position: absolute;
  width: 50vmax; height: 50vmax;
  right: -10vmax; bottom: -30vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 224, 143, .7), transparent 65%);
  pointer-events: none;
}
.kontaktband__raster { position: relative; display: grid; gap: 2rem; align-items: end; }
.kontaktband__titel { font-family: var(--f-display); font-size: clamp(2.6rem, 6.4vw, 6.5rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.kontaktband__rechts { display: grid; gap: 1.5rem; }
.kontaktband__tel { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; border-bottom: 2px solid var(--gold-tief); }
@media (min-width: 62rem) { .kontaktband__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 4rem; } }

/* 19 ── Unterseiten ------------------------------------------------------------------------- */

.unterkopf {
  position: relative;
  padding-block: clamp(4.5rem, 14vh, 9rem) clamp(4rem, 10vh, 6.5rem);
  overflow: hidden;
}
.unterkopf__licht::before {
  content: "";
  position: absolute;
  width: 60vmax; height: 60vmax;
  right: -15vmax; top: -25vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 224, 143, .65) 0%, rgba(255, 255, 255, 0) 66%);
}
.unterkopf .rahmen { position: relative; z-index: 1; display: grid; gap: 1.6rem; justify-items: start; }
.unterkopf .unterkopf__raster { align-items: center; gap: 3rem; }
.unterkopf__text { display: grid; gap: 1.6rem; justify-items: start; }
.unterkopf__bild { width: 100%; max-width: 40rem; justify-self: center; }
@media (min-width: 66rem) { .unterkopf .unterkopf__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.check__intro .kicker { justify-self: start; }
.unterkopf__titel { font-family: var(--f-display); font-size: clamp(2.9rem, 7.6vw, 8.25rem); font-weight: 800; line-height: .98; letter-spacing: -.05em; }
.unterkopf--recht .unterkopf__titel { font-size: clamp(2.6rem, 6vw, 5.5rem); }
.unterkopf__zweit { font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.unterkopf__lead { max-width: 44rem; font-size: clamp(1.125rem, 1.6vw, 1.45rem); line-height: 1.55; color: var(--tinte-2); }
.unterkopf--status { min-height: 70vh; display: flex; align-items: center; }
.unterkopf--status .rahmen { width: min(100% - 2 * var(--rand), var(--breite)); }
.kennzahl {
  display: block;
  font-size: clamp(3.6rem, 14vw, 13rem);
  letter-spacing: -.06em;
  white-space: nowrap;
  padding-bottom: .1em;
  background-image: var(--gold-schrift);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.block { position: relative; z-index: 3; background: var(--weiss); padding-block: clamp(4rem, 10vh, 7rem); border-top: 1px solid var(--linie); }
.unterkopf + .block { border-top: 0; }
.block__raster { display: grid; gap: 2.5rem; }
.block__kopf { display: grid; gap: 1rem; align-content: start; }
.block__titel { font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; margin-bottom: 1rem; }
.block--anschrift { background: var(--papier); }
.anschrift { display: grid; gap: .6rem; font-size: 1.1rem; }

.liste { display: grid; gap: 1rem; }
.liste__eintrag { display: grid; gap: .5rem; align-content: start; padding: 1.6rem; border-radius: var(--r-gross); background: var(--papier); }
.liste__nr { font-family: var(--f-display); font-size: .85rem; font-weight: 800; color: var(--gold-text); }
.liste__titel { font-family: var(--f-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.liste__text { color: var(--tinte-2); }
@media (min-width: 44rem) { .liste--2, .liste--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) {
  .block__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 4rem; }
  .liste--3 { grid-template-columns: repeat(3, 1fr); }
  .block__raster:has(.liste--3) { grid-template-columns: 1fr; }
}

.aussage { position: relative; z-index: 3; background: var(--nacht); color: var(--nacht-text); padding-block: clamp(5rem, 12vh, 8rem); }
.aussage__raster { display: grid; gap: 2rem; }
.aussage__titel { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; }
.aussage__text { max-width: 46rem; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.5; color: var(--nacht-text-2); }
@media (min-width: 62rem) { .aussage__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 4rem; } }

.pipeline { position: relative; display: grid; gap: 1.2rem; padding-bottom: 3rem; }
.pipeline__stufe { display: grid; gap: 1rem; align-content: start; padding: 1.6rem; border-radius: var(--r-gross); background: var(--papier); }
.pipeline__stufe ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.pipeline__stufe ul li { padding: .4rem .85rem; border-radius: 999px; background: var(--weiss); border: 1px solid var(--linie-stark); font-weight: 600; font-size: .95rem; }
.pipeline__stufe--1 ul li:nth-child(odd) { rotate: -2.5deg; }
.pipeline__stufe--1 ul li:nth-child(even) { rotate: 2deg; }
.pipeline__stufe--3 { background: var(--tinte); color: var(--nacht-text); }
.pipeline__stufe--3 .label { color: var(--nacht-text-2); }
.pipeline__stufe--3 ul li { background: transparent; border-color: #3A3A3A; color: var(--nacht-text); }
.pipeline__stufe--3 ul li::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--gold-verlauf); }
.pipeline__bahn { position: absolute; left: 0; right: 0; bottom: .8rem; height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.pipeline__bahn span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 10rem), #D4AA46); translate: -100% 0; }
@media (min-width: 56rem) { .pipeline { grid-template-columns: 1.3fr 1fr 1fr; } }

.puls { display: grid; gap: .8rem; }
.puls__feld {
  position: relative;
  height: clamp(16rem, 36vw, 28rem);
  border-radius: var(--r-gross);
  background-color: var(--nacht);
  background-image: radial-gradient(circle, #3A3A3A 1.2px, transparent 1.7px);
  background-size: 22px 22px;
  overflow: hidden;
}
.puls__welle { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(212, 170, 70, .1) 70%, rgba(247, 224, 143, .5) 98%, #F7E08F); translate: -110% 0; }
.puls__ereignis { position: absolute; left: 60%; top: 40%; display: flex; align-items: center; gap: .7rem; }
.puls__punkt { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: var(--gold-hell); }
.puls__punkt::after { content: ""; position: absolute; inset: -.6rem; border-radius: 50%; border: 1.5px solid var(--gold-hell); opacity: 0; }
.puls__label { padding: .4rem .7rem; border-radius: 999px; background: rgba(10, 10, 10, .8); border: 1px solid #3A3A3A; color: var(--gold-hell); font-family: var(--f-display); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.puls__hinweis { font-size: .9rem; color: var(--tinte-2); }

.recht { padding-block: clamp(2rem, 6vh, 4rem) clamp(5rem, 12vh, 8rem); }
.recht__abschnitt { max-width: 50rem; padding-block: 2rem; border-top: 1px solid var(--linie); }
.recht__abschnitt:first-child { border-top: 0; padding-top: 0; }
.recht__abschnitt h2 { font-family: var(--f-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .9rem; }
.recht__abschnitt p, .recht__abschnitt li { color: var(--tinte-2); }
.recht__abschnitt p + p, .recht__abschnitt p + ul, .recht__abschnitt ul + p { margin-top: .85rem; }
.recht__abschnitt ul { display: grid; gap: .45rem; }
.recht__abschnitt li { position: relative; padding-left: 1.3rem; }
.recht__abschnitt li::before { content: ""; position: absolute; left: .15rem; top: .68em; width: .45rem; height: 2px; background: var(--gold-tief); }
.recht__abschnitt strong { color: var(--tinte); font-weight: 700; }
.recht__abschnitt a { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gold-tief); text-decoration-thickness: 1.5px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.recht__abschnitt a:hover { text-decoration-color: currentColor; }
.recht__abschnitt[id] { scroll-margin-top: 6.5rem; }
/* Abgesetzter Kasten: Widerspruchsrecht (Art. 21 Abs. 4 DSGVO: „getrennt von anderen Informationen“) */
.recht__abschnitt--hervor { margin-block: 1.5rem; padding: 1.6rem clamp(1.1rem, 3vw, 1.8rem); border: 1px solid var(--linie); border-left: 3px solid var(--gold-tief); border-radius: 6px; background: var(--papier); }
.recht__abschnitt--hervor + .recht__abschnitt { border-top: 0; }

/* 20 ── Fuß ------------------------------------------------------------------------------ */

.fuss { background: var(--nacht); color: var(--nacht-text); padding-block: clamp(4rem, 10vh, 7rem) 2rem; overflow: hidden; }
.fuss__gross {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 10.5vw, 11.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.06em;
  padding-bottom: clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid var(--nacht-linie);
}
.fuss__raster { display: grid; gap: 2.5rem; padding-top: 3rem; }
.fuss__logo { display: inline-block; border-radius: 6px; }
.fuss__logo .marke { height: 3.2rem; }
.fuss__zeile { margin-top: 1.2rem; color: var(--nacht-text-2); }
.fuss__signatur { margin-top: .3rem; font-family: var(--f-display); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hell); }
.fuss__nav ul { display: grid; }
.fuss__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--f-display); font-weight: 700; color: var(--nacht-text); transition: color var(--t) var(--ease); }
.fuss__nav a:hover, .fuss__kontakt a:hover { color: var(--gold-hell); }
.fuss__kontakt { display: grid; gap: .1rem; align-content: start; }
.fuss__kontakt a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.fuss__creative { color: var(--nacht-text-2); }
.fuss__creative a { color: var(--nacht-text); }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--nacht-linie); font-size: .92rem; color: var(--nacht-text-2); }
.fuss__recht { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
.fuss__recht a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss__recht a:hover { color: var(--nacht-text); }
.fuss :focus-visible { outline-color: var(--gold-hell); }
.fuss .label { color: var(--nacht-text-2); }
@media (min-width: 56rem) { .fuss__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; } }

/* Klebende Aktionsleiste auf dem Handy — die Hauptaktion bleibt immer in Reichweite */
.rufleiste { display: none; }
@media (max-width: 47.99rem) {
  body { padding-bottom: 5.25rem; }
  .rufleiste {
    position: fixed;
    left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    gap: .6rem;
    padding: .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 40px -18px rgba(10, 10, 10, .35), 0 0 0 1px rgba(10, 10, 10, .06);
    transition: translate 450ms var(--ease), opacity 300ms var(--ease);
  }
  .rufleiste--weg { translate: 0 150%; opacity: 0; pointer-events: none; }
  .rufleiste__cta { flex: 1; }
  .rufleiste__tel { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--tinte); }
  .rufleiste__tel svg { width: 1.3rem; height: 1.3rem; fill: var(--gold-hell); }
}

/* 21b ── Zweite Ausbaustufe: Effekte ------------------------------------------- */

/* Röntgenlinse: Hinweis unter der Bühne */
.buehne__hinweis {
  position: absolute;
  left: 50%; bottom: .5rem;
  translate: -50% 0;
  z-index: 3;
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .45rem .9rem .45rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  box-shadow: var(--schatten-weich);
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 600ms var(--ease);
}
.buehne__maus { position: relative; width: .85rem; height: 1.3rem; border: 1.5px solid var(--tinte); border-radius: 999px; }
.buehne__maus::after { content: ""; position: absolute; left: 50%; top: .2rem; width: 2px; height: .3rem; translate: -50% 0; border-radius: 2px; background: var(--gold-tief); }
@media (hover: hover) and (pointer: fine) {
  .webgl .buehne__hinweis { display: flex; }
}
.linse-entdeckt .buehne__hinweis { opacity: 0; }

/* Durchleuchtbare Schrift — Zeilen dürfen nicht zwischen Buchstaben umbrechen */
.zeichen { text-align: center; }
.hero__titel .zeile, .fuss__gross .zeile { white-space: nowrap; }
.gold .zeichen {
  background-image: var(--gold-schrift);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gold:has(.zeichen) { background-image: none; animation: none; }
.fuss .gold .zeichen { background-image: var(--gold-verlauf); }

/* Bento: Symbole und Lichtkante */
.bento__symbol {
  width: 2.75rem; height: 2.75rem;
  margin-bottom: .6rem;
  fill: none;
  stroke: var(--gold-tief);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bento__feld--1 .bento__symbol { stroke: var(--gold-hell); }
.bento--js .bento__symbol * { stroke-dasharray: var(--laenge, 200); stroke-dashoffset: var(--laenge, 200); transition: stroke-dashoffset 1.6s var(--ease); }
.bento--js .ist-gezeichnet .bento__symbol * { stroke-dashoffset: 0; }
.bento__feld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(16rem circle at var(--spot-x, -50%) var(--spot-y, -50%), #D4AA46, rgba(212, 170, 70, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.bento:hover .bento__feld::before { opacity: 1; }
.bento:hover .bento__feld:not(.bento__feld--1) {
  background: radial-gradient(20rem circle at var(--spot-x, -50%) var(--spot-y, -50%), rgba(247, 224, 143, .38), transparent 65%), var(--papier);
}

/* Beispielkarte: Scanlinie */
.beispiel { overflow: hidden; }
.beispiel__scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.beispiel__scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D4AA46 20%, #F7E08F 60%, transparent);
  box-shadow: 0 0 26px 5px rgba(212, 170, 70, .45);
}
.beispiel__scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -7rem;
  height: 7rem;
  background: linear-gradient(to top, rgba(247, 224, 143, .38), transparent);
}

/* Ablauf als Kartenstapel (Desktop, mit Bewegung) */
.ablauf--stapel { display: block; }
.ablauf--stapel .ablauf__linie { display: none; }
.ablauf--stapel .schritt {
  position: sticky;
  top: calc(var(--kopfhoehe) + 2rem + var(--i) * 1.4rem);
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 4vw, 4rem);
  align-content: center;
  min-height: 17rem;
  margin-bottom: 10vh;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--linie);
  border-radius: 2rem;
  background: var(--papier);
  box-shadow: 0 30px 60px -40px rgba(10, 10, 10, .25);
  transform-origin: 50% 0;
  will-change: transform;
}
.ablauf--stapel .schritt:last-child { margin-bottom: 0; background: var(--tinte); border-color: var(--tinte); color: var(--nacht-text); }
.ablauf--stapel .schritt__nr,
.ablauf--stapel .schritt:last-child .schritt__nr {
  grid-row: 1 / 3;
  width: auto; height: auto;
  margin: 0;
  border: 0;
  background: var(--gold-schrift);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-size: clamp(5rem, 9vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.07em;
  place-items: start;
}
.ablauf--stapel .schritt:last-child .schritt__nr { background: var(--gold-verlauf); -webkit-background-clip: text; background-clip: text; }
.ablauf--stapel .schritt__titel { align-self: end; font-size: clamp(1.9rem, 3.2vw, 3rem); }
.ablauf--stapel .schritt__text { align-self: start; max-width: 36rem; font-size: 1.15rem; }
.ablauf--stapel .schritt:last-child .schritt__text { color: var(--nacht-text-2); }

/* Nav-Pille */
.kopf__nav ul { position: relative; isolation: isolate; }
.kopf__pille {
  position: absolute;
  left: 0; top: 50%;
  z-index: -1;
  width: 0; height: 2.5rem;
  translate: 0 -50%;
  border-radius: 999px;
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--linie);
  opacity: 0;
  pointer-events: none;
}
.js .kopf__nav a:hover { background: transparent; }

/* Iris: die dunkle Bühne öffnet sich — als wachsende Scheibe statt clip-path,
   weil clip-path jedes Bild die ganze Sektion neu zeichnet */
.iris--js { background: transparent; isolation: isolate; overflow: clip; }
.iris {
  position: absolute;
  left: 50%; top: 30%;   /* nahe der Überschrift: sie steht früh auf Schwarz */
  z-index: -1;
  border-radius: 50%;
  background: var(--nacht);
  pointer-events: none;
  will-change: transform;
}

/* Goldfunken */
.funken { position: fixed; inset: 0; z-index: 500; width: 100%; height: 100%; pointer-events: none; }

/* 23 ── Röntgenblick ------------------------------------------------------------------------ */

.roentgen-symbol { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.roentgen-symbol__kern { fill: var(--gold-tief); stroke: none; }

.roentgen-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 2.9rem;
  min-height: 2.9rem;
  margin-left: auto;
  padding: 0 .8rem;
  border: 1.5px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.roentgen-knopf[hidden], .einladung[hidden] { display: none; }
.roentgen-knopf:hover { border-color: var(--tinte); }
.roentgen-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.roentgen-knopf[aria-pressed="true"] { background: var(--tinte); border-color: var(--gold-mitte); color: var(--gold-hell); }
.roentgen-knopf[aria-pressed="true"] .roentgen-symbol__kern { fill: var(--gold-hell); }
@media (min-width: 76rem) { .roentgen-knopf { margin-left: .75rem; } }
@media (min-width: 90rem) {
  .roentgen-knopf { padding: 0 1rem 0 .8rem; }
  .roentgen-knopf__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

.hero__oben { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.einladung {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.5rem;
  padding: .4rem 1rem .4rem .7rem;
  border: 1.5px dashed var(--gold-tief);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.einladung:hover, .einladung[aria-pressed="true"] { background: var(--tinte); color: var(--gold-hell); border-style: solid; border-color: var(--tinte); }
.einladung:hover .roentgen-symbol__kern, .einladung[aria-pressed="true"] .roentgen-symbol__kern { fill: var(--gold-hell); }

/* Die Röntgenansicht: alles dunkel, Linien und Marken in Gold. Nur Farben und
   Konturen ändern sich — kein Layout, damit nichts springt. */
html.roentgen { --r-grund: #07080A; --r-text: #ECE6D6; --r-gold: #F7E08F; --r-linie: rgba(247, 224, 143, .32); color-scheme: dark; background: var(--r-grund); }
html.roentgen body { background: var(--r-grund); color: var(--r-text); }
html.roentgen body *:not(canvas, svg, svg *, input, textarea, select, .befund, .befund *, .roentgen-marke, .roentgen-knopf, .roentgen-knopf *) {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--r-text) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: var(--r-linie) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.roentgen body *:not(.befund, .befund *, .roentgen-knopf)::before,
html.roentgen body *:not(.befund, .befund *, .roentgen-knopf)::after { background-image: none !important; box-shadow: none !important; }
/* body im Selektor: muss die allgemeine Regel oben (gleiche Wichtigkeit) an Spezifität schlagen */
html.roentgen body :is(h1, h2, h3, .gold, .gold *, .zeichen, .fakt__wert, .schritt__nr, .regel__nr, .leistung__nr):not(.befund *) { color: var(--r-gold) !important; }
html.roentgen :is(main section, .kopf, .fuss, form, nav, figure, h1, h2, h3, p, li, a, button, img, details, .laufband, .glaskarte, .schritt, .leistung, .bento__feld):not(.befund, .befund *) {
  outline: 1px dashed var(--r-linie);
  outline-offset: 3px;
}
html.roentgen :focus-visible { outline: 2px solid var(--r-gold) !important; outline-offset: 3px; }
html.roentgen a { text-decoration-color: var(--r-gold) !important; }
html.roentgen img { filter: invert(1) hue-rotate(180deg); }
html.roentgen :is(input, textarea, select) { background-color: #111216 !important; color: var(--r-text) !important; border-color: rgba(247, 224, 143, .55) !important; }
html.roentgen ::placeholder { color: #9C9888 !important; }
/* Was klebt oder sich überlagert, braucht Grund — sonst scheint Text durch */
html.roentgen .kopf, html.roentgen .menue, html.roentgen .ablauf--stapel .schritt { background-color: var(--r-grund) !important; }
html.roentgen .kopf { border-bottom-color: var(--r-linie) !important; }
/* Die 3D-Leinwand liegt fest hinter der Seite: Nur Hero und Szene dürfen sie zeigen */
html.roentgen body main > :not(.hero, .szene), html.roentgen body .fuss { background-color: var(--r-grund) !important; }
html.roentgen .kopf--versteckt .roentgen-marke { opacity: 0; }
html.roentgen .rufleiste { display: none; }
html.roentgen .kopf__striche i { background-color: var(--r-text) !important; }
html.roentgen .roentgen-knopf { background: var(--tinte); color: var(--r-gold); border-color: var(--gold-mitte); }

.roentgen-marke {
  position: absolute;
  z-index: 6;
  translate: 0 -50%;
  padding: .12rem .45rem;
  border: 1px solid rgba(247, 224, 143, .6);
  border-radius: .35rem;
  background: #07080A;
  color: #F7E08F;
  font: 600 .7rem/1.35 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms var(--ease) var(--v, 0s), translate 380ms var(--ease) var(--v, 0s);
}
.roentgen-marke--innen { translate: 0 0; }
html.roentgen .roentgen-marke { opacity: 1; }

/* Scanlinie beim Einschalten */
html.roentgen-scan body::after {
  content: "";
  position: fixed;
  left: 0; top: 0;
  z-index: 90;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #F7E08F 20%, #FFF6D0 50%, #F7E08F 80%, transparent) !important;
  box-shadow: 0 0 24px 6px rgba(247, 224, 143, .45), 0 0 80px 20px rgba(212, 170, 70, .18) !important;
  pointer-events: none;
  animation: roentgen-scan 1.3s cubic-bezier(.45, 0, .2, 1) both;
}
@keyframes roentgen-scan { from { translate: 0 -10px; opacity: 1; } 88% { opacity: 1; } to { translate: 0 100vh; opacity: 0; } }

/* Übergang: die Röntgenansicht breitet sich von der Klickstelle kreisförmig aus */
html:active-view-transition-type(roentgen-an)::view-transition-old(root) { animation: none; }
html:active-view-transition-type(roentgen-an)::view-transition-new(root) { animation: roentgen-auf 900ms var(--ease) both; }
html:active-view-transition-type(roentgen-aus)::view-transition-old(root) { z-index: 2; animation: roentgen-zu 650ms cubic-bezier(.7, 0, .84, 0) both; }
html:active-view-transition-type(roentgen-aus)::view-transition-new(root) { animation: none; }
@keyframes roentgen-auf { from { clip-path: circle(0 at var(--roentgen-x, 90%) var(--roentgen-y, 2rem)); } to { clip-path: circle(150vmax at var(--roentgen-x, 90%) var(--roentgen-y, 2rem)); } }
@keyframes roentgen-zu { from { clip-path: circle(150vmax at var(--roentgen-x, 90%) var(--roentgen-y, 2rem)); } to { clip-path: circle(0 at var(--roentgen-x, 90%) var(--roentgen-y, 2rem)); } }

/* Befund */
.befund {
  position: fixed;
  left: .75rem; right: .75rem; bottom: .75rem;
  z-index: 80;
  display: grid;
  gap: .65rem;
  max-height: min(70vh, calc(100vh - var(--kopfhoehe) - 1.5rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid rgba(247, 224, 143, .4);
  border-radius: 1.25rem;
  background: #0E0F13;
  color: #ECE6D6;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .6);
  transition: opacity 500ms var(--ease), translate 600ms var(--ease);
}
.befund[hidden] { display: none; }
@starting-style { .befund { opacity: 0; translate: 0 1.5rem; } }
@media (max-width: 47.99rem) {
  /* Auf dem Handy soll hinter dem Befund noch Röntgenansicht zu sehen sein */
  .befund { max-height: 56vh; gap: .5rem; padding: .9rem 1rem 1rem; }
  .befund__text, .befund__domain { display: none; }
  .befund__titel { font-size: 1.05rem; }
  .befund__zeile { padding: .45rem .6rem; }
}
@media (min-width: 48rem) { .befund { left: 1.25rem; right: auto; bottom: 1.25rem; width: 27rem; } }
.befund__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.befund__label { display: inline-flex; align-items: center; gap: .5rem; color: #F7E08F; font-family: var(--f-display); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.befund__label .roentgen-symbol__kern { fill: #F7E08F; }
.befund__zu {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid rgba(247, 224, 143, .5);
  border-radius: 999px;
  background: transparent;
  color: #ECE6D6;
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.befund__zu:hover { background: #F7E08F; color: #0A0A0A; }
.befund__titel { font-family: var(--f-display); font-size: 1.2rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #F7E08F; }
.befund__titel:focus { outline: none; }
.befund__titel:focus-visible { outline: 2px solid #F7E08F; outline-offset: 4px; }
.befund__text { font-size: .88rem; line-height: 1.5; color: #B9B4A6; }
.befund__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.befund__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: .1rem .5rem;
  padding: .6rem .7rem .55rem;
  border: 1px solid rgba(247, 224, 143, .18);
  border-radius: .8rem;
  background: #14151A;
}
.befund__zeile dt { grid-column: 1 / -1; font-size: .74rem; line-height: 1.3; color: #CFC9B8; }
.befund__zeile dd { display: contents; }
.befund__wert {
  grid-column: 1;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.befund__status {
  grid-column: 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 700;
  color: #9C9888;
}
.befund__regel { grid-column: 1 / -1; font-size: .68rem; line-height: 1.3; color: #9C9888; }
.befund__zeile[data-status="ok"] .befund__status { color: #F7E08F; }
.befund__zeile[data-status="ok"] .befund__status::before { content: "✓"; }
.befund__zeile[data-status="pruefen"] { border-color: rgba(255, 180, 168, .45); }
.befund__zeile[data-status="pruefen"] .befund__status { color: #FFB4A8; }
.befund__zeile[data-status="pruefen"] .befund__status::before { content: "!"; }
.befund__domain { font-size: .92rem; line-height: 1.45; color: #ECE6D6; }
.befund__cta { justify-self: stretch; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  /* Der Befund kommt, wenn die Scanlinie durch ist */
  .befund { transition-delay: 750ms; }
  html.roentgen .befund__zeile { animation: befund-zeile 520ms var(--ease) both; animation-delay: 900ms; }
  html.roentgen .befund__zeile:nth-child(2) { animation-delay: 980ms; }
  html.roentgen .befund__zeile:nth-child(3) { animation-delay: 1060ms; }
  html.roentgen .befund__zeile:nth-child(4) { animation-delay: 1140ms; }
  html.roentgen .befund__zeile:nth-child(5) { animation-delay: 1220ms; }
  html.roentgen .befund__zeile:nth-child(6) { animation-delay: 1300ms; }
}
@keyframes befund-zeile { from { opacity: 0; translate: -10px 0; } }

/* 24 ── Feinschliff (vierte Runde, 13.09.2026) ---------------------------------------------- */
/* Nur, was beim Scrollen nichts kostet: Compositor-Eigenschaften (scale, translate, opacity),
   einmalige Animationen, Scroll-Timelines ohne Skript. Nichts davon ist endlos. */

/* Satz: keine einzelnen Wörter in der letzten Zeile; lange Komposita in schmalen Karten trennen */
p, li, dd, figcaption { text-wrap: pretty; }
.schritt__text, .liste__text, .fakt__text { hyphens: auto; hyphenate-limit-chars: 10 4 4; }

/* Knöpfe geben beim Drücken nach — die eigene Eigenschaft `scale`, damit sie dem Magnet (transform) nicht in die Quere kommt */
.knopf { transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), scale 160ms var(--ease); }
.knopf--gold { transition: background-position 900ms var(--ease), box-shadow var(--t) var(--ease), scale 160ms var(--ease); }
.knopf:active { scale: .97; }
/* Schrift optisch mittig: gemessen ab Versalhöhe und Grundlinie, nicht ab der Zeilenbox */
.knopf__text { text-box: trim-both cap alphabetic; }

/* Hover nur für echte Mäuse — auf dem Handy bleibt sonst der Glanz nach dem Tippen stehen */
@media (hover: none) {
  .knopf--gold:hover { background-position: 0% 50%; }
  .knopf--gold:hover::after { translate: -120% 0; }
  .knopf:hover .knopf__pfeil { translate: 0 0; }
  .knopf--kontur:hover { background: transparent; color: var(--tinte); }
  .knopf--tinte:hover { background: var(--tinte); }
}

/* Lesefortschritt: eine Goldlinie ganz oben, gerechnet vom Browser selbst (Scroll-Timeline, kein Skript) */
.lesefortschritt { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lesefortschritt {
      display: block;
      position: fixed;
      left: 0; top: 0;
      z-index: 61;
      width: 100%;
      height: 3px;
      background: var(--gold-verlauf);
      transform-origin: 0 50%;
      scale: 0 1;
      pointer-events: none;
      animation: lesen linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes lesen { to { scale: 1 1; } }

/* Zahlenband: die Linie über jeder Zahl zieht sich, wenn sie ins Bild kommt */
.fakt { position: relative; border-top-color: var(--linie); view-timeline: --fakt block; }
.fakt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: var(--tinte);
  transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fakt::before { animation: linie-ziehen linear both; animation-timeline: --fakt; animation-range: entry 30% cover 42%; }
    .fakt:nth-child(2)::before { animation-range: entry 45% cover 46%; }
    .fakt:nth-child(3)::before { animation-range: entry 60% cover 50%; }
    .fakt:nth-child(4)::before { animation-range: entry 75% cover 54%; }
  }
}
@keyframes linie-ziehen { from { scale: 0 1; } }

/* Website-Check: die Formularkarte läuft neben dem längeren Text mit — nur, wo sie ganz auf den Bildschirm passt */
@media (min-width: 66rem) and (min-height: 46rem) {
  .check__raster { align-items: start; }
  .check__karte { position: sticky; top: calc(var(--kopfhoehe) + 1.5rem); }
}
.vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.4rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinte-2);
}
.vertrauen li { display: inline-flex; align-items: center; gap: .5rem; }
.vertrauen svg { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--gold-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Fragen: links unter der Überschrift eine Karte für die Frage, die fehlt */
.fragen__seite { display: contents; }
.nachfrage {
  position: relative;
  order: 3;
  display: grid;
  gap: .45rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--schatten-weich);
}
.nachfrage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gold-verlauf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}
.nachfrage__titel { font-family: var(--f-display); font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.nachfrage__text { color: var(--tinte-2); }
.nachfrage__wege { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.3rem; margin-top: .8rem; }
.nachfrage__mail { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.nachfrage__mail, .kontaktband__tel, .bruecke__cta { text-decoration: none; }
@media (min-width: 62rem) {
  .fragen__seite { display: grid; gap: 2.5rem; align-content: start; position: sticky; top: calc(var(--kopfhoehe) + 2rem); }
  .fragen .abschnitt__kopf { position: static; margin-bottom: 0; }
  .nachfrage { order: 0; max-width: 30rem; }
}

/* Unterstreichungen, die sich von links ziehen (statt fester Randlinie) */
.nachfrage__mail, .fuss__kontakt a, .fuss__recht a, .fuss__hoch {
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 0 1.5px no-repeat;
  transition: background-size 380ms var(--ease), color var(--t) var(--ease);
}
.nachfrage__mail { background-image: var(--gold-verlauf); background-size: 100% 2px; }
@media (hover: hover) and (pointer: fine) {
  .fuss__kontakt a:hover, .fuss__recht a:hover, .fuss__hoch:hover { background-size: 100% 1.5px; }
  .nachfrage__mail:hover { background-image: linear-gradient(var(--tinte), var(--tinte)); }
  .frage__kopf:hover .frage__zeichen { background: var(--papier-2); }
  .frage[open] .frage__kopf:hover .frage__zeichen { background: var(--gold-verlauf); }
}
.frage__zeichen { transition: background-color var(--t) var(--ease), scale 160ms var(--ease); }
.frage__kopf:active .frage__zeichen { scale: .9; }

/* Fuß: Ortszeit und „Nach oben" */
.fuss__ort { font-variant-numeric: tabular-nums; }
.fuss__hoch { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-weight: 700; color: var(--nacht-text); }
.fuss__hoch span { transition: translate var(--t) var(--ease); }
.fuss__hoch:hover span { translate: 0 -.2rem; }

/* Software: das System als Ebenen */
.unterkopf__bildtext { margin-top: .6rem; font-size: .85rem; line-height: 1.5; color: var(--tinte-2); text-align: center; }
.system__leitung { stroke: #C99A35; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 8; }

/* Einmalige Auftritte: die Ebenen der Software-Grafik setzen sich zusammen;
   der Haken nach dem Absenden federt — der einzige Moment mit Überschwinger */
@media (prefers-reduced-motion: no-preference) {
  .system__ebene { animation: ebene-setzen 1.3s var(--ease) both; }
  .system__ebene--1 { --von: -46px; animation-delay: .2s; }
  .system__ebene--2 { --von: 0px; animation-delay: .1s; }
  .system__ebene--3 { --von: 46px; animation-delay: .2s; }
  .system__fluss { animation: ebene-setzen 900ms var(--ease) 1s both; }
  .erfolg:not([hidden]) .erfolg__zeichen {
    animation: feder 900ms linear(0, .22 7%, .78 17%, 1.08 27%, 1.13 33%, 1.06 43%, .98 55%, 1.01 70%, 1) both;
  }
}
@keyframes ebene-setzen { from { opacity: 0; translate: 0 var(--von, 0px); } }
@keyframes feder { from { scale: .4; opacity: 0; } }

/* 22 ── Bewegung & Rückfälle ----------------------------------------------------------------- */

@view-transition { navigation: auto; types: seite; }
::view-transition-old(root) { animation: 520ms var(--ease) both seite-raus; }
::view-transition-new(root) { animation: 720ms var(--ease) both seite-wisch; }

/* Beim Seitenwechsel bleiben Kopf, Lesefortschritt und Rufleiste stehen — nur der Inhalt darunter
   wechselt. Das Etikett oben (.kicker) wandert von der alten an die neue Stelle; kam man über einen
   Link, fliegt der Link selbst (main.js 3b). Die Namen gelten nur für den Typ „seite": Der
   Röntgenblick soll die ganze Seite samt Kopf in einem Kreis umschlagen. */
html:active-view-transition-type(seite) .kopf { view-transition-name: kopf; }
html:active-view-transition-type(seite) .lesefortschritt { view-transition-name: fortschritt; }
html:active-view-transition-type(seite) .rufleiste { view-transition-name: rufleiste; }
html:active-view-transition-type(seite) :is(.hero, .unterkopf, .check--kontakt) .kicker { view-transition-name: seitenmarke; }
/* Druckraster der Beispielkarte (effekte.js, nur ohne 3D-Szene — dort entsteht der Bericht schon als
   Raster): Der Inhalt erscheint durch ein wachsendes Punktraster, darunter verblasst eine Goldplatte.
   Einmalig, 1,6 s; danach nimmt das Skript die Klasse wieder ab. */
@property --raster { syntax: "<length>"; inherits: true; initial-value: 6px; }
.beispiel.ist-raster { animation: raster-wachsen 1.6s cubic-bezier(.3, .1, .3, 1) both; }
.beispiel.ist-raster > :not(.beispiel__scan) {
  -webkit-mask: radial-gradient(circle, #000 var(--raster), #0000 calc(var(--raster) + .7px)) 0 0 / 8px 8px;
  mask: radial-gradient(circle, #000 var(--raster), #0000 calc(var(--raster) + .7px)) 0 0 / 8px 8px;
}
.beispiel.ist-raster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212, 170, 70, .6) 1.3px, transparent 1.9px) 4px 4px / 8px 8px;
  animation: raster-platte 1.6s ease-out both;
}
@keyframes raster-wachsen { from { --raster: 0px; } }
@keyframes raster-platte { to { opacity: 0; } }

/* Den Kopf nicht überblenden: Auf der neuen Seite fehlt beim ersten Bild noch der Röntgenknopf
   (das Skript blendet ihn ein), die Menüpunkte stehen dann versetzt — überblendet läge das Menü doppelt da. */
::view-transition-old(kopf) { animation: none; opacity: 0; }
::view-transition-new(kopf) { animation: none; }
::view-transition-group(seitenmarke) { z-index: 2; animation-duration: 680ms; animation-timing-function: var(--ease); }
/* Altes Wort früh weg, neues spät herein — sonst stehen „SOFTWARE" und „PROJEKTE" kurz übereinander */
::view-transition-old(seitenmarke) { animation: 260ms ease-out both marke-weg; }
::view-transition-new(seitenmarke) { animation: 680ms var(--ease) both marke-rein; }
@keyframes marke-rein { 0%, 30% { opacity: 0; } }
/* Gibt es das Etikett nur auf einer Seite, fliegt nichts: auf der neuen erscheint es erst, wenn der Wisch es erreicht */
::view-transition-new(seitenmarke):only-child { animation: 720ms var(--ease) both marke-spaet; }
::view-transition-old(seitenmarke):only-child { animation: 200ms ease-out both marke-weg; }
@keyframes marke-spaet { 0%, 55% { opacity: 0; } }
@keyframes marke-weg { to { opacity: 0; } }

@keyframes seite-raus { to { scale: .94; filter: brightness(.9); } }
@keyframes seite-wisch { from { clip-path: inset(100% 0 0 0 round 2rem); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes schritt-vor { from { opacity: 0; translate: 28px 0; } }
@keyframes schritt-zurueck { from { opacity: 0; translate: -28px 0; } }
@keyframes glanz { 0%, 100% { --glanz: 0%; } 50% { --glanz: 100%; } }
@keyframes puls-ring { 0% { opacity: .8; scale: .6; } 100% { opacity: 0; scale: 2; } }
@keyframes welle { from { translate: -110% 0; } to { translate: 360% 0; } }
@keyframes ereignis { 0%, 60% { opacity: 0; scale: .6; } 64% { opacity: 1; scale: 1; } 80%, 100% { opacity: 0; scale: 2.4; } }
@keyframes bahn { from { translate: -100% 0; } to { translate: 100% 0; } }
@keyframes drehen { to { rotate: 360deg; } }
@keyframes haken-zeichnen { from { stroke-dashoffset: 48; } }
@keyframes weiter { 0% { translate: -50% 0; opacity: 1; } 70% { translate: -50% .7rem; opacity: 0; } 100% { translate: -50% 0; opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .gold.ist-glanz { animation: glanz 2.2s var(--ease) 1; }
  .kicker__punkt::after { animation: puls-ring 2.2s var(--ease) infinite; }
  .schutz[data-zustand="laeuft"] .schutz__ring { animation: drehen .9s linear infinite; }
  .erfolg:not([hidden]) .erfolg__zeichen path { animation: haken-zeichnen 700ms var(--ease) 200ms both; }
  .puls__welle { animation: welle 8s linear infinite; }
  .puls__punkt::after { animation: ereignis 8s var(--ease) infinite; }
  .pipeline__bahn span { animation: bahn 4.5s linear infinite; }
  .hero__weiter span::after { animation: weiter 2s var(--ease) infinite; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .laufband__spur { width: auto; }
  .laufband__spur ul + ul { display: none; }
  .laufband ul { flex-wrap: wrap; justify-content: center; row-gap: .6rem; }
}

@media print {
  .kopf, .menue, .goldscan, .hero__buehne, .laufband, .hero__weiter, .befund, .roentgen-marke, .einladung, .lesefortschritt, .fuss__hoch { display: none !important; }
  .regeln, .fuss, .aussage { background: #fff; color: #000; }
}

/* ── DATENSCHUTZHINWEIS ───────────────────────────────────────────────
   Markup erzeugt _build/js/src/hinweis.js. Klassen heissen bewusst
   "wwbh-" statt "cookie-" oder "cc-": Werbeblocker blenden die
   ueblichen Namen per Filterliste auf jeder Website aus.
   Kein Inline-Style im Skript — die CSP erlaubt nur style-src 'self'. */

.wwbh-leiste {
  position: fixed;
  left: var(--rand); right: var(--rand); bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 900;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.8rem);
  background: var(--weiss);
  border: 1px solid var(--linie-stark);
  border-radius: 1rem;
  box-shadow: var(--schatten-weich);
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 320ms var(--ease), translate 320ms var(--ease);
}
.wwbh-leiste.ist-da { opacity: 1; translate: 0 0; }

.wwbh-innen {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
}
.wwbh-text { flex: 1 1 22rem; min-width: 0; }

.wwbh-titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  line-height: 1.3;
  color: var(--tinte);
  margin-bottom: .35rem;
}
.wwbh-fliess {
  font-size: .86rem; line-height: 1.6;
  color: var(--tinte-2);
}
.wwbh-stand {
  margin-top: .5rem;
  font-size: .8rem; line-height: 1.5;
  color: var(--gold-text);
}
.wwbh-link {
  color: var(--gold-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wwbh-link:hover { color: var(--tinte); }

.wwbh-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; flex-shrink: 0; }
.wwbh-knopf {
  font-family: var(--f-text);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .02em;
  min-height: 2.9rem;
  padding: 0 1.4rem;
  border-radius: .7rem;
  border: 1.5px solid var(--tinte);
  background: var(--tinte);
  color: var(--weiss);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.wwbh-knopf:hover { background: var(--gold-tief); border-color: var(--gold-tief); }
.wwbh-knopf--leise {
  background: transparent;
  color: var(--gold-text);
  border-color: var(--linie-stark);
}
.wwbh-knopf--leise:hover { background: var(--papier); color: var(--tinte); border-color: var(--feldrand); }
.wwbh-knopf:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 2px; }

/* Fusszeile: Hinweis jederzeit wieder aufrufen */
.wwbh-fusslink {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: .55rem;
}
.wwbh-fusslink:hover { color: var(--nacht-text); }

@media (max-width: 40rem) {
  .wwbh-leiste { left: .75rem; right: .75rem; padding: 1rem 1.1rem; }
  .wwbh-innen { gap: .9rem; }
  .wwbh-knoepfe { width: 100%; }
  .wwbh-knopf { flex: 1 1 0; padding: 0 .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wwbh-leiste { transition: none; opacity: 1; }
}