/* edit. – Post-Production Studio
   Ein dunkler Raum (Ink), Struktur nur aus Weißraum und dem 2-px-Strich.
   Alle Werte aus dem edit. Design System (Designhandbuch v4.0). */

@font-face { font-family: "Manrope"; src: url("fonts/manrope-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-extrabold.woff") format("woff"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: dark;
  /* Farbe (Thema Ink) */
  --ink: #0E0E10;
  --paper: #F5F3EE;
  --rot: #E23D28;
  --flaeche: #16171B;
  --feld-grund: #FFFFFF;
  --fehlerrot: #B3123C;
  --grund: var(--ink);
  --text: var(--paper);
  --signal: var(--rot);
  --fokus: var(--rot);

  /* Schrift: fünf Stufen */
  --font: "Manrope", Helvetica, Arial, sans-serif;
  --display: 800 clamp(40px, 6vw, 104px) / 0.92 var(--font);
  --gross: 800 clamp(36px, 3.6vw, 56px) / 0.95 var(--font);
  --titel: 700 clamp(21px, 1.7vw, 24px) / 1.15 var(--font);
  --einleitung: 500 clamp(18px, 1.4vw, 21px) / 1.45 var(--font);
  --fliesstext: 500 17px / 1.55 var(--font);
  --zusatz: 600 15px / 1.4 var(--font);
  --label: 700 15px / 1 var(--font);

  /* Raum: Grundeinheit 8 px */
  --rand: clamp(20px, 3.4vw, 48px);
  --spalte: clamp(20px, 2.8vw, 40px);
  --abschnitt: clamp(56px, 6.5vw, 96px);
  --kopf-abstand: clamp(32px, 4vw, 56px);
  --strich: 2px;
  --leiste: 84px;

  /* Bewegung */
  --kurve: cubic-bezier(.16, 1, .3, 1);
  --dauer-klein: 400ms;
  --dauer-flaeche: 800ms;
  --dauer-bild: 1.2s;
}

/* Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text); font: var(--fliesstext); -webkit-font-smoothing: antialiased; font-synthesis: none; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: var(--strich) solid var(--fokus); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tab { font-variant-numeric: tabular-nums; }
.wort { white-space: nowrap; }  /* Wort und Punkt brechen nie auseinander */
/* Runder Schlusspunkt wie im Logo, in Textfarbe: ein runder Punkt statt des eckigen Satzzeichens. Der Punkt bleibt als Text für Screenreader erhalten.
   Größe auf ganze Pixel gerundet, damit alle Punkte gleich scharf und gleich groß erscheinen. */
.punkt { display: inline-block; width: 0.16em; height: 0.16em; width: round(0.16em, 1px); height: round(0.16em, 1px); margin-left: 0.05em; border-radius: 50%; background: var(--text); color: transparent; overflow: hidden; vertical-align: baseline; }
.display .punkt, .start h1 .punkt { width: 0.135em; height: 0.135em; width: round(0.135em, 1px); height: round(0.135em, 1px); }

.wrap { padding-left: max(var(--rand), env(safe-area-inset-left, 0px)); padding-right: max(var(--rand), env(safe-area-inset-right, 0px)); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); }
.abschnitt { padding-block: var(--abschnitt); scroll-margin-top: calc(var(--leiste) - 24px); }
.display { font: var(--display); letter-spacing: -0.036em; text-wrap: balance; }
.titel { font: var(--titel); letter-spacing: -0.016em; }
.einleitung { font: var(--einleitung); max-width: 46ch; text-wrap: pretty; }
.zusatz { font: var(--zusatz); }
.kopf { display: flex; flex-direction: column; gap: 20px; margin-bottom: var(--kopf-abstand); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--paper); color: var(--ink); padding: 14px 16px; font: var(--label); }
.skip:focus { top: 16px; }

