/* ==========================================================================
   scheibenweise. — privat.css
   Seite /privat/: Einstieg mit Abzieher · Leistungen (Galerie) · Preise mit
   Kassenzettel · Ablauf · Einsatzgebiet · Fragen · Abschluss.
   Baut auf core.css auf (Tokens, Themen, Bausteine). Farben kommen aus den
   Themen-Variablen; Bewegung setzt privat.js, der Grundzustand hier ist immer
   die fertige, sichtbare Seite.
   ========================================================================== */

/* ---------- 0 · Header: Engstellen und Bedienung ----------
   Schmale Handys: Logo, Umschalter und Menüknopf brauchen zusammen mehr als 350 px. core.css bleibt unberührt,
   deshalb hier: kleineres Logo, engere Abstände, Menüknopf behält seine Tippfläche. */
@media (max-width:520px){
  .site-header__inner{gap:10px}
  .site-header__logo{width:clamp(112px,33vw,150px)}
  .site-header__burger{flex:none}
  .welt-switch a{padding:0 8px}
}
/* sehr schmal (z. B. 320 px oder stark vergrößerte Ansicht): noch einmal enger, damit der Menüknopf im Bild bleibt */
@media (max-width:339px){
  .site-header__inner{gap:6px;padding-inline:14px}
  .site-header__logo{width:96px}
  .welt-switch a{padding:0 5px}
}

/* Zwischen 1080 und 1280 px ist die Zeile mit fünf Menüpunkten, Telefon und Knopf zu lang
   (der Knopf wird sonst gequetscht): Telefon ausblenden (steht im Footer und bei den Fragen), enger setzen. */
@media (min-width:1080px) and (max-width:1279px){
  .site-header__tel{display:none}
  .site-header__logo{width:150px}
  .site-header__nav{gap:clamp(14px,1.7vw,22px)}
}
@media (min-width:1080px){.site-header__cta{flex:none}}
/* Tastatur: Der Header blendet sich beim Herunterscrollen aus (core.js). Liegt der Fokus in ihm, bleibt er sichtbar. */
.site-header:has(:focus-visible){transform:none}
/* Tippflächen mindestens 44 px hoch, das Aussehen bleibt: Logo-Link und Umschalter Privat | Gewerbe */
.site-header__logo{display:flex;align-items:center;min-height:44px}
.welt-switch a{position:relative}
.welt-switch a::after{content:"";position:absolute;inset:-4px 0}
/* Sprungmarken auf Desktop: Lenis zieht den Abstand zum Header doppelt ab (eigener Versatz in core.js
   plus scroll-padding-top aus core.css), die Abschnitte landen sonst 180 px unter dem oberen Rand.
   Dieser Ausgleich hebt das scroll-padding wieder auf. Ohne Lenis (Touch) bleibt alles wie in core.css. */
.lenis main>section[id]{scroll-margin-top:calc(-1*(var(--header-h) + 16px))}

/* ---------- 1 · Einstieg mit Abzieher ----------
   Aufbau: .hero (Scrollweg) > .hero__buehne (bleibt auf Desktop stehen) >
   .hero__glas (Bild, Video, Seifenschicht, Klinge) + .hero__text (weißer Block). */
.hero{--hero-h:min(100svh,1100px);--klinge:10px;position:relative}
.hero__buehne{display:flex;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line)}

/* Das Glas: liegt unter dem Header, damit das Bild die ganze Breite und Höhe füllt */
.hero__glas{position:relative;flex:none;height:clamp(300px,46svh,420px);overflow:hidden;isolation:isolate;background:var(--surface)}
.hero__bild,.hero__video,.hero__seife-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 66%}
.hero__video{opacity:0;transition:opacity 700ms var(--ease-out)}
.hero__video.is-aktiv{opacity:1}

/* Eingeseifte Schicht: dasselbe Bild unscharf und aufgehellt, darüber Schaum.
   Im Grundzustand unsichtbar (klares Glas); privat.js blendet sie ein und zieht sie ab. */
