/* ============================================================
   timonfranke.com — „Signalgelb"
   Dunkler Werkstatt-Stahl, Zollstock-Gelb, Apple-Pacing.
   Handgebaut. Keine Frameworks, keine externen Requests.
   ============================================================ */

/* ---------- Schrift ---------- */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Töne ---------- */
:root {
  --nacht:   oklch(17.5% 0.012 260);
  --nacht-2: oklch(21.5% 0.014 260);
  --hell:    oklch(96% 0.006 95);
  --hell-2:  oklch(74% 0.012 95);
  --gelb:    oklch(86% 0.155 95);
  --gelb-2:  oklch(78% 0.15 92);
  --linie:   oklch(96% 0.006 95 / 0.14);
  --linie-2: oklch(96% 0.006 95 / 0.32);
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --wrap:    1180px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  background: var(--nacht);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 100%;
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.66;
  background: var(--nacht);
  color: var(--hell);
  font-optical-sizing: auto;
}

::selection { background: var(--gelb); color: var(--nacht); }

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

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--gelb);
  outline-offset: 3px;
}
.leitsatz :focus-visible, .proof :focus-visible { outline-color: var(--nacht); }

strong { font-weight: 700; }

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

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.wrap-narrow { max-width: 880px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gelb);
  color: var(--nacht);
  padding: 0.7rem 1.2rem;
  z-index: 100;
  font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Papierkorn / Textur ---------- */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---------- Lesefortschritt ---------- */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      display: block;
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 3px;
      background: var(--gelb);
      transform-origin: 0 50%;
      transform: scaleX(0);
      z-index: 90;
      animation: progress-grow linear both;
      animation-timeline: scroll(root);
    }
    @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ---------- Typo-Bausteine ---------- */
.display {
  font-stretch: 118%;
  font-weight: 810;
  letter-spacing: -0.016em;
  line-height: 1.0;
  font-size: clamp(2.55rem, 5.4vw + 0.5rem, 5.4rem);
  color: var(--hell);
  text-wrap: balance;
}
.hl-gelb { color: var(--gelb); }

.h2 {
  font-stretch: 114%;
  font-weight: 780;
  letter-spacing: -0.012em;
  line-height: 1.02;
  font-size: clamp(2.2rem, 4.2vw + 0.7rem, 4rem);
  color: var(--hell);
  text-wrap: balance;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-stretch: 78%;
  font-weight: 640;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hell-2);
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.kicker::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--gelb);
  flex: 0 0 auto;
}

/* ---------- Kopfzeile ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(17.5% 0.012 260 / 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.top.scrolled { border-bottom-color: var(--linie); }

.top-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-stretch: 115%;
  font-weight: 810;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  color: var(--hell);
  text-transform: uppercase;
}
.brand-sub {
  font-stretch: 78%;
  font-weight: 580;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gelb);
}

.top-nav { display: flex; align-items: center; gap: 1.4rem; }
.top-tel {
  display: inline-block;
  padding-block: 0.6rem;
  font-weight: 660;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--hell);
  border-bottom: 2px solid var(--gelb);
  padding-bottom: 1px;
}
@media (max-width: 560px) { .top-nav a.btn-top { display: none; } }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-stretch: 106%;
  font-weight: 740;
  font-size: 1.02rem;
  line-height: 1;
  text-decoration: none;
  color: var(--nacht);
  background: var(--gelb);
  border: none;
  border-radius: 3px;
  padding: 1.1rem 1.6rem;
  cursor: pointer;
  box-shadow: 0.32rem 0.32rem 0 var(--hell);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 0.5rem 0.5rem 0 var(--hell); }
.btn:active { transform: translate(1px, 1px); box-shadow: 0.15rem 0.15rem 0 var(--hell); }

.btn-top {
  font-size: 0.85rem;
  padding: 0.78rem 1.05rem;
  box-shadow: 0.22rem 0.22rem 0 var(--hell);
}

.btn-ghost {
  background: transparent;
  color: var(--hell);
  border: 1.5px solid var(--linie-2);
  box-shadow: none;
}
.btn-ghost:hover { transform: none; box-shadow: none; background: var(--nacht-2); border-color: var(--hell); }

.cta-note {
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--hell-2);
}
.tel-link {
  color: var(--hell);
  font-weight: 660;
  text-decoration-color: var(--gelb);
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: 0.3rem;
  margin-block: -0.3rem;
}
.hero-brief {
  margin-top: 1.4rem;
  display: inline-block;
  border: 1px solid var(--linie-2);
  padding: 0.75rem 1rem;
  font-size: 0.98rem;
  color: var(--hell-2);
  max-width: 30em;
}
.hero-brief strong { color: var(--gelb); }
.hero-jump {
  margin-top: 1.3rem;
  font-size: 0.95rem;
  color: var(--hell-2);
}
.hero-jump a {
  color: var(--hell);
  font-weight: 660;
  text-decoration-color: var(--gelb);
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: 0.4rem;
  margin-block: -0.15rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(1.6rem, 3.5vw, 3rem);
}
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-plan { position: relative; max-width: 640px; width: 100%; justify-self: end; }
@media (max-width: 920px) { .hero-plan { justify-self: start; max-width: 560px; } }

.hero-sub {
  margin-top: 0.8rem;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  max-width: 26em;
}
.hero-cta { margin-top: 2.2rem; }

.hl { display: block; overflow: hidden; padding-block: 0.04em; }
.hl-in { display: inline-block; }

/* ---------- Plan-Skizze (SVG) ---------- */
.plan {
  width: 100%;
  height: auto;
  stroke: oklch(96% 0.006 95 / 0.8);
  stroke-width: 1.6;
  stroke-linecap: round;
  margin-top: -0.5rem;
}
.plan .thick { stroke-width: 5; stroke: var(--hell); }
.plan .btnbox { fill: oklch(86% 0.155 95 / 0.16); stroke: var(--gelb); }
.plan .pl-4 path { stroke: var(--gelb); }
.plan text {
  stroke: none;
  fill: var(--hell-2);
  font-family: inherit;
  font-size: 13px;
  font-stretch: 80%;
  letter-spacing: 0.06em;
}
.plan .plan-num { font-size: 11px; letter-spacing: 0.1em; fill: var(--gelb); }
.plan .pl-ann line { stroke: var(--linie-2); stroke-width: 1; stroke-dasharray: 3 4; }
.plan .dim line { stroke: var(--gelb-2); stroke-width: 1; }
.plan .dim text { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--gelb-2); }