/* Button (Baustein Button) */
.btn { font: var(--label); padding: 17px 22px; border: var(--strich) solid var(--text); border-radius: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer; text-decoration: none; touch-action: manipulation; transition: background-color 300ms var(--kurve), color 300ms var(--kurve); }
.btn--primaer { background: var(--text); color: var(--grund); }
.btn--primaer:hover { background: transparent; color: var(--text); }

/* Kopfleiste (Baustein Kopfleiste): bleibt beim Scrollen oben stehen */
.kopfleiste { position: sticky; top: 0; z-index: 30; background: var(--grund); }
.leiste { height: var(--leiste); display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.leiste__logo { display: block; padding: 6px 0; }
.leiste__logo img { height: 44px; width: auto; }
.leiste nav ul { display: flex; align-items: center; gap: 28px; font: var(--label); }
.leiste nav a:not(.btn) { text-decoration: none; padding-block: 12px; }
.leiste nav a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: var(--strich); text-underline-offset: 6px; }
.leiste .btn { padding: 12px 16px; min-height: 44px; }
.leiste__rechts { display: none; align-items: center; gap: 8px; }
.leiste__menue { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--text); width: 44px; height: 44px; padding: 10px; cursor: pointer; touch-action: manipulation; }
.leiste__zurueck { font: var(--label); text-decoration: none; padding-block: 12px; }
.leiste__zurueck:hover { text-decoration: underline; text-decoration-thickness: var(--strich); text-underline-offset: 6px; }

/* Platzhalter: echte Formate, klar markiert. Zum Austauschen die figure.ph durch <video> oder <img> im selben Seitenverhältnis ersetzen. */
.ph { position: relative; color: var(--paper); background: var(--flaeche); overflow: hidden; max-width: 100%; }
.ph__inhalt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 12px; text-align: center; }
.ph__marke { font: var(--zusatz); }
.ph__name { font: 700 15px/1.25 var(--font); }
.r-169 { aspect-ratio: 16 / 9; } .r-916 { aspect-ratio: 9 / 16; }

.etikett { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.etikett b { font: var(--titel); letter-spacing: -0.016em; }

/* Video (Baustein VideoVorschau) */
.video { position: relative; background: var(--flaeche); overflow: hidden; }
.video video { width: 100%; height: 100%; object-fit: cover; }
.video__knopf { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; background: var(--ink); color: var(--paper); border: 0; padding: 11px 14px 11px 12px; font: 700 14px/1 var(--font); cursor: pointer; touch-action: manipulation; transition: background-color 300ms var(--kurve), color 300ms var(--kurve); }
.video__knopf::before { content: ""; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.video__knopf:hover { background: var(--paper); color: var(--ink); }
.video.ist-offen .video__knopf { display: none; }

/* 1 Start: links das Showreel hochkant (4:5), rechts der Einstieg. Text oben und unten an den Videokanten ausgerichtet. */
.start { --bleed: max(var(--rand), env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) min(calc((100svh - var(--leiste)) * 0.8), 56vw); column-gap: clamp(40px, 6vw, 112px); padding: 0 0 0 max(var(--rand), env(safe-area-inset-left, 0px)); }
.start__video { grid-column: 2; grid-row: 1; align-self: start; aspect-ratio: 4 / 5; width: 100%; max-width: none; }
.start__text { container-type: inline-size; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 3.4vw, 48px); padding-block: 48px; }
.start h1 { font: var(--display); font-size: clamp(40px, min(17cqi, 10svh), 136px); letter-spacing: -0.036em; text-wrap: balance; margin-top: -0.06em; }  /* wächst mit der Textspalte, „Wir machen“ füllt sie fast ganz */
.start__unten { display: flex; flex-direction: column; gap: 24px; }
.start__gewerke { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: var(--strich) solid var(--text); padding-top: 16px; font: var(--titel); letter-spacing: -0.016em; }
.start__unten .einleitung { max-width: 46ch; }
.start__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.tonknopf { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; background: none; border: 0; font: var(--label); color: var(--text); cursor: pointer; text-decoration: underline; text-decoration-thickness: var(--strich); text-underline-offset: 6px; touch-action: manipulation; }
.tonknopf[hidden] { display: none; }
.tonknopf::before { content: ""; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.start__video video { cursor: pointer; }
.start__video.ist-offen video { cursor: auto; }
.js .start__text > * { animation: hoch var(--dauer-flaeche) var(--kurve) both; }
.js .start__text > :nth-child(2) { animation-delay: 180ms; }
.js .start__video { animation: aufziehen var(--dauer-bild) var(--kurve) 180ms both; }
@keyframes aufziehen { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hoch { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 2 Arbeiten */
.arbeiten__reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spalte); }
.arbeiten__folgen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalte); margin-top: clamp(40px, 5vw, 64px); }

