/* ============================================================
   Rehabilitations-Zentrum de Greef – praxis-degreef.de
   Ein Stylesheet, keine Frameworks. Farben aus Logo und alter
   Salient-Fassung (Grün #69C44A, Orange #EA7835), für Text und
   Knöpfe in kontraststarken Varianten (WCAG AA).
   ============================================================ */

/* ---------- Schriften, lokal ausgeliefert ---------- */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lato--v25-normal-400.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/lato--v25-normal-700.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/lato--v25-normal-900.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/nunito--variabel-latin.woff2) format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --orange:#C44D19;          /* Knöpfe, weißer Text: 4,9:1 */
  --orange-tief:#A63F12;
  --orange-marke:#EA7835;    /* nur Flächen und Akzente */
  --orange-hell:#FDF0E7;
  --gruen:#69C44A;           /* Markengrün, nur dekorativ */
  --gruen-text:#3A7621;      /* Text auf Weiß: 5,4:1 */
  --gruen-tief:#2C5A18;
  --gruen-hell:#EEF7E8;
  --rot:#A8182A;
  --gelb:#F5C12A;

  --tinte:#1F2A22;
  --text:#3F4742;
  --text-hell:#5F6862;
  --weiss:#fff;
  --flaeche:#F7F5F0;
  --flaeche-2:#EFEBE3;
  --linie:#E4DFD5;

  --text-font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --leicht-font:'Nunito','Lato',-apple-system,'Segoe UI',Arial,sans-serif;

  --breite:1200px;
  --breite-schmal:780px;
  --radius:14px;
  --radius-gross:22px;
  --schatten:0 1px 2px rgba(31,42,34,.06),0 14px 34px -20px rgba(31,42,34,.35);
  --schatten-hoch:0 2px 6px rgba(31,42,34,.06),0 28px 60px -30px rgba(31,42,34,.5);
  --kopfhoehe:84px;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopfhoehe) + 16px);}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{margin:0;background:var(--weiss);color:var(--text);font:400 18px/1.7 var(--text-font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--gruen-text);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--gruen-tief);}
:focus-visible{outline:3px solid var(--orange-marke);outline-offset:3px;border-radius:4px;}
h1,h2,h3,h4{color:var(--tinte);line-height:1.18;margin:0 0 .5em;text-wrap:balance;}
h1{font-weight:900;font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.015em;}
h2{font-weight:900;font-size:clamp(1.65rem,3vw,2.4rem);letter-spacing:-.01em;}
h3{font-weight:700;font-size:1.25rem;}
h4{font-weight:700;font-size:1.05rem;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:1.2em;}
strong{color:var(--tinte);}
table{border-collapse:collapse;width:100%;}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:8px;}
.skip:focus{top:12px;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px;}
.wrap--schmal{max-width:var(--breite-schmal);}
.abschnitt{padding:clamp(56px,8vw,104px) 0;position:relative;}
.abschnitt--eng{padding:clamp(32px,4vw,48px) 0;}
.abschnitt--flaeche{background:var(--flaeche);}
.abschnitt--gruen{background:var(--gruen-hell);}
.abschnitt--artikel{padding-top:clamp(32px,4vw,56px);}
.kopfzeile{max-width:760px;margin:0 0 clamp(28px,4vw,48px);}
.kopfzeile--mitte{margin-inline:auto;text-align:center;}
.kopfzeile p:last-child{margin-bottom:0;}
.etikett{display:inline-flex;align-items:center;gap:10px;font:700 .8rem/1.2 var(--text-font);
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 14px;}
.etikett::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gruen);
  box-shadow:14px 0 0 var(--orange-marke);margin-right:14px;}
.einleitung{font-size:1.15rem;color:var(--text);}
.zweispalt{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;}
.zweispalt--umgekehrt > :first-child{order:2;}
.zweispalt__bild{position:relative;}
.zweispalt__bild img{border-radius:var(--radius-gross);box-shadow:var(--schatten-hoch);width:100%;object-fit:cover;aspect-ratio:4/3;}
.zweispalt__bild--hoch img{aspect-ratio:4/5;}
.zweispalt__bild::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;
  background:var(--gruen);opacity:.9;right:-26px;bottom:-26px;z-index:-1;}
.zweispalt__bild--orange::after{background:var(--orange-marke);left:-26px;top:-26px;right:auto;bottom:auto;}
@media (max-width:860px){
  .zweispalt{grid-template-columns:1fr;}
  .zweispalt--umgekehrt > :first-child{order:0;}
  .zweispalt__bild::after{display:none;}
}

