/* ═══════════════════════════════════════════════════════════
   Carolin Wetter — Personal Training & Ernährungsberatung
   seeberger studio · 2026
   ═══════════════════════════════════════════════════════════ */

/* 1 · Schrift (lokal, kein Google-Aufruf) */
@font-face{font-family:Figtree;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

/* 2 · Tokens */
:root{
  --lila:#752E6B;      --lila-dunkel:#5A2252;   --lila-hell:#F6EFF5;
  --gruen:#5DD758;     --gruen-dunkel:#2F8C2B;  --gruen-hell:#EFFBEE;
  --tinte:#241F26;     --text:#463F49;          --grau:#625A66;
  --linie:#E6E1E8;     --papier:#FFFFFF;        --sand:#F7F5F8;
  --gold:#F5A623;
  --font:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --grauton:#E3E3E3;   /* Grau aus Carolins alter Seite (Kopf, Fuß, Verläufe) */
  --pad:clamp(18px,5vw,48px);
  --r:18px;
  --schatten:0 18px 50px rgb(36 31 38 / .10);
  --schatten-stark:0 26px 70px rgb(36 31 38 / .18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--text);background:var(--papier);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--lila)}
h1,h2,h3,h4{font-weight:900;line-height:1.04;color:var(--tinte);letter-spacing:-.02em;margin:0}
h1{font-size:clamp(36px,5.4vw,64px);line-height:1.08;text-transform:uppercase;padding-bottom:.06em;text-wrap:balance}
h2{font-size:clamp(28px,4vw,46px);line-height:1.1;text-transform:uppercase;padding-bottom:.04em;text-wrap:balance}
h3{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lila);margin-bottom:14px;display:block}
.lead{font-size:clamp(17px,1.8vw,20px);color:var(--grau);max-width:62ch}

/* 3 · Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;
  font-weight:800;font-size:16px;line-height:1;padding:17px 28px;border-radius:999px;border:2px solid transparent;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn--primary{background:var(--lila);color:#fff;box-shadow:0 12px 28px rgb(117 46 107 / .28)}
.btn--primary:hover{background:var(--lila-dunkel);transform:translateY(-2px);box-shadow:0 16px 34px rgb(117 46 107 / .34)}
.btn--gruen{background:var(--gruen);color:#14330F;box-shadow:0 12px 28px rgb(93 215 88 / .35)}
.btn--gruen:hover{background:#4BC846;transform:translateY(-2px)}
.btn--ghost{border-color:var(--linie);color:var(--tinte);background:#fff}
.btn--ghost:hover{border-color:var(--lila);color:var(--lila)}
.btn--klein{padding:13px 22px;font-size:14.5px}
.nav .btn--primary{background:var(--lila);color:#fff;font-weight:800;letter-spacing:.01em;box-shadow:0 8px 20px rgb(117 46 107 / .3)}
.nav .btn--primary:hover{background:var(--lila-dunkel)}
.nav .btn--primary::after{display:none}

/* 4 · Kopfzeile */
.top{position:sticky;top:0;z-index:60;background:rgb(255 255 255 / .92);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.top.is-stuck{border-color:var(--linie);box-shadow:0 6px 24px rgb(36 31 38 / .06)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.marke{font-weight:900;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila);text-decoration:none;white-space:nowrap}
.marke small{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--grau);font-weight:700;margin-top:3px}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a{font-size:15px;font-weight:600;color:var(--tinte);text-decoration:none;position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gruen);transition:right .22s}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.burger{display:none;width:44px;height:44px;border:1px solid var(--linie);border-radius:12px;background:#fff;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger i{display:block;width:18px;height:2px;background:var(--tinte);transition:.2s}
.top.is-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top.is-open .burger i:nth-child(2){opacity:0}
.top.is-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:920px){
  .burger{display:flex}
  .nav{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:#fff;
    padding:12px var(--pad) 26px;border-bottom:1px solid var(--linie);box-shadow:var(--schatten);
    transform:translateY(-120%);transition:transform .28s cubic-bezier(.3,1,.4,1);max-height:calc(100dvh - 64px);overflow:auto}
  .top.is-open .nav{transform:none}
  .nav a{padding:14px 0;border-bottom:1px solid var(--linie);font-size:17px}
  .nav .btn{margin-top:16px}
}

/* Mega-Menü */
.nav__punkt{position:relative}
.nav__punkt>a{display:inline-flex;align-items:center;gap:6px}
.pfeil{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;opacity:.6}
.nav__punkt:hover .pfeil,.nav__punkt:focus-within .pfeil{transform:rotate(-135deg) translateY(-2px);opacity:1}
.mega{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;width:min(560px,92vw);
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px;background:#fff;border:1px solid var(--linie);
  border-radius:18px;box-shadow:var(--schatten-stark);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:70}
