/* ============================================================
   MARVIN.WEB Fassung A "Die Fuge"
   Liegt ueber basis.css und ueberschreibt nur, was diese Fassung anders macht.

   Herkunft: das Zeichen, M ueber gespiegeltem M, getrennt von einer Fuge.
   Raster: jeder Block hat zwei Stockwerke. Oben die Zusage, dann die Linie
   (das Massband), darunter der Beleg. Grammatik: stehende Buehne.

   Kontrast: NUR die gerechneten Paare aus dem Kopf von basis.css.
     Kreide-Grund: Teer 16,30 | Signal-Text #b53507 5,36 | Muted 4,98 | Signal #e8440a nur Grafik und Schrift ab 24px
     Teer-Grund:   Kreide 16,30 | Papier 14,37 | Signal 4,60 | Muted-dunkel 6,02
     Knopf:        Kreide auf #b53507 5,36 | Teer auf Signal 4,60
   Kreide-2 und Teer-2 sind Flaechen fuer Grafik, nie Grund unter Schrift.

   Anfangszustaende fuer Bewegung setzt site.js. Was hier unter .js-motion steht,
   ist nur das Buehnen-Layout (gestapelte Paare); ohne JS und in der Ruhefassung
   bleibt die Buehne eine Liste.
   ============================================================ */

:root{
  --kopf:7.2rem;
  --s1:.8rem; --s2:1.2rem; --s3:1.6rem; --s4:2.4rem; --s5:3.2rem; --s6:4.8rem; --s7:6.4rem; --s8:9.6rem; --s9:12.8rem;
  --abschnitt:clamp(9.6rem, 11vw, 16rem);
  --linie:.3rem;          /* Staerke der Messlinie (3px am Anker, waechst mit der Wurzel) */
  --raste:cubic-bezier(.35,0,.15,1); /* CSS-Naeherung der Hauskurve "raste" fuer kleine Uebergaenge */
}
@media (max-width:899px){ :root{ --kopf:6rem } }

html{scroll-padding-top:calc(var(--kopf) + 1.6rem)}
.defs{position:absolute;width:0;height:0;overflow:hidden}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);container-type:inline-size}

/* Schrift-Bausteine */
.strich{color:var(--signal-text)}
.eyebrow{margin-bottom:var(--s4)}
.lede{font-size:clamp(1.8rem,1.6vw,2.1rem);line-height:1.5;max-width:58ch;margin-top:var(--s5)}
.klein{font-size:1.4rem;line-height:1.55;color:var(--muted);max-width:76ch}
.mono-satz{font-family:var(--mono);font-weight:500;font-size:1.5rem;line-height:1.5}

/* Ueberschrift passt sich an: das breiteste Wort fuellt hoechstens die Spalte.
   --w = gemessene Breite des breitesten Worts in em (_pruef/fit-messen.mjs) plus 4 % Luft. */
.fit{font-size:min(var(--max,7.2rem), calc(100cqi / var(--w,8)))}
[data-split]{text-wrap:wrap}
.h2{--max:7.2rem;max-width:22ch}
.h2--gross{--max:16rem}
@media (max-width:599px){ .h2{--max:5.6rem} }

/* Gemessene Breiten je Ueberschrift */
.hero__h1{--w:7.72;--max:9.6rem}
@media (min-width:1000px){ .hero__h1{--w:10.05;--max:min(14rem, 15.5svh)} }
#paar-termine .fit{--w:7.8}
#paar-preis .fit{--w:7.96}
#paar-tempo .fit{--w:6.45}
#paar-texte .fit{--w:7.78}
#paar-klartext .fit{--w:12.63}
#problem-h{--w:8.89}
#beleg-h{--w:8.15}
#check-h{--w:4.74}
#pakete-h{--w:9.9}
#ablauf-h{--w:6.94}
#sicher-h{--w:4.77}
#kontakt-h{--w:8.48;--max:5.6rem}
#faq-h{--w:5.43;--max:5.6rem}

/* ---------- Knoepfe und Links ---------- */
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--s3)}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:4.8rem;padding:1.2rem 2.2rem;
  font-family:var(--body);font-weight:700;font-size:1.6rem;line-height:1.15;text-decoration:none;text-align:center;
  color:var(--teer);background:var(--kreide);border:2px solid var(--teer);box-shadow:.4rem .4rem 0 var(--teer);
  cursor:pointer;transition:transform .14s var(--raste),box-shadow .14s var(--raste)}
