/* =========================================================
   Nadine Thiessenhusen · Kinesiologie & Energiebehandlung
   Ein Stylesheet für alle Seiten. Keine externen Requests.
   ========================================================= */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  /* Markenfarben (Kommunikationsstrategie, S. 9) */
  --creme:#F7F3EA;
  --creme-2:#EFE8DA;
  --hellblau:#CFE7F2;
  --waldgruen:#2F5D46;
  --waldgruen-hell:#3B7058;
  --salbei:#A8BFA3;
  --braun:#8A6A4F;
  --braun-text:#77593F;  /* dunkler für Textkontrast ≥ 4.5:1 */
  --sand:#D8C6AD;
  --tief:#263B32;
  --text:#263B32;
  --text-2:#4E6158;
  --linie:rgba(38,59,50,.14);

  --serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --r-s:12px;--r-m:22px;--r-l:36px;
  --bogen:999px 999px 28px 28px;           /* Signatur: der geschützte Bogen */
  --schatten:0 1px 2px rgba(38,59,50,.06),0 12px 40px -12px rgba(38,59,50,.22);
  --max:1200px;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.22,.8,.2,1);
  /* Abstandsraster: ein Abstand zwischen allen Abschnitten */
  --abschnitt:clamp(64px,8vw,112px);
  --halb:calc(var(--abschnitt) / 2);
  --kopf-inhalt:clamp(1.75rem,3vw,2.5rem);   /* Überschrift -> Inhalt */
  /* Zeilenabstände nach Schema */
  --lh-titel:1.15;   /* Überschriften, Titel */
  --lh-zitat:1.4;    /* große Serifentexte, Zitate */
  --lh-lead:1.6;     /* Einleitungstexte */
  --lh-text:1.7;     /* Fließtext */
  --lh-klein:1.5;    /* kleine Hinweise, Bedienelemente */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{margin:0;background:var(--creme);color:var(--text);font:400 1.0625rem/var(--lh-text) var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{/* feine Papierstruktur */content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:var(--waldgruen);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--tief)}
:focus-visible{outline:2px solid var(--waldgruen);outline-offset:3px;border-radius:6px}
::selection{background:var(--salbei);color:var(--tief)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:var(--lh-titel);letter-spacing:-.015em;margin:0 0 .5em;color:var(--tief);font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);letter-spacing:-.025em}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:clamp(1.35rem,2vw,1.65rem);font-variation-settings:"opsz" 36}
h1 em,h2 em,h3 em{font-style:italic;color:var(--waldgruen)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:var(--lh-lead);color:var(--text-2)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--braun-text);margin-bottom:1.3rem}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.klein{font-size:.92rem;color:var(--text-2)}
.center{text-align:center}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.schmal{max-width:760px}
section{padding-block:var(--halb)}   /* zwei Abschnitte zusammen = var(--abschnitt) */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--tief);color:#fff;padding:.6em 1em;border-radius:8px}
.skip:focus{left:8px}

/* ---------- Hinweisleiste Eröffnung ---------- */
.eroeffnung{background:var(--tief);color:var(--creme);font-size:.86rem;text-align:center;padding:.55rem var(--gutter);position:relative;z-index:2}
.eroeffnung strong{color:var(--hellblau);font-weight:600}
.eroeffnung a{color:var(--creme)}

