/* ============================================================================
   Rezeptsammlung – Designsystem v2 "Editorial Kochbuch"
   Referenz Trainingskarten: Creme · Schwarz · Korallrot.
   Große kondensierte Überschriften, elegante kursive Serifen-Untertitel,
   feine Linien, ruhige Magazin-Typografie. Offline: nur Systemschriften.
   ============================================================================ */
:root{
  --creme:#f5f0e4; --creme-2:#efe8d8; --karte:#fcfaf3; --karte-2:#f8f4ea;
  --tinte:#1b1917; --tinte-70:#4a4640; --tinte-45:#7c766c;
  --linie:#e0d8c6; --linie-stark:#1b1917;
  --korall:#df5138; --korall-d:#b23c26; --gold:#c69a34;
  --gut:#3f7d54;
  --sans:"Archivo","Franklin Gothic Medium","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --r2:8px;--r3:16px;--r4:24px;--r5:40px;--r6:64px;
  --breite:1240px; --sp:.04em;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.6;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--korall);outline-offset:2px}

.headline{font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-stretch:condensed;line-height:.96}
.serif-it{font-family:var(--serif);font-style:italic}
a{color:var(--korall-d)}
button{font-family:var(--sans);cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Hinweisband ---------- */
.band{background:var(--tinte);color:var(--creme);padding:7px var(--r4);font-size:12.5px;text-align:center;letter-spacing:.3px}
.band b{color:var(--korall)}

/* ---------- Kopf ---------- */
.kopf{background:var(--creme);border-bottom:2px solid var(--linie-stark);position:sticky;top:0;z-index:30}
.kopf-in{max-width:var(--breite);margin:0 auto;padding:var(--r3) var(--r4);display:flex;align-items:center;gap:var(--r4);flex-wrap:wrap}
.marke{display:flex;flex-direction:column;line-height:1}
.marke .wort{font-family:var(--serif);font-size:27px;letter-spacing:.4px;font-weight:600}
.marke .sub{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--tinte-45);margin-top:3px}
.suchbox{flex:1 1 260px;position:relative}
.suchbox input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--linie-stark);background:var(--karte);
  font-size:15px;color:var(--tinte);border-radius:0}
.suchbox::before{content:"";position:absolute;left:13px;top:50%;width:14px;height:14px;transform:translateY(-50%);
  border:2px solid var(--tinte-45);border-radius:50%;box-shadow:6px 6px 0 -4px var(--tinte-45)}
.kopf-akt{display:flex;gap:var(--r2)}
.icon-btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:var(--sp);text-transform:uppercase;
  font-weight:700;padding:10px 15px;border:1px solid var(--linie-stark);background:var(--karte);color:var(--tinte)}
.icon-btn:hover{background:var(--tinte);color:var(--creme)}
.icon-btn.aktiv{background:var(--tinte);color:var(--creme)}
.icon-btn.korall{background:var(--korall);border-color:var(--korall);color:#fff}
.icon-btn.korall:hover{background:var(--korall-d);border-color:var(--korall-d)}
.zahlpille{background:var(--korall);color:#fff;border-radius:20px;padding:0 7px;font-size:11px;min-width:18px;text-align:center}

/* ---------- Layout ---------- */
.wrap{max-width:var(--breite);margin:0 auto;padding:var(--r4)}
.grid2{display:grid;grid-template-columns:236px 1fr;gap:var(--r5);align-items:start}

/* ---------- Filter ---------- */
.filter{position:sticky;top:96px}
.filter h3{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--tinte);font-weight:800;
  margin:var(--r4) 0 10px;padding-bottom:5px;border-bottom:1px solid var(--linie)}
.filter h3:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:5px 11px;border:1px solid var(--linie);background:var(--karte);color:var(--tinte-70);font-size:13px;border-radius:20px;transition:.12s}
.chip:hover{border-color:var(--korall);color:var(--tinte)}
.chip[aria-pressed="true"]{background:var(--korall);border-color:var(--korall);color:#fff}
.filter select{width:100%;padding:9px;border:1px solid var(--linie-stark);background:var(--karte);border-radius:0;font-family:var(--sans)}
.reset{background:none;border:none;color:var(--korall-d);padding:0;font-size:13px;margin-top:18px}

/* ---------- Rasterkopf ---------- */
.rk{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--r3);flex-wrap:wrap;
  border-bottom:2px solid var(--linie-stark);padding-bottom:10px;margin-bottom:var(--r4)}
