/* Schriften liegen im eigenen Ordner, nichts wird von fremden Servern geladen (beide frei nutzbar, SIL Open Font License) */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("schriften/barlow-condensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("schriften/barlow-condensed-700.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("schriften/cormorant-garamond-500-kursiv.woff2") format("woff2")}
/* ==========================================================
   LOOK: Nachtblau. Zwei eigene Schriften aus assets/schriften, nichts aus dem Netz.
   ========================================================== */
:root{
  --nacht:#1C1A3F; --salz:#EDEDF0; --weiss:#FFFFFF;
  --heide:#B8306F; --heide-hell:#F6B8D5; --dunst:#A9A5CF; --grau:#5C5878;
  --e-aus:cubic-bezier(0.23,1,0.32,1);
  --e-weg:cubic-bezier(0.77,0,0.175,1);
  --e-farbe:cubic-bezier(0.25,0.1,0.25,1);
  --f-kopf:"Barlow Condensed","Avenir Next Condensed","Bahnschrift Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --f-text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rand:clamp(16px,5vw,80px);
  --farbdauer:600ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);font-family:var(--f-text);font-size:1.125rem;line-height:1.6;hyphens:auto;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Rahmen der ganzen Seite: trägt Hintergrund- und Schriftfarbe (weicher Wechsel) */
.rahmen{
  position:relative;overflow-x:clip;
  background-color:var(--nacht);color:var(--salz);
  --akzent:var(--heide-hell);--neben:var(--dunst);--linie:rgba(237,237,240,.28);--flaeche:rgba(237,237,240,.08);
  transition:background-color var(--farbdauer) var(--e-farbe),color var(--farbdauer) var(--e-farbe);
}
.rahmen.f-salz,
.rahmen:not(.hat-js) [data-lp-farbe="salz"]{
  --akzent:var(--heide);--neben:var(--grau);--linie:rgba(28,26,63,.28);--flaeche:rgba(28,26,63,.06);
}
.rahmen.f-salz{background-color:var(--salz);color:var(--nacht)}
.rahmen:not(.hat-js) [data-lp-farbe="salz"]{background-color:var(--salz);color:var(--nacht)}
.rahmen:not(.hat-js) [data-lp-farbe="nacht"]{background-color:var(--nacht);color:var(--salz)}

:focus-visible{outline:2px solid var(--akzent,#F6B8D5);outline-offset:4px}

/* ---------- Schrift ---------- */
h1,h2,h3{font-family:var(--f-kopf);font-weight:700;line-height:1.1;margin:0;text-wrap:balance;hyphens:manual}
.h2{font-size:clamp(2.25rem,5.2vw,3.75rem)}
h3{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.15}
p{margin:0 0 16px;max-width:64ch}
.gross{font-size:1.375rem;line-height:1.5}
.neben{color:var(--neben)}
.etikett{font-size:1rem;color:var(--neben);margin:0 0 16px}

/* ---------- Abschnitte ---------- */
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--rand)}
.sektion{position:relative;padding-block:clamp(96px,16vh,192px)}
.hat-js .sektion{background:transparent}

/* ---------- Knöpfe und Links ---------- */
.knopf{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;
  padding:16px 32px;border-radius:999px;background:var(--heide);color:var(--weiss);
  font:600 1.0625rem/1.2 var(--f-text);text-decoration:none;
  scale:1;transition:scale 160ms var(--e-aus),color 250ms var(--e-farbe);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.knopf::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--heide-hell);
  clip-path:inset(0 100% 0 0 round 999px);transition:clip-path 250ms var(--e-aus);
}
.knopf:focus-visible{color:var(--nacht)}
.knopf:focus-visible::before{clip-path:inset(0 round 999px)}
.knopf:active{scale:.97}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{color:var(--nacht)}
  .knopf:hover::before{clip-path:inset(0 round 999px)}
}
.textlink{
  position:relative;display:inline-block;color:var(--akzent);text-decoration:none;font-weight:600;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding-bottom:2px;
}
.textlink::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.4}
.textlink::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--e-aus);
}
.textlink:focus-visible::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .textlink:hover::after{transform:scaleX(1)} }
.textlink:active{scale:.97}

/* Namen von Personen: Text rollt weg, zweite Zeile kommt in der Akzentfarbe nach */
.name{position:relative;display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.name>span{display:inline-block;transition:transform 300ms var(--e-aus)}
.name::after{content:attr(data-text);position:absolute;left:0;top:100%;color:var(--akzent);transition:transform 300ms var(--e-aus)}
@media (hover:hover) and (pointer:fine){
  .name:hover>span,.name:hover::after{transform:translateY(-100%)}
  .name:hover::after{transform:translateY(-100%)}
}

/* Textmarker */
.marker{position:relative;isolation:isolate;white-space:nowrap}
.marker::before{
  content:"";position:absolute;left:-4px;right:-4px;bottom:.06em;height:.52em;z-index:-1;
  background:var(--akzent);opacity:.55;transform-origin:left;
  transition:transform 700ms var(--e-aus);
}
.hat-js:not(.ruhig) .marker::before{transform:scaleX(0)}
.hat-js:not(.ruhig) .marker.an::before{transform:scaleX(1);transition-delay:var(--d,0ms)}

/* Platzhalter für Bilder */
.platzhalter{
  display:grid;place-items:center;text-align:center;padding:24px;width:100%;height:100%;
  border:2px dashed currentColor;color:var(--neben);font-size:1rem;line-height:1.4;
  background:var(--flaeche);
}
.platzhalter b{display:block;color:inherit;font-weight:600}

/* ==========================================================
   1 EINSTIEG: Riesen-Überschrift
   ========================================================== */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(104px,15vh,160px) clamp(64px,10vh,120px)}