.hero__seife{position:absolute;inset:0;overflow:hidden;isolation:isolate;visibility:hidden;background:var(--line)}
.hero__seife-bild{filter:blur(7px) brightness(1.02) saturate(.88);transform:scale(1.05)}
.hero__schaum,.hero__wulst{position:absolute;inset:0;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;mix-blend-mode:screen}
/* Schaum kontrastreicher als die Vorlage: Blasen und Schlieren bleiben stehen, dazwischen scheint der Raum durch */
.hero__schaum{filter:contrast(2) brightness(.72)}
/* Schaumwulst: der Schaum, den die Klinge vor sich herschiebt (schmaler Streifen direkt rechts der Klinge) */
.hero__wulst{-webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.45) 14px,transparent 46px);mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.45) 14px,transparent 46px)}
/* Die Klinge: blauer Balken. Der Träger ist so breit wie das Glas, damit Prozentwerte
   in transform und clip-path dieselbe Bezugsgröße haben. */
.hero__klinge{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.hero__klinge::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--klinge);background:var(--accent)}

@media (prefers-reduced-motion:no-preference){
  /* Schaumtextur nur laden, wenn sie auch gezeigt wird */
  .js:not(.ruhe) .hero__schaum,.js:not(.ruhe) .hero__wulst{background-image:url("/assets/img/textur-schaum.webp")}
  /* Solange Intro oder Blende die Seite noch verdecken, liegt die Seife schon auf dem Glas
     (kein Aufblitzen des klaren Bildes). Gleiche Absicherung wie in core.css: ohne
     laufendes Skript verschwindet sie von selbst. */
  .is-intro .hero__seife,.is-entering .hero__seife{visibility:visible;animation:sw-failsafe 0s linear 3.5s forwards}
  .anim.is-intro .hero__seife,.anim.is-entering .hero__seife{animation:none}
}

/* Weißer Textblock unter dem Glas */
.hero__text{position:relative;z-index:1;background:var(--bg);color:var(--fg)}
.hero__innen{display:grid;grid-template-columns:minmax(0,1fr);padding-top:28px}
.hero__titel{margin-top:16px}
.hero__satz{margin-top:18px}
.hero__aktionen{display:grid;gap:10px;margin-top:26px}
.hero__punkte{margin-top:30px}
.hero__punkte li{display:flex;align-items:center;gap:10px;min-height:52px;border-top:1px solid var(--line);font-size:.9375rem;font-weight:600}
.hero__punkte .icon{color:var(--accent-text)}

@media (min-width:560px){
  .hero__aktionen{display:flex;flex-wrap:wrap}
  .hero__punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
  .hero__punkte li{min-height:56px;border-top:0}
  .hero__punkte li+li{padding-left:clamp(14px,2vw,24px);border-left:1px solid var(--line)}
}

/* Ab Tablet quer: Die Bühne füllt den ersten Bildschirm, das Glas nimmt, was der Textblock übrig lässt.
   Nur bei genug Höhe: In sehr flachen Fenstern (Handy quer, 900 px breit) bliebe sonst kaum Glas übrig. */
@media (min-width:900px) and (min-height:560px){
  .hero__buehne{height:var(--hero-h)}
  .hero__glas{flex:1 1 0;height:auto;min-height:0}
}
@media (min-width:900px){
  .hero__innen{padding-top:clamp(20px,3.8svh,38px)}
  /* Überschrift in einer Zeile über die ganze Breite: Größe folgt Breite und Höhe des Fensters */
  .hero__titel{margin-top:clamp(12px,1.8svh,18px);font-size:min(var(--fs-display),6.1vw,10.5svh)}
  .hero__satz{margin-top:clamp(14px,2.2svh,22px);max-width:40em}
  .hero__aktionen{margin-top:clamp(18px,2.8svh,26px)}
  .hero__punkte{margin-top:clamp(18px,2.8svh,28px)}
}
/* Ab 1024 px stehen die Knöpfe rechts neben dem Satz (darunter wäre die Textspalte zu schmal) */
@media (min-width:1024px){
  .hero__innen{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,5vw,80px);align-items:end}
  .hero__innen>.eyebrow,.hero__titel,.hero__punkte{grid-column:1/-1}
  .hero__aktionen{margin-top:0;flex-wrap:nowrap}
}
@media (min-width:900px) and (max-height:760px){
  .hero__satz{font-size:1.0625rem}
  .hero__punkte li{min-height:48px}
  .hero__aktionen .btn{min-height:50px}
}