.plan-cap {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.88rem;
  color: var(--hell-2);
}
.plan-cap::before { content: ""; width: 2.6rem; height: 1px; background: var(--linie-2); }

/* ---------- Stempel ---------- */
.stamp {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--gelb);
  border: 2.5px solid var(--gelb);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--nacht), inset 0 0 0 3px var(--gelb);
  padding: 0.75rem 1.1rem;
  rotate: -7deg;
  font-stretch: 92%;
  font-weight: 760;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
  background: oklch(17.5% 0.012 260 / 0.85);
  z-index: 2;
}
.stamp-hero { top: -1.2rem; right: 0.4rem; }

/* ---------- Gelbes Band ---------- */
.proof {
  background: var(--gelb);
  color: var(--nacht);
  padding-block: 1.5rem;
  overflow: clip;
}
.proof-track { display: flex; width: max-content; gap: 3.2rem; }
.proof-list {
  display: flex;
  gap: 3.2rem;
  list-style: none;
  white-space: nowrap;
  font-stretch: 104%;
  font-weight: 740;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}
.proof-list li { display: flex; align-items: center; gap: 3.2rem; }
.proof-list li::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--nacht);
  display: inline-block;
}
.proof-note {
  margin-block: 1rem 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--hell-2);
  padding-inline: 1.25rem;
}

/* ---------- Messwerte (Lighthouse-Beweis) ---------- */
.messwerte { padding-block: 1.6rem 0.4rem; }
.mw-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.mw-list li {
  border: 2px solid var(--gelb);
  min-width: 8.2rem;
  padding: 0.9rem 1.1rem 0.8rem;
  text-align: center;
}
.mw-num {
  display: block;
  font-stretch: 120%;
  font-weight: 830;
  font-size: 2rem;
  line-height: 1;
  color: var(--gelb);
  font-variant-numeric: tabular-nums;
}
.mw-label {
  display: block;
  margin-top: 0.4rem;
  font-stretch: 80%;
  font-weight: 620;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hell-2);
}
.mw-cap {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--hell-2);
  padding-inline: 1.25rem;
}
.mw-cap a { color: var(--hell); text-decoration-color: var(--gelb); text-underline-offset: 3px; }

