/* ============================================================
   agentur.css — Bauteile, die nur die D.Sign-Seite braucht
   ============================================================ */

/* ---- Kopfleiste ------------------------------------------ */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 190;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--f21);
  padding: var(--f13) var(--gutter);
  transition: background var(--dur-3), border-color var(--dur-3), padding var(--dur-3);
  border-bottom: 1px solid transparent;
}
.is-scrolled .head {
  background: oklch(12% 0.008 60 / 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
  padding-block: var(--f8);
}
.wordmark {
  font: 680 var(--t-lead)/1 var(--sans);
  letter-spacing: -0.05em; color: var(--white);
}
.wordmark i { color: var(--a0); font-style: normal; }
.head nav { display: flex; gap: var(--f21); }
.head nav a {
  font: 500 var(--t-small)/1 var(--mono);
  letter-spacing: 0.08em; color: var(--muted);
  transition: color var(--dur-2);
}
.head nav a:hover { color: var(--text); }
@media (max-width: 880px) { .head nav { display: none; } }

/* ---- Beleg-Zeile ----------------------------------------- */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--f144), 1fr));
  gap: var(--f1); background: var(--line);
  border: var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.proof div { background: var(--abyss); padding: var(--f21) var(--f21) var(--f13); }
.proof b {
  display: block; font: 600 var(--t-h4)/1 var(--sans);
  letter-spacing: -0.04em; color: var(--a0);
  font-variant-numeric: tabular-nums;
}
.proof span { font: 400 var(--t-micro)/1.5 var(--mono); color: var(--muted); letter-spacing: 0.06em; }

/* ---- Prinzip-Karten -------------------------------------- */
.principle { display: grid; gap: var(--f13); align-content: start; }
.principle .n {
  font: 500 var(--t-micro)/1 var(--mono);
  letter-spacing: 0.2em; color: var(--a0);
}
.principle h3 {
  font-size: var(--t-h4); font-weight: 620;
  letter-spacing: -0.03em; line-height: 1.1;
}
.principle p { color: var(--muted); text-wrap: pretty; }
.principle cite {
  font: 400 var(--t-micro)/1.5 var(--mono);
  color: var(--muted); font-style: normal;
  padding-top: var(--f8); border-top: 1px dashed var(--line);
  opacity: 0.8;
}

/* ---- Bento für Leistungen -------------------------------- */
.bento {
  display: grid; gap: var(--f13);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(var(--f144), auto);
}
.bento > * { grid-column: span 2; }
.bento .wide { grid-column: span 3; }
.bento .full { grid-column: span 6; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento .wide, .bento .full { grid-column: 1; }
}
.svc { display: grid; gap: var(--f8); align-content: start; }
.svc h3 { font-size: var(--t-h4); font-weight: 620; letter-spacing: -0.03em; }
.svc p { color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
.svc ul { list-style: none; padding: 0; display: grid; gap: var(--f5); margin-top: var(--f8); }
.svc li {
  font: 400 var(--t-small)/1.5 var(--mono); color: var(--muted);
  padding-left: var(--f21); position: relative;
}
.svc li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: var(--f8); height: var(--f1); background: var(--a0);
}

/* ---- Arbeitsschritte ------------------------------------- */
.steps { display: grid; gap: var(--f34); max-width: var(--f610); }
.step {
  display: grid; grid-template-columns: var(--f55) 1fr; gap: var(--f21);
  align-items: start;
}
.step .no {
  font: 500 var(--t-h4)/1 var(--mono); color: var(--a0);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t-h4); font-weight: 620; letter-spacing: -0.03em; margin-bottom: var(--f8); }
.step p { color: var(--muted); text-wrap: pretty; }
.step .wann {
  display: inline-block; margin-top: var(--f8);
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.12em;
  color: var(--a5); padding: var(--f5) var(--f8);
  border: 1px solid oklch(74% 0.126 45.5 / 0.3); border-radius: var(--f5);
}