.mega--zwei{width:min(480px,92vw)}
.nav__punkt:hover .mega,.nav__punkt:focus-within .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega::before{content:"";position:absolute;inset:-14px 0 100%}
.mega a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;transition:background .15s}
.mega a:hover{background:var(--lila-hell)}
.mega b{display:block;font-size:15.5px;color:var(--tinte);margin-bottom:3px}
.mega span{display:block;font-size:13px;color:var(--grau);line-height:1.4}
.mega a::after{display:none}
.mega__alle{grid-column:1/-1;text-align:center;font-weight:700;font-size:14px;color:var(--lila);background:var(--sand)}
@media (max-width:920px){
  .nav__punkt{display:contents}
  .mega{position:static;translate:none;opacity:1;visibility:visible;transform:none;display:grid;grid-template-columns:1fr;
    box-shadow:none;border:0;border-radius:0;padding:0 0 10px 14px;width:auto;background:transparent}
  .mega a{padding:10px 0;border-bottom:1px solid var(--linie)}
  .mega b{font-size:15px;font-weight:600}.mega span{display:none}
  .mega__alle{display:none}
  .pfeil{display:none}
}

/* 5 · Hero – angelehnt an Carolins alte Startseite: Grau-Verlauf,
   „Coaching. Training. Improving.“ gross und Wort für Wort hereinfliegend,
   rechts zwei Bilder (Ernährung + Training), versetzt angeordnet.
   Die Schriftgrösse richtet sich nach der Textspalte: „IMPROVING.“ ist
   rund 5,6 em breit, dahinter bleiben immer ~56px Luft bis zu den Bildern. */
