/*
 * Magazin — Design für /nahrungsmittel/ und /was-koche-ich/ im Look eines Schweizer Food-Magazins
 * (Mike 2026-09-13: „mach die pages vom design her wie die fooby magazine“).
 * Salbeigrüne Kacheln, Food-Fotografie von oben mit hartem Sonnenlicht, tiefe Juwelenfarben
 * (Radicchio, Feige, Waldgrün), grosse weisse Titel, viel Luft, weiche Karten statt Konturen.
 * Liegt als eigene Schicht über den Grundstilen der Seiten, ersetzt pop.css (die Datei bleibt liegen).
 * Schriften nur vom eigenen Server (/fonts/fonts.css): Poppins für Titel, Inter für Text.
 */
:root{
  --m-salbei:#8fa58b; --m-salbei-d:#56715a; --m-salbei-h:#e5ebe1; --m-salbei-hh:#f0f3ec;
  --m-wald:#1f3527; --m-wald2:#2c4a37; --m-creme:#f7f4ee; --m-weiss:#ffffff;
  --m-radicchio:#8e1f3d; --m-feige:#5b2c4f; --m-zitrone:#f1c84b;
  --m-text:#1d2820; --m-grau:#5f6a60; --m-linie:#dde3d7;
  --m-gruen:#3f7d4b; --m-gruen-h:#e1efe2; --m-gelb:#c98f12; --m-gelb-h:#faf0d4; --m-rot:#b0243f; --m-rot-h:#f7dfe4;
  --m-schatten:0 1px 2px rgba(31,53,39,.06),0 10px 30px rgba(31,53,39,.08);
  --papier:var(--m-creme); --papier2:var(--m-salbei-hh); --tinte:var(--m-text); --tinte2:#34403a; --grau:var(--m-grau); --linie:var(--m-linie);
  --tomate:var(--m-radicchio); --safran:var(--m-zitrone); --petrol:var(--m-wald);
  --gruen:var(--m-gruen); --gruen-h:var(--m-gruen-h); --gelb:var(--m-gelb); --gelb-h:var(--m-gelb-h); --rot:var(--m-rot); --rot-h:var(--m-rot-h);
  --radius:14px;
}
body{background:var(--m-creme);color:var(--m-text);font-family:'Inter',system-ui,sans-serif}

