/* Fit life'n'smile · Richtung „Küchentisch am Morgen“
   Heller Morgen in einer aufgeräumten Küche: Weiß mit viel Luft, große weiche Mint-Flächen wie Tischsets,
   dunkelgrüner Text, Kleegrün nur für kleine Markierungen. Überschriften wie das Logo: fett gegen haarfein. */

@font-face{font-family:"Inter Tight";src:url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url("../fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Farben */
  --weiss:#FFFFFF;
  --tinte:#1E2720;          /* Dunkelgrün, Text und dunkle Flächen */
  --tinte-weich:#4A564F;    /* Fließtext zweite Ebene, 7,7:1 auf Weiß */
  --mint:#ECF8F1;           /* helle Fläche */
  --mint-2:#D9F4E6;         /* Kachel */
  --salbei:#E6EEE8;         /* zweite Kachel */
  --linie:#DCE7E0;
  --klee:#00BF6F;           /* nur Markierungen, Icons, Punkte */
  --klee-text:#00754A;      /* grüner Text auf Hell, 5,8:1 */
  --auf-dunkel-weich:#B7C8BE;

  /* Schrift */
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-body:1.125rem;       /* 18 px, Zielgruppe 40+ */
  --fs-small:1rem;
  --fs-h1:clamp(2.35rem,1.4rem + 3vw,3.9rem);
  --fs-h2:clamp(1.85rem,1.3rem + 2vw,2.9rem);
  --fs-h3:clamp(1.3rem,1.1rem + .7vw,1.6rem);

  /* Abstände (für das Regler-Panel in Phase 6) */
  --rand:clamp(16px,4vw,40px);
  --max:1180px;
  --abschnitt:clamp(72px,9vw,128px);
  --hero-oben:clamp(20px,3vw,36px);
  --hero-luft:clamp(26px,3.4vw,48px);
  --radius:clamp(22px,2.6vw,36px);
  --radius-klein:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--weiss);color:var(--tinte);font-family:var(--text);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--klee);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.huelle{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:var(--abschnitt)}

/* Überschriften wie das Logo: erster Satz fett, zweiter haarfein */
.fett{font-weight:800}
.fein{font-weight:200;display:block}
h2{font-size:var(--fs-h2);line-height:1.08;font-weight:800}
h3{font-size:var(--fs-h3);line-height:1.2;font-weight:700}

/* Buttons */
.knopf{display:inline-flex;align-items:center;gap:.6em;font:600 1.0625rem/1 var(--text);text-decoration:none;padding:1em 1.35em;border-radius:999px;border:2px solid var(--tinte);transition:transform .2s ease,background .2s ease,color .2s ease;min-height:52px}
.knopf svg{width:1.2em;height:1.2em;flex:none}
.knopf--voll{background:var(--tinte);color:var(--weiss)}
.knopf--voll:hover{background:#2C3A30;transform:translateY(-2px)}
.knopf--rand{background:transparent;color:var(--tinte)}
.knopf--rand:hover{background:var(--tinte);color:var(--weiss)}
.knopf--hell{background:var(--weiss);color:var(--tinte);border-color:var(--weiss)}
.knopf--hell:hover{background:var(--mint-2);border-color:var(--mint-2);transform:translateY(-2px)}
.knopf--linie-hell{background:transparent;color:var(--weiss);border-color:var(--auf-dunkel-weich)}
.knopf--linie-hell:hover{border-color:var(--weiss)}
.textlink{color:var(--klee-text);font-weight:600;text-underline-offset:.2em}

/* Kopf */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.gescrollt{border-bottom-color:var(--linie)}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.kopf .logo img{width:clamp(150px,18vw,200px)}
.kopf nav{display:flex;gap:28px;align-items:center}
.kopf nav a{text-decoration:none;font-size:1rem;color:var(--tinte-weich)}
.kopf nav a:hover{color:var(--tinte)}
.kopf .knopf{padding:.75em 1.15em;min-height:44px;font-size:.98rem}
.kopf nav a.knopf{color:var(--weiss)}
@media (max-width:900px){.kopf nav a:not(.knopf){display:none}}

/* Einstieg */
.einstieg{padding-top:var(--hero-oben);padding-bottom:var(--abschnitt)}
.einstieg .raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(14px,1.6vw,22px);align-items:stretch}
.tischset{background:var(--mint-2);border-radius:var(--radius);padding:var(--hero-luft);display:grid;align-content:center;gap:22px}
.ort{font-size:var(--fs-small);color:var(--klee-text);font-weight:600;display:flex;align-items:center;gap:.55em}
.ort::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--klee)}
.einstieg h1{font-size:var(--fs-h1);line-height:1.02;font-weight:800;max-width:14ch}
.einstieg h1 .fein{margin-top:.12em;max-width:16ch;line-height:1.08}
.einstieg .unterzeile{max-width:36ch;color:var(--tinte-weich);font-size:1.1875rem}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.gratis{font-size:var(--fs-small);color:var(--tinte-weich);display:flex;gap:.5em;align-items:center}
.gratis svg{width:1.1em;height:1.1em;color:var(--klee-text);flex:none}
.foto-hoch{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;background:var(--salbei)}
.foto-hoch picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.marke{position:absolute;left:18px;bottom:18px;right:18px;background:var(--weiss);border-radius:var(--radius-klein);padding:14px 16px;display:flex;gap:12px;align-items:center;font-size:.98rem;line-height:1.35;box-shadow:0 10px 30px rgba(30,39,32,.12)}
.marke img{width:34px;height:auto;flex:none}
@media (max-width:860px){
  .einstieg .raster{grid-template-columns:1fr}
  .foto-hoch{min-height:0;aspect-ratio:4/3;width:100%}
}