/* ---------- Oberleiste ---------- */
.oberleiste{background:var(--tinte);color:#DCE3DC;font-size:.85rem;}
.oberleiste__innen{display:flex;justify-content:space-between;gap:18px;padding-top:7px;padding-bottom:7px;}
.oberleiste a{color:#fff;text-decoration:none;}
.oberleiste a:hover{text-decoration:underline;}
@media (max-width:760px){.oberleiste{display:none;}}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s;}
.kopf[data-gescrollt]{box-shadow:0 8px 30px -18px rgba(31,42,34,.45);border-bottom-color:var(--linie);}
.kopf__innen{display:flex;align-items:center;gap:24px;min-height:var(--kopfhoehe);}
.kopf__logo{flex:none;display:block;}
.kopf__logo img{width:92px;height:auto;transition:width .3s;}
.kopf[data-gescrollt] .kopf__logo img{width:76px;}
.kopf__nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.kopf__link,.menue__auf{font:700 1rem/1 var(--text-font);color:var(--tinte);text-decoration:none;
  background:none;border:0;padding:12px 14px;border-radius:10px;cursor:pointer;}
.kopf__link:hover,.menue__auf:hover,.kopf__link[aria-current]{color:var(--gruen-text);background:var(--gruen-hell);}
.menue{position:relative;}
.menue__auf::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s;}
.menue[data-offen] .menue__auf::after{transform:translateY(0) rotate(-135deg);}
.menue__liste{position:absolute;left:0;top:calc(100% + 8px);min-width:320px;background:#fff;border:1px solid var(--linie);
  border-radius:var(--radius);box-shadow:var(--schatten-hoch);padding:8px;display:none;z-index:10;}
.menue__liste--breit{min-width:560px;}
.menue[data-offen] .menue__liste{display:grid;}
.menue__liste a{display:grid;gap:2px;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--tinte);}
.menue__liste a strong{font-weight:700;}
.menue__liste a span{font-size:.85rem;color:var(--text-hell);line-height:1.35;}
.menue__liste a:hover,.menue__liste a[aria-current]{background:var(--gruen-hell);}
.menue:first-child .menue__liste{grid-template-columns:1fr 1fr;min-width:600px;}
.kopf__cta{margin-left:8px;}
.kopf__tel-mobil{display:none;}
.kopf__burger{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--linie);border-radius:12px;background:#fff;cursor:pointer;position:relative;}
.kopf__burger span:first-child,.kopf__burger span:first-child::before,.kopf__burger span:first-child::after{
  position:absolute;left:13px;width:20px;height:2px;background:var(--tinte);border-radius:2px;transition:transform .25s,opacity .25s;content:"";}
.kopf__burger span:first-child{top:22px;}
.kopf__burger span:first-child::before{left:0;top:-7px;}
.kopf__burger span:first-child::after{left:0;top:7px;}
.kopf[data-offen] .kopf__burger span:first-child{background:transparent;}
.kopf[data-offen] .kopf__burger span:first-child::before{transform:translateY(7px) rotate(45deg);}
.kopf[data-offen] .kopf__burger span:first-child::after{transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1080px){
  :root{--kopfhoehe:72px;}
  .kopf__logo img,.kopf[data-gescrollt] .kopf__logo img{width:70px;}
  .kopf__burger{display:block;}
  .kopf__cta{margin-left:auto;padding:12px 16px;font-size:.95rem;}
  .kopf__burger{margin-left:0;}
  .kopf__nav{position:fixed;inset:var(--kopfhoehe) 0 0 0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:12px 20px 120px;overflow-y:auto;display:none;margin:0;border-top:1px solid var(--linie);}
  .kopf[data-offen] .kopf__nav{display:flex;}
  .kopf__link,.menue__auf{width:100%;text-align:left;padding:16px 8px;font-size:1.1rem;border-bottom:1px solid var(--linie);border-radius:0;}
  .menue__auf{display:flex;justify-content:space-between;align-items:center;}
  .menue__liste,.menue:first-child .menue__liste{position:static;min-width:0;box-shadow:none;border:0;padding:4px 0 12px;grid-template-columns:1fr;}
  .kopf__tel-mobil{display:block;margin-top:20px;text-align:center;padding:16px;border-radius:12px;background:var(--gruen-hell);
    color:var(--gruen-tief);font-weight:700;text-decoration:none;}
}
@media (max-width:420px){.kopf__cta{display:none;}.kopf__burger{margin-left:auto;}}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 26px;
  border-radius:999px;font:700 1rem/1.1 var(--text-font);text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;}
