@charset "utf-8";
/*
 * VOIDKORB – Gestaltung „Werkstatt", Akzent Petrol.
 *
 * Dieselbe Grundlage wie VOIDCHEF – dunkles Grafit, große Tippziele, Zahlen in
 * Tabellenziffern – aber mit Petrol statt Kupfer als Leitfarbe. Zwei Apps mit
 * demselben Aussehen auf einem Handy sind eine Einladung zum Vergreifen.
 *
 * Alle Textfarben sind gegen ihren Untergrund geprüft und liegen über WCAG AA
 * (4,5:1); die Kupfer- und Bernsteinflächen tragen dunkle Schrift.
 */

@font-face { font-family:"Inter"; src:url(fonts/inter400.woff2) format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"Inter"; src:url(fonts/inter500.woff2) format("woff2"); font-weight:500; font-display:swap }
@font-face { font-family:"Inter"; src:url(fonts/inter600.woff2) format("woff2"); font-weight:600; font-display:swap }
@font-face { font-family:"Inter"; src:url(fonts/inter700.woff2) format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"VKMono"; src:url(fonts/mono500.woff2) format("woff2"); font-weight:500; font-display:swap }

:root{
  --bg-0:#14110F; --bg-1:#1C1815; --bg-2:#251F1B; --bg-3:#302823;
  --kante:#3D332C; --kante-stark:#55483E; --kante-kontrast:#7D6A58;
  --text:#F5EDE4; --text-2:#C4B5A6; --text-3:#A69076; --tinte:#14110F;
  --kupfer:#3E9E95; --kupfer-hell:#6FCEC4; --kupfer-tief:#1F5F59;
  --bernstein:#FFB627; --bernstein-tief:#7A5410;
  --gruen:#6FA860; --gruen-hell:#8FC77E; --rot:#E46A50; --rot-tief:#7C2A1B;

  --ff:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"VKMono",ui-monospace,"DejaVu Sans Mono","Courier New",monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --r-1:2px; --r-2:4px; --r-3:6px;
  --tab-h:60px;
  --sicher-unten:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ background:var(--bg-0); -webkit-text-size-adjust:100% }
body{
  background:var(--bg-0); color:var(--text);
  font:400 16px/1.5 var(--ff);
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
.hidden{ display:none !important }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.015em }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }

/* Zahlen laufen immer in gleicher Breite – beim Portionsrechnen darf die
   Spalte nicht springen. */
.zahl,.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em }

/* ---------- Anmeldung ---------- */
#login{ min-height:100dvh; display:grid; place-items:center; padding:var(--sp-6) }
.login__box{ width:min(340px,100%); text-align:center }
.login__mark{ width:72px; height:72px }
.login__title{ font-size:26px; letter-spacing:.22em; margin:var(--sp-3) 0 var(--sp-1) }
.login__sub{ color:var(--text-3); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-8) }
.login__box input{
  width:100%; padding:14px var(--sp-4); background:var(--bg-2);
  border:1px solid var(--kante-stark); border-radius:var(--r-2); color:var(--text);
  margin-bottom:var(--sp-3);
}
.login__box input:focus{ outline:2px solid var(--kupfer); outline-offset:1px; border-color:var(--kupfer) }
.login__err{ color:var(--rot); font-size:14px; margin-top:var(--sp-3); min-height:20px }

/* ---------- Grundgerüst ---------- */
#view{
  padding:var(--sp-4) var(--sp-4) calc(var(--tab-h) + var(--sicher-unten) + var(--sp-8));
  max-width:640px; margin:0 auto;
}
.netzband{
  position:sticky; top:0; z-index:30;
  background:var(--bernstein); color:var(--tinte);
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  padding:6px var(--sp-4); text-align:center;
}