/* Ausgangslage */
.lage .raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.lage h2{max-width:13ch}
.lage .texte{display:grid;gap:1.1em;max-width:58ch;font-size:1.1875rem}
.lage .texte p:first-child{font-family:var(--display);font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);line-height:1.35;font-weight:400;color:var(--tinte)}
.lage .texte p+p{color:var(--tinte-weich)}
@media (max-width:860px){.lage .raster{grid-template-columns:1fr}}

/* Zwei Wege */
.wege{background:var(--mint)}
.wege h2{margin-bottom:clamp(28px,4vw,48px)}
.wege .raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.kachel{border-radius:var(--radius);padding:clamp(24px,3vw,40px);display:grid;gap:18px;align-content:start;position:relative;overflow:hidden}
.kachel--a{background:var(--weiss)}
.kachel--b{background:var(--tinte);color:var(--weiss)}
.kachel .bild{border-radius:var(--radius-klein);overflow:hidden;aspect-ratio:16/10;margin:-4px -4px 6px}
.kachel .bild img{width:100%;height:100%;object-fit:cover}
.kachel p{color:var(--tinte-weich)}
.kachel--b p{color:var(--auf-dunkel-weich)}
.themen{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.themen li{background:var(--mint-2);color:var(--tinte);border-radius:999px;padding:.4em .9em;font-size:.95rem}
.kachel .knopf{justify-self:start;margin-top:6px}
.kachel .grosszahl{font-family:var(--display);font-weight:800;font-size:clamp(7rem,5rem + 9vw,12rem);line-height:.82;letter-spacing:-.05em;color:var(--klee);margin:6px 0 4px}
.grosszahl small{display:block;font-size:1.05rem;font-weight:400;letter-spacing:0;color:var(--auf-dunkel-weich);margin-top:14px;font-family:var(--text)}
@media (max-width:860px){.wege .raster{grid-template-columns:1fr}}

/* Stoffwechselprogramm */
.programm .kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.programm .kopfzeile p{color:var(--tinte-weich);max-width:46ch;margin-top:18px;font-size:1.1875rem}
.programm .foto-breit{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.programm .foto-breit img{width:100%;height:100%;object-fit:cover}
.phasen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);position:relative;counter-reset:phase}
.phasen::before{content:"";position:absolute;top:31px;left:32px;right:32px;height:2px;background:repeating-linear-gradient(90deg,var(--klee) 0 10px,transparent 10px 18px);z-index:0}
.phase{position:relative;z-index:1;display:grid;gap:12px;align-content:start}
.phase .nr{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--weiss);border:2px solid var(--klee);font:800 1.6rem/1 var(--display);color:var(--tinte)}
.phase--fokus .nr{background:var(--klee);color:var(--tinte)}
.phase .dauer{font-size:.95rem;color:var(--klee-text);font-weight:600}
.phase p{color:var(--tinte-weich);font-size:1.0625rem}
.phase--fokus .nr{box-shadow:0 0 0 8px var(--mint)}
.hinweise{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.hinweis{background:var(--salbei);border-radius:var(--radius-klein);padding:22px 24px;display:grid;gap:8px;align-content:start}
.hinweis h3{font-size:1.15rem}
.hinweis p{font-size:1.0625rem;color:var(--tinte)}
@media (max-width:960px){
  .programm .kopfzeile{grid-template-columns:1fr}
  .phasen{grid-template-columns:1fr;gap:26px}
  .phasen::before{top:32px;bottom:32px;left:31px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--klee) 0 10px,transparent 10px 18px)}
  .phase{grid-template-columns:64px minmax(0,1fr);column-gap:18px}
  .phase .nr{grid-row:span 3}
  .hinweise{grid-template-columns:1fr}
}