/* ---------- Geister-Ziffern ---------- */
.ghost-num {
  position: absolute;
  top: clamp(1rem, 3vw, 2.4rem);
  right: clamp(0.25rem, 2vw, 2.5rem);
  z-index: 0;
  font-stretch: 125%;
  font-weight: 850;
  font-size: clamp(7rem, 17vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px oklch(96% 0.006 95 / 0.12);
  pointer-events: none;
  user-select: none;
}
.ghost-num-inv { -webkit-text-stroke-color: oklch(86% 0.155 95 / 0.14); }

/* ---------- Befund (3 Beats) ---------- */
.befund {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 10vw, 9rem) 0;
}
.befund-list { list-style: none; }
.befund-item {
  min-height: 72svh;
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.befund-head { padding-bottom: clamp(1rem, 3vw, 2.5rem); }
.befund-item .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.befund-item .wrap > :is(.befund-num, .beat, .beat-sub) { grid-column: 1; }
.beat-icon {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: center;
  width: clamp(160px, 19vw, 270px);
}
.befund-item:nth-child(2) .wrap { text-align: right; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.befund-item:nth-child(2) .wrap > :is(.befund-num, .beat, .beat-sub) { grid-column: 2; }
.befund-item:nth-child(2) .beat-icon { grid-column: 1; grid-row: 1 / span 3; }
.befund-item:nth-child(2) .beat-sub { margin-left: auto; }
@media (max-width: 760px) {
  .befund-item .wrap, .befund-item:nth-child(2) .wrap { display: flex; flex-direction: column; align-items: flex-start; }
  .befund-item:nth-child(2) .wrap { align-items: flex-end; }
  .beat-icon { order: -1; width: clamp(130px, 38vw, 190px); margin-bottom: 1.4rem; }
}
.beat-svg {
  display: block;
  height: auto;
  stroke: oklch(96% 0.006 95 / 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.beat-svg .gelb { stroke: var(--gelb); }
.beat-svg .dash { stroke-dasharray: 5 7; }
.beat-svg text {
  stroke: none;
  fill: var(--gelb);
  font-family: inherit;
  font-weight: 720;
  font-size: 14px;
  text-anchor: middle;
}

.befund-num {
  display: block;
  font-stretch: 122%;
  font-weight: 850;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: 0.06em;
  color: var(--gelb);
  margin-bottom: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.beat {
  font-stretch: 116%;
  font-weight: 800;
  letter-spacing: -0.014em;
  line-height: 1.02;
  font-size: clamp(2.3rem, 4.8vw + 0.5rem, 4.6rem);
  color: var(--hell);
}
.beat-sub {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--hell-2);
  max-width: 32em;
}

.befund-close-wrap {
  min-height: 55svh;
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.befund-close {
  font-stretch: 114%;
  font-weight: 780;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  line-height: 1.12;
  max-width: 24em;
  color: var(--hell);
  text-wrap: balance;
}
.befund-close em { font-style: normal; color: var(--gelb); }

/* ---------- Ablauf ---------- */
.blaupause {
  position: relative;
  background: var(--nacht-2);
  border-block: 1px solid var(--linie);
}
.blaupause::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(96% 0.006 95 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(96% 0.006 95 / 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.bp-stage { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
.blaupause .wrap { position: relative; }

.kicker-inv { color: var(--hell-2); }

.bp-lead {
  margin-top: 1.2rem;
  max-width: 30em;
  color: var(--hell-2);
  font-size: 1.1rem;
}

.bp-steps {
  list-style: none;
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.2rem, 4vw, 3.6rem) clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 760px) { .bp-steps { grid-template-columns: 1fr; } }
@media (min-width: 761px) {
  .bp-step:nth-child(even) { translate: 0 2.4rem; }
  .bp-steps { padding-bottom: 2.4rem; }
}

.bp-step {
  border-top: 1px solid var(--linie-2);
  padding-top: 1.3rem;
  position: relative;
}
.bp-big { display: none; }
.bp-num {
  display: block;
  font-stretch: 78%;
  font-weight: 640;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gelb);
  margin-bottom: 0.6rem;
}
.bp-step h3 {
  font-stretch: 114%;
  font-weight: 780;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin-bottom: 0.55rem;
  color: var(--hell);
}
.bp-step p { color: var(--hell-2); font-size: 1.02rem; max-width: 30em; }
.bp-progress { display: none; }

/* ---------- Referenz ---------- */
.ref {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 10vw, 9.5rem);
}
.ref-copy {
  margin-top: 0.5rem;
  max-width: 44em;
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  color: var(--hell-2);
}
.ref-copy a { color: var(--hell); text-decoration-color: var(--gelb); text-underline-offset: 3px; font-weight: 660; }

.ref-cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.ref-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--linie);
  padding-top: clamp(1.8rem, 3.5vw, 3rem);
}
@media (max-width: 680px) { .ref-stats { grid-template-columns: 1fr; } }
.stat {
  display: block;
  font-stretch: 120%;
  font-weight: 830;
  font-size: clamp(3rem, 6.5vw, 5.6rem);
  line-height: 1;
  color: var(--gelb);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  margin-top: 0.6rem;
  max-width: 13em;
  font-size: 0.95rem;
  font-stretch: 94%;
  color: var(--hell-2);
  line-height: 1.45;
}

/* ---------- Sechs Zusagen ---------- */
.zusagen { position: relative; overflow: clip; }
.z-stage { position: relative; padding-block: clamp(5rem, 10vw, 9rem); }
.z-list { list-style: none; }
.z-item {
  border-top: 1px solid var(--linie);
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
}
.z-line {
  display: block;
  font-stretch: 114%;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.06;
  font-size: clamp(1.8rem, 3.6vw, 3.3rem);
  color: var(--hell);
}
.z-line em { font-style: normal; color: var(--gelb); }
.z-sub {
  display: block;
  margin-top: 0.45rem;
  font-size: 1rem;
  color: var(--hell-2);
  max-width: 40em;
}

/* ---------- Leitsatz (voll gelb) ---------- */
.leitsatz {
  position: relative;
  overflow: clip;
  background: var(--gelb);
  color: var(--nacht);
  min-height: 82vh;
  min-height: 82svh;
  display: grid;
  align-content: center;
  padding-block: clamp(6rem, 12vh, 9rem);
}
.leitsatz ::selection { background: var(--nacht); color: var(--gelb); }
.leitsatz-wrap { width: 100%; }
.scope-line {
  font-stretch: 118%;
  font-weight: 830;
  letter-spacing: -0.015em;
  font-size: clamp(2.3rem, 5.6vw, 5.2rem);
  line-height: 1.05;
  color: var(--nacht);
  text-wrap: balance;
}
.lz { display: block; overflow: hidden; padding-block: 0.06em; }
.lz-in { display: inline-block; }
.scope-body {
  margin-top: 1.6rem;
  color: oklch(30% 0.03 95);
  max-width: 40em;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 520;
}
.mass { position: absolute; left: 0; right: 0; }
.mass-top { top: clamp(2rem, 6vh, 3.5rem); }
.mass-bottom { bottom: clamp(2rem, 6vh, 3.5rem); }
.mass-line { display: block; height: 1.5px; background: oklch(17.5% 0.012 260 / 0.55); position: relative; }
.mass-line::before, .mass-line::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 1.5px;
  height: 15px;
  background: oklch(17.5% 0.012 260 / 0.55);
}
.mass-line::before { left: clamp(1rem, 3vw, 2.5rem); }
.mass-line::after { right: clamp(1rem, 3vw, 2.5rem); }

/* ---------- Preis ---------- */
.preis {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 10vw, 9.5rem);
}
.mega { margin-top: clamp(1rem, 2.5vw, 2rem); }
.mega-num {
  display: block;
  font-stretch: 121%;
  font-weight: 840;
  font-size: clamp(4.6rem, 13vw, 10.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--gelb);
  font-variant-numeric: tabular-nums;
}
.mega-2 .mega-num { font-size: clamp(3rem, 8vw, 6.4rem); color: var(--hell); }
.mega-label {
  display: block;
  margin-top: 0.7rem;
  font-stretch: 84%;
  font-weight: 640;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hell-2);
}
.mega-2 { margin-top: clamp(2rem, 4vw, 3.2rem); }