.hero-innen{width:100%}
.marke{position:absolute;left:var(--rand);top:32px;margin:0;font:700 1.375rem/1 var(--f-kopf);letter-spacing:.01em}
.hero-diagnose{font-size:1.25rem;margin:0 0 24px;color:var(--neben)}
.wechsel{display:inline-grid;overflow:clip;vertical-align:bottom;color:var(--salz);font-weight:600}
.wechsel>span{grid-area:1/1;transform:translateY(100%);opacity:0;transition:transform 500ms var(--e-weg),opacity 500ms var(--e-weg)}
.wechsel>span.an{transform:none;opacity:1}
.wechsel>span.weg{transform:translateY(-100%);opacity:0}
.h1{font-size:clamp(2.5rem,8vw,7.5rem);line-height:1.04;max-width:none;margin-bottom:32px}
.h1 .z1,.h1 .z2{display:block}
.h1 .z2{font-size:clamp(1.75rem,4vw,3.25rem);line-height:1.1;margin-top:.2em;max-width:16em}
.schluessel{position:relative;display:inline-block}
.welle{position:absolute;left:0;bottom:-.1em;width:100%;height:.2em;overflow:visible}
.welle path{fill:none;stroke:var(--akzent);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--e-aus)}
.hat-js:not(.ruhig) .welle path{stroke-dashoffset:1}
.hat-js:not(.ruhig) .welle.gezeichnet path{stroke-dashoffset:0}
.w{display:inline-block;overflow:clip;vertical-align:top}
.w.mit-linie{padding-bottom:.26em;margin-bottom:-.26em}
.wi{display:inline-block;transform-origin:0 100%;transition:transform 1100ms var(--e-aus)}
.hat-js:not(.ruhig) .h1 .wi{transform:translateY(108%) rotate(7deg)}
.hat-js:not(.ruhig).los .h1 .wi{transform:none}
.hero-text{font-size:1.375rem;line-height:1.55;max-width:34em}
.hero-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin-top:32px}
.hero-aktionen p{margin:0}
.hat-js:not(.ruhig) .hero-nach{opacity:0;transform:translateY(18px);transition:opacity 400ms var(--e-aus),transform 400ms var(--e-aus)}
.hat-js:not(.ruhig).los .hero-nach{opacity:1;transform:none}

/* Deko in der Tiefe (Position nur per top/right, transform setzt das Skript) */
.deko{position:absolute;inset:0;pointer-events:none}
.deko>*{position:absolute;will-change:transform}
.d-ring{right:-72px;top:12vh;width:240px;height:240px;border:2px solid var(--akzent);border-radius:50%}
.d-punkt{right:34vw;bottom:14vh;width:24px;height:24px;border-radius:50%;background:var(--akzent)}
.d-zettel{background:var(--weiss);color:var(--nacht);padding:16px 24px;font:700 1.75rem/1.1 var(--f-kopf);box-shadow:0 1px 0 rgba(0,0,0,.2),0 16px 24px -16px rgba(0,0,0,.6);border-radius:4px}
.d-z1{right:12vw;top:24vh}
.d-z2{right:6vw;bottom:24vh}
.d-z3{right:22vw;bottom:6vh;max-width:15em;display:flex;flex-direction:column;gap:4px}
.d-z3 span{font:400 1rem/1.4 var(--f-text)}
@media (max-width:899px){
  .d-z1,.d-z3{display:none}
  .d-ring{width:160px;height:160px;top:72px;right:-56px}
  .d-z2{right:16px;bottom:16px;font-size:1.25rem;padding:8px 16px}
  .d-punkt{right:25vw;bottom:10vh}
}

/* ==========================================================
   2 PROBLEM UND LÖSUNG: Haufen wird sortiert
   ========================================================== */