/* So kommen wir ins Gespräch */
.start{background:var(--mint)}
.start .raster{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.schritte{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.schritt{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:20px 0;border-top:1px solid var(--linie)}
.schritt:last-child{border-bottom:1px solid var(--linie)}
.schritt b{font:800 2rem/1 var(--display);color:var(--klee-text)}
.schritt h3{font-size:1.25rem;margin-bottom:4px}
.schritt p{color:var(--tinte-weich);font-size:1.0625rem}
.start .foto-quer{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.start .foto-quer img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.start .raster{grid-template-columns:1fr}}

/* Wer dich begleitet */
.wir .raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
.wir .einleitung{display:grid;gap:18px;position:sticky;top:110px}
.wir .einleitung p{font-family:var(--display);font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);line-height:1.4}
.karte{background:var(--mint-2);border-radius:var(--radius);padding:clamp(26px,3.5vw,48px);display:grid;gap:1em;position:relative}
.karte::before{content:"";position:absolute;top:-14px;right:clamp(24px,4vw,48px);width:56px;height:56px;background:url("../img/kleeblatt.png") center/70% no-repeat var(--weiss);border-radius:50%;box-shadow:0 6px 18px rgba(30,39,32,.1)}
.karte .name{font:800 1.5rem/1.1 var(--display)}
.karte p{font-size:1.125rem}
.karte .schluss{font-family:var(--display);font-size:1.35rem;line-height:1.35;font-weight:600;padding-top:.4em}
@media (max-width:860px){.wir .raster{grid-template-columns:1fr}.wir .einleitung{position:static}}

/* Stimmen */
.stimmen h2{margin-bottom:clamp(28px,4vw,48px)}
.zitate{columns:3 300px;column-gap:clamp(14px,1.6vw,22px)}
.zitat{break-inside:avoid;margin:0 0 clamp(14px,1.6vw,22px);background:var(--mint);border-radius:var(--radius-klein);padding:26px 26px 22px;display:grid;gap:14px}
.zitat:nth-child(3n+2){background:var(--salbei)}
.zitat blockquote{margin:0;font-family:var(--display);font-size:1.25rem;line-height:1.45}
.zitat blockquote::before{content:"";display:block;width:34px;height:26px;margin-bottom:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath fill='%2300BF6F' d='M2 18c0-6 4-11 10-13l1 3c-3 1.5-5 4-5 6h1a5 5 0 1 1-7 4Zm18 0c0-6 4-11 10-13l1 3c-3 1.5-5 4-5 6h1a5 5 0 1 1-7 4Z'/%3E%3C/svg%3E") left center/contain no-repeat}
.zitat figcaption{font-size:.95rem;color:var(--tinte-weich)}
.zitat--gross blockquote{font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem)}
.stimmen .vorbehalt{margin-top:8px;color:var(--tinte-weich);font-size:1rem}

/* Fragen */
.fragen{background:var(--mint)}
.fragen .raster{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px)}
.liste{display:grid;gap:10px}
.liste details{background:var(--weiss);border-radius:var(--radius-klein);padding:0 22px}
.liste summary{list-style:none;cursor:pointer;padding:20px 0;font:600 1.15rem/1.35 var(--display);display:flex;justify-content:space-between;gap:16px;align-items:center}
.liste summary::-webkit-details-marker{display:none}
.liste summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2720' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s}
.liste details[open] summary::after{transform:rotate(45deg)}
.liste details p{padding:0 0 22px;color:var(--tinte-weich);max-width:62ch}
@media (max-width:860px){.fragen .raster{grid-template-columns:1fr}}

/* Kontakt */
.kontakt{background:var(--tinte);color:var(--weiss);border-radius:var(--radius) var(--radius) 0 0;margin-top:0}
.kontakt .raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:end}
.kontakt h2{font-size:clamp(2.4rem,1.6rem + 3vw,4rem)}
.kontakt .einladung{margin-top:18px;color:var(--auf-dunkel-weich);max-width:40ch;font-size:1.1875rem}
.kontakt .knopfreihe{margin-top:28px}
.direkt{display:grid;gap:14px;font-size:1.0625rem}
.direkt div{border-top:1px solid #34443A;padding-top:14px;display:grid;gap:2px}
.direkt span{color:var(--auf-dunkel-weich);font-size:.95rem}
.direkt a{text-decoration:none;font-weight:600;word-break:break-word}
.direkt a:hover{text-decoration:underline}
.insta{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid #34443A;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.insta p{color:var(--auf-dunkel-weich)}
@media (max-width:860px){.kontakt .raster{grid-template-columns:1fr}}

/* Fuß */
.fuss{background:var(--tinte);color:var(--auf-dunkel-weich);font-size:.95rem;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;border-top:1px solid #34443A;padding-top:24px}
.fuss nav{display:flex;gap:20px;flex-wrap:wrap}
.fuss a{color:var(--weiss);text-decoration:none}
.fuss a:hover{text-decoration:underline}

/* Handy: WhatsApp-Leiste unten */
.leiste{display:none}
@media (max-width:700px){
  .leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--linie);transform:translateY(110%);transition:transform .25s ease}
  .leiste.sichtbar{transform:none}
  .leiste .knopf{width:100%;justify-content:center}
  .fuss{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .kopf .knopf span{display:none}
}

/* Rechtsseiten */
.recht{padding-block:clamp(48px,7vw,96px)}
.recht .huelle{max-width:820px;display:grid;gap:1.1em}
.recht h1{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem);font-weight:800;margin-bottom:.3em}
.recht h2{font-size:1.4rem;margin-top:1.2em}
.recht p,.recht li{color:var(--tinte-weich)}
.recht a{color:var(--klee-text)}
.sr:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:50;background:var(--tinte);color:var(--weiss);padding:10px 16px;border-radius:999px}