/* =========================================================
   Osteopathie Katharina Hofmann
   Designsystem, abgeleitet aus Flyer / Plakat / Visitenkarte
   ========================================================= */

/* Figtree ist eine variable Schrift: eine Datei deckt alle Staerken ab. Nicht wieder auf
   mehrere Dateien aufteilen, sonst laedt der Browser dieselben Daten mehrfach. */
@font-face{font-family:Brand;src:url(fonts/figtree-var.woff2)format('woff2');font-weight:300 700;font-display:swap}

:root{
  /* Grundfarben 1:1 aus den Printprodukten gemessen */
  --hell:#F3F8F4;        /* Plakat + Visitenkarte */
  --salbei:#E3EED6;      /* Flyer */
  --salbei-tief:#D3E1C0;
  --tinte:#2F2812;       /* Flyer-Textfarbe, warmes Dunkel */
  --tinte-weich:#65614D;
  --blatt:#435B38;       /* Grün der Zweig-Illustration */
  --linie:rgba(47,40,18,.16);
  --linie-zart:rgba(47,40,18,.09);

  --font:Brand,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(22px,5.5vw,84px);
  --luft:clamp(46px,5.2vw,84px);   /* Sektionsabstand – kompakt, aber atmend */
  --leiste:clamp(270px,20vw,320px);/* Breite der linken Navigationsspalte */
  --luft-klein:clamp(38px,4.4vw,68px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hell);color:var(--tinte);font-family:var(--font);
  font-size:17.5px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* Bilder kommen als <picture> mit AVIF-Quellen (werkzeuge/bilder.py) – der Rahmen selbst ist layoutneutral */
picture{display:contents}
/* <source> darf kein eigenes Element im Raster werden, sonst belegt es eine leere Spalte */
picture>source{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a{color:inherit}
.wrap{max-width:1260px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-schmal{max-width:900px}
section{padding-block:var(--luft)}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.015em;line-height:1.12}
h1{font-size:clamp(38px,6.6vw,82px)}
h2{font-size:clamp(30px,4.6vw,56px);text-wrap:balance}
h3{font-size:clamp(20px,2.1vw,26px);font-weight:400;letter-spacing:-.005em;line-height:1.28}
p{margin:0 0 1.15em}

.eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  color:var(--tinte-weich);margin:0 0 20px;display:block}
.lead{font-size:clamp(18px,2vw,23px);line-height:1.58;font-weight:300;
  color:var(--tinte);max-width:44ch}
.klein{font-size:15.5px;color:var(--tinte-weich)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;font-size:16px;font-weight:500;letter-spacing:.005em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;min-height:54px;
  white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s}
.btn-dunkel{background:var(--tinte);color:var(--hell)}
.btn-dunkel:hover{background:#443b1f}
.btn-linie{border-color:var(--linie);color:var(--tinte)}
.btn-linie:hover{border-color:var(--tinte)}
.btn-hell{background:#fff;color:var(--tinte)}
.btn-hell-linie{border-color:rgba(255,255,255,.6);color:#fff}
.btn-hell-linie:hover{background:rgba(255,255,255,.16)}

/* ---------- Header ---------- */
/* Marke mittig, Navigation links, Kontakt rechts – ruhig und symmetrisch.
   Beim Scrollen schrumpft der Header dezent. */
header{position:sticky;top:0;z-index:60;background:rgba(243,248,244,.94);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--linie-zart);
  transition:box-shadow .25s}
header.kompakt{box-shadow:0 1px 20px rgba(47,40,18,.06)}
.nav{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
  padding-block:16px}

.marke{display:flex;align-items:center;gap:15px;text-decoration:none;
  transition:transform .25s}
.marke img{width:44px;height:auto;flex:none;transition:width .25s}
.marke .txt b{display:block;font-size:12px;letter-spacing:.32em;font-weight:300;
  text-transform:uppercase;transition:font-size .25s}
.marke .txt span{display:block;font-size:18px;font-weight:400;margin-top:2px;
  letter-spacing:-.005em;transition:font-size .25s}

.nav-links{display:none}
.nav-links ul{display:flex;list-style:none;gap:38px;margin:0;padding:0;font-size:15.5px;
  white-space:nowrap}
.nav-links a{text-decoration:none;color:var(--tinte-weich);padding-bottom:4px;
  border-bottom:1px solid transparent;transition:.16s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--tinte);border-color:var(--tinte)}

.nav-cta{display:none;align-items:center;gap:26px;justify-self:end}
/* Telefon ist ein sekundaerer Button – Icon plus Nummer, ohne Beschriftung
   darueber. Dass es eine Telefonnummer ist, sagt das Symbol. */
.tel-btn{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tel-btn svg{flex:none}

.burger{justify-self:end;display:grid;gap:5px;background:none;border:0;padding:12px 4px;cursor:pointer}
.burger i{display:block;width:24px;height:1px;background:var(--tinte)}

/* ---------- Mobilmenü ---------- */
.burger i{transition:transform .25s,opacity .2s}
body.menue-offen .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menue-offen .burger i:nth-child(2){opacity:0}
body.menue-offen .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:999px){
  body.menue-offen{overflow:hidden}
  /* backdrop-filter macht den Header zum Bezugsrahmen fuer position:fixed –
     dann waere die Menue-Ebene nur so hoch wie die Kopfzeile. Deshalb aus. */
  body.menue-offen header{z-index:80;backdrop-filter:none;background:var(--hell);
    border-bottom-color:transparent}
  body.menue-offen .mobilebar{display:none}
  .nav-links{position:fixed;inset:0;background:var(--hell);z-index:70;
    padding:100px var(--pad) 40px;overflow-y:auto;display:none}
  body.menue-offen .nav-links{display:block;animation:einblenden .2s ease}
  .nav-links ul{flex-direction:column;gap:0;font-size:clamp(21px,5.5vw,26px);
    white-space:normal;border-top:1px solid var(--linie-zart)}
  .nav-links a{display:block;padding:19px 0;color:var(--tinte);font-weight:300;
    border-bottom:1px solid var(--linie-zart)}
  .nav-links a[aria-current]{font-weight:500}
  /* justify-self:end aus der Grundregel laesst die fixierte Box schrumpfen
     statt sie zu spannen – hier zuruecksetzen. */
  body.menue-offen .nav-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:71;
    flex-direction:column;align-items:stretch;justify-self:stretch;gap:12px;margin:0;
    padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));
    background:var(--hell);border-top:1px solid var(--linie)}
  body.menue-offen .tel-btn{font-size:17px}
  body.menue-offen .nav-cta .btn{width:100%}
  /* Marke und Burger bleiben über der Menü-Ebene bedienbar */
  .marke,.burger{position:relative;z-index:75}
}
@keyframes einblenden{from{opacity:0}}