/* ---------- Kopfbereich ---------- */
.kopf{position:sticky;top:0;z-index:50;transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s}
.kopf.scrolled{background:rgba(247,243,234,.86);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 1px 0 var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:84px}
.marke{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--tief)}
.marke svg{width:42px;height:42px;flex:none}
.marke span{display:flex;flex-direction:column;line-height:var(--lh-titel)}
.marke b{font:500 1.18rem/var(--lh-titel) var(--serif);letter-spacing:-.01em}
.marke small{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--braun-text)}
.nav{display:flex;align-items:center;gap:.3rem}
.nav a{position:relative;text-decoration:none;color:var(--tief);font-size:.95rem;padding:.55rem .8rem;border-radius:99px;transition:background .3s}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(168,191,163,.28)}
.nav .btn{margin-left:.6rem;color:var(--creme)}
.nav .btn:hover{background:var(--waldgruen);color:var(--creme)}
.menu-btn{display:none;background:none;border:0;width:48px;height:48px;border-radius:50%;cursor:pointer;color:var(--tief)}
.menu-btn span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px auto;transition:transform .35s var(--ease),opacity .2s}
.menu-offen .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-offen .menu-btn span:nth-child(2){opacity:0}
.menu-offen .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:1140px){
  .menu-btn{display:block;position:relative;z-index:60}
  .nav{position:fixed;inset:0;z-index:55;flex-direction:column;justify-content:center;gap:.4rem;background:var(--creme);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .nav a{font:400 1.7rem/var(--lh-titel) var(--serif);padding:.5rem 1.2rem}
  .nav .btn{margin:1.2rem 0 0;font:600 1rem/1 var(--sans)}
  .menu-offen .nav{opacity:1;visibility:visible}
  .menu-offen{overflow:hidden}
}

/* ---------- Buttons ---------- */
.btn{--bg:var(--waldgruen);--fg:var(--creme);position:relative;display:inline-flex;align-items:center;gap:.8rem;padding:.95rem 1.1rem .95rem 1.5rem;border-radius:99px;background:var(--bg);color:var(--fg);font:600 .98rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 10px 30px -12px rgba(47,93,70,.7)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tief);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn:hover{color:var(--fg);transform:translateY(-2px)}
.btn:hover::before{transform:scaleX(1)}
.btn .pfeil{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(247,243,234,.16);transition:transform .45s var(--ease)}
.btn:hover .pfeil{transform:translateX(3px) rotate(-45deg)}
.btn .pfeil svg{width:14px;height:14px}
.btn.hell{--bg:var(--creme);--fg:var(--tief);box-shadow:none}
.btn.hell::before{background:var(--hellblau)}
.btn.hell .pfeil{background:rgba(38,59,50,.08)}
.btn.klein{padding:.7rem .9rem .7rem 1.2rem;font-size:.9rem}
.btn.klein .pfeil{width:24px;height:24px}
.link-pfeil{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;text-decoration:none;color:var(--waldgruen)}
.link-pfeil::after{content:"→";transition:transform .35s var(--ease)}
.link-pfeil:hover::after{transform:translateX(4px)}
.cta-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2rem}
.mikro{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:1.1rem;font-size:.88rem;line-height:var(--lh-klein);color:var(--text-2);padding:0;list-style:none}
.mikro li{display:flex;align-items:center;gap:.4rem}
.mikro li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:rgba(168,191,163,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%232F5D46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* ---------- Hero ---------- */
.hero{padding-block:var(--halb);position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 .zeile{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .zeile > span{display:inline-block;animation:hochgleiten 1.2s var(--ease) both}
.hero h1 .zeile:nth-child(2) > span{animation-delay:.14s}
@keyframes hochgleiten{from{transform:translateY(105%)}to{transform:none}}
.hero .lead{max-width:34ch;animation:einblenden 1.2s .35s var(--ease) both}
.hero .ort{font:italic 400 1.25rem/var(--lh-zitat) var(--serif);color:var(--braun-text);margin:1.3rem 0 0;animation:einblenden 1.2s .5s var(--ease) both}
.hero .cta-zeile,.hero .mikro{animation:einblenden 1.2s .65s var(--ease) both}
@keyframes einblenden{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-bild{position:relative;aspect-ratio:4/5;max-height:78vh;justify-self:end;width:100%;max-width:520px}
.hero-bild .bogen{position:absolute;inset:0;border-radius:var(--bogen);overflow:hidden;box-shadow:var(--schatten)}
@keyframes bogenauf{from{clip-path:inset(100% 0 0 0 round 999px 999px 28px 28px)}to{clip-path:inset(0 0 0 0 round 999px 999px 28px 28px)}}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.12);animation:atmen 22s ease-in-out infinite alternate}
@keyframes atmen{from{transform:scale(1.12)}to{transform:scale(1.2) translate(-2%,-1%)}}
.schwebe{position:absolute;left:-12%;bottom:9%;background:rgba(247,243,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r-m);padding:1rem 1.2rem;box-shadow:var(--schatten);max-width:250px;display:flex;gap:.8rem;align-items:flex-start;animation:schweben 6s ease-in-out infinite,einblenden 1s 1.1s var(--ease) both}
.schwebe .punkt{flex:none;width:10px;height:10px;margin-top:.45rem;border-radius:50%;background:var(--waldgruen);}
.schwebe p{margin:0;font-size:.9rem;line-height:var(--lh-klein)}
.schwebe b{display:block;font:500 1.02rem/var(--lh-titel) var(--serif)}
@keyframes schweben{50%{transform:translateY(-8px)}}
@keyframes puls{70%{box-shadow:0 0 0 10px rgba(47,93,70,0)}100%{box-shadow:0 0 0 0 rgba(47,93,70,0)}}
.licht{position:absolute;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(600px 400px at var(--mx,70%) var(--my,30%),rgba(207,231,242,.55),transparent 70%)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-bild{justify-self:center;max-width:420px;order:-1;max-height:none;aspect-ratio:5/5.4}
  .schwebe{left:auto;right:-4px;bottom:-22px;max-width:230px}
}


/* ---------- Wegweiser ---------- */
.wegweiser{background:linear-gradient(180deg,transparent,rgba(207,231,242,.38) 30%,rgba(207,231,242,.38) 70%,transparent)}
.wahl{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:var(--kopf-inhalt)}
.wahl button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:.6rem;padding:1.4rem 1.3rem;border-radius:var(--r-m);background:rgba(247,243,234,.85);border:1px solid var(--linie);transition:transform .4s var(--ease),border-color .3s,background .3s,box-shadow .4s}
.wahl button:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.wahl button:focus-visible{outline:2px solid var(--waldgruen);outline-offset:3px}
.wahl button[aria-pressed="true"]{background:var(--waldgruen);color:var(--creme);border-color:var(--waldgruen)}
.wahl button[aria-pressed="true"] .wahl-t{color:var(--creme)}
.wahl .symbol{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(168,191,163,.35);transition:background .3s}
.wahl button[aria-pressed="true"] .symbol{background:rgba(247,243,234,.18)}
.wahl .symbol svg{width:22px;height:22px}
.wahl-t{font:500 1.2rem/var(--lh-titel) var(--serif);color:var(--tief)}
.wahl small{font-size:.87rem;opacity:.8;line-height:var(--lh-klein)}
.antwort{margin-top:1.4rem;border-radius:var(--r-l);background:var(--creme);border:1px solid var(--linie);padding:clamp(1.6rem,4vw,2.8rem);display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;box-shadow:var(--schatten)}
.antwort[hidden]{display:none}
.antwort.neu{animation:einblenden .7s var(--ease) both}
.antwort p.zitat{font:italic 400 clamp(1.3rem,2.2vw,1.7rem)/var(--lh-zitat) var(--serif);color:var(--tief);margin-bottom:.6em}
.antwort .aktionen{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
@media (max-width:900px){.wahl{grid-template-columns:1fr 1fr}.antwort{grid-template-columns:1fr}}
@media (max-width:480px){.wahl button{padding:1.1rem 1rem}.wahl-t{font-size:1.05rem}.wahl small{display:none}}

/* ---------- Split / Mission ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split.umgekehrt > :first-child{order:2}
.bogenbild{border-radius:var(--bogen);overflow:hidden;box-shadow:var(--schatten);aspect-ratio:4/5}
.bogenbild img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.bogenbild:hover img{transform:scale(1.15)}
.vision{font:italic 300 clamp(1.6rem,3.3vw,2.6rem)/var(--lh-zitat) var(--serif);color:var(--tief);letter-spacing:-.01em;margin:0 0 1.2em}
.vision::before{content:"„";display:block;font-size:3em;line-height:.6;color:var(--salbei);font-style:normal}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.umgekehrt > :first-child{order:0}.bogenbild{max-width:440px;margin-inline:auto}}

/* ---------- Schritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,32px);margin-top:var(--kopf-inhalt);position:relative;counter-reset:s}
.schritte::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:1px;background:var(--linie)}
.schritte::after{content:"";position:absolute;top:34px;left:12%;width:calc(76% * var(--p,0));height:1px;background:var(--waldgruen);transition:width .2s linear}
.schritt{position:relative;text-align:center;padding:0 .5rem}
.schritt .nr{position:relative;z-index:1;width:68px;height:68px;margin:0 auto 1.4rem;border-radius:50%;display:grid;place-items:center;background:var(--creme);border:1px solid var(--linie);font:400 1.6rem/1 var(--serif);color:var(--waldgruen);transition:background .5s,color .5s,border-color .5s}
.schritt.an .nr{background:var(--waldgruen);color:var(--creme);border-color:var(--waldgruen)}
.schritt.betont{background:rgba(207,231,242,.45);border-radius:var(--r-l);padding:1.6rem 1.2rem 1.2rem;margin-top:-1.6rem}
.schritt p{color:var(--text-2);max-width:32ch;margin-inline:auto}
@media (max-width:760px){.schritte{grid-template-columns:1fr;gap:1.2rem}.schritte::before,.schritte::after{display:none}.schritt{display:grid;grid-template-columns:56px 1fr;text-align:left;gap:1rem;align-items:start}.schritt .nr{width:56px;height:56px;margin:0;font-size:1.3rem}.schritt.betont{margin-top:0;padding:1.2rem}.schritt p{margin-inline:0}}

/* ---------- Karten (Angebote) ---------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:var(--kopf-inhalt)}
.karte{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:var(--r-l);background:rgba(255,255,255,.45);border:1px solid var(--linie);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.karte:hover{transform:translateY(-6px);box-shadow:var(--schatten);color:inherit}
.karte .bild{aspect-ratio:4/4.2;overflow:hidden;margin:10px 10px 0;border-radius:calc(var(--r-l) - 8px) calc(var(--r-l) - 8px) 14px 14px}
.karte:nth-child(2) .bild{border-radius:999px 999px 14px 14px}
.karte img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.karte:hover img{transform:scale(1.06)}
.karte .inhalt{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.karte h3{margin-bottom:.4rem}
.karte p{color:var(--text-2);font-size:.98rem;flex:1}
.karte .link-pfeil{margin-top:.4rem}
@media (max-width:900px){.karten{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---------- Atempause ---------- */
.atempause{background:var(--tief);color:var(--creme);border-radius:clamp(24px,4vw,48px);margin-inline:clamp(8px,2vw,24px);overflow:hidden;position:relative;padding-block:calc(var(--halb) * 1.5);margin-block:var(--halb)}
.atempause h2,.atempause h3{color:var(--creme)}
.atempause h2 em{color:var(--hellblau)}
.atempause p{color:rgba(247,243,234,.8)}
.atempause .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.atem{position:relative;width:min(380px,80vw);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center}
.atem .kreis{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(207,231,242,.55),rgba(168,191,163,.25) 60%,rgba(168,191,163,.05));box-shadow:0 0 80px rgba(207,231,242,.25);transform:scale(.72);transition:transform 4s cubic-bezier(.45,0,.55,1)}
.atem .hof{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(207,231,242,.25)}
.atem .hof.zwei{inset:9%;border-color:rgba(207,231,242,.15)}
.atem.ein .kreis{transform:scale(1)}
.atem.aus .kreis{transform:scale(.72);transition-duration:6s}
.atem .anzeige{position:relative;text-align:center;font:italic 400 1.5rem/var(--lh-zitat) var(--serif);color:var(--creme)}
.atem .anzeige small{display:block;font:500 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-top:.6rem;font-style:normal}
.atem-knopf{margin-top:1.6rem}
@media (max-width:860px){.atempause .wrap{grid-template-columns:1fr;text-align:center}.atempause .cta-zeile{justify-content:center}}

/* ---------- Preise ---------- */
.preisbox{border-radius:var(--r-l);background:var(--creme);border:1px solid var(--linie);padding:clamp(1.4rem,4vw,2.6rem);box-shadow:var(--schatten)}
.umschalter{display:inline-flex;padding:5px;border-radius:99px;background:var(--creme-2);border:1px solid var(--linie);position:relative}
.umschalter button{all:unset;cursor:pointer;position:relative;z-index:1;padding:.65rem 1.2rem;border-radius:99px;font-weight:600;font-size:.92rem;transition:color .35s}
.umschalter button:focus-visible{outline:2px solid var(--waldgruen)}
.umschalter button[aria-pressed="true"]{color:var(--creme)}
.umschalter .schieber{position:absolute;top:5px;bottom:5px;left:5px;border-radius:99px;background:var(--waldgruen);transition:transform .45s var(--ease),width .45s var(--ease)}
.summe{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:1.8rem 0 .4rem}
.summe .betrag{font:300 clamp(3.4rem,8vw,5.2rem)/1 var(--serif);color:var(--tief);letter-spacing:-.03em}
.aufschluesselung{list-style:none;padding:0;margin:1rem 0 0;border-top:1px solid var(--linie)}
.aufschluesselung li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--linie)}
.aufschluesselung li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.preistabelle{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem}
.preistabelle th,.preistabelle td{text-align:left;padding:1.1rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}
.preistabelle th{font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--braun-text)}
.preistabelle td:last-child,.preistabelle th:last-child{text-align:right;white-space:nowrap;font:400 1.5rem/1 var(--serif)}
.preistabelle th:last-child{font:600 .78rem/1 var(--sans)}
.preistabelle td b{font:500 1.15rem/var(--lh-titel) var(--serif)}
@media (max-width:560px){.preistabelle thead{display:none}.preistabelle td{display:block;padding:.2rem 0;border:0}.preistabelle tr{display:block;padding:1rem 0;border-bottom:1px solid var(--linie)}.preistabelle td:last-child{text-align:left;padding-top:.5rem}}
.hinweisbox{border-left:3px solid var(--salbei);background:rgba(168,191,163,.16);padding:1.2rem 1.4rem;border-radius:0 var(--r-s) var(--r-s) 0;margin:1.5rem 0}
.hinweisbox p:last-child{margin:0}