/* ---- Arbeitsproben --------------------------------------- */
.work {
  position: relative; display: grid; align-content: end; gap: var(--f8);
  aspect-ratio: 1.3; padding: var(--f21);
  border-radius: var(--radius-lg); border: var(--border);
  overflow: hidden; isolation: isolate;
  background: var(--abyss);
}
.work::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg, linear-gradient(150deg, var(--surface), var(--abyss)));
  transition: transform var(--dur-5) var(--ease-out), filter var(--dur-4);
}
.work:hover::before { transform: scale(1.06); filter: saturate(1.25) brightness(1.1); }
.work::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 30%, oklch(10% 0.008 60 / 0.88) 100%);
}
.work .branche {
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--a0);
}
.work h3 { font-size: var(--t-h4); font-weight: 640; letter-spacing: -0.035em; }
.work p { font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.work .tag {
  position: absolute; top: var(--f13); right: var(--f13);
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.1em;
  padding: var(--f5) var(--f8); border-radius: 999px;
  background: oklch(10% 0.008 60 / 0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--muted);
}

/* ---- Preise ---------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--f21); align-items: start; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  display: grid; gap: var(--f13); align-content: start;
  padding: var(--f34); border-radius: var(--radius-lg);
  border: var(--border); background: var(--abyss);
  position: relative;
}
/*  Von-Restorff: genau EINE Karte bricht aus dem Muster aus.
    Zwei hervorgehobene Karten heben sich gegenseitig auf.      */
.tier[data-featured] {
  border-color: var(--a0);
  background: linear-gradient(180deg, oklch(78% 0.118 78 / 0.07), var(--abyss) 40%);
  box-shadow: 0 var(--f21) var(--f89) -34px var(--glow-a0);
}
.tier[data-featured]::before {
  content: attr(data-featured);
  position: absolute; top: calc(var(--f13) * -1); left: var(--f34);
  font: 600 var(--t-micro)/1 var(--mono); letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--a0); color: var(--void);
  padding: var(--f5) var(--f13); border-radius: 999px;
}
.tier .name {
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.tier .preis { font-size: var(--t-h3); font-weight: 660; letter-spacing: -0.045em; line-height: 1; }
.tier .preis small { font-size: var(--t-small); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tier .fuer { color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
.tier ul { list-style: none; padding: 0; display: grid; gap: var(--f8); margin: var(--f8) 0; }
.tier li { font-size: var(--t-small); color: var(--text); padding-left: var(--f21); position: relative; line-height: 1.5; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: var(--f8); height: var(--f5);
  border-left: 1.5px solid var(--a0); border-bottom: 1.5px solid var(--a0);
  transform: rotate(-45deg);
}
.tier .btn { width: 100%; justify-content: center; margin-top: var(--f8); }
.platzhalter {
  border: 1px dashed var(--a2); border-radius: var(--f8);
  padding: var(--f13); margin-top: var(--f21);
  font: 400 var(--t-small)/1.6 var(--mono); color: var(--a2);
}

/* ---- Einwände -------------------------------------------- */
.faq { display: grid; gap: var(--f1); background: var(--line); border: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.faq details { background: var(--abyss); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--f21) var(--f34);
  font-size: var(--t-h4); font-weight: 560; letter-spacing: -0.025em;
  display: flex; justify-content: space-between; align-items: center; gap: var(--f21);
  transition: color var(--dur-2), background var(--dur-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: var(--f13); height: var(--f13);
  border-right: 1.5px solid var(--a0); border-bottom: 1.5px solid var(--a0);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-3) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq summary:hover { background: var(--surface); }
.faq .a { padding: 0 var(--f34) var(--f34); color: var(--muted); max-width: var(--measure); text-wrap: pretty; }

/* ---- Kontakt --------------------------------------------- */
.kontakt-grid { display: grid; grid-template-columns: 21fr 13fr; gap: var(--f55); align-items: start; }
@media (max-width: 900px) { .kontakt-grid { grid-template-columns: 1fr; gap: var(--f34); } }

/*  Erreichbarkeits-Schalter: der Anrufer entscheidet den Kanal,
    nicht der Anbieter. Senkt die Hemmschwelle bei Leuten, die
    nicht telefonieren wollen — und umgekehrt.                  */
.pref {
  display: inline-grid; grid-auto-flow: column; gap: var(--f3);
  padding: var(--f5); border-radius: 999px;
  background: var(--surface); border: var(--border);
  margin-bottom: var(--f21);
}
.pref button {
  border: 0; background: transparent; cursor: pointer;
  padding: var(--f8) var(--f21); border-radius: 999px;
  font: 500 var(--t-small)/1 var(--mono); letter-spacing: 0.08em;
  color: var(--muted); transition: background var(--dur-2), color var(--dur-2);
}
.pref button[aria-pressed="true"] { background: var(--a0); color: var(--void); }

.kanal { display: none; }
.kanal[data-active="true"] { display: grid; gap: var(--f13); }
.kanal a.gross {
  font-size: var(--t-h3); font-weight: 640; letter-spacing: -0.04em;
  color: var(--white); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--f13);
  transition: color var(--dur-2);
}
.kanal a.gross:hover { color: var(--a0); }
.kanal .hinweis { color: var(--muted); font-size: var(--t-small); }

.visite {
  display: grid; gap: var(--f8);
  padding: var(--f34); border-radius: var(--radius-lg);
  border: var(--border); background: var(--abyss);
  font: 400 var(--t-small)/1.7 var(--mono); color: var(--muted);
}
.visite b { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------
   Held — Überschreibungen gegenüber dem Musterbuch
   ------------------------------------------------------------ */

/*  Die Musterbuch-Fassung durchläuft drei weit auseinander
    liegende Farbtöne. Das liest sich als Regenbogen und damit
    als Baukasten. Für eine Agenturmarke bleibt der Verlauf
    innerhalb einer Achse: Messing nach Kupfer.               */
.hero h1 em {
  /*  background-image, NICHT background: die Kurzschreibweise
      setzt background-clip zurück und der Verlauf malt dann als
      Balken über die Schrift statt in sie hinein.             */
  background-image: linear-gradient(96deg, var(--a0) 0%, var(--a5) 56%, oklch(66% 0.12 28) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/*  Drei Zeilen Schlagzeile brauchen eine kleinere Obergrenze,
    sonst schiebt die Überschrift die Handlungsauslöser aus
    dem ersten Bildschirm — und genau die sollen sichtbar sein. */
.hero h1 { font-size: clamp(2.6rem, 1rem + 6.4vw, 7.2rem); }
.hero { padding-block: var(--f89) var(--f89); }
.hero-sub { margin-bottom: var(--f34); max-width: 48ch; }
.hero-meta { margin-top: var(--f34); }

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(2.2rem, 1rem + 8vw, 3.4rem); }
  .hero { padding-block: var(--f89) var(--f55); }
  .scroll-cue { display: none; }
}

/*  Der Kopfbereich liegt fix über dem Inhalt — der Held braucht
    entsprechend Luft, sonst rutscht die Kicker-Zeile darunter. */
.hero .shell { padding-top: var(--f55); }

/*  Die Abschnittsmarke ist hier länger als im Musterbuch
    („07 — PREISE“ statt „BOGEN 07“) und braucht eine breitere
    Spalte, sonst bricht sie mitten im Gedankenstrich um.      */
.bogen-head { grid-template-columns: var(--f144) minmax(0, 1fr); }
.bogen-num { white-space: nowrap; }
@media (max-width: 720px) { .bogen-head { grid-template-columns: 1fr; } }

/*  Frühere Fassung blendete .pin-wrap auf schmalen Geräten aus,
    weil dort nur die große Ziffer darin lag. Seit dem Umbau nach
    Befund B-01 stecken die vier Schritte selbst darin — ein
    display:none hätte den ganzen Ablauf-Abschnitt vom Handy
    genommen. Ausgeblendet wird jetzt nur noch die Ziffer, und das
    erledigt die Regel weiter unten (.pin-zahl).                 */

/* ------------------------------------------------------------
   Rechtstexte
   ------------------------------------------------------------ */
.recht { padding-block: var(--f144) var(--f89); }
.recht h1 { font-size: var(--t-h2); font-weight: 660; letter-spacing: -0.045em; margin-bottom: var(--f55); }
.recht h2 {
  font-size: var(--t-h4); font-weight: 620; letter-spacing: -0.03em;
  margin-top: var(--f55); margin-bottom: var(--f13); color: var(--white);
}
.recht p, .recht li { color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
.recht p { margin-bottom: var(--f13); }
.recht ul { padding-left: var(--f21); display: grid; gap: var(--f5); margin-bottom: var(--f13); }
.recht a { color: var(--a0); text-decoration: underline; text-underline-offset: 3px; }
.recht .adresse { font: 400 var(--t-body)/1.8 var(--mono); color: var(--text); }
.recht .stand {
  margin-top: var(--f89); padding-top: var(--f21);
  border-top: 1px dashed var(--line);
  font: 400 var(--t-small)/1.6 var(--mono); color: var(--muted);
}
.zurueck {
  display: inline-flex; align-items: center; gap: var(--f8);
  font: 500 var(--t-small)/1 var(--mono); letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: var(--f34);
}
.zurueck:hover { color: var(--a0); }

/* ------------------------------------------------------------
   Film — Produktaufnahmen statt Kacheln
   ------------------------------------------------------------ */
.film {
  position: relative; margin: 0;
  border: var(--border); border-radius: var(--radius-lg);
  background: var(--abyss); overflow: hidden;
}
.film video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; background: var(--void);
  object-fit: cover;
}
/*  Solange keine Quelle gesetzt ist, liegt ein Platzhalter über dem
    leeren Player — sonst steht dort ein schwarzes Rechteck, das wie
    ein Ladefehler aussieht.                                        */
.film-leer {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--f8);
  text-align: center; padding: var(--f21);
  background:
    repeating-linear-gradient(135deg, var(--surface) 0 var(--f8), var(--abyss) var(--f8) var(--f21));
}
.film-leer b {
  font: 600 var(--t-h4)/1 var(--sans); letter-spacing: -0.03em; color: var(--text);
}
.film-leer span { font: 400 var(--t-small)/1.5 var(--mono); color: var(--muted); }
.film--gross .film-leer b { font-size: var(--t-h3); }
.film figcaption {
  padding: var(--f13) var(--f21);
  font: 400 var(--t-small)/1.5 var(--mono); color: var(--muted);
  border-top: var(--border);
}

/* ------------------------------------------------------------
   Einstiegskarten — Auswahl statt Preisschild
   ------------------------------------------------------------ */
.tier--wahl {
  text-align: left; cursor: pointer; font: inherit;
  color: inherit; width: 100%;
  transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
}
.tier--wahl:hover { transform: translateY(calc(var(--f5) * -1)); border-color: var(--a0); }
.tier--wahl[aria-pressed="true"] {
  border-color: var(--a0);
  box-shadow: 0 0 0 1px var(--a0), 0 var(--f21) var(--f89) -40px var(--glow-a0);
}
.tier--wahl .preis { font-size: var(--t-h4); line-height: 1.1; }
.tier-cta {
  margin-top: var(--f13);
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--a0);
  display: inline-flex; align-items: center; gap: var(--f8);
}
.tier-cta::after { content: "→"; transition: transform var(--dur-2) var(--ease-out); }
.tier--wahl:hover .tier-cta::after { transform: translateX(var(--f5)); }
.tier--wahl[aria-pressed="true"] .tier-cta::before { content: "Gewählt · "; }

/* ------------------------------------------------------------
   Formular
   ------------------------------------------------------------ */
.formular { display: grid; gap: var(--f21); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.feld { display: grid; gap: var(--f8); }
.feld label, .feld legend {
  font: 500 var(--t-small)/1 var(--mono);
  letter-spacing: 0.06em; color: var(--text); padding: 0;
}
.feld .opt { color: var(--muted); font-weight: 400; letter-spacing: 0; }

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%; padding: var(--f13) var(--f21);
  background: var(--abyss); color: var(--text);
  border: var(--border); border-radius: var(--radius);
  font: 400 var(--t-body)/1.5 var(--sans);
  transition: border-color var(--dur-2), background var(--dur-2);
}
.feld textarea { resize: vertical; min-height: var(--f144); }
.feld input:hover, .feld textarea:hover { border-color: var(--muted); }
.feld input:focus, .feld textarea:focus {
  outline: none; border-color: var(--a0);
  background: var(--surface);
  box-shadow: 0 0 0 3px oklch(78% 0.118 78 / 0.18);
}
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--a2); }