/* Desktop mit Maus: Die Bühne bleibt stehen, das Scrollen zieht die Seife ab.
   Der Scrollweg (90 % der Bildschirmhöhe) steht schon im CSS, damit beim Laden nichts springt.
   Dieselbe Bedingung wie DESKTOP in privat.js. */
@media (min-width:1024px) and (min-height:560px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .js:not(.ruhe) .hero{height:calc(var(--hero-h) + 90svh)}
  .js:not(.ruhe) .hero__buehne{position:sticky;top:0}
}

/* ---------- 2 · Leistungen: Scheiben-Galerie ---------- */
.galerie{container-type:inline-size;--rand:max(var(--gutter),calc((100cqi - var(--container))/2));--luecke:clamp(12px,1.6vw,22px);--scheibe-h:clamp(250px,30vw,440px)}
.galerie__streifen{position:relative;display:flex;align-items:stretch;gap:var(--luecke);overflow-x:auto;overflow-y:hidden;padding-left:var(--rand);scroll-padding-left:var(--rand);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.galerie__streifen::-webkit-scrollbar{display:none}
/* rechter Rand als eigenes Flex-Element: zählt in jedem Browser zum Scrollbereich */
.galerie__streifen::after{content:"";flex:none;width:calc(var(--rand) - var(--luecke))}
.galerie__streifen:focus-visible{outline-offset:-2px}

.scheibe{flex:none;display:flex;flex-direction:column;width:min(82cqi,340px);scroll-snap-align:start}
.scheibe__bild{aspect-ratio:4/3}
.scheibe__bild img{-webkit-user-drag:none;user-select:none}
.scheibe__video{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--ease-out)}
.scheibe__video.is-aktiv{opacity:1}
/* Bild liegt etwas größer in der Scheibe, damit es beim Blättern leicht nachziehen kann (privat.js) */
.galerie.hat-tiefe .scheibe__bild>img,.galerie.hat-tiefe .scheibe__bild>video{scale:1.08}
.scheibe__text{display:flex;flex-direction:column;flex:1;gap:10px;padding-top:20px}
.scheibe__nr{color:var(--accent-text)}
.scheibe__name{font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem)}
.scheibe__satz{max-width:28em;color:var(--muted);font-size:var(--fs-small)}
.scheibe__preise{margin:auto 0 0;padding-top:10px}
.scheibe__preise>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.scheibe__preise>div:last-child{border-bottom:1px solid var(--line)}
.scheibe__preise dt{font-size:var(--fs-small);font-weight:600}
.scheibe__preise dd{margin:0;font-size:1.25rem;white-space:nowrap}

@media (min-width:900px){
  /* gleiche Höhe, Breite nach Bildformat: wie Schiebetüren unterschiedlicher Breite */
  .scheibe{width:calc(var(--scheibe-h)*var(--ar,1.5))}
  .scheibe__bild{aspect-ratio:auto;height:var(--scheibe-h)}
  .scheibe__text{padding-top:24px}
}
@media (hover:hover) and (pointer:fine){
  .galerie__streifen{scroll-snap-type:none;cursor:grab}
  .galerie__streifen.is-ziehend{cursor:grabbing;user-select:none}
}