/* ---------- Über mich ---------- */
.stationen{list-style:none;padding:0;margin:1.6rem 0;display:grid;gap:.6rem}
.stationen li{display:flex;gap:.9rem;align-items:baseline;padding-bottom:.6rem;border-bottom:1px dashed var(--linie)}
.stationen li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--salbei);transform:translateY(-2px)}
.stationen li.heute{border-bottom:0;color:var(--tief)}
.stationen li.heute::before{background:var(--tief);box-shadow:0 0 0 4px rgba(168,191,163,.35)}
.portraet{position:relative}
.portraet figcaption{position:absolute;right:-8px;bottom:22px;background:var(--creme);border-radius:99px;padding:.6rem 1.1rem;box-shadow:var(--schatten);font:italic 400 1rem/var(--lh-titel) var(--serif)}

/* ---------- Teaser Impuls ---------- */
.impuls{display:grid;grid-template-columns:1fr 1.2fr;border-radius:var(--r-l);overflow:hidden;background:var(--hellblau);text-decoration:none;color:var(--tief);transition:transform .5s var(--ease),box-shadow .5s}
.impuls + .impuls{margin-top:clamp(1.5rem,3vw,2.5rem)}
.impuls:hover{transform:translateY(-4px);box-shadow:var(--schatten);color:var(--tief)}
.impuls .bild{min-height:280px;position:relative}
.impuls img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.impuls .inhalt{padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center}
.impuls h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
@media (max-width:760px){.impuls{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-suche{width:100%;max-width:520px;padding:1rem 1.2rem 1rem 3rem;border-radius:99px;border:1px solid var(--linie);background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%232F5D46' stroke-width='1.6'/%3E%3Cpath d='M16 16l4 4' stroke='%232F5D46' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 1.1rem center/20px no-repeat;font:inherit;color:inherit;margin:1rem 0 2rem}
.faq-gruppe{margin-bottom:2.6rem}
.faq-gruppe > h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.8rem}
details.frage{border-bottom:1px solid var(--linie)}
details.frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.25rem 0;font:400 clamp(1.1rem,1.6vw,1.28rem)/var(--lh-zitat) var(--serif);color:var(--tief)}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--linie);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%232F5D46' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .45s var(--ease),background-color .3s}
details.frage[open] summary::after{transform:rotate(135deg);background-color:rgba(168,191,163,.35)}
details.frage .antworttext{padding:0 3rem 1.3rem 0;color:var(--text-2)}
details.frage[open] .antworttext{animation:einblenden .5s var(--ease)}
.faq-leer{display:none;padding:1rem 0;color:var(--text-2)}