.rk .anzahl{font-family:var(--serif);font-style:italic;color:var(--tinte-45);font-size:15px}
.rk-sort{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--tinte-45)}
.rk-sort select{padding:7px 9px;border:1px solid var(--linie-stark);background:var(--karte);font-family:var(--sans);font-size:13px;text-transform:none;letter-spacing:0}

/* ---------- Karten ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--r4)}
.karte{background:var(--karte);border:1px solid var(--linie-stark);display:flex;flex-direction:column;position:relative;
  transition:transform .16s ease, box-shadow .16s ease;cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit}
.karte:hover{transform:translateY(-4px);box-shadow:7px 7px 0 var(--linie-stark)}
.karte-bild{aspect-ratio:5/4;background:linear-gradient(135deg,var(--karte-2),var(--creme-2));position:relative;
  border-bottom:1px solid var(--linie-stark);display:flex;align-items:center;justify-content:center;overflow:hidden}
.karte-bild .mono{font-family:var(--serif);font-style:italic;color:#c3b8a0;font-size:15px;letter-spacing:.3px}
.karte-bild .initiale{font-family:var(--serif);font-size:62px;color:#d8ccb2;font-weight:600;line-height:1}
.karte-oben{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:9px}
.badge{font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:800;padding:3px 7px;background:var(--tinte);color:var(--creme)}
.badge.pruef{background:var(--korall)}
.badge.gut{background:var(--gut)}
.stern{font-size:19px;line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);background:none;border:none;padding:2px}
.stern.an{color:var(--gold)}
.karte-txt{padding:var(--r3);display:flex;flex-direction:column;gap:6px;flex:1}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:1.6px;color:var(--korall-d);font-weight:800}
.karte-titel{font-size:21px;letter-spacing:.3px}
.karte-sub{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--tinte-45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.karte-meta{margin-top:auto;padding-top:10px;display:flex;gap:14px;font-size:12.5px;color:var(--tinte-45);
  border-top:1px solid var(--linie);flex-wrap:wrap;align-items:center}
.karte-meta .kcal{color:var(--korall-d);font-weight:800}
.karte-meta .sep{color:var(--linie)}

/* ---------- Detail / Rezeptblatt ---------- */
.overlay{position:fixed;inset:0;background:rgba(27,25,23,.55);z-index:50;display:flex;justify-content:center;overflow-y:auto;padding:var(--r4)}
.blatt{background:var(--karte);max-width:900px;width:100%;border:2px solid var(--linie-stark);align-self:flex-start;position:relative}
.blatt-kopf{padding:0 var(--r5) var(--r4);border-bottom:2px solid var(--linie-stark)}
.blatt-toolbar{display:flex;justify-content:flex-end;align-items:center;min-height:56px;padding-top:max(8px,env(safe-area-inset-top))}
.blatt .eyebrow{font-size:12px;letter-spacing:2px}
.blatt h1{font-size:46px;margin:8px 0 6px;letter-spacing:.4px}
.blatt-sub{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--tinte-70);max-width:60ch}
.blatt-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:var(--r3);font-size:13.5px;color:var(--tinte-45)}
.blatt-meta b{color:var(--tinte);font-weight:700}
.close{position:static;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;min-width:44px;min-height:44px;
  padding:8px 12px;border:1px solid var(--linie-stark);background:var(--karte)}
.close:hover{background:var(--tinte);color:var(--creme)}
.public-subhead{margin:14px 0 4px;font-size:14px}
.public-list{padding-left:18px;margin:0 0 12px}
.lagerhinweis{margin:0 0 18px}

