@import url("../../fonts/fonts.css");
/* Naturheilpraxis Michelrieth – Sitehold-Vorlage (Modell A „Frisch & klar“). Erzeugt von make_plantilla.py. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Raleway,system-ui,sans-serif;font-size:17px;line-height:1.65;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0 0 .45em;line-height:1.15}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,1180px);margin-inline:auto}
.ic{width:24px;height:24px;flex:none}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{position:relative;padding-left:28px;margin:.3em 0}
ul.check li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;
 background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.burger{display:none}
@media (max-width:900px){.nav{display:none}.burger{display:inline-flex}}

:root{--blau:#2A88CA;--blau-d:#1d6aa3;--gruen:#40A277;--gruen-d:#2f8460;--mint:#E7F8F0;--text:#2b3a42;--leise:#5d6e76;--bg:#fff;--linie:#dcebe4}
h1,h2{font-family:Cinzel,serif;font-weight:500;letter-spacing:.02em;color:var(--blau)}
h3{font-family:Raleway,sans-serif;font-weight:700;color:#1f3a4a}
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:82px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.logo-zeichen{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--gruen)}
.logo-text strong{display:block;font-family:Cinzel,serif;font-weight:600;font-size:1.25rem;color:var(--blau);letter-spacing:.04em}
.logo-text small{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.nav{display:flex;gap:26px}.nav a{text-decoration:none;font-weight:600;color:#33505f}.nav a:hover{color:var(--blau)}
.tel-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--gruen);color:#fff;text-decoration:none;font-weight:700}
.tel-btn .ic{width:20px;height:20px}
.hero{background:var(--mint);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 60C240 0 480 0 720 40s480 60 720 0v50H0z' fill='white'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:70px 0 130px}
.motto{font-family:Cinzel,serif;color:var(--gruen);letter-spacing:.18em;text-transform:uppercase;font-size:.9rem;margin-bottom:18px}
.hero h1{font-size:clamp(2.4rem,4.8vw,3.9rem)}
.hero .lead{font-size:1.18rem;color:var(--leise);max-width:560px}
.hero .knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn-zweit{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:2px solid var(--blau);color:var(--blau);font-weight:700;text-decoration:none}
.hinweis{margin-top:18px;font-size:.95rem;color:var(--gruen-d);font-weight:600}
.bildrahmen{position:relative}
.bildrahmen img{border-radius:220px 220px 24px 24px;box-shadow:0 30px 60px rgba(31,90,70,.18);aspect-ratio:4/5;object-fit:cover;width:100%}
.bildrahmen .plakette{position:absolute;left:-28px;bottom:40px;background:#fff;border-radius:18px;padding:16px 20px;box-shadow:0 18px 40px rgba(0,0,0,.1);display:flex;gap:12px;align-items:center;font-size:.92rem}
.plakette b{display:block;color:var(--blau);font-size:1.05rem}
.plakette .ic{color:var(--gruen);width:30px;height:30px}
section{padding:90px 0}
.kopf{max-width:720px;margin:0 auto 46px;text-align:center}
.kopf .motto{margin-bottom:10px}
.kopf h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.leistungen{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.leistung{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:26px;border:1px solid var(--linie);border-radius:20px;background:#fff;transition:box-shadow .3s}
.leistung:hover{box-shadow:0 18px 40px rgba(42,136,202,.1)}
.leistung .symbol{width:58px;height:58px;border-radius:16px;background:var(--mint);color:var(--gruen);display:grid;place-items:center}
.leistung .symbol .ic{width:30px;height:30px}
.leistung h3{font-size:1.15rem;margin-bottom:.35em}
.leistung p{color:var(--leise);font-size:.98rem;margin-bottom:.6em}
.leistung summary{color:var(--blau);font-weight:700;font-size:.95rem}
.leistung summary::after{content:" +"}
.leistung details[open] summary::after{content:" –"}
.leistung details p,.leistung details ul{margin-top:.6em;font-size:.95rem}
.band{background:var(--mint)}
.zwei{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.preis-gruppe{background:#fff;border-radius:18px;padding:20px 24px;margin-bottom:16px;border:1px solid var(--linie)}
.preis-gruppe h3{font-family:Cinzel,serif;font-weight:600;color:var(--gruen-d);font-size:1.05rem;letter-spacing:.06em}
.preisliste{list-style:none;padding:0;margin:0}
.preisliste li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:8px 0;border-top:1px dashed #cfe3da;font-size:.95rem}
.preisliste li:first-child{border-top:0}
.preisliste b{color:var(--blau-d);margin-left:auto;text-align:right}
.zwei>*{min-width:0}
@media (max-width:520px){.preisliste li{flex-direction:column;gap:0}.preisliste b{white-space:normal}}
.preise-raster{columns:2;column-gap:20px}.preise-raster .preis-gruppe{break-inside:avoid}
.kosten{background:#fff;border-left:4px solid var(--gruen);border-radius:12px;padding:20px 24px;color:var(--leise);font-size:.97rem}
.kontakt-karten{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kk{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--linie);text-align:center}
.kk .ic{width:34px;height:34px;color:var(--gruen);margin:0 auto 10px}
.kk b{display:block;color:#1f3a4a;margin-bottom:4px}
.kk span{color:var(--leise);font-size:.95rem;overflow-wrap:anywhere}
.kontakt-karten>*{min-width:0}
.zeiten{list-style:none;padding:0;margin:0}.zeiten li{display:flex;justify-content:space-between;gap:12px}
.partner{display:flex;align-items:center;justify-content:center;gap:24px;padding:36px;border-radius:20px;border:1px dashed #b7d9c9;margin-top:40px;color:var(--leise)}
.partner b{font-family:Cinzel,serif;color:var(--gruen-d);letter-spacing:.1em}
footer{background:#1f3a4a;color:#c9d8df;padding:40px 0;font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:#fff;margin-left:18px}
@media (max-width:900px){
 .hero .wrap,.zwei{grid-template-columns:1fr}.hero .wrap{padding:40px 0 110px;gap:36px}
 .leistungen{grid-template-columns:1fr}.kontakt-karten{grid-template-columns:1fr}.preise-raster{columns:1}
 .top .tel-btn span{display:none}.top .tel-btn{padding:12px}
 .bildrahmen{max-width:420px}.bildrahmen .plakette{left:12px}
 .logo-text strong{font-size:1.05rem;white-space:nowrap}.logo-text small{font-size:.62rem;letter-spacing:.04em;white-space:nowrap}.top .wrap{gap:10px}.logo-zeichen{width:38px;height:38px}.top .tel-btn{padding:10px}
}
.burger{width:46px;height:46px;border:1px solid var(--linie);border-radius:50%;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.burger span{width:18px;height:2px;background:var(--blau)}

@media (max-width:900px){.nav{display:none}.burger{display:inline-flex}}
.i-hand{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12V6.5a1.5 1.5 0 0 1 3 0V11m0-5.5V4.5a1.5 1.5 0 0 1 3 0V11m0-5.5a1.5 1.5 0 0 1 3 0V12m0-4.5a1.5 1.5 0 0 1 3 0V15a6 6 0 0 1-6 6h-1.2a6 6 0 0 1-4.6-2.2L4.4 15a1.6 1.6 0 0 1 2.4-2.1L7 13'/%3E%3C/svg%3E")}
.i-wellen{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 13c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E")}
.i-glas{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0v2H6zM5 12h14M9 4.5 8 3m7 1.5L16 3M12 4V2'/%3E%3Cpath d='M4 19c3-2 13-2 16 0'/%3E%3C/svg%3E")}
.i-tropfen{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3Cpath d='M9.5 14.5a2.5 2.5 0 0 0 2.5 2.5'/%3E%3C/svg%3E")}
.i-ader{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c4-1 5-6 8-8s7-2 8-8'/%3E%3Cpath d='M4 14c3 0 4-2 6-3M14 21c0-3 2-4 3-6'/%3E%3C/svg%3E")}
.i-infusion{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='10' rx='2'/%3E%3Cpath d='M12 12v4m0 0-2 2m2-2 2 2M10 6h4M12 18v4'/%3E%3C/svg%3E")}
.i-labor{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-5 9a2 2 0 0 0 1.8 3h10.4a2 2 0 0 0 1.8-3l-5-9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E")}
.i-stethoskop{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v6a4 4 0 0 0 8 0V3M10 13v2a5 5 0 0 0 10 0v-2'/%3E%3Ccircle cx='20' cy='11' r='2'/%3E%3C/svg%3E")}
.i-fuss{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21c-2.5 0-3.5-2-3-4.5S7 11 7 8.5 8.5 3 11 3s3 3 2.5 6-1 5 .5 7.5S13 21 8 21z'/%3E%3Ccircle cx='16.5' cy='4.5' r='1'/%3E%3Ccircle cx='18.5' cy='7' r='1'/%3E%3Ccircle cx='19.5' cy='10' r='1'/%3E%3C/svg%3E")}
.i-wickel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6c4 2 10 2 14 0M5 11c4 2 10 2 14 0M5 16c4 2 10 2 14 0'/%3E%3Cpath d='M5 6v10M19 6v10'/%3E%3C/svg%3E")}
.i-tel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
.i-mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.i-ort{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E")}
.i-uhr{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.tel-btn,.menu-tel{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
.menu-mail{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.plakette{--blatt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340A277' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 15-15-1 10-7 15-15 15z'/%3E%3Cpath d='M5 19 14 10'/%3E%3C/svg%3E")}

/* ── Anpassungen der Sitehold-Vorlage an Modell A (make_plantilla.py) ── */
section[id]{scroll-margin-top:84px}
/* Kopf: Original-Logo (Bild). Desktop 80 px hoch (vorher 58 px: die Schrift war kaum lesbar); beim Scrollen wird
   der Kopf kompakt (Klasse .kompakt per JS). */