/* ---------- Ablauf-Zeitleiste ---------- */
.zeitleiste{position:relative;list-style:none;padding:0;margin:0}
.zeitleiste::before{content:"";position:absolute;left:27px;top:0;bottom:0;width:1px;background:var(--linie)}
.zeitleiste .fortschritt{position:absolute;left:27px;top:0;width:1px;background:var(--waldgruen);height:calc(100% * var(--p,0))}
.zeitleiste li{position:relative;padding:0 0 3rem 88px}
.zeitleiste li .nr{position:absolute;left:0;top:-4px;width:55px;height:55px;border-radius:50%;background:var(--creme);border:1px solid var(--linie);display:grid;place-items:center;font:400 1.3rem/1 var(--serif);color:var(--waldgruen);transition:all .5s var(--ease)}
.zeitleiste li.an .nr{background:var(--waldgruen);color:var(--creme);border-color:var(--waldgruen);transform:scale(1.06)}
.zeitleiste h3{margin-bottom:.6rem}
.zeitleiste p{color:var(--text-2)}
.zeitleiste .betont{background:rgba(207,231,242,.5);border-radius:var(--r-m);padding:1.4rem 1.5rem;margin-left:-1.5rem}
.zeitleiste .betont p{color:var(--text)}

/* ---------- Seitenkopf Unterseiten ---------- */
.seitenkopf{padding-block:var(--halb) 0}
.seitenkopf .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:end}
.seitenkopf h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.seitenkopf .bogenbild{max-width:340px;justify-self:end;width:100%}
.seitenkopf.ohne-bild .wrap{grid-template-columns:1fr}
@media (max-width:860px){.seitenkopf .wrap{grid-template-columns:1fr}.seitenkopf .bogenbild{justify-self:start;max-width:300px}}
.brotkrumen{font-size:.86rem;color:var(--text-2);margin-bottom:1.2rem}
.brotkrumen a{color:inherit}
.fliesstext{max-width:720px}
.fliesstext h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:2.2em}
.fliesstext h3{margin-top:1.8em}
.fliesstext .einstieg{font:italic 400 clamp(1.3rem,2.2vw,1.7rem)/var(--lh-zitat) var(--serif);color:var(--tief)}
.fliesstext blockquote{margin:2rem 0;padding:0 0 0 1.5rem;border-left:2px solid var(--salbei);font:italic 400 1.4rem/var(--lh-zitat) var(--serif);color:var(--tief)}
.fliesstext > .kasten:first-child,.fliesstext > .einstieg:first-child{margin-top:0}
.seitenkopf .lesezeit{margin:1rem 0 0;font-size:.95rem;letter-spacing:.02em;color:var(--text-2)}
.fliesstext .autorin{margin-top:2.5rem}
.ablauf-haupt > .kasten:first-child{margin-top:0}
.ablauf-haupt > h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:2.8rem 0 1.4rem}
.kasten{background:rgba(255,255,255,.5);border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(1.4rem,3.5vw,2.4rem);margin:2.2rem 0}
.weiter{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--linie)}
.rechts-leiste{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:4rem;align-items:start}
.rechts-leiste aside{position:sticky;top:110px}
@media (max-width:960px){.rechts-leiste{grid-template-columns:1fr}.rechts-leiste aside{position:static}}