/* Ab Tablet quer wandert die Navigation in eine feste linke Spalte.
   Das gibt der Marke die Größe, die sie im Print auch hat, und nimmt
   dem Inhalt keine Höhe weg. */
@media(min-width:1000px){
  header{position:fixed;left:0;top:0;bottom:0;width:var(--leiste);
    border-bottom:0;border-right:1px solid var(--linie);
    background:var(--hell);backdrop-filter:none;
    display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
  header.kompakt{box-shadow:none}
  /* align-items:stretch ist entscheidend – sonst zentriert die Grundregel
     der Kopfzeile jedes Element einzeln und nichts fluchtet. */
  header .wrap{max-width:none;margin:0;padding:clamp(30px,3vw,42px) clamp(26px,2.2vw,36px);
    display:flex;flex-direction:column;flex:1;gap:0;align-items:stretch;text-align:left}
  .nav{display:contents}
  .inhalt{margin-left:var(--leiste)}

  /* Marke groß, wie auf dem Flyer */
  .marke{order:-1;flex-direction:column;align-items:flex-start;gap:18px;
    margin-bottom:clamp(34px,4vw,54px)}
  .marke img{width:clamp(78px,7.5vw,112px)}
  .marke .txt b{font-size:clamp(14px,1.35vw,17.5px);letter-spacing:.34em;line-height:1.5}
  .marke .txt span{font-size:clamp(20px,1.75vw,26px);margin-top:6px;line-height:1.25;
    text-wrap:balance}

  .nav-links{display:block}
  .nav-links ul{flex-direction:column;gap:2px;font-size:17px;white-space:normal}
  .nav-links li{margin:0}
  .nav-links a{display:block;padding:9px 0;border-bottom:0;border-left:1px solid transparent;
    padding-left:0;transition:color .16s,padding-left .18s}
  .nav-links a:hover{padding-left:7px;border-color:transparent;color:var(--tinte)}
  .nav-links a[aria-current]{color:var(--tinte);border-color:transparent;font-weight:500}

  .nav-cta{display:flex;flex-direction:column;align-items:stretch;gap:16px;
    margin-top:auto;padding-top:34px;justify-self:stretch}
  .tel-btn{font-size:16.5px;min-height:50px;padding:12px 20px}
  .nav-cta .btn{width:100%}
  .burger{display:none}
}
/* Schmaler Desktop: die Telefonnummer passt sonst nicht in den Knopf der Leiste */
@media(min-width:1000px) and (max-width:1599px){
  .tel-btn{font-size:15px;padding:12px 16px;gap:8px}
}
@media(min-width:1000px) and (max-height:820px){
  .marke img{width:66px}
  .marke{margin-bottom:22px;gap:13px}

  .nav-cta{padding-top:22px}
}

/* ---------- Hero: großes Aufmacher-Medium, Text darin ----------
   Das Medium ist auf 16:9 ausgelegt – der Loop kann das <img> 1:1 ersetzen.
   Mobil wird auf ein hochformatiges Fenster beschnitten. */
.hero{position:relative;overflow:hidden;background:var(--salbei)}
.hero-medium{position:relative;width:100%;height:clamp(500px,74svh,700px);overflow:hidden}
.hero-medium>img,.hero-medium>picture>img,.hero-medium>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 42%)}
/* Das Standbild des Videos deckt die Flaeche genauso ab wie ein Bild. */
.hero-video{background:var(--salbei)}