/* 3 Leistungen: fünf Gewerke, gleich gewichtet */
.gewerk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); row-gap: 16px; align-items: start; border-top: var(--strich) solid var(--text); padding-block: 24px clamp(40px, 4.5vw, 64px); }
.gewerk:last-child { padding-bottom: 0; }
.gewerk h3 { grid-column: 1 / 4; font: var(--gross); letter-spacing: -0.036em; }
.gewerk__text { grid-column: 4 / 8; display: flex; flex-direction: column; gap: 14px; }
.gewerk__text .einleitung { max-width: 34ch; }
.gewerk figure { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 10px; }
.gewerk__bild { aspect-ratio: 16 / 9; background: var(--flaeche); overflow: hidden; }
.gewerk__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--kurve); }
.gewerk:hover .gewerk__bild img { transform: scale(1.03); }

/* 4 Preise */
.karte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalte); row-gap: 40px; }
.posten { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 8px; align-items: baseline; align-content: start; border-top: var(--strich) solid var(--text); padding-top: 20px; }
.posten h3 { font: var(--titel); letter-spacing: -0.016em; }
.posten__preis { font: 800 clamp(22px, 1.9vw, 28px)/1.1 var(--font); letter-spacing: -0.016em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.posten__format { grid-column: 1 / -1; font: var(--zusatz); }
.posten p { grid-column: 1 / -1; max-width: 46ch; }
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalte); row-gap: 40px; margin-top: clamp(56px, 6vw, 88px); }
.extra { display: flex; flex-direction: column; gap: 14px; border-top: var(--strich) solid var(--text); padding-top: 20px; }
.extra p { max-width: 52ch; }
.hinweise { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; }
.hinweise p { max-width: none; }

/* 5 Ablauf */
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalte); margin-bottom: clamp(56px, 7vw, 96px); }
.zahl { display: flex; flex-direction: column; gap: 14px; }
.zahl b { font: var(--gross); letter-spacing: -0.036em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zahl span { max-width: 32ch; }
.schritt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); row-gap: 8px; border-top: var(--strich) solid var(--text); padding-block: 24px 40px; }
.schritt:last-child { padding-bottom: 0; }
.schritt .zeit { grid-column: 1 / 4; }
.schritt h3 { grid-column: 4 / 7; }
.schritt p { grid-column: 7 / 13; max-width: 52ch; }
.zeit { font: 700 15px/1.3 var(--font); }

/* Thema Paper: Abschnitte wechseln zwischen Paper und Ink (Kopfleiste, Start, Leistungen, Ablauf hell). Alle Bausteine laufen über --grund und --text mit. */
.thema-hell { --grund: var(--paper); --text: var(--ink); background: var(--grund); color: var(--text); color-scheme: light; }
.thema-hell ::selection { background: var(--ink); color: var(--paper); }

