/* ============ System ============ */
:root{
  /* Farbe */
  --papier:#FBFBF8;
  --weiss:#FFFFFF;
  --ton:#F2F4EC;
  --ton-2:#E9EDE0;
  --linie:#E3E8DA;
  --linie-2:#EEF1E7;
  --wald:#1E2A16;
  --wald-2:#2C3B21;
  --text:#4C5347;
  --text-2:#767D6C;
  --gruen:#87B725;
  --gruen-d:#5C8215;
  --gruen-h:#F0F6E1;
  --fokus:#2D6E00;
  /* Töne auf dunklem Grund (Kopfbereich, Rezeptkasten, Fußbereich).
     Stehen hier als Variablen, damit sie bei einer anderen Farbwahl in der
     Administration mitwandern. */
  --akzent-hell:#C4E27A;
  --gruen-rand:#CADF9B;
  --akzent3-hell:#E8C377;
  --auf-akzent:#14200A;
  --auf-dunkel:#DCE3D0;
  --auf-dunkel-2:#C5CFB8;
  --auf-dunkel-3:#9FAB90;

  /* Zweitakzente – tragen die Themenbereiche */
  --petrol:#2F7A6B;
  --petrol-d:#256257;
  --petrol-h:#E6F1EE;
  --ocker:#C08A22;
  --ocker-d:#8E6510;
  --ocker-h:#F8F0DE;

  /* Abstände (8er-Raster) */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --gutter:24px;
  --mw:1200px;
  --r:14px; --r-s:10px; --r-xs:6px;

  /* Schrift */
  --grundschrift:17px;
  --logo-h:54px;
  --logo-h-fuss:75px;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Tiefe */
  --e1:0 1px 2px rgba(30,42,22,.05);
  --e2:0 1px 2px rgba(30,42,22,.04), 0 8px 24px rgba(30,42,22,.06);
  --e3:0 2px 6px rgba(30,42,22,.06), 0 20px 48px rgba(30,42,22,.11);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--ui);font-size:var(--grundschrift);line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--wald);margin:0;font-weight:400;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:var(--r-xs)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--wald);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--mw);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(56px,7vw,var(--s8))}
/* Entfernte Abschnitte werden vom Browser erst beim Herankommen gerechnet.
   Die dafür angenommene Höhe von 800 Pixeln liegt aber weit unter der
   tatsächlichen – beim ersten Durchscrollen wuchs die Seite dadurch um rund
   3000 Pixel und die Bildlaufleiste sprang. Der Startvorteil von wenigen
   Hundertstelsekunden wiegt das nicht auf. */
.tief{content-visibility:visible}