.top .wrap{min-height:108px;transition:min-height .3s ease}
.logo{margin-right:auto;display:block;line-height:0}
.logo img{height:80px;width:auto;transition:height .3s ease}
.top.kompakt .wrap{min-height:74px}.top.kompakt .logo img{height:58px}
.top{transition:box-shadow .3s ease}.top.kompakt{box-shadow:0 6px 24px rgba(31,58,74,.08)}
/* Telefon-Knopf: Icon per CSS-Maske, damit der Link nur Text enthält (im Editor bearbeitbar) */
.tel-btn::before,.menu-knoepfe a::before{content:"";flex:none;width:20px;height:20px;background:currentColor;
 -webkit-mask:var(--maske) center/contain no-repeat;mask:var(--maske) center/contain no-repeat}
/* Desktop: die Zusätze des Handy-Menüs ausblenden */
.menu-motto,.nav-d,.menu-extra{display:none}
/* Bogen: Verlauf und Sonne per CSS, darüber die Pflanzen (transparentes WebP). Wird das Bild später durch ein Foto
   ersetzt, füllt es den Bogen; das Wiegen gilt nur für die Pflanzen (src enthält „pflanzen“). */
.bogen{position:relative;aspect-ratio:4/5;border-radius:220px 220px 24px 24px;overflow:hidden;
 box-shadow:0 30px 60px rgba(31,90,70,.18);
 background:radial-gradient(circle at 72% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 35%),linear-gradient(135deg,#E7F8F0,#cfeee0)}
.bogen::before{content:"";position:absolute;left:46%;top:24%;width:44%;aspect-ratio:1;border-radius:50%;background:#fff;opacity:.35}
.bildrahmen .bogen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;aspect-ratio:auto}
.js .bogen img[src*="pflanzen"]{transform-origin:42% 100%;animation:wiegen 9s ease-in-out infinite}
@keyframes wiegen{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.bildrahmen .plakette{display:grid;grid-template-columns:30px auto;column-gap:12px;align-items:center}
.plakette::before{content:"";grid-row:1/3;width:30px;height:30px;background:var(--blatt) center/contain no-repeat}
.plakette p{margin:0;line-height:1.35}
.plakette .plakette-name{color:var(--blau);font-weight:700;font-size:1.05rem}
/* Hero: Einblenden beim Laden */
.js .hero-text>*{animation:auftauchen .8s cubic-bezier(.2,.7,.2,1) both}
.js .hero-text>:nth-child(2){animation-delay:.08s}.js .hero-text>:nth-child(3){animation-delay:.16s}
.js .hero-text>:nth-child(4){animation-delay:.24s}.js .hero-text>:nth-child(5){animation-delay:.32s}
.js .bildrahmen{animation:auftauchen 1s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes auftauchen{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Behandlungskarten: Foto immer sichtbar oben, Symbol als Plakette über dem Fotorand */
.leistungen{align-items:stretch}
.leistung{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;position:relative;
 transition:transform .35s ease,box-shadow .35s ease}
.leistung-foto{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.leistung-text{position:relative;flex:1;display:flex;flex-direction:column;background:#fff;padding:0 26px 22px;
 min-width:0;overflow-wrap:break-word;hyphens:auto}
.leistung-text::before{content:"";flex:none;width:58px;height:58px;margin:-29px 0 14px;border-radius:16px;
 background:#fff var(--ico) center/30px no-repeat;box-shadow:0 8px 22px rgba(31,90,70,.16)}
.leistung:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(42,136,202,.14)}
.leistung:hover .leistung-foto{transform:scale(1.05)}
.leistung ul.check{font-size:.95rem;color:var(--leise);margin-bottom:.6em}
.mehr h4{font-family:Raleway,sans-serif;font-size:.98rem;font-weight:700;color:#1f3a4a;margin:.6em 0 .35em}
.mehr ul.check{margin-bottom:.8em}
.mehr-kontakt{display:inline-block;margin:.2em 0 .8em;color:var(--gruen-d);font-weight:700;font-size:.95rem;text-decoration:none}
.mehr-kontakt::after{content:" →"}
.mehr-btn{appearance:none;background:none;border:0;padding:4px 0;margin-top:auto;align-self:flex-start;font:inherit;font-size:.95rem;font-weight:700;color:var(--blau);cursor:pointer}
.mehr-btn::after{content:" +"}.mehr-btn[aria-expanded="true"]::after{content:" –"}
.mehr-btn:focus-visible,.nav a:focus-visible,.burger:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:6px}
.js .mehr{display:none}.js .leistung.offen .mehr{display:block}
html:not(.js) .mehr-btn{display:none}
@media (max-width:560px){.leistung-text{padding:0 20px 20px}.leistung-text::before{width:52px;height:52px;margin-top:-26px;background-size:27px}}
/* Erscheinen beim Scrollen (Klassen setzt das JS; ohne JS bleibt alles sichtbar) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.sichtbar{opacity:1;transform:none}
/* Preise: Zeilen als Absätze */
.kosten{margin-bottom:22px}.kosten p:last-child{margin-bottom:0}
.preisliste .zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;margin:0;padding:8px 0;border-top:1px dashed #cfe3da;font-size:.95rem}
.preisliste .zeile:first-child{border-top:0}
.zeile b{color:var(--blau-d);margin-left:auto;text-align:right}
.preis-text{font-size:.93rem;color:var(--leise);margin:.1em 0 .5em;line-height:1.55}
@media (max-width:520px){.preisliste .zeile{flex-direction:column;gap:0}.zeile b{margin-left:0;text-align:left}}
/* Kontaktkarten: Icon als ::before */
.kk{transition:transform .35s ease,box-shadow .35s ease}
.kk:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(42,136,202,.1)}
.kk::before{content:"";display:block;width:34px;height:34px;margin:0 auto 10px;background:var(--ico) center/contain no-repeat}
.kk h3{font-size:1rem;margin:0 0 4px}
.kk p,.kk a{display:block;margin:0;color:var(--leise);font-size:.95rem;overflow-wrap:anywhere}
.kk a{color:var(--blau-d);font-weight:600;text-decoration:none}.kk a:hover{text-decoration:underline}
.kk .kk-link{margin-top:6px;font-size:.9rem}
.kopf .kopf-hinweis{color:var(--gruen-d);font-weight:600}
/* Partner */
.partner{flex-wrap:wrap}
.partner .partner-t{margin:0;font-family:Cinzel,serif;color:var(--gruen-d);letter-spacing:.1em;font-weight:600}
.partner-logo{display:block;line-height:0}.partner-logo img{width:220px;height:auto}
/* Nur für Screenreader. Zugleich nötig für Sitehold: Ein <a> mit nur einem <img> wird zum Bild-Block, und der
   Importer verliert dabei target="_blank"; mit diesem zweiten Kind wird es ein Link-Block, der target behält. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Fuß mit dem weißen Original-Logo */
footer .wrap{align-items:center}
footer p{margin:0}
footer .foot-logo{margin-left:0;line-height:0}.foot-logo img{height:56px;width:auto}
.foot-nav a{margin-left:18px}.foot-nav a:first-child{margin-left:0}
/* Rechtliche Seiten; im Impressum das Porträt klein und rund neben Name und Anschrift */
.legal{padding:70px 0 100px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:.8em}
.legal h2{font-family:Raleway,sans-serif;font-weight:700;font-size:1.12rem;color:#1f3a4a;margin:1.6em 0 .4em}
.legal p{color:var(--leise)}.legal p strong{color:#1f3a4a}
.legal a{color:var(--blau-d)}
.legal{overflow-wrap:anywhere}
.impressum-kopf{display:flex;align-items:center;gap:24px;margin-bottom:1.6em}
.legal .impressum-foto{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;
 box-shadow:0 0 0 5px var(--mint)}
.impressum-adresse p:last-child{margin-bottom:0}
@media (max-width:480px){.legal .impressum-foto{width:84px;height:84px}.impressum-kopf{gap:16px}}
.burger{cursor:pointer;padding:0;position:relative}
.burger span{transition:transform .3s ease,opacity .2s}
/* ── Handy-Menü (≤ 900 px): Vollbild-Panel unter dem Kopf, öffnet kreisförmig vom Burger aus ──
   Der Kopf hat hier kein backdrop-filter: es würde das fixierte Panel in den Kopf einschließen. */
@media (max-width:900px){
 .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
 .top .wrap{min-height:72px}
 .logo img,.top.kompakt .logo img{height:52px}.top.kompakt .wrap{min-height:72px}
 .top .tel-btn{font-size:0;gap:0;padding:12px}
 .js .nav{display:flex;position:fixed;left:0;right:0;top:var(--kopf,73px);bottom:0;flex-direction:column;gap:0;
  overflow-y:auto;overscroll-behavior:contain;padding:26px 24px calc(26px + env(safe-area-inset-bottom));
  background:radial-gradient(circle at 88% 0,#fff 0,rgba(255,255,255,0) 45%),linear-gradient(172deg,var(--mint) 0%,#f4fbf8 55%,#fff 100%);
  clip-path:circle(0 at calc(100% - 43px) -36px);visibility:hidden;
  transition:clip-path .6s cubic-bezier(.65,0,.25,1),visibility 0s .6s}
 .js .top.menu-offen .nav{clip-path:circle(150% at calc(100% - 43px) -36px);visibility:visible;
  transition:clip-path .6s cubic-bezier(.65,0,.25,1)}
 .nav::after{content:"";position:absolute;right:-50px;bottom:0;width:250px;height:306px;z-index:-1;pointer-events:none;
  background:url(../../images/praxis-pflanzen.webp) bottom right/contain no-repeat;opacity:.22}
 .menu-motto{display:block;margin:0 0 8px;font-family:Cinzel,serif;color:var(--gruen);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem}
 .nav>.menu-link{display:block;padding:16px 0;border-bottom:1px solid #cfe6db;color:var(--blau)}
 .nav-t{display:block;font-family:Cinzel,serif;font-size:1.7rem;font-weight:500;line-height:1.15;letter-spacing:.02em}
 .nav-d{display:block;margin-top:3px;font-size:.9rem;font-weight:500;color:var(--leise)}
 /* Kopfbereich: Modell A hat 90 px (section) + 40 px (.wrap) Abstand über dem Text – auf dem Handy zu viel */
 .hero{padding-top:0}.hero .wrap{padding-top:30px}
 /* Welle am Ende des Kopfbereichs: Die SVG-Kurve (1440×90) wird auf die Breite gestaucht und wirkte auf dem Handy zu
    steil. Die Höhe wächst mit der Breite (390 px → 30 px, 768 px → 54 px), die Kurve bleibt so flach wie am Desktop. */
 .hero::after{height:clamp(30px,7vw,90px)}
 .menu-extra{display:block;margin-top:auto;padding-top:28px}
 .menu-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
 .nav .menu-knoepfe a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:999px;font-weight:700;text-decoration:none}
 .nav .menu-tel{background:var(--gruen);color:#fff;box-shadow:0 10px 22px rgba(64,162,119,.28)}
 .nav .menu-mail{background:#fff;color:var(--blau);box-shadow:inset 0 0 0 2px var(--blau)}
 .menu-info{margin:0 0 4px;font-size:.92rem;color:var(--leise)}
 .menu-info:first-of-type{color:var(--gruen-d);font-weight:600}
 /* Inhalt des Panels erscheint gestaffelt */
 .js .nav>*{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
 .js .menu-offen .nav>*{opacity:1;transform:none}
 .js .menu-offen .nav>:nth-child(1){transition-delay:.08s}.js .menu-offen .nav>:nth-child(2){transition-delay:.14s}
 .js .menu-offen .nav>:nth-child(3){transition-delay:.2s}.js .menu-offen .nav>:nth-child(4){transition-delay:.26s}
 .js .menu-offen .nav>:nth-child(5){transition-delay:.34s}
 body.menu-offen{overflow:hidden}
 .menu-offen .burger{background:var(--mint);border-color:var(--mint)}
 .menu-offen .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 .menu-offen .burger span:nth-child(2){opacity:0}
 .menu-offen .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
 footer .wrap{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (min-width:601px) and (max-width:900px){.kontakt-karten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.logo img,.top.kompakt .logo img{height:44px}.top .wrap{gap:8px}.nav-t{font-size:1.5rem}}
/* „Bewegung reduzieren“: keine Animationen */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .reveal{opacity:1;transform:none}
}
/* Kontrast für kleine Schrift (WCAG AA: 4,5:1), 4. Nov. 2026 nach PageSpeed. Die Grundfarben von Modell A sind für
   kleinen Text zu hell: #40A277 auf Weiß 3,2:1 (auf Mint 2,9:1), #2A88CA auf Weiß 3,8:1 (auf Mint 3,5:1). Große Titel
   (ab 24 px) brauchen nur 3:1 und behalten die Originalfarben. Hier nur dunklere Töne derselben Farben:
   Grün-Schrift #2B7A59 (Mint 4,7:1), Blau-Schrift #2072AE (Mint 4,7:1), Knöpfe mit weißer Schrift --gruen-d (4,6:1). */
:root{--gruen-schrift:#2B7A59;--blau-schrift:#2072AE}
.tel-btn,.nav .menu-tel{background:var(--gruen-d)}
.motto,.menu-motto,.hinweis,.kopf .kopf-hinweis{color:var(--gruen-schrift)}
.btn-zweit{color:var(--blau-schrift);border-color:var(--blau-schrift)}
.plakette .plakette-name,.mehr-btn,.nav a:hover{color:var(--blau-schrift)}
.nav .menu-mail{color:var(--blau-schrift);box-shadow:inset 0 0 0 2px var(--blau-schrift)}