.preis-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 760px) { .preis-cols { grid-template-columns: 1fr; } }
.preis-col-h {
  font-stretch: 80%;
  font-weight: 660;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gelb);
  border-top: 1px solid var(--linie-2);
  padding-top: 1rem;
  margin-bottom: 1rem;
}
.preis-list { list-style: none; display: grid; gap: 0.65rem; }
.preis-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.04rem;
  color: var(--hell-2);
}
.preis-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.75rem;
  height: 2px;
  background: var(--gelb);
}
.preis-fine {
  margin-top: 1.8rem;
  font-size: 0.9rem;
  color: var(--hell-2);
  max-width: 50em;
}

.alt-rows {
  list-style: none;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--linie-2);
}
.alt-rows li {
  border-bottom: 1px solid var(--linie);
  padding-block: 1.15rem;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  color: var(--hell-2);
}
.alt-rows strong { color: var(--hell); font-stretch: 110%; }

.roi {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-stretch: 112%;
  font-weight: 740;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  line-height: 1.2;
  color: var(--hell);
  max-width: 26em;
  text-wrap: balance;
}
.roi em { font-style: normal; color: var(--gelb); }

.rechner { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 40rem; }
.rechner-h {
  font-stretch: 112%;
  font-weight: 780;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  color: var(--hell);
  margin-bottom: 0.9rem;
}
.rechner-label {
  display: block;
  font-size: 1.02rem;
  color: var(--hell-2);
  margin-bottom: 0.8rem;
}
.rechner-row { display: flex; align-items: center; gap: 1.4rem; }
.rechner-row input[type="range"] {
  flex: 1;
  accent-color: var(--gelb);
  height: 2.2rem;
  cursor: pointer;
}
.rechner-wert {
  flex: 0 0 auto;
  font-stretch: 118%;
  font-weight: 830;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--gelb);
  font-variant-numeric: tabular-nums;
  min-width: 5.5ch;
  text-align: right;
}
.rechner-out {
  margin-top: 1rem;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.35;
  color: var(--hell);
}
.rechner-out em { font-style: normal; color: var(--gelb); }
.rechner-out strong { color: var(--gelb); }

.preis-cta { margin-top: clamp(2.8rem, 5vw, 4rem); }

/* ---------- FAQ ---------- */
.faq {
  position: relative;
  overflow: clip;
  background: var(--nacht-2);
  border-block: 1px solid var(--linie);
  padding-block: clamp(5rem, 10vw, 9rem);
}
.faq-list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linie-2); }
.faq-item { border-bottom: 1px solid var(--linie-2); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0.2rem;
  font-stretch: 108%;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.4;
  color: var(--hell);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gelb); }

.faq-x { position: relative; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.faq-x::before, .faq-x::after {
  content: "";
  position: absolute;
  background: var(--gelb);
  transition: rotate 0.35s var(--ease);
}
.faq-x::before { left: 0; top: 50%; width: 100%; height: 2px; translate: 0 -50%; }
.faq-x::after { left: 50%; top: 0; height: 100%; width: 2px; translate: -50% 0; }
.faq-item[open] .faq-x::after { rotate: 90deg; }

.faq-body { overflow: hidden; }
.faq-inner { padding: 0.1rem 2.8rem 1.5rem 0.2rem; color: var(--hell-2); max-width: 62ch; }

@media (prefers-reduced-motion: no-preference) {
  .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
  .faq-body > .faq-inner { min-height: 0; }
  .faq-item.is-open .faq-body { grid-template-rows: 1fr; }
  html:not(.js) .faq-body { display: block; }
}

/* ---------- Wer ---------- */
.wer { position: relative; overflow: clip; padding-block: clamp(5rem, 10vw, 9rem); }
.wer-body { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 40em; }
.wer-body p { margin-bottom: 1.1rem; font-size: 1.1rem; color: var(--hell-2); }
.wer-body strong { color: var(--hell); }
.wer-sig {
  margin-top: 2rem;
  font-stretch: 64%;
  font-weight: 320;
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--gelb);
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
}
.wer-sig-sub {
  font-stretch: 80%;
  font-weight: 620;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hell-2);
}

/* ---------- Anfrage ---------- */
.anfrage {
  background: var(--nacht-2);
  border-top: 1px solid var(--linie);
  padding-block: clamp(5rem, 10vw, 9rem);
  position: relative;
}
.anfrage-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .anfrage-grid { grid-template-columns: 1fr; } }

