/* =====================================================================
   Foodly 4.1 V26 – wiederverwendbare Bausteine des Designsystems
   Grundlage: die Design-Tokens in foodly-design.css (--f-*), abgeleitet vom
   Startbildschirm. Neue Seiten verwenden diese Bausteine statt eigener
   Farben, Abstände und Knöpfe:
     .fy-btn (--haupt | --zweit | --leise)  Knöpfe
     .fy-karte                              Karte
     .fy-fortschritt                        Fortschrittsbalken
     .fy-meldung                            Speicher-Rückmeldung (oben, blockiert nichts)
   Danach: die Geschmacksfrage (.fb…) als erste Seite im neuen System.
   ===================================================================== */
:root{
  --fy-abstand-s:8px; --fy-abstand-m:14px; --fy-abstand-l:20px;
  --fy-knopf-h:52px; --fy-knopf-h-s:42px;
  --fy-gruen-verlauf:linear-gradient(180deg,#9BE39A 0%,#7FD27F 100%);
  --fy-uebergang:cubic-bezier(.22,.7,.25,1);
}

/* ---------- Knöpfe ---------- */
.fy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--fy-knopf-h);padding:0 14px;
  border-radius:var(--f-r-s);border:1px solid transparent;font:650 15.5px/1.15 var(--f-schrift);letter-spacing:-.1px;
  color:var(--f-text);background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;transition:transform .12s ease,background-color .2s ease,border-color .2s ease}
.fy-btn:active{transform:scale(.97)}
.fy-btn svg{flex:0 0 auto;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fy-btn b{font-weight:800;font-variant-numeric:tabular-nums}
.fy-btn--haupt{background:var(--fy-gruen-verlauf);color:#0C1A10;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 18px rgba(80,170,90,.22)}
.fy-btn--haupt:active{background:#76C877}
.fy-btn--zweit{background:rgba(244,239,230,.06);border-color:rgba(244,239,230,.24);color:var(--f-text)}
.fy-btn--zweit:active{background:rgba(244,239,230,.12)}
.fy-btn--leise{min-height:var(--fy-knopf-h-s);padding:0 10px;font-size:14px;font-weight:600;color:var(--f-text-2)}
.fy-btn--leise:active{color:var(--f-text);background:rgba(244,239,230,.06)}
.fy-btn:focus-visible{outline:2px solid var(--f-gruen);outline-offset:3px}

/* ---------- Karte, Fortschritt ---------- */
.fy-karte{background:var(--f-karte);border:1px solid var(--f-linie);border-radius:var(--f-r-xl);box-shadow:var(--f-schatten)}
.fy-fortschritt{display:block;height:5px;border-radius:99px;background:rgba(244,239,230,.1);overflow:hidden}
.fy-fortschritt i{display:block;height:100%;border-radius:inherit;background:var(--fy-gruen-verlauf);transition:width .35s var(--fy-uebergang)}

/* ---------- Rückmeldung (z. B. „Geschmack gespeichert“) ---------- */
.fy-meldung{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));z-index:2147483100;pointer-events:none;
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:9px 16px 9px 11px;border-radius:999px;
  background:rgba(18,23,20,.95);border:1px solid rgba(140,217,138,.38);color:var(--f-text);font:600 14px/1.25 var(--f-schrift);
  box-shadow:0 10px 26px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translate(-50%,-16px);transition:opacity .2s ease,transform .3s var(--fy-uebergang)}
.fy-meldung.sichtbar{opacity:1;transform:translate(-50%,0)}
.fy-meldung svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--f-gruen);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fy-meldung[data-art="fehler"]{border-color:rgba(226,84,94,.6)}
.fy-meldung[data-art="fehler"] svg{stroke:var(--f-rot)}
body.fbAktiv .fy-meldung{top:calc(70px + env(safe-area-inset-top))}

/* =====================================================================
   Geschmacksfrage: eine Zutat, ein Bildschirm, ohne Scrollen
   ===================================================================== */
body.fbAktiv header,body.fbAktiv #nav,body.fbAktiv #classicZurueck{display:none!important}
body.fbAktiv{padding-bottom:0!important}
body.fbAktiv main{max-width:520px;min-height:0;padding:calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom))}
body.fbAktiv .meldung{margin-bottom:10px}

