/* ============================================================
   Tims Plan-Strecke · gemeinsames Stylesheet (Plan-Seite, persönlicher Plan, Rechtsseiten)
   Grunddesign: _design/tim-rabitz-plan/GRUNDDESIGN.md. Token-Namen wie auf Tims Seite
   (funnels/tim-rabitz/index.html), damit die Rezept-Seite dieselben Werte trägt.
   Danach lädt die Seite leben.css (Werkstatt-Fassung 18.10.2026), die Abbildung der
   --leben-*-Tokens steht unten in diesem Blatt.
   ============================================================ */

@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2192,U+2212}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-var-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  /* Tims CI: fast schwarzer Grund, ein Signalton Rot. --gold trägt das Rot (Name aus Tims Seite). */
  --nacht:#0A0A0B;
  --nacht2:#111113;
  --karte:#161618;
  --karte2:#1D1D20;
  --mulde:#0E0E10;
  --gold:#FF3B46;
  --gold2:#E01F2D;
  --goldrand:rgba(255,59,70,.45);
  --goldweich:rgba(224,31,45,.14);
  --rot:#E01F2D;
  --rot2:#C01423;
  --grün:#22C55E;
  --warn:#F5A524;
  --weiss:#F4F4F5;
  --hell2:#A1A1AA;
  --hell3:#8E8E96;
  --linie:#2A2A2F;
  --linie2:#242428;
  /* Helles Band (Mahlzeiten), wie in Tims Rechner vom 06.10. */
  --papier:#F2F2F0;
  --blatt:#FFFFFF;
  --tinte:#17171A;
  --tinte2:#52525B;
  --haar:#E4E4E7;
  --rot-hell:#D21426;
  --font:"Hanken Grotesk","Segoe UI",sans-serif;
  --r:14px;--r-lg:22px;--r-xl:28px;--maxw:1120px;
  --rand:20px;
  --ease:cubic-bezier(.16,1,.3,1);
  --knopf-verlauf:linear-gradient(180deg,#E01F2D 0%,#CC1826 55%,#B51220 100%);
  --schatten:0 3px 10px rgba(0,0,0,.45),0 20px 40px rgba(0,0,0,.4);
  --schatten-hell:0 1px 2px rgba(23,23,26,.06),0 10px 28px rgba(23,23,26,.08);

  /* Leben-Pass auf Tims CI abgebildet (Werkstatt-Tokens) */
  --leben-akzent:#E01F2D;
  --leben-akzent-2:#FF3B46;
  --leben-licht:#FF6B73;
  --leben-grund:#0A0A0B;
  --leben-grund-2:#111113;
  --leben-karte-grund:#161618;
  --leben-dunkel:#0A0A0B;
  --leben-dunkel-2:#1B0B0E;
  --leben-dunkel-3:#2B0E13;
  --leben-auf-dunkel:#F4F4F5;
  --leben-auf-akzent:#FFFFFF;
  --leben-weiss:#FFFFFF;
  --leben-schatten-farbe:#000000;
  --leben-fleck-farbe:#E01F2D;
  --leben-radius:20px;
  --leben-schatten:0 10px 28px rgba(0,0,0,.35);
  --leben-schatten-gross:0 18px 44px rgba(0,0,0,.45);
  --leben-knopf-schatten:0 12px 30px -8px rgba(224,31,45,.6),0 4px 10px rgba(224,31,45,.28);
  --leben-knopf-flaeche:var(--knopf-verlauf);
  --leben-fleck-1:.22;--leben-fleck-2:.10;--leben-fleck-3:.16;
  --leben-kopf-fleck-1:.20;--leben-kopf-fleck-2:.08;--leben-kopf-fleck-3:.12;
  --leben-laufband-ausbruch:var(--rand);
  --leben-bildpunkt:50% 28%;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--font);background:var(--nacht);color:var(--weiss);font-size:16.5px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:rgba(224,31,45,.35)}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--rand)}
.eng{width:100%;max-width:760px;margin:0 auto;padding:0 var(--rand)}
.zahl{font-variant-numeric:tabular-nums}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:374px){:root{--rand:16px}}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;background:var(--nacht);border-bottom:1px solid var(--linie2)}
.kopf-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--rand);height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.marke{display:flex;align-items:center;min-height:44px;text-decoration:none}
.marke img{height:24px;width:auto}
@media(min-width:680px){.marke img{height:28px}}
.kopf-etikett{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--goldrand);border-radius:999px;padding:7px 14px;white-space:nowrap}

/* ---------- Typo ---------- */
.oberzeile{display:inline-block;font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.oberzeile.leben-etikett{padding:7px 14px}
h1,h2,h3{font-weight:800;letter-spacing:-.6px;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(34px,9vw,64px);letter-spacing:-1.4px;line-height:1.03}
h2{font-size:clamp(27px,5.4vw,42px);letter-spacing:-1px}
h3{font-size:clamp(19px,2.6vw,22px);letter-spacing:-.3px;line-height:1.2}
.unterzeile{font-size:clamp(17px,2.4vw,20px);color:var(--hell2);max-width:44ch;margin-top:16px}
h1 [data-p="kcal"]{color:var(--gold);white-space:nowrap}
.leise{color:var(--hell2)}
.absender{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.absender .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:30% 22%;flex:0 0 auto;
  box-shadow:0 0 0 2px var(--nacht),0 0 0 4px var(--goldrand)}
.absender .oberzeile{margin-bottom:0}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:15px 26px;border-radius:16px;
  font-size:17px;font-weight:800;letter-spacing:.1px;line-height:1.2;text-decoration:none;text-align:center;color:#fff;
  background:var(--knopf-verlauf);box-shadow:var(--leben-knopf-schatten);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.knopf.breit{width:100%}
.knopf svg{width:22px;height:22px;flex:0 0 auto}
@media(hover:hover){.knopf:hover{transform:translateY(-2px)}}
.knopf:active{transform:translateY(1px)}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.55;cursor:default;transform:none}
.knopf-zweit{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:11px 20px;border-radius:14px;
  font-size:16px;font-weight:700;color:var(--weiss);border:1.5px solid var(--goldrand);background:rgba(224,31,45,.08);text-decoration:none;
  transition:background .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover){.knopf-zweit:hover{background:rgba(224,31,45,.18)}}