.knopf:hover{transform:translate(.2rem,.2rem);box-shadow:.2rem .2rem 0 var(--teer)}
.knopf:active,.knopf:disabled{transform:translate(.4rem,.4rem);box-shadow:0 0 0 var(--teer)}
.knopf:disabled{cursor:progress}
.knopf--primaer{background:var(--signal-text);color:var(--kreide)}
.knopf--klein{min-height:4rem;padding:.8rem 1.6rem;font-size:1.5rem}
.pfeillink{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.32em;text-decoration-color:var(--signal);transition:color .15s}
.pfeillink::after{content:" \2192"}
.pfeillink:hover{color:var(--signal-text)}

/* ---------- Das Massband (Signature) ---------- */
.band{display:block;width:100%;overflow:visible}
.band__linie{stroke:var(--signal);stroke-width:var(--linie)}
.band__spur{stroke:var(--kreide-2);stroke-width:var(--linie)}

.defs .teilstrich{fill:var(--signal)}
.blitz{position:absolute;left:0;right:0;top:-.5rem;height:1.3rem;background:var(--signal);transform:scaleY(0);pointer-events:none}
/* Die kurze Linie der Stockwerke: Signal, darunter Teilstriche (harte Kanten, kein Verlauf im Sinn von Weichheit) */
.kurzlinie{display:block;position:relative;width:8rem;height:var(--linie);background:var(--signal)}
.kurzlinie::after{content:"";position:absolute;left:0;right:0;top:var(--linie);height:.6rem;
  background:repeating-linear-gradient(90deg,var(--signal) 0 1.5px,transparent 1.5px 1.2rem)}
.kurzlinie--lang{width:100%}
.spur{display:block}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto;height:var(--kopf);z-index:60;background:var(--kreide)}
.kopf__innen{max-width:var(--wrap);height:100%;margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:var(--s5)}
.kopf__marke{display:block;flex:none;height:3.6rem;color:var(--teer)}
.kopf__marke .wm{height:100%;width:auto}
.wm-blitz{fill:var(--signal)}
.kopf__nav{margin-left:auto}
.kopf__nav ul{display:flex;gap:var(--s4)}
.kopf__nav a{position:relative;display:block;padding:1rem 0;font-weight:600;font-size:1.5rem;text-decoration:none}
.kopf__nav a::after,.fuss__raster a::after{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;transition:transform .22s var(--raste)}
.kopf__nav a:hover::after,.kopf__nav a:focus-visible::after{transform:scaleX(1)}
.kopf__burger{display:none;margin-left:auto;align-items:center;gap:1rem;min-height:4.4rem;padding:0 .4rem;background:none;border:0;font-family:var(--mono);font-weight:500;font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.burger__zeichen{position:relative;display:block;width:2.6rem;height:1.6rem}
.burger__o,.burger__u{position:absolute;left:0;right:0;height:var(--linie);background:var(--teer);transition:transform .3s var(--raste),background-color .3s}
.burger__o{top:0}.burger__u{bottom:0}
/* offen: beide Haelften kommen von aussen an die Fuge und werden eine Linie */
.kopf__burger[aria-expanded="true"] .burger__o{transform:translateY(.65rem);background:var(--signal)}
.kopf__burger[aria-expanded="true"] .burger__u{transform:translateY(-.65rem);background:var(--signal)}
@media (max-width:1099px){
  .kopf__nav{display:none}
  .kopf__burger{display:inline-flex}
  .kopf__check{margin-left:auto}
  .kopf__check + .kopf__burger{margin-left:0}
}
@media (max-width:479px){ .kopf__check{display:none} .kopf__burger,.kopf__check + .kopf__burger{margin-left:auto} }
/* Ohne JS gibt es kein Menue: dann bleibt wenigstens der Website-Check im Kopf */
@media (max-width:479px){ .kopf__check:has(+ .kopf__burger[hidden]){display:inline-flex;margin-left:auto} }

/* ---------- Menue (Handy) ---------- */
.menue{position:fixed;inset:var(--kopf) 0 0 0;z-index:55;display:grid;grid-template-rows:minmax(0,1fr) auto auto;overflow:auto;overscroll-behavior:contain}
.menue__oben{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s4);padding:var(--s5) var(--gutter) var(--s4);background:var(--kreide)}
.menue__liste a{display:block;padding:.3rem 0;font-family:var(--disp);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(3rem,9vw,5.6rem);line-height:1;text-decoration:none}
.menue__liste a:hover,.menue__liste a:focus-visible{color:var(--signal-text)}
.menue__maske{display:block;overflow:clip;padding-block:.2rem}
.menue__check{align-self:flex-start}
.menue__fuge{height:var(--linie);background:var(--signal)}
.menue__unten{padding:var(--s4) var(--gutter) var(--s6);background:var(--kreide);display:grid;gap:var(--s3);justify-items:start}
.menue__beleg{font-size:1.8rem;font-weight:600;max-width:32ch}
.menue__zeit{color:var(--teer)}
.menue__zeit a{text-decoration:underline;text-underline-offset:.25em}