.hero{position:relative;padding:0;overflow:hidden;
  background:linear-gradient(180deg,var(--grauton) 0%,#F1F1F1 55%,#F6F6F6 100%)}
/* Kein leeres Band unter dem Hero: der nächste Abschnitt rückt näher */
.hero + section{padding-top:clamp(40px,5vw,72px)}
/* Ab 1440px wächst der Hero nicht weiter, sondern steht mittig – sonst
   werden die Bilder auf großen Bildschirmen riesig und der Text rutscht ab. */
.hero{--hb:min(100vw,1440px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;max-width:1440px;margin-inline:auto}
.hero__text{position:relative;z-index:2;align-self:center;padding-block:clamp(40px,5vw,72px);
  padding-left:max(var(--pad),calc((var(--hb) - var(--wrap))/2 + var(--pad)));padding-right:clamp(20px,3vw,40px)}
.hero .kicker{margin-bottom:clamp(14px,1.6vw,22px)}
.hero h1.hero__claim{font-size:clamp(40px,calc((var(--hb) / 2 - max(var(--pad),(var(--hb) - var(--wrap))/2 + var(--pad)) - 56px) / 5.6),112px);line-height:.88;letter-spacing:-.04em;color:var(--lila);
  white-space:nowrap;padding-bottom:.06em}
.hero__claim span{display:block;animation:reinfliegen .9s cubic-bezier(.2,.7,.2,1) both}
.hero__claim span:nth-child(2){animation-delay:.3s}
.hero__claim span:nth-child(3){animation-delay:.6s}
@keyframes reinfliegen{from{opacity:.01;transform:translateX(-70px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero__claim span{animation:none}}
.hero .lead{margin-top:clamp(18px,2vw,26px);max-width:30em;font-size:17px;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.2vw,30px)}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:clamp(20px,2vw,28px);font-size:14px;color:var(--grau)}
.sterne{color:var(--gold);letter-spacing:2px;font-size:15px}
.hero__trust b{color:var(--tinte)}
/* Zwei Hochformate, versetzt: links ab Kopfkante, rechts tiefer bis
   zum Fensterrand. Die Box hat ein festes Verhältnis, damit beide
   Bilder nie beschnitten werden und der Abschnitt ruhig bleibt. */
.hero__bilder{position:relative;aspect-ratio:1/.9;z-index:1}
.hero__bilder img{position:absolute;width:calc(50% - 5px);height:auto;aspect-ratio:2/3;object-fit:cover}
.hero__bilder img:first-child{left:0;top:0;object-position:center 30%}
.hero__bilder img:last-child{right:0;bottom:0}
@media (max-width:860px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__text{text-align:center;padding-inline:var(--pad);padding-bottom:28px}
  .hero h1.hero__claim{font-size:clamp(38px,12vw,72px)}
  .hero .lead{margin-inline:auto}
  .hero__cta,.hero__trust{justify-content:center}
  .hero__bilder{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 var(--pad) 36px}
  .hero__bilder img{position:static;width:100%}
  .hero__bilder img:last-child{margin-top:44px}
}

/* 6 · Abschnitte */
section{padding-block:clamp(52px,7vw,96px)}
.sand{background:var(--sand)}
.kopf{max-width:720px;margin-bottom:clamp(30px,4vw,52px)}
.kopf--mitte{margin-inline:auto;text-align:center}

/* Für wen */
.fuer{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(16px,2.4vw,26px)}
.fuer__k{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:30px 26px;transition:transform .25s,box-shadow .25s,border-color .25s}
.fuer__k:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:transparent}
.fuer__k .emoji{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--lila-hell);margin-bottom:18px;font-size:24px}
.fuer__k:nth-child(2) .emoji{background:var(--gruen-hell)}
.fuer__k p{margin:10px 0 0;font-size:16px}

/* Angebote */
.angebote{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
@media (max-width:900px){.angebote{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .angebote{grid-template-columns:repeat(2,1fr);gap:12px}
  .angebote .ang__bild{aspect-ratio:1/1}
  .angebote .ang__text{padding:13px 14px 16px}
  .angebote .ang__text h3{font-size:15.5px;line-height:1.22;letter-spacing:0;
    hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .angebote .ang__text p{display:none}
  .angebote .ang__mehr{font-size:13px;gap:5px}
  .angebote .chip{top:9px;left:9px;font-size:10.5px;padding:4px 9px}
}
.ang{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--linie);text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.ang:hover{transform:translateY(-5px);box-shadow:var(--schatten-stark)}
.angebote--kompakt{grid-template-columns:repeat(2,1fr);max-width:840px;margin-inline:auto}
.angebote--kompakt .ang__bild{aspect-ratio:1/1}
.angebote--kompakt .ang__text{padding:20px 22px 24px}
@media (max-width:560px){.angebote--kompakt{grid-template-columns:1fr}}
.ang__bild{aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.ang__bild img{width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .5s}
.ang:hover .ang__bild img{transform:scale(1.05)}
.ang__text{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.ang__text p{font-size:15.5px;color:var(--grau);margin:10px 0 18px}
.ang__mehr{margin-top:auto;font-weight:800;font-size:14.5px;color:var(--lila);display:inline-flex;align-items:center;gap:8px}
.ang:hover .ang__mehr{gap:12px}
.chip{position:absolute;top:14px;left:14px;background:rgb(255 255 255 / .94);color:var(--lila);font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.chip--gruen{color:var(--gruen-dunkel)}

/* Ablauf */
.ablauf{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,38px);counter-reset:s}
.ablauf::before{content:"";position:absolute;top:23px;left:16.666%;right:16.666%;height:2px;
  background:repeating-linear-gradient(90deg,var(--lila) 0 10px,transparent 10px 20px);opacity:.35}
.schritt{position:relative;text-align:center}
.schritt::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--lila);border:2px solid var(--lila);font-weight:900;font-size:19px;margin:0 auto 18px;position:relative;z-index:1}
.schritt h3{font-size:19px}
.schritt p{font-size:15.5px;margin:8px auto 0;max-width:34ch;color:var(--grau)}
@media (max-width:760px){
  .ablauf{grid-template-columns:1fr;gap:26px}
  .ablauf::before{top:23px;bottom:23px;left:22px;right:auto;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--lila) 0 10px,transparent 10px 20px)}
  .schritt{text-align:left;padding-left:66px}
  .schritt::before{position:absolute;left:0;top:0;margin:0}
}
/* Zweite Reihe unter den Phasen: eigene Überschrift, Punkte statt Ziffern,
   damit die 1-2-3 der Phasen sich nicht wiederholen. */
.zwischenkopf{margin-top:clamp(44px,6vw,72px);padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--linie);
  text-align:center;font-size:clamp(19px,2.2vw,23px);letter-spacing:-.01em}
.zwischenkopf+.ablauf{margin-top:clamp(26px,3.4vw,40px)}
.ablauf--begleitung::before{top:7px}
.ablauf--begleitung .schritt::before{content:"";width:16px;height:16px;border-width:3px;margin-bottom:20px;background:var(--lila)}
@media (max-width:760px){
  .ablauf--begleitung::before{top:12px;bottom:12px;left:8px}
  .ablauf--begleitung .schritt{padding-left:38px}
  .ablauf--begleitung .schritt::before{top:4px}
}

.intro{margin-top:clamp(30px,4vw,48px);background:#fff;border:2px solid var(--lila);border-radius:22px;
  padding:clamp(24px,3.4vw,38px);display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;position:relative;overflow:hidden}
.intro::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,var(--lila),var(--gruen))}
.intro h3{font-size:clamp(21px,2.4vw,28px);text-transform:uppercase;color:var(--lila)}
.intro p{color:var(--grau);margin:10px 0 0;max-width:58ch}
.intro .btn{white-space:nowrap}
@media (max-width:760px){.intro{grid-template-columns:1fr}}

/* Quiz */
.quiz{background:#fff;border:1px solid var(--linie);border-radius:22px;padding:clamp(24px,3.4vw,40px);box-shadow:var(--schatten);max-width:760px;margin-inline:auto}
.quiz__fortschritt{height:6px;border-radius:99px;background:var(--linie);overflow:hidden;margin-bottom:26px}
.quiz__fortschritt span{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--lila),var(--gruen));transition:width .3s}
.quiz__frage{font-size:clamp(20px,2.4vw,26px);font-weight:900;color:var(--tinte);margin-bottom:20px;line-height:1.15}
.quiz__optionen{display:grid;gap:12px}
.quiz__opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:2px solid var(--linie);
  border-radius:14px;padding:16px 18px;font:inherit;font-weight:600;color:var(--tinte);cursor:pointer;transition:.18s}