.stufen { border: 0; margin: 0; padding: 0; }
.stufen-liste { display: grid; gap: var(--f8); margin-top: var(--f5); }
.stufe {
  display: flex; align-items: center; gap: var(--f13);
  padding: var(--f13) var(--f21);
  border: var(--border); border-radius: var(--radius);
  background: var(--abyss); cursor: pointer;
  font: 400 var(--t-body)/1 var(--sans); letter-spacing: 0;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.stufe:hover { border-color: var(--muted); }
.stufe input { accent-color: var(--a0); width: var(--f21); height: var(--f21); flex: none; }
.stufe:has(input:checked) { border-color: var(--a0); background: var(--surface); }
.stufe:has(input:focus-visible) { outline: 2px solid var(--a0); outline-offset: 2px; }

.fehler:empty { display: none; }
.fehler {
  font: 400 var(--t-small)/1.4 var(--mono);
  color: var(--a2); display: flex; align-items: center; gap: var(--f5);
}
.formular-hinweis {
  margin-top: var(--f13);
  font: 400 var(--t-small)/1.6 var(--mono); color: var(--muted);
  max-width: var(--measure);
}
.formular-hinweis a { color: var(--a0); text-decoration: underline; text-underline-offset: 3px; }

.formular-status:empty { display: none; }
.formular-status {
  padding: var(--f13) var(--f21); border-radius: var(--radius);
  font: 500 var(--t-small)/1.5 var(--mono);
  border: 1px solid currentColor;
}
.formular-status[data-art="ok"]   { color: var(--a3); }
.formular-status[data-art="fehler"] { color: var(--a2); }
.formular-status[data-art="laeuft"] { color: var(--muted); }

.kontakt-grid aside.visite a { color: var(--a0); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   Scroll-Scrub — Bildfolge am Scrollrad
   ------------------------------------------------------------ */
.scrub-wrap { position: relative; height: 320svh; }
.scrub-stage {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden; background: var(--void);
  display: grid;
}
.scrub-stage > * { grid-area: 1 / 1; }

.scrub-stage canvas,
.scrub-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrub-stage video { display: none; }

.scrub-stage::after {          /* Schleier, damit die Schrift trägt */
  content: ""; position: relative; pointer-events: none;
  background: linear-gradient(180deg, oklch(12% 0.008 60 / 0.72) 0%, transparent 34% 58%, oklch(12% 0.008 60 / 0.86) 100%);
}

.scrub-text {
  position: relative; align-self: end; justify-self: start;
  padding: var(--gutter); display: grid; gap: var(--f13);
  pointer-events: none;
}
.scrub-marke {
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--a0);
}
.scrub-text strong {
  font-size: var(--t-h2); font-weight: 660;
  letter-spacing: -0.045em; line-height: 0.95; color: var(--white);
}

.scrub-hud {
  position: relative; align-self: start; justify-self: end;
  padding: var(--gutter); display: grid; gap: var(--f8); justify-items: end;
  pointer-events: none;
}
.scrub-hud span {
  font: 500 var(--t-micro)/1 var(--mono); letter-spacing: 0.12em; color: var(--muted);
}
.scrub-hud span:empty { display: none; }
.scrub-bar { width: var(--f144); height: var(--f2); background: var(--line); }
.scrub-bar i {
  display: block; height: 100%; background: var(--a0);
  transform: scaleX(var(--scrub, 0)); transform-origin: 0 50%;
}

/*  Mobil: kein Scroll-Hijacking. Der Abschnitt wird normal hoch,
    die Bildfolge weicht einem gewöhnlichen Player.
    Dasselbe gilt bei reduzierter Bewegung — dort bleibt das
    Standbild auf der Leinwand stehen.                          */
.scrub-wrap[data-modus="player"] { height: auto; }
.scrub-wrap[data-modus="player"] .scrub-stage {
  position: static; height: auto; aspect-ratio: 16 / 9;
}
.scrub-wrap[data-modus="player"] canvas { display: none; }
.scrub-wrap[data-modus="player"] video { display: block; }
.scrub-wrap[data-modus="player"] .scrub-hud { display: none; }

.scrub-wrap[data-modus="standbild"] { height: auto; }
.scrub-wrap[data-modus="standbild"] .scrub-stage {
  position: static; height: auto; aspect-ratio: 16 / 9;
}
.scrub-wrap[data-modus="standbild"] .scrub-hud { display: none; }

@media (max-width: 860px) {
  .scrub-text strong { font-size: var(--t-h3); }
}

/*  Der erste Entwurf legte einen gleichmäßigen Schleier über die
    Bühne. Über einem hellen Dielenboden verschwand die Schrift
    trotzdem. Der Verlauf setzt jetzt tiefer an und wird unten
    deutlich dichter — dort, wo der Text tatsächlich sitzt.      */
.scrub-stage::after {
  background:
    linear-gradient(180deg,
      oklch(12% 0.008 60 / 0.78) 0%,
      oklch(12% 0.008 60 / 0.22) 26%,
      oklch(12% 0.008 60 / 0.32) 48%,
      oklch(12% 0.008 60 / 0.86) 78%,
      oklch(12% 0.008 60 / 0.96) 100%);
}
.scrub-text strong {
  text-shadow: 0 var(--f2) var(--f21) oklch(12% 0.008 60 / 0.85);
}
.scrub-marke {
  background: oklch(12% 0.008 60 / 0.72);
  backdrop-filter: blur(6px);
  padding: var(--f5) var(--f13); border-radius: 999px;
  justify-self: start;
}
.scrub-hud span, .scrub-bar {
  background: oklch(12% 0.008 60 / 0.6);
  backdrop-filter: blur(6px);
}
.scrub-hud span { padding: var(--f5) var(--f13); border-radius: 999px; }

/*  Die Index-Schiene liegt über allem, auch über vollflächigen
    hellen Bildern. Ohne eigenen Grund verschwindet sie dort.    */
.rail a {
  padding: var(--f3) var(--f8);
  border-radius: 999px;
  background: oklch(12% 0.008 60 / 0.55);
  backdrop-filter: blur(8px);
}

/*  Rücknahme: die Chips auf der Index-Schiene sahen über dem Bild
    aus wie abgeschnittene Kästen. Über vollflächigen Abschnitten
    tritt die Schiene stattdessen ganz zurück.                    */
.rail a { padding: 0; border-radius: 0; background: none; backdrop-filter: none; }
body[data-vollbild="true"] .rail {
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out);
}
.rail { transition: opacity var(--dur-3) var(--ease-out); }