.knopf-zweit.ist-drin{border-color:var(--linie);background:transparent;color:var(--hell2);cursor:default}
.knopf-zweit svg{width:18px;height:18px}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;font-weight:600;color:var(--hell2);text-underline-offset:3px}
@media(hover:hover){.textlink:hover{color:var(--weiss)}}

/* ---------- Kopfband (Hero) ---------- */
.kopfband{padding:30px 0 44px}
.kopfband-raster{display:grid;gap:26px;align-items:start}
@media(min-width:960px){
  .kopfband{padding:60px 0 72px}
  .kopfband-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:56px;align-items:center}
}

/* ---------- Pult ---------- */
.pult{background:linear-gradient(180deg,#19191C 0%,#131315 100%);border:1px solid var(--linie);border-radius:var(--r-xl);padding:22px 18px 20px;
  box-shadow:var(--schatten);display:flex;flex-direction:column;gap:18px;min-width:0}
@media(min-width:680px){.pult{padding:30px 30px 26px;gap:22px}}
.pult-kopf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.pult-label{font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--hell2)}
.kcal-gross{display:flex;align-items:baseline;justify-content:center;gap:8px;line-height:1}
.kcal-gross b{font-size:clamp(68px,20vw,104px);font-weight:800;letter-spacing:-3px;font-variant-numeric:tabular-nums}
.kcal-gross span{font-size:20px;font-weight:700;color:var(--hell2)}
.regler-zeile{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:12px}
.stufe-knopf{width:52px;height:52px;border-radius:50%;background:var(--karte2);border:1px solid var(--linie);color:var(--weiss);
  display:grid;place-items:center;transition:background .25s var(--ease),transform .25s var(--ease)}
.stufe-knopf svg{width:22px;height:22px}
@media(hover:hover){.stufe-knopf:hover{background:#26262A}}
.stufe-knopf:active{transform:scale(.94)}
.stufe-knopf[disabled]{opacity:.4;cursor:default}
.regler{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0;touch-action:pan-y}
.regler::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--gold2) 0,var(--gold) var(--fill,37.5%),#2E2E33 var(--fill,37.5%))}
.regler::-moz-range-track{height:8px;border-radius:99px;background:#2E2E33}
.regler::-moz-range-progress{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold))}
.regler::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;margin-top:-11px;border:0;
  box-shadow:0 0 0 5px rgba(224,31,45,.35),0 4px 10px rgba(0,0,0,.5)}
.regler::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(224,31,45,.35),0 4px 10px rgba(0,0,0,.5)}
.regler:focus-visible{outline:none}
.regler:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--gold),0 4px 10px rgba(0,0,0,.5)}
.regler:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--gold),0 4px 10px rgba(0,0,0,.5)}
.skala{display:flex;justify-content:space-between;font-size:13px;color:var(--hell3);padding:0 64px;margin-top:-10px}

/* Persönlicher Plan: Pult zugeklappt. Die Zahl ist der Knopf, Regler und Makros klappen darunter auf. Wer den Plan
   öffnet, hat sein Ziel schon, der erste Bildschirm gehört der ersten Mahlzeit (Design-Council 26.10.2026). */
.pult-klein{gap:0;padding:0}
.pult-klein .pult-auf{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:14px;min-height:64px;
  padding:14px 18px;text-align:left;color:var(--weiss);border-radius:inherit;cursor:pointer}
.pult-klein .kcal-gross{justify-content:flex-end}
.pult-klein .kcal-gross b{font-size:36px;letter-spacing:-1px}
.pult-klein .kcal-gross span{font-size:16px}
.pult-klein .pult-auf svg{width:20px;height:20px;color:var(--gold);transition:transform .35s var(--ease)}
.pult-klein .pult-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
@media(hover:hover){.pult-klein .pult-auf:hover .pult-label{color:var(--weiss)}}
.pult-rest{display:flex;flex-direction:column;gap:18px;padding:6px 18px 20px}
.pult-rest[hidden]{display:none}
@media(min-width:680px){.pult-klein .pult-auf{padding:18px 30px}.pult-rest{gap:22px;padding:8px 30px 26px}}

/* Makros ohne eigene Kachel: eine Haarlinie trennt sie vom Regler, das Pult bleibt eine Fläche
   (Design-Council 26.10.2026: keine Karte in der Karte). */
.makros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;border-top:1px solid var(--linie);padding-top:18px}
/* Vier nebeneinander nur, solange das Pult die volle Breite hat. Ab 960 steht es in der rechten Spalte, dort kürzte
   die Viererreihe "Kohlenhydrate" und brach "30 g" um (Design-Council 26.10.2026). */