".quiz__opt:hover{border-color:var(--lila);background:var(--lila-hell);transform:translateX(3px)}
.quiz__opt[aria-pressed="true"]{border-color:var(--lila);background:var(--lila-hell)}
.quiz__opt .haken{margin-left:auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--linie);display:grid;place-items:center;
  font-size:13px;color:#fff;background:#fff;flex:none;transition:.15s}
.quiz__opt[aria-pressed="true"] .haken{background:var(--lila);border-color:var(--lila)}
.quiz__hinweis{font-size:13px;color:var(--grau);margin:-8px 0 16px}
.quiz__weiter{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quiz__opt em{font-style:normal;font-size:20px}
.quiz__zurueck{margin-top:18px;background:none;border:0;color:var(--grau);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
.quiz__ergebnis{display:none}
.quiz.is-fertig .quiz__schritt{display:none}
.quiz.is-fertig .quiz__ergebnis{display:block;animation:auf .4s ease}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quiz__ergebnis .box{background:var(--gruen-hell);border:1px solid rgb(93 215 88 / .4);border-radius:16px;padding:24px;margin-bottom:22px}
.quiz__ergebnis h3{color:var(--gruen-dunkel);margin-bottom:8px}
.quiz__cta{display:flex;flex-wrap:wrap;gap:12px}

/* Bewertungen als Slider */
.bewertung__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 26px;margin-bottom:30px}
.note{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--linie);border-radius:999px;padding:12px 24px 12px 20px;box-shadow:var(--schatten)}
.note b{font-size:30px;line-height:1;color:var(--tinte);font-weight:900}
.note .sterne{font-size:16px;display:block}
.note span.klein{font-size:12.5px;color:var(--grau);display:block;margin-top:2px}
.note .g{width:26px;height:26px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-weight:900;color:var(--lila);font-size:15px}
.slider{position:relative}
.spur{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.spur::-webkit-scrollbar{display:none}
.spur .stimme{flex:0 0 min(420px,86%);scroll-snap-align:start}
.stimme{background:#fff;border:1px solid var(--linie);border-radius:var(--r);
  padding:28px 28px 24px;display:flex;flex-direction:column;position:relative}
.stimme::before{content:"”";position:absolute;top:6px;right:22px;font-size:80px;line-height:1;color:var(--lila-hell);font-weight:900}
.stimme .sterne{margin-bottom:12px;position:relative}
.stimme blockquote{margin:0 0 18px;font-size:16.5px;color:var(--text);position:relative}
.stimme figcaption{margin-top:auto;font-size:13.5px;color:var(--grau);display:flex;align-items:center;gap:12px}
.stimme figcaption .av{width:42px;height:42px;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center;font-weight:900;font-size:16px;flex:none}
.stimme figcaption b{color:var(--tinte);display:block;font-size:15px}
.stimme--solo{max-width:760px;margin:clamp(30px,4vw,46px) auto 0;text-align:left;background:#fff;
  border:1px solid var(--linie);border-radius:22px;padding:clamp(26px,3vw,36px)}
.stimme--solo blockquote{font-size:17.5px;line-height:1.6}
.stimme--solo figcaption{margin-top:6px}
.slider__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.snav{width:46px;height:46px;border-radius:50%;border:2px solid var(--linie);background:#fff;cursor:pointer;color:var(--tinte);
  font-size:17px;display:grid;place-items:center;transition:.15s}
.snav:hover{border-color:var(--lila);color:var(--lila)}
.snav:disabled{opacity:.35;cursor:default}
.slider__punkte{display:none;gap:8px;justify-content:center;margin-top:2px}
.slider__punkte button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--linie);cursor:pointer;
  transition:background .2s,width .2s}
.slider__punkte button[aria-current="true"]{background:var(--lila);width:22px;border-radius:999px}
.wischhinweis{display:none;font-size:13px;color:var(--grau);text-align:center;margin:0 0 6px}
.wischhinweis span{display:inline-block;animation:wisch 1.8s ease-in-out infinite}
@keyframes wisch{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.wischhinweis span{animation:none}}
@media (max-width:700px){
  .bewertung__kopf{justify-content:flex-start}
  .slider__nav{display:none}
  .slider__punkte{display:flex}
  .wischhinweis{display:block}
  /* Anschnitt der naechsten Karte zeigt, dass es weitergeht */
  .spur .stimme{flex:0 0 82%}
}

/* Über mich */
.ueber{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(26px,5vw,56px);align-items:center}
.ueber__bild{border-radius:22px;overflow:hidden;box-shadow:var(--schatten-stark);align-self:center}
/* height:auto ist nötig, sonst gewinnt das height-Attribut im HTML und das Bild wird zu lang */
.ueber__bild img{aspect-ratio:4/5;height:auto;max-height:480px;object-fit:cover;object-position:center 20%;width:100%}
.ueber ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px}
.ueber li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.ueber li::before{content:"✓";color:var(--gruen-dunkel);font-weight:900;flex:none}
@media (max-width:800px){.ueber{grid-template-columns:1fr}.ueber__bild{max-width:380px;margin-inline:auto}}
@media (max-width:560px){.ueber__bild{max-width:250px}.ueber__bild img{max-height:310px}}