/* ---------- Abschluss-CTA ---------- */
.abschluss{text-align:center;position:relative;overflow:hidden}
.abschluss h2{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:15ch;margin-inline:auto}
.abschluss .lead{max-width:44ch;margin-inline:auto}
.abschluss .cta-zeile,.abschluss .mikro{justify-content:center}
.themen-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:2rem}
.themen-chips a{padding:.6rem 1.1rem;border-radius:99px;border:1px solid var(--linie);text-decoration:none;color:var(--tief);font-size:.92rem;background:rgba(247,243,234,.7);transition:all .3s}
.themen-chips a:hover{background:var(--waldgruen);color:var(--creme);border-color:var(--waldgruen)}

/* ---------- Kontaktformular ---------- */
.kontakt-raster{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.kontakt-raster{grid-template-columns:1fr}}
.direkt{list-style:none;padding:0;margin:2rem 0;display:grid;gap:.8rem}
.direkt a{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-radius:var(--r-m);border:1px solid var(--linie);text-decoration:none;color:var(--tief);background:rgba(255,255,255,.45);transition:all .35s var(--ease)}
.direkt a:hover{transform:translateX(4px);border-color:var(--salbei)}
.direkt .symbol{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(168,191,163,.35);flex:none}
.direkt .symbol svg{width:20px;height:20px}
.direkt small{display:block;color:var(--text-2);font-size:.82rem}
.formular{background:var(--creme);border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(1.4rem,4vw,2.6rem);box-shadow:var(--schatten)}
.fortschrittsbalken{display:flex;gap:.4rem;margin-bottom:1.8rem}
.fortschrittsbalken span{flex:1;height:4px;border-radius:4px;background:var(--creme-2);overflow:hidden;position:relative}
.fortschrittsbalken span::after{content:"";position:absolute;inset:0;background:var(--waldgruen);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fortschrittsbalken span.an::after{transform:scaleX(1)}
.schrittzahl{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--braun-text);margin-bottom:.5rem;font-weight:600}
fieldset{border:0;padding:0;margin:0 0 1.4rem;min-width:0}
legend{font:400 clamp(1.35rem,2.4vw,1.75rem)/var(--lh-titel) var(--serif);color:var(--tief);margin-bottom:1rem;padding:0}
.js .formschritt{display:none}
.js .formschritt.aktiv{display:block;animation:einblenden .55s var(--ease)}
.feld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.feld label{font-weight:600;font-size:.92rem}
.feld label .opt{font-weight:400;color:var(--text-2)}
.feld input,.feld textarea,.feld select{font:inherit;color:inherit;padding:.9rem 1rem;border-radius:var(--r-s);border:1px solid rgba(38,59,50,.22);background:#fffdf8;transition:border-color .25s,box-shadow .25s;width:100%}
.feld textarea{min-height:140px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:0;border-color:var(--waldgruen);box-shadow:0 0 0 4px rgba(168,191,163,.35)}
.feld .hilfe{font-size:.84rem;color:var(--text-2)}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:560px){.zwei-spalten{grid-template-columns:1fr}}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0}
.chips span{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;border-radius:var(--r-m);border:1px solid rgba(38,59,50,.2);background:#fffdf8;transition:all .3s var(--ease);height:100%}
.chips span b{font:500 1.08rem/var(--lh-titel) var(--serif)}
.chips span small{color:var(--text-2);font-size:.84rem;line-height:var(--lh-klein)}
.chips input:checked + span{background:var(--waldgruen);border-color:var(--waldgruen);color:var(--creme)}
.chips input:checked + span small{color:rgba(247,243,234,.8)}
.chips input:focus-visible + span{outline:2px solid var(--waldgruen);outline-offset:3px}
@media (max-width:440px){.chips{grid-template-columns:1fr}}
.einwilligung{display:flex;gap:.8rem;align-items:flex-start;font-size:.88rem;line-height:var(--lh-klein);color:var(--text-2);margin:.4rem 0 1.4rem}
.einwilligung input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--waldgruen)}
.formnav{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.zurueck{background:none;border:0;font:inherit;color:var(--text-2);cursor:pointer;padding:.6rem 0;text-decoration:underline;text-underline-offset:.2em}
.nojs-hide{display:none}
.js .nojs-hide{display:inline-flex}
.js .nurjs-weg{display:none}
.honig{position:absolute!important;left:-5000px!important;width:1px;height:1px;overflow:hidden}
.fehler{color:#8a2d1f;font-size:.86rem}

/* ---------- Notfall ---------- */
.notfall{display:flex;gap:1rem;align-items:flex-start;border-radius:var(--r-m);background:rgba(216,198,173,.35);padding:1.2rem 1.4rem;font-size:.92rem}
.notfall svg{flex:none;width:24px;height:24px;margin-top:.1rem}
.notfall p{margin:0}

/* ---------- Footer ---------- */
.fuss{background:var(--tief);color:rgba(247,243,234,.82);padding-block:clamp(56px,8vw,96px) 2rem;margin-top:var(--halb);border-radius:clamp(24px,4vw,48px) clamp(24px,4vw,48px) 0 0}
.fuss a{color:var(--creme);text-decoration:none}
.fuss a:hover{color:var(--hellblau);text-decoration:underline}
.fuss-oben{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:2.5rem}
.fuss .claim{font:italic 300 clamp(1.8rem,3vw,2.4rem)/var(--lh-titel) var(--serif);color:var(--creme);margin:0 0 1rem}
.fuss h2{font:600 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--salbei);margin:0 0 1.1rem}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.95rem}
.fuss .notfall{background:rgba(247,243,234,.07);color:rgba(247,243,234,.85);margin-top:3rem}
.fuss .notfall a{text-decoration:underline}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(247,243,234,.14);font-size:.84rem;color:rgba(247,243,234,.6)}
@media (max-width:900px){.fuss-oben{grid-template-columns:1fr 1fr}.fuss-oben > :first-child{grid-column:1/-1}}