.satz{font-family:var(--f-kopf);font-weight:700;font-size:clamp(2.25rem,11vw,12.5rem);line-height:1.05;max-width:none;margin:0 0 clamp(64px,10vh,128px);hyphens:manual}
.sw{position:relative;display:inline-block}
.hat-js:not(.ruhig) .sw-u{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px currentColor}
.sw-f{position:absolute;left:0;top:0;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.sw-f.key{color:var(--akzent)}
.weg-intro{max-width:64ch}
.weg-intro .h2{font-size:clamp(2rem,4.2vw,3.25rem);margin-bottom:24px}
.fakten{display:grid;grid-template-columns:repeat(3,1fr);margin:56px 0 0;padding:0;max-width:960px}
.fakten>div{padding:0 24px;border-left:1px solid var(--linie)}
.fakten>div:first-child{padding-left:0;border-left:0}
.fakten dt{font:700 clamp(2.5rem,5vw,3.5rem)/1 var(--f-kopf)}
.fakten dt small{font-size:.5em;color:var(--neben)}
.fakten dd{margin:8px 0 0;color:var(--neben);font-size:1rem;line-height:1.5}

.buehne-wrap{margin-top:clamp(64px,12vh,144px)}
.buehne-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:32px}
.buehne-kopf h3{font-size:clamp(1.75rem,3vw,2.25rem)}
.zaehler{color:var(--neben);font-size:1.0625rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.spalte-kopf{display:block;font-size:clamp(1.75rem,2.6vw,2.5rem);transition:opacity 250ms var(--e-aus)}
.spalte-kopf small{display:block;font:400 1rem/1.4 var(--f-text);color:var(--neben);margin-bottom:8px}
.spalte ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px}
.zettel{
  background:var(--weiss);color:var(--nacht);padding:12px 16px;border-radius:4px;
  font-size:1rem;line-height:1.4;
  box-shadow:0 1px 0 rgba(28,26,63,.12),0 12px 16px -12px rgba(28,26,63,.35);
}
.spalte li:nth-child(odd) .zettel{transform:rotate(-.7deg)}
.spalte li:nth-child(even) .zettel{transform:rotate(.6deg)}
/* Handy: Zettel fliegen einzeln herein */
.hat-js:not(.ruhig) .buehne-wrap:not(.fest) .zettel{opacity:0;translate:0 16px;transition:opacity 400ms var(--e-aus),translate 400ms var(--e-aus)}
.hat-js:not(.ruhig) .buehne-wrap:not(.fest) .zettel.sichtbar{opacity:1;translate:0 0}
/* Bühne bleibt stehen (nur Desktop, Skript schaltet ein) */
.buehne-wrap.fest{margin-top:0;height:440vh;height:440svh}
.buehne-wrap.fest .buehne{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.buehne-wrap.fest .spalte-kopf{opacity:.3}
.buehne-wrap.fest .slot{border:1.5px dashed var(--linie);border-radius:6px;padding:4px}
.buehne-wrap.fest .zettel{will-change:transform}

/* ==========================================================
   3 VORHER UND NACHHER
   ========================================================== */
.vn .h2{margin-bottom:8px}
.vn-haelften{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 clamp(24px,5vw,80px);margin:56px 0}
.vn-linie{background:var(--linie)}
.vn-wort{font-size:1rem;color:var(--neben);margin-bottom:8px}
.vn-seite h3{margin-bottom:8px}
.werte{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;margin:32px 0 0;padding:0}
.werte dt{font-size:1rem;color:var(--neben)}
.werte dd{margin:4px 0 0;font:700 clamp(2rem,3.6vw,2.75rem)/1 var(--f-kopf);color:var(--akzent)}
.vergleich{position:relative}
.vergleich-flaeche{position:relative;aspect-ratio:16/8;overflow:clip;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.vf{position:absolute;inset:0;display:grid}
.vf .platzhalter{border-style:dashed;color:var(--dunst)}
.vf-nachher .platzhalter{background:color-mix(in srgb,var(--dunst) 24%,var(--nacht))}
.vf-vorher .platzhalter{background:color-mix(in srgb,var(--dunst) 10%,var(--nacht));padding-right:calc(50% + 24px)}
.vf-nachher .platzhalter{padding-left:calc(50% + 24px)}
.griff{position:absolute;left:0;top:0;bottom:0;width:44px;margin-left:-22px;pointer-events:none;display:none}
.griff::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--heide-hell)}
.griff .rund{position:absolute;left:0;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--heide);border:2px solid var(--weiss);display:grid;place-items:center;color:var(--weiss);font-size:1rem;line-height:1}
.vergleich.aktiv .griff{display:block}
.vergleich.aktiv .vergleich-flaeche{cursor:ew-resize}
.vergleich-regler{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.vergleich:has(.vergleich-regler:focus-visible) .griff .rund{outline:3px solid var(--heide-hell);outline-offset:3px}
/* ohne Skript: beide Bilder nebeneinander */
.vergleich:not(.aktiv) .vergleich-flaeche{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;overflow:visible}
.vergleich:not(.aktiv) .vf{position:relative;inset:auto;aspect-ratio:4/3}
.vergleich:not(.aktiv) .vergleich-regler{display:none}
.vergleich-hinweis{font-size:1rem;color:var(--neben);margin:16px 0 0}

/* ==========================================================
   4 ÜBER MICH: Geteilter Bildschirm 60 zu 40 + Zeitstrahl
   ========================================================== */
.geteilt{display:grid;grid-template-columns:3fr 2fr;gap:clamp(40px,7vw,112px);align-items:start}
.zitat{margin:0 0 56px;padding:0;font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.4;max-width:30em}
.ueber h2{margin-bottom:0}
.zs{position:relative;list-style:none;margin:48px 0 40px;padding:0 0 0 56px}
.zs-spur,.zs-fuell{position:absolute;left:11px;width:2px;top:20px;bottom:0}
.zs-spur{background:var(--linie)}
.zs-fuell{background:var(--akzent);transform-origin:top}
.zs li{position:relative;padding-bottom:32px}
.zs li:last-child{padding-bottom:0}
.punkt{position:absolute;left:-56px;top:8px;width:24px;height:24px;border-radius:50%;border:2px solid var(--akzent);background:var(--akzent);transition:background-color 300ms var(--e-farbe)}
.hat-js:not(.ruhig) .zs .punkt{background:transparent}
.hat-js:not(.ruhig) .zs li.aktiv .punkt{background:var(--akzent)}
.zs-inhalt{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:baseline}
.zs-nr{font:700 1.5rem/1.4 var(--f-kopf);color:var(--neben)}
.zs-inhalt p{margin:0;font-size:1.25rem;line-height:1.5}
.hat-js:not(.ruhig) .zs .zs-inhalt{opacity:.5;transition:opacity 300ms var(--e-farbe)}
.hat-js:not(.ruhig) .zs li.aktiv .zs-inhalt{opacity:1}
.portrait-spalte figure{margin:0}
.vorhang{position:relative}
.vorhang-flaeche{aspect-ratio:4/5;overflow:clip;clip-path:inset(0)}
.vorhang-bild{width:100%;height:100%;transform:none}
.hat-js:not(.ruhig) .vorhang-flaeche{clip-path:inset(100% 0 0 0);transition:clip-path 1100ms var(--e-weg)}
.hat-js:not(.ruhig) .vorhang-bild{transform:scale(1.35);transition:transform 1400ms var(--e-aus)}
.hat-js:not(.ruhig) .vorhang.offen .vorhang-flaeche{clip-path:inset(0)}
.hat-js:not(.ruhig) .vorhang.offen .vorhang-bild{transform:none}
.portrait-spalte figcaption{margin-top:16px;font-size:1rem;color:var(--neben)}
.portrait-spalte figcaption .name{color:var(--salz)}
.rahmen.f-salz .portrait-spalte figcaption .name{color:var(--nacht)}

/* ==========================================================
   5 DREI THEMEN: Zickzack
   ========================================================== */
.themen .h2{max-width:14em;margin-bottom:clamp(56px,10vh,112px)}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,7vw,112px);align-items:center;margin-bottom:clamp(64px,12vh,144px)}
.reihe:last-child{margin-bottom:0}
.reihe .bild{translate:0 -24px}
.reihe:nth-child(even) .bild{order:2;translate:0 24px}
.reihe .bild .vorhang-flaeche,.reihe .bild .flaeche{aspect-ratio:4/3}
.reihe .flaeche{overflow:clip}
.reihe h3{margin-bottom:16px;font-size:clamp(2.25rem,4.4vw,3.5rem)}
.reihe p{font-size:1.25rem;margin-bottom:24px}