/* 6 Anfrage */
.anfrage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); row-gap: 40px; }
.anfrage__text { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 20px; }
.formular { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--spalte); align-content: start; }
.feld { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.feld--voll { grid-column: 1 / -1; }
.feld label, .feld legend { font: 700 14px/1.2 var(--font); padding: 0; }
.feld legend { margin-bottom: 8px; }
.feld input, .feld textarea { font: 500 17px/1.3 var(--font); background: var(--feld-grund); color: var(--ink); border: 0; border-bottom: var(--strich) solid var(--ink); border-radius: 0; padding: 16px 18px; outline: none; width: 100%; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--ink); opacity: 1; }
.feld input:focus-visible, .feld textarea:focus-visible { border-bottom-color: var(--fokus); outline: var(--strich) solid var(--fokus); outline-offset: 2px; }
.feld textarea { min-height: 140px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: var(--strich) solid var(--text); font: var(--label); cursor: pointer; user-select: none; transition: background-color 300ms var(--kurve), color 300ms var(--kurve); }
.chip input:checked + span { background: var(--text); color: var(--grund); }
.chip input:focus-visible + span { outline: var(--strich) solid var(--fokus); outline-offset: 3px; }
.feld-fehler { display: flex; gap: 10px; align-items: baseline; font: 600 15px/1.4 var(--font); }
.feld-fehler::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.formular__fuss { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.formular__fuss #meldung:empty { display: none; }
.falle { position: absolute; left: -9999px; }
.meldung { padding: 16px 20px; font: 600 15px/1.4 var(--font); }
.meldung--ok { border-top: var(--strich) solid var(--text); padding-inline: 0; }
.meldung--fehler { border-top: var(--strich) solid var(--text); padding-inline: 0; display: flex; gap: 10px; align-items: baseline; }
.meldung--fehler::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }

/* Fuß (Baustein Kopfleiste: Fußleiste) */
.fuss { padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.fuss__leiste { min-height: var(--leiste); padding-block: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font: var(--label); }
.fuss--strich .fuss__leiste { border-top: var(--strich) solid var(--text); }
.fuss__logo { display: block; padding: 6px 0; }
.fuss__logo img { height: 44px; width: auto; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-left: auto; }
.fuss__links a { display: inline-block; text-decoration: none; padding-block: 10px; }
.fuss__links a:hover { text-decoration: underline; text-decoration-thickness: var(--strich); }

/* Rechtliches */
.recht { max-width: 760px; padding-block: clamp(40px, 7vw, 104px) var(--abschnitt); }
.recht h1 { margin-bottom: clamp(40px, 5vw, 64px); }
.recht > .einleitung { margin: -16px 0 clamp(32px, 4vw, 48px); }
.recht section { border-top: var(--strich) solid var(--text); padding-block: 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.recht section p { max-width: 64ch; }
.recht a { text-decoration: underline; text-decoration-thickness: var(--strich); }

/* Cookie-Einwilligung: dunkle Leiste unten, 2-px-Strich, drei gleichwertige Knöpfe */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.einwilligung { --grund: var(--ink); --text: var(--paper); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--grund); color: var(--text); border-top: var(--strich) solid var(--text); max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; padding: 24px max(var(--rand), env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(var(--rand), env(safe-area-inset-left, 0px)); animation: hoch var(--dauer-flaeche) var(--kurve) both; }
.einwilligung[hidden] { display: none; }
.einwilligung__innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px var(--spalte); align-items: end; }
.einwilligung__text { display: flex; flex-direction: column; gap: 10px; }
.einwilligung__text p { font: var(--zusatz); max-width: 78ch; }
.einwilligung a { text-decoration: underline; text-decoration-thickness: var(--strich); text-underline-offset: 3px; }
.einwilligung .titel:focus { outline: none; }
.einwilligung__wahl { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--spalte); }
.einwilligung__wahl[hidden] { display: none; }
.einwilligung__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.einwilligung__knoepfe .btn { background: transparent; color: var(--text); min-width: 148px; }
.einwilligung__knoepfe .btn:hover { background: var(--text); color: var(--grund); }
.schalter { display: flex; gap: 12px; align-items: flex-start; border-top: var(--strich) solid var(--text); padding-top: 14px; font: var(--zusatz); cursor: pointer; }
.schalter strong { display: block; font: var(--label); margin-bottom: 6px; }
.schalter input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: var(--strich) solid var(--text); border-radius: 0; background: transparent; display: grid; place-content: center; cursor: pointer; }
.schalter input::before { content: ""; width: 10px; height: 10px; background: var(--text); transform: scale(0); transition: transform 200ms var(--kurve); }
.schalter input:checked::before { transform: scale(1); }
.schalter input:disabled { opacity: .5; cursor: default; }
.schalter input:focus-visible { outline: var(--strich) solid var(--fokus); outline-offset: 3px; }
.fuss__knopf { font: inherit; color: inherit; background: none; border: 0; padding: 10px 0; cursor: pointer; }
.fuss__knopf:hover { text-decoration: underline; text-decoration-thickness: var(--strich); }
html.hat-einwilligung .fuss { padding-bottom: 0; }
.link-knopf { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: var(--strich); }
.recht code { font: 600 0.94em/1 var(--font); }