/* ---------- Mobile Sticky CTA ---------- */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;gap:.5rem;padding:.5rem;border-radius:99px;background:rgba(38,59,50,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 40px -10px rgba(0,0,0,.45);transform:translateY(140%);transition:transform .5s var(--ease)}
.sticky-cta.sichtbar{transform:none}
.sticky-cta a{flex:1;justify-content:center;text-align:center}
.sticky-cta .tel{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(247,243,234,.12);color:var(--creme)}
.sticky-cta .tel svg{width:20px;height:20px}
@media (max-width:760px){.sticky-cta{display:flex}body{padding-bottom:84px}}

/* ---------- Rechtstexte ---------- */
.recht{max-width:780px}
.recht h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-top:2.2em}
.recht h3{font-size:1.15rem;margin-top:1.6em;font-family:var(--sans);font-weight:600}
.recht p,.recht li{color:var(--text-2)}
.luecke{background:#ffe08a;color:#5a3b00;padding:.05em .4em;border-radius:4px;font-weight:600;font-family:var(--sans);font-size:.92em;border:1px dashed #b98900}
.entwurf{background:#fff4d6;border:1px solid #e8c56a;border-radius:var(--r-s);padding:1rem 1.2rem;font-size:.92rem;color:#5a3b00;margin-bottom:2rem}

/* ---------- Scroll-Reveal ---------- */
.js [data-zeigen]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-zeigen].da{opacity:1;transform:none}
.js [data-zeigen="2"]{transition-delay:.12s}.js [data-zeigen="3"]{transition-delay:.24s}.js [data-zeigen="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-zeigen]{opacity:1;transform:none}
  .hero-bild img{transform:none}
}
@media print{.kopf,.sticky-cta,.eroeffnung,.fuss .notfall{display:none}body::before{display:none}}
.js .fortschrittsbalken.nojs-hide{display:flex}
.js .schrittzahl.nojs-hide{display:block}

/* ---------- Logo ---------- */
.marke .logo{flex:none;display:block}
.marke .logo img{height:54px;width:auto}
.fuss-logo{display:inline-block;background:var(--creme);border-radius:var(--r-m);padding:.9rem 1.1rem;margin-bottom:1.4rem}
.fuss-logo{max-width:100%}
.fuss-logo img{width:380px;max-width:100%;height:auto}

/* ---------- Responsive-Korrekturen (Handy) ---------- */
@media (max-width:760px){
  .schritt{grid-template-columns:56px minmax(0,1fr);column-gap:1rem;row-gap:.2rem}
  .schritt .nr{grid-row:1 / span 2}
  .schritt h3,.schritt p{grid-column:2;min-width:0}
  .schritt h3{margin:.55rem 0 .2rem}
  .schritt p{max-width:none}
}
@media (max-width:560px){
  .kopf .wrap{height:72px;gap:.8rem}
  .marke .logo img{height:44px}
  .marke b{font-size:1.02rem}
  .marke small{font-size:.62rem;letter-spacing:.06em}
  .zeitleiste::before,.zeitleiste .fortschritt{left:21px}
  .zeitleiste li{padding:0 0 2.4rem 60px}
  .zeitleiste li .nr{width:43px;height:43px;font-size:1.1rem}
  .zeitleiste .betont{margin-left:0;padding:1.1rem 1.1rem}
  .rechts-leiste{gap:2.4rem}
  details.frage .antworttext{padding-right:0}
  .fuss-oben{grid-template-columns:1fr}
  .fuss-unten{flex-direction:column}
  .hero-bild{aspect-ratio:1/1}
  .schwebe{max-width:210px;padding:.8rem 1rem}
  .cta-zeile{gap:.9rem 1.2rem}
  .preisbox{padding:1.3rem}
  .summe .betrag{font-size:3.2rem}
}

/* =========================================================
   Version 5: Wasserkreise, Faktenreihe, Abschluss-Karte
   ========================================================= */

/* Abschluss als ruhige Karte: Logo, Text und Aktionen bilden eine Einheit */
.abschluss .wrap{position:relative}
.abschluss-karte{position:relative;isolation:isolate;overflow:hidden;text-align:center;border-radius:var(--r-l);background:linear-gradient(180deg,rgba(207,231,242,.42),rgba(247,243,234,.6) 60%);border:1px solid var(--linie);padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,3.5rem)}
.abschluss-karte .eyebrow{margin-bottom:1rem}