.knopf--orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px -12px rgba(196,77,25,.8);}
.knopf--orange:hover{background:var(--orange-tief);color:#fff;transform:translateY(-1px);}
.knopf--gruen{background:var(--gruen-text);color:#fff;}
.knopf--gruen:hover{background:var(--gruen-tief);color:#fff;}
.knopf--hell{background:#fff;color:var(--tinte);border-color:var(--linie);}
.knopf--hell:hover{border-color:var(--gruen);color:var(--gruen-tief);}
.knopf--rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.75);}
.knopf--rand:hover{background:#fff;color:var(--tinte);}
.knopf--gross{min-height:60px;padding:18px 34px;font-size:1.1rem;}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;}
.pfeil::after{content:"→";transition:transform .2s;}
.knopf:hover .pfeil::after,a:hover > .pfeil::after{transform:translateX(3px);}

/* ---------- Startseiten-Hero mit Ken Burns ---------- */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#27302a;isolation:isolate;}
.buehne{position:absolute;inset:0;z-index:-2;}
.buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.buehne img:first-child{opacity:1;}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(20,28,22,.82) 0%,rgba(20,28,22,.55) 45%,rgba(20,28,22,.12) 100%),
             linear-gradient(0deg,rgba(20,28,22,.6) 0%,rgba(20,28,22,0) 45%);}