/* Typo-Bausteine */
.eyebrow{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gruen-d);margin:0 0 var(--s2);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gruen);border-radius:2px;flex:none}
.eyebrow.zentriert{justify-content:center}
h2.titel{font-size:clamp(29px,3.9vw,46px);margin-bottom:var(--s2)}
h3.unter{font-size:clamp(22px,2.6vw,29px)}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--text-2);max-width:60ch}
.kopf{max-width:60ch;margin-bottom:var(--s6)}
.kopf.zentriert{margin-inline:auto;text-align:center}
.klein{font-size:14.5px;color:var(--text-2)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:15.5px;line-height:1;padding:14px 24px;border-radius:var(--r-s);text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s ease,box-shadow .2s ease}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.btn-p{background:var(--gruen);color:var(--auf-akzent);box-shadow:0 1px 2px rgba(92,130,21,.2);position:relative;overflow:hidden;isolation:isolate}
.btn-p::after{content:"";position:absolute;inset:0 auto 0 -40%;width:35%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-120%) skewX(-18deg);transition:transform .7s cubic-bezier(.3,.8,.3,1)}
.btn-p:hover::after{transform:translateX(420%) skewX(-18deg)}
.btn-p:hover{background:var(--gruen-d);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(92,130,21,.26)}
.btn-s{background:var(--weiss);border-color:var(--linie);color:var(--wald)}
.btn-s:hover{border-color:var(--gruen);color:var(--gruen-d);transform:translateY(-1px)}
.btn-geist{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.1)}
.btn-geist:hover{background:#fff;color:var(--wald);border-color:#fff;transform:translateY(-1px)}
.btn-klein{padding:11px 18px;font-size:14.5px}

/* ============ Kopfzeile ============ */
.meldeleiste{background:var(--wald);color:var(--auf-dunkel-2);font-size:13.5px}
.meldeleiste .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s4);justify-content:space-between;padding-block:9px}
.meldeleiste a{text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.meldeleiste a:hover{color:var(--gruen)}
.meldeleiste svg{width:14px;height:14px;stroke:var(--gruen);fill:none;stroke-width:1.8;flex:none}
.leiste-rechts{display:flex;flex-wrap:wrap;gap:6px var(--s4)}

header{position:sticky;top:0;z-index:60;background:rgba(251,251,248,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
header.haftet{border-bottom-color:var(--linie);box-shadow:0 4px 20px rgba(30,42,22,.05)}
.fortschritt{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--petrol),var(--gruen) 55%,var(--ocker));
  opacity:0;transition:opacity .3s}
header.haftet .fortschritt{opacity:1}
header .wrap{display:flex;align-items:center;gap:var(--s4);padding-block:12px}
.marke{display:flex;align-items:center;text-decoration:none;flex:none;min-width:0;
  max-height:var(--logo-h);overflow:hidden}
.marke img{height:var(--logo-h);width:auto;max-width:min(58vw,320px);object-fit:contain;transition:height .25s}
header.haftet .marke img{height:calc(var(--logo-h) * .85)}
/* Ohne Logo: Name als Schriftzug */
.marke-text{flex-direction:column;align-items:flex-start;gap:1px;max-height:none;line-height:1.15}
.marke-name{font-family:var(--display);font-size:clamp(18px,2.2vw,23px);color:var(--wald);white-space:nowrap}
.marke-unter{font-size:12.5px;font-weight:600;color:var(--gruen-d);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{text-decoration:none;font-size:15.5px;font-weight:500;color:var(--text);padding:9px 13px;border-radius:var(--r-s);position:relative;transition:color .2s,background .2s}
.nav a:hover{color:var(--wald);background:var(--ton)}
.nav a[aria-current="true"]{color:var(--gruen-d)}
.nav a[aria-current="true"]::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--gruen);border-radius:2px}
.nav .btn{margin-left:var(--s2)}
.menuknopf{display:none;margin-left:auto;background:var(--weiss);border:1px solid var(--linie);width:46px;height:46px;border-radius:var(--r-s);cursor:pointer;place-items:center}
.menuknopf span{display:block;width:19px;height:2px;background:var(--wald);border-radius:2px;position:relative;transition:background .2s}
.menuknopf span::before,.menuknopf span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--wald);border-radius:2px;transition:transform .25s}
.menuknopf span::before{top:-6px}.menuknopf span::after{top:6px}
.menuknopf[aria-expanded="true"] span{background:transparent}
.menuknopf[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menuknopf[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ============ Hero ============ */
.hero{position:relative;background:var(--wald);isolation:isolate;padding-block:0}
.hero-bild{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--wald)}
.hero-bild figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.hero-bild figure.sichtbar{opacity:1}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;transform:scale(1.03)}
.js .hero-bild figure.sichtbar img{animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.11)}}
.hero-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(97deg,rgba(20,29,13,.6) 0%,rgba(20,29,13,.49) 38%,rgba(20,29,13,.2) 68%,rgba(20,29,13,.29) 100%)}
.hero .wrap{padding-block:clamp(64px,9vw,120px);position:relative}

/* Motivwechsler */
.hero-punkte{position:absolute;left:var(--gutter);bottom:clamp(20px,3vw,32px);display:flex;gap:10px;z-index:3}
.hero-punkte button{width:34px;height:4px;border:0;padding:0;border-radius:99px;background:rgba(255,255,255,.3);cursor:pointer;
  position:relative;overflow:hidden;transition:background .3s,width .35s}
.hero-punkte button::after{content:"";position:absolute;inset:0;width:0;background:var(--gruen);border-radius:99px}
.hero-punkte button[aria-selected="true"]{width:54px;background:rgba(255,255,255,.45)}
.hero-punkte button[aria-selected="true"]::after{animation:fuellen 7s linear forwards}
@keyframes fuellen{from{width:0}to{width:100%}}
.hero-punkte button:hover{background:rgba(255,255,255,.62)}
.hero-motiv{position:absolute;right:var(--gutter);bottom:clamp(20px,3vw,32px);z-index:3;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);
  display:flex;align-items:center;gap:9px}
.hero-motiv::before{content:"";width:18px;height:1px;background:rgba(255,255,255,.5)}