/* Pausenknopf: dauerhaft laufende Bewegung braucht eine sichtbare
   Stopp-Moeglichkeit (WCAG 2.2.2). Erscheint nur, wenn der Loop laeuft. */
.loop-stopp{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:4;
  display:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:rgba(24,20,8,.38);
  backdrop-filter:blur(6px);color:#fff;align-items:center;justify-content:center;
  transition:background .18s}
.loop-stopp:hover{background:rgba(24,20,8,.62)}
.loop-stopp.sichtbar{display:flex}
.loop-stopp svg{width:15px;height:15px;display:block}
.loop-stopp .icon-play{display:none}
.loop-stopp[aria-pressed="true"] .icon-pause{display:none}
.loop-stopp[aria-pressed="true"] .icon-play{display:block}
.hero-medium::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,20,8,.38) 0%,rgba(24,20,8,.14) 30%,
    rgba(24,20,8,.56) 70%,rgba(24,20,8,.80) 100%)}
.hero-inhalt{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-bottom:clamp(30px,4.5vw,64px)}
.hero-inhalt .eyebrow{color:rgba(255,255,255,.8);margin-bottom:16px}
.hero-inhalt h1{margin-bottom:16px;text-wrap:balance;max-width:19ch;
  /* Bewusst kleiner als eine normale Ueberschrift: der Loop soll sichtbar
     bleiben und nicht von Schrift zugedeckt werden. */
  font-size:clamp(28px,3.8vw,48px);line-height:1.14}