.fbSeite{display:flex;flex-direction:column;gap:10px}
.fbOben{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px}
.fbZurueck,.fbBeenden{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 13px 0 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--f-linie-2);background:rgba(16,20,18,.72);color:var(--f-text);font:600 14px var(--f-schrift);touch-action:manipulation}
.fbBeenden{padding:0 13px;color:var(--f-text-2)}
.fbZurueck svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fbFortschritt{min-width:0;display:flex;flex-direction:column;gap:6px}
.fbSchritt{font:600 12px/1.2 var(--f-schrift);letter-spacing:.3px;color:var(--f-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fbKarte{position:relative;display:flex;flex-direction:column;overflow:hidden;padding-bottom:10px;
  background:var(--f-karte);border:1px solid var(--f-linie);border-radius:var(--f-r-xl);box-shadow:var(--f-schatten);
  animation:fbEin .28s var(--fy-uebergang) both}
@keyframes fbEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Großes Zutatenbild: unscharfe Kopie füllt die Fläche, das Foto liegt darüber */
.fbBild{position:relative;flex:0 0 auto;height:clamp(150px,31svh,290px);overflow:hidden;background:#1A1F1C}
.fbBild::before{content:"";position:absolute;inset:-24px;background:var(--fb-bild) center/cover no-repeat;filter:blur(18px) saturate(1.1);opacity:.55;transform:scale(1.1)}
.fbBild img{position:relative;display:block;width:100%;height:100%;object-fit:cover}
.fbBild::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:38%;background:linear-gradient(180deg,rgba(21,26,23,0),#171C19);pointer-events:none}
.fbBild.platzhalter{display:grid;place-items:center;color:var(--f-text-3)}
.fbBild.platzhalter svg{width:30%;height:auto;opacity:.6}

.fbText{padding:6px 18px 0;position:relative;margin-top:-26px}
.fbFrage{margin:0;font:750 clamp(21px,6.2vw,25px)/1.2 var(--f-schrift-titel);letter-spacing:-.35px;color:var(--f-text);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.fbHinweis{margin:5px 0 0;font-size:13px;line-height:1.3;color:var(--f-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fbWert{display:flex;flex-direction:column;align-items:center;margin-top:10px;min-height:56px}
.fbKarte .fbProzent{margin:0;font:800 clamp(31px,9.4vw,38px)/1 var(--f-schrift-titel);letter-spacing:-.5px;color:var(--f-text);font-variant-numeric:tabular-nums;text-align:center}
.fbKarte .fbProzent.offen{color:rgba(244,239,230,.62)}
.fbKarte .fbStatus{display:block!important;width:100%;margin-top:5px;font-size:13.5px!important;line-height:1.2;color:var(--f-text-2);text-align:center!important;white-space:nowrap}
.fbKarte .fbStatus .prozent{display:none}
.fbKarte .fbStatus .prozent + .wort{display:inline}
.fbKarte .fbStatus .offen{color:var(--f-text-3)}
.fbKarte[data-unbekannt="1"] .fbStatus{color:var(--f-gruen);font-weight:650}

.fbKarte .fbRegler{display:flex;align-items:center;gap:8px;margin:2px 12px 0}
.fbKarte .reglerstufe{flex:0 0 48px;width:48px;height:48px;min-width:48px;padding:0;display:grid;place-items:center;border-radius:15px;
  border:1px solid var(--f-linie-2);background:rgba(244,239,230,.05);color:var(--f-text);font:500 24px/1 var(--f-schrift);cursor:pointer;touch-action:manipulation}
.fbKarte .reglerstufe:active{background:rgba(140,217,138,.18);color:var(--f-gruen)}
.fbKarte .schiene{touch-action:none}
.fbKarte input[type=range].schieber::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--f-gruen) 0 var(--f,50%),rgba(244,239,230,.12) var(--f,50%) 100%)}
.fbKarte input[type=range].schieber::-moz-range-track{background:linear-gradient(to right,var(--f-gruen) 0 var(--f,50%),rgba(244,239,230,.12) var(--f,50%) 100%)}
.fbKarte[data-beruehrt="0"] input[type=range].schieber::-webkit-slider-runnable-track{background:rgba(244,239,230,.12)}
.fbKarte[data-beruehrt="0"] input[type=range].schieber::-moz-range-track{background:rgba(244,239,230,.12)}
.fbKarte[data-beruehrt="0"] .knopfgesicht{opacity:.8}
.fbKarte[data-unbekannt="1"] .fbRegler{opacity:.5}
.fbKarte .reglerskala{margin:-2px 12px 0}
.fbKarte .reglerskala .skalawert{min-height:36px;font-size:12.5px;color:var(--f-text-3);background:none;border:0;cursor:pointer}

.fbAktionen{display:grid;grid-template-columns:1fr;gap:8px;padding:8px 14px 0}
.fbAktionen .fy-btn{width:100%;white-space:nowrap}
.fbNeben{display:flex;flex-wrap:wrap;justify-content:center;gap:0 2px;padding:4px 6px 0}
.fbNeben .fy-btn{font-size:13.5px;padding:0 9px}
.fbFertig{display:block;margin:2px auto 0;min-height:44px;padding:0 14px;border:0;background:none;color:var(--f-gruen);font:600 14.5px var(--f-schrift);cursor:pointer}

/* Kleine Bildschirme (z. B. iPhone SE 1. Gen., 320 × 568) */
@media (max-height:700px){
  .fbBild{height:clamp(124px,25svh,190px)}
  .fbFrage{font-size:clamp(19px,5.8vw,22px)}
  .fbWert{margin-top:6px;min-height:48px}
  .fbKarte .fbProzent{font-size:30px}
  .fbKarte .fbStatus{margin-top:3px;font-size:12.5px}
  .fbKarte .reglerstufe{flex-basis:44px;width:44px;height:44px;min-width:44px}
  .fbKarte .reglerskala .skalawert{min-height:30px}
  .fbBild{height:clamp(112px,21svh,170px)}
  .fbAktionen{gap:6px;padding-top:4px}
  .fy-btn{min-height:46px}
  .fy-btn--leise{min-height:36px}
  .fbSeite{gap:8px}
  .fbOben{min-height:40px}
}
@media (max-width:350px){
  .fbAktionen{padding:6px 12px 0}
  .fbNeben .fy-btn{font-size:13px;padding:0 6px}
  .fbText{padding:6px 14px 0}
}

/* Sortenlisten (Mehrfachauswahl) im gleichen Look – Bedienlogik unverändert */
body.fbListe main .frage{font:750 clamp(23px,6.6vw,28px)/1.2 var(--f-schrift-titel);letter-spacing:-.4px;color:var(--f-text)}
body.fbListe main .mehrfachhinweis{color:var(--f-text-2);font-size:14px}
body.fbListe main .auswahl.k2{background:var(--f-karte)!important;border:1px solid var(--f-linie-2)!important;border-radius:var(--f-r-l)!important;box-shadow:var(--f-schatten-s)!important}
body.fbListe main .auswahl.k2[data-gewaehlt="1"]{border-color:rgba(140,217,138,.7)!important;background:linear-gradient(150deg,#1F2E22 0%,#171E19 70%)!important}
body.fbListe main .k2bild{border-radius:16px}
body.fbListe main .k2 .auswahlname{color:var(--f-text)!important}
body.fbListe main .reglerfuss .uebernehmen{background:var(--fy-gruen-verlauf);color:#0C1A10;border-color:transparent}
body.fbListe main .listenschluss button,body.fbListe main .ueberspringen{color:var(--f-text-2)}
body.fbListe main .balken-innen{background:var(--fy-gruen-verlauf)}
body.fbListe main .obzurueck{color:var(--f-gruen)}

/* V26: eigener Scrollbereich und ein Footer außerhalb des Inhalts.
   Der Footer belegt echten Layoutplatz; keine Karte liegt dahinter. */
body.fbListe{overflow:hidden;padding-bottom:0!important}
body.fbListe header,body.fbListe #nav,body.fbListe #classicZurueck{display:none!important}
body.fbListe main{
  position:fixed;inset:0;width:100%;height:100vh;height:100dvh;
  max-width:520px;min-height:0;margin:0 auto;
  padding:env(safe-area-inset-top) 0 0;
  display:flex;flex-direction:column;overflow:hidden;
}
body.fbListe main > :not(.fbListenInhalt){flex-shrink:0}
body.fbListe main > .obzurueck,body.fbListe main > .meldung{margin:8px 20px}
.fbListenInhalt{
  flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:24px 20px 20px;scroll-padding-block:16px;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
}
.fbListenInhalt:focus-visible{outline:2px solid var(--f-gruen);outline-offset:-3px}
.fbListenFuss{
  flex:0 0 auto;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:var(--f-karte,#171E19);border-top:1px solid var(--f-linie-2);
}
body.fbListe .fbListenFuss #obSchieberWeiter{
  position:static;margin:0;width:100%;min-height:52px;box-shadow:none;
}

@media (prefers-reduced-motion:reduce){
  .fbKarte{animation:none}
  .fy-meldung{transition:opacity .15s ease;transform:translate(-50%,0)}
  .fy-btn,.fy-fortschritt i{transition:none}
}