/* Überschrift zeilenweise */
.zeile{display:block;overflow:hidden;padding-bottom:.04em}
.js .zeile > span{display:block;transform:translateY(106%);animation:aufsteigen .9s cubic-bezier(.22,.85,.25,1) both}
.js .zeile:nth-of-type(2) > span{animation-delay:.1s}
.js .hero .eyebrow,.js .hero .lead,.js .hero-cta,.js .hero-ruf{animation:einblenden .9s ease both}
.js .hero .lead{animation-delay:.24s}
.js .hero-cta{animation-delay:.34s}
.js .hero-ruf{animation-delay:.44s}
@keyframes aufsteigen{to{transform:none}}
@keyframes einblenden{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-text{max-width:min(600px,92%)}
.hero h1{color:#fff;font-size:clamp(40px,6.2vw,74px);font-weight:300;line-height:1.02;letter-spacing:-.022em;margin-bottom:var(--s4)}
.hero h1 em{font-style:italic;color:var(--akzent-hell)}
.hero .lead{color:var(--auf-dunkel);max-width:44ch;font-size:clamp(17px,1.7vw,19.5px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.hero-ruf{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s4);color:#fff;text-decoration:none;font-size:16px;font-weight:600;letter-spacing:.01em}
.hero-ruf svg{width:18px;height:18px;stroke:var(--gruen);fill:none;stroke-width:1.9}
.hero-ruf:hover{color:var(--akzent-hell)}
.hero-name{margin:0 0 var(--s3);color:#fff;font-family:var(--display);font-size:clamp(21px,2.5vw,28px);line-height:1.22;font-weight:400}
.hero-name span{display:block;font-family:var(--ui);font-size:clamp(14.5px,1.5vw,16.5px);font-weight:600;letter-spacing:.01em;color:var(--akzent-hell);margin-top:4px}
.hero-marker{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s4) 0 0}
.hero-marker span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#E4EBD8;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:6px 14px;backdrop-filter:blur(4px)}
.hero-marker svg{width:14px;height:14px;stroke:var(--akzent-hell);fill:none;stroke-width:2}

/* Statusband unter dem Hero */
.statusband{background:var(--weiss);border-block:1px solid var(--linie)}
.statusband .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linie);padding-inline:0}
.sb-feld{--akz:var(--gruen);--akz-d:var(--gruen-d);--akz-h:var(--gruen-h);
  background:var(--weiss);padding:var(--s4) clamp(16px,2.4vw,32px);display:flex;align-items:center;gap:var(--s3);text-decoration:none;
  position:relative;transition:background .25s}
.sb-feld::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--akz);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.3,.8,.3,1)}
a.sb-feld:hover{background:var(--akz-h)}
a.sb-feld:hover::before{transform:scaleX(1)}
.sb-feld.sb-termin{--akz:var(--petrol);--akz-d:var(--petrol-d);--akz-h:var(--petrol-h)}
.sb-feld.sb-rezept{--akz:var(--ocker);--akz-d:var(--ocker-d);--akz-h:var(--ocker-h)}
.sb-icon{width:42px;height:42px;border-radius:var(--r-s);background:var(--akz-h);display:grid;place-items:center;flex:none;
  transition:background .3s,transform .4s cubic-bezier(.3,1.4,.5,1)}
.sb-icon svg{width:20px;height:20px;stroke:var(--akz-d);fill:none;stroke-width:1.8;transition:stroke .3s}
a.sb-feld:hover .sb-icon{background:var(--akz);transform:translateY(-2px) rotate(-6deg)}
a.sb-feld:hover .sb-icon svg{stroke:#fff}
.sb-feld b{display:block;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:2px}
.sb-feld strong{font-family:var(--ui);font-size:16.5px;font-weight:600;color:var(--wald);line-height:1.3;display:block}
.punkt{width:9px;height:9px;border-radius:50%;background:var(--auf-dunkel-3);flex:none;display:inline-block;margin-right:7px;vertical-align:1px}
.punkt.offen{background:var(--gruen);box-shadow:0 0 0 3px rgba(135,183,37,.22)}

/* ============ Ordination ============ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.bild-duo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--s2)}
.bild-duo figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--ton-2)}
.bild-duo figure:first-child{grid-column:1/-1}
.bild-duo img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.bild-duo figure:hover img{transform:scale(1.03)}
.merksatz{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.4vw,27px);color:var(--gruen-d);line-height:1.35;margin:0 0 var(--s4);padding-left:var(--s4);border-left:2px solid var(--gruen)}
.vorteile{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}
.vorteile li{display:flex;gap:var(--s3);align-items:flex-start}
.vorteile .sym{width:36px;height:36px;border-radius:var(--r-s);background:var(--akz-h,var(--gruen-h));display:grid;place-items:center;flex:none;margin-top:2px}
.vorteile .sym svg{width:18px;height:18px;stroke:var(--akz-d,var(--gruen-d));fill:none;stroke-width:1.8}
.vorteile li:nth-child(2){--akz-h:var(--petrol-h);--akz-d:var(--petrol-d)}
.vorteile li:nth-child(3){--akz-h:var(--ocker-h);--akz-d:var(--ocker-d)}
.vorteile b{display:block;font-family:var(--ui);font-size:16.5px;font-weight:700;color:var(--wald);margin-bottom:1px}
.vorteile p{font-size:15px;color:var(--text-2);line-height:1.58;margin:0}
.hinweis-karte{margin-top:var(--s4);background:var(--gruen-h);border:1px solid color-mix(in srgb,var(--gruen) 30%,transparent);
  border-radius:var(--r);padding:var(--s3) var(--s4);display:flex;gap:var(--s3);align-items:flex-start}
.hinweis-karte svg{width:20px;height:20px;stroke:var(--gruen-d);fill:none;stroke-width:1.8;flex:none;margin-top:3px}
.hinweis-karte p{font-size:14.5px;color:var(--text);margin:0;line-height:1.55}
.hinweis-karte b{color:var(--gruen-d)}
.werte{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s4) 0 var(--s5)}
.werte span{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--wald-2);background:var(--weiss);border:1px solid var(--linie);border-radius:999px;padding:7px 15px}

/* ============ Leistungen ============ */
.leistungen{background:var(--ton)}
.l-raster{columns:3;column-gap:var(--s3)}
.l-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s5) var(--s4) var(--s4);position:relative;overflow:hidden;
  break-inside:avoid;margin-bottom:var(--s3);
  transition:border-color .25s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