.hero__inhalt{padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(120px,14vw,170px);max-width:var(--breite);}
.hero__inhalt > *{max-width:680px;}
.hero__dach{font:300 clamp(1.1rem,2vw,1.45rem)/1.3 var(--leicht-font);letter-spacing:.02em;margin:0 0 14px;color:#F3F5F1;}
.hero h1{color:#fff;margin-bottom:18px;}
.hero h1 span{display:block;color:#FFD7B8;}
.hero__text{font-size:1.15rem;color:#EEF1ED;margin-bottom:28px;}
.hero__sterne{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:#fff;text-decoration:none;font-size:.98rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:8px 16px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.hero__sterne:hover{background:rgba(255,255,255,.2);color:#fff;}
.sterne{color:var(--gelb);letter-spacing:2px;}
@media (max-width:760px){
  .hero{min-height:78svh;}
  .hero::before{background:linear-gradient(0deg,rgba(20,28,22,.9) 0%,rgba(20,28,22,.55) 55%,rgba(20,28,22,.25) 100%);}
  .hero__inhalt{padding-bottom:64px;}
}

/* ---------- Vertrauensband unter dem Hero ---------- */
.band{position:relative;z-index:3;margin-top:-72px;}
.band__raster{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--radius-gross);box-shadow:var(--schatten-hoch);overflow:hidden;}
.band__zelle{padding:26px 24px;display:grid;gap:4px;border-left:1px solid var(--linie);}
.band__zelle:first-child{border-left:0;}
.band__zahl{font:900 2rem/1 var(--text-font);color:var(--tinte);}
.band__zahl small{font-size:1rem;font-weight:700;color:var(--text-hell);}
.band__text{font-size:.95rem;color:var(--text-hell);line-height:1.4;}
.band__zelle a{color:inherit;text-decoration:none;}
@media (max-width:860px){.band{margin-top:0;}.band .wrap{padding:0;}
  .band__raster{grid-template-columns:1fr 1fr;border-radius:0;box-shadow:none;border-bottom:1px solid var(--linie);}
  .band__zelle:nth-child(3){border-left:0;}.band__zelle:nth-child(n+3){border-top:1px solid var(--linie);}}

/* ---------- Seitenkopf der Unterseiten (Parallax) ---------- */
.seitenkopf{position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;isolation:isolate;background:#27302a;}
.seitenkopf__bild{position:absolute;inset:0;z-index:-2;}
.seitenkopf__bild img{width:100%;height:100%;object-fit:cover;}
.seitenkopf::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(20,28,22,.86) 0%,rgba(20,28,22,.45) 55%,rgba(20,28,22,.2) 100%);}
.seitenkopf__inhalt{padding-top:80px;padding-bottom:clamp(40px,5vw,64px);}
.seitenkopf__inhalt > *{max-width:760px;}
.seitenkopf h1{color:#fff;margin-bottom:12px;}
.seitenkopf p{color:#EEF1ED;font-size:1.12rem;}
.seitenkopf .etikett{color:#FFD7B8;}
.seitenkopf .knopfreihe{margin-top:22px;}
.seitenkopf--schlicht{min-height:0;background:var(--flaeche);color:var(--text);}
.seitenkopf--schlicht::before{display:none;}
.seitenkopf--schlicht h1{color:var(--tinte);}
.seitenkopf--schlicht p{color:var(--text);}
.seitenkopf--schlicht .etikett{color:var(--orange);}
.seitenkopf--schlicht .seitenkopf__inhalt{padding-top:clamp(40px,5vw,72px);}

/* Parallax-Grundlage: das Bild ist höher als sein Rahmen und wird
   beim Scrollen verschoben (CSS scroll-timeline oder animation.js). */
.parallax{overflow:hidden;}
.parallax > .parallax__ebene{position:absolute;inset:-14% 0;will-change:transform;}
.parallax > .parallax__ebene img{width:100%;height:100%;object-fit:cover;}

/* ---------- Brotkrumen ---------- */
.krumen{background:var(--flaeche);border-bottom:1px solid var(--linie);font-size:.9rem;}
.krumen ol{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;gap:6px;}
.krumen li{display:flex;gap:6px;color:var(--text-hell);}
.krumen li + li::before{content:"›";color:var(--text-hell);}
.krumen a{color:var(--text-hell);text-decoration:none;}
.krumen a:hover{color:var(--gruen-text);text-decoration:underline;}
.krumen [aria-current]{color:var(--tinte);font-weight:700;}
/* Auf Seiten mit Bildkopf stehen die Krumen darunter */
.krumen + .seitenkopf{margin-top:0;}

/* ---------- Karten & Raster ---------- */
.raster{display:grid;gap:24px;}
.raster--2{grid-template-columns:repeat(2,1fr);}
.raster--3{grid-template-columns:repeat(3,1fr);}
.raster--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.raster--4{grid-template-columns:repeat(2,1fr);}.raster--3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.raster--2,.raster--3,.raster--4{grid-template-columns:1fr;}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;height:100%;}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch);}
.karte__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;}
.karte__link:hover{color:inherit;}
.karte__bild{overflow:hidden;aspect-ratio:4/3;background:var(--flaeche);}
.karte__bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.karte:hover .karte__bild img{transform:scale(1.08);}
.karte__text{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px;flex:1;}
.karte__text h3{margin:0;}
.karte__text p{margin:0;font-size:1rem;color:var(--text-hell);}
.karte__meta{font-size:.85rem!important;color:var(--orange)!important;font-weight:700;letter-spacing:.02em;}
.karte__mehr{margin-top:auto;padding-top:10px;font-weight:700;color:var(--gruen-text);}
.karte__mehr::after{content:" →";}
.karte--schlicht{padding:26px;}
.karte--schlicht h3{margin-bottom:6px;}
.karte--schlicht p{margin:0;font-size:1rem;}
.symbol{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gruen-hell);color:var(--gruen-text);margin-bottom:14px;}
.symbol svg{width:26px;height:26px;}
.symbol--orange{background:var(--orange-hell);color:var(--orange);}

/* ---------- Leistungsliste (Therapiespektrum) ---------- */
.leistungsliste{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0;margin:0;}
.leistungsliste li{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:12px 16px;font-weight:700;color:var(--tinte);font-size:1rem;}
.leistungsliste li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gruen);margin-right:10px;vertical-align:middle;}
.leistungsliste a{color:var(--tinte);text-decoration:none;}
.leistungsliste a:hover{color:var(--gruen-text);text-decoration:underline;}
@media (max-width:860px){.leistungsliste{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.leistungsliste{grid-template-columns:1fr;}}

.spektrum{display:grid;gap:18px;}
.spektrum__eintrag{display:grid;grid-template-columns:64px 1fr;gap:20px;background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);padding:26px;}
.spektrum__nr{font:900 1.6rem/1 var(--text-font);color:var(--orange-marke);}
.spektrum__eintrag h2,.spektrum__eintrag h3{font-size:1.35rem;margin-bottom:8px;}
.spektrum__eintrag p{font-size:1rem;}
.spektrum__eintrag p:last-child{margin-bottom:0;}
@media (max-width:560px){.spektrum__eintrag{grid-template-columns:1fr;gap:6px;padding:22px;}}