/* ==========================================================
   6 ANGEBOT: Karten stapeln sich
   ========================================================== */
.angebot .h2{margin-bottom:clamp(40px,8vh,80px)}
.karten{display:grid;gap:24px}
.karte{
  position:relative;border-radius:16px;overflow:clip;transform-origin:50% 0;
  background:var(--weiss);color:var(--nacht);--akzent:var(--heide);--neben:var(--grau);--linie:rgba(28,26,63,.28);--flaeche:rgba(28,26,63,.06);
  box-shadow:0 1px 0 rgba(28,26,63,.1);
}
.karte--nacht{background:var(--nacht);color:var(--salz);--akzent:var(--heide-hell);--neben:var(--dunst);--linie:rgba(237,237,240,.28);--flaeche:rgba(237,237,240,.08);box-shadow:0 0 0 1px rgba(237,237,240,.14)}
.karte-innen{display:grid;grid-template-columns:3fr 2fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(24px,4vw,56px)}
.karte--umgekehrt .karte-innen{grid-template-columns:2fr 3fr}
.karte--umgekehrt .karte-bild{order:-1}
.karte h3{margin-bottom:16px;font-size:clamp(1.875rem,3.6vw,3rem)}
.karte p{margin-bottom:24px}
.karte-bild{aspect-ratio:4/3}
.karte-dunkel{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.karten.fest .karte{position:sticky;top:calc(12vh + var(--k) * 16px)}
.karten.fest{padding-bottom:8vh}

/* ==========================================================
   7 FRAGEN: Akkordeon
   ========================================================== */
.fragen .h2{margin-bottom:clamp(40px,8vh,72px)}
.faq{max-width:880px;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;cursor:pointer;font:700 clamp(1.5rem,2.6vw,2rem)/1.2 var(--f-kopf);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{display:none}
.faq .pfeil{flex:none;font:400 1.75rem/1 var(--f-text);color:var(--akzent);transition:transform 250ms var(--e-aus)}
.faq details[open] .pfeil{transform:rotate(90deg)}
.faq details::details-content{opacity:0;transform:translateY(-8px);transition:opacity 250ms var(--e-aus),transform 250ms var(--e-aus),content-visibility 250ms allow-discrete}
.faq details[open]::details-content{opacity:1;transform:none}
@starting-style{ .faq details[open]::details-content{opacity:0;transform:translateY(-8px)} }
.faq .antwort{padding:0 0 24px;max-width:56ch}
.faq .antwort p{margin:0}
.faq-mehr{margin-top:40px}

/* ==========================================================
   8 ABSCHLUSS: Laufband, Formular
   ========================================================== */
.abschluss{padding-top:0}
.laufband{overflow:clip;padding-block:clamp(48px,8vh,96px);margin-bottom:clamp(64px,10vh,112px);border-bottom:1px solid var(--linie)}
.laufband-spur{display:flex;align-items:center;gap:clamp(32px,5vw,72px);width:max-content;font:700 clamp(3rem,10vw,9rem)/1.05 var(--f-kopf);white-space:nowrap;will-change:transform}
.laufband-spur i{flex:none;width:.28em;height:.28em;border-radius:50%;background:var(--akzent)}
.laufband:not(.laeuft) .laufband-spur{width:auto;white-space:normal;flex-wrap:wrap;max-width:100%;text-wrap:balance}
.laufband:not(.laeuft) [aria-hidden="true"]{display:none}
.abschluss-raster{display:grid;grid-template-columns:3fr 2fr;gap:clamp(40px,7vw,112px);align-items:start}
.abschluss .h2{margin-bottom:24px}
.formular-platzhalter{border:2px dashed var(--neben);padding:32px;background:var(--flaeche);color:var(--neben)}
.formular-platzhalter b{display:block;color:inherit;font-size:1.125rem;margin-bottom:16px}
.formular-platzhalter ul{margin:0;padding:0;list-style:none}
.formular-platzhalter li{padding:12px 0;border-top:1px solid var(--linie)}
.abschluss .knopf{margin-top:24px}
.klein{font-size:1rem;color:var(--neben);margin:16px 0 0}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--nacht);color:var(--salz);padding:clamp(64px,10vh,96px) 0 40px;--akzent:var(--heide-hell);--neben:var(--dunst);--linie:rgba(237,237,240,.28)}
.fuss-innen{display:grid;gap:32px}
.fuss-marke{font:700 2rem/1 var(--f-kopf)}
.fuss nav{display:flex;flex-wrap:wrap;gap:12px 32px}
.fuss nav a{position:relative;text-decoration:none;padding:4px 0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fuss nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--e-aus)}
.fuss nav a:focus-visible::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .fuss nav a:hover::after{transform:scaleX(1)} }
.fuss small{display:block;max-width:70ch;font-size:1rem;line-height:1.6;color:var(--dunst);padding-top:24px;border-top:1px solid var(--linie)}