.l-karte{--akz:var(--gruen);--akz-d:var(--gruen-d);--akz-h:var(--gruen-h)}
.l-karte.diagnostik{--akz:var(--petrol);--akz-d:var(--petrol-d);--akz-h:var(--petrol-h)}
.l-karte.therapie{--akz:var(--ocker);--akz-d:var(--ocker-d);--akz-h:var(--ocker-h)}
.l-karte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--akz);transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.l-karte:hover::before{transform:scaleY(1)}
.l-karte:hover{border-color:color-mix(in srgb,var(--akz) 55%,transparent);box-shadow:var(--e2);transform:translateY(-3px)}
.l-karte .sym{width:40px;height:40px;border-radius:var(--r-s);background:var(--akz-h);display:grid;place-items:center;margin-bottom:var(--s3);
  transition:background .3s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.l-karte:hover .sym{background:var(--akz);transform:rotate(-7deg) scale(1.06)}
.l-karte .sym svg{width:20px;height:20px;stroke:var(--akz-d);fill:none;stroke-width:1.7;transition:stroke .3s}
.l-karte:hover .sym svg{stroke:#fff}
.l-bereich{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--akz-d);
  background:var(--akz-h);border-radius:99px;padding:4px 10px;display:inline-block;margin-bottom:var(--s2)}
.l-karte h3{font-size:21px;margin-bottom:var(--s1)}
.l-karte p{font-size:15px;line-height:1.6;color:var(--text-2);margin:0}
.l-legende{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:center;margin-bottom:var(--s5);font-size:13.5px;font-weight:600;color:var(--text-2)}
.l-legende span{display:inline-flex;align-items:center;gap:8px}
.l-legende i{width:10px;height:10px;border-radius:3px;display:inline-block}
.l-fuss{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s4)}
.l-fuss p{margin:0;font-size:15.5px}

/* ============ Team ============ */
.team{background:var(--papier)}
.t-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
.t-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;display:block}
/* Das Foto saß in einer schmalen Spalte neben dem Text und wurde über die
   gesamte Kartenhöhe gestreckt – bei langen Qualifikationslisten blieb davon
   ein Streifen übrig, der die Person seitlich abschnitt. Jetzt steht es oben
   über die ganze Breite: deutlich größer und nur noch oben/unten beschnitten. */