/* ---------- Parallax-Band ---------- */
.bildband{position:relative;min-height:clamp(420px,62vh,620px);display:flex;align-items:center;color:#fff;isolation:isolate;background:#27302a;}
.bildband::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,28,22,.8),rgba(20,28,22,.35));}
.bildband .parallax__ebene{z-index:-2;}
.bildband h2{color:#fff;}
.bildband p{color:#EEF1ED;font-size:1.12rem;max-width:620px;}
.bildband .etikett{color:#FFD7B8;}

/* ---------- Hakenliste ---------- */
.haken{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:10px;}
.haken li{position:relative;padding-left:36px;}
.haken li::before{content:"";position:absolute;left:0;top:.28em;width:22px;height:22px;border-radius:50%;
  background:var(--gruen-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%233A7621' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;}

/* ---------- Schritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:schritt;list-style:none;padding:0;margin:0;}
.schritte li{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);padding:28px 26px 26px;counter-increment:schritt;}
.schritte li::before{content:counter(schritt);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--orange);color:#fff;font:900 1.15rem/1 var(--text-font);margin-bottom:14px;}
.schritte h3{margin-bottom:6px;}
.schritte p{margin:0;font-size:1rem;}
@media (max-width:860px){.schritte{grid-template-columns:1fr;}}

/* ---------- Zitate / Bewertungen ---------- */
.bewertungskopf{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:32px;}
.bewertungskopf__note{display:flex;align-items:center;gap:14px;}
.bewertungskopf__zahl{font:900 3.2rem/1 var(--text-font);color:var(--tinte);}
.bewertungskopf .sterne{font-size:1.4rem;}
.zitate{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:980px){.zitate{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.zitate{grid-template-columns:1fr;}}
.zitat{margin:0;background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);padding:28px;display:flex;flex-direction:column;gap:14px;}
.zitat blockquote{margin:0;font-size:1.02rem;color:var(--tinte);}
.zitat figcaption{margin-top:auto;font-size:.9rem;color:var(--text-hell);}
.zitat figcaption strong{display:block;}
.zitat--platzhalter{border-style:dashed;background:var(--flaeche);}

/* ---------- Preise ---------- */
.preise{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:760px){.preise{grid-template-columns:1fr;}}
.preis{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);padding:28px;}
.preis h3{margin-bottom:8px;}
.preis__zeilen{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;}
.preis__zeilen li{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--flaeche);border-radius:10px;font-weight:700;color:var(--tinte);}
.preis__zeilen b{color:var(--orange);font-weight:900;}

/* ---------- Fließtext ---------- */
.fliess h2{margin-top:1.6em;}
.fliess h3{margin-top:1.4em;}
.fliess > :first-child{margin-top:0;}
.fliess figure{margin:2em 0;}
.fliess figure img{border-radius:var(--radius);}
.fliess figcaption{font-size:.9rem;color:var(--text-hell);margin-top:8px;}
.fliess table{margin:1.2em 0 1.6em;font-size:1rem;}
.fliess th,.fliess td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top;}
.fliess thead th{background:var(--flaeche);}
.hinweis{background:var(--gruen-hell);border-left:4px solid var(--gruen);border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:1.4em 0;}
.hinweis p:last-child{margin:0;}
.hinweis--orange{background:var(--orange-hell);border-left-color:var(--orange-marke);}
.hinweis--klein{font-size:.92rem;}
.artikelkopf{padding-top:clamp(32px,5vw,64px);}
.artikelkopf h1{font-size:clamp(1.9rem,4vw,3rem);}
.artikelkopf__meta{color:var(--text-hell);font-size:.95rem;}
.artikelkopf__bild{margin:28px 0 0;}
.artikelkopf__bild img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--radius-gross);}
.artikelfuss__leistung{font-weight:700;}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;}
.faq details{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 22px;font-weight:700;color:var(--tinte);position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;
  background:var(--gruen-hell);color:var(--gruen-text);display:grid;place-items:center;font:700 1.2rem/1 var(--text-font);transition:transform .25s;}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details > div{padding:0 22px 16px;}
.faq details > div p{font-size:1rem;}

/* ---------- CTA ---------- */
.abschnitt--cta{padding-top:0;}
.abschnitt--flaeche + .abschnitt--cta{padding-top:clamp(56px,8vw,104px);background:var(--flaeche);}
.cta{display:grid;grid-template-columns:1.3fr auto;gap:28px;align-items:center;background:var(--tinte);color:#DDE4DD;
  border-radius:var(--radius-gross);padding:clamp(28px,5vw,56px);position:relative;overflow:hidden;isolation:isolate;}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;z-index:-1;}