/* ---------- 1 Hero ---------- */
main{padding-top:var(--kopf)}
.hero{position:relative;min-height:calc(100svh - var(--kopf));display:grid;grid-template-rows:1fr auto auto;overflow:clip}
.hero__oben{display:flex;flex-direction:column;justify-content:flex-end;width:100%;padding-top:var(--s6);padding-bottom:var(--s4)}
.hero__ort{margin-bottom:var(--s4)}
.hero__h1{line-height:.9}
.hero__h1 .zeile-mask{padding-bottom:.06em;margin-bottom:-.06em}
.hero__fuge{position:relative;height:2rem}
.hero__unten{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);width:100%;padding-top:var(--s4);padding-bottom:var(--s7)}
.hero__unterzeile{font-family:var(--mono);font-weight:500;font-size:clamp(1.6rem,1.5vw,2rem);text-transform:uppercase;letter-spacing:.03em;line-height:1.35}
.hero__text{font-size:clamp(1.7rem,1.4vw,1.9rem);max-width:46ch;margin-top:var(--s3)}
.hero__beleg .knoepfe{margin-top:var(--s5)}
.hero__belegzeile{display:flex;flex-wrap:wrap;gap:.4rem 0;margin-top:var(--s4);color:var(--teer)}
.hero__belegzeile li+li::before{content:"·";padding-inline:.8rem;color:var(--signal-text)}
@media (min-width:900px){
  .hero__unten{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
}

/* Der Auftragszettel: Beleg-Karte, haengt unter der Linie */
.zettel{width:100%;max-width:44rem;background:var(--kreide);border:2px solid var(--teer);box-shadow:.8rem .8rem 0 var(--teer);padding:var(--s3) var(--s4) var(--s4)}
@media (min-width:900px){ .zettel{justify-self:end;margin-top:calc(-1 * var(--s4) + .4rem)} }
.zettel__kopf{display:flex;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s2);border-bottom:2px solid var(--teer)}
.zettel__liste{margin:var(--s2) 0 var(--s3)}
.zettel__liste div{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0}
.zettel__liste dt{display:flex;flex:1;gap:.8rem;align-items:baseline;font-family:var(--mono);font-weight:500;font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.zettel__liste dt::after{content:"";flex:1;border-bottom:2px dotted var(--muted);transform:translateY(-.3rem)}
.zettel__liste dd{margin:0;font-weight:700;font-size:1.6rem;text-align:right}
.zettel__fuss{padding-top:var(--s2);border-top:2px solid var(--teer);font-family:var(--disp);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:1.7rem;line-height:1.1}

/* ---------- 2 Die Buehne ---------- */
/* Ohne JS / Ruhefassung: eine Liste aus fuenf zweistoeckigen Paaren */
.buehne{padding:var(--abschnitt) var(--gutter);max-width:var(--wrap);margin-inline:auto}
.buehne__titel{margin-bottom:var(--s6)}
.buehne__achse,.buehne__fuge{display:none}
.paare{display:grid;gap:var(--s8)}
.paar__oben{container-type:inline-size;padding-bottom:var(--s3);border-bottom:var(--linie) solid var(--signal)}
.paar__zusage{--max:min(12rem, 13svh);line-height:.9}
@media (max-width:599px){ .paar__zusage{--max:min(6.4rem, 6.6svh)} }
.paar__unten{container-type:inline-size;padding-top:var(--s4);display:grid;gap:var(--s3)}
.paar__zahl{display:flex;flex-direction:column;gap:1.4rem}
.paar__zahl .zahl{padding-bottom:.1em;--zmax:min(11rem, 11svh);--zbreite:100cqi;font-size:min(var(--zmax), calc(var(--zbreite) / var(--zw, 5)));line-height:.86;color:var(--signal)}
#paar-termine .zahl{--zw:1}#paar-preis .zahl{--zw:3.55}#paar-tempo .zahl{--zw:3.17}#paar-texte .zahl{--zw:4.95}#paar-klartext .zahl{--zw:1}
.paar__zahl .einheit{color:var(--teer)}
.paar__beleg{max-width:46rem;display:grid;gap:var(--s2)}
.paar__beleg p:first-child{font-size:clamp(1.6rem,1.4vw,1.9rem);line-height:1.5}
.quelle{color:var(--muted)}
.quelle .strich{color:var(--signal-text)}
@media (min-width:900px){
  .paar__unten{grid-template-columns:auto minmax(28rem,46rem);justify-content:space-between;align-items:start;gap:var(--s6)}
  .paar__zahl .zahl{--zmax:min(21rem, 23svh);--zbreite:56cqi}
}

/* Mit Bewegung: die stehende Buehne, ein Bildschirm hoch, die Paare liegen uebereinander */
.js-motion .buehne{--fuge:calc(var(--kopf) + (100svh - var(--kopf)) * .53);--bandzone:5.2rem;--titelzone:6.4rem;
  position:relative;height:100svh;max-width:none;padding:0;overflow:clip;background:var(--kreide)}
.js-motion .buehne__titel{position:absolute;z-index:2;top:calc(var(--kopf) + var(--s4));left:var(--gutter);margin:0}
@media (max-width:899px){ .js-motion .buehne{--fuge:calc(var(--kopf) + (100svh - var(--kopf)) * .44)} }
.js-motion .paare{display:block}
.js-motion .paar__oben{position:absolute;left:0;right:0;top:calc(var(--kopf) + var(--titelzone));height:calc(var(--fuge) - var(--kopf) - var(--titelzone));overflow:clip;
  display:flex;align-items:flex-end;padding:0 var(--gutter) var(--s4);border:0}
.js-motion .paar__unten{position:absolute;left:0;right:0;top:calc(var(--fuge) + var(--bandzone));bottom:0;overflow:clip;
  padding:var(--s3) var(--gutter) 0;align-content:start}
.js-motion .buehne__fuge{display:block;position:absolute;left:0;right:0;top:var(--fuge);height:var(--bandzone)}
.buehne__marken{position:absolute;left:0;right:0;top:0;height:100%}
.marke{position:absolute;top:0;left:calc(var(--i) * 20% + 10%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;
  min-height:4.4rem;padding:1.8rem .6rem 0;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.marke::before{content:"";position:absolute;top:0;left:50%;width:2px;height:1.5rem;margin-left:-1px;background:var(--teer);transform-origin:50% 0;transition:transform .25s var(--raste),background-color .25s}
.marke:nth-child(1){--i:0}.marke:nth-child(2){--i:1}.marke:nth-child(3){--i:2}.marke:nth-child(4){--i:3}.marke:nth-child(5){--i:4}
.marke.ist-aktiv{color:var(--teer)}
.marke.ist-aktiv::before{background:var(--signal);transform:scaleY(1.5);width:3px}
.marke:hover{color:var(--teer)}
@media (min-width:900px){
  .js-motion .buehne__achse{display:block;position:absolute;right:var(--gutter);z-index:2;color:var(--muted)}
  .js-motion .buehne__achse--o{top:calc(var(--fuge) - 2.6rem)}
  .js-motion .buehne__achse--u{top:calc(var(--fuge) + var(--bandzone) + var(--s3))}
  .js-motion .paar__unten{padding-right:calc(var(--gutter) + 9rem)}
}

/* ---------- Abschnitte allgemein ---------- */
.abschnitt{padding-block:var(--abschnitt)}

/* ---------- 3 Problem ---------- */
.probleme{display:grid;gap:var(--s7);margin-top:var(--s8)}
.problem__eintrag{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
.problem__oben{padding-bottom:var(--s3)}
.problem__oben h3{font-size:clamp(2.1rem,1.9vw,2.6rem);font-weight:800;line-height:1.15;letter-spacing:-.01em}
.problem__oben p{margin-top:var(--s2);color:var(--muted);font-size:1.6rem}
.problem__unten{overflow:clip;padding-top:var(--s3)}
.problem__unten p{font-size:1.7rem;font-weight:500}
.antwort__label{color:var(--signal-text);margin-bottom:.6rem}
@media (min-width:900px){
  .probleme{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:var(--s5);row-gap:0}
  .problem__eintrag{grid-row:span 3;grid-template-rows:subgrid}
  .problem__oben{align-self:end}
}
@media (min-width:600px) and (max-width:899px){
  .probleme{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
}

/* ---------- 4 Beleg und 5 Check: das Protokoll ---------- */
.protokoll{margin-top:var(--s7);container-type:inline-size}
.protokoll__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem var(--s4);padding-bottom:var(--s4);color:var(--muted)}
.protokoll__kopf b{font-weight:500;color:var(--teer)}
.protokoll__oben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);padding-bottom:var(--s4)}
@media (min-width:700px){ .protokoll__oben{grid-template-columns:repeat(4,minmax(0,1fr))} }
.messwert{display:grid;gap:.8rem;align-content:start}
.messwert__maske{display:block;overflow:clip;padding-top:.06em}
.messwert .n{display:block;font-size:clamp(5.2rem,8cqi,11rem);line-height:.86}
.messwert__balken{position:relative;display:block;height:var(--linie);background:var(--kreide-2)}
.messwert__balken::after{content:"";position:absolute;inset:0;background:var(--teer);transform:scaleX(calc(var(--wert,0) / 100));transform-origin:0 50%}
.messwert .l{color:var(--teer)}
.messwert .vgl{color:var(--muted)}
.protokoll__fuge{position:relative;padding-bottom:4.4rem}
.skala{position:absolute;left:0;right:0;top:1.6rem;height:2.6rem}
.skala li{position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);font-family:var(--mono);font-weight:500;font-size:1.2rem;text-transform:none;letter-spacing:.04em;color:var(--muted);white-space:nowrap;padding-top:.4rem;text-align:center}
.skala li::before{content:"";position:absolute;top:-1.6rem;left:50%;width:2px;height:1.4rem;margin-left:-1px;background:var(--teer)}
.skala li:first-child{transform:none}.skala li:first-child::before{left:1px}
.skala .skala__ende{transform:translateX(-100%)}.skala .skala__ende::before{left:auto;right:0}
.skala b{font-weight:500}
@media (max-width:599px){ .skala b{display:block} .skala li{line-height:1.25} }
.protokoll__unten{display:grid;gap:var(--s3);padding-top:var(--s2)}
.ladezeit{display:grid;gap:.6rem;align-content:start}
.ladezeit .lz{display:block;font-size:clamp(6.4rem,14cqi,16rem);line-height:.86;color:var(--signal)}
.messwert__maske--unten{padding-top:0;padding-bottom:.04em}
.protokoll__text{display:grid;gap:var(--s2);max-width:52rem;font-size:clamp(1.6rem,1.4vw,1.9rem)}
.agentisch{color:var(--teer)}
@media (min-width:900px){
  .protokoll__unten{grid-template-columns:auto minmax(0,52rem);justify-content:space-between;align-items:start;gap:var(--s6)}
}
.beleg__fuss{display:grid;gap:var(--s3);margin-top:var(--s6);justify-items:start}

/* 5 Check auf Teer */
.check{background:var(--teer);color:var(--kreide)}
.check .strich{color:var(--signal)}
.check .lede{color:var(--papier)}
.check .protokoll__kopf{color:var(--muted-d)}
.check .protokoll__kopf b,.check .messwert .l{color:var(--kreide)}
.check .messwert .vgl{color:var(--muted-d)}
.check .messwert__balken{background:var(--teer-2)}
.check .messwert__balken::after{background:var(--papier)}
.check .messwert[data-stufe="warn"] .messwert__balken::after,.check .messwert[data-stufe="kritisch"] .messwert__balken::after{background:var(--signal)}
.check .messwert[data-stufe="kritisch"] .n{color:var(--signal)}
.check .messwert:not([data-stufe]) .n,.check #check-lz-wert{color:var(--muted-d)}
.check:has(#check-form[data-zustand="fertig"]) #check-lz-wert{color:var(--signal)}
/* Waehrend der Messung steht im Ladezeit-Feld das Wort "misst": als Statuszeile, nicht als Riesenwort */
.check:has(#check-form[data-zustand="misst"]) #check-lz-wert{font-family:var(--mono);font-weight:500;font-stretch:100%;font-size:2rem;letter-spacing:.06em;line-height:1.4;color:var(--papier);text-transform:uppercase}
/* Einheiten bleiben klein geschrieben und kleiner als die Zahl: "1,8 s", nicht "1,8 S".
   check.js schreibt "6,4 s" als Text; site.js setzt die Einheit nach mw:check-ergebnis in ein eigenes Span. */
#check-lz-wert{text-transform:none}
.einheit-klein{font-stretch:100%;font-weight:800;font-size:.42em;letter-spacing:0;text-transform:none}
.check .band__spur{stroke:var(--teer-2)}
.check .skala li{color:var(--muted-d)}
.check .skala li::before{background:var(--papier)}
.check .protokoll__text{color:var(--papier)}
.protokoll__fusszeile{margin-top:var(--s3);color:var(--muted-d)}
.check__unten{display:grid;gap:var(--s7);margin-top:var(--s7)}
@media (min-width:900px){ .check__unten{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8)} }
.feld__label{display:block;margin-bottom:.8rem}
.check__zeile{display:flex;flex-wrap:wrap;gap:var(--s2)}
.check__zeile input{flex:1 1 24rem;min-width:0}
input,textarea{width:100%;min-height:4.8rem;padding:1.2rem 1.4rem;font-size:1.7rem;background:var(--kreide);color:var(--teer);border:2px solid var(--teer);border-radius:0}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.check input{border-color:var(--papier)}
.check .knopf{border-color:var(--papier);box-shadow:.4rem .4rem 0 var(--papier)}
.check .knopf:hover{box-shadow:.2rem .2rem 0 var(--papier)}
.check .knopf:active,.check .knopf:disabled{box-shadow:0 0 0 var(--papier)}
.knopf--hell{background:var(--teer);color:var(--papier)}
.check__status{margin-top:var(--s3);font-size:1.5rem;color:var(--papier);max-width:56ch}
.check__status a{color:var(--kreide)}
.check__hand h3{font-size:clamp(2.1rem,1.9vw,2.6rem);font-weight:800;line-height:1.15}
.check__hand p{margin-top:var(--s2);color:var(--papier)}
.check__hand .knoepfe{margin-top:var(--s4)}

/* ---------- 6 Pakete ---------- */
.paketliste{display:grid;gap:var(--s6);margin-top:var(--s7)}
.paket{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;background:var(--kreide);border:2px solid var(--teer);box-shadow:.8rem .8rem 0 var(--teer)}
.paket::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--raste)}
.paket:hover::after,.paket:focus-within::after{transform:scaleX(1)}
.paket__oben{container-type:inline-size;padding:var(--s4) var(--s4) var(--s3);border-bottom:var(--linie) solid var(--teer)}
.paket__name{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:1.3rem}
.paket__marke{background:var(--signal);color:var(--teer);padding:.3rem .8rem;font-size:1.2rem}
.paket__preis{margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;overflow:clip;padding-top:.06em}
.paket__preis .disp{font-size:min(6.4rem, calc(100cqi / 4.8));line-height:.9}
.paket__preis--anfrage .disp{font-size:min(4.4rem, calc(100cqi / 9.7))}
.paket__preis .mono{color:var(--muted)}
.paket__zweck{margin-top:var(--s2);font-weight:600}
.paket__unten{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4);overflow:clip}
.haken li{position:relative;padding:.5rem 0 .5rem 2.8rem;font-size:1.6rem}
.haken li::before{content:"";position:absolute;left:.3rem;top:1.05rem;width:1.3rem;height:.7rem;border-left:3px solid var(--signal-text);border-bottom:3px solid var(--signal-text);transform:rotate(-45deg)}
.paket .pfeillink{align-self:flex-start}
@media (min-width:900px){
  .paketliste{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:0 var(--s5)}
  .paket{grid-row:span 2;grid-template-rows:subgrid}
}
.pakete__fuss{display:grid;gap:var(--s2);margin-top:var(--s7)}
.bogen{display:grid;gap:var(--s5);margin-top:var(--s8);padding-top:var(--s5);border-top:var(--linie) solid var(--teer)}
.bogen__text h3{font-size:clamp(2.4rem,2.4vw,3.2rem);font-weight:800;line-height:1.1}
.bogen__text p{margin:var(--s2) 0 var(--s3);max-width:44ch}
.bogen__zahl{display:grid;gap:.4rem;align-content:start}
.bogen__zahl .disp{font-size:clamp(6.4rem,9vw,12rem);line-height:.86}
@media (min-width:900px){ .bogen{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr)} }
@media (min-width:600px) and (max-width:899px){ .bogen{grid-template-columns:1fr 1fr} .bogen__text{grid-column:1 / -1} }