.kopf{ margin-bottom:var(--sp-5) }
.kopf__zeile{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3) }
.kopf h1{ font-size:30px; line-height:1.1 }
.kopf__unter{
  color:var(--text-3); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  margin-top:var(--sp-2); font-family:var(--mono);
}
.abschnitt{
  display:flex; align-items:center; gap:var(--sp-3);
  color:var(--text-3); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-family:var(--mono); margin:var(--sp-6) 0 var(--sp-3);
}
.abschnitt::after{ content:""; flex:1; height:1px; background:var(--kante) }

/* ---------- Tab-Leiste ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--bg-1); border-top:1px solid var(--kante);
  padding-bottom:var(--sicher-unten);
}
.tab{
  position:relative; height:var(--tab-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-3); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
}
.tab svg{ width:20px; height:20px; fill:currentColor }
.tab[aria-current="page"]{ color:var(--kupfer-hell) }
.tab[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:22%; right:22%; height:2px; background:var(--kupfer);
}
.tab__zahl{
  position:absolute; top:8px; right:calc(50% - 22px);
  background:var(--kupfer); color:var(--tinte); font-style:normal;
  font-size:10px; font-weight:700; min-width:16px; height:16px; line-height:16px;
  border-radius:8px; padding:0 4px; text-align:center;
}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:0 var(--sp-5);
  border:1px solid var(--kante-stark); border-radius:var(--r-2);
  background:var(--bg-2); color:var(--text);
  font-weight:600; font-size:15px; letter-spacing:.01em;
}
.btn:active{ background:var(--bg-3) }
.btn--primary{ background:var(--kupfer); color:var(--tinte); border-color:var(--kupfer) }
.btn--primary:active{ background:var(--kupfer-hell) }
.btn--block{ width:100%; }
.btn--klein{ min-height:38px; padding:0 var(--sp-3); font-size:13.5px }
.btn--still{ background:transparent; border-color:var(--kante) ; color:var(--text-2) }
.btn--gefahr{ color:var(--rot); border-color:var(--rot-tief) }
.btn:disabled{ opacity:.45 }

.chips{ display:flex; gap:var(--sp-2); flex-wrap:wrap }
.chip{
  padding:7px var(--sp-3); border:1px solid var(--kante); border-radius:var(--r-1);
  background:var(--bg-2); color:var(--text-2); font-size:13px; white-space:nowrap;
}
.chip[aria-pressed="true"],.chip--an{ background:var(--kupfer); color:var(--tinte); border-color:var(--kupfer); font-weight:600 }

.suchfeld{ position:relative; margin-bottom:var(--sp-4) }
.suchfeld input{
  width:100%; padding:13px var(--sp-4) 13px 42px;
  background:var(--bg-2); border:1px solid var(--kante); border-radius:var(--r-2); color:var(--text);
}
.suchfeld svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:var(--text-3) }
.suchfeld input:focus{ outline:2px solid var(--kupfer); outline-offset:1px; border-color:var(--kupfer) }

/* ---------- Rezeptkarte ---------- */
.karte{
  display:block; width:100%; text-align:left;
  background:var(--bg-1); border:1px solid var(--kante);
  border-left:3px solid var(--kupfer); border-radius:var(--r-2);
  padding:var(--sp-4); margin-bottom:var(--sp-3);
}
.karte:active{ background:var(--bg-2) }
.karte__titel{ font-size:19px; line-height:1.25; margin-bottom:var(--sp-2) }
.karte__text{ color:var(--text-2); font-size:14px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.karte__fuss{
  display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  margin-top:var(--sp-3); font-family:var(--mono); font-size:12.5px; color:var(--text-3);
}
.karte__fuss b{ color:var(--bernstein); font-weight:500 }
.karte__fuss i{ color:var(--kupfer-hell); font-style:normal }
.karte__fuss .rechts{ margin-left:auto }

/* ---------- Portions-Stepper ---------- */
.stepper{
  display:grid; grid-template-columns:64px 1fr 64px; align-items:stretch;
  border:1px solid var(--kante-stark); border-radius:var(--r-2); overflow:hidden;
  background:var(--bg-1);
}
.stepper button{ font-size:26px; color:var(--kupfer-hell); background:var(--bg-2) }
.stepper button:active{ background:var(--bg-3) }
.stepper__wert{ text-align:center; padding:var(--sp-3) 0 }
.stepper__zahl{ font-family:var(--mono); font-size:30px; font-weight:500; color:var(--bernstein); display:block; line-height:1 }
.stepper__label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }

