/* Foodly 4.1 V27 — gemeinsamer Look für beide Oberflächen.
   Nur Darstellung: keine Daten-, Match- oder Navigationslogik. */
:root{
 --fy-accent:#9BE39A;--fy-control:linear-gradient(180deg,#222C25,#18201B);
 --fy-soft:rgba(155,227,154,.09);--fy-focus:0 0 0 3px rgba(155,227,154,.24);
}
html.fds-haupt,html.fds-klassik{color-scheme:dark}
html.fds-haupt body,html.fds-klassik body{font-family:var(--f-schrift);-webkit-font-smoothing:antialiased}
html.fds-haupt main,html.fds-klassik #app{isolation:isolate}
/* Typografie und wiedererkennbare Bereichseinstiege */
.fyBereichIntro{position:relative;overflow:hidden;isolation:isolate;margin:0 0 22px;padding:26px 24px;
 border:1px solid rgba(155,227,154,.19);border-radius:28px;
 background:radial-gradient(ellipse at 100% 0,rgba(98,164,101,.2),transparent 65%),linear-gradient(135deg,#1E2A21,#111914);box-shadow:var(--f-schatten-s)}
.fyBereichIntro .fyAugenbraue{display:block;color:var(--fy-accent);font-size:11px;font-weight:750;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px}
.fyBereichIntro h2{font:800 clamp(25px,6.5vw,32px)/1.12 var(--f-schrift-titel)!important;letter-spacing:-.7px!important;margin:0 0 10px!important;color:var(--f-text)}
.fyBereichIntro p{position:relative;max-width:34ch;font-size:14px;line-height:1.55;color:var(--f-text-2);margin:0}
.fyBereichIntro--foto{min-height:230px;padding-top:85px;background:linear-gradient(180deg,rgba(10,18,12,.05),rgba(10,18,12,.96) 72%),url(../bilder/start/karte-kochen.webp) center/cover}
.fyBereichIntro--foto p{max-width:36ch}
html.fds-haupt .marke h1{font-size:24px;letter-spacing:-.7px;color:var(--fy-accent)}
html.fds-haupt .marke p{color:var(--f-text-2);font-size:12px;letter-spacing:.3px}
html.fds-haupt main h2{font-size:22px;line-height:1.2;letter-spacing:-.5px;margin-top:28px;margin-bottom:10px}
html.fds-haupt main .pgruppe{font-size:13px;font-weight:700;color:var(--fy-accent);letter-spacing:.3px;margin:24px 4px 10px}
html.fds-haupt .hinweis,html.fds-haupt .quelle,html.fds-haupt .leer{color:var(--f-text-2);line-height:1.55}
html.fds-klassik .topbar{padding-bottom:18px;border-bottom-color:var(--f-linie)}
html.fds-klassik .topbar .row>div{min-width:0}
html.fds-klassik .topbar [style*="font-weight:600"]{font-size:22px;font-weight:800!important;letter-spacing:-.5px;line-height:1.25}
html.fds-klassik .eyebrow{color:var(--f-text-2);font-size:12px;line-height:1.5}
/* Einheitliche Karten; ausgewählte Zustände behalten ihre Bedeutung. */
html.fds-haupt .karte,html.fds-haupt .hauptwahl,html.fds-klassik .card,html.fds-klassik .panel{
 border-radius:24px;border:1px solid var(--f-linie-2);background:var(--f-karte);box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)}
html.fds-haupt .karte,html.fds-klassik .panel{padding:20px}
html.fds-haupt .hauptwahl{padding:20px;gap:16px;text-align:left;color:var(--f-text)}
html.fds-haupt .hwText{min-width:0}
html.fds-haupt .hwText b{font-size:18px;letter-spacing:-.25px;line-height:1.25}
html.fds-haupt .hwText i{font-size:13px;line-height:1.5;color:var(--f-text-2);margin-top:5px}
html.fds-haupt .hwIcon,html.fds-klassik .glyph{width:48px;height:48px;flex:0 0 48px;border-radius:15px;
 background:var(--fy-soft)!important;border:1px solid rgba(155,227,154,.18);box-shadow:none;color:var(--fy-accent)}
.fyIcon{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.fds-klassik .card-head{padding:20px;gap:16px}
html.fds-klassik .card-head .who h3{font-size:17px;font-weight:750;letter-spacing:-.25px;line-height:1.3}
html.fds-klassik .card-head .who p{font-size:13px;line-height:1.5;color:var(--f-text-2)}
html.fds-klassik .list{gap:14px;padding-top:20px}
html.fds-klassik .stats{background:rgba(0,0,0,.12)}
html.fds-klassik .stats strong{font-size:17px;font-variant-numeric:tabular-nums;color:var(--fy-accent)}
html.fds-klassik .match{color:var(--fy-accent);font-variant-numeric:tabular-nums}
/* Haupt- und Nebenaktionen */
html.fds-haupt .knopf,html.fds-klassik .btn{min-height:50px;border-radius:16px;font-size:15px;font-weight:700;line-height:1.3;touch-action:manipulation}
html.fds-haupt .knopf:not(.leise):not(:disabled),html.fds-haupt .uebernehmen,html.fds-klassik .btn-primary{
 background:linear-gradient(180deg,#A5E7A0,#7FD27F)!important;color:#102015!important;border:1px solid rgba(193,247,184,.3);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 5px 16px rgba(77,151,80,.13)}
html.fds-haupt .knopf.leise,html.fds-haupt .klein,html.fds-haupt .obzurueck,html.fds-klassik .btn-ghost{
 background:var(--fy-control)!important;border:1px solid var(--f-linie-2)!important;color:var(--f-text)!important;box-shadow:none}
html.fds-haupt .klein,html.fds-haupt .obzurueck{min-height:44px;border-radius:13px;padding:10px 14px;font-weight:600;line-height:1.3}
html.fds-haupt button:disabled,html.fds-klassik button:disabled{opacity:.5;cursor:default;box-shadow:none!important}
html.fds-haupt .knopf:disabled{background:#242B26;color:var(--f-text-2)}
html.fds-haupt .reglerfuss button{min-height:44px;border-radius:14px;line-height:1.3}
html.fds-haupt .reglerfuss button:not(.uebernehmen){background:var(--fy-control);border:1px solid var(--f-linie-2);color:var(--f-text-2)}
html.fds-haupt .schalter button,html.fds-haupt .stufen button,html.fds-klassik .opt{
 min-height:52px;border-radius:16px;background:var(--fy-control);border:1px solid var(--f-linie-2);color:var(--f-text);line-height:1.4}
html.fds-haupt .schalter button[aria-pressed=true],html.fds-klassik .opt.selected{
 background:linear-gradient(145deg,#25452B,#1A3020);border-color:var(--fy-accent);color:var(--f-text);box-shadow:inset 3px 0 0 var(--fy-accent)}
html.fds-haupt .schalter button[aria-pressed=true] .haken{color:var(--fy-accent)}
html.fds-klassik .chip{min-height:40px;padding:9px 14px;font-weight:600}
html.fds-klassik .chip.on{background:var(--fy-accent);color:#102015;border-color:transparent}
/* Eingaben: konsistent und ohne iOS-Zoom bei Fokus */
html.fds-haupt input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),
html.fds-haupt select,html.fds-haupt textarea,
html.fds-klassik input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),
html.fds-klassik select,html.fds-klassik textarea{
 min-height:48px;min-width:0;max-width:100%;font-size:16px!important;line-height:1.4;
 border-radius:14px!important;background:#101813!important;color:var(--f-text)!important;border:1px solid var(--f-linie-2)!important;
 padding:12px 14px;box-shadow:inset 0 1px 4px rgba(0,0,0,.15)}
html.fds-haupt input::placeholder,html.fds-klassik input::placeholder{color:var(--f-text-3);opacity:1}
html.fds-haupt .feld label,html.fds-klassik label{color:var(--f-text-2);font-size:13px;font-weight:600}
html.fds-haupt :is(input,select,textarea):focus,html.fds-klassik :is(input,select,textarea):focus{
 outline:2px solid var(--fy-accent);outline-offset:2px;border-color:var(--fy-accent)!important}
html.fds-haupt button:focus-visible,html.fds-klassik button:focus-visible{outline:2px solid var(--fy-accent);outline-offset:3px}
/* Vorrat, Einkauf, Profil und Tagesbilanz */
html.fds-haupt .vorratzeile,html.fds-haupt .zeile,html.fds-klassik .kv{gap:12px;padding-top:14px;padding-bottom:14px;border-color:var(--f-linie);align-items:center}
html.fds-haupt .vorratname,html.fds-klassik .ingredient-item .name{min-width:0;overflow-wrap:anywhere;font-weight:650}
html.fds-haupt .vorratmenge,html.fds-klassik .kv strong{font-variant-numeric:tabular-nums;color:var(--fy-accent)}
html.fds-klassik .ingredient-item{padding:14px;border-radius:18px;background:var(--f-karte);gap:8px}
html.fds-klassik .ingredient-item button{min-height:40px;border-radius:12px}
html.fds-klassik .meter{height:8px;border-radius:99px;background:rgba(255,255,255,.08)}
html.fds-klassik .meter i{background:linear-gradient(90deg,#6FCB72,#B5EDAB);border-radius:inherit}
html.fds-klassik .empty{margin:20px;padding:36px 20px;border:1px dashed rgba(155,227,154,.25);border-radius:24px;background:var(--fy-soft)}
html.fds-klassik .empty h3{font-size:20px;font-weight:750}
html.fds-klassik .empty p{max-width:34ch;margin:8px auto;color:var(--f-text-2)}
/* Dialoge, kurze Wissensfragen und Statusmeldungen */
html.fds-haupt .wissenkarte,html.fds-haupt #kandidatDetails,html.fds-klassik .popup,html.fds-klassik .sheet{
 background:linear-gradient(150deg,#202D23,#111A14)!important;color:var(--f-text);border:1px solid var(--f-linie-2);border-radius:26px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
html.fds-haupt .wissenkarte{padding:22px}
html.fds-haupt .wfoption{min-height:46px;border:1px solid var(--f-linie-2);border-radius:14px;background:var(--fy-control);color:var(--f-text)}
html.fds-haupt .meldung{border-radius:18px;padding:16px;background:var(--fy-soft);border:1px solid rgba(155,227,154,.25);color:var(--f-text)}
html.fds-haupt .fehler,html.fds-klassik .p-warning{color:#F2BB86}
html.fds-klassik #toast{background:#1E3023;color:var(--f-text);border:1px solid rgba(155,227,154,.4);max-width:calc(100% - 32px);text-align:center}
/* Navigation: bestehende Reihenfolge und Mittelpunkt bleiben erhalten. */
html.fds-haupt nav#nav,html.fds-klassik #tabbar{background:rgba(13,21,16,.96);border-top:1px solid rgba(155,227,154,.16)}
html.fds-klassik .tab.on{color:var(--fy-accent);background:var(--fy-soft)}
html.fds-klassik .sheet{border-radius:26px 26px 0 0;max-height:88dvh}
@media(max-width:360px){
 .fyBereichIntro{padding:22px 18px;border-radius:22px}.fyBereichIntro--foto{padding-top:80px}
 html.fds-haupt .karte,html.fds-klassik .panel{padding:16px}
 html.fds-klassik .card-head{padding:16px;gap:12px}
 html.fds-haupt .hauptwahl{padding:16px;gap:12px}
 html.fds-klassik .card-actions{flex-wrap:wrap}
 html.fds-haupt .vorratzeile{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 html.fds-haupt .knopf,html.fds-klassik .btn,html.fds-klassik .card{transition:none}
}
/* Ruhiger Hintergrund statt der früheren schwebenden Emoji-Kulisse. */
html.fds-haupt .kulisse{display:none!important}
/* Schmale Vorrats-Eingaben: Zutatenname bekommt eine vollständige Zeile. */
@media(max-width:380px){
 html.fds-klassik .ingredient-input{display:grid;grid-template-columns:minmax(0,1fr) 48px}
 html.fds-klassik .ingredient-input input:first-child{grid-column:1/-1;width:100%}
 html.fds-klassik .ingredient-input button{min-height:48px}
 html.fds-klassik #tabbar .tab{font-size:10px}
}