.t-foto{background:var(--ton-2)}
.t-foto img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center var(--bildpos,22%)}
.t-inhalt{padding:var(--s4)}
.t-rolle{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gruen-d);margin-bottom:6px}
.t-karte h3{font-size:24px;margin-bottom:var(--s2)}
.t-karte p{font-size:15px;color:var(--text-2);line-height:1.6}
.qual-titel{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin:var(--s4) 0 var(--s1)}
.qual{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.qual li{font-size:13px;font-weight:500;color:var(--wald-2);background:var(--ton);border-radius:var(--r-xs);padding:5px 11px;line-height:1.35}

/* ============ Galerie ============ */
.galerie{background:var(--ton)}
.g-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.g-raster button{padding:0;border:0;background:var(--ton-2);border-radius:var(--r);overflow:hidden;cursor:zoom-in;position:relative;display:block;aspect-ratio:4/3}
.g-raster button.hoch{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.g-raster img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.g-raster button:hover img{transform:scale(1.04)}
.g-raster figcaption,.g-bu{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;text-align:left;
  background:linear-gradient(transparent,rgba(20,29,13,.72));color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.g-raster button:hover .g-bu,.g-raster button:focus-visible .g-bu{opacity:1;transform:none}
dialog.lupe{border:0;padding:0;background:transparent;max-width:min(94vw,1200px);max-height:92vh;overflow:visible}
dialog.lupe::backdrop{background:rgba(16,22,12,.88);backdrop-filter:blur(3px)}
dialog.lupe img{border-radius:var(--r);max-height:86vh;width:auto;max-width:100%;margin-inline:auto;box-shadow:var(--e3)}
dialog.lupe .zu{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;background:var(--weiss);border:0;cursor:pointer;display:grid;place-items:center;box-shadow:var(--e2)}
dialog.lupe .zu svg{width:19px;height:19px;stroke:var(--wald);fill:none;stroke-width:2}
dialog.lupe p{color:var(--auf-dunkel);text-align:center;font-size:14px;margin:var(--s2) 0 0}
.lupe-huelle{position:relative}

/* ============ News ============ */
.news{background:var(--papier)}
.n-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.n-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .3s,transform .3s cubic-bezier(.2,.8,.3,1),border-color .25s}
.n-karte{--akz:var(--gruen);--akz-d:var(--gruen-d);--akz-h:var(--gruen-h)}
.n-karte.n-petrol{--akz:var(--petrol);--akz-d:var(--petrol-d);--akz-h:var(--petrol-h)}
.n-karte.n-ocker{--akz:var(--ocker);--akz-d:var(--ocker-d);--akz-h:var(--ocker-h)}
.n-karte:hover{box-shadow:var(--e2);transform:translateY(-3px);border-color:color-mix(in srgb,var(--akz) 50%,transparent)}
.n-bild{aspect-ratio:16/9;overflow:hidden;background:var(--ton-2);position:relative}
.n-bild::after{content:"";position:absolute;inset:0;background:var(--akz);mix-blend-mode:multiply;opacity:0;transition:opacity .4s}
.n-karte:hover .n-bild::after{opacity:.12}
.n-bild img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.n-karte:hover .n-bild img{transform:scale(1.04)}
.n-text{padding:var(--s4);display:flex;flex-direction:column;flex:1}
.n-karte .n-datum{font-size:11.5px;line-height:1.4;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--akz-d);background:var(--akz-h);
  border-radius:99px;padding:5px 11px;display:inline-block;margin-bottom:var(--s2);align-self:flex-start}
.n-karte h3{font-size:20px;margin-bottom:var(--s1)}
.n-karte p{font-size:15px;color:var(--text-2);line-height:1.6;flex:1}
.n-mehr{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linie-2);font-size:14.5px;font-weight:600;color:var(--wald);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.n-mehr svg{width:15px;height:15px;stroke:var(--akz-d);fill:none;stroke-width:2;transition:transform .25s}
.n-karte:hover .n-mehr svg{transform:translateX(4px)}
.n-karte:hover .n-mehr{color:var(--akz-d)}

/* ============ Rezept-Band ============ */
.rezept{background:var(--wald);color:var(--auf-dunkel-2);position:relative;overflow:hidden}
.rezept h2{color:#fff}
.rezept .eyebrow{color:var(--akzent-hell)}
.rezept .r-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,auto);gap:clamp(28px,4vw,56px);align-items:center}
.rezept p{color:var(--auf-dunkel-2);max-width:62ch}
.r-fakten{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.r-fakt{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-s);padding:11px 16px;font-size:14.5px;color:var(--auf-dunkel);
  transition:border-color .3s,background .3s}
.r-fakt:hover{border-color:rgba(224,178,74,.5);background:rgba(224,178,74,.08)}
.r-fakt b{color:var(--akzent3-hell);font-weight:700}
.rezept::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gruen),var(--petrol) 50%,var(--ocker))}
.r-knopf{display:flex;flex-direction:column;gap:var(--s2);min-width:230px}