.cta::before{width:220px;height:220px;background:var(--orange-marke);opacity:.85;right:-70px;top:-90px;}
.cta::after{width:120px;height:120px;background:var(--gruen);opacity:.85;right:150px;bottom:-70px;}
.cta h2{color:#fff;}
.cta p{margin:0;max-width:560px;}
.cta .knopfreihe{justify-content:flex-end;}
@media (max-width:860px){.cta{grid-template-columns:1fr;}.cta .knopfreihe{justify-content:flex-start;}}

/* ---------- Kontakt ---------- */
.kontaktkarte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);padding:28px;box-shadow:var(--schatten);}
.kontaktkarte h2,.kontaktkarte h3{font-size:1.3rem;}
.kontaktkarte dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 18px;}
.kontaktkarte dt{font-weight:700;color:var(--tinte);}
.kontaktkarte dd{margin:0;}
.zeiten{font-size:1rem;margin:0 0 12px;}
.zeiten th,.zeiten td{padding:8px 0;border-bottom:1px solid var(--linie);text-align:left;font-weight:400;}
.zeiten th{padding-right:14px;color:var(--tinte);font-weight:700;}
.merkmale{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 18px;}
.merkmale li{display:inline-flex;align-items:center;gap:8px;background:var(--gruen-hell);color:var(--gruen-tief);font-weight:700;font-size:.92rem;padding:8px 14px;border-radius:999px;}
.merkmale svg{width:18px;height:18px;}
.karte-anfahrt{position:relative;border-radius:var(--radius-gross);overflow:hidden;border:1px solid var(--linie);}
.karte-anfahrt img{width:100%;height:auto;}
.karte-anfahrt figcaption{position:absolute;right:8px;bottom:6px;font-size:.72rem;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:4px;}

/* ---------- Formular ---------- */
.formular{display:grid;gap:18px;}
.formular__zeile{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:640px){.formular__zeile{grid-template-columns:1fr;}}
.feld{display:grid;gap:6px;}
.feld label,.feldsatz legend{font-weight:700;color:var(--tinte);font-size:.98rem;}
.feld input,.feld textarea,.feld select{font:inherit;font-size:1rem;color:var(--tinte);background:#fff;border:1.5px solid #CFC9BE;border-radius:12px;padding:13px 15px;width:100%;}
.feld textarea{min-height:150px;resize:vertical;}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--gruen-text);box-shadow:0 0 0 4px rgba(105,196,74,.25);}
.feld [aria-invalid]{border-color:#B3261E;}
.feld__hilfe{font-size:.88rem;color:var(--text-hell);margin:0;}
.feld__fehler{font-size:.9rem;color:#B3261E;margin:0;font-weight:700;}
.feld--datei input{padding:12px;background:var(--flaeche);border-style:dashed;}
.kontrolle{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;}
.kontrolle input{width:22px;height:22px;flex:none;margin-top:3px;accent-color:var(--gruen-text);}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.meldung{border-radius:12px;padding:0;}
.meldung--ok,.meldung--fehler{padding:18px 20px;}
.meldung--ok{background:var(--gruen-hell);color:var(--gruen-tief);font-weight:700;}
.meldung--fehler{background:#FCE8E6;color:#8C1D18;}

/* ---------- Online-Termin (Zwei-Klick) ---------- */
.termin{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);overflow:hidden;box-shadow:var(--schatten);}
.termin__platzhalter{padding:clamp(28px,5vw,48px);display:grid;gap:14px;justify-items:start;background:linear-gradient(135deg,var(--gruen-hell),#fff 70%);}
.termin__platzhalter p{margin:0;max-width:640px;}
.termin__klein{font-size:.9rem;color:var(--text-hell);}
.termin iframe{display:block;width:100%;height:780px;border:0;}

/* ---------- Bewertungsseite ---------- */
.bewerten{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;}
.bewerten__qr{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);padding:24px;text-align:center;}
.bewerten__qr img{width:220px;height:220px;margin:0 auto 10px;}
@media (max-width:760px){.bewerten{grid-template-columns:1fr;}.bewerten__qr{display:none;}}

/* ---------- Team ---------- */
.person{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-gross);overflow:hidden;}
.person__foto{aspect-ratio:1/1;background:linear-gradient(135deg,var(--gruen-hell),var(--orange-hell));display:grid;place-items:center;}
.person__foto span{font:900 3rem/1 var(--text-font);color:var(--orange);opacity:.7;}
.person__text{padding:22px 24px;}
.person__text h3{margin-bottom:2px;}
.person__rolle{color:var(--orange);font-weight:700;font-size:.95rem;margin-bottom:10px;}
.person__text p{font-size:.98rem;}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;}
.galerie figure{margin:0;border-radius:var(--radius-gross);overflow:hidden;position:relative;}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.galerie figure:hover img{transform:scale(1.06);}
.galerie figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--tinte);font-size:.88rem;font-weight:700;padding:6px 12px;border-radius:999px;}
@media (max-width:760px){.galerie{grid-template-columns:1fr 1fr;}.galerie figure:first-child{grid-column:1/-1;}.galerie figure:first-child img{aspect-ratio:4/3;}}

