/* =====================================================================
   Foodly Designsystem (Etappe A)
   Verbindliche Vorlage: der neue Startbildschirm. Eine Quelle für Farben,
   Schrift, Rundungen, Schatten und Grundbausteine – für die Hauptoberfläche
   (html.fds-haupt) und die eingebettete Oberfläche (html.fds-klassik).
   Grundton: dunkel, natürlich, Foodly-Grün und Creme. Bereichsfarben sparsam.
   ===================================================================== */
:root{
  --f-bg:#0B0D0C; --f-bg-2:#101412;
  --f-flaeche:#141816; --f-flaeche-2:#1A201C; --f-flaeche-3:#222924;
  --f-linie:rgba(255,255,255,.08); --f-linie-2:rgba(255,255,255,.14);
  --f-text:#F4EFE6; --f-text-2:rgba(244,239,230,.74); --f-text-3:rgba(244,239,230,.52);
  --f-gruen:#8CD98A; --f-gruen-2:#6FCB72; --f-gruen-tief:#173222;
  --f-rot:#E2545E; --f-blau:#6EA0D2; --f-violett:#9B3FE0; --f-bernstein:#E7A44B;
  --f-r-xl:28px; --f-r-l:24px; --f-r-m:18px; --f-r-s:14px;
  --f-schatten:0 12px 28px rgba(0,0,0,.45);
  --f-schatten-s:0 6px 14px rgba(0,0,0,.38);
  --f-plastik:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -10px 18px rgba(0,0,0,.22);
  --f-schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --f-schrift-titel:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --f-karte:linear-gradient(150deg,#1D2420 0%,#151A17 58%,#101311 100%);
  --f-hintergrund-bild:url(../bilder/start/hero.webp);
}

/* ---------- Atmosphärischer Grund (wie Startbildschirm, ruhiger) ---------- */
html.fds-klassik body::before,html.fds-haupt body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 55% at 50% -8%,rgba(140,217,138,.06),transparent 60%),
    linear-gradient(180deg,rgba(11,13,12,.97) 0%,rgba(11,13,12,.94) 50%,rgba(11,13,12,.86) 100%),
    var(--f-hintergrund-bild) center 115%/cover no-repeat,
    var(--f-bg)}

/* =====================================================================
   Eingebettete Oberfläche (Startbildschirm, Kochen, Vorrat, Einkauf …)
   ===================================================================== */
html.fds-klassik{
  --ink:#0B0D0C!important; --surface:#161B18!important; --surface-2:#1E2420!important;
  --beige:#F4EFE6!important; --white:#F4EFE6!important; --muted:rgba(244,239,230,.66)!important;
  --sage:#8CD98A!important; --sage-deep:#6FCB72!important; --sage-dim:rgba(140,217,138,.12)!important;
  --line:rgba(255,255,255,.08)!important; --line-strong:rgba(255,255,255,.15)!important;
  --radius:16px; --radius-lg:24px}
html.fds-klassik{background:var(--f-bg)!important}
html.fds-klassik body{background:transparent!important}
html.fds-klassik body{font-family:var(--f-schrift);color:var(--f-text)!important}
html.fds-klassik h1,html.fds-klassik h2{font-family:var(--f-schrift-titel);font-weight:800;letter-spacing:-.3px}
html.fds-klassik h3{font-weight:700}