/* ---------- Preis-Schilder ---------- */
.schilder{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin:var(--sp-3) 0 }
.schild{
  background:var(--bg-2); border:1px solid var(--kupfer-tief); border-radius:var(--r-2);
  padding:var(--sp-3); text-align:center;
}
.schild__wert{ font-family:var(--mono); font-size:22px; color:var(--kupfer-hell); display:block }
.schild__label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }
.hinweis{ color:var(--text-3); font-size:12.5px; line-height:1.5; margin-top:var(--sp-2) }
.hinweis--warn{ color:var(--bernstein) }

/* ---------- Nährwertbalken ---------- */
.naehr{ margin-top:var(--sp-2) }
.naehr__gross{ font-family:var(--mono); font-size:38px; color:var(--bernstein); line-height:1 }
.naehr__gross small{ font-size:14px; color:var(--text-3); margin-left:6px }
.naehr__zeile{ display:grid; grid-template-columns:96px 1fr 62px; align-items:center; gap:var(--sp-3); padding:5px 0 }
.naehr__name{ font-size:13.5px; color:var(--text-2) }
/* display:block ist Pflicht: Als <span> im Grid wird die Spur zwar blockiert,
   die Füllung darin bliebe aber inline – und auf inline wirkt weder Breite
   noch Höhe. Die Balken wären unsichtbar. */
.naehr__spur{ display:block; height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden }
.naehr__fuell{ display:block; height:100%; background:var(--kupfer) }
.naehr__wert{ font-family:var(--mono); font-size:13px; text-align:right; color:var(--text) }
.naehr__unter{ font-size:12px; color:var(--text-3); padding-left:96px; margin-top:-2px }

/* ---------- Zutatenzeilen ---------- */
.zutat{
  display:grid; grid-template-columns:88px 1fr 16px; gap:var(--sp-3); align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--kante);
}
.zutat:last-child{ border-bottom:0 }
.zutat__menge{ font-family:var(--mono); font-size:14.5px; text-align:right; color:var(--text) }
.zutat__name{ font-size:15px; line-height:1.35 }
.zutat__note{ display:block; color:var(--text-3); font-size:12.5px; margin-top:2px }
.zutat__punkt{ width:9px; height:9px; border-radius:50%; background:var(--kante-stark); justify-self:end; align-self:center }
.zutat__punkt--vorrat{ background:var(--gruen) }
.zutat--optional{ opacity:.72 }
.marke{
  display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--kante-stark); border-radius:var(--r-1);
  padding:1px 5px; color:var(--text-3); margin-left:6px; vertical-align:1px;
}
.marke--offen{ color:var(--bernstein); border-color:var(--bernstein-tief) }

/* ---------- Einkaufsliste ---------- */
.abteilung{
  display:flex; align-items:center; gap:var(--sp-2);
  position:sticky; top:0; z-index:10;
  background:var(--bg-0); border-left:3px solid var(--kupfer);
  padding:7px var(--sp-3); margin:var(--sp-5) 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
}
.abteilung span{ margin-left:auto; color:var(--text-3) }
.ekz{
  display:grid; grid-template-columns:28px 1fr auto; gap:var(--sp-3); align-items:center;
  padding:12px var(--sp-2); border-bottom:1px solid var(--kante); width:100%; text-align:left;
}
.ekz__box{
  width:24px; height:24px; border:2px solid var(--kante-kontrast); border-radius:var(--r-1);
  display:grid; place-items:center; color:transparent;
}
.ekz--erledigt .ekz__box{ background:var(--gruen); border-color:var(--gruen); color:var(--tinte) }
.ekz--erledigt .ekz__name{ text-decoration:line-through; color:var(--text-3) }
.ekz__name{ font-size:15.5px; line-height:1.3 }
.ekz__unter{ display:block; color:var(--text-3); font-size:12px; margin-top:2px }
.ekz__menge{ font-family:var(--mono); font-size:14.5px; text-align:right; white-space:nowrap }
.ekz__preis{ display:block; color:var(--text-3); font-size:12px }
.ekz--gedeckt{ opacity:.6 }