/* Abschluss-CTA */
.final{position:relative;color:#fff;text-align:center;overflow:hidden;background:var(--lila)}
.final::before{content:"";position:absolute;inset:0;background:url(../img/cta-boxing-1600.webp) center/cover;opacity:.22}
.final .wrap{position:relative}
.final h2{color:#fff}
.final p{color:rgb(255 255 255 / .9);max-width:58ch;margin-inline:auto}
.final .btn{margin-top:26px}

/* Fußzeile */
footer{background:var(--sand);color:var(--text);font-size:15px;border-top:1px solid var(--linie);padding-block:clamp(48px,6vw,76px) 0}
footer a{color:var(--text);text-decoration:none;transition:color .15s}
footer a:hover{color:var(--lila)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,48px)}
.foot h3{color:var(--lila);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot .marke{color:var(--lila);font-size:20px}
.foot__text{margin:18px 0 0;max-width:34ch;color:var(--grau);font-size:14.5px}
.foot__note{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:#fff;border:1px solid var(--linie);
  border-radius:999px;padding:10px 18px;font-size:13.5px;line-height:1;color:var(--grau);box-shadow:0 8px 22px rgb(36 31 38 / .05)}
.foot__note b{color:var(--tinte);font-size:15px;line-height:1}
.foot__note .sterne{font-size:13px;line-height:1;letter-spacing:1.5px;margin-right:-1.5px;display:inline-block}
.foot__kontakt li{display:flex;gap:10px;align-items:flex-start;color:var(--grau)}
.foot__kontakt svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--lila);fill:none;stroke-width:1.8}
.foot__kontakt a{font-weight:600;color:var(--tinte)}
.foot__pille{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:#fff;border:1px solid var(--linie);
  border-radius:999px;padding:10px 16px;font-size:13.5px;line-height:1;font-weight:600;color:var(--tinte);
  box-shadow:0 8px 22px rgb(36 31 38 / .05);transition:.15s}
.foot__pille:hover{border-color:var(--lila);color:var(--lila);text-decoration:none}
.foot__pille b{color:var(--lila)}
.foot__cta{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:24px}
.foot__cta p{font-size:14.5px;color:var(--grau);margin:8px 0 16px}
.foot__cta .btn{width:100%}
.foot__unten{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--linie);padding-block:20px 24px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px;color:var(--grau)}
.foot__recht{display:flex;flex-wrap:wrap;gap:8px}
.foot__recht a{background:#fff;border:1px solid var(--linie);border-radius:999px;padding:7px 15px;font-weight:600;color:var(--tinte);font-size:13px}
.foot__recht a:hover{border-color:var(--lila);color:var(--lila)}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child,.foot__cta{grid-column:1/-1}}
@media (max-width:520px){.foot{grid-template-columns:1fr}.foot__unten{flex-direction:column;align-items:flex-start}}

/* ── Unterseiten ─────────────────────────────────────────── */
.sub{padding-block:clamp(26px,4vw,48px) clamp(40px,5vw,68px)}
/* Gleiche Aufteilung wie der Hero der Startseite – sonst wirken Start- und
   Unterseiten unterschiedlich gebaut. Bildspalte behaelt ihre Mindestbreite. */
.sub__grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:clamp(26px,5vw,54px);align-items:center}
.sub__grid>*{min-width:0}
/* Silbentrennung nur dort, wo sie wirklich gebraucht wird. Auf dem Desktop
   zerlegte sie sonst Titel mitten im Wort ("PRAE- & POSTNA-TALES"). */
.sub h1{overflow-wrap:break-word;hyphens:manual}
/* Eine Stufe unter der Startseite. Vorher 64px in einer schmaleren Spalte
   als dort - lange Titel liefen dadurch ueber vier Zeilen. */
.sub__grid h1{font-size:clamp(32px,4.2vw,52px)}

/* Seitenkopf ruhiger staffeln: eine leise Orientierungszeile, dann eng
   zusammengebunden Zeile + Überschrift, dann ein Satz. Vorher standen vier
   Textblöcke in vier Größen mit gleich viel Luft dazwischen – das wirkt
   zerfasert, weil nichts erkennbar zusammengehört. */
.sub .krume{margin-bottom:clamp(20px,3vw,30px)}
.sub .kicker{margin-bottom:8px;font-size:12px;letter-spacing:.16em;opacity:.9}
.sub .lead{margin-top:clamp(12px,1.6vw,18px);line-height:1.5;max-width:54ch}
.sub .hero__cta{margin-top:clamp(22px,3vw,32px)}

/* Kopf ohne Bild (Blog, Impressum, Datenschutz): dort trägt die Überschrift
   oft nur ein kurzes Wort und darf deutlich kleiner sein. */
.sub > .wrap:not(.sub__grid) h1{font-size:clamp(32px,4.4vw,46px)}
.sub > .wrap:not(.sub__grid) .lead{max-width:50ch}
.sub__bild{border-radius:22px;overflow:hidden;box-shadow:var(--schatten-stark)}
.sub__bild img{width:100%;height:auto;aspect-ratio:2/3;max-height:660px;object-fit:cover;object-position:center 28%}
.krume{font-size:13px;color:var(--grau);margin-bottom:18px}
.krume a{color:var(--grau);text-decoration:none}
.krume a:hover{color:var(--lila)}
@media (max-width:860px){.sub__grid{grid-template-columns:1fr}.sub__bild{order:-1;max-width:460px;margin-inline:auto}}