.hero-inhalt .lead{font-size:clamp(16.5px,1.75vw,20px)}
.hero-inhalt .lead{color:rgba(255,255,255,.93);margin-bottom:28px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-cta .btn{flex:1 1 200px}

@media(min-width:900px){
  .hero-medium{height:auto;aspect-ratio:16/9;max-height:80svh}
  .hero-cta .btn{flex:0 0 auto}

}


/* Kennzahlenband unter dem Hero */
.fakten{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
/* Wichtig: nur die direkten Kinder ansprechen. ".fakten div" wuerde auch den
   .wrap treffen und dessen seitliches Padding ueberschreiben. */
.fakten .wrap{display:grid;grid-template-columns:1fr;gap:0}
.fakten .wrap>div{display:grid;grid-template-columns:26px 1fr;gap:0 14px;
  padding:22px 0;border-bottom:1px solid var(--linie-zart);align-items:center}
.fakten .wrap>div:last-child{border-bottom:0}
.fakten .sig{grid-row:span 2;align-self:center;color:var(--blatt);width:26px;height:26px;opacity:.9}
.fakten b{display:block;font-size:15px;font-weight:500;letter-spacing:.005em;line-height:1.35}
.fakten span{display:block;font-size:13.5px;color:var(--tinte-weich);margin-top:3px;line-height:1.4}
@media(min-width:800px){
  .fakten .wrap{grid-template-columns:repeat(4,1fr);gap:34px}
  .fakten .wrap>div{padding:22px 0;border-bottom:0}
}

/* ---------- Bänder / Flächen ---------- */
.band-salbei{background:var(--salbei)}
.band-tinte{background:var(--tinte);color:var(--hell)}
.band-tinte .eyebrow,.band-tinte .klein{color:rgba(243,248,244,.68)}

/* Vollbreites Bildband */
.bildband{position:relative;overflow:hidden}
.bildband img{width:100%;height:clamp(200px,26vw,340px);object-fit:cover}

/* ---------- Zielgruppen: große Bildkacheln ---------- */
.zielgruppen{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.zielgruppen{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.zielgruppen{grid-template-columns:repeat(4,1fr);gap:18px}}
.zg{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:3px;
  aspect-ratio:1/1.26;background:var(--salbei)}
.zg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.zg:hover img{transform:scale(1.045)}
.zg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,20,8,0) 26%,rgba(24,20,8,.46) 58%,rgba(24,20,8,.86) 100%)}
.zg .txt{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;z-index:2;color:#fff}
.zg h3{font-weight:400;margin-bottom:5px}
.zg p{margin:0;font-size:14.5px;color:rgba(255,255,255,.84);line-height:1.5}
/* Nur ein kleiner Pfeil rechts unten, ausserhalb des Textflusses: der Text bleibt unten stehen */
.zg .txt{padding-right:52px}
.zg .pfeil{position:absolute;right:22px;bottom:20px;font-size:19px;line-height:1;
  opacity:.9;transition:transform .25s ease}
.zg:hover .pfeil{transform:translateX(4px)}

/* ---------- Beschwerden: redaktionelle Liste mit Haarlinien ---------- */
.beschwerden{border-top:1px solid var(--linie);margin-top:14px}
.bs{display:grid;grid-template-columns:1fr;gap:4px 44px;padding:19px 0;
  border-bottom:1px solid var(--linie)}
.bs h3{font-weight:400}
.bs p{margin:0;color:var(--tinte-weich);font-size:16px}
@media(min-width:820px){
  .bs{grid-template-columns:34px 1fr 1.3fr;gap:40px;padding:21px 0;align-items:start}
}
@media(min-width:1180px){
  .beschwerden{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;
    border-top:0}
  .beschwerden .bs{grid-template-columns:30px 1fr;gap:4px 22px;border-top:1px solid var(--linie);
    border-bottom:0;padding:18px 0}
  .beschwerden .bs .nr{padding-top:5px}
  .beschwerden .bs p{grid-column:2}
  .bs .nr{font-size:13px;color:var(--tinte-weich);padding-top:6px;font-variant-numeric:tabular-nums}
}
@media(max-width:819px){.bs .nr{font-size:12px;letter-spacing:.2em;color:var(--tinte-weich)}}

/* ---------- Split-Layouts ---------- */
.split{display:grid;gap:clamp(28px,4vw,62px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.schmal-links{grid-template-columns:.85fr 1.15fr}
  .split.schmal-rechts{grid-template-columns:1.15fr .85fr}

}
.split img{width:100%;object-fit:cover;border-radius:3px}
.bild-hoch{aspect-ratio:1/1.16}

/* Bildpaar, auf einer Hoehe (Kundenwunsch 25.10.2026, vorher versetzt) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.duo img{border-radius:3px;width:100%;aspect-ratio:3/4}

/* ---------- Drei Bereiche (parietal / viszeral / cranio) ---------- */
.bereiche{display:grid;gap:22px;grid-template-columns:1fr;margin-top:10px}
@media(min-width:860px){.bereiche{grid-template-columns:repeat(3,1fr);gap:38px}}
.bereiche article{border-top:1px solid var(--tinte);padding-top:22px}
/* Katharinas Bildchen aus der alten Seite: Skelett, Organe, Nervensystem */
.bereich-bild{height:clamp(96px,11vw,150px);width:auto;margin:4px 0 18px;opacity:.95}
.bereiche h3{margin-bottom:10px;font-weight:400}
.bereiche p{margin:0;color:var(--tinte-weich);font-size:16px}

/* ---------- Zitat ---------- */
.zitat{text-align:center;padding-block:0}
.zitat blockquote{margin:0 auto;max-width:20ch;font-size:clamp(25px,3.6vw,44px);font-weight:300;
  line-height:1.28;letter-spacing:-.01em;text-wrap:balance}
.zitat cite{display:block;margin-top:20px;font-style:normal;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-weich)}

/* ---------- Stimmen: Google-Bewertungen als Karussell ----------
   Natives Scroll-Snap, wischbar ohne JS; app.js ergaenzt Pfeile und Punkte. */
.stimmen-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.karussell-knoepfe{display:none;gap:10px;flex:none}
.karussell-knoepfe button{width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(243,248,244,.35);background:none;color:var(--hell);
  font-size:24px;line-height:1;display:grid;place-items:center;transition:background .18s,opacity .18s}
.karussell-knoepfe button:hover{background:rgba(243,248,244,.12)}
.karussell-knoepfe button:disabled{opacity:.3;cursor:default;background:none}
.karussell-bereit .karussell-knoepfe{display:flex}
@media(max-width:599px){.karussell-bereit .karussell-knoepfe{display:none}}

.stimmen{display:flex;gap:16px;margin-top:clamp(26px,3.2vw,42px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;
  /* Karten duerfen bis an den Rand laufen, damit man sieht: da kommt noch was */
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.stimmen::-webkit-scrollbar{display:none}
.stimmen:focus-visible{outline:2px solid rgba(243,248,244,.6);outline-offset:4px}
.stimme{flex:0 0 min(86%,32rem);scroll-snap-align:start;margin:0;
  padding:clamp(22px,2.6vw,34px);border:1px solid rgba(243,248,244,.2);
  border-radius:4px;display:flex;flex-direction:column}
@media(min-width:860px){
  .stimmen{gap:22px}
  .stimme{flex-basis:calc((100% - 22px) / 2)}
}
.sterne{display:flex;gap:3px;margin-bottom:16px}
.sterne i{width:17px;height:17px;background:#E8B54A;
  clip-path:polygon(50% 0,61.8% 35.4%,100% 38.2%,69% 61.8%,79.4% 100%,50% 76.4%,20.6% 100%,31% 61.8%,0 38.2%,38.2% 35.4%)}
.stimme blockquote{margin:0 0 22px;font-size:16.5px;line-height:1.65;font-weight:300}
.stimme blockquote p{margin:0 0 .9em}
.stimme blockquote p:last-child{margin-bottom:0}
@media(max-width:599px){.stimme blockquote{font-size:15.5px;line-height:1.6}}
.stimme figcaption{margin-top:auto;font-size:14.5px;color:rgba(243,248,244,.72)}
.stimme figcaption b{font-weight:500;color:var(--hell)}
.stimmen-hinweis{max-width:68ch;margin:22px auto 0;text-align:center;font-size:13.5px;line-height:1.55}
.karussell-punkte{display:flex;justify-content:center;gap:8px;margin-top:22px}
.karussell-punkte span{width:7px;height:7px;border-radius:50%;background:rgba(243,248,244,.3);
  transition:background .2s,transform .2s}
.karussell-punkte span.aktiv{background:var(--hell);transform:scale(1.25)}

/* ---------- Ablauf ---------- */
.ablauf-bild{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:60% 40%;
  border-radius:3px;margin:clamp(10px,1.5vw,18px) 0 clamp(26px,3vw,40px)}
@media(min-width:700px){.ablauf-bild{aspect-ratio:21/9;object-position:50% 38%}}
.schritte{counter-reset:s;display:grid;gap:24px;grid-template-columns:1fr;margin-top:12px;
  list-style:none;padding:0}
@media(min-width:820px){.schritte{grid-template-columns:repeat(3,1fr);gap:40px}}
.schritte li{counter-increment:s;border-top:1px solid var(--tinte);padding-top:22px}
.schritte li::before{content:counter(s,decimal-leading-zero);display:block;font-size:13px;
  letter-spacing:.18em;color:var(--tinte-weich);margin-bottom:14px}
.schritte h3{margin-bottom:9px;font-weight:400}
.schritte p{margin:0;color:var(--tinte-weich);font-size:16px}

/* ---------- Praxis-Kacheln ----------
   Alle drei Standorte exakt gleich aufgebaut: Karte, Kennzeichnung, Name,
   Träger, Adresse, Zeiten, Aktionen. Kein Standort fällt aus dem Raster. */
.praxen{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.praxen{grid-template-columns:1fr 1fr;gap:22px}}
.px{background:var(--hell);border:1px solid var(--linie);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.px:hover{border-color:rgba(47,40,18,.34)}
.band-salbei .px{background:#fff}
.px-karte{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-bottom:1px solid var(--linie)}
/* Hauptstandort: Karte plus Impressionen der Räume, gleiche Gesamthöhe
   wie die reine Karte der anderen Kacheln. */
.px-medien{position:relative;display:grid;grid-template-columns:1.42fr 1fr;gap:2px;
  aspect-ratio:16/9;border-bottom:1px solid var(--linie);background:var(--linie)}
.px-medien .px-karte{aspect-ratio:auto;height:100%;border-bottom:0}
.px-raeume{display:grid;grid-template-rows:1fr 1fr;gap:2px;min-height:0}
.px-raeume img{width:100%;height:100%;object-fit:cover}
.px-karte img{width:100%;height:100%;object-fit:cover}
.px-kennung{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;
  gap:7px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  background:var(--tinte);color:var(--hell);padding:6px 12px;border-radius:100px}
.px-kennung.neben{background:rgba(255,255,255,.94);color:var(--tinte);
  box-shadow:0 1px 6px rgba(47,40,18,.16)}
.px-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.px-body h3{font-weight:400;margin-bottom:5px;font-size:clamp(20px,1.6vw,23px)}
.px-traeger{font-size:14.5px;color:var(--tinte-weich);margin:0 0 12px;line-height:1.45}
.px-adresse{font-style:normal;font-size:16px;line-height:1.55;margin:0 0 16px;
  display:flex;gap:9px;align-items:flex-start}
.px-adresse svg{flex:none;margin-top:4px;opacity:.55}
.px-zeiten{border-top:1px solid var(--linie-zart);padding-top:14px;margin:0 0 18px;
  font-size:14.5px;color:var(--tinte-weich)}
.px-zeiten dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.px-zeiten dt{font-weight:500;color:var(--tinte)}
.px-zeiten dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

.px-aktionen{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.px-aktionen .btn{width:100%;min-height:48px;padding:12px 20px;font-size:15.5px}
.px-route{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:14.5px;color:var(--tinte-weich);text-decoration:none;padding:4px 0}
.px-route:hover{color:var(--tinte)}

/* ---------- Blätter als lockernde Akzente ----------
   Einzelne Blätter aus der Bildmarke, immer dekorativ und hinter dem Inhalt. */
/* Einzelne Halme aus der Bildmarke – nie die komplette Grafik. Jeder Halm ist
   an einer Sektionskante verankert und waechst von dort herein, statt frei
   im Raum zu schweben. Die Sektionskante uebernimmt den Anschnitt. */
.deko{position:absolute;z-index:0;pointer-events:none;user-select:none;display:none;
  width:auto;opacity:.16}
section,footer,.fakten{position:relative;overflow:hidden}
section>.wrap,footer>.wrap{position:relative;z-index:1}

/* Ein grosser Halm je Sektion. Die Hoehe ist zusaetzlich an die Sektionshoehe
   gekoppelt, damit nie ein Blatt oben abgeschnitten wird – ueber die Kante
   laeuft ausschliesslich der duenne Stiel. */
.deko-unten-rechts{right:clamp(16px,6%,130px);bottom:-7%;
  height:min(clamp(320px,36vw,560px),82%);transform-origin:bottom center}
.deko-unten-links{left:clamp(16px,6%,120px);bottom:-7%;
  height:min(clamp(310px,34vw,530px),82%);transform-origin:bottom center;transform:scaleX(-1)}
.deko-oben-rechts{right:clamp(16px,7%,150px);top:-7%;
  height:min(clamp(300px,33vw,510px),82%);transform-origin:top center;transform:rotate(180deg)}

@media(min-width:1080px){.deko{display:block}}

/* ---------- Preise ---------- */
.preise{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--linie);margin-top:14px}
.pz{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--linie)}
.pz b{font-weight:400;font-size:clamp(17px,2vw,20px)}
.pz .meta{color:var(--tinte-weich);font-size:15px}
.pz .preis{font-size:clamp(17px,2vw,20px);font-variant-numeric:tabular-nums}
/* Preiszeilen: der Preis bleibt immer rechts, auch wenn der Leistungsname umbricht */
.pz:has(.preis){display:grid;grid-template-columns:1fr auto;align-items:baseline}
/* Lebenslauf bei "Über mich": Jahre in fester Spalte, damit alle Zeilen gleich umbrechen */
#ueber .pz{display:grid;grid-template-columns:max-content 1fr;gap:2px 20px;justify-content:start}
#ueber .pz b{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:420px){#ueber .pz{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linie);max-width:82ch}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:20px 48px 20px 0;position:relative;
  font-size:clamp(17px,2vw,21px);font-weight:400;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:28px;width:12px;height:12px;
  border-right:1px solid var(--tinte);border-bottom:1px solid var(--tinte);
  transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .a{padding:0 0 22px;color:var(--tinte-weich);max-width:68ch}
.faq .a p:last-child{margin:0}

/* ---------- CTA-Band mit Bild ---------- */
.cta{position:relative;overflow:hidden;color:#fff;text-align:center;
  padding-block:clamp(62px,7.5vw,108px)}
.cta>img,.cta>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:rgba(28,24,10,.58)}
.cta .wrap{position:relative;z-index:2}
.cta h2{max-width:18ch;margin:0 auto;text-wrap:balance}
.cta p{max-width:48ch;margin:22px auto 0;color:rgba(255,255,255,.88)}
.cta .reihe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}

/* ---------- Footer ---------- */
footer{background:var(--salbei);padding-top:clamp(46px,5vw,72px);position:relative;overflow:hidden}
/* Footer: einzelner Halm, der von der Unterkante hereinwaechst */
.f-zweig{position:absolute;right:clamp(20px,6%,120px);bottom:-56px;
  height:clamp(200px,20vw,300px);width:auto;opacity:.3;pointer-events:none;z-index:0}
.fgrid{display:grid;gap:36px;grid-template-columns:1fr;position:relative;z-index:2}
@media(min-width:800px){.fgrid{grid-template-columns:1.5fr 1fr 1fr .9fr}}
footer h4,footer .f-titel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  margin:0 0 16px;color:var(--tinte-weich)}
footer ul{list-style:none;margin:0;padding:0;font-size:16px}
footer li{margin-bottom:10px}
footer a{text-decoration:none;color:var(--tinte-weich)}
footer a:hover{color:var(--tinte)}

.fbottom{margin-top:clamp(32px,4vw,52px);border-top:1px solid rgba(47,40,18,.16);
  padding:22px 0 28px;font-size:13.5px;color:var(--tinte-weich);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;position:relative;z-index:2}

/* ---------- Fixe Buchungsleiste (mobil) ---------- */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(243,248,244,.95);backdrop-filter:blur(16px);
  border-top:1px solid var(--linie);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:auto 1fr;gap:10px;
  box-shadow:0 -10px 30px rgba(47,40,18,.09)}