.anfrage-lead { margin-top: 1.2rem; color: var(--hell-2); max-width: 28em; font-size: 1.1rem; }

.anfrage-ways { list-style: none; margin-top: 2rem; display: grid; gap: 0.9rem; }
.anfrage-ways li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.2rem;
  border-top: 1px solid var(--linie);
  padding-top: 0.85rem;
}
.way-note {
  flex-basis: 100%;
  padding-left: calc(6.2rem + 1.2rem);
  font-size: 0.9rem;
  color: var(--hell-2);
}
@media (max-width: 480px) { .way-note { padding-left: 0; } }
.way-label {
  font-stretch: 78%;
  font-weight: 620;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hell-2);
  width: 6.2rem;
  flex: 0 0 auto;
}
.anfrage-ways a {
  display: inline-block;
  padding-block: 0.45rem;
  margin-block: -0.45rem;
  color: var(--hell);
  font-weight: 660;
  font-size: 1.1rem;
  text-decoration-color: var(--gelb);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.anfrage-form {
  background: var(--nacht);
  border: 1px solid var(--linie-2);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: 0.6rem 0.6rem 0 oklch(86% 0.155 95 / 0.16);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-stretch: 84%;
  font-weight: 660;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hell-2);
  margin-bottom: 0.4rem;
}
.field .opt { text-transform: none; letter-spacing: 0.02em; font-weight: 480; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--hell);
  background: var(--nacht-2);
  border: 1px solid var(--linie-2);
  border-radius: 2px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gelb);
  outline-offset: 0;
  border-color: var(--gelb);
}
.btn-form { width: 100%; text-align: center; margin-top: 0.4rem; }
.form-direct { display: flex; gap: 0.8rem; margin-top: 0.9rem; }
.form-direct .btn-ghost { flex: 1; text-align: center; padding: 0.9rem 1rem; font-size: 0.92rem; }
@media (max-width: 420px) { .form-direct { flex-direction: column; } }
.form-note { margin-top: 1rem; font-size: 0.95rem; color: var(--hell-2); line-height: 1.5; }
.form-note.sent { color: var(--gelb); font-weight: 660; }

/* ---------- Schriftfeld ---------- */
.schriftfeld {
  border-top: 1px solid var(--linie-2);
  padding-block: 2.2rem 2.6rem;
  background: var(--nacht);
}
.sf-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 2fr;
  border: 1px solid var(--linie-2);
}
@media (max-width: 860px) { .sf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sf-grid { grid-template-columns: 1fr; } }
.sf-cell {
  padding: 0.85rem 1.1rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sf-label {
  font-stretch: 78%;
  font-weight: 620;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hell-2);
}
.sf-value { font-size: 0.94rem; font-weight: 620; color: var(--hell); }
.sf-value a {
  text-decoration-color: var(--gelb);
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: 0.3rem;
  margin-block: -0.3rem;
}
.sf-note { margin-top: 1.2rem; font-size: 0.84rem; color: var(--hell-2); }

@media (max-width: 560px) {
  .display { text-wrap: initial; }
}
@media (max-width: 600px) {
  .plan .pl-ann, .plan .dim { display: none; }
  .stamp-hero { top: -0.6rem; right: 0; font-size: 0.72rem; padding: 0.55rem 0.8rem; }
}

/* ---------- Mobile Schnellkontakt-Leiste ---------- */
.mobile-bar { display: none; }
@media (max-width: 560px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.6rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: oklch(17.5% 0.012 260 / 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--linie-2);
  }
  .mobile-bar a {
    display: grid;
    place-items: center;
    text-decoration: none;
    font-weight: 740;
    font-stretch: 106%;
    font-size: 0.98rem;
    line-height: 1;
    padding: 0.95rem 0.5rem;
    border-radius: 3px;
  }
  .mb-tel { color: var(--hell); border: 1.5px solid var(--linie-2); }
  .mb-cta { color: var(--nacht); background: var(--gelb); }
  body:has(.mobile-bar) { padding-bottom: 4.4rem; }
}

/* ---------- Szenen-Bausteine: Grundzustand (aus) ---------- */
.scroll-hint { display: none; }