/* ---------- Zeiger-Begleiter ---------- */
.zeiger{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:60;mix-blend-mode:difference;opacity:0;transition:opacity 200ms var(--e-aus)}
.zeiger .ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;scale:1;transition:scale 250ms var(--e-aus),background-color 250ms var(--e-aus),border-color 250ms var(--e-aus)}
.zeiger.aktiv{mix-blend-mode:normal}
.zeiger.aktiv .ring{scale:3.4;background:var(--heide);border-color:var(--heide)}
.zeiger-wort{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.9);opacity:0;color:#fff;font:600 1rem/1 var(--f-text);white-space:nowrap;transition:opacity 200ms var(--e-aus),transform 200ms var(--e-aus)}
.zeiger.aktiv .zeiger-wort{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ==========================================================
   HANDY
   ========================================================== */
@media (max-width:899px){
  .spalten{grid-template-columns:1fr;gap:48px}
  .vn-haelften{grid-template-columns:1fr;gap:32px 0}
  .vn-linie{height:1px;width:100%}
  .geteilt,.reihe,.abschluss-raster{grid-template-columns:1fr}
  .reihe .bild,.reihe:nth-child(even) .bild{order:0;translate:0 0}
  .reihe:nth-child(even) .bild{translate:0 0}
  .karte-innen,.karte--umgekehrt .karte-innen{grid-template-columns:1fr}
  .karte--umgekehrt .karte-bild{order:0}
  .karte-bild{aspect-ratio:16/9}
  .fakten{grid-template-columns:1fr;gap:24px}
  .fakten>div,.fakten>div:first-child{padding:0 0 0 16px;border-left:1px solid var(--linie)}
  .vergleich-flaeche{aspect-ratio:4/3}
  .vergleich:not(.aktiv) .vergleich-flaeche{grid-template-columns:1fr}
  .buehne-kopf{flex-direction:column;gap:8px}
}
@media (max-width:480px){
  .knopf{padding:16px 24px}
  .werte{grid-template-columns:1fr 1fr}
}

/* Bewegung reduzieren: alles steht sofort da, nur der Farbwechsel bleibt (kurz) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{--farbdauer:200ms}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important}
  .rahmen{transition-duration:200ms!important}
}

/* ====== Startseite: Zusätze ====== */
.kopf{position:relative;z-index:5;padding-block:24px}
.kopf-innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.marke-link{font:700 1.5rem/1 var(--f-kopf);text-decoration:none;letter-spacing:.01em}
.kopf nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:1rem}
.kopf nav a:not(.knopf){position:relative;text-decoration:none;padding:4px 0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.kopf nav a:not(.knopf)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--e-aus)}
.kopf nav a:not(.knopf):focus-visible::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .kopf nav a:not(.knopf):hover::after{transform:scaleX(1)} }
.knopf.schmal{padding:10px 24px;font-size:1rem}
.hero{justify-content:flex-start;padding-block:0 clamp(64px,10vh,120px)}
.hero-innen{margin-block:auto;padding-top:clamp(32px,6vh,72px)}
.hero-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.hero-raster .hero-text{margin-bottom:0}
.leber{position:relative;width:min(460px,100%);justify-self:center;will-change:transform}
.leber-kopf{text-align:center;font:700 1.5rem/1.3 var(--f-kopf);color:var(--neben);margin-bottom:0}
.leber-kopf .wechsel{color:var(--salz)}
.leber-bilder{display:grid}
.leber-bilder img{grid-area:1/1;width:100%;height:auto;opacity:0;transition:opacity 900ms var(--e-aus)}
.leber[data-s="0"] .l0,.leber[data-s="1"] .l1,.leber[data-s="2"] .l2{opacity:1}
.leber-atem{animation:atmen 9s ease-in-out infinite}
@keyframes atmen{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.ruhig .leber-atem{animation:none}
.d-ring{top:18vh}
@media (max-width:899px){
  .hero-raster{grid-template-columns:1fr}
  .leber{margin-top:16px}
}
.fakten dt{font-variant-numeric:tabular-nums}

/* Verwandlung (alter Effekt, neuer Look) */
.vw{padding-block:0}
.vw-lauf{padding-block:clamp(96px,16vh,192px)}
.vw.fest .vw-lauf{padding-block:0;height:340vh;height:340svh}
.vw.fest .vw-buehne{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:24px}
.vw-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.vw-links .h2{margin-bottom:40px}
.vw-weg{display:flex;gap:24px}
.vw-rail{position:relative;flex:none;width:3px;background:var(--linie);align-self:stretch}
.vw-rail i{position:absolute;inset:0;background:var(--akzent);transform-origin:top;transform:scaleY(1)}
.vw.fest .vw-rail i{transform:scaleY(0)}
.vw-stufen{position:relative;flex:1;display:grid;gap:40px}
.vw.fest .vw-stufen{display:block;height:240px}
.stufe small{display:block;font-size:1rem;color:var(--neben);margin-bottom:8px}
.stufe h3{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:12px}
.stufe p{margin:0;max-width:34ch}
.vw.fest .stufe{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity 500ms var(--e-aus),transform 500ms var(--e-aus)}
.vw.fest .stufe.aktiv{opacity:1;transform:none;pointer-events:auto}
.vw-bild{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.vw-bild figure{margin:0}
.vw-bild img{display:block;width:100%;height:auto;max-height:40vh;object-fit:contain}
.vw-bild figcaption{font-size:1rem;color:var(--neben);margin-top:8px;text-align:center}
.vb1{display:none}
.vw.fest .vw-bild{grid-template-columns:1fr}
.vw.fest .vw-bild figure{grid-area:1/1;opacity:0;transition:opacity 600ms var(--e-aus)}
.vw.fest .vw-bild figcaption{display:none}
.vw.fest .vw-bild img{max-height:30vh;margin-inline:auto}
.vw.fest[data-s="0"] .vb0,.vw.fest[data-s="1"] .vb1,.vw.fest[data-s="2"] .vb2{opacity:1}
.vw.fest .vb1{display:block}
.vw-panel{margin-top:24px;padding-top:16px;border-top:1px solid var(--linie)}
.vw-panel h3{font-size:1.5rem;margin-bottom:4px}
.vw-chip{font-size:1rem;color:var(--neben);margin:0 0 8px}
.wert-zeile{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:8px 0;font-size:1rem}
.wert-zeile span:first-child{color:var(--neben)}
.wert-zeile .wert{font-variant-numeric:tabular-nums;font-weight:600}
.wert-balken{grid-column:1/-1;display:none;height:4px;background:var(--linie);overflow:clip}
.wert-balken i{display:block;height:100%;background:var(--akzent);transform-origin:left;transform:scaleX(.9)}
.vw.fest .wert-balken{display:block}
.vw-hinweis{display:none;position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:1rem;color:var(--neben);transition:opacity 400ms var(--e-aus)}
.vw.fest .vw-hinweis{display:block}
@media (max-width:899px){
  .vw-raster{grid-template-columns:1fr}
}

/* Fotos */
.foto-rahmen{aspect-ratio:3/4}
.foto-rahmen img,.bild img,.karte-bild img{display:block;width:100%;height:100%;object-fit:cover}
.reihe .bild .vorhang-flaeche,.reihe .bild .flaeche{aspect-ratio:3/2}
.karte-bild{aspect-ratio:3/2;overflow:clip;border-radius:8px}
.karte-bild.buch{aspect-ratio:3/2}
/* Produktbilder: freigestellte Buchbilder mit eigenem Schatten, ohne Rahmen */
.karte-bild.deckel{aspect-ratio:auto;overflow:visible;border-radius:0;display:grid;place-items:center}
.produktbild,.karte-bild img.produktbild{display:block;width:min(100%,340px);height:auto;margin-inline:auto;object-fit:contain}

/* Blog-Liste */
.blog{margin-top:clamp(72px,12vh,128px)}
.blog .h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:32px}
.blog-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie);max-width:880px}
.blog-liste li{border-bottom:1px solid var(--linie)}
.blog-liste a{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:24px 0;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.blog-liste small{grid-column:1/-1;font-size:1rem;color:var(--neben)}
.blog-liste strong{font:700 clamp(1.375rem,2.4vw,1.75rem)/1.2 var(--f-kopf);position:relative;justify-self:start}
.blog-liste strong::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--e-aus)}
.blog-liste a:focus-visible strong::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .blog-liste a:hover strong::after{transform:scaleX(1)} }
.blog-liste p{grid-column:1;margin:4px 0 0;color:var(--neben);font-size:1rem}
.blog-liste .pf{grid-row:2;grid-column:2;align-self:center;color:var(--akzent);font-weight:600}
.blog-liste a>strong{grid-column:1}