/* ---------- Vorrat ---------- */
.vorrat{ padding:12px 0; border-bottom:1px solid var(--kante); width:100%; text-align:left }
.vorrat__zeile{ display:flex; align-items:baseline; gap:var(--sp-3) }
.vorrat__name{ font-size:15.5px; flex:1 }
.vorrat__menge{ font-family:var(--mono); font-size:14.5px }
.vorrat__spur{ display:block; height:5px; background:var(--bg-3); border-radius:3px; margin-top:8px; overflow:hidden }
.vorrat__fuell{ display:block; height:100%; background:var(--gruen) }
.vorrat__fuell--mittel{ background:var(--bernstein) }
.vorrat__fuell--leer{ background:var(--rot) }
.vorrat__fuss{ display:flex; gap:var(--sp-2); align-items:center; margin-top:6px; font-size:12px; color:var(--text-3) }
.vorrat__fuss .rechts{ margin-left:auto }

/* ---------- Wochenplan ---------- */
.tag{
  display:grid; grid-template-columns:52px 1fr; gap:var(--sp-3);
  border:1px solid var(--kante); border-radius:var(--r-2);
  margin-bottom:var(--sp-2); overflow:hidden; background:var(--bg-1);
}
.tag--heute{ border-color:var(--kupfer) }
.tag__kopf{
  background:var(--bg-2); display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--sp-3) 0; font-family:var(--mono);
}
.tag--heute .tag__kopf{ background:var(--kupfer); color:var(--tinte) }
.tag__wt{ font-size:13px; font-weight:600 }
.tag__dat{ font-size:10.5px; opacity:.7 }
.tag__inhalt{ padding:var(--sp-2) var(--sp-3) var(--sp-3) 0 }
.tag__essen{ display:flex; align-items:baseline; gap:var(--sp-2); padding:7px 0; width:100%; text-align:left }
.tag__essen + .tag__essen{ border-top:1px solid var(--kante) }
.tag__titel{ flex:1; font-size:14.5px; line-height:1.3 }
.tag__zahl{ font-family:var(--mono); font-size:12px; color:var(--bernstein); white-space:nowrap }
.tag__leer{ color:var(--text-3); font-size:14px; padding:10px 0; width:100%; text-align:left }

/* ---------- Kochmodus ---------- */
.koch{ position:fixed; inset:0; z-index:60; background:var(--bg-0); display:flex; flex-direction:column }
.koch__kopf{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--kante);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.koch__kopf .rechts{ margin-left:auto; color:var(--gruen-hell) }
.koch__spur{ height:3px; background:var(--bg-3) }
.koch__fort{ height:100%; background:var(--kupfer); transition:width .2s }
.koch__mitte{ flex:1; overflow-y:auto; padding:var(--sp-5) var(--sp-4) }
.koch__nr{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-4) }
.koch__text{ font-size:23px; line-height:1.45 }
.koch__text b{ color:var(--bernstein); font-weight:500; font-family:var(--mono); font-size:21px }
.koch__zutaten{ margin-top:var(--sp-6); border:1px solid var(--kante); border-radius:var(--r-2); padding:var(--sp-3) }
.koch__zutaten h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-2) }
.koch__fuss{ display:grid; grid-template-columns:1fr 1.6fr; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--sicher-unten)); border-top:1px solid var(--kante) }
.koch__fuss .btn{ min-height:56px }