/* ---------- 7a Ablauf ---------- */
.schritte{display:grid;gap:var(--s6);margin-top:var(--s7)}
.schritt{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
.schritt__oben{overflow:clip;padding-bottom:var(--s3)}
.schritt__nr{display:block;font-size:clamp(5.6rem,7cqi,10rem);line-height:.85;color:var(--teer)}
.schritt__kopf h3{margin-top:var(--s2);font-size:clamp(2rem,1.7vw,2.4rem);font-weight:800;line-height:1.15}
.schritt__unten{overflow:clip;padding-top:var(--s3)}
.schritt__unten p{max-width:34ch}
.ablauf__link{margin-top:var(--s7);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
@media (min-width:900px){
  .schritte{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0}
  .schritt{grid-row:1 / span 3;grid-template-rows:subgrid}
  .schritt__oben,.schritt__unten{padding-right:var(--s5)}
  .schritt__oben{align-self:end}
  /* Die vier kurzen Linien stossen aneinander und werden ein Band */
  /* Die Spur steht schon da, bevor gefuellt wird (Fragment zuerst): blasse Linie, Teilstrich am Anfang */
  .schritt .spur{display:block;position:relative;height:1.8rem;background:linear-gradient(var(--kreide-2),var(--kreide-2)) 0 0 / 100% var(--linie) no-repeat}
  .schritt .spur::before{content:"";position:absolute;left:0;top:0;width:3px;height:1.8rem;background:var(--teer)}
  .schritt .kurzlinie{width:100%}
  .ablauf.ist-gepinnt{min-height:100svh;display:flex;align-items:flex-start;padding-top:calc(var(--kopf) + var(--s7));padding-bottom:var(--s5)}
  .ablauf.ist-gepinnt .ablauf__wrap{width:100%}
}

/* ---------- 7b Ueber mich ---------- */
.ich__wrap{display:grid;gap:var(--s7);align-items:center}
.ich__bild{position:relative;overflow:clip;aspect-ratio:2/3;max-width:52rem;background:var(--kreide-2)}
.ich__bild img{position:absolute;left:0;width:100%;top:-11%;height:122%;object-fit:cover;object-position:62% 40%}
.ich__text{container-type:inline-size;display:grid;gap:var(--s3);justify-items:start}
.ich__zitat p{font-size:min(4.8rem, calc(100cqi / 11.6));line-height:1}
.ich__zitat{margin-bottom:var(--s2)}
.ich__h{margin-top:var(--s2);font-size:clamp(2.4rem,2.2vw,3.2rem);font-weight:800;line-height:1.1}
.ich__text>p:not(.mono){max-width:52ch}
.ich__name{color:var(--muted)}
@media (min-width:900px){ .ich__wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8)} }