/* Anmelde-Formular */
.eingabe{display:block;width:100%;max-width:420px;padding:16px 24px;border-radius:999px;border:2px solid var(--neben);background:#fff;color:var(--nacht);font:inherit;font-size:1.0625rem}
.abschluss .knopf{margin-top:16px}
.meldung{margin:16px 0 0;font-size:1.0625rem}
.meldung[hidden]{display:none}
.meldung a{color:var(--akzent)}
/* ==========================================================
   BEFUND-EINSTIEG, Kopfleiste, Schmuckschrift
   ========================================================== */
/* Schmuckschrift für einzelne betonte Wörter (Wiedererkennung der alten Seite) */
.zier{font-family:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0;color:var(--akzent)}

/* Kopfleiste: eine Zeile, läuft mit */
.kopf{position:sticky;top:0;z-index:50;padding-block:12px;background-color:inherit;border-bottom:1px solid transparent;transition:border-color 200ms var(--e-farbe)}
.kopf.unten{border-bottom-color:var(--linie)}
.kopf-innen{flex-wrap:nowrap;background-color:inherit;min-height:44px}
.kopf nav{flex-wrap:nowrap;gap:8px 22px;font-size:.9375rem;background-color:inherit}
.kopf nav a{white-space:nowrap}
.menue-knopf{display:none}
@media (max-width:899px){
  .hat-js .menue-knopf{display:inline-flex;align-items:center;min-height:44px;padding:0 0 0 16px;background:none;border:0;color:inherit;font:600 1rem/1 var(--f-text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .kopf nav{flex-wrap:wrap;font-size:1rem}
  .kopf-innen{flex-wrap:wrap}
  .hat-js .kopf-innen{flex-wrap:nowrap}
  .hat-js .kopf nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--rand) 24px;border-bottom:1px solid var(--linie)}
  .hat-js .kopf.offen nav{display:flex}
  .hat-js .kopf nav a:not(.knopf){padding:12px 0;font-size:1.125rem}
  .hat-js .kopf nav .knopf{margin-top:12px}
}

/* Bühne */
.befund{padding-block:0}
.bf-buehne{position:relative;padding-block:clamp(32px,6vh,64px) clamp(64px,10vh,112px)}
.befund.fest .bf-lauf{height:260vh;height:260svh}
.befund.fest .bf-buehne{position:sticky;top:var(--kopf-h,68px);min-height:calc(100vh - var(--kopf-h,68px));min-height:calc(100svh - var(--kopf-h,68px));display:flex;align-items:center;padding-block:24px 56px}
.bf-raster{display:grid;width:100%;grid-template-columns:1.15fr .85fr;grid-template-areas:"titel bild" "stufe bild" "person bild" "aktion bild";column-gap:clamp(32px,6vw,96px);align-items:start}

.bf-titel{grid-area:titel;font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.2;font-weight:600;max-width:24em;margin-bottom:clamp(24px,4.5vh,48px)}
.bf-titel .zier{font-size:1.12em;line-height:1}

.bf-stufen{grid-area:stufe;display:grid;margin-bottom:clamp(24px,4.5vh,44px)}
.bf-stufe{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity 500ms var(--e-aus),transform 500ms var(--e-aus)}
.bf-stufe.aktiv{opacity:1;transform:none}
.bf-stufe small{display:block;font-size:1rem;color:var(--neben);margin-bottom:8px}
.bf-wort{font:700 clamp(3rem,7.4vw,6.5rem)/.98 var(--f-kopf);margin:0 0 16px;max-width:none;hyphens:manual}
.bf-stufe:last-child .bf-wort{color:var(--akzent)}
.bf-stufe p:last-child{margin:0;max-width:36ch;font-size:1.1875rem;line-height:1.5;hyphens:manual}

.bf-person{grid-area:person;max-width:35em;margin-bottom:clamp(24px,4vh,36px)}
.bf-person img{display:block;width:72px;height:96px;object-fit:cover;border-radius:4px}
.bf-person p{margin:0;font-size:1rem;line-height:1.5;color:var(--neben)}
.bf-gruss{font-size:1.5rem;line-height:1;white-space:nowrap;margin-left:4px}

.bf-aktion{grid-area:aktion;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}

.bf-bild{grid-area:bild;align-self:center;display:grid;justify-items:center}
.bf-leber{display:grid;width:min(100%,44vh,440px)}
.bf-leber img{grid-area:1/1;display:block;width:100%;height:auto;opacity:0;transition:opacity 700ms var(--e-aus)}
.befund[data-s="0"] .bl0,.befund[data-s="1"] .bl1,.befund[data-s="2"] .bl2{opacity:1}

/* Der Laborzettel */
.bf-zettel{
  position:relative;width:min(100%,400px);margin-top:-28px;padding:18px 24px 14px;border-radius:4px;
  background:var(--weiss);color:var(--nacht);--akzent:var(--heide);--neben:var(--grau);--linie:rgba(28,26,63,.16);
  transform:rotate(-1.2deg);box-shadow:0 1px 0 rgba(0,0,0,.2),0 24px 32px -20px rgba(0,0,0,.65);
}
.bz-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.bz-kopf h2{font-size:1.5rem;line-height:1.1}
.bz-chip{font-size:1rem;font-weight:600;color:var(--akzent);white-space:nowrap}
.bz-zeile{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:6px 12px;padding:8px 0 9px;font-size:1rem;line-height:1.3;border-top:1px solid var(--linie)}
.bz-alt{color:var(--neben);text-decoration:line-through;font-variant-numeric:tabular-nums}
.bz-wert{font:700 1.5rem/1 var(--f-kopf);font-variant-numeric:tabular-nums;min-width:4.4em;text-align:right}
.bz-balken{grid-column:1/-1;height:3px;background:var(--linie);overflow:clip}
.bz-balken i{display:block;height:100%;background:var(--akzent);transform-origin:left;transform:scaleX(.22)}
.bz-fuss{margin:10px 0 0;font-size:.875rem;color:var(--neben)}

.bf-hinweis{display:none}
.befund.fest .bf-hinweis{display:block;position:absolute;left:var(--rand);bottom:16px;margin:0;font-size:1rem;color:var(--neben);transition:opacity 300ms var(--e-aus)}
.bf-nochmal{display:none;margin-top:20px;min-height:44px;padding:0 8px;background:none;border:0;color:var(--akzent);font:600 1rem/1 var(--f-text);text-decoration:underline;text-underline-offset:4px;cursor:pointer;touch-action:manipulation}
.befund.zeit-fertig:not(.fest) .bf-nochmal{display:inline-block}

@media (max-width:899px){
  .bf-raster{grid-template-columns:1fr;grid-template-areas:"titel" "stufe" "aktion" "bild" "person"}
  .bf-aktion{margin-bottom:48px}
  .bf-bild{margin-bottom:48px}
  .bf-leber{width:min(80%,320px)}
  .bf-person{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){ .bf-stufe{transform:none} }

/* ==========================================================
   UNTERSEITEN: Bausteine (siehe werkzeug/BAUKASTEN.md)
   ========================================================== */
::selection{background:var(--heide-hell);color:var(--nacht)}
.kopf nav a[aria-current="page"]:not(.knopf)::after{transform:scaleX(1)}
.fuss-marke{text-decoration:none;justify-self:start}
.fuss-recht{margin:0;color:var(--dunst);font-size:1rem}

/* Betonte Wörter in Überschriften: <em> bekommt die Schmuckschrift */
h1 em,h2 em,h3 em{font-family:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0;color:var(--akzent)}

/* Engerer Abschnitt für Leseseiten */
.sektion.eng{padding-block:clamp(56px,9vh,104px)}
.sektion.oben-knapp{padding-top:clamp(24px,4vh,48px)}
.wrap.schmal{max-width:calc(46rem + 2 * var(--rand))}

/* Seitenkopf einer Unterseite */
.seitenkopf{padding-block:clamp(48px,9vh,104px) clamp(56px,9vh,104px)}
.seitenkopf .meta{font-size:1rem;color:var(--neben);margin:0 0 16px}
.seitenkopf h1{font-size:clamp(2.5rem,6.4vw,5.25rem);line-height:1.02;max-width:15em;margin-bottom:24px}
.seitenkopf.artikel h1{font-size:clamp(2.25rem,5vw,3.75rem);line-height:1.06}
.seitenkopf .vorspann{font-size:1.3125rem;line-height:1.5;max-width:36em;margin:0}
.seitenkopf .vorspann+.vorspann{margin-top:16px}
.hat-js:not(.ruhig) .seitenkopf .wrap>*{opacity:0;transform:translateY(18px);transition:opacity 400ms var(--e-aus),transform 400ms var(--e-aus)}
.hat-js:not(.ruhig) .seitenkopf .wrap>*:nth-child(2){transition-delay:80ms}
.hat-js:not(.ruhig) .seitenkopf .wrap>*:nth-child(3){transition-delay:160ms}
.hat-js:not(.ruhig) .seitenkopf .wrap>*:nth-child(n+4){transition-delay:240ms}
.hat-js:not(.ruhig).los .seitenkopf .wrap>*{opacity:1;transform:none}

/* Fließtext */
.prosa{max-width:42rem;font-size:1.125rem;line-height:1.7}
.prosa p{max-width:none;margin:0 0 1.2em}
.prosa .einstieg{font-size:1.3125rem;line-height:1.55}
.prosa h2{font-size:clamp(1.875rem,3.6vw,2.5rem);margin:1.9em 0 .6em}
.prosa h3{font-size:clamp(1.5rem,2.6vw,1.875rem);margin:1.6em 0 .5em}
.prosa>h2:first-child,.prosa>h3:first-child{margin-top:0}
.prosa a:not(.knopf){color:var(--akzent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prosa a:not(.knopf):hover{text-decoration-thickness:2px}
.prosa ul,.prosa ol{margin:0 0 1.2em;padding-left:1.3em}
.prosa li{margin-bottom:.5em}
.prosa li::marker{color:var(--akzent)}
.prosa strong{font-weight:650}
.prosa sup{font-size:.75em;line-height:0}
.prosa sup a:not(.knopf){text-decoration:none;font-weight:600}
.prosa blockquote{margin:1.6em 0;padding:0;font-size:1.375rem;line-height:1.45}

/* Kacheln nebeneinander, Hinweis-Kasten, Zeile mit Zahl oder Zeichen */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:0 0 1.4em}
.kachel{background:var(--flaeche);border-radius:8px;padding:20px 24px}
.kachel-titel{font:700 1.5rem/1.15 var(--f-kopf);margin:0 0 8px}
.kachel p{font-size:1rem;line-height:1.55;margin:0}
.kasten{background:var(--flaeche);border-radius:8px;padding:24px 28px;margin:0 0 1.4em}
.kasten-titel{font:700 1.25rem/1.2 var(--f-kopf);color:var(--akzent);margin:0 0 8px}
.kasten p:last-child,.kasten ul:last-child,.kasten ol:last-child{margin-bottom:0}
.zeile{display:flex;gap:16px;align-items:flex-start}
.zeile>:first-child{flex:none}
.zeile>:last-child{flex:1;min-width:0}
.kennzahl{font:700 1.75rem/1.1 var(--f-kopf);color:var(--akzent);font-variant-numeric:tabular-nums;min-width:1.6em}
.quelle{font-size:1rem;line-height:1.55;color:var(--neben);border-top:1px solid var(--linie);padding-top:16px;margin-top:2.5em}
.quelle ol,.quelle ul{margin:8px 0 0;padding-left:1.3em}
.quelle li{margin-bottom:6px}

/* Tabelle */
.tabelle-rahmen{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
.prosa table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.45}
.prosa th,.prosa td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--linie)}
.prosa th{font:700 1.125rem/1.2 var(--f-kopf);border-bottom-width:2px}

/* Schluss-Abschnitt mit Aufruf */
.schluss h2{font-size:clamp(2.25rem,5vw,3.5rem);margin-bottom:16px;max-width:16em}
.schluss p{font-size:1.25rem;max-width:34em;margin-bottom:32px}

/* Karten-Liste (Blog-Übersicht und ähnliche Listen) */
.liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.liste>li{border-bottom:1px solid var(--linie)}
.liste>li>a{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:24px 0;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.liste small{grid-column:1/-1;font-size:1rem;color:var(--neben)}
.liste strong{grid-column:1;justify-self:start;position:relative;font:700 clamp(1.375rem,2.4vw,1.75rem)/1.2 var(--f-kopf)}
.liste strong::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--e-aus)}
.liste a:focus-visible strong::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){ .liste a:hover strong::after{transform:scaleX(1)} }
.liste p{grid-column:1;margin:4px 0 0;color:var(--neben);font-size:1rem;max-width:60ch}
.liste .pf{grid-row:2;grid-column:2;align-self:center;color:var(--akzent);font-weight:600}