/* Ruhige Faktenreihe statt Laufband */
.fakten-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
.fakten-liste li{display:flex;flex-direction:column;gap:.35rem;padding-top:1.1rem;border-top:1px solid var(--linie);line-height:var(--lh-klein)}
.fakten-liste .symbol{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(207,231,242,.55);color:var(--waldgruen);margin-bottom:.4rem}
.fakten-liste .symbol svg{width:20px;height:20px}
.fakten-liste b{font:500 1.12rem/var(--lh-titel) var(--serif);color:var(--tief)}
.fakten-liste li > span:last-child{font-size:.92rem;color:var(--text-2)}
@media (max-width:900px){.fakten-liste{grid-template-columns:1fr 1fr;row-gap:1.6rem}}

/* Hero-Hinweis auf dem Handy: links unten am Bild, Person bleibt frei */
@media (max-width:900px){
  .hero-bild{margin-bottom:4.6rem}
  .schwebe{left:-6px;right:auto;bottom:-4.4rem;max-width:230px;padding:.75rem .95rem;animation:einblenden 1s 1.1s var(--ease) both}
  .schwebe p{font-size:.84rem}
}

@media (prefers-reduced-motion:reduce){
}

#faq-kurz .wrap > div + div{margin-top:var(--kopf-inhalt)}

/* =========================================================
   Version 6: Lichtspiel, sanfte Parallaxe, weiche Enthüllungen
   ========================================================= */

/* Keine einzelnen Wörter am Zeilenende */
p,li,.lead,blockquote,figcaption,summary{text-wrap:pretty}
h1,h2,h3,legend,.vision{text-wrap:balance}

/* Nachsatz direkt an der Überschrift */
.nachsatz{display:block;margin-top:.5em;font:italic 300 .6em/var(--lh-zitat) var(--serif);color:var(--text-2);letter-spacing:0}
.seitenkopf .nachsatz{font-size:.5em}

/* Lichtspiel: wie Tageslicht, das langsam durch ein Fenster wandert */
.lichtspiel{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;border-radius:inherit}
.lichtspiel span{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform;mix-blend-mode:multiply}
.lichtspiel span:nth-child(1){width:48%;aspect-ratio:1;top:-18%;left:48%;background:radial-gradient(circle,rgba(216,198,173,.75),rgba(216,198,173,0) 70%);animation:licht1 28s ease-in-out infinite alternate}
.lichtspiel span:nth-child(2){width:42%;aspect-ratio:1;bottom:-22%;left:-8%;background:radial-gradient(circle,rgba(207,231,242,.95),rgba(207,231,242,0) 70%);animation:licht2 34s ease-in-out infinite alternate}
.lichtspiel span:nth-child(3){width:30%;aspect-ratio:1;top:30%;left:30%;background:radial-gradient(circle,rgba(168,191,163,.45),rgba(168,191,163,0) 70%);animation:licht3 40s ease-in-out infinite alternate}
@keyframes licht1{to{transform:translate(-14%,18%) scale(1.12)}}
@keyframes licht2{to{transform:translate(22%,-14%) scale(.92)}}
@keyframes licht3{to{transform:translate(18%,10%) scale(1.2)}}
.hero{isolation:isolate}
.einzel{position:relative;isolation:isolate}