/* ---------- gemeinsame Bausteine ---------- */
.nm h1,.nm h2,.nm h3,.wk h1,.wk h2,.wk h3{font-family:'Poppins','Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.025em}
.nm-kicker,.wk-kicker{background:transparent;color:var(--m-radicchio);padding:0;border-radius:0;transform:none;font-family:'Inter',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.18em}
.nm-knopf,.wk-knopf{background:var(--m-wald);color:#fff;border:0;box-shadow:none;font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.01em;transition:background .15s,transform .15s}
.nm-knopf:hover,.wk-knopf:hover{background:var(--m-wald2);transform:translateY(-1px)}
.nm-knopf.dunkel,.wk-knopf.dunkel{background:#fff;color:var(--m-wald)}
.nm-knopf.dunkel:hover,.wk-knopf.dunkel:hover{background:var(--m-salbei-hh)}
.nm-knopf.linie,.wk-knopf.linie{background:transparent;border:1.5px solid currentColor;color:inherit}
.nm-knopf.tomate{background:var(--m-radicchio)}

/* ---------- /nahrungsmittel/: Held ---------- */
.nm-held{min-height:600px;background:#56715a image-set(url('/nahrungsmittel/bilder/f-markt-1600.webp') type('image/webp'),url('/nahrungsmittel/bilder/f-markt-1600.jpg') type('image/jpeg')) right center/cover no-repeat}
.nm-held::before{background:linear-gradient(90deg,rgba(31,53,39,.78) 0%,rgba(31,53,39,.48) 45%,rgba(31,53,39,0) 75%)}
.nm-held .nm-kicker{color:#fff;opacity:.9}
.nm-held h1{font-weight:800;font-size:clamp(2.8rem,7.5vw,6rem);letter-spacing:-.035em;max-width:11ch}
.nm-held h1 em{font-style:normal;color:#fff;padding-right:0;text-decoration:underline;text-decoration-color:var(--m-radicchio);text-decoration-thickness:.1em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.nm-held p.nm-lead{color:#eef2ea}
.nm-sticker{background:#fff;color:var(--m-wald);box-shadow:var(--m-schatten);transform:rotate(-8deg);top:6.5rem}
.nm-sticker b{font-family:'Poppins',sans-serif;font-weight:800;color:var(--m-radicchio)}
.nm-heldsuche input{border:0;border-radius:999px;box-shadow:var(--m-schatten)}
.nm-heldsuche .nm-knopf{background:var(--m-radicchio)}
.nm-heldsuche .nm-knopf:hover{background:#761833}
.nm-heldsuche .nm-knopf.dunkel{background:#fff;color:var(--m-wald)}

/* ---------- Profil-Band ---------- */
.nm-profil{background:var(--m-salbei-h);color:var(--m-text);border-bottom:1px solid var(--m-linie)}
.nm-profil h2{color:var(--m-wald)}
.nm-profil .nm-mini{color:var(--m-grau)}
.nm-profil a.nm-mini{color:var(--m-wald)!important;font-weight:600}
.nm-typbalken{background:#fff;height:12px}
.nm-typwahl input{border:1px solid var(--m-linie);border-radius:8px}
.nm-hinweise button{color:var(--m-wald);border:1px dashed var(--m-salbei-d);background:rgba(255,255,255,.6)}
.nm-hinweise button.an{background:var(--m-wald);border:1px solid var(--m-wald);color:#fff}
.nm-hinweise button[disabled]{border-style:solid;background:#fff}
.nm-typhinweis{background:#fff;color:var(--m-wald);box-shadow:var(--m-schatten);border-left:4px solid var(--m-radicchio)}

/* ---------- Werkzeugleiste ---------- */
.nm-leiste{background:rgba(247,244,238,.96);border-bottom:1px solid var(--m-linie)}
.nm-feld{border:1px solid var(--m-linie);border-radius:10px;background:#fff}
.nm-feld:focus{outline:2px solid var(--m-salbei);outline-offset:1px}
.nm-chip{border:1px solid var(--m-linie);background:#fff;color:var(--m-text);font-weight:500}
.nm-chip:hover{border-color:var(--m-salbei-d)}
.nm-chip.an{background:var(--m-wald);border-color:var(--m-wald);color:#fff}
.nm-chip.gruen.an{background:var(--m-gruen);border-color:var(--m-gruen)}
.nm-chip.gelb.an{background:var(--m-gelb);border-color:var(--m-gelb);color:#fff}
.nm-chip.rot.an{background:var(--m-rot);border-color:var(--m-rot)}
.nm-chip.akzent{border-color:var(--m-radicchio);color:var(--m-radicchio);background:#fff}
.nm-chip.akzent.an{background:var(--m-radicchio);color:#fff}
.nm-chip[disabled]{opacity:.45}
.nm-filtergruppe > b{color:var(--m-grau)}
.nm-zaehler b{font-family:'Poppins',sans-serif;font-weight:700;color:var(--m-radicchio)}

/* ---------- Mehrfach-Sortierung ---------- */
.nm-prio{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;margin-right:.3rem;border-radius:999px;background:var(--m-radicchio);color:#fff;font:700 .7rem 'Inter',sans-serif;vertical-align:middle}
.nm-chip.an .nm-prio{background:#fff;color:var(--m-wald)}
.nm-sortweg{border-style:dashed}

/* ---------- Liste ---------- */
.nm-tabelle{border-spacing:0 6px}
.nm-tabelle th{color:var(--m-grau)}
.nm-tabelle th.sortiert{color:var(--m-radicchio)}
.nm-tabelle td{background:#fff;border-top:1px solid var(--m-linie);border-bottom:1px solid var(--m-linie)}
.nm-tabelle td:first-child{border-left:5px solid var(--m-linie);border-radius:10px 0 0 10px}
.nm-tabelle td:last-child{border-right:1px solid var(--m-linie);border-radius:0 10px 10px 0}
.nm-tabelle tr:hover td{background:var(--m-salbei-hh)}
.nm-tabelle tr.gruen td:first-child{border-left-color:var(--m-gruen)}
.nm-tabelle tr.gelb td:first-child{border-left-color:var(--m-gelb)}
.nm-tabelle tr.rot td:first-child{border-left-color:var(--m-rot)}
.nm-tabelle tr.belastet td{background:repeating-linear-gradient(135deg,#fff,#fff 10px,#f8e8ec 10px,#f8e8ec 20px)}
.nm-name{font-weight:600;color:var(--m-wald)}
.nm-badge{border-radius:999px;padding:.1rem .5rem;font-weight:600}
.nm-badge.ampel.gruen{background:var(--m-gruen-h);color:var(--m-gruen)}
.nm-badge.ampel.gelb{background:var(--m-gelb-h);color:#8a6000}
.nm-badge.ampel.rot{background:var(--m-rot-h);color:var(--m-rot)}
.nm-badge.bel{background:var(--m-rot-h);color:var(--m-radicchio)}
.nm-badge.blaeh{background:#efe4ec;color:var(--m-feige)}
.nm-badge.marke{background:var(--m-salbei-h);color:var(--m-wald)}
.nm-tz{display:inline-flex;gap:3px;margin:.25rem .25rem 0 0;vertical-align:middle}
.nm-tz i{font-style:normal;font-size:.66rem;font-weight:600;padding:.08rem .4rem;border-radius:999px;background:#eef0ec;color:var(--m-grau)}
.nm-tz i.gut{background:var(--m-gruen-h);color:var(--m-gruen)}
.nm-tz i.mass{background:var(--m-gelb-h);color:#8a6000}
.nm-tz i.meiden{background:var(--m-rot-h);color:var(--m-rot);text-decoration:line-through;text-decoration-thickness:1px}
.nm-gruppe-titel{border-bottom:2px solid var(--m-wald)}
.nm-gruppe-titel h3{color:var(--m-wald)}
.nm-leer{border:1px dashed var(--m-linie);background:#fff}
.nm-mehr .nm-knopf.dunkel,.wk-teaser .wk-knopf.dunkel,.nm-detail .nm-knopf.dunkel{background:var(--m-wald);color:#fff}

/* ---------- Detail-Schublade ---------- */
.nm-detail{background:var(--m-creme)}
.nm-detail-kopf{background:var(--m-wald);color:#fff}
.nm-detail-kopf .nm-klein,#detail-sub{color:#cfdccb!important}
.nm-zu{background:#fff;color:var(--m-wald)}
.nm-karte{border:0;box-shadow:var(--m-schatten);border-radius:14px}
.nm-karte h3{color:var(--m-wald)}
.nm-typkarte.gut{background:var(--m-gruen-h);color:var(--m-gruen)}
.nm-typkarte.mass{background:var(--m-gelb-h);color:#8a6000}
.nm-typkarte.meiden{background:var(--m-rot-h);color:var(--m-rot)}
.nm-bar{background:var(--m-salbei-h)}
.nm-bar span{background:var(--m-salbei-d)}
.nm-meter i{background:var(--m-salbei-h)}
.nm-meter i.an{background:var(--m-radicchio)}
.nm-merkmal{background:var(--m-salbei-hh)}
.nm-werte tr.gruppe td{border-bottom:2px solid var(--m-wald);color:var(--m-wald)}

/* ---------- Wissens-Streifen ---------- */
.nm-streifen-text h2{color:inherit}
.nm-streifen.safran .nm-streifen-text{background:var(--m-weiss)}
.nm-streifen.petrol .nm-streifen-text{background:var(--m-wald);color:#eef2ea}
.nm-streifen.petrol .nm-knopf{background:#fff;color:var(--m-wald)}
.nm-streifen.papier .nm-streifen-text{background:var(--m-salbei-h)}
.nm-streifen.safran .nm-knopf.dunkel,.nm-streifen.papier .nm-knopf.dunkel{background:var(--m-wald);color:#fff}
.nm-liste-kurz li{border-bottom:1px solid var(--m-linie)}
.nm-liste-kurz a{color:var(--m-wald);text-decoration:none;border-bottom:1px solid var(--m-salbei)}
.nm-liste-kurz b{color:var(--m-radicchio)}
.nm-streifen.petrol .nm-liste-kurz li{border-color:rgba(255,255,255,.18)}

/* ---------- Chat-Abschnitt und Kochen-Teaser ---------- */
.nm-chat{background:var(--m-salbei-d)}
.nm-chat .nm-kicker{color:#fff}
.nm-chat h2 em{color:#fff;font-style:normal;text-decoration:underline;text-decoration-color:var(--m-radicchio);text-decoration-thickness:.1em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.nm-chat .nm-lead2{color:#eef2ea}
.nm-chat .nm-knopf{background:#fff;color:var(--m-wald)}
.nm-kochen{background:var(--m-radicchio)}
.nm-kochen-bild{background-image:image-set(url('/nahrungsmittel/bilder/f-kochen-1600.webp') type('image/webp'),url('/nahrungsmittel/bilder/f-kochen-1600.jpg') type('image/jpeg'))}
.nm-kochen .nm-kicker{color:#fff}
.nm-kochen .nm-knopf{background:#fff;color:var(--m-radicchio)}

/* ---------- /was-koche-ich/ ---------- */
.wk-held{background:var(--m-salbei-d)}
/* Held-Bild: wieder der Kühlschrank von vorher (Mike 2026-09-13) */
.wk-held .wk-kicker{color:#fff}
.wk-held h1{font-weight:800;letter-spacing:-.035em}
.wk-held h1 em{color:#fff;font-style:normal;padding-right:0;text-decoration:underline;text-decoration-color:var(--m-radicchio);text-decoration-thickness:.1em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.wk-held p{color:#eef2ea}
.wk-held .wk-knopf.dunkel{background:#fff;color:var(--m-wald)}
.wk-typ{display:inline-block;border-radius:14px;background:rgba(255,255,255,.95);color:var(--m-wald);font-weight:500}
.wk-typ a{color:var(--m-radicchio)!important}
.wk-band.dunkel{background:var(--m-wald);color:#eef2ea}
.wk-band.dunkel .wk-kicker{color:var(--m-zitrone)}
.wk-band.dunkel .wk-lead{color:#cfdccb}
.wk-band.petrol{background:var(--m-salbei-h);color:var(--m-text)}
.wk-band.petrol .wk-titel{color:var(--m-wald)!important}
.wk-band.papier2{background:var(--m-salbei-hh)}
.wk-titel{color:var(--m-wald);line-height:1.06;margin-bottom:1.1rem}
.wk-form textarea{border:0;border-radius:12px;box-shadow:var(--m-schatten)}
.wk-wuensche button{border:1px solid rgba(255,255,255,.45);color:#fff;font-weight:500}
.wk-wuensche button:hover{border-color:#fff}
.wk-wuensche button.an{background:#fff;border-color:#fff;color:var(--m-wald);font-weight:600}
.wk-band.dunkel .wk-knopf{background:var(--m-radicchio)}
.wk-band.dunkel .wk-knopf:hover{background:#761833}
.wk-band.dunkel .wk-knopf.linie{background:transparent}
.wk-wahl{margin:.9rem 0 0}
.wk-wahl > b{display:block;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--m-zitrone);margin-bottom:.35rem}
.wk-wahl .wk-wuensche{margin:0}
.wk-status{color:var(--m-zitrone)}
.wk-fortschritt span{background:var(--m-zitrone)}
.wk-ergebnis{border:0;box-shadow:var(--m-schatten);background:#fff}
.wk-ergebnis h4{color:var(--m-radicchio);font-family:'Poppins',sans-serif;font-weight:700}
.wk-label{color:var(--m-salbei-d)}
.wk-zutat{border:1px solid var(--m-linie)}
.wk-karte{border:0;box-shadow:var(--m-schatten);border-radius:14px}
.wk-karte h3{color:var(--m-wald)}
.wk-typblock{border-left:5px solid var(--m-radicchio)}
.wk-tisch{background:var(--m-salbei-hh)}
.wk-teaser{background:var(--m-salbei-h)}
.wk-teaser-bild{background-image:image-set(url('/nahrungsmittel/bilder/f-protein-1600.webp') type('image/webp'),url('/nahrungsmittel/bilder/f-protein-1600.jpg') type('image/jpeg'))}
.wk-teaser .wk-kicker{background:transparent!important;color:var(--m-radicchio)!important}
.wk-gate{border:0;box-shadow:var(--m-schatten)}

/* ---------- Schwebendes Chat-Fenster (Baustein chat.js) ---------- */
body .nmc-knopf{background:var(--m-radicchio);color:#fff;font-family:'Inter',sans-serif;font-weight:600;box-shadow:0 10px 30px rgba(31,53,39,.3)}
body .nmc-fenster{background:var(--m-creme);color:var(--m-text);box-shadow:0 24px 60px rgba(31,53,39,.35);font-family:'Inter',system-ui,sans-serif}
body .nmc-kopf{background:var(--m-wald);border-bottom:0}
body .nmc-kopf b{font-family:'Poppins',sans-serif;font-weight:700;color:#fff}
body .nmc-kopf span{color:#cfdccb}
body .nmc-kopf button{background:#fff;color:var(--m-wald)}
body .nmc-leer{color:var(--m-grau)}
body .nmc-blase.ich{background:var(--m-wald);color:#fff}
body .nmc-blase.ki{background:#fff;box-shadow:var(--m-schatten)}
body .nmc-blase h4{font-family:'Poppins',sans-serif;font-weight:700;color:var(--m-radicchio)}
body .nmc-beispiele button{color:var(--m-wald);border:1px solid var(--m-linie);background:#fff}
body .nmc-beispiele button:hover{border-color:var(--m-salbei-d);color:var(--m-wald)}
body .nmc-form textarea{border:1px solid var(--m-linie)}
body .nmc-senden{background:var(--m-radicchio);color:#fff}
body .nmc-loeschen{color:var(--m-grau);border:1px solid var(--m-linie);background:#fff}
body .nmc-status{color:var(--m-radicchio)}
body .nmc-lauf{background:var(--m-salbei-h)}
body .nmc-lauf span{background:var(--m-radicchio)}
body .nmc-gate{background:#fff;color:var(--m-text);box-shadow:var(--m-schatten)}
body .nmc-gate b{color:var(--m-wald)}
body .nmc-chip.gruen i{background:var(--m-gruen)}
body .nmc-chip.gelb i{background:var(--m-gelb)}
body .nmc-chip.rot i{background:var(--m-rot)}

@media (max-width:900px){
  .nm-held{background-position:70% center}
  .nm-held::before{background:linear-gradient(180deg,rgba(31,53,39,.25) 0%,rgba(31,53,39,.6) 45%,rgba(31,53,39,.88) 100%)}
}
@media (max-width:640px){
  .nm-sticker{top:.9rem;right:.8rem;width:96px;height:96px}
  .nm-sticker b{font-size:1.45rem}.nm-sticker span{font-size:.6rem}
  .nm-tabelle tr{border:1px solid var(--m-linie);border-left:5px solid var(--m-linie);border-radius:10px;box-shadow:none}
  .nm-tabelle tr.gruen{border-left-color:var(--m-gruen)}.nm-tabelle tr.gelb{border-left-color:var(--m-gelb)}.nm-tabelle tr.rot{border-left-color:var(--m-rot)}
}
@media (prefers-reduced-motion:reduce){.nm-knopf,.wk-knopf{transition:none}}