/* Mit Beschriftung "Anrufen", damit der Knopf nicht untergeht (Wunsch 20.10.2026).
   Auf sehr schmalen Geraeten bleibt nur das Symbol. */
.mobilebar .tel{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:0 20px 0 18px;min-width:54px;font-size:16px;font-weight:500;color:var(--tinte);
  border:1px solid var(--linie);border-radius:100px;text-decoration:none}
@media(max-width:339px){.mobilebar .tel{padding:0}.mobilebar .tel span{display:none}}
.mobilebar .btn{width:100%;font-size:17px;min-height:54px}
@media(min-width:1040px){.mobilebar{display:none}}
@media(max-width:1039px){body{padding-bottom:88px}}

/* ---------- Buchungs-Overlay ---------- */
.bk{position:fixed;inset:0;z-index:200;display:none}
.bk.open{display:block}
.bk-scrim{position:absolute;inset:0;background:rgba(24,20,8,.55);backdrop-filter:blur(3px);
  animation:fade .22s ease}
.bk-panel{position:absolute;right:0;top:0;bottom:0;width:min(580px,100%);background:var(--hell);
  display:flex;flex-direction:column;box-shadow:-14px 0 50px rgba(24,20,8,.3);
  animation:slide .28s cubic-bezier(.22,.7,.3,1)}