/* Einblenden (24 px von unten, 800 ms, Versatz 90 ms, höchstens vier Stufen). Ohne Script bleibt alles sichtbar. */
.js [data-in], .js [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dauer-flaeche) var(--kurve), transform var(--dauer-flaeche) var(--kurve); }
.js [data-in].ist-da, .js [data-stagger] > .ist-da { opacity: 1; transform: none; }

/* Tablet und Telefon */
@media (max-width: 860px) {
  .leiste nav { display: none; }
  .leiste nav.ist-offen { display: block; position: absolute; left: calc(-1 * max(var(--rand), env(safe-area-inset-left, 0px))); right: calc(-1 * max(var(--rand), env(safe-area-inset-right, 0px))); top: var(--leiste); z-index: 40; background: var(--grund); border-bottom: var(--strich) solid var(--text); padding: 8px max(var(--rand), env(safe-area-inset-left, 0px)) 32px; }
  .leiste nav.ist-offen ul { flex-direction: column; align-items: flex-start; gap: 0; font: 800 32px/1.2 var(--font); letter-spacing: -0.02em; }
  .leiste nav.ist-offen li:last-child { display: none; }
  .leiste__rechts { display: flex; }
  .leiste__logo img, .fuss__logo img { height: 36px; }
  .start { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 0 var(--bleed) 0 max(var(--rand), env(safe-area-inset-left, 0px)); }
  .start__text, .start__video { grid-column: 1; grid-row: auto; }
  .start__text { gap: 28px; padding-block: 32px 40px; }
  .start__video { margin-inline: calc(-1 * max(var(--rand), env(safe-area-inset-left, 0px))) calc(-1 * var(--bleed)); justify-self: stretch; width: auto; }
  .start__gewerke { font-size: 18px; column-gap: 20px; }
  .arbeiten__reels { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .arbeiten__folgen { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .gewerk { row-gap: 18px; }
  .gewerk h3, .gewerk__text, .gewerk figure { grid-column: 1 / -1; }
  .karte, .extras { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .zahlen { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .schritt .zeit, .schritt h3, .schritt p { grid-column: 1 / -1; }
  .anfrage__text, .formular { grid-column: 1 / -1; }
  .formular { grid-template-columns: minmax(0, 1fr); }
  .fuss__links { margin-left: 0; }
  .einwilligung { padding-top: 20px; }
  .einwilligung__innen { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .einwilligung__wahl { grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .einwilligung__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .einwilligung__knoepfe [data-aktion="auswahl"] { grid-column: 1 / -1; grid-row: 2; }
  .einwilligung__knoepfe .btn { min-width: 0; padding-inline: 12px; }
}

/* Bewegung reduzieren: laut Design System fällt jede Animation weg. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-in], .js [data-stagger] > * { opacity: 1; transform: none; }
}