.timer{
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-5); padding:var(--sp-3); background:var(--bg-1);
  border:1px solid var(--kante); border-radius:var(--r-2);
}
.timer__ring{ position:relative; width:62px; height:62px; flex:none }
.timer__ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.timer__ring circle{ fill:none; stroke-width:4 }
.timer__bahn{ stroke:var(--bg-3) }
.timer__wert{ stroke:var(--kupfer); stroke-linecap:round; transition:stroke-dashoffset 1s linear }
.timer__zahl{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:17px; color:var(--bernstein) }
.timer__text b{ display:block; font-size:15px; margin-bottom:2px }
.timer__text span{ color:var(--text-3); font-size:12.5px }

/* ---------- Blatt und Meldung ---------- */
.sheet{ position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end }
.sheet__hg{ position:absolute; inset:0; background:rgba(0,0,0,.62) }
.sheet__box{
  position:relative; width:100%; max-height:82dvh; overflow-y:auto;
  background:var(--bg-1); border-top:1px solid var(--kante-stark);
  border-radius:var(--r-3) var(--r-3) 0 0;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--sicher-unten));
}
.sheet h3{ font-size:18px; margin-bottom:var(--sp-4) }
.sheet__eintrag{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  padding:14px var(--sp-2); border-bottom:1px solid var(--kante); font-size:15.5px;
}
.sheet__eintrag:last-child{ border-bottom:0 }
.sheet__eintrag small{ display:block; color:var(--text-3); font-size:12.5px; margin-top:2px }

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tab-h) + var(--sicher-unten) + var(--sp-4)); z-index:80;
  background:var(--bg-3); border:1px solid var(--kante-stark); border-radius:var(--r-2);
  padding:11px var(--sp-4); font-size:14px; max-width:88vw; text-align:center;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
}

/* ---------- Formulare ---------- */
.feld{ margin-bottom:var(--sp-4) }
.feld label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:6px }
.feld input,.feld textarea,.feld select{
  width:100%; padding:12px var(--sp-3); background:var(--bg-2);
  border:1px solid var(--kante); border-radius:var(--r-2); color:var(--text);
}
.feld input:focus,.feld textarea:focus,.feld select:focus{ outline:2px solid var(--kupfer); outline-offset:1px; border-color:var(--kupfer) }
.feld textarea{ min-height:120px; resize:vertical; line-height:1.5 }
.feld--reihe{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) }

.leer{ text-align:center; color:var(--text-3); padding:var(--sp-12) var(--sp-4); line-height:1.6 }
.leer b{ display:block; color:var(--text-2); font-size:17px; margin-bottom:var(--sp-2) }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important } }

/* ---------- Marktvergleich ---------- */
.markt-beste{
  background:var(--bg-1); border:1px solid var(--kupfer-tief); border-left:3px solid var(--kupfer);
  border-radius:var(--r-2); padding:var(--sp-4); margin-bottom:var(--sp-3);
}
.markt-beste__name{ font-size:19px; font-weight:700; margin-bottom:var(--sp-2) }
.markt-beste__preis{ display:flex; align-items:baseline; gap:var(--sp-3); font-family:var(--mono) }
.markt-beste__preis b{ font-size:26px; color:var(--kupfer-hell); font-weight:500 }
.markt-beste__preis s{ color:var(--text-3); font-size:15px }
.markt-beste__preis i{
  font-style:normal; margin-left:auto; background:var(--gruen); color:var(--tinte);
  font-size:13px; font-weight:700; padding:2px 8px; border-radius:var(--r-1);
}
.markt-beste__unter{ color:var(--text-3); font-size:12.5px; margin-top:var(--sp-2) }

.markt-zeile{
  display:grid; grid-template-columns:1fr auto auto; gap:var(--sp-3); align-items:baseline;
  padding:9px var(--sp-2); border-bottom:1px solid var(--kante);
}
.markt-zeile__name{ font-size:14.5px; color:var(--text-2) }
.markt-zeile__preis{ font-family:var(--mono); font-size:14px }
.markt-zeile__n{ font-family:var(--mono); font-size:11.5px; color:var(--text-3); min-width:74px; text-align:right }