/* ---------- Downloads ---------- */
.downloads{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.downloads a{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--linie);border-radius:12px;text-decoration:none;color:var(--tinte);font-weight:700;background:#fff;}
.downloads a:hover{border-color:var(--gruen);}
.downloads a::before{content:"PDF";font:900 .7rem/1 var(--text-font);background:var(--orange);color:#fff;padding:6px 7px;border-radius:6px;}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--tinte);color:#C9D1C9;padding:clamp(56px,7vw,88px) 0 0;font-size:.98rem;margin-top:0;}
.fuss a{color:#fff;text-decoration:none;}
.fuss a:hover{text-decoration:underline;color:#fff;}
.fuss__raster{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:40px;}
@media (max-width:980px){.fuss__raster{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.fuss__raster{grid-template-columns:1fr;}}
.fuss__name{font:900 1.15rem/1.3 var(--text-font);color:#fff;}
.fuss__titel{font:700 .82rem/1.2 var(--text-font);letter-spacing:.14em;text-transform:uppercase;color:#9FD68A;margin:0 0 16px;}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.fuss .zeiten th,.fuss .zeiten td{border-bottom-color:rgba(255,255,255,.12);color:#C9D1C9;font-size:.95rem;}
.fuss .zeiten th{color:#fff;}
.fuss__klein{font-size:.88rem;}
.fuss__route{display:inline-block;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 16px;}
.fuss__siegel{width:150px;border-radius:8px;margin-top:14px;}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding:22px 0 28px;font-size:.88rem;}
.fuss__unten ul{display:flex;flex-wrap:wrap;gap:8px 20px;}

/* ---------- WhatsApp und Schnellleiste ---------- */
.wa-knopf{position:fixed;right:20px;bottom:24px;z-index:90;width:58px;height:58px;border-radius:50%;background:#1F8E3A;color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);transition:transform .2s;}
.wa-knopf:hover{transform:scale(1.06);color:#fff;}
.wa-knopf svg{width:32px;height:32px;}
.schnellleiste{display:none;}
@media (max-width:1080px){
  .schnellleiste{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.12);}
  .schnellleiste a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:12px;font-weight:700;text-decoration:none;font-size:1.02rem;}
  .schnellleiste svg{width:20px;height:20px;}
  .schnellleiste__anruf{background:var(--gruen-hell);color:var(--gruen-tief);}
  .schnellleiste__termin{background:var(--orange);color:#fff;}
  .schnellleiste__termin:hover{color:#fff;}
  body{padding-bottom:74px;}
  .wa-knopf{bottom:86px;right:14px;width:52px;height:52px;}
  .wa-knopf svg{width:28px;height:28px;}
}

/* ============================================================
   Bewegung – nur wenn niemand „Bewegung reduzieren" eingestellt hat.
   Ohne JavaScript und ohne diese Regeln ist alles sichtbar.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  /* --- Ken Burns: drei Bilder, je 7 s, langsamer Zoom und Schwenk,
         weiche Überblendung. Das erste Bild steht sofort (negative
         Verzögerung), damit das LCP-Bild nicht erst einblendet. --- */
  .buehne img{animation:kenburns 21s linear infinite both;transform-origin:var(--kb-ursprung,50% 50%);}
  .buehne img:nth-child(1){animation-delay:-.9s;--kb-ursprung:30% 60%;}
  .buehne img:nth-child(2){animation-delay:6.1s;--kb-ursprung:70% 40%;}
  .buehne img:nth-child(3){animation-delay:13.1s;--kb-ursprung:50% 30%;}
  .buehne--einzeln img{animation:kenburns-einzeln 24s ease-in-out infinite alternate;opacity:1;}
  @keyframes kenburns{
    0%  {opacity:0;transform:scale(1.02) translate3d(0,0,0);}
    4%  {opacity:1;}
    33% {opacity:1;}
    40% {opacity:0;transform:scale(1.16) translate3d(-1.5%,-1%,0);}
    100%{opacity:0;transform:scale(1.16) translate3d(-1.5%,-1%,0);}
  }
  @keyframes kenburns-einzeln{
    from{transform:scale(1.02) translate3d(0,0,0);}
    to  {transform:scale(1.14) translate3d(-2%,-1.5%,0);}
  }

  /* --- Parallax per Scroll-Timeline, wo der Browser es kann.
         Sonst übernimmt animation.js (Klasse .parallax--js). --- */
  @supports (animation-timeline: view()){
    .parallax > .parallax__ebene{animation:parallax linear both;animation-timeline:view();animation-range:cover;}
    @keyframes parallax{from{transform:translate3d(0,-10%,0);}to{transform:translate3d(0,10%,0);}}
  }

  /* --- Einblenden beim Scrollen --- */
  .js [data-anim]{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--anim-verzug,0ms);}
  .js [data-anim="hoch"]{transform:translate3d(0,28px,0);}
  .js [data-anim="seite"]{transform:translate3d(-28px,0,0);}
  .js [data-anim="zoom"]{transform:scale(.96);}
  .js [data-anim].sichtbar{opacity:1;transform:none;}

  /* Hero-Text beim Laden */
  .hero__inhalt > *{animation:auftauchen .9s cubic-bezier(.2,.7,.2,1) both;}
  .hero__inhalt > :nth-child(2){animation-delay:.08s;}
  .hero__inhalt > :nth-child(3){animation-delay:.16s;}
  .hero__inhalt > :nth-child(4){animation-delay:.24s;}
  .hero__inhalt > :nth-child(5){animation-delay:.32s;}
  @keyframes auftauchen{from{opacity:0;transform:translate3d(0,22px,0);}to{opacity:1;transform:none;}}
}

/* Bildebene im Seitenkopf und im Hero liegt hinter dem Verlauf */
.seitenkopf > .parallax__ebene,.hero > .parallax__ebene{z-index:-2;}
.h3{font-size:1.25rem;font-weight:700;}
.hero--klein{min-height:min(70vh,620px);}
.hero--klein .hero__inhalt{padding-bottom:clamp(56px,8vw,96px);}
.oberleiste strong,.cta strong,.bildband strong,.fuss strong{color:inherit;}
/* In Flex-Containern schrumpft .wrap sonst auf Inhaltsbreite und rutscht zur Mitte */
.hero > .wrap,.seitenkopf > .wrap,.bildband > .wrap{width:100%;}
.band__zelle a{display:grid;gap:4px;}
@media (max-width:760px){
  body{font-size:17px;}
  .hero__text{font-size:1.02rem;line-height:1.6;margin-bottom:22px;}
  .hero__dach{font-size:1rem;}
  .hero .knopf--gross{min-height:52px;padding:14px 24px;font-size:1rem;}
  /* Auf dem Handy übernimmt die feste Leiste unten Anruf und Termin */
  .kopf__cta{display:none;}
  .kopf__burger{margin-left:auto;}
  .seitenkopf{min-height:clamp(300px,46vh,420px);}
  .seitenkopf p{font-size:1.02rem;}
}
@media (max-width:1080px){
  /* backdrop-filter macht .kopf zum Bezugsrahmen für position:fixed –
     das Menü hängt deshalb absolut unter der (sticky) Kopfzeile. */
  .kopf__nav{position:absolute;inset:auto 0 auto 0;top:100%;height:calc(100dvh - var(--kopfhoehe));}
  body:has(.kopf[data-offen]){overflow:hidden;}
}
.zitate__quelle{margin-top:18px;font-size:.88rem;color:var(--text-hell);}
.zitat figcaption a{color:inherit;}
/* Unsichtbare Brücke über die 8-px-Lücke zwischen Menüpunkt und Liste –
   sonst löst die Maus auf dem Weg nach unten "mouseleave" aus. */
@media (min-width:1081px){
  .menue__liste::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
}
/* Felder oben ausrichten: Hat das Nachbarfeld einen Hinweistext,
   darf das Eingabefeld nicht auf die ganze Zeilenhöhe wachsen. */
.formular__zeile{align-items:start;}
.feld{align-content:start;}