.galerie__fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 24px;margin-top:clamp(28px,3.4vw,44px)}
.galerie__lauf{grid-column:1/-1;position:relative;height:var(--bar-h);background:var(--line);overflow:hidden}
.galerie__lauf span{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(.36)}
.galerie__hinweis{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 20px}
.galerie__hinweis .arrow-link{min-height:44px}
.galerie__pfeile{display:flex;gap:8px}
.galerie__pfeil{display:grid;place-content:center;width:48px;height:48px;border:2px solid var(--fg);color:var(--fg);transition:background var(--dur-fast),color var(--dur-fast),opacity var(--dur-fast)}
.galerie__pfeil:hover:not([aria-disabled="true"]){background:var(--fg);color:var(--bg)}
.galerie__pfeil[aria-disabled="true"]{opacity:.25;cursor:default}
/* Ohne JavaScript scrollt der Streifen von selbst (wischen, Pfeiltasten); Knöpfe und Laufbalken hätten keine Funktion */
html:not(.js) .galerie__pfeile,html:not(.js) .galerie__lauf{display:none}

/* ---------- 3 · Preise ---------- */
.preise__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,72px)}
.preise__haupt .section-head{margin-bottom:clamp(32px,4vw,56px)}
/* unter der Liste (Tablet hochkant) bleibt der Zettel schmal wie ein Kassenzettel */
.preise__seite{max-width:460px}
@media (min-width:1000px){
  .preise__raster{grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:clamp(40px,5.5vw,88px);align-items:start}
  /* der blaue Balken des Zettels liegt auf einer Linie mit dem Balken der Dachzeile links */
  .preise__seite{position:sticky;top:calc(var(--header-h) + 24px);margin-top:calc((var(--fs-tag) - var(--bar-h))/2)}
}