.angebot{
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-3); align-items:baseline;
  padding:9px var(--sp-2); border-bottom:1px solid var(--kante);
}
.angebot__name{ font-size:14.5px }
.angebot__quelle{ display:block; color:var(--text-3); font-size:12px; margin-top:2px }
.angebot__preis{ font-family:var(--mono); font-size:14px; text-align:right; white-space:nowrap }
.angebot__preis s{ color:var(--text-3); font-size:12px; display:block }
.angebot__spar{ color:var(--gruen-hell); font-weight:500 }
.angebot-marke{
  display:inline-block; background:var(--gruen); color:var(--tinte);
  font-size:10px; font-weight:700; letter-spacing:.06em; padding:1px 5px;
  border-radius:var(--r-1); margin-left:6px; vertical-align:1px;
}

/* ---------- VOIDKORB: Liste ---------- */
.tabbar--drei{ grid-template-columns:repeat(3,1fr) }
.tabbar--drei .tab__zahl{ right:calc(50% - 30px) }

/* Eingabezeile: bleibt beim Scrollen oben, damit man unterwegs nachtragen kann */
.eingabe{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:1fr 56px; gap:var(--sp-2);
  background:var(--bg-0); padding:var(--sp-2) 0 var(--sp-3);
}
.eingabe input{
  width:100%; padding:14px var(--sp-3); background:var(--bg-2);
  border:1px solid var(--kante-stark); border-radius:var(--r-2); color:var(--text);
}
.eingabe input:focus{ outline:2px solid var(--kupfer); outline-offset:1px; border-color:var(--kupfer) }
.eingabe .btn{ padding:0; font-size:24px; min-height:0 }

.vorschlaege{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3) }
.vorschlaege:empty{ margin:0 }

/* Namenskürzel */
.wer{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:11px;
  font-family:var(--ff); font-size:9.5px; font-weight:700; letter-spacing:.02em;
  color:var(--tinte); flex:none;
}

/* Listenzeile: Haken | Inhalt | Menge und Kürzel */
.ekz{ grid-template-columns:44px 1fr auto }
.ekz__box{
  width:26px; height:26px; border:2px solid var(--kante-kontrast); border-radius:var(--r-1);
  display:grid; place-items:center; color:transparent; background:none; padding:0;
}
.ekz--erledigt .ekz__box{ background:var(--gruen); border-color:var(--gruen); color:var(--tinte) }
.ekz__mitte{ text-align:left; background:none; padding:0; min-width:0 }
.ekz__rechts{ display:flex; align-items:center; gap:var(--sp-2); text-align:right }
.ekz__rechts .ekz__menge,.ekz__rechts .ekz__preis{ display:block }

/* Hinweis auf den günstigsten Markt */
.markt-hinweis{
  display:grid; gap:3px; width:100%; text-align:left;
  background:var(--bg-1); border:1px solid var(--kupfer-tief); border-left:3px solid var(--kupfer);
  border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
}
.markt-hinweis span:first-child{ font-size:14.5px; color:var(--text) }
.markt-hinweis b{ color:var(--kupfer-hell) }
.markt-hinweis span:last-child{ font-family:var(--mono); font-size:12px; color:var(--text-3) }

/* Angebotszeile: zwei Spalten, kein Ankreuzkästchen */
.angebot-zeile{
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-3); align-items:center;
  padding:12px var(--sp-2); border-bottom:1px solid var(--kante); width:100%;
}
.angebot-zeile .ekz__mitte{ min-width:0 }
.angebot-zeile .ekz__name{ display:block }
.angebot-marke{ white-space:nowrap }
/* Im Angebot gehört „je kg" unter den Preis, nicht daneben */
.angebot-zeile .ekz__rechts{ flex-direction:column; align-items:flex-end; gap:0 }