/* Probleme / Aufhänger */
.probleme{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:clamp(30px,4vw,46px)}
.problem{background:#fff;border:1px dashed var(--linie);border-radius:14px;padding:18px 20px;font-weight:700;color:var(--tinte);
  display:flex;gap:12px;align-items:center;font-size:16px}
.problem em{font-style:normal;font-size:19px}

/* Vorteile */
.vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
@media (max-width:960px){.vorteile{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vorteile{grid-template-columns:1fr}}
.vorteil{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:26px 24px;transition:transform .25s,box-shadow .25s}
.vorteil:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.vorteil .ic{width:44px;height:44px;border-radius:12px;background:var(--lila-hell);display:grid;place-items:center;margin-bottom:16px;font-size:20px}
.vorteil h3{font-size:18px;margin-bottom:8px}
.vorteil p{font-size:15px;color:var(--grau);margin:0}
.vorteil--gruen .ic{background:var(--gruen-hell)}

/* Passt-zu-dir-Liste */
.passt{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.passt li{list-style:none;background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gruen);border-radius:12px;
  padding:18px 22px;font-size:16px;color:var(--text)}
.passt li b{color:var(--tinte)}
.passt-wrap{padding:0;margin:0}

/* Infokasten (Termine, Preise) */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:var(--linie);
  border:1px solid var(--linie);border-radius:18px;overflow:hidden}
.info div{background:#fff;padding:24px}
.info dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lila);font-weight:800;margin-bottom:8px}
.info dd{margin:0;font-size:17px;color:var(--tinte);font-weight:700;line-height:1.4}
.info dd small{display:block;font-weight:500;color:var(--grau);font-size:14px;margin-top:4px}

/* Phasen (Gesundheitskonzept) */
.phasen{display:grid;gap:16px;counter-reset:ph}
.phase{display:grid;grid-template-columns:auto 1fr;gap:20px;background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:24px}
.phase::before{counter-increment:ph;content:counter(ph);width:44px;height:44px;border-radius:50%;background:var(--lila);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:18px}
.phase h3{font-size:19px;margin-bottom:6px}
.phase p{margin:0;font-size:15.5px;color:var(--grau)}

/* Kassen-Hinweis */
.kasse{display:flex;gap:16px;align-items:flex-start;background:var(--gruen-hell);border:1px solid rgb(93 215 88 / .45);
  border-radius:18px;padding:22px 24px;margin-top:clamp(26px,3vw,38px)}
.kasse em{font-style:normal;font-size:24px;line-height:1}
.kasse b{display:block;color:var(--tinte);margin-bottom:4px}
.kasse p{margin:0;font-size:15px;color:var(--text)}

/* Weitere Angebote */
.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.weiter a{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--linie);border-radius:var(--r);
  padding:16px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.weiter a:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.weiter img{width:76px;height:96px;border-radius:12px;object-fit:cover;flex:none}
.weiter b{display:block;color:var(--tinte);font-size:16.5px}
.weiter span{font-size:14px;color:var(--grau)}

/* ── Text + Bild nebeneinander ───────────────────────────── */
.text-bild{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:clamp(26px,5vw,56px);align-items:center}
.text-bild .sub__bild img{aspect-ratio:2/3;max-height:560px}
@media (max-width:860px){.text-bild{grid-template-columns:1fr}.text-bild .sub__bild{max-width:420px;margin-inline:auto}
  .text-bild--um .sub__bild{order:-1}}
.zitat{margin:26px 0 0;padding:18px 0 18px 22px;border-left:4px solid var(--gruen);font-family:var(--font);
  font-size:clamp(18px,2.2vw,22px);font-weight:700;color:var(--tinte);line-height:1.35}

/* ── Kontaktliste ────────────────────────────────────────── */
.kontaktliste{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:18px}
.kontaktliste li{display:flex;gap:14px;align-items:flex-start}
.kontaktliste svg{width:22px;height:22px;flex:none;margin-top:3px;stroke:var(--lila);fill:none;stroke-width:1.7}
.kontaktliste b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:3px}
.kontaktliste a{color:var(--tinte);font-weight:700;text-decoration:none;font-size:17px}
.kontaktliste a:hover{color:var(--lila)}
.kontaktliste small{color:var(--grau)}