/* ---------- 7c Sicherheit ---------- */
.sicher{display:grid;gap:var(--s6);margin-top:var(--s7)}
.sicher__paar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
.sicher__oben{container-type:inline-size;padding-bottom:var(--s3);overflow:clip}
.sicher__oben h3{font-size:min(4rem, calc(100cqi / 13.5));line-height:.95}
.sicher__unten{padding-top:var(--s3);overflow:clip}
.sicher__unten p{max-width:36ch;font-size:1.7rem}
@media (min-width:900px){
  .sicher{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0}
  .sicher__paar{grid-row:span 3;grid-template-rows:subgrid}
  .sicher__oben{align-self:end}
  .sicher__oben,.sicher__unten{padding-right:var(--s5)}
  .sicher .kurzlinie{width:100%}
  .sicher .kurzlinie::before{content:"";position:absolute;left:0;top:0;width:3px;height:1.8rem;background:var(--teer)}
}

/* ---------- 7d Kontakt ---------- */
.kontakt__raster{display:grid;gap:var(--s7);margin-top:var(--s7)}
@media (min-width:900px){ .kontakt__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8)} }
.formular{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--s4)}
@media (min-width:600px){ .formular{grid-template-columns:repeat(2,minmax(0,1fr))} .feld--breit,.formular__oben,.formular .kurzlinie,.formular__unten{grid-column:1 / -1} }
textarea{min-height:12rem;resize:vertical;line-height:1.5}
.formular__oben{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s2)}
.formular__zusage{color:var(--teer)}
.formular .kurzlinie{margin-top:-.4rem}
.formular__unten{margin-top:-.4rem}
.formular__unten a{color:var(--teer)}
.direkt{display:grid;gap:var(--s3);align-content:start;justify-items:start}
.direkt h3{font-size:clamp(2.4rem,2.2vw,3.2rem);font-weight:800;line-height:1.1}
.direkt__knoepfe{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.direkt__zeit{color:var(--teer)}
.direkt__mail a{font-weight:700;text-underline-offset:.25em}
.erreichbar{color:var(--signal-text)}

/* ---------- 7e FAQ ---------- */
:root{interpolate-size:allow-keywords}
.fragen{margin-top:var(--s7);border-top:var(--linie) solid var(--teer)}
.frage{position:relative;border-bottom:2px solid var(--teer)}
.frage::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--raste)}
.frage:hover::after,.frage:has(summary:focus-visible)::after{transform:scaleX(1)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;cursor:pointer;list-style:none;font-weight:700;font-size:clamp(1.8rem,1.6vw,2.2rem);line-height:1.25}
.frage summary::-webkit-details-marker{display:none}
.frage__zeichen{position:relative;flex:none;width:2rem;height:2rem}
.fz-h{position:absolute;left:0;right:0;top:50%;height:var(--linie);margin-top:calc(var(--linie) / -2);background:var(--teer)}
.fz-o,.fz-u{position:absolute;left:50%;width:var(--linie);margin-left:calc(var(--linie) / -2);height:50%;background:var(--teer);transition:transform .28s var(--raste)}
.fz-o{top:0;transform-origin:50% 100%}
.fz-u{bottom:0;transform-origin:50% 0}
/* offen: die senkrechten Haelften fahren von aussen in die Linie und verschwinden dort */
.frage[open] .fz-o,.frage[open] .fz-u{transform:scaleY(0)}
.frage[open] .fz-h{background:var(--signal)}
.frage__antwort{padding:0 0 var(--s4);max-width:68ch}
.frage__antwort a{font-weight:700;text-underline-offset:.25em}
.frage::details-content{block-size:0;overflow:clip;transition:block-size .38s var(--raste),content-visibility .38s allow-discrete}
.frage[open]::details-content{block-size:auto}
.frage__antwort p{transform:translateY(1.6rem);transition:transform .38s var(--raste)}
.frage[open] .frage__antwort p{transform:none}