/* Nährwerte prominent */
.nw{margin-top:var(--r4);border:1.5px solid var(--linie-stark)}
.nw-kopf{display:flex;justify-content:space-between;align-items:center;padding:7px var(--r3);border-bottom:1px solid var(--linie);
  font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:800}
.nw-flag{font-size:10px;font-weight:800;letter-spacing:.5px;padding:2px 7px}
.nw-flag.vorl{background:#fbecdf;color:var(--korall-d)}
.nw-flag.ber{background:#e7f0e9;color:var(--gut)}
.nw-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.nw-grid div{padding:14px var(--r3);text-align:center;border-right:1px solid var(--linie)}
.nw-grid div:last-child{border-right:none}
.nw-grid b{display:block;font-weight:800;font-size:27px;font-stretch:condensed;letter-spacing:.5px}
.nw-grid .kcal{color:var(--korall-d)}
.nw-grid span{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--tinte-45)}
.nw-port{padding:7px var(--r3);border-top:1px solid var(--linie);font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--tinte-45)}

.blatt-body{display:grid;grid-template-columns:320px 1fr;gap:var(--r5);padding:var(--r5)}
.zbox{align-self:start}
.zbox h3,.sbox h3{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;
  border-bottom:2px solid var(--linie-stark);padding-bottom:7px;margin:0 0 12px}