@media(min-width:680px) and (max-width:959px){.makros{grid-template-columns:repeat(4,minmax(0,1fr))}}
.makro{display:flex;flex-direction:column;gap:3px;min-width:0}
.makro .l{font-size:13px;font-weight:600;color:var(--hell2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.makro b{font-size:24px;font-weight:800;letter-spacing:-.4px;line-height:1.15;font-variant-numeric:tabular-nums}
.makro .t{font-size:13px;color:var(--hell2);line-height:1.35;text-wrap:balance}
.makro .t.ok{color:#4ADE80}
.makro .t.tief{color:var(--warn)}
.makro .balken{height:5px;border-radius:99px;background:#26262B;overflow:hidden;margin-top:6px}
/* Füllstand über scaleX statt width: nur transform und opacity bewegen (Leben-Pass Regel 1) */
.makro .balken i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold));
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}

.helfer{border-top:1px solid var(--linie2);padding-top:6px}
.helfer summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;font-size:16px;font-weight:700}
.helfer summary::-webkit-details-marker{display:none}
.helfer summary svg{width:20px;height:20px;color:var(--gold);transition:transform .35s var(--ease)}
.helfer[open] summary svg{transform:rotate(180deg)}
.helfer-felder{display:grid;gap:12px;padding:6px 0 4px}
@media(min-width:560px){.helfer-felder{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.helfer .knopf-zweit{width:100%}
@media(min-width:560px){.helfer .knopf-zweit{grid-column:1/-1}}
.helfer-ergebnis{font-size:15.5px;color:var(--weiss);background:rgba(224,31,45,.1);border:1px solid var(--goldrand);border-radius:12px;padding:12px 14px;margin-top:10px}
.helfer-ergebnis.fehler{background:transparent;border-color:var(--linie);color:var(--hell2)}
.helfer-ergebnis p+p{margin-top:8px;color:var(--hell2)}
.helfer-formel{font-size:13.5px;line-height:1.5;color:var(--hell2);margin-top:8px}

/* ---------- Felder ---------- */
.feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.feld label,.feld .feld-name{font-size:15px;font-weight:700;color:var(--weiss)}
.feld input,.feld select{height:52px;width:100%;min-width:0;padding:0 15px;border-radius:12px;border:1px solid var(--linie);background:var(--mulde);
  color:var(--weiss);font-size:17px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.feld select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background:var(--mulde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF3B46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.feld input::placeholder{color:#76767F}
.feld input:focus,.feld select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,59,70,.25)}
.feld input.err{border-color:#FF6B73;box-shadow:0 0 0 3px rgba(255,107,115,.18)}
.fehlertext{font-size:14px;color:#FF8A91;line-height:1.45}

/* ---------- Rezept oben ---------- */
.oben{margin-top:26px}
@media(min-width:960px){.oben{margin-top:40px}}
.oben-karte{background:linear-gradient(135deg,#1A1A1D 0%,#141416 60%,#1E1012 100%);border-radius:var(--r-lg);padding:22px 20px;
  display:flex;flex-direction:column;gap:16px;min-width:0}
.oben-karte>div:first-child{min-width:0}
.oben-karte .knopf-zweit{width:100%}
.oben-foto{order:-1;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--karte2)}
.oben-foto img{width:100%;height:100%;object-fit:cover}
@media(min-width:680px){
  .oben-karte{flex-direction:row;align-items:center;padding:26px 28px;gap:28px}
  .oben-karte>div:first-child{flex:1 1 auto}
  .oben-karte .knopf-zweit{width:auto;flex:0 0 auto}
  .oben-foto{width:160px;aspect-ratio:1;flex:0 0 auto}
}
.oben-karte .leben-etikett{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.oben-name{font-size:clamp(22px,4vw,30px);font-weight:800;letter-spacing:-.6px;line-height:1.12;margin-top:10px}
.oben-meta{font-size:15px;color:var(--hell2);margin-top:6px}
.oben-andere{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.oben-andere>span{font-size:15px;color:var(--hell2);font-weight:600;margin-right:4px}
.chip-dunkel{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border-radius:999px;border:1px solid var(--linie);background:var(--karte);
  font-size:15px;font-weight:600;color:var(--weiss)}
.chip-dunkel[aria-pressed="true"]{border-color:var(--gold);background:rgba(224,31,45,.14)}

/* ---------- Helles Band: Mahlzeiten ---------- */
.band-hell{background:var(--papier);color:var(--tinte);padding:44px 0 52px;position:relative;
  /* Schatten der Leben-Karten auf hellem Grund: Tinte statt Schwarz, sonst wirken die Karten schmutzig */
  --leben-schatten:0 1px 2px rgba(23,23,26,.06),0 10px 28px rgba(23,23,26,.09);
  --leben-schatten-gross:0 2px 4px rgba(23,23,26,.06),0 18px 40px rgba(23,23,26,.13)}
@media(min-width:960px){.band-hell{padding:72px 0 80px}}
.band-hell :focus-visible{outline-color:var(--rot-hell)}
.band-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:22px}
.band-kopf .schloss{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;color:var(--tinte2)}
.band-kopf .schloss svg{width:18px;height:18px;color:var(--rot-hell)}
.band-kopf .knopf{min-height:48px;padding:11px 20px;font-size:16px}
.hinweis-hell{font-size:15.5px;color:var(--tinte2);max-width:70ch}
.hinweis-hell b{color:var(--rot-hell)}
.mahlzeiten{display:grid;gap:16px}
/* Karten nur so hoch wie ihr Inhalt, sonst steht unter der kürzeren eine leere weiße Fläche (Design-Council 26.10.2026) */
@media(min-width:900px){.mahlzeiten{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}}
.mahlzeit{background:var(--blatt);border-radius:var(--leben-radius);padding:22px 18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;
  box-shadow:var(--schatten-hell)}
@media(min-width:480px){.mahlzeit{padding:26px 24px 22px}}
.mahlzeit.leben-karte{outline-color:rgba(210,20,38,.16)}
.mz-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mz-slot{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--tinte2)}
.mz-slot em{font-style:normal;font-weight:600;letter-spacing:.2px;text-transform:none;color:var(--tinte2)}
.mz-name{margin-top:4px;color:var(--tinte)}
.mz-summe{text-align:right;font-size:13.5px;color:var(--tinte2);line-height:1.35;flex:0 0 auto}
.mz-summe b{display:block;font-size:20px;font-weight:800;color:var(--tinte);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.optionen{display:flex;flex-wrap:wrap;gap:8px}
.option{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:999px;background:var(--papier);border:1px solid var(--haar);
  font-size:15px;font-weight:600;color:var(--tinte);text-align:left;line-height:1.25;transition:background .25s var(--ease),color .25s var(--ease)}
/* Gewählt heißt dunkler Rand auf Weiß, keine schwarze Fläche: die Hauptaktion der Karte ist der Haken, nicht die Wahl
   (Design-Council 26.10.2026). html davor, weil leben.css den roten Ring nach diesem Blatt setzt. */
.option[aria-pressed="true"]{background:var(--blatt);border-color:var(--tinte);font-weight:700}
html .option.leben-option[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--tinte)}
@media(hover:hover){.option[aria-pressed="false"]:hover{background:#E9E9E6}}
.zutaten{list-style:none;display:flex;flex-direction:column}
.zutaten li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--haar);font-size:16px}
.zutaten li:last-child{border-bottom:0}
.zutaten .z-name{color:var(--tinte);min-width:0}
.zutaten .menge{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinte);white-space:nowrap}
.zutaten .menge.flex{color:var(--rot-hell)}
.zutaten .menge.frei{font-weight:500;color:var(--tinte2);white-space:normal;text-align:right}
.menge-zu{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.menge-zu i{display:block;width:var(--b,54px);height:12px;border-radius:6px;background:linear-gradient(90deg,#E6E6E9,#EFEFF1)}
.menge-zu.flex i{background:linear-gradient(90deg,#F6D3D7,#FBE6E8)}
.menge-zu svg{width:14px;height:14px;color:#9A9AA2}
.menge.auf{animation:menge-auf .6s var(--ease) both}
@keyframes menge-auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Zubereitung und Haken (persönlicher Plan) */
.zubereitung{border-top:1px solid var(--haar);padding-top:4px}
.zubereitung summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:46px;font-size:16px;font-weight:700;color:var(--tinte);cursor:pointer}
.zubereitung summary::-webkit-details-marker{display:none}
.zubereitung summary svg{width:18px;height:18px;color:var(--rot-hell);transition:transform .35s var(--ease)}
.zubereitung[open] summary svg{transform:rotate(180deg)}
.zubereitung p{font-size:16px;color:var(--tinte2);padding:2px 0 8px}
/* Der Haken ist die Hauptaktion des Tages: volle Kartenbreite, rot umrandet, nach dem Tippen rot gefüllt (Signatur 4).
   Vorher eine blassgraue Pille, die nach abgeschaltetem Knopf aussah (Design-Council 26.10.2026). */
.haken-knopf{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 22px;border-radius:999px;
  background:var(--blatt);border:2px solid var(--rot-hell);font-size:17px;font-weight:700;color:var(--rot-hell);transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.haken-knopf .kreis{width:28px;height:28px;border-radius:50%;border:2px solid var(--rot-hell);display:grid;place-items:center;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
@media(hover:hover){.haken-knopf[aria-pressed="false"]:hover{background:#FDECEE}}
.haken-knopf .kreis svg{width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.haken-knopf[aria-pressed="true"]{background:var(--rot-hell);border-color:var(--rot-hell);color:#fff}
.haken-knopf[aria-pressed="true"] .kreis{border-color:#fff;background:#fff;color:var(--rot-hell)}
.haken-knopf[aria-pressed="true"] .kreis svg{opacity:1;transform:none}
.mahlzeit.gegessen{box-shadow:0 0 0 2px rgba(210,20,38,.35),var(--schatten-hell)}

/* ---------- Eintrag ---------- */
.eintrag{padding:46px 0 52px;--leben-versatz:-7s;--leben-bildpunkt:46% 20%}
@media(min-width:960px){.eintrag{padding:80px 0 88px}}
.eintrag-raster{display:grid;gap:24px;align-items:center}
@media(min-width:960px){.eintrag-raster{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}}
.eintrag-kasten{background:var(--karte);border-radius:24px;overflow:hidden;min-width:0}
.eintrag-bild{height:150px}
@media(min-width:960px){.eintrag-bild{display:none}}
.eintrag-innen{padding:22px 18px 24px;display:flex;flex-direction:column;gap:16px}
@media(min-width:480px){.eintrag-innen{padding:28px 28px 30px}}
.eintrag-innen h2{font-size:clamp(26px,5vw,36px)}
.einwilligung{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:4px 0}
.einwilligung input{flex:0 0 auto;width:24px;height:24px;margin-top:1px;accent-color:var(--gold2);cursor:pointer}
.einwilligung span{font-size:14.5px;color:var(--hell2);line-height:1.55}
.einwilligung a{color:var(--weiss);text-underline-offset:2px}
.einwilligung.err input{outline:2px solid #FF6B73;outline-offset:2px;border-radius:4px}
.sicherheit{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--hell2);line-height:1.5;background:var(--mulde);border:1px solid var(--linie2);border-radius:12px;padding:12px 14px}
.sicherheit svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--gold)}
.eintrag-danach{font-size:14.5px;color:var(--hell2);text-align:center}
.eintrag-seite{display:none}
@media(min-width:960px){
  .eintrag-seite{display:block;border-radius:24px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--schatten)}
}
.fertig{display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
.fertig .haken-gross{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--knopf-verlauf);box-shadow:0 10px 30px -8px rgba(224,31,45,.7)}
.fertig .haken-gross svg{width:32px;height:32px;color:#fff}
.fertig p{color:var(--hell2);max-width:40ch}
.fertig .knopf{width:100%;max-width:420px}
.fertig .textlink{font-size:14.5px;font-weight:500;color:var(--hell3);text-decoration:underline}

/* ---------- Kontrastblock: Und nach dem ersten Tag? ---------- */
.bruecke{padding:52px 0 40px}
@media(min-width:960px){.bruecke{padding:88px 0 56px}}
.bruecke-raster{display:grid;gap:30px;align-items:center}
@media(min-width:960px){.bruecke-raster{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px}}
.bruecke p{font-size:17px;max-width:52ch;margin-top:14px}
.bruecke .tim-zeile{font-weight:700;color:var(--weiss)}
.bruecke .preis-zeile{font-size:16px;color:var(--hell2)}
.tim-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin-inline:auto;width:100%}
.tim-paar figure{border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:var(--karte)}
.tim-paar img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.klienten{margin-top:34px}
/* Vorher-Nachher-Collagen nie beschneiden: feste Höhe, Breite aus dem Bildformat (--ar je Kachel) */
.klienten .leben-kachel{width:auto;height:230px;aspect-ratio:var(--ar,4/5);border-color:#26262B;background:var(--karte)}
.klienten .leben-kachel img{object-position:50% 50%}
@media(min-width:680px){.klienten .leben-kachel{width:auto;height:290px}}
.klienten-zeile{font-size:15px;color:var(--hell2);text-align:center;margin-top:4px;padding:0 var(--rand)}

/* ---------- Persönlicher Plan: Fortschritt, Tag geschafft, Tipps, Coaching ---------- */
.fortschritt{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:520px}
.fortschritt p{font-size:16px;font-weight:700}
.fortschritt .spur{height:10px;border-radius:99px;background:#26262B;overflow:hidden}
.fortschritt .spur i{display:block;height:100%;width:100%;border-radius:99px;transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease)}
.tagbox{margin-top:22px}
.vor-vier{display:flex;gap:14px;align-items:flex-start;background:var(--blatt);border:1px dashed #C9C9CF;border-radius:var(--leben-radius);padding:18px 18px;color:var(--tinte2);font-size:16px}
.vor-vier svg{flex:0 0 auto;width:22px;height:22px;color:var(--rot-hell);margin-top:2px}
.geschafft{background:linear-gradient(150deg,#E01F2D 0%,#C01423 60%,#8E0E19 100%);color:#fff;border-radius:24px;padding:26px 22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  box-shadow:0 18px 44px -12px rgba(192,20,35,.6)}
@media(min-width:680px){.geschafft{padding:34px 34px}}
.geschafft h2{color:#fff}
.geschafft p{color:#fff;font-size:17px}
.knopf-weiss{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 24px;border-radius:16px;background:#fff;color:#A3101C;
  font-size:17px;font-weight:800;text-decoration:none;margin-top:8px;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.knopf-weiss svg{width:22px;height:22px}
@media(hover:hover){.knopf-weiss:hover{transform:translateY(-2px)}}
.geschafft.neu{animation:geschafft-auf .8s var(--ease) both}
@keyframes geschafft-auf{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.tipps{padding:52px 0 56px}
@media(min-width:960px){.tipps{padding:84px 0 88px}}
.tipps-raster{display:grid;gap:14px;margin-top:24px}
@media(min-width:680px){.tipps-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.tipp{background:var(--karte);border-radius:var(--leben-radius);padding:20px 18px;display:flex;gap:14px;align-items:flex-start;min-width:0}
.tipp h3{font-size:18px}
.tipp p{font-size:15.5px;color:var(--hell2);margin-top:6px}
.tipp .leben-symbol{background:linear-gradient(135deg,rgba(224,31,45,.35),rgba(224,31,45,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(224,31,45,.16)}
.tipp .leben-symbol svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.coaching{padding:56px 0 60px;--leben-versatz:-13s;--leben-foto:url("bilder/portrait.jpg");--leben-foto-deckkraft:.26;--leben-foto-lage:100% 16%;--leben-foto-groesse:auto 125%}
@media(min-width:960px){.coaching{padding:92px 0 96px}}
.coaching p{font-size:17px;max-width:46ch;margin-top:14px}
.coaching .knopf{margin-top:24px}
.coaching p.knopf-danach{font-size:14.5px;color:var(--hell2);margin-top:12px;max-width:44ch}
/* Am Handy läge das Foto unter dem Text: dort aus */
@media(max-width:679px){.coaching .knopf{width:100%}.coaching{--leben-foto-deckkraft:0}}

/* Laden des persönlichen Plans */
.laden{min-height:62vh;display:grid;place-items:center;align-content:center;gap:18px;padding:40px var(--rand);text-align:center}
.kreisel{width:40px;height:40px;border-radius:50%;border:3px solid #2E2E33;border-top-color:var(--gold);animation:kreisel .9s linear infinite}
@keyframes kreisel{to{transform:rotate(360deg)}}

/* Plan nicht gefunden */
.nicht-da{padding:72px 0 96px;text-align:center}
.nicht-da p{font-size:18px;color:var(--hell2);max-width:40ch;margin:0 auto 26px}

/* ---------- Fuß ---------- */
.fuss{background:var(--nacht2);border-top:1px solid var(--linie2);padding:34px 0 40px;font-size:14px;color:var(--hell2)}
.fuss p{max-width:72ch}
.fuss .anbieter{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.fuss a{display:inline-flex;align-items:center;min-height:44px;color:var(--hell2);text-underline-offset:3px}
@media(hover:hover){.fuss a:hover{color:var(--weiss)}}
.mit-leiste .fuss{padding-bottom:116px}
@media(min-width:900px){.mit-leiste .fuss{padding-bottom:40px}}

/* ---------- Klebende Leiste am Handy ---------- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:12px var(--rand) calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.92) 28%,var(--nacht) 100%);
  transform:translateY(0);transition:transform .45s var(--ease),opacity .45s var(--ease)}
.leiste .knopf{width:100%;min-height:54px}
.leiste.weg{transform:translateY(120%);opacity:0;pointer-events:none}
@media(min-width:900px){.leiste{display:none}}

/* ---------- Vorschau (nur außerhalb der Live-Adresse) ---------- */
.vorschau-band{position:fixed;left:12px;bottom:12px;z-index:80;max-width:calc(100% - 24px);background:#FFF4D6;color:#3A2A00;border-radius:12px;
  padding:9px 13px;font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.mit-leiste .vorschau-band{bottom:88px}
@media(min-width:900px){.mit-leiste .vorschau-band{bottom:12px}}
.wa-fenster{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(5,5,6,.78)}
.wa-karte{width:100%;max-width:400px;border-radius:22px;overflow:hidden;background:#0B141A;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.wa-kopf{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#1F2C33;color:#E9EDEF}
.wa-kopf b{display:block;font-size:16px}
.wa-kopf span{font-size:13px;color:#AEBAC1}
.wa-kopf .avatar{width:40px;height:40px;border-radius:50%;background:url("bilder/portrait.jpg") 50% 18%/cover;flex:0 0 auto}
.wa-verlauf{padding:22px 14px 18px;min-height:150px;background:#0B141A}
.wa-blase{margin-left:auto;max-width:86%;background:#005C4B;color:#E9EDEF;border-radius:10px 2px 10px 10px;padding:9px 11px 7px;font-size:15.5px;line-height:1.45;word-wrap:break-word}
.wa-blase small{display:block;text-align:right;font-size:12px;color:#B6D7CF;margin-top:3px}
.wa-hinweis{padding:12px 16px 16px;background:#111B21;color:#AEBAC1;font-size:13.5px;line-height:1.45}
.wa-hinweis button{margin-top:12px;width:100%;min-height:48px;border-radius:12px;background:#2A3942;color:#E9EDEF;font-weight:700;font-size:15px}

/* ---------- Rechtsseiten ---------- */
.recht{padding:40px 0 72px}
.recht h1{font-size:clamp(30px,6vw,44px);margin-bottom:22px}
.recht h2{font-size:19px;letter-spacing:-.2px;margin:30px 0 8px}
.recht p{color:var(--hell2);max-width:68ch;margin-bottom:10px}
.recht a{color:var(--weiss)}
.recht .zum-plan{display:inline-flex;align-items:center;min-height:44px;margin-bottom:12px;color:var(--gold);font-weight:700;text-decoration:none}

/* ---------- Glanzlauf ohne Rest ----------
   leben-glanz endet bei translateX(260%) und bleibt stehen. Bei Karten, die höher als breit sind
   (Mahlzeiten, Eintrag am Handy), liegt der schräge Streifen danach noch unten rechts über dem Text.
   Hier blendet er am Ende aus. html davor, weil leben.css nach diesem Blatt lädt. */
@keyframes plan-glanz{
  from{transform:translateX(-160%) skewX(-18deg);opacity:0}
  15%,75%{opacity:1}
  to{transform:translateX(260%) skewX(-18deg);opacity:0}
}
html .leben-karte.leben-in::before,html .leben-kasten.leben-in::before,html .leben-karte.leben-fokus::after{animation-name:plan-glanz}
@media(hover:hover){html .leben-karte:hover::after{animation-name:plan-glanz}}
/* Der Streifen ragt aus der Karte (oben und unten je 10 Prozent, nach dem Lauf weit rechts). Mit overflow:hidden
   bleibt die Karte dadurch in sich scrollbar: der Haken an Mahlzeit 2 schob den Inhalt in Chromium um 69 px nach
   oben, unten blieb ein leerer Streifen. clip schneidet gleich ab, macht aus der Karte aber keinen Scroll-Behälter.
   Ältere Browser ohne clip behalten hidden. */
html .leben-karte,html .leben-kasten{overflow:hidden;overflow:clip}

/* ---------- Bewegung: eigene Animationen unter reduzierter Bewegung aus ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .menge.auf,.geschafft.neu,.kreisel{animation:none}
  .knopf,.knopf-zweit,.stufe-knopf,.option,.haken-knopf,.haken-knopf .kreis,.haken-knopf .kreis svg,.makro .balken i,.fortschritt .spur i,.leiste,.helfer summary svg,.zubereitung summary svg,.pult-klein .pult-auf svg,.knopf-weiss{transition:none}
}

/* ==========================================================================
   Fragebogen (index.html seit dem Umbau vom 26.10.2026, GRUNDDESIGN-F2.md)
   Je Bildschirm eine Aufgabe. Alles unter .fb-*, die Regeln oben bleiben für p/, Rezepte und Rechtsseiten.
   ========================================================================== */
.fb-buehne{padding:22px 0 40px}
.fb-raster{display:grid;gap:28px;align-items:start}
.fb-intro h1{font-size:clamp(30px,8.2vw,46px);letter-spacing:-1.1px;line-height:1.06}
.fb-intro .unterzeile{font-size:17px;margin-top:12px;max-width:40ch}
.fb-kasten{position:relative;margin-top:22px;background:var(--nacht2);border:1px solid var(--linie);border-radius:var(--r-xl);
  padding:14px 16px 24px;box-shadow:var(--schatten)}
@media(min-width:480px){.fb-kasten{padding:18px 24px 28px}}
@media(min-width:960px){
  .fb-buehne{padding:44px 0 64px}
  .fb-raster{grid-template-columns:minmax(0,600px) minmax(0,420px);justify-content:space-between;gap:56px}
  .fb-intro .unterzeile{font-size:19px}
  .fb-kasten{margin-top:28px;padding:22px 32px 32px}
  .fb-rechts{position:sticky;top:88px;padding-top:6px}
}

/* Leiste: Zurück, Balken, Zähler */
.fb-leiste{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.fb-rueck{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--karte);
  border:1px solid var(--linie);color:var(--weiss);transition:background .25s var(--ease),opacity .25s var(--ease)}
.fb-rueck svg{width:20px;height:20px}
@media(hover:hover){.fb-rueck:hover{background:var(--karte2)}}
.fb-rueck.weg{visibility:hidden;opacity:0}
.fb-balken{flex:1 1 auto;height:6px;border-radius:99px;background:var(--karte2);overflow:hidden}
.fb-balken i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;border-radius:inherit;
  background:linear-gradient(90deg,var(--rot) 0%,var(--gold) 100%);transition:transform .5s var(--ease)}
.fb-zaehler{flex:0 0 auto;min-width:86px;text-align:right;font-size:13px;font-weight:700;color:var(--hell2);font-variant-numeric:tabular-nums;white-space:nowrap}
.fb-zaehler.aus{display:none}
.fb-kasten[data-aktuell="fertig"] .fb-leiste{display:none}

/* Frage */
.fb-frage{font-size:clamp(23px,6.2vw,30px);letter-spacing:-.6px;line-height:1.15;margin-bottom:18px}
.fb-frage:focus{outline:none}
.fb-schritt>.oberzeile{margin-bottom:10px}

/* Antwortflächen: tippen heißt weiter */
.fb-wahl{display:grid;gap:12px}
.fb-wahl[data-n="2"],.fb-wahl[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.fb-option{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px;border-radius:18px;
  background:var(--karte);border:1.5px solid var(--linie);font-size:17px;font-weight:700;line-height:1.3;text-align:left;color:var(--weiss);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.fb-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--goldweich);color:var(--gold);
  transition:background .25s var(--ease),color .25s var(--ease)}
.fb-icon svg{width:24px;height:24px}
.fb-text{flex:1 1 auto;min-width:0}
.fb-haken{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--linie);
  color:transparent;transition:background .25s var(--ease),border-color .25s var(--ease)}
.fb-haken svg{width:14px;height:14px}
.fb-wahl[data-n="2"] .fb-option,.fb-wahl[data-n="4"] .fb-option{flex-direction:column;justify-content:center;text-align:center;gap:10px;
  min-height:92px;padding:18px 12px}
.fb-wahl[data-n="2"] .fb-option{min-height:128px}
.fb-wahl[data-n="4"] .fb-text{font-size:18px}
.fb-wahl[data-n="2"] .fb-text,.fb-wahl[data-n="4"] .fb-text{flex:0 0 auto}
.fb-wahl[data-n="2"] .fb-haken,.fb-wahl[data-n="4"] .fb-haken{position:absolute;top:10px;right:10px}
.fb-option[aria-pressed="true"]{background:var(--knopf-verlauf);border-color:transparent;box-shadow:var(--leben-knopf-schatten)}
.fb-option[aria-pressed="true"] .fb-icon{background:rgba(255,255,255,.16);color:#fff}
.fb-option[aria-pressed="true"] .fb-haken{background:#fff;border-color:#fff;color:var(--rot)}
@media(hover:hover){.fb-option[aria-pressed="false"]:hover{background:var(--karte2);border-color:var(--goldrand);transform:translateY(-1px)}}
.fb-option:active{transform:scale(.985)}

/* Felder */
.fb-felder{display:grid;gap:14px}
.fb-feld label{display:block;font-size:15px;font-weight:700;margin-bottom:7px}
.fb-eingabe{position:relative}
.fb-eingabe input,.fb-feld-nummer input{width:100%;height:56px;padding:0 16px;border-radius:14px;background:var(--mulde);
  border:1.5px solid var(--linie);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fb-eingabe input::placeholder,.fb-feld-nummer input::placeholder{color:var(--hell3);font-weight:600}
.fb-eingabe input:focus,.fb-feld-nummer input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,59,70,.24)}
.fb-eingabe input[aria-invalid="true"],.fb-feld-nummer input[aria-invalid="true"]{border-color:#FF8A8F}
.mit-einheit input{padding-right:70px}
.fb-einheit{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:700;color:var(--hell2);pointer-events:none}
.fb-fehler{margin-top:7px;font-size:15px;font-weight:600;line-height:1.4;color:#FF8A8F}
.fb-hinweis{margin-top:16px;font-size:15px;line-height:1.5;color:var(--hell2)}
.fb-sicherheit{margin-top:8px;font-size:14px;color:var(--hell3)}
.fb-weiter{margin-top:20px}
.fb-klein{margin-top:12px;font-size:14px;line-height:1.5;color:var(--hell2)}

/* Rechnen */
.fb-laden{text-align:center;padding:10px 0 6px}
.fb-laden .fb-frage{margin-bottom:22px}
.fb-ring{display:block;width:116px;height:116px;margin:0 auto 22px}
.fb-ring circle{fill:none;stroke-width:8}
.fb-ring .bg{stroke:var(--karte2)}
.fb-ring .fg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transform:rotate(-90deg);transform-origin:50% 50%}
.fb-laden.laeuft .fg{animation:fb-ring 3.2s var(--ease) forwards}
@keyframes fb-ring{to{stroke-dashoffset:0}}
.fb-beweis{display:inline-flex;align-items:flex-start;gap:10px;max-width:34ch;text-align:left;font-size:15.5px;line-height:1.45;color:var(--hell2)}
.fb-beweis svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px;color:var(--grün)}

/* Ergebnis */
.fb-zahl{display:flex;align-items:baseline;gap:10px;margin:-4px 0 6px;font-size:clamp(56px,16vw,76px);font-weight:800;line-height:1;
  letter-spacing:-2px;color:var(--gold);font-variant-numeric:tabular-nums}
.fb-zahl small{font-size:20px;font-weight:700;letter-spacing:0;color:var(--hell2)}
.fb-satz{font-size:16.5px;line-height:1.55;color:var(--hell2);max-width:46ch}
.fb-merker{margin-top:12px;padding:10px 14px;border-radius:12px;background:rgba(245,165,36,.1);border:1px solid rgba(245,165,36,.32);
  font-size:15px;line-height:1.45;color:#F7C77A}
.fb-vorschau-zeile{margin-top:28px;padding-top:20px;border-top:1px solid var(--linie);font-size:15px;font-weight:700;line-height:1.45}
.fb-gerichte{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.fb-gericht{border-radius:16px;overflow:hidden;background:var(--karte);border:1px solid var(--linie)}
.fb-foto{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,#1F1F23 0%,#141416 100%);display:grid;place-items:center}
.fb-foto img{width:100%;height:100%;object-fit:cover}
.fb-foto.ohne-bild svg{width:34px;height:34px;color:var(--hell3)}
.fb-gericht-text{display:grid;gap:2px;padding:9px 11px 11px}
.fb-mahlzeit{font-size:14px;font-weight:700;color:var(--gold)}
.fb-name{font-size:15px;font-weight:700;line-height:1.3}

/* Einwilligung */
.fb-einwilligung{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:16px;background:var(--karte);
  border:1.5px solid var(--linie);font-size:15px;line-height:1.5;color:var(--hell2);cursor:pointer}
.fb-einwilligung input{flex:0 0 auto;width:24px;height:24px;margin-top:1px;accent-color:var(--rot);cursor:pointer}
.fb-einwilligung a{color:var(--weiss);text-decoration:underline;text-underline-offset:3px}
.fb-einwilligung.err{border-color:#FF8A8F}
.fb-seite [data-schritt="einwilligung"] .fb-weiter{margin-top:18px}

/* Fertig und Ende */
.fb-fertig,.fb-ende{padding-top:4px}
.fb-marke-ok,.fb-marke-halt{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;margin-bottom:16px}
.fb-marke-ok{background:rgba(34,197,94,.14);color:var(--grün)}
.fb-marke-halt{background:rgba(245,165,36,.14);color:var(--warn)}
.fb-marke-ok svg,.fb-marke-halt svg{width:28px;height:28px}
.fb-ausweich{margin-top:8px}
.fb-rueck-text{margin-top:20px}

/* Tim vorher und heute, Klienten */
.fb-paar{max-width:420px}
.fb-klienten{padding:44px 0 40px}
.fb-klienten .klienten{margin-top:0}

@media(prefers-reduced-motion:reduce){
  .fb-laden.laeuft .fg{animation:none;stroke-dashoffset:0}
  .fb-option,.fb-icon,.fb-haken,.fb-rueck,.fb-balken i,.fb-eingabe input,.fb-feld-nummer input{transition:none}
}

/* Nachbesserung 26.10.2026 nach Design-Rat R1 und der Eichung coaching-central.com (Arta, 21:56 Nicosia):
   ruhig und vertraut, keine Versal-Sperrung, Leuchten nur am Ergebnis-Knopf. */
.kopf-etikett,.oberzeile{font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.fb-balken{background:rgba(255,255,255,.16)}
.fb-kasten[data-aktuell="laden"] .fb-leiste,.fb-kasten[data-aktuell="unter18"] .fb-leiste{display:none}
.fb-kasten[data-aktuell="ergebnis"] .fb-balken,.fb-kasten[data-aktuell="eintrag"] .fb-balken,
.fb-kasten[data-aktuell="einwilligung"] .fb-balken{visibility:hidden}
.fb-icon{border-radius:50%}
.fb-option[aria-pressed="false"] .fb-haken{opacity:0}
.fb-option[aria-pressed="true"]{box-shadow:none}
.fb-einwilligung{font-size:16px;line-height:1.55}
.fb-schritt p,.fb-einwilligung span{text-wrap:pretty}
.fb-paar.leben-paar::after,.leben-dunkel .fb-paar.leben-paar::after{width:34px;height:34px;font-size:17px;
  background:var(--nacht2);color:var(--weiss);box-shadow:0 0 0 1px rgba(255,255,255,.24)}
.fb-weiter:not(.leben-glut){box-shadow:0 8px 18px -12px rgba(224,31,45,.7)}
/* Handy: der Fragebogen ist randlos und füllt den Bildschirm, Tims Bildpaar folgt darunter. */
@media(max-width:959px){
  .fb-kasten{margin-top:14px;padding:4px 0 28px;background:none;border:0;border-radius:0;box-shadow:none;
    min-height:calc(100svh - 72px)}
}
/* Rechner: drei Antworten als Kacheln nebeneinander, Körperdaten in einer Reihe. */
@media(min-width:960px){
  .fb-wahl[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fb-wahl[data-n="3"] .fb-option{flex-direction:column;justify-content:center;text-align:center;gap:12px;min-height:150px;padding:20px 14px}
  .fb-wahl[data-n="3"] .fb-text{flex:0 0 auto}
  .fb-wahl[data-n="3"] .fb-haken{position:absolute;top:10px;right:10px}
  .fb-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
}

/* Nachbesserung 26.10.2026 nach Design-Rat R2 (keine dritte Runde, geprüft über Tests und Fotos):
   kein roter Saum unter Weiter, Etikett lesbar, Antworten ohne verwaiste Wörter, Laden linksbündig, Laufband gerade. */
.fb-weiter:not(.leben-glut){box-shadow:none}
.kopf-etikett{color:var(--weiss)}
.fb-intro h1{font-size:clamp(26px,7vw,40px)}
.fb-text{text-wrap:balance}
.fb-rueck.weg{display:none}
.fb-laden{text-align:left}
.fb-ring{margin:0 0 22px}
.fb-beweis{max-width:none}
body .leben-kachel:nth-child(n){transform:none}
@media(min-width:960px){.fb-wahl[data-n="3"] .fb-option{justify-content:flex-start}}

/* Eichung 26.10.2026 (Maßstab coaching-central.com), wie auf dem persönlichen Plan (meinplan.css): ruhige Fläche statt
   roter Lichtflecken im Kopf und im Klienten-Block. Die Glut bleibt nur am Ergebnis-Knopf. */
html body .fb-buehne,html body .fb-klienten{--leben-fleck-1:0;--leben-fleck-2:0;--leben-fleck-3:0}