/* ---------- 8 Fuss ---------- */
.fuss{background:var(--teer);color:var(--papier);padding:var(--s9) 0 var(--s6)}
.fuss .wrap{display:grid;gap:var(--s7)}
.fuss__marke{position:relative;--H:min(24rem, calc((100cqi - var(--s4)) / 4.52))}
.fuss__reihe{position:relative;z-index:1;display:flex;align-items:center;gap:var(--s4);height:var(--H)}
.fuss__zeichen,.fuss__wm{height:100%;width:auto;color:var(--papier)}
.fuss__fuge{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;z-index:0}
.band--fuss{height:4px}
.fuss__raster{display:grid;gap:var(--s5)}
@media (min-width:700px){ .fuss__raster{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fuss__raster ul{display:grid;gap:.4rem}
.fuss__raster a{position:relative;display:inline-block;padding:.6rem 0;text-decoration:none;color:var(--kreide)}
.fuss__raster a:hover::after,.fuss__raster a:focus-visible::after{transform:scaleX(1)}
.fuss__adresse{font-style:normal;line-height:1.8;color:var(--papier)}
.fuss__adresse a{padding:0}
.fuss__copy{color:var(--muted-d)}
.fuss :focus-visible{outline-color:var(--signal)}

/* ---------- Fokus ---------- */
.marke:focus-visible{outline-offset:2px}
.check :focus-visible{outline-color:var(--signal)}

/* ---------- Ruhefassung: nichts steht im Weg ---------- */
@media (prefers-reduced-motion: reduce){
  .frage::details-content{transition:none}
  .frage__antwort p{transform:none}
}