/* ============================================================
   BEWEGUNG
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* --- Hero-Eintritt --- */
  .ent { opacity: 0; animation: ent-rise 0.85s var(--ease) both; }
  .ent-1 { animation-delay: 0.05s; }
  .ent-2 { animation-delay: 0.12s; }
  .ent-3 { animation-delay: 0.2s; }
  .ent-5 { animation-delay: 0.42s; }
  .ent-6 { animation-delay: 0.52s; }
  .ent-7 { animation-delay: 0.35s; animation-name: ent-fade; animation-duration: 1s; }
  @keyframes ent-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes ent-fade { from { opacity: 0; } to { opacity: 1; } }

  .hl .hl-in { translate: 0 115%; animation: hl-up 0.9s var(--ease) forwards; }
  .ent-2 .hl-in { animation-delay: 0.15s; }
  .ent-3 .hl-in { animation-delay: 0.26s; }
  .hl { animation: none; opacity: 1; }
  @keyframes hl-up { to { translate: 0 0; } }

  /* --- Plan zeichnet sich (Lade-Variante; Szene überschreibt) --- */
  .plan .pl rect, .plan .pl line, .plan .pl circle, .plan .pl path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: draw 2.4s var(--ease) forwards;
  }
  .plan .pl-1 * { animation-delay: 0.5s; }
  .plan .pl-2 * { animation-delay: 0.9s; }
  .plan .pl-3 * { animation-delay: 1.15s; }
  .plan .pl-4 * { animation-delay: 1.4s; animation-duration: 1.2s; }
  .plan .pl-5 * { animation-delay: 1.6s; }
  .plan .pl-6 * { animation-delay: 1.8s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  .plan .pl-ann .ann, .plan .dim { opacity: 0; animation: ent-fade 0.7s var(--ease) forwards; }
  .plan .ann-1 { animation-delay: 1.5s; }
  .plan .ann-2 { animation-delay: 1.7s; }
  .plan .ann-3 { animation-delay: 1.9s; }
  .plan .ann-4 { animation-delay: 2.1s; }
  .plan .ann-5 { animation-delay: 2.3s; }
  .plan .dim-plan { animation-delay: 2.5s; }

  .stamp-hero { opacity: 0; animation: stamp-press 0.5s var(--ease) 2.1s forwards; }
  @keyframes stamp-press {
    0% { opacity: 0; scale: 1.7; rotate: -13deg; }
    100% { opacity: 1; scale: 1; }
  }

  /* --- Gelbes Band läuft --- */
  .proof-track { animation: marquee 32s linear infinite; }
  .proof-track:hover { animation-play-state: paused; }
  @keyframes marquee { to { translate: calc(-50% - 1.6rem) 0; } }

  /* --- Scroll-Reveals (JS setzt .in) --- */
  html.js .rv { opacity: 0; transition: opacity 0.9s var(--ease); }
  html.js .rv.in { opacity: 1; }
  html.js .bp-step.rv,
  html.js .ref-stats li.rv,
  html.js .alt-rows li.rv,
  html.js .z-item.rv { transition-delay: calc(var(--d, 0) * 110ms); }

}

/* Ohne Motion: Band statisch und einfach */
@media (prefers-reduced-motion: reduce) {
  .proof-track { width: auto; }
  .proof-list { flex-wrap: wrap; justify-content: center; row-gap: 0.5rem; }
  .proof-list li { gap: 1.4rem; }
  .proof-list[aria-hidden="true"] { display: none; }
}