/* Kopfbereich der Unterseiten */
html.fds-klassik .topbar{background:linear-gradient(180deg,rgba(11,13,12,.94),rgba(11,13,12,.78));border-bottom:1px solid var(--f-linie);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.fds-klassik .topbar h1,html.fds-klassik .topbar [style*="font-weight:600"]{color:var(--f-text)!important}

/* Karten */
html.fds-klassik .card,html.fds-klassik .panel{background:var(--f-karte)!important;border:1px solid var(--f-linie);border-radius:var(--f-r-l);
  box-shadow:var(--f-schatten),var(--f-plastik)}
html.fds-klassik .card:active{transform:scale(.99)}
html.fds-klassik .glyph{border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(circle at 50% 25%,#2A322D,#191E1B 72%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.35)}
html.fds-klassik .card-head .who h3{color:var(--f-text)}
html.fds-klassik .card-head .who p{color:var(--f-text-2)}

/* Knöpfe */
html.fds-klassik .btn{border-radius:var(--f-r-m);font-weight:700;min-height:50px}
html.fds-klassik .btn-primary{color:#0C130E!important;background:linear-gradient(180deg,#9EE39A,#6FCB72)!important;
  box-shadow:0 10px 22px rgba(60,150,70,.22),inset 0 1px 0 rgba(255,255,255,.45)}
html.fds-klassik .btn-ghost{color:var(--f-text)!important;background:linear-gradient(180deg,#232A25,#1A201C)!important;border:1px solid var(--f-linie-2)!important;
  box-shadow:var(--f-schatten-s),inset 0 1px 0 rgba(255,255,255,.06)}
html.fds-klassik .chip{border-color:var(--f-linie-2);color:var(--f-text);background:rgba(255,255,255,.04)}
html.fds-klassik .chip.on{background:linear-gradient(180deg,#9EE39A,#6FCB72);border-color:transparent;color:#0C130E}
html.fds-klassik .opt{border-radius:var(--f-r-m);border-color:var(--f-linie-2);background:linear-gradient(180deg,#1C221E,#151916);color:var(--f-text)}
html.fds-klassik .opt.selected{background:linear-gradient(180deg,#9EE39A,#6FCB72);color:#0C130E;border-color:transparent}
html.fds-klassik .tag,html.fds-klassik .pill{background:rgba(140,217,138,.12);color:var(--f-gruen);border-color:rgba(140,217,138,.3)}

/* Eingabefelder */
html.fds-klassik input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html.fds-klassik select,html.fds-klassik textarea{
  background:#111513!important;border:1px solid var(--f-linie-2)!important;border-radius:var(--f-r-s)!important;color:var(--f-text)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
html.fds-klassik input:focus,html.fds-klassik select:focus,html.fds-klassik textarea:focus{outline:none;border-color:rgba(140,217,138,.6)!important}
html.fds-klassik .ingredient-input button{background:linear-gradient(180deg,#9EE39A,#6FCB72);color:#0C130E;border-radius:var(--f-r-s)}
html.fds-klassik .ingredient-item{background:var(--f-karte);border-color:var(--f-linie);border-radius:var(--f-r-m);box-shadow:var(--f-schatten-s)}

/* Dialoge, Blätter, Hinweise */
html.fds-klassik .sheet{background:linear-gradient(180deg,#1A201C,#121614)!important;border-top:1px solid var(--f-linie-2);box-shadow:0 -12px 34px rgba(0,0,0,.5)}
html.fds-klassik .popup{background:linear-gradient(160deg,#1D2420,#121614)!important;border:1px solid var(--f-linie-2);border-radius:var(--f-r-xl);box-shadow:0 20px 50px rgba(0,0,0,.6)}
html.fds-klassik #toast{background:linear-gradient(180deg,#9EE39A,#6FCB72);color:#0C130E;box-shadow:0 10px 24px rgba(0,0,0,.45)}
html.fds-klassik .empty h3{color:var(--f-text)}

/* =====================================================================
   Hauptoberfläche (Profil, Foodlykosmos, Onboarding, einfache Ansicht)
   ===================================================================== */
html.fds-haupt{--bg:#0B0D0C; --flaeche:#161B18; --flaeche-hoch:#1F2621; --salbei:#8CD98A; --salbei-dunkel:#6FCB72; --beige:#F4EFE6; --grau:rgba(244,239,230,.68);
  --linie:rgba(255,255,255,.09)}
html.fds-haupt{background:var(--f-bg)!important}
html.fds-haupt body{background:transparent!important;color:var(--f-text)}
html.fds-haupt header{background:linear-gradient(180deg,rgba(11,13,12,.95),rgba(11,13,12,.8));border-bottom:1px solid var(--f-linie)}
html.fds-haupt .marke h1{font-family:var(--f-schrift-titel);font-weight:800}
html.fds-haupt main h2{font-family:var(--f-schrift-titel);font-weight:800;font-size:19px;letter-spacing:-.2px}
html.fds-haupt .karte{background:var(--f-karte);border:1px solid var(--f-linie);border-radius:var(--f-r-l);box-shadow:var(--f-schatten),var(--f-plastik)}
html.fds-haupt .segment{background:#111513;border:1px solid var(--f-linie)}
html.fds-haupt .segment button[aria-pressed="true"]{background:linear-gradient(180deg,#9EE39A,#6FCB72);color:#0C130E}
html.fds-haupt input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html.fds-haupt select,html.fds-haupt textarea{
  background:#111513;border:1px solid var(--f-linie-2);color:var(--f-text);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
html.fds-haupt #kandidatDetails{background:linear-gradient(160deg,#1D2420,#121614);color:var(--f-text);border:1px solid var(--f-linie-2);border-radius:var(--f-r-xl);box-shadow:0 20px 50px rgba(0,0,0,.6)}

/* =====================================================================
   Navigation – Mitte: violetter Foodroulette-Kreis nur auf der Startseite,
   sonst das grüne Foodly-Blatt mit der Kommandozentrale.
   ===================================================================== */
.fkzBlatt{--fkzD:min(96px,25vw);position:absolute;left:50%;bottom:22px;width:var(--fkzD);height:var(--fkzD);margin-left:calc(var(--fkzD) / -2);border-radius:50%;
  padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#fff;text-align:center;font:inherit;
  border:1.5px solid rgba(178,240,160,.75);
  background:radial-gradient(circle at 50% 30%,#5CC765 0%,#2E8A3E 56%,#145A27 100%);
  box-shadow:0 8px 22px rgba(40,140,60,.40),0 0 0 5px rgba(20,23,22,.94),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -10px 18px rgba(0,0,0,.28);
  transition:transform .36s cubic-bezier(.22,.61,.36,1);-webkit-tap-highlight-color:transparent;z-index:2}
.fkzBlatt svg{width:calc(var(--fkzD) * .34);height:calc(var(--fkzD) * .34);margin-bottom:2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.fkzBlatt b{font-size:calc(var(--fkzD) * .135);font-weight:700;line-height:1.1}
.fkzBlatt small{font-size:calc(var(--fkzD) * .095);line-height:1.15;color:rgba(255,255,255,.86)}
.fkzBlatt:active{transform:scale(.96)}
body.fkzOffen .fkzBlatt{transform:translateY(-10px)}
body.fkzOffen .fkzBlatt svg{transform:rotate(-20deg) scale(1.05)}
/* Umschalten nach sichtbarer Seite */
body:not(.fhStartseite) .fhRoulette,body:not(.fhStartseite) .navRadKreis{display:none!important}
body.fhStartseite .fkzBlatt{display:none!important}
/* Hauptoberfläche: Blatt sitzt im Rouletteplatz */
nav button.navRad{overflow:visible}
@media (max-width:360px){.fkzBlatt{--fkzD:min(84px,26vw)}}

/* ---------- Kommandozentrale ---------- */
.fkzSchleier{position:fixed;inset:0;z-index:2147482000;opacity:0;pointer-events:none;transition:opacity .34s ease;
  background:linear-gradient(180deg,rgba(6,8,7,.25) 0%,rgba(6,8,7,.55) 28%,rgba(6,8,7,.86) 46%,rgba(6,8,7,.94) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.fkzOffen .fkzSchleier{opacity:1;pointer-events:auto}
body.fkzOffen #tabbar,body.fkzOffen nav#nav{z-index:2147482001!important}
body.fkzOffen #tabbar .tab,body.fkzOffen nav#nav > button:not(.navRad){opacity:.32;transition:opacity .3s}
.fkz{position:fixed;left:0;top:0;width:0;height:0;z-index:2147482002;pointer-events:none}
.fkzFn{--x:0px;--y:0px;--d:0ms;position:absolute;left:0;top:0;width:96px;margin:-33px 0 0 -48px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--f-text);
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translate(0,0) scale(.3);visibility:hidden;
  transition:transform .46s cubic-bezier(.2,.75,.3,1.06) var(--d),opacity .3s ease var(--d),visibility 0s linear .5s;-webkit-tap-highlight-color:transparent}
body.fkzOffen .fkzFn{opacity:1;visibility:visible;transform:translate(var(--x),var(--y)) scale(1);pointer-events:auto;transition:transform .46s cubic-bezier(.2,.75,.3,1.06) var(--d),opacity .3s ease var(--d),visibility 0s}
.fkzKreis{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:var(--hell);
  background:radial-gradient(circle at 50% 28%,var(--k1) 0%,var(--k2) 56%,var(--k3) 100%);border:1.5px solid var(--rand);
  box-shadow:0 10px 22px rgba(0,0,0,.55),0 4px 14px var(--sch),inset 0 2px 0 rgba(255,255,255,.16),inset 0 -8px 14px rgba(0,0,0,.35);transition:transform .15s ease}
.fkzKreis svg{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.fkzFn:active .fkzKreis{transform:scale(.94)}
.fkzName{max-width:96px;font-size:13px;font-weight:650;line-height:1.2;text-align:center;letter-spacing:.1px;-webkit-hyphens:manual;hyphens:manual;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.8)}
.fkz-blau{--k1:#28323A;--k2:#181E22;--k3:#0F1214;--rand:rgba(130,170,205,.42);--hell:#D6E2EC;--sch:rgba(20,40,60,.2)}
.fkz-gruen{--k1:#2E5636;--k2:#183020;--k3:#0D1A12;--rand:rgba(140,217,138,.7);--hell:#AEE8AA;--sch:rgba(30,90,45,.25)}
.fkz-violett{--k1:#55307A;--k2:#2E1A47;--k3:#1A0F29;--rand:rgba(190,130,250,.75);--hell:#D8B6FB;--sch:rgba(90,40,150,.25)}
.fkz-rot{--k1:#6A2A30;--k2:#3A181C;--k3:#220E11;--rand:rgba(235,110,120,.72);--hell:#F4AEB4;--sch:rgba(120,30,40,.25)}
.fkz-bernstein{--k1:#6A4A22;--k2:#3A2914;--k3:#22180C;--rand:rgba(235,170,90,.72);--hell:#F5CF97;--sch:rgba(120,80,20,.25)}
@media (max-width:360px){.fkzKreis{width:54px;height:54px}.fkzKreis svg{width:26px;height:26px}.fkzName{font-size:11.5px;max-width:80px}.fkzFn{width:80px;margin-left:-40px;margin-top:-28px}}
@media (prefers-reduced-motion:reduce){.fkzFn{transition:opacity .2s ease,visibility 0s!important;transform:translate(var(--x),var(--y))!important}.fkzBlatt,.fkzBlatt svg{transition:none}}

/* =====================================================================
   Foodroulette-Kreis (nur Startseite): Schweben, violetter Nebel, Druck
   ===================================================================== */
.fhRad{isolation:isolate}
.fhRad::before{content:"";position:absolute;left:50%;bottom:calc(22px + var(--fhD) / 2);width:calc(var(--fhD) * 2.1);height:calc(var(--fhD) * 1.7);
  transform:translate(-50%,50%);border-radius:50%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(160,75,230,.42) 0%,rgba(120,40,200,.22) 45%,rgba(90,30,160,0) 100%)}
body.fhStartseite .fhRad::before{opacity:.75;animation:fhNebel 7s ease-in-out infinite alternate}
body.fhStartseite .fhRad{animation:fhSchweben 4.6s ease-in-out infinite alternate}
@keyframes fhSchweben{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes fhNebel{from{opacity:.55;transform:translate(-50%,50%) scale(.94)}to{opacity:.9;transform:translate(-50%,50%) scale(1.08)}}
.fhRoulette.fhDruck{animation:fhDruck .34s cubic-bezier(.3,.7,.4,1) both!important}
.fhRoulette::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 0 rgba(200,140,255,.55)}
.fhRoulette.fhDruck::after{animation:fhImpuls .5s ease-out both}
@keyframes fhDruck{0%{transform:scale(1)}35%{transform:scale(.9)}75%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes fhImpuls{0%{opacity:1;box-shadow:0 0 0 0 rgba(200,140,255,.55)}100%{opacity:0;box-shadow:0 0 0 22px rgba(200,140,255,0)}}
body.fhIntro .fhRad,body.fhIntro .fhRad::before{animation:none!important}
body.fhIntro .fhRad::before{opacity:0!important}
#discoverBody.fhEinblenden{animation:fhEinblenden .32s ease both}
@keyframes fhEinblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.fhStartseite .fhRad,body.fhStartseite .fhRad::before{animation:none}.fhRoulette.fhDruck,.fhRoulette.fhDruck::after,#discoverBody.fhEinblenden{animation:none!important}}