/* ============ Kontakt ============ */
.kontakt{background:var(--ton)}
.k-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,60px);align-items:start}
.zeitentabelle{width:100%;border-collapse:collapse;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.zeitentabelle caption{text-align:left;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);padding-bottom:var(--s2)}
.zeitentabelle th,.zeitentabelle td{padding:13px var(--s4);text-align:left;font-size:15.5px;border-bottom:1px solid var(--linie-2)}
.zeitentabelle tr:last-child th,.zeitentabelle tr:last-child td{border-bottom:0}
.zeitentabelle th{font-weight:600;color:var(--wald);white-space:nowrap;width:1%}
.zeitentabelle td{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.zeitentabelle tr.heute{background:var(--gruen-h)}
.zeitentabelle tr.heute th{color:var(--gruen-d)}
.k-zeilen{display:grid;gap:var(--s2);margin-top:var(--s4)}
.k-zeile{display:flex;align-items:center;gap:var(--s3);background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-s);padding:14px var(--s3);text-decoration:none;transition:border-color .2s,transform .2s}
a.k-zeile:hover{border-color:var(--gruen);transform:translateX(3px)}
.k-zeile .sym{width:38px;height:38px;border-radius:var(--r-xs);background:var(--ton);display:grid;place-items:center;flex:none}
.k-zeile .sym svg{width:18px;height:18px;stroke:var(--gruen-d);fill:none;stroke-width:1.8}
.k-zeile b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.k-zeile span{font-size:16px;font-weight:600;color:var(--wald)}
form{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:clamp(20px,3vw,var(--s5))}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.feld{margin-bottom:var(--s3);display:flex;flex-direction:column;gap:6px}
.feld label{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.feld input,.feld textarea{font-family:var(--ui);font-size:16px;color:var(--wald);background:var(--papier);border:1.5px solid var(--linie);border-radius:var(--r-s);padding:12px 14px;width:100%;
  transition:border-color .2s,box-shadow .2s,background .2s}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--gruen);background:var(--weiss);box-shadow:0 0 0 4px rgba(135,183,37,.16)}
.zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--text-2);line-height:1.55;margin:var(--s1) 0 var(--s4)}
.zustimmung input{margin-top:3px;accent-color:var(--gruen);width:17px;height:17px;flex:none}
.zustimmung a{color:var(--gruen-d)}
.anfahrt{margin-top:var(--s4);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:var(--weiss)}
.anfahrt img{width:100%;aspect-ratio:16/9;object-fit:cover}
.anfahrt .txt{padding:var(--s4)}
.rueckmeldung{margin-top:var(--s3);font-size:14.5px;font-weight:600;color:var(--gruen-d);background:var(--gruen-h);border-radius:var(--r-s);padding:12px 16px}

/* ============ Fuß ============ */
footer{background:var(--wald);color:var(--auf-dunkel-3);font-size:15px;padding-block:var(--s7) 0}
footer h4{color:#fff;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 var(--s3)}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--gruen)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s5);padding-bottom:var(--s6)}
.f-logo{height:var(--logo-h-fuss);width:auto;max-width:min(70vw,260px);object-fit:contain;filter:brightness(0) invert(1);opacity:.9;margin-bottom:var(--s3)}
.f-zeiten li{display:flex;justify-content:space-between;gap:var(--s2);font-size:13.5px;font-variant-numeric:tabular-nums}
.f-schlag{display:flex;flex-wrap:wrap;gap:6px}
.f-schlag a{font-size:12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 11px}
.f-schlag a:hover{border-color:var(--gruen)}
.f-unten{border-top:1px solid rgba(255,255,255,.1);padding-block:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;font-size:13.5px;color:var(--auf-dunkel-3)}

/* ============ Aktionsleiste mobil ============ */
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:var(--s1);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--linie);box-shadow:0 -4px 18px rgba(30,42,22,.07)}
.aktionsleiste .btn{flex:1;padding:13px 8px;font-size:14.5px}

/* ============ Farbige Kleinteile ============ */
.werte span{transition:border-color .3s,color .3s,transform .3s}
.werte span:nth-child(1):hover{border-color:var(--gruen);color:var(--gruen-d)}
.werte span:nth-child(2):hover{border-color:var(--petrol);color:var(--petrol-d)}
.werte span:nth-child(3):hover{border-color:var(--ocker);color:var(--ocker-d)}
.werte span:nth-child(4):hover{border-color:var(--gruen);color:var(--gruen-d)}
.werte span:hover{transform:translateY(-2px)}
.k-zeile:nth-child(2) .sym{background:var(--petrol-h)}
.k-zeile:nth-child(2) .sym svg{stroke:var(--petrol-d)}
.k-zeile:nth-child(3) .sym{background:var(--ocker-h)}
.k-zeile:nth-child(3) .sym svg{stroke:var(--ocker-d)}
.t-karte:nth-child(2) .t-rolle{color:var(--petrol-d)}
.t-karte:nth-child(2) .qual li{background:var(--petrol-h);color:var(--petrol-d)}
.g-raster button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gruen);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.3,.8,.3,1);z-index:2}
.g-raster button:nth-child(3n+2)::after{background:var(--petrol)}
.g-raster button:nth-child(3n+3)::after{background:var(--ocker)}
.g-raster button:hover::after,.g-raster button:focus-visible::after{transform:scaleX(1)}