/* Sanftes Einblenden beim Scrollen: data-ein am Element */
.hat-js:not(.ruhig) [data-ein]{opacity:0;translate:0 16px;transition:opacity 500ms var(--e-aus),translate 500ms var(--e-aus)}
.hat-js:not(.ruhig) [data-ein].sichtbar{opacity:1;translate:0 0}

@media (max-width:899px){
  .kasten{padding:20px}
  .liste>li>a{grid-template-columns:1fr}
  .liste .pf{grid-row:auto;grid-column:1}
}

/* Ergänzungen für Artikel */
.seitenkopf .meta span+span::before{content:"·";margin:0 .6em}
.trennzeile{padding:14px 0;border-top:1px solid var(--linie)}
.trennzeile p:last-child{margin-bottom:0}
.stapel{display:grid;gap:12px;margin:0 0 1.2em}
.vorn{flex:none;min-width:5.5em;font-weight:650}
.fragen-kopf{font-size:clamp(1.875rem,3.6vw,2.5rem);margin:clamp(56px,9vh,96px) 0 24px}
.prosa .kasten.zeile,.prosa .kachel.zeile{align-items:flex-start}
.prosa .zeile>p{margin:0}
.schluss .weiter{font-size:1rem;margin:32px 0 0;padding-top:20px;border-top:1px solid var(--linie);max-width:none}
.schluss .weiter a{color:var(--akzent)}
.seitenkopf.rechtstext{padding-block:clamp(40px,7vh,80px) clamp(32px,5vh,56px)}
.seitenkopf.rechtstext h1{font-size:clamp(2.25rem,5vw,3.5rem)}
.rechtstext+.sektion .prosa h2{font-size:1.5rem;margin:1.6em 0 .4em}
.rechtstext+.sektion .prosa p{font-size:1.0625rem;overflow-wrap:anywhere}
.blog-uebersicht{max-width:60rem}
.feld-label{display:block;font-size:1rem;font-weight:600;margin:0 0 8px}

/* ---------- Abnehmspritze: drei Schritte als Liste ---------- */
.as-schritte{list-style:none;margin:clamp(32px,6vh,56px) 0 1.4em;padding:0;max-width:820px}
.as-schritte li{display:grid;grid-template-columns:clamp(56px,11vw,112px) 1fr;column-gap:clamp(16px,3.5vw,44px)}
.as-spur{display:flex;flex-direction:column;align-items:center;gap:14px}
.as-nr{font:700 clamp(3.5rem,9vw,6.5rem)/.85 var(--f-kopf);color:var(--akzent);font-variant-numeric:tabular-nums}
.as-linie{flex:1;width:2px;min-height:24px;margin-bottom:14px;background:linear-gradient(to bottom,var(--akzent),transparent);opacity:.7}
.as-schritte li:last-child .as-linie{display:none}
.as-text{padding-top:6px;padding-bottom:clamp(28px,5vh,48px)}
.as-schritte li:last-child .as-text{padding-bottom:0}
.as-text h3{font-size:clamp(1.75rem,3.4vw,2.5rem);margin:0 0 12px}
.as-text p{margin:0;font-size:1.1875rem;line-height:1.55;max-width:46ch}