/*  Und die Schrift bekommt ihren eigenen Grund, statt das ganze
    untere Drittel des Bildes zuzudunkeln.                        */
.scrub-text {
  padding: var(--f89) var(--gutter) var(--gutter);
  background: linear-gradient(180deg,
    transparent 0%,
    oklch(12% 0.008 60 / 0.55) 34%,
    oklch(12% 0.008 60 / 0.88) 72%,
    oklch(12% 0.008 60 / 0.96) 100%);
  width: min(100%, var(--f610));
  align-self: end; justify-self: stretch;
}
.scrub-stage::after {
  background:
    linear-gradient(180deg,
      oklch(12% 0.008 60 / 0.78) 0%,
      oklch(12% 0.008 60 / 0.18) 24%,
      transparent 52%);
}

/*  Der Schriftgrund endete als harte senkrechte Kante mitten im
    Bild. Nach rechts ausblenden, dann liest er sich als Licht
    und nicht als aufgeklebtes Rechteck.                        */
.scrub-text {
  width: min(100%, calc(var(--f610) * 1.3));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
}

/* ---- Marke ------------------------------------------------ */
.wordmark img { width: clamp(88px, 9vw, 118px); height: auto; display: block; }
.wordmark { display: flex; align-items: center; }

.foot-marke { display: grid; gap: var(--f13); justify-items: start; }
.foot-marke img { width: clamp(150px, 18vw, 240px); height: auto; }
.foot-marke span {
  font: 500 var(--t-small)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

.recht-marke { display: block; margin-bottom: var(--f21); }
.recht-marke img { width: 130px; height: auto; }

/*  Hausregel: Erfundenes bleibt als erfunden markiert. Jede Aufnahme
    trägt sichtbar, dass sie eine Arbeitsprobe ist und kein Auftrag.  */
.film figcaption b { color: var(--text); font-weight: 600; }
.film figcaption .probe {
  display: block; margin-top: var(--f5);
  font-size: var(--t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--a0);
}
.film video { background: var(--void); }

/* ============================================================
   Ablauf-Bühne — Neubau nach Befund B-01
   Vorher hing eine Ziffer allein über 300 svh, die zugehörigen
   Schritte standen unterhalb der Bühne. Man sah nie beides
   zugleich. Jetzt steht der Schritt neben seiner Ziffer und die
   Strecke ist kürzer.
   ============================================================ */

/* --- Grundzustand = schmale Geräte: kein Pinning, keine Strecke --- */
.pin-wrap { height: auto; }
.pin {
  position: static; height: auto;
  display: block; padding-block: var(--f34) var(--f55);
}
.pin-buehne { display: grid; gap: var(--f34); }
.pin-zahl { display: none; }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--f34); max-width: var(--f610);
}
.step {
  display: block; grid-template-columns: none;
  opacity: 0; transform: translateY(var(--f21));
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.step.is-in { opacity: 1; transform: none; }
.step::before {
  /* Auf schmalen Geräten trägt jeder Schritt seine eigene Nummer,
     weil die große Ziffer dort nicht mitläuft. */
  content: counter(schritt, decimal-leading-zero);
  counter-increment: schritt;
  display: block; margin-bottom: var(--f8);
  font: 500 var(--t-small)/1 var(--mono);
  letter-spacing: 0.16em; color: var(--a0);
}
.steps { counter-reset: schritt; }

.pin-leiste { display: none; }

/* --- Ab Tablet: angeheftet, Ziffer und Schritt nebeneinander --- */
@media (min-width: 721px) {
  .pin-wrap { height: 210svh; }
  .pin {
    position: sticky; top: 0; height: 100svh;
    display: grid; align-content: center; padding-block: 0;
    overflow: hidden;
  }
  .pin-buehne {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(var(--f34), 5vw, var(--f89));
    row-gap: var(--f34);
    width: 100%;
  }

  .pin-zahl {
    display: block;
    font: 600 clamp(6rem, 13vw, 13rem)/0.78 var(--mono);
    letter-spacing: -0.06em; color: var(--a0);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 var(--f89) var(--glow-a0);
  }

  /* Alle vier liegen übereinander; sichtbar ist der aktive.
     Im Quelltext bleiben sie nacheinander lesbar, damit
     Vorlesewerkzeuge den ganzen Ablauf bekommen.              */
  .steps { position: relative; gap: 0; }
  .step {
    grid-area: 1 / 1;
    opacity: 0; transform: translateY(var(--f21));
    pointer-events: none;
  }
  .step::before { display: none; }
  .step.is-active { opacity: 1; transform: none; pointer-events: auto; }

  .pin-leiste {
    display: grid; grid-column: 2;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--f8); list-style: none; margin: 0; padding: 0;
    max-width: var(--f377);
  }
  .pin-leiste li {
    height: var(--f2); background: var(--line);
    position: relative; overflow: hidden;
  }
  .pin-leiste li::after {
    content: ""; position: absolute; inset: 0;
    background: var(--a0); transform-origin: 0 50%;
    transform: scaleX(var(--seg, 0));
    transition: transform 120ms linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung ist die Überblendung sinnlos — dann steht der
     Ablauf als Liste da, vollständig und ohne Strecke.         */
  .pin-wrap { height: auto !important; }
  .pin { position: static !important; height: auto !important; padding-block: var(--f34) var(--f55); }
  .pin-buehne { grid-template-columns: 1fr !important; }
  .pin-zahl, .pin-leiste { display: none !important; }
  .steps { gap: var(--f34) !important; }
  .step { grid-area: auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .step::before { display: block !important; }
}

/*  Nachtrag: `.step.is-in` (0,2,0) schlug die Desktop-Regel `.step`
    (0,1,0) — Media Queries erhöhen die Spezifität nicht. Dadurch
    standen auf dem Bildschirm alle vier Schritte übereinander
    sichtbar. Die Einblendung gehört nur auf schmale Geräte.        */
@media (min-width: 721px) {
  .step.is-in { opacity: 0; transform: translateY(var(--f21)); }
  .step.is-in.is-active,
  .step.is-active { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Hilfsklassen statt style-Attributen
   Grund ist nicht Geschmack: Die CSP setzt style-src 'self',
   und damit sind auch inline style-Attribute gesperrt. Entweder
   man nimmt 'unsafe-inline' in die Richtlinie auf — und gibt
   damit den halben Schutz auf — oder man räumt die neun Stellen
   weg. Letzteres war billiger.
   ------------------------------------------------------------ */
.luft-34 { margin-top: var(--f34); }
.luft-55 { margin-top: var(--f55); }
.luft-89 { margin-top: var(--f89); }
.weit { gap: var(--f55); }
.eng { max-width: var(--measure); }
.karte-knapp { padding: var(--f13) var(--f21); }
.fuss-zeile {
  display: flex; flex-wrap: wrap;
  gap: var(--f21) var(--f55);
  font: 400 var(--t-small)/1.6 var(--mono);
  color: var(--muted);
}

/* ============================================================
   04B — Titel rechts, Text klappt darunter auf
   Im Ruhezustand steht nur die Überschrift neben der Ziffer:
   vier Zeilen Fließtext dauerhaft auf der Bühne erschlagen die
   Ziffer und zwingen zum Lesen, bevor jemand weiß, ob ihn der
   Schritt überhaupt interessiert. Beim Aufklappen schrumpft die
   Ziffer, damit der Text Platz und Ruhe bekommt.
   ============================================================ */

.step-titel {
  display: flex; align-items: baseline; gap: var(--f13);
  width: 100%; text-align: left;
  background: none; border: 0; padding: 0;
  color: inherit; cursor: pointer;
  font-family: var(--sans);
}
.step-nr {
  font: 500 var(--t-small)/1 var(--mono);
  letter-spacing: 0.16em; color: var(--a0);
  flex: none;
}
.step-name {
  font-size: var(--t-h4); font-weight: 620;
  letter-spacing: -0.03em; line-height: 1.15;
  transition: color var(--dur-2);
}
.step-titel:hover .step-name { color: var(--a0); }
.step-pfeil {
  flex: none; margin-left: auto;
  width: var(--f13); height: var(--f13);
  border-right: 1.5px solid var(--a0);
  border-bottom: 1.5px solid var(--a0);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-3) var(--ease-out);
}
.step[data-offen="true"] .step-pfeil { transform: rotate(-135deg) translateY(-2px); }

/*  Auf- und zuklappen über grid-template-rows: 0fr -> 1fr.
    Das animiert eine unbekannte Höhe, ohne sie vorher zu messen
    und ohne max-height zu raten.                              */
.step-text {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-out);
}
.step-text-innen { overflow: hidden; }
.step-text p { margin: var(--f13) 0 0; color: var(--muted); }
.step[data-offen="true"] .step-text { grid-template-rows: 1fr; }

.step-titel:focus-visible { outline: 2px solid var(--a0); outline-offset: 4px; border-radius: var(--f3); }

/* --- Ab Tablet: Ziffer weicht dem Text ------------------- */
@media (min-width: 721px) {
  .pin-zahl {
    font-size: var(--zahl, clamp(6rem, 13vw, 13rem));
    transition: font-size var(--dur-4) var(--ease-out);
  }
  /* Offener Schritt: Ziffer auf gut die Hälfte */
  .pin-buehne[data-offen="true"] { --zahl: clamp(3.2rem, 6.4vw, 6rem); }

  .step-nr { display: none; }          /* die große Ziffer sagt es schon */
  .steps { align-items: start; }
  .step { align-self: start; }
}

/* --- Schmale Geräte: alles offen, kein Aufklappen nötig --- */
@media (max-width: 720px) {
  .step-text { grid-template-rows: 1fr; }
  .step-pfeil { display: none; }
  .step-titel { cursor: default; }
  .step::before { content: none; }     /* die Nummer steht jetzt im Titel */
}

@media (prefers-reduced-motion: reduce) {
  .step-text { grid-template-rows: 1fr !important; }
  .step-pfeil { display: none; }
  .pin-buehne { --zahl: clamp(3.2rem, 6.4vw, 6rem); }
}