/* Bilder im Bogen: gleiten beim Scrollen minimal langsamer als die Seite */
.bogenbild picture{display:block;height:100%;will-change:transform}
.bogenbild img{transform:scale(1.12)}

/* Bogenbilder: sofort sichtbar, ohne Einblend-Animation */
.js .bogenbild[data-zeigen]{opacity:1;transform:none;filter:none;transition:none}

/* Texte werden weich scharf, statt nur aufzutauchen */
.js [data-zeigen]:not(.bogenbild){filter:blur(5px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.js [data-zeigen].da:not(.bogenbild){filter:none}

@media (prefers-reduced-motion:reduce){
  .lichtspiel span{animation:none}
  .js [data-zeigen]{filter:none!important}
}
.logo-wasser{position:relative;width:min(200px,54vw);margin:0 auto 1.2rem}
.logo-wasser .logo-gross,.logo-wasser .logo-gross img{display:block;width:100%;height:auto}
.einzel{min-height:55vh;display:grid;align-items:center}

/* Arbeitsbild auf der Seite „Der Ablauf“ (Schritt 3) */
.arbeitsbild{margin:1.4rem 0 0;border-radius:var(--r-m);overflow:hidden;background:var(--creme);box-shadow:var(--schatten)}
.arbeitsbild img{width:100%;height:auto;aspect-ratio:820/574;object-fit:cover}
.arbeitsbild figcaption{padding:.9rem 1.1rem;font:italic 400 1rem/var(--lh-zitat) var(--serif);color:var(--text-2)}

/* Barrierefreiheit (30.09.2026): heller Fokusrahmen auf dunklen Flächen */
.fuss :focus-visible,.atempause :focus-visible,.eroeffnung :focus-visible,.sticky-cta :focus-visible{outline-color:var(--creme)}
.umschalter button[aria-pressed="true"]:focus-visible{outline-color:var(--creme);outline-offset:-5px}
/* H1 auf Danke- und 404-Seite sieht aus wie bisher die H2 */
.abschluss h1.wie-h2{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:15ch;margin-inline:auto;letter-spacing:-.015em}

/* Vergleichstabelle in Impulsen („seriös oder Warnsignal?“) */
.vergleich-wrap{margin:1.5rem 0 2rem;border:1px solid var(--linie);border-radius:var(--r-m);overflow:hidden;background:rgba(255,255,255,.5)}
.vergleich{width:100%;border-collapse:collapse;font-size:.98rem;line-height:var(--lh-klein)}
.vergleich th{text-align:left;padding:.9rem 1.1rem;font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.vergleich th:first-child{background:rgba(168,191,163,.35);color:var(--waldgruen)}
.vergleich th:last-child{background:rgba(216,198,173,.45);color:var(--braun-text)}
.vergleich td{padding:.8rem 1.1rem;border-top:1px solid var(--linie);vertical-align:top;width:50%}
.vergleich td:first-child{border-right:1px solid var(--linie)}
.vergleich td:first-child::before{content:"✓ ";color:var(--waldgruen);font-weight:600}
.vergleich td:last-child::before{content:"✗ ";color:var(--braun-text);font-weight:600}
@media (max-width:560px){
  .vergleich thead{display:none}
  .vergleich tr{display:block;border-top:1px solid var(--linie);padding:.7rem 1rem}
  .vergleich tr:first-child{border-top:0}
  .vergleich td{display:block;width:auto;border:0;padding:.2rem 0}
  .vergleich td:first-child{border:0}
}

/* Startseite: H1 = Suchbegriffe als Dachzeile, Claim = großer Schriftzug (05.10.2026) */
.hero h1.eyebrow{margin:0 0 1.3rem;font:600 .78rem/1.3 var(--sans);letter-spacing:.16em;color:var(--braun-text);font-variation-settings:normal}
.hero .hero-claim{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:var(--lh-titel);letter-spacing:-.025em;color:var(--tief);font-variation-settings:"opsz" 96;margin:0 0 .35em;text-wrap:balance}
.hero .hero-claim em{font-style:italic;color:var(--waldgruen)}
.hero .hero-claim .zeile{display:block;overflow:hidden;padding-bottom:.06em}
.hero .hero-claim .zeile > span{display:inline-block;animation:hochgleiten 1.2s var(--ease) both}
.hero .hero-claim .zeile:nth-child(2) > span{animation-delay:.14s}
/* Startseite „Meine Vision“: Zitat etwas kleiner, Bild am Computer etwas höher – Text und Bild ausgewogen (06.10.2026) */
#mission .vision{font-size:clamp(1.4rem,2.5vw,2rem)}
@media (min-width:861px){#mission .bogenbild{aspect-ratio:3/4}}

/* Kopfzeile: Menüpunkte und Button immer einzeilig (19.10.2026) */
.nav a{white-space:nowrap}
.kopf .marke small{white-space:nowrap}
@media (min-width:1141px) and (max-width:1280px){
  .nav{gap:0}
  .nav a{padding:.55rem .6rem}
  .nav .btn{margin-left:.4rem;padding:.8rem .9rem .8rem 1.2rem;gap:.6rem}
}