/* ── Kontaktseite ────────────────────────────────────────── */
.kontaktseite{padding-block:clamp(26px,4vw,48px) clamp(40px,5vw,70px)}
.kontakt__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.kontakt__grid{grid-template-columns:1fr}}
.kontaktseite .form{max-width:none;margin:0}
.kontaktseite h1{font-size:clamp(28px,3.4vw,42px);text-transform:none;letter-spacing:-.02em;margin-bottom:10px}
.form__intro{color:var(--grau);font-size:16.5px;margin-bottom:26px;max-width:52ch}
.kontakt__seite{position:sticky;top:96px;display:grid;gap:22px}
.kontakt__karte{display:flex;gap:14px;align-items:center;background:var(--lila-hell);border-radius:18px;padding:18px}
.kontakt__karte img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.kontakt__karte b{display:block;font-size:16px;color:var(--tinte)}
.kontakt__karte span{font-size:14px;color:var(--grau);line-height:1.45}
.kontakt__seite .kontaktliste{margin:0}
.kontakt__google{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--linie);
  border-radius:999px;padding:10px 18px;font-size:13.5px;line-height:1;color:var(--grau);text-decoration:none;
  box-shadow:0 8px 22px rgb(36 31 38 / .05);width:max-content}
.kontakt__google b{color:var(--tinte);font-size:15px}
.kontakt__google:hover{border-color:var(--lila)}
@media (max-width:900px){.kontakt__seite{position:static}}

/* ── Formular ────────────────────────────────────────────── */
.form{max-width:760px;margin-inline:auto;background:#fff;border:1px solid var(--linie);border-radius:22px;
  padding:clamp(24px,3.4vw,40px);box-shadow:var(--schatten)}
.form__reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form__reihe{grid-template-columns:1fr}}
.form label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin-bottom:16px}
.form label small{text-transform:none;letter-spacing:0;font-weight:500}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:7px;font:400 16px/1.5 var(--font);
  color:var(--tinte);background:#fff;border:1.5px solid var(--linie);border-radius:12px;padding:12px 14px;
  letter-spacing:0;text-transform:none;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--lila);box-shadow:0 0 0 3px rgb(117 46 107 / .12)}
.form textarea{resize:vertical;min-height:140px}
.form label.form__check{display:flex;gap:12px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:14.5px;
  font-weight:400;color:var(--text);line-height:1.5;margin-bottom:20px}
.form label.form__check input{display:inline-block;width:20px;height:20px;min-width:20px;margin:2px 0 0;padding:0;
  flex:none;accent-color:var(--lila);border-radius:5px}