/* Preisliste: eine weiße Scheibe, Zeilen durch Haarlinien getrennt */
.preisliste{background:var(--surface);border:1px solid var(--line)}
.preisliste>li+li{border-top:1px solid var(--line)}
.preisliste__zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;padding:18px 20px}
.preisliste__zeile--bild{grid-template-columns:52px minmax(0,1fr);row-gap:8px;padding:16px}
.preisliste__bild{position:relative;width:52px}
/* Fenster mit Rollladen-Preis: Beim Überfahren der Zeile zeigt die Zeichnung den Rollladen */
.preisliste__bild--wechsel .fenster-svg{transition:opacity var(--dur-base) var(--ease-out)}
.preisliste__bild--wechsel .fenster-svg+.fenster-svg{position:absolute;inset:0;opacity:0}
@media (hover:hover){
  .preisliste__zeile:hover .preisliste__bild--wechsel .fenster-svg{opacity:0}
  .preisliste__zeile:hover .preisliste__bild--wechsel .fenster-svg+.fenster-svg{opacity:1}
}
.preisliste__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.preisliste__name{font:700 1.1875rem/1.2 var(--font-display);letter-spacing:-.015em}
.preisliste__kurz{font-size:var(--fs-small);line-height:1.4;color:var(--muted);text-wrap:pretty}
.preisliste__preis{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.preisliste__preis>.price{font-size:1.5rem;line-height:1}
.preisliste__zusatz{font-size:.8125rem;color:var(--muted);white-space:nowrap}
.preisliste__zusatz .price{font-size:.9375rem;color:var(--fg)}
/* schmal: Preis unter den Text, in eine Zeile */
.preisliste__zeile--bild .preisliste__preis{grid-column:2;flex-direction:row;align-items:baseline;gap:14px;text-align:left}
.preisliste__gruppe{padding:12px 16px;background:var(--bg)}
@media (min-width:600px){
  .preisliste__zeile--bild{grid-template-columns:64px minmax(0,1fr) auto;column-gap:22px;padding:16px 24px 16px 20px}
  .preisliste__bild{width:64px}
  .preisliste__zeile--bild .preisliste__preis{grid-column:auto;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
  .preisliste__gruppe{padding:12px 20px}
}

/* Hinweise unter der Liste */
.hinweise{margin:clamp(28px,3vw,40px) 0 0}
.hinweise__zeile{display:grid;gap:6px 28px;padding:16px 0;border-top:1px solid var(--line)}
.hinweise__zeile:last-child{border-bottom:1px solid var(--line)}
.hinweise dt{padding-top:.35em}
.hinweise dd{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
@media (min-width:600px){.hinweise__zeile{grid-template-columns:150px minmax(0,1fr)}}

/* Kassenzettel: weißes Papier mit blauem Balken oben und gezackter Abrisskante unten.
   .zettel ist nur der Rahmen für die Einblendung (unten Platz für die Zacken, damit sie
   mit freigewischt werden). Das Papier besteht aus zwei Teilen: oben Kopf und Zeilen,
   unten die Summe. So kann der untere Teil beim Wechsel des Beispiels gleiten (privat.js). */
.zettel{--zp:clamp(20px,2.4vw,26px);padding-bottom:10px}
.zettel__oben,.zettel__fuss{position:relative;background:var(--surface);border-inline:1px solid var(--line);padding-inline:var(--zp)}
.zettel__oben::before{content:"";display:block;height:var(--bar-h);margin-inline:calc(-1*var(--zp) - 1px);background:var(--accent)}
/* Papier, das beim Kürzerwerden kurz unter den Zeilen stehen bleibt (--luecke setzt privat.js) */
.zettel__oben::after{content:"";position:absolute;left:-1px;right:-1px;top:100%;height:var(--luecke,0px);background:var(--surface);border-inline:1px solid var(--line)}
.zettel__fuss{z-index:1;padding-bottom:24px}
/* Zacken als Kachel: weiße Fläche und Haarlinie wie Papier und Rand (Werte von --surface und --line im Thema t-soft) */
.zettel__fuss::after{content:"";position:absolute;left:-1px;right:-1px;top:100%;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0h20L10 9.5z' fill='%23fff'/%3E%3Cpath d='M0 0L10 9.5L20 0' fill='none' stroke='%23d9d9d9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left top/20px 10px round no-repeat}
.zettel__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px 18px}
.zettel__kopf .icon{color:var(--accent-text)}

/* Umschalter der Beispiele (Radio-Gruppe, von privat.js eingesetzt) */
.zettel__wahl{position:relative;isolation:isolate;display:flex;min-width:0;margin:0;padding:0;border:2px solid var(--fg);background:var(--surface)}
.zettel__wahl label{position:relative;flex:1 1 auto;min-width:0}
.zettel__wahl label+label{border-left:2px solid var(--fg)}
.zettel__wahl input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.zettel__wahl span{position:relative;z-index:1;display:grid;place-content:center;min-height:44px;padding:0 8px;font:700 .8125rem/1 var(--font-body);text-align:center;transition:background var(--dur-fast)}
.zettel__wahl input:hover:not(:checked)+span{background:var(--tint)}
.zettel__wahl input:checked+span{background:var(--fg);color:var(--surface)}
.zettel__wahl input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
/* Mit Bewegung gleitet die Auswahl wie ein Schiebefenster: eine weiße Fläche im Modus „difference“
   kehrt um, was unter ihr liegt (weiß wird schwarz, schwarze Schrift wird weiß). So bleibt die
   Schrift auch während der Fahrt lesbar. Setzt weißes Papier und schwarze Schrift voraus (t-soft). */
.zettel__schieber{position:absolute;inset:0;z-index:2;background:var(--surface);mix-blend-mode:difference;transform-origin:left center;pointer-events:none}
.zettel__wahl.hat-schieber input:checked+span{background:transparent;color:inherit}

.zettel__text{margin-top:16px;font-size:.875rem;line-height:1.45;color:var(--muted)}
.zettel__text strong{color:var(--fg)}
.zettel__zeilen{margin-top:14px;border-top:1px dashed var(--line)}
.zettel__zeilen li{display:grid;grid-template-columns:2.5em minmax(0,1fr) auto;align-items:baseline;column-gap:8px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.9375rem;line-height:1.35}
.zettel__menge{font-weight:700;font-variant-numeric:tabular-nums}
.zettel__name{font-weight:600}
.zettel__name small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted)}
.zettel__zeilen li:last-child{border-bottom:0}
.zettel__betrag{font-size:1.0625rem}
.zettel__summe{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:18px;border-top:2px solid var(--fg)}
.zettel__summe-wort{font:700 1.1875rem/1 var(--font-display);letter-spacing:-.015em}
.zettel__summe-zahl{font-size:clamp(2.5rem,2rem + 1.6vw,3.25rem);line-height:1}
.zettel__mwst{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:.8125rem;color:var(--muted)}
.zettel__hinweis{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.8125rem;line-height:1.45;color:var(--muted)}
.zettel__aktion{margin-top:14px}