/* ============================================================
   BEWEGTE SZENEN — Scroll-Timelines
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* --- Geisterziffern driften --- */
    .ghost-num { animation: ghost-drift linear both; animation-timeline: view(); }
    .bp-stage .ghost-num, .z-stage .ghost-num { animation: none; }
    @keyframes ghost-drift {
      from { transform: translateY(3.5rem); }
      to { transform: translateY(-3.5rem); }
    }

    /* --- Befund-Beats: steigen beim Eintritt (scrubbed) --- */
    .befund-item .befund-num,
    .befund-item .beat,
    .befund-item .beat-sub {
      opacity: 0;
      translate: 0 2.4rem;
      animation: beat-in linear forwards;
      animation-timeline: view();
    }
    .befund-item .befund-num { animation-range: entry 30% entry 70%; }
    .befund-item .beat { animation-range: entry 38% entry 82%; }
    .befund-item .beat-sub { animation-range: entry 48% entry 95%; }
    .befund-item .beat-icon {
      opacity: 0;
      translate: 0 2.4rem;
      animation: beat-in linear forwards;
      animation-timeline: view();
      animation-range: entry 22% entry 60%;
    }
    .befund-item .beat-svg :is(path, rect, line, circle):not(.dash) {
      stroke-dasharray: 640;
      stroke-dashoffset: 640;
      animation: draw linear forwards;
      animation-timeline: view();
      animation-range: entry 28% entry 95%;
    }
    @keyframes beat-in { to { opacity: 1; translate: 0 0; } }
    /* IO-Fallback neutralisieren, der Scrub übernimmt */
    html.js .befund-item .rv { transition: none; }

    .befund-close {
      opacity: 0;
      translate: 0 2.4rem;
      animation: beat-in linear forwards;
      animation-timeline: view();
      animation-range: entry 30% entry 85%;
    }
    html.js .befund-close.rv { transition: none; }

    /* --- Leitsatz --- */
    .leitsatz { view-timeline: --lz block; }
    html.js .leitsatz .rv { opacity: 1; transition: none; }
    .leitsatz .lz-in { translate: 0 112%; animation: lz-up linear both; animation-timeline: --lz; }
    .leitsatz .lz:nth-child(1) .lz-in { animation-range: cover 4% cover 26%; }
    .leitsatz .lz:nth-child(2) .lz-in { animation-range: cover 10% cover 34%; }
    @keyframes lz-up { to { translate: 0 0; } }
    .leitsatz .mass-line {
      transform-origin: 0 50%;
      scale: 0 1;
      animation: mass-x linear both;
      animation-timeline: --lz;
    }
    .mass-top .mass-line { animation-range: cover 0% cover 32%; }
    .mass-bottom .mass-line { transform-origin: 100% 50%; animation-range: cover 18% cover 52%; }
    @keyframes mass-x { to { scale: 1 1; } }
    .leitsatz .scope-body {
      opacity: 0;
      animation: ent-fade linear forwards;
      animation-timeline: --lz;
      animation-range: cover 18% cover 42%;
    }

    /* --- Mega-Zahlen: skalieren herein --- */
    .mega .mega-num {
      opacity: 0;
      scale: 0.88;
      transform-origin: 0 80%;
      animation: mega-in linear forwards;
      animation-timeline: view();
      animation-range: entry 25% entry 75%;
    }
    @keyframes mega-in { to { opacity: 1; scale: 1; } }
    html.js .mega.rv { opacity: 1; transition: none; }

    /* ========================================================
       GEPINNTE SZENEN — Desktop mit genug Höhe
       ======================================================== */
    @media (min-width: 920px) and (min-height: 700px) {

      /* ----- Hero: Plan zeichnet sich unter dem Scroll ----- */
      .hero { height: 170svh; padding-block: 0; view-timeline: --hero block; }
      .hero-stage {
        position: sticky;
        top: 0;
        height: 100svh;
        display: grid;
        align-content: center;
        overflow: clip;
        padding-block: 4.5rem 3rem;
      }
      .hero-stage > .wrap { width: 100%; }
      .hero .display { font-size: clamp(2.45rem, 3.8vw + 0.4rem, 4.3rem); }
      .hero-grid { margin-top: clamp(1rem, 2.5vh, 2rem); }
      .hero-plan .plan {
        aspect-ratio: 660 / 610;
        width: auto;
        max-width: 100%;
        max-height: calc(100svh - 24rem);
        margin-left: auto;
      }
      .hero-plan .plan-cap { justify-content: flex-end; }

      .scroll-hint {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        position: absolute;
        left: 50%;
        bottom: 3.5svh;
        translate: -50% 0;
        font-stretch: 78%;
        font-weight: 640;
        font-size: 0.72rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--hell-2);
        animation: hint-out linear both;
        animation-timeline: --hero;
        animation-range: contain 0% contain 10%;
      }
      @keyframes hint-out { to { opacity: 0; } }
      @keyframes btn-fill { to { fill-opacity: 1; } }
      .scroll-tick {
        display: block;
        width: 1px;
        height: 2rem;
        background: var(--gelb);
        transform-origin: 50% 0;
        animation: tick-y 1.9s var(--ease) infinite;
      }
      @keyframes tick-y {
        0% { transform: scaleY(0); opacity: 1; }
        55% { transform: scaleY(1); opacity: 1; }
        100% { transform: scaleY(1); opacity: 0; }
      }

      .hero .plan .pl :is(rect, line, circle, path) {
        animation-name: draw;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-delay: 0s;
        animation-timeline: --hero;
      }
      /* Rahmen + Kopf sind beim Laden schon da: die Skizze wirkt nie leer */
      .hero .plan .pl-1 :is(rect, line, circle, path) {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
      }
      .hero .plan .pl-2 :is(rect, line, circle, path) { animation-range: contain 2% contain 22%; }
      .hero .plan .pl-3 :is(rect, line, circle, path) { animation-range: contain 12% contain 38%; }
      .hero .plan .pl-4 :is(rect, line, circle, path) { animation-range: contain 26% contain 50%; }
      .hero .plan .pl-5 :is(rect, line, circle, path) { animation-range: contain 38% contain 60%; }
      .hero .plan .pl-6 :is(rect, line, circle, path) { animation-range: contain 50% contain 70%; }
      .hero .plan .pl-ann .ann, .hero .plan .dim {
        animation-name: ent-fade;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 0s;
        animation-timeline: --hero;
      }
      .hero .plan .ann-1 { animation-range: contain 32% contain 42%; }
      .hero .plan .ann-2 { animation-range: contain 42% contain 52%; }
      .hero .plan .ann-3 { animation-range: contain 52% contain 62%; }
      .hero .plan .ann-4 { animation-range: contain 60% contain 70%; }
      .hero .plan .ann-5 { animation-range: contain 66% contain 76%; }
      .hero .plan .dim-plan { animation-range: contain 72% contain 82%; }
      .hero .plan .pl-3 .btnbox {
        fill-opacity: 0;
        animation-name: draw, btn-fill;
        animation-range: contain 12% contain 38%, contain 32% contain 40%;
      }
      .hero .plan .pl-5 text {
        opacity: 0;
        animation: ent-fade linear forwards;
        animation-timeline: --hero;
        animation-range: contain 44% contain 54%;
      }
      .hero .stamp-hero {
        animation-name: stamp-press;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-delay: 0s;
        animation-timeline: --hero;
        animation-range: contain 76% contain 88%;
      }

      /* ----- Ablauf: Schritte scrubben durch ----- */
      .blaupause { height: 300svh; view-timeline: --bp block; }
      .bp-stage {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: clip;
        display: grid;
        align-items: center;
        padding-block: 0;
      }
      .bp-stage .ghost-num { top: clamp(1rem, 3vh, 2rem); }
      .bp-stage > .wrap {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(3rem, 5vw, 5rem);
        align-items: center;
      }
      .bp-stage .kicker { grid-column: 1; }
      .bp-stage .h2 { grid-column: 1; }
      .bp-stage .bp-lead { grid-column: 1; }
      .bp-stage .bp-steps {
        grid-column: 2;
        grid-row: 1 / span 3;
        position: relative;
        display: block;
        height: min(30rem, 64svh);
        margin-top: 0;
        padding-bottom: 0;
      }
      .bp-stage .bp-step {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 33rem;
        border-top: 0;
        padding-top: 0;
        isolation: isolate;
        translate: none;
        transition: none;
        opacity: 0;
        animation: bp-step-x linear both;
        animation-timeline: --bp;
      }
      .bp-stage .bp-step:nth-child(1) { animation-range: contain 2% contain 30%; }
      .bp-stage .bp-step:nth-child(2) { animation-range: contain 26% contain 55%; }
      .bp-stage .bp-step:nth-child(3) { animation-range: contain 51% contain 80%; }
      .bp-stage .bp-step:nth-child(4) { animation-name: bp-step-last; animation-range: contain 76% contain 100%; }
      @keyframes bp-step-x {
        0% { opacity: 0; translate: 0 2.6rem; }
        20% { opacity: 1; translate: 0 0; }
        80% { opacity: 1; translate: 0 0; }
        100% { opacity: 0; translate: 0 -2.6rem; }
      }
      @keyframes bp-step-last {
        0% { opacity: 0; translate: 0 2.6rem; }
        20%, 100% { opacity: 1; translate: 0 0; }
      }
      .bp-stage .bp-big {
        display: block;
        position: absolute;
        z-index: -1;
        right: -0.5rem;
        top: 50%;
        translate: 0 -54%;
        font-stretch: 125%;
        font-weight: 850;
        font-size: clamp(9rem, 14vw, 13rem);
        line-height: 1;
        letter-spacing: -0.03em;
        color: transparent;
        -webkit-text-stroke: 2px oklch(86% 0.155 95 / 0.2);
        pointer-events: none;
        user-select: none;
      }
      .bp-progress {
        display: block;
        position: absolute;
        left: clamp(1.25rem, 4vw, 2.5rem);
        right: clamp(1.25rem, 4vw, 2.5rem);
        bottom: 5svh;
        height: 1px;
        background: oklch(96% 0.006 95 / 0.2);
      }
      .bp-progress::before, .bp-progress::after {
        content: "";
        position: absolute;
        top: -6px;
        width: 1px;
        height: 13px;
        background: oklch(96% 0.006 95 / 0.4);
      }
      .bp-progress::before { left: 0; }
      .bp-progress::after { right: 0; }
      .bp-progress-bar {
        display: block;
        height: 100%;
        background: var(--gelb);
        transform-origin: 0 50%;
        scale: 0 1;
        animation: bar-x linear both;
        animation-timeline: --bp;
        animation-range: contain 0% contain 100%;
      }
      @keyframes bar-x { to { scale: 1 1; } }

      /* ----- Zusagen: Highlight-Liste scrubben ----- */
      .zusagen { height: 320svh; view-timeline: --zs block; }
      .z-stage {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: clip;
        display: grid;
        align-items: center;
        padding-block: 0;
      }
      .z-stage > .wrap { width: 100%; }
      .z-stage .z-item { border-top: 0; padding-block: clamp(0.55rem, 1.3vh, 1rem); }
      html.js .z-stage .z-item.rv { opacity: 1; transition: none; }
      .z-stage .z-line {
        font-size: clamp(1.75rem, 2.3vw + 0.7rem, 2.9rem);
        opacity: 0.45;
        animation: z-line-hi linear both;
        animation-timeline: --zs;
      }
      .z-stage .z-sub {
        opacity: 0;
        animation: z-sub-hi linear both;
        animation-timeline: --zs;
      }
      .z-stage .z-item:nth-child(1) .z-line, .z-stage .z-item:nth-child(1) .z-sub { animation-range: contain 0% contain 19%; }
      .z-stage .z-item:nth-child(2) .z-line, .z-stage .z-item:nth-child(2) .z-sub { animation-range: contain 13% contain 32%; }
      .z-stage .z-item:nth-child(3) .z-line, .z-stage .z-item:nth-child(3) .z-sub { animation-range: contain 27% contain 46%; }
      .z-stage .z-item:nth-child(4) .z-line, .z-stage .z-item:nth-child(4) .z-sub { animation-range: contain 40% contain 60%; }
      .z-stage .z-item:nth-child(5) .z-line, .z-stage .z-item:nth-child(5) .z-sub { animation-range: contain 54% contain 73%; }
      .z-stage .z-item:nth-child(6) .z-line, .z-stage .z-item:nth-child(6) .z-sub { animation-range: contain 67% contain 87%; }
      .z-stage .z-item:nth-child(7) .z-line, .z-stage .z-item:nth-child(7) .z-sub { animation-range: contain 81% contain 100%; }
      .z-stage .z-item:nth-child(7) .z-line { animation-name: z-line-last; }
      .z-stage .z-item:nth-child(7) .z-sub { animation-name: z-sub-last; }
      @keyframes z-line-hi {
        0% { opacity: 0.45; }
        30% { opacity: 1; }
        70% { opacity: 1; }
        100% { opacity: 0.6; }
      }
      @keyframes z-line-last {
        0% { opacity: 0.45; }
        30%, 100% { opacity: 1; }
      }
      @keyframes z-sub-hi {
        0% { opacity: 0; }
        30% { opacity: 1; }
        70% { opacity: 1; }
        100% { opacity: 0; }
      }
      @keyframes z-sub-last {
        0% { opacity: 0; }
        30%, 100% { opacity: 1; }
      }
    }
  }
}