.form label.form__check a{color:var(--lila)}
.form__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
.form__hinweis{margin:0;font-size:13px;color:var(--grau);max-width:40ch}
.form__meldung{margin:18px 0 0;padding:14px 18px;border-radius:12px;font-weight:600;font-size:15px}
.form__meldung.ok{background:var(--gruen-hell);color:var(--gruen-dunkel);border:1px solid rgb(93 215 88 / .45)}
.form__meldung.fehler{background:#FDEEEC;color:#A4403A;border:1px solid #F3C9C4}
.hp{position:absolute;left:-9999px}

/* ── Video ───────────────────────────────────────────────── */
.videoblock{margin:clamp(26px,3.4vw,40px) 0 0;max-width:860px}
.videoblock video{width:100%;display:block;border-radius:20px;background:#000;box-shadow:var(--schatten);aspect-ratio:16/9;object-fit:cover}
.videoblock figcaption{margin-top:14px;font-size:15px;color:var(--grau)}
.videoblock figcaption b{display:block;color:var(--tinte);font-size:16.5px;margin-bottom:3px}
.videoblock__text{margin:0}

/* ── Rechtstexte ─────────────────────────────────────────── */
.recht h1{margin-bottom:26px}
.recht h2{font-size:clamp(19px,2vw,23px);text-transform:none;letter-spacing:-.01em;margin:36px 0 12px}
.recht p{max-width:76ch;color:var(--text)}
.recht .lead{margin-bottom:10px}

/* Einblenden beim Scrollen (dezent) */
.js .rv{opacity:0;translate:0 22px;transition:opacity .6s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.is-in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none;transition:none}html{scroll-behavior:auto}}


/* ══ Blog-Modul (seeberger studio) ══ nutzt die Farbvariablen der Kundenseite */
.blogliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2.4vw,26px)}
.blogkarte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.blogkarte:hover{transform:translateY(-4px);box-shadow:var(--schatten-stark)}
.blogkarte__bild{aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
.blogkarte__bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blogkarte:hover .blogkarte__bild img{transform:scale(1.04)}
.blogkarte__text{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.blogkarte__meta{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin-bottom:10px}
.blogkarte h2{font-size:clamp(20px,2.1vw,24px);text-transform:none;letter-spacing:-.01em;margin-bottom:10px}
.blogkarte p{font-size:15.5px;color:var(--grau);margin-bottom:18px}
.blogkarte .ang__mehr{margin-top:auto}
.blogkarte--gross{grid-column:1/-1;flex-direction:row}
.blogkarte--gross .blogkarte__bild{flex:0 0 46%;aspect-ratio:4/3;max-height:420px}
.blogkarte--gross .blogkarte__text{justify-content:center;padding:clamp(24px,3vw,40px)}
.blogkarte--gross h2{font-size:clamp(24px,2.8vw,32px)}
@media (max-width:760px){.blogkarte--gross{flex-direction:column}.blogkarte--gross .blogkarte__bild{flex:none;aspect-ratio:3/2}}

.beitrag{padding-block:clamp(26px,4vw,44px) clamp(40px,5vw,70px)}
.beitrag__kopf{margin-bottom:clamp(26px,3.4vw,40px)}
.beitrag__kopf--bild{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:clamp(24px,4vw,46px);align-items:center}
.beitrag__kopf h1{font-size:clamp(26px,3.1vw,38px);line-height:1.14;text-transform:none;letter-spacing:-.02em;max-width:20ch}
.beitrag__meta{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin:0 0 12px}
.beitrag__anriss{font-size:clamp(16.5px,1.7vw,18.5px);color:var(--grau);margin:14px 0 0;max-width:50ch}
.beitrag__bild{margin:0;border-radius:20px;overflow:hidden;background:var(--sand);box-shadow:var(--schatten)}
.beitrag__bild img{width:100%;height:auto;aspect-ratio:4/3;max-height:340px;object-fit:cover;object-position:center 25%;display:block}
@media (max-width:820px){.beitrag__kopf--bild{grid-template-columns:1fr}.beitrag__bild{order:-1}
  .beitrag__bild img{aspect-ratio:16/9;max-height:260px}}

.beitrag__raster{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.beitrag__raster--ohne{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.beitrag__raster{grid-template-columns:1fr}}

/* Sprungleiste */
.sprung{position:sticky;top:96px;border-left:2px solid var(--linie);padding-left:18px}
.sprung__titel{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau);font-weight:800;margin:0 0 14px}
.sprung nav{display:grid;gap:11px}
.sprung a{font-size:14.5px;line-height:1.35;color:var(--grau);text-decoration:none;transition:color .15s,transform .15s}
.sprung a:hover{color:var(--lila)}
.sprung a.is-hier{color:var(--lila);font-weight:700;transform:translateX(2px)}
@media (max-width:900px){
  .sprung{position:static;border-left:0;padding:18px 20px;background:#fff;border:1px solid var(--linie);border-radius:16px;margin-bottom:26px}
  .sprung nav{grid-template-columns:1fr 1fr;display:grid;gap:10px 18px}
}

.beitrag__text{max-width:70ch;font-size:17.5px;line-height:1.75}
.beitrag__text h2{font-size:clamp(22px,2.4vw,28px);text-transform:none;letter-spacing:-.01em;margin:42px 0 12px;scroll-margin-top:100px}
.beitrag__text h3{font-size:20px;margin:30px 0 10px;scroll-margin-top:100px}
.beitrag__text p{margin-bottom:1.1em}
.beitrag__text ul,.beitrag__text ol{margin:0 0 1.2em 1.2em;display:grid;gap:8px}
.beitrag__text blockquote{margin:28px 0;padding:18px 0 18px 22px;border-left:4px solid var(--gruen);
  font-size:19px;font-weight:600;color:var(--tinte)}
.beitrag__text hr{border:0;border-top:1px solid var(--linie);margin:34px 0}
.beitrag__text a{color:var(--lila);text-underline-offset:3px}

/* Aufklappbare Fragen */
.faq{display:grid;gap:10px;margin:22px 0 30px}
.faq__punkt{background:#fff;border:1px solid var(--linie);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq__punkt[open]{border-color:var(--lila);box-shadow:var(--schatten)}
.faq__punkt summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-weight:700;font-size:17px;
  color:var(--tinte);position:relative}
.faq__punkt summary::-webkit-details-marker{display:none}
.faq__punkt summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2.5px solid var(--lila);border-bottom:2.5px solid var(--lila);transform:rotate(45deg);transition:transform .25s}
.faq__punkt[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq__punkt summary:hover{color:var(--lila)}
.faq__antwort{padding:0 22px 20px;font-size:16.5px;line-height:1.7;color:var(--text)}
.faq__antwort p:last-child{margin-bottom:0}

.blog__bild{margin:28px 0}
.blog__bild img{width:100%;border-radius:16px}
.blog__bild figcaption{font-size:13.5px;color:var(--grau);margin-top:8px}

/* ── Zurück nach oben ─────────────────────────────────────── */
.hoch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:55;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:var(--lila);color:#fff;
  font-size:19px;line-height:1;display:grid;place-items:center;box-shadow:0 10px 26px rgb(36 31 38 / .28);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s,transform .22s,visibility 0s .22s}
.hoch.is-da{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hoch:hover,.hoch:focus-visible{background:var(--lila-dunkel)}
@media (prefers-reduced-motion:reduce){.hoch{transition:none}}

/* Unterseiten-Hero auf dem Handy: steht hier am Ende, weil die Grundregel
   fuer .sub__bild img weiter oben sonst die Hoehe zurueckgewinnt. */
@media (max-width:560px){
  .sub__bild{max-width:none;margin-inline:0}
  .sub__bild img{aspect-ratio:4/5;max-height:none;object-position:center 22%}
}

/* Überschriften nie trennen: mobil schrumpft die Schrift so weit, dass das
   längste Wort (--lw Buchstaben, setzt der Generator) in eine Zeile passt. */
@media (max-width:560px){.sub h1,.sub > .wrap:not(.sub__grid) h1{hyphens:manual;font-size:min(32px,calc((100vw - 2 * var(--pad)) / (var(--lw,12) * .74)))}}