@media(max-width:640px){
  .bk-panel{top:auto;height:94svh;width:100%;border-radius:18px 18px 0 0;
    animation:up .28s cubic-bezier(.22,.7,.3,1)}
}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border-bottom:1px solid var(--linie);flex:none}
.bk-head p{margin:0;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinte-weich)}
.bk-head strong{display:block;font-size:18px;font-weight:400;margin-top:3px}
.bk-close{border:1px solid var(--linie);background:none;border-radius:50%;width:42px;height:42px;
  cursor:pointer;font-size:21px;line-height:1;flex:none;color:var(--tinte)}
.bk-close:hover{background:rgba(47,40,18,.06)}
.bk-body{flex:1;position:relative;overflow:hidden}
.bk-body iframe{width:100%;height:100%;border:0;display:block}
.bk-load{position:absolute;inset:0;display:grid;place-items:center;color:var(--tinte-weich);
  font-size:15px}
.bk-alt{flex:none;border-top:1px solid var(--linie);padding:15px 22px;font-size:14.5px;
  color:var(--tinte-weich);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  justify-content:space-between}
.bk-alt a{font-weight:500;color:var(--tinte)}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(100%)}}
@keyframes up{from{transform:translateY(100%)}}
body.bk-locked{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- Raum-Galerie ---------- */
.px-raeume button{padding:0;border:0;background:none;cursor:zoom-in;position:relative;
  display:block;min-height:0;overflow:hidden}
.px-raeume button::after{content:"";position:absolute;inset:0;background:rgba(24,20,8,0);
  transition:background .18s}
.px-raeume button:hover::after{background:rgba(24,20,8,.22)}
.px-raeume .lupe{position:absolute;right:8px;bottom:8px;z-index:2;width:26px;height:26px;
  border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  opacity:0;transition:opacity .18s}
.px-raeume button:hover .lupe{opacity:1}

.galerie{position:fixed;inset:0;z-index:210;display:none;background:rgba(20,17,6,.93)}
/* minmax(0,1fr) statt 1fr: sonst waechst die Zeile auf die
   Eigenhoehe des Bildes und die Bildunterschrift rutscht heraus. */
.galerie.open{display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  animation:einblenden .2s ease}
.galerie-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,3vw,32px);color:rgba(255,255,255,.9)}
.galerie-kopf p{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.galerie-zu{border:1px solid rgba(255,255,255,.4);background:none;color:#fff;border-radius:50%;
  width:44px;height:44px;cursor:pointer;font-size:22px;line-height:1}
.galerie-zu:hover{background:rgba(255,255,255,.14)}
/* Feste Buehne plus object-fit:contain – so kann das Bild die Zeile unter
   keinen Umstaenden sprengen, unabhaengig von seinem Seitenverhaeltnis. */
.galerie-buehne{position:relative;min-height:0;overflow:hidden;
  padding:0 clamp(12px,4vw,70px)}
.galerie-buehne img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.galerie-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(20,17,6,.45);
  color:#fff;cursor:pointer;display:grid;place-items:center;font-size:20px;line-height:1}
.galerie-pfeil:hover{background:rgba(255,255,255,.18)}
.galerie-pfeil.vor{right:clamp(8px,2vw,24px)}
.galerie-pfeil.zurueck{left:clamp(8px,2vw,24px)}
.galerie-fuss{padding:14px clamp(16px,3vw,32px) 24px;color:rgba(255,255,255,.75);
  font-size:14.5px;text-align:center}
.galerie-fuss b{display:block;font-weight:400;color:#fff;font-size:16px;margin-bottom:3px}
body.galerie-offen{overflow:hidden}

/* ---------- Rechtstexte ---------- */
.recht h1{margin-bottom:clamp(26px,3vw,40px)}
.recht h2{font-size:clamp(20px,2.1vw,25px);font-weight:400;margin:clamp(32px,3.4vw,46px) 0 12px;
  padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--linie)}
.recht h2:first-of-type{margin-top:0}
.recht p{max-width:72ch}
/* :not(.btn), sonst faerbt diese Regel auch die Schrift auf dunklen Buttons */
.recht a:not(.btn){color:var(--tinte)}
.recht .hinweis{background:var(--salbei);border-radius:4px;padding:18px 20px;
  font-size:15.5px;max-width:72ch}
.recht-liste{margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:2px 28px;max-width:72ch}
.recht-liste dt{font-weight:500;padding-top:12px;border-top:1px solid var(--linie-zart)}
.recht-liste dd{margin:0 0 10px;color:var(--tinte-weich);font-size:16px}
@media(min-width:700px){
  .recht-liste{grid-template-columns:auto 1fr}
  .recht-liste dt{padding-top:12px}
  .recht-liste dd{padding-top:12px;border-top:1px solid var(--linie-zart);margin-bottom:0}
}

/* Mobil: unten rechts sitzt der Pausenknopf, die Buttons brauchen darueber Platz */
@media(max-width:899px){
  .hero .hero-inhalt{padding-bottom:78px}
  .loop-stopp{width:40px;height:40px}
}

/* Mobil, alle Seiten: Video bzw. Bild soll sichtbar bleiben (Kundenwunsch 20./25.10.2026).
   Keine Buttons im Bild – "Termin buchen" und "Anrufen" stehen ohnehin in der Leiste
   unten –, Text kleiner und ganz unten, Pausenknopf nach oben rechts. */
@media(max-width:899px){
  .hero-medium::after{
    background:linear-gradient(180deg,rgba(24,20,8,0) 0%,rgba(24,20,8,0) 55%,
      rgba(24,20,8,.5) 78%,rgba(24,20,8,.78) 100%)}
  .hero .hero-inhalt{padding-bottom:22px}
  .hero-medium .hero-cta{display:none}
  .hero-medium h1{font-size:clamp(22px,6.2vw,28px);margin-bottom:8px}
  .hero-medium .lead{font-size:15px;line-height:1.45;margin-bottom:0}
  .hero-medium .loop-stopp{top:14px;bottom:auto}
}