/* Nach oben */
.nachoben{position:fixed;right:18px;bottom:18px;z-index:65;width:46px;height:46px;border-radius:50%;
  background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--e2);cursor:pointer;display:grid;place-items:center;
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.3,1.3,.5,1),background .25s,border-color .25s}
.nachoben.zeigen{opacity:1;transform:none;pointer-events:auto}
.nachoben:hover{background:var(--gruen);border-color:var(--gruen)}
.nachoben svg{width:19px;height:19px;stroke:var(--wald);fill:none;stroke-width:2;transition:stroke .25s}
.nachoben:hover svg{stroke:#fff}
@media (max-width:900px){.nachoben{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ============ Bewegung ============ */
.js .auf{opacity:0;transform:translateY(18px)}
.js .auf.da{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .v1{transition-delay:.07s}.js .v2{transition-delay:.14s}.js .v3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .auf,.js .auf.da{opacity:1;transform:none;transition:none}
  .js .zeile > span{transform:none;animation:none}
  .js .hero-bild figure.sichtbar img{animation:none;transform:none}
  .hero-punkte button[aria-selected="true"]::after{animation:none;width:100%}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============ Breiten ============ */
@media (max-width:1080px){
  .l-raster{columns:2}
  .n-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-raster{grid-template-columns:minmax(0,1fr)}
  .f-raster{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .g-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-raster button.hoch{grid-column:span 2;grid-row:span 2}
}
@media (max-width:900px){
  :root{--gutter:20px}
  /* Das Menü klappt unter der Kopfleiste auf. Geschlossen ist es vollständig
     ausgeblendet – ein reines Hochschieben genügt nicht, weil die Kopfleiste
     durch ihren Weichzeichner der Bezugsrahmen für „fixed“ wird. */
  .nav{position:fixed;left:0;right:0;top:100%;bottom:auto;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--papier);padding:var(--s3) var(--gutter) var(--s5);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:transform .3s cubic-bezier(.3,.8,.3,1),opacity .24s ease,visibility .24s;
    box-shadow:0 14px 36px rgba(30,42,22,.12);max-height:80dvh;overflow-y:auto}
  .nav.offen{transform:none;opacity:1;visibility:visible}
  .nav a{font-family:var(--display);font-size:20px;padding:14px 4px;border-bottom:1px solid var(--linie-2)}
  .nav a[aria-current="true"]::after{display:none}
  .nav .btn{margin:var(--s4) 0 0;font-family:var(--ui)}
  .menuknopf{display:grid}
  header .wrap{position:relative;z-index:80}
  .split,.k-grid,.rezept .r-grid{grid-template-columns:minmax(0,1fr)}
  .statusband .wrap{grid-template-columns:minmax(0,1fr)}
  .t-karte{grid-template-columns:minmax(0,1fr)}
  .t-foto img{aspect-ratio:4/3;object-position:center var(--bildpos,22%)}
  body{padding-bottom:72px}
  .aktionsleiste{display:flex}
  .r-knopf{min-width:0}
}
@media (max-width:640px){
  body{font-size:16.5px}

  /* --- Oberste Zeile ---
     Auf dem Handy standen Status, Telefon, E-Mail und Adresse untereinander
     und füllten 180 Pixel, bevor überhaupt etwas von der Seite zu sehen war.
     E-Mail und Adresse sind unten in der festen Leiste und im Fußbereich
     ohnehin erreichbar; hier bleiben Status und Telefon in einer Zeile. */
  .meldeleiste .wrap{flex-wrap:nowrap;justify-content:space-between;gap:var(--s3);padding-block:7px}
  .meldeleiste > .wrap > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .leiste-rechts{flex-wrap:nowrap;gap:var(--s3);flex:none}
  .leiste-rechts a:nth-child(2),
  .leiste-rechts a:nth-child(3){display:none}
  .meldeleiste a{padding-block:6px}

  /* --- Kopfzeile --- */
  .marke img{height:calc(var(--logo-h) * .8)}
  .marke-text{padding-block:7px}
  header.haftet .marke img{height:calc(var(--logo-h) * .68)}
  .marke{max-height:calc(var(--logo-h) * .8)}

  /* --- Luft zwischen den Abschnitten ---
     Auf dem Handy summierten sich die Abstände zu sehr langem Leerlauf
     zwischen den Inhalten. */
  section{padding-block:clamp(38px,9vw,52px)}
  .kopf{margin-bottom:var(--s5)}
  .hero .wrap{padding-block:clamp(40px,11vw,64px)}

  /* --- Zeile über den Überschriften --- */
  .eyebrow{font-size:11.5px;letter-spacing:.12em}
  .eyebrow::before{width:16px}

  /* --- Ruhigeres Scrollen ---
     Die Abschnitte blenden sich beim Scrollen ein. Auf dem Handy, wo ein
     Abschnitt fast den ganzen Bildschirm füllt, wirkt die Verschiebung von
     18 Pixeln wie ein Ruckeln. Hier genügt ein kurzes Aufblenden.
     Außerdem wird das Auslagern entfernter Abschnitte abgeschaltet: Die
     geschätzte Höhe von 800 Pixeln passt auf schmalen Bildschirmen nicht,
     wodurch die Bildlaufleiste beim ersten Durchscrollen springt. */
  .js .auf{transform:none;opacity:0}
  .js .auf.da{transition:opacity .4s ease}
  .js .v1,.js .v2,.js .v3{transition-delay:0s}

  /* --- Tippflächen --- */
  footer a{display:inline-block;padding-block:7px}
  .f-raster p a{padding-block:8px}
  .cc-fuss a{display:inline-block;padding-block:8px}
  /* Das Kästchen für die Zustimmung war mit 17 Pixeln kaum zu treffen. */
  .zustimmung input{width:22px;height:22px;margin-top:1px}
  .zustimmung{gap:13px;font-size:14px}
  .f-schlag a{padding:8px 13px;font-size:12.5px}
  .f-raster{gap:var(--s4);padding-bottom:var(--s5)}
  .meldeleiste a{min-height:32px}
  .l-raster{columns:1}
  .n-raster{grid-template-columns:minmax(0,1fr)}
  .reihe{grid-template-columns:1fr}
  .f-raster{grid-template-columns:1fr}
  .g-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-raster button.hoch{grid-column:span 2;grid-row:span 1;aspect-ratio:4/3}
  .zeitentabelle th,.zeitentabelle td{padding:12px var(--s3);font-size:14.5px}
  .meldeleiste{font-size:12.5px}
  .meldeleiste .wrap{justify-content:flex-start}
  .hero h1{font-size:clamp(36px,10vw,50px)}
  .hero .lead{font-size:16.5px;max-width:none}
  .hero-motiv{display:none}
  .hero-marker{gap:7px}
  .hero-marker span{font-size:12px;padding:7px 12px}
}

/* Sehr schmale Geräte: der Untertitel neben dem Namen hat keinen Platz mehr. */
@media (max-width:400px){
  .marke-unter{display:none}
  .marke-name{font-size:17.5px}
}

/* Zeitfenster in der Zeitentabelle: nebeneinander mit Trenner, auf schmalen
   Bildschirmen untereinander – statt mitten in der Uhrzeit umzubrechen. */
.zeitentabelle td .zf{white-space:nowrap}
.zeitentabelle td .zf + .zf::before{content:" | ";color:var(--text-2);opacity:.6}
@media (max-width:640px){
  .zeitentabelle td{text-align:right}
  .zeitentabelle td .zf{display:block}
  .zeitentabelle td .zf + .zf::before{content:none}
  .zeitentabelle td .zf + .zf{margin-top:2px}
}

/* ============ Partner ============ */
.partner{background:var(--ton)}
.nurlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.p-raster{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.p-raster a,.p-ohne{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:10px;height:100%;padding:var(--s4) var(--s3);text-align:center;text-decoration:none;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.p-raster a:hover{border-color:var(--gruen);box-shadow:var(--e2);transform:translateY(-2px)}
.p-bild{display:grid;place-items:center;width:100%;height:84px}
.p-bild img{max-width:100%;max-height:84px;width:auto;height:auto;object-fit:contain}
.p-ersatz{font-family:var(--display);font-size:20px;color:var(--wald);line-height:1.2}
.p-name{font-weight:600;font-size:15px;color:var(--wald)}
.p-text{font-size:13.5px;color:var(--text-2);line-height:1.5}
.p-weg{position:absolute;top:10px;right:10px;opacity:0;transition:opacity .2s}
.p-weg svg{width:15px;height:15px;stroke:var(--gruen-d);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.p-raster a:hover .p-weg,.p-raster a:focus-visible .p-weg{opacity:1}
@media (max-width:640px){
  .p-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .p-bild{height:64px}
  .p-bild img{max-height:64px}
  .p-raster a,.p-ohne{padding:var(--s3) var(--s2)}
}