/* ---------- 4 · Ablauf ---------- */
.ablauf{--spalte:clamp(24px,3.4vw,48px)}
.ablauf__kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-bottom:clamp(44px,5.5vw,80px)}
.ablauf__kopf .section-head{margin-bottom:0}
/* Bild liegt etwas größer in der Fläche, damit es beim Scrollen wandern kann (data-parallax) */
.ablauf__bild img{scale:1.12}
.schritte{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.schritt{display:flex;flex-direction:column;gap:22px}
/* schwarzer Balken statt blau: die Schritte sind Struktur, kein Akzent */
.schritt__balken{background:var(--fg)}
.schritt__text{display:flex;flex-direction:column;gap:12px}
.schritt__nr{color:var(--accent-text)}
.schritt__titel{font-size:var(--fs-h3)}
.schritt__text p{max-width:30em;color:var(--muted)}
@media (min-width:900px){
  /* ein Raster für Kopf und Schritte: Das Bild steht über Schritt 02 und 03 */
  .ablauf__kopf,.schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalte)}
  .ablauf__kopf{align-items:end}
  .ablauf__bild{grid-column:2/-1}
}

/* ---------- 5 · Einsatzgebiet ---------- */
/* auf der grauen Fläche steht die Karte als weiße Scheibe */
.einsatz .gebiet__karte{background:var(--surface)}

/* ---------- 6 · Fragen ---------- */
/* Reihenfolge im Dokument wie auf dem Bildschirm: Kopf, Fragen, Kontakt (der Kontakt gehört hinter die Fragen) */
.fragen__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.fragen__kopf .section-head{margin-bottom:0}
.fragen__kontakt{display:flex;flex-direction:column;gap:6px;margin-top:clamp(28px,3vw,40px)}
.fragen__kontakt ul{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,36px)}
.fragen__kontakt .arrow-link{min-height:44px;gap:10px}
.fragen__kontakt .arrow-link:hover .icon{transform:none}
@media (min-width:900px){
  .fragen__raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
  .fragen__kopf{position:sticky;top:calc(var(--header-h) + 32px)}
}
/* Antworten gleiten auf, wo der Browser das von sich aus kann; sonst klappen sie sofort */
@supports (interpolate-size:allow-keywords){
  .fragen .acc{interpolate-size:allow-keywords}
  .fragen .acc::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-slow) var(--ease-out),content-visibility var(--dur-slow) allow-discrete}
  .fragen .acc[open]::details-content{block-size:auto}
  .ruhe .fragen .acc::details-content{transition:none}
}

/* ---------- 7 · Abschluss ---------- */
.abschluss__kopf{display:flex;flex-direction:column;gap:var(--space-5)}
.abschluss__start{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:clamp(28px,4vw,56px)}
.abschluss__start .lead{max-width:26em;color:var(--muted);text-wrap:balance}
.plz-start__zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.plz-start .input{min-height:58px;font-size:1.25rem;font-weight:600;letter-spacing:.04em}
.plz-start .input::placeholder{font-weight:400;letter-spacing:0}
.plz-start .field__label{font-size:.9375rem}
.plz-start .field__hint{color:var(--muted)}
@media (min-width:480px){.plz-start__zeile{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:900px){
  .abschluss__start{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
}