.port{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.port button{width:34px;height:34px;border:1px solid var(--linie-stark);background:var(--karte);font-size:19px;line-height:1}
.port button:hover{background:var(--tinte);color:var(--creme)}
.port .n{font-weight:800;font-size:18px;min-width:2ch;text-align:center}
.port .lab{font-family:var(--serif);font-style:italic;color:var(--tinte-45);font-size:14px}
.zgrp{font-family:var(--serif);font-style:italic;color:var(--korall-d);margin:16px 0 4px;font-size:15px}
.zliste{list-style:none;margin:0;padding:0}
.zliste li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dotted var(--linie);font-size:15px}
.zliste li:hover{background:var(--karte-2)}
.zliste .mg{color:var(--tinte-45);white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.zliste .op{font-size:12px;color:var(--korall-d);font-style:italic}
.zadd{margin-top:16px;width:100%;padding:12px;border:1px solid var(--korall);background:var(--korall);color:#fff;
  font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:12.5px}
.zadd:hover{background:var(--korall-d);border-color:var(--korall-d)}

.werk{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.werk button{font-size:12px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;padding:8px 13px;border:1px solid var(--linie-stark);background:var(--karte)}
.werk button:hover{background:var(--tinte);color:var(--creme)}
.sliste{counter-reset:s;list-style:none;margin:0;padding:0}
.sliste li{counter-increment:s;position:relative;padding:0 0 20px 54px;min-height:40px;font-size:16px}
.sliste li::before{content:counter(s);position:absolute;left:0;top:-6px;font-weight:800;font-stretch:condensed;font-size:34px;color:var(--korall);width:42px}
.sliste li:last-child{padding-bottom:0}
.warn{background:#fbf1e2;border-left:3px solid var(--gold);padding:9px var(--r3);margin-top:10px;font-size:13px;color:#6d5a26}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags span{font-size:12px;color:var(--tinte-45);border:1px solid var(--linie);padding:2px 10px;border-radius:20px}
.notiz{width:100%;min-height:76px;border:1px solid var(--linie-stark);background:var(--karte-2);padding:11px;
  font-family:var(--serif);font-size:14px;border-radius:0;margin-top:12px;resize:vertical}
.quellen{margin-top:16px;font-size:12px;color:var(--tinte-45);font-family:var(--serif);font-style:italic}

/* ---------- Panel ---------- */
.panel{position:fixed;top:0;right:0;height:100%;width:460px;max-width:94vw;background:var(--karte);
  border-left:2px solid var(--linie-stark);z-index:55;transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
.panel.auf{transform:translateX(0)}
.panel-kopf{padding:var(--r4);border-bottom:2px solid var(--linie-stark);display:flex;justify-content:space-between;align-items:center}
.panel-kopf .wort{font-family:var(--serif);font-size:23px}
.panel-body{padding:var(--r4);overflow-y:auto}
.eg{margin-bottom:var(--r4)}
.eg h4{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--korall-d);font-weight:800;margin:0 0 10px;border-bottom:1px solid var(--linie);padding-bottom:5px}
.eliste{list-style:none;margin:0;padding:0}
.eliste li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dotted var(--linie);font-size:15px}
.eliste li.ab{opacity:.45;text-decoration:line-through}
.eliste .mg{margin-left:auto;color:var(--tinte-45);font-variant-numeric:tabular-nums}
.eliste .pk{font-size:11px;color:var(--tinte-45);font-style:italic;margin-left:6px}
.zeile{display:flex;align-items:center;gap:9px;margin:8px 0;color:var(--tinte-70);font-size:14px}
.hint{font-size:13px;color:var(--tinte-45);font-family:var(--serif);font-style:italic}
.klein{background:none;border:none;color:var(--korall-d);padding:0;font-size:13px}

.fuss{max-width:var(--breite);margin:var(--r6) auto var(--r5);padding:var(--r4) var(--r4) 0;color:var(--tinte-45);font-size:13px;border-top:2px solid var(--linie-stark)}
.fuss-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.fuss-nav .sep{color:var(--linie)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .filter{position:static;border:1px solid var(--linie);padding:var(--r3);background:var(--karte-2)}
  .blatt-body{grid-template-columns:1fr}
  .blatt h1{font-size:34px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:var(--r3)}
  .raster{grid-template-columns:1fr 1fr;gap:12px}
  .karte-titel{font-size:17px}
  .karte-sub{display:none}
  .nw-grid b{font-size:21px}
  .blatt-kopf{padding:0 var(--r4) var(--r4)}
  .blatt-body{padding:var(--r4)}
}

/* ---------- Kochmodus ---------- */
body.koch .overlay{background:var(--creme)}
body.koch .blatt{max-width:760px;border-color:var(--korall)}
body.koch .zbox{display:none}
body.koch .blatt-body{grid-template-columns:1fr}
body.koch .sliste li{font-size:23px;padding-bottom:32px}
body.koch .sliste li::before{font-size:42px}

/* ---------- Druck ---------- */
@media print{
  .band,.kopf,.filter,.panel,.stern,.close,.rk,.kopf-akt,.werk,.notiz,.zadd,.icon-btn{display:none!important}
  body,.overlay,.blatt{background:#fff!important;color:#000}
  .overlay{position:static;padding:0;display:block}
  .blatt{max-width:100%;border:none}
  .blatt-body{grid-template-columns:300px 1fr;gap:24px}
  .nw,.zbox h3,.sbox h3{border-color:#000}
  .sliste li::before,.nw-grid .kcal,.eyebrow{color:#000}
  a{color:#000;text-decoration:none}
}

/* ============================================================================
   v3 – Navigation, Ansichten, Vorrat, Makros, Mitmachen, Admin, Export
   ============================================================================ */
.hauptnav{max-width:var(--breite);margin:0 auto;padding:0 var(--r4);display:flex;gap:2px;flex-wrap:wrap;border-top:1px solid var(--linie)}
.hauptnav button{background:none;border:none;border-bottom:3px solid transparent;padding:12px 16px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--tinte-45)}
.hauptnav button:hover{color:var(--tinte)}
.hauptnav button.aktiv{color:var(--tinte);border-bottom-color:var(--korall)}
.viewtitel{font-size:34px;margin:0 0 4px}
.viewsub{font-size:17px;color:var(--tinte-45);margin:0 0 var(--r4);max-width:70ch}
.view{animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Formulare */
.feld{margin-bottom:var(--r3)}
.feld label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--tinte-70);margin-bottom:5px}
.feld input,.feld select,.feld textarea{width:100%;padding:10px 12px;border:1px solid var(--linie-stark);background:var(--karte);
  font-family:var(--sans);font-size:15px;border-radius:0;color:var(--tinte)}
.feld textarea{min-height:96px;resize:vertical;font-family:var(--serif)}
.feld .zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.karte-block{background:var(--karte);border:1px solid var(--linie-stark);padding:var(--r4);margin-bottom:var(--r4)}
.karte-block h3{margin:0 0 var(--r3);font-size:15px;text-transform:uppercase;letter-spacing:1px}
.hilfe{font-size:12.5px;color:var(--tinte-45);font-style:italic;font-family:var(--serif)}
.erfolg{background:#e7f0e9;border-left:3px solid var(--gut);padding:10px var(--r3);color:#2f6741;font-size:14px;margin-top:10px}
.fehlerbox{background:#fbe8e2;border-left:3px solid var(--korall-d);padding:10px var(--r3);color:var(--korall-d);font-size:14px;margin-top:10px}

/* Chips / Tags in Vorrat */
.pantry-chips{display:flex;flex-wrap:wrap;gap:7px;margin:var(--r3) 0}
.pantry-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;background:var(--karte-2);border:1px solid var(--linie-stark);font-size:14px}
.pantry-chip button{background:none;border:none;color:var(--korall-d);font-size:15px;line-height:1;padding:0}
.zutat-vorschlag{border:1px solid var(--linie);background:var(--karte);max-height:210px;overflow-y:auto;margin-top:-1px}
.zutat-vorschlag button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 12px;font-size:14px;border-bottom:1px solid var(--linie)}
.zutat-vorschlag button:hover{background:var(--karte-2)}

/* Ergebnisliste Vorrat/Makro */
.erg-liste{display:flex;flex-direction:column;gap:12px;margin-top:var(--r4)}
.erg{display:grid;grid-template-columns:1fr auto;gap:var(--r3);align-items:center;background:var(--karte);border:1px solid var(--linie-stark);padding:var(--r3);cursor:pointer}
.erg:hover{box-shadow:4px 4px 0 var(--linie-stark)}
.erg h4{margin:0;font-size:19px;font-family:var(--sans)}
.erg .meta{font-size:13px;color:var(--tinte-45);margin-top:3px}
.erg .begruendung{font-size:13px;color:var(--tinte-70);margin-top:6px;font-family:var(--serif);font-style:italic}
.score{text-align:center;min-width:96px}
.score .wert{font-weight:800;font-size:26px;font-stretch:condensed}
.score .lab{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--tinte-45)}
.grp-titel{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;color:var(--korall-d);margin:var(--r4) 0 8px;border-bottom:1px solid var(--linie);padding-bottom:5px}
.bewertung{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;color:#fff;background:var(--tinte)}
.bewertung.top{background:var(--gut)}
.bewertung.gut{background:var(--korall)}
.bewertung.mittel{background:var(--gold);color:var(--tinte)}
.bewertung.schwach{background:var(--tinte-45)}
.fehlt-liste{font-size:12.5px;color:var(--korall-d);margin-top:4px}

/* Export-Buttons */
.export-reihe{display:flex;flex-wrap:wrap;gap:8px;margin:var(--r3) 0}
.export-reihe button{font-size:12px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;padding:9px 13px;border:1px solid var(--linie-stark);background:var(--karte)}
.export-reihe button:hover{background:var(--tinte);color:var(--creme)}
.opt-reihe{display:flex;flex-wrap:wrap;gap:14px;margin:var(--r2) 0 var(--r3);font-size:13px;color:var(--tinte-70)}
.opt-reihe label{display:inline-flex;align-items:center;gap:6px}

/* Panel-Backdrop */
.panel-backdrop{position:fixed;inset:0;background:rgba(27,25,23,.35);z-index:54}

/* Admin-Tabelle */
.admin-item{border:1px solid var(--linie-stark);background:var(--karte);padding:var(--r3);margin-bottom:12px}
.admin-item .kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.admin-item .status{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;background:var(--tinte);color:var(--creme)}
.admin-item .msg{margin:8px 0;font-family:var(--serif)}
.admin-item select{padding:6px;border:1px solid var(--linie-stark);background:var(--karte)}
.leer{color:var(--tinte-45);font-style:italic;font-family:var(--serif);padding:var(--r4) 0}

@media (max-width:560px){
  .viewtitel{font-size:26px}
  .feld .zwei{grid-template-columns:1fr}
  .hauptnav{padding:0 var(--r3);gap:0}
  .hauptnav button{padding:10px 11px;font-size:12px}
}
@media print{.hauptnav,.band,.panel-backdrop{display:none!important}}

/* v4 – manuelle Mengen-Schrittsteuerung + Rundungshinweis */
.zliste .mg{display:inline-flex;align-items:center;gap:6px}
.mini-step{width:22px;height:22px;border:1px solid var(--linie-stark);background:var(--karte);font-size:14px;line-height:1;padding:0;border-radius:0}
.mini-step:hover{background:var(--tinte);color:var(--creme)}
.mg-wert{min-width:64px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.zliste li.gerundet .mg-wert{color:var(--korall-d)}
.zliste li.gerundet .mg-wert::after{content:" ≈";color:var(--tinte-45);font-weight:400}

/* ============================================================================
   v5 – Redaktion (Band/Logo/Ambsifiziert) + echte Mobile-First-Überarbeitung
   ============================================================================ */
.band-link{background:none;border:none;color:var(--korall);font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.band-link:hover{color:#fff}
button.marke{background:none;border:none;text-align:left;cursor:pointer;padding:0;font:inherit;color:inherit}
button.marke:hover .wort{color:var(--korall-d)}
.badge.hinweis{background:var(--gold);color:var(--tinte)}
.ambsifiziert{margin-top:var(--r4);text-align:right;font-family:var(--serif);font-style:italic;font-size:12px;color:var(--tinte-45);letter-spacing:.3px}

/* Filter-Toggle: nur mobil sichtbar, sonst ausgeblendet */
.filter-toggle{display:none}
/* Band-Kurztext nur mobil */
.band-kurz{display:none}

/* ---------- Mobile-First: Smartphone (<= 640px) ----------
   Julian will WEITERHIN zwei Karten nebeneinander. Problem war der
   zu grosse Kopf-/Filterbereich, nicht die Zweispaltigkeit.        */
@media (max-width:640px){
  /* Kopf kompakt, Suche sichtbar, Aktionen kompakt */
  .kopf-in{padding:10px 14px;gap:10px}
  .marke .wort{font-size:21px}
  .marke .unter{font-size:11px}
  .suchbox{order:3;flex-basis:100%}
  .kopf-akt{order:2;margin-left:auto;gap:6px}
  .icon-btn{padding:9px 11px;min-height:44px;font-size:13px}
  /* schwarze Leiste flacher + Kurztext */
  .band{padding:5px 12px;font-size:12px}
  .band-lang{display:none}
  .band-kurz{display:inline}
  /* Navigation vollstaendig erreichbar: horizontal scrollbar, nichts abgeschnitten */
  .hauptnav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding:0 12px;
    scrollbar-width:none;border-top:1px solid var(--linie)}
  .hauptnav::-webkit-scrollbar{display:none}
  .hauptnav button{padding:12px 13px;white-space:nowrap;min-height:44px;font-size:12px}

  /* Steuerzeile: "43 Rezepte · Filter · Sortieren" kompakt in einer Reihe */
  .rk{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .rk .anzahl{font-size:14px}
  .filter-toggle{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 12px;
    background:var(--karte);border:1px solid var(--linie-stark);font-family:var(--sans);
    font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--tinte);cursor:pointer}
  .filter-toggle[aria-expanded="true"]{background:var(--tinte);color:var(--creme)}
  .rk-sort{margin-left:auto}
  /* Filter standardmaessig eingeklappt; erste Rezeptreihe sofort sichtbar */
  .filter{position:static;display:none;border:1px solid var(--linie-stark);
    background:var(--karte-2);padding:var(--r3);margin-bottom:var(--r3)}
  body.filter-auf .filter{display:block;animation:fade .18s ease}
  .filter h3{margin-top:var(--r3)}
  .filter h3:first-child{margin-top:0}

  /* ZWEI Karten nebeneinander, kompakt */
  .raster{grid-template-columns:1fr 1fr;gap:10px}
  .karte{flex-direction:column}
  .karte-bild{aspect-ratio:4/3;border-right:none;border-bottom:1px solid var(--linie-stark)}
  .karte-txt{padding:10px 11px;gap:4px}
  .karte-titel{font-size:16px;line-height:1.18;letter-spacing:.2px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .karte-sub{display:none}
  .karte-meta{gap:8px;padding-top:8px;font-size:11.5px}
  .karte-oben{padding:6px}

  /* Detail nahezu Vollbild */
  .overlay{padding:0;background:var(--karte)}
  .blatt{max-width:100%;min-height:100vh;min-height:100dvh;border:none;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .blatt-kopf{padding:0 18px 16px;position:relative}
  .blatt-toolbar{position:sticky;top:0;z-index:3;margin:0 -18px 8px;padding:calc(8px + env(safe-area-inset-top)) 18px 8px;background:var(--karte);border-bottom:1px solid var(--linie)}
  .blatt h1{font-size:26px}
  .close{position:static;box-shadow:none}
  .werk{flex-wrap:wrap}
  .blatt-body{grid-template-columns:1fr;gap:24px;padding:18px}
  .nw-grid{grid-template-columns:1fr 1fr}
  .nw-grid div:nth-child(2){border-right:none}
  .nw-grid div:nth-child(1),.nw-grid div:nth-child(2){border-bottom:1px solid var(--linie)}
  .port button,.mini-step{min-width:40px;min-height:40px}
  .panel{width:100%;max-width:100%}
  .werk button{min-height:40px}
  /* Footer sauber umbrechen */
  .fuss-nav{flex-wrap:wrap;gap:8px 14px}
  body{-webkit-text-size-adjust:100%}
}
/* Sehr schmale Geraete (<= 345px): erst hier eine Spalte */
@media (max-width:345px){
  .raster{grid-template-columns:1fr;gap:12px}
  .karte-titel{-webkit-line-clamp:3}
}
/* Tablet: zwei Spalten */
@media (min-width:641px) and (max-width:900px){
  .raster{grid-template-columns:1fr 1fr}
}
/* verhindert horizontales Scrollen generell */
html,body{max-width:100%;overflow-x:hidden}

/* v5 – Mitmachen: Honeypot (unsichtbar), Upload-Liste */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.dateiliste{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.dateizeile{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;padding:6px 8px;border:1px solid var(--linie);background:var(--karte-2)}
input[type=file]{font-size:14px}

/* v5 – Kategorie-Motive statt Buchstaben-Platzhalter */
.karte-bild .motiv{color:var(--korall-d);width:56%;max-width:120px;opacity:.55}
.karte-bild .motiv svg{width:100%;height:auto;display:block;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.karte-bild.mit-bild{background-size:cover;background-position:center}
.karte-bild.mit-bild .motiv{display:none}
@media (max-width:640px){ .karte-bild .motiv{width:52px} }

/* v6 – Kartenbezug dezent */
.karte-meta .bezug{color:var(--tinte-45);font-style:italic;font-family:var(--serif);font-size:12px;margin-left:auto}
@media (max-width:640px){ .karte-meta .bezug{margin-left:0;flex-basis:100%} }

/* v7 – Admin: Dateizeilen mit Ansehen/Herunterladen */
.admin-dateien{margin:8px 0;display:flex;flex-direction:column;gap:6px}
.admin-datei{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 10px;border:1px solid var(--linie-stark);background:var(--karte-2)}
.admin-datei .ad-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-datei .ad-name{font-weight:600;word-break:break-word}
.admin-datei .ad-meta{font-size:12px;color:var(--tinte-45)}
.admin-datei .ad-akt{display:flex;gap:8px;flex-wrap:wrap}
.admin-datei .ad-btn{display:inline-flex;align-items:center;min-height:34px;padding:5px 12px;border:1px solid var(--linie-stark);background:var(--karte);color:var(--tinte);font-size:12px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none;cursor:pointer}
.admin-datei .ad-btn:hover{background:var(--tinte);color:var(--creme)}