/* Rezeptbuch – styles. „Markthalle“: Papier-Creme, Kräutergrün, Paprika. Fraunces + Figtree (OFL, lokal in fonts/). */
:root {
  color-scheme: dark;
  --bg: #121a15;
  --surface: #1b251f;
  --surface-2: #25322a;
  --line: #2f3d34;
  --text: #eef0e8;
  --text-2: #b0baae;
  --text-3: #8e998d;
  --accent: #8fc79a;
  --accent-ink: #0f2416;
  --accent-soft: rgba(143, 199, 154, 0.16);
  --paprika: #f08a5d;
  --deal: #fb923c;
  --on-deal: #1b1206;
  --paprika-soft: rgba(240, 138, 93, 0.16);
  --danger: #f08a7b;
  --danger-bg: #5a2620;
  --ok: #8fc79a;
  --scrim: rgba(4, 8, 6, 0.62);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --c-haupt: #e2734e; --c-salat: #8dbb67; --c-fruh: #e9b84a; --c-suppe: #eb9a4c; --c-back: #c49468; --c-snack: #a88bc7;
  --c-dessert: #e27fa0; --c-getraenk: #6fb7c9; --c-beilage: #b9b46a; --c-other: #8e998d;

  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --serif: "Fraunces", "Noto Serif", Georgia, "Droid Serif", Cambria, serif;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --gutter: 16px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f1e7;
    --surface: #fffdf8;
    --surface-2: #ede5d6;
    --line: #e0d6c3;
    --text: #1f2a22;
    --text-2: #55604f;
    --text-3: #6e7466;
    --accent: #2f5d3a;
    --accent-ink: #ffffff;
    --accent-soft: #dfe8d6;
    --paprika: #b8452a;
    --deal: #c2410c;
    --on-deal: #ffffff;
    --paprika-soft: #f6dccf;
    --danger: #b3261e;
    --danger-bg: #b3261e;
    --ok: #2f6b2b;
    --scrim: rgba(31, 42, 34, 0.42);
    --shadow: 0 1px 2px rgba(60, 40, 10, 0.08), 0 6px 16px rgba(60, 40, 10, 0.08);
    --c-haupt: #c8502e; --c-salat: #5c8a3a; --c-fruh: #d99a1e; --c-suppe: #d9822b; --c-back: #9a6a3f; --c-snack: #7a5c99;
    --c-dessert: #b84d74; --c-getraenk: #2f7f93; --c-beilage: #8a842f; --c-other: #6e7466;
  }
}
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--sans);
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.offscreen { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

#view {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--nav-h) + var(--safe-b) + 96px);
  outline: none;
}
body[data-route="edit"] #view, body[data-route="new"] #view { padding-bottom: calc(var(--safe-b) + 40px); }

#banner {
  background: var(--danger-bg);
  color: #fff;
  padding: 12px var(--gutter);
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- icons ---------- */
.icon { display: inline-flex; width: 22px; height: 22px; flex: none; }
.icon svg { width: 100%; height: 100%; }

/* ---------- headings ---------- */
.display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
.page-head { padding: 28px 0 16px; }
.page-head .display { font-size: 34px; }
.page-sub { color: var(--text-3); font-size: 14px; margin-top: 4px; }
.block { padding: 24px 0 4px; }
.block > h2, .block-head h2 { font-size: 20px; font-family: var(--serif); font-weight: 600; }
.block > h2 { margin-bottom: 12px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sub-head { font-size: 14px; font-weight: 600; color: var(--text-3); margin: 24px 0 6px; }
.muted { color: var(--text-3); }
.hint { color: var(--text-2); font-size: 14px; line-height: 1.45; margin-top: 12px; max-width: 60ch; }
.footnote { color: var(--text-3); font-size: 13px; margin-top: 32px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 6px 8px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.topbar-title { font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.topbar-side { display: flex; align-items: center; gap: 2px; }
.topbar-side.end { justify-content: flex-end; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  background: transparent;
  font-weight: 600; font-size: 15px;
  cursor: pointer;
  text-align: center;
}
.btn.small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn.wide { width: 100%; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.secondary { background: var(--surface-2); color: var(--text); }
.btn.quiet { color: var(--text); border-color: var(--line); }
.btn.danger { background: var(--danger-bg); color: #fff; }
.btn.danger-text { color: var(--danger); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .choice:disabled { opacity: 0.45; cursor: default; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text);
  cursor: pointer;
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn.subtle { color: var(--text-3); width: 44px; height: 44px; }
.icon-btn.disabled { opacity: 0.3; }
.icon-btn.filled { background: var(--surface-2); border-radius: var(--r-m); width: 48px; }
.fav-btn.on { color: var(--accent); }
.fav-btn.on svg path { fill: currentColor; }

/* ---------- inputs ---------- */
.field {
  width: 100%; min-height: 48px;
  padding: 11px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
}
.field::placeholder { color: var(--text-3); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
select.field {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.ta { resize: none; line-height: 1.45; overflow: hidden; }
.ta.big { min-height: 220px; overflow: auto; }
.add-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.add-wrap { position: relative; }
.suggest-box { position: absolute; left: 0; right: 52px; top: 100%; margin-top: 4px; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; }
.suggest-box[hidden] { display: none; }
.suggest-item { display: block; width: 100%; text-align: left; padding: 12px 14px; min-height: 44px; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.suggest-item:first-child { border-top: 0; }
.suggest-item:hover, .suggest-item.on { background: var(--accent-soft); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }

/* ---------- search & filters ---------- */
.search {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 14px;
  background: var(--surface); border-radius: var(--r-l);
  border: 1px solid var(--line);
  color: var(--text-3);
}
.search:focus-within { border-color: var(--accent); }
.search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--text); padding: 12px 0; }
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--text-3); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 12px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 8px 0 0; padding: 0; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-2); font-size: 15px; cursor: pointer; white-space: nowrap;
}
.chip .icon { width: 18px; height: 18px; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.chip-fav.on .icon { color: var(--accent); }
.chip-fav.on svg path { fill: currentColor; }

.list-tools { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; min-height: 44px; }
.result-count { color: var(--text-3); font-size: 14px; }
.sort { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 14px; }
.sort-select {
  border: 0; background: transparent; color: var(--text);
  font-weight: 600; font-size: 14px; min-height: 44px; padding: 0 4px; cursor: pointer;
}

/* ---------- recipe list ---------- */
.recipe-list { border-top: 1px solid var(--line); }
.recipe-list li { border-bottom: 1px solid var(--line); }
.recipe-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 12px 2px;
  color: inherit; text-decoration: none;
}
.recipe-row:active { background: var(--surface); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.row-meta { color: var(--text-3); font-size: 14px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.fav-mark { color: var(--accent); width: 18px; height: 18px; }
.fav-mark svg path { fill: currentColor; }

.empty { padding: 40px 4px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 46ch; }
.empty h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.2; }
.empty p { color: var(--text-2); }
.empty.small { padding: 28px 2px; }

/* ---------- FAB & nav ---------- */
#fab {
  position: fixed; z-index: 10;
  right: max(var(--gutter), calc((100vw - 640px) / 2 + var(--gutter)));
  bottom: calc(var(--nav-h) + var(--safe-b) + 16px);
  width: 60px; height: 60px; border-radius: 18px; border: 0;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
#fab .icon { width: 28px; height: 28px; }
#fab:active { transform: scale(0.96); }

#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; justify-content: center;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative; flex: 1; max-width: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-3); text-decoration: none; font-size: 12px; font-weight: 600;
}
.tab .icon { width: 24px; height: 24px; }
.tab-icon { display: flex; padding: 2px 18px; border-radius: 999px; }
.tab.active { color: var(--text); }
.tab.active .tab-icon { background: var(--accent-soft); color: var(--accent); }
.tab-badge {
  position: absolute; top: 6px; left: calc(50% + 10px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; line-height: 18px; text-align: center;
}

/* ---------- recipe view ---------- */
.hero-img {
  display: block; width: calc(100% + var(--gutter) * 2); max-height: 260px; object-fit: cover;
  margin: 0 calc(var(--gutter) * -1);
  background: var(--surface);
}
.recipe-head { padding: 20px 0 8px; }
.recipe-cats { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.recipe-title { font-size: 32px; overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 18px 0 0; }
.facts div { display: flex; flex-direction: column; }
.facts dt { color: var(--text-3); font-size: 13px; }
.facts dd { margin: 0; font-weight: 600; }
.source-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px;
  color: var(--text-2); text-decoration: none; font-size: 15px; max-width: 100%;
}
.source-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.source-link .icon { width: 18px; height: 18px; }

.serv-calc { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 4px; }
.serv-calc .icon-btn { width: 44px; height: 44px; }
.serv-input {
  width: 52px; min-height: 44px; border: 0; background: transparent; text-align: center;
  font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text);
  -moz-appearance: textfield;
}
.serv-input::-webkit-outer-spin-button, .serv-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.serv-input:focus { outline: none; }
.serv-label { color: var(--text-2); font-size: 14px; padding: 0 10px 0 2px; }

.ing-list { margin-bottom: 16px; }
.ing-list li { padding: 10px 0 10px 18px; position: relative; border-bottom: 1px solid var(--line); font-size: 17px; }
.ing-list li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.ing-list li.scaled::before { background: var(--accent); }
.ing-list li.muted::before { display: none; }
.ing-list li.muted { padding-left: 0; }
/* Zwischenueberschrift in der Zutatenliste ("Soße", "Für den Teig") */
.ing-list li.ing-group, .cook-all-list li.ing-group { padding: 18px 0 6px; border-bottom: 0; font-size: 15px; font-weight: 700; color: var(--text-2); }
.ing-list li.ing-group::before { display: none; }
.ing-list li.ing-group:first-child, .cook-all-list li.ing-group:first-child { padding-top: 4px; }

.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.segmented button {
  min-height: 40px; min-width: 76px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font-weight: 600; cursor: pointer;
}
.segmented button.on { background: var(--accent); color: var(--accent-ink); }

/* Steps are a real sequence: numbered with serif numerals in the margin */
.steps { counter-reset: step; }
.step { counter-increment: step; position: relative; padding: 14px 0 16px 44px; border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step);
  position: absolute; left: 0; top: 12px; width: 32px;
  font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--text-3); font-variant-numeric: lining-nums;
}
.step-text { font-family: var(--serif); font-size: 17px; line-height: 1.6; max-width: 62ch; overflow-wrap: anywhere; }
.steps-tm6 .step::before { color: var(--accent); }
.steps-tm6 .step.no-tm6::before { color: var(--text-2); }
.tm6-none { color: var(--text-2); font-size: 13px; margin-bottom: 4px; }
.step { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .15s ease; }
.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step.done { opacity: .4; }
.step.done .step-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.step.done::before, .steps-tm6 .step.done::before { color: var(--text-3); }
.step.done .tm6-display { filter: grayscale(1); }
.steps-reset { margin-top: 10px; }
.recipe-row { padding-left: 4px; }
.row-thumb {
  position: relative; flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: var(--r-s); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.row-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.row-thumb.has-img img { opacity: 1; }
.row-thumb.has-img .thumb-letter { visibility: hidden; }
.thumb-letter { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--text-3); }
.tm6-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* The signature element: TM6 readout, segmented like an appliance display */
.tm6-display {
  display: inline-flex; flex-wrap: wrap; align-items: stretch;
  border: 1.5px solid var(--accent); border-radius: var(--r-s);
  background: var(--accent-soft);
  overflow: hidden;
}
.tm6-display .seg {
  padding: 7px 12px;
  font-weight: 700; font-size: 17px; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--text);
  white-space: nowrap;
}
.tm6-display .seg + .seg { border-left: 1.5px solid var(--accent); }
.tm6-display.small .seg { padding: 5px 10px; font-size: 14px; }

.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--text-2); border: 1px solid var(--line);
}
.tag-suggest { border-style: dashed; color: var(--accent); border-color: var(--accent); }

.notes { white-space: pre-wrap; color: var(--text-2); max-width: 62ch; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; }
.page-recipe .actions .btn { flex: 1 1 auto; }

/* ---------- shopping ---------- */
.page-shop .add-row { margin: 0 0 12px; }
.shop-list { border-top: 1px solid var(--line); }
.shop-item { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.shop-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 8px 2px; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.shop-toggle .box {
  flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--text-3);
  display: flex; align-items: center; justify-content: center; color: transparent;
}
.shop-toggle .box .icon { width: 18px; height: 18px; }
.shop-text { font-size: 17px; overflow-wrap: anywhere; }
.shop-item.done .box { background: var(--text-3); border-color: var(--text-3); color: var(--bg); }
.shop-item.done .shop-text { text-decoration: line-through; color: var(--text-3); }
.all-done { padding: 16px 2px; }

/* ---------- settings ---------- */
.stat { font-size: 15px; color: var(--text-2); margin-bottom: 14px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.cat-list { border-top: 1px solid var(--line); }
.cat-row { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); }
.cat-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.cat-count { color: var(--text-3); font-size: 13px; }
.path { font-size: 14px; overflow-wrap: anywhere; color: var(--text-2); }

/* ---------- import status ---------- */
.import-status { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.import-status:empty { display: none; }
.import-status.loading { flex-direction: row; align-items: center; gap: 12px; color: var(--text-2); }
.import-status.error { padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--danger); }
.import-status.error strong { color: var(--danger); }
.import-status.error p { color: var(--text-2); }
.import-status.error .btn { align-self: flex-start; margin-top: 6px; }
.import-status.ok { padding: 12px 14px; border-radius: var(--r-m); background: var(--surface-2); }
.import-status.ok strong { color: var(--ok); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- editor ---------- */
.form-group { padding: 18px 0 0; display: flex; flex-direction: column; gap: 4px; }
.form-group.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.form-hint { font-size: 13px; color: var(--text-3); }
.form-group:not(.grid2) > .form-field + .form-field { margin-top: 14px; }
.page-edit .topbar { border-bottom-color: var(--line); }

.edit-steps { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 14px; }
.edit-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 6px 12px 14px; }
.edit-step-head { display: flex; align-items: center; justify-content: space-between; }
.step-no { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.step-tools { display: flex; margin-right: -8px; }
.edit-step > .ta { background: var(--bg); }
.tm6-edit { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.tm6-edit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm6-edit-title { font-weight: 600; font-size: 14px; color: var(--text-2); }
.tm6-edit-head .check { margin-left: auto; font-size: 14px; }
.tm6-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm6-grid .field { background: var(--bg); }
.tm6-preview:empty { display: none; }
.tm6-edit > .btn { align-self: flex-start; }

/* ---------- layers: sheet + dialog ---------- */
#layers { position: relative; z-index: 50; }
.layer { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.layer-dialog { align-items: center; padding: 24px var(--gutter); }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 0.2s ease; }
.layer.open .scrim { opacity: 1; }
.sheet {
  position: relative; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-l) var(--r-l) 0 0;
  padding: 8px var(--gutter) calc(20px + var(--safe-b));
  transform: translateY(100%); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.layer.open .sheet { transform: none; }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 12px; }
.sheet-head { display: flex; align-items: center; gap: 4px; margin: 0 0 8px -12px; }
.sheet-title { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.sheet-body > .sheet-title { margin-bottom: 14px; }
.sheet-hint { color: var(--text-2); font-size: 14px; margin-bottom: 10px; }
.sheet-body > .btn.wide { margin-top: 6px; }
.row-actions { display: flex; gap: 8px; margin-top: 8px; }
.row-actions:empty { display: none; }
.choices { display: flex; flex-direction: column; }
.choice {
  display: flex; align-items: center; gap: 16px; text-align: left;
  min-height: 72px; padding: 12px 4px; border: 0; border-top: 1px solid var(--line);
  background: transparent; cursor: pointer;
}
.choice .icon { color: var(--accent); width: 26px; height: 26px; }
.choice-text { display: flex; flex-direction: column; }
.choice-title { font-weight: 600; font-size: 17px; }
.choice-desc { color: var(--text-3); font-size: 14px; }

.dialog {
  position: relative; width: 100%; max-width: 420px;
  background: var(--surface); border-radius: var(--r-l); padding: 22px 20px 14px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: scale(0.97); transition: opacity 0.16s ease, transform 0.16s ease;
}
.layer.open .dialog { opacity: 1; transform: none; }
.dlg-title { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.25; }
.dlg-msg { color: var(--text-2); font-size: 15px; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dlg-actions .btn.quiet { border-color: transparent; }

/* ---------- toast ---------- */
#toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 20px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); width: max-content;
  padding: 12px 18px; border-radius: var(--r-m);
  background: var(--text); color: var(--bg); font-size: 15px; font-weight: 500;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--danger-bg); color: #fff; }
body[data-route="edit"] #toast, body[data-route="new"] #toast { bottom: calc(var(--safe-b) + 20px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (max-width: 359px) {
  .form-group.grid2, .tm6-grid { grid-template-columns: 1fr; }
  .page-head .display { font-size: 30px; }
}
.cat-head { margin-top: 18px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.cat-head:first-child { margin-top: 4px; }

/* ---------- Zutaten je Schritt ---------- */
.step-ings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ing-chip {
  display: inline-flex; align-items: baseline; gap: 5px; min-height: 36px; padding: 6px 11px;
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; line-height: 1.3; cursor: pointer; text-align: left;
}
.ing-chip b { color: var(--accent); font-weight: 600; white-space: nowrap; }
.ing-chip.used { opacity: .45; }
.ing-chip.used span, .ing-chip.used b { text-decoration: line-through; color: var(--text-3); }
.step.done .ing-chip { opacity: .6; }
.ing-list li.tappable { cursor: pointer; }
.ing-list li.used { color: var(--text-3); text-decoration: line-through; }
.ing-list li.used::before { background: var(--line); }
.cook-start { margin: 0 0 6px; }

/* ---------- Kochmodus ---------- */
.layer-cook { align-items: stretch; }
.layer-cook .scrim { background: var(--bg); }
.cook {
  position: relative; width: 100%; max-width: 640px; margin: 0 auto; height: 100%;
  background: var(--bg); opacity: 0; transition: opacity .18s ease;
}
.layer.open .cook { opacity: 1; }
.cook-body { height: 100%; overflow-y: auto; padding: 10px var(--gutter) calc(24px + var(--safe-b)); display: flex; flex-direction: column; }
.cook-top { display: flex; align-items: center; gap: 12px; }
.cook-count { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.cook-serv { margin-left: auto; font-size: 14px; color: var(--text-3); }
.cook-top .icon-btn { margin-right: -8px; }
.cook-prog { display: flex; gap: 4px; margin: 8px 0 18px; }
.cook-prog button { flex: 1; height: 22px; border: 0; padding: 9px 0; background: transparent; cursor: pointer; position: relative; }
.cook-prog button::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--line); }
.cook-prog button.done::after { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cook-prog button.cur::after { background: var(--accent); }
.cook-tm6 { margin-bottom: 14px; }
.cook-need { list-style: none; margin: 0 0 18px; padding: 6px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.cook-need li { display: flex; align-items: baseline; gap: 12px; min-height: 48px; padding: 10px 0; font-size: 19px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cook-need li:last-child { border-bottom: 0; }
.cook-need li b { color: var(--accent); min-width: 5em; font-weight: 600; }
.cook-need li.used { opacity: .45; }
.cook-need li.used b, .cook-need li.used span { text-decoration: line-through; color: var(--text-3); }
.cook-text { font-family: var(--serif); font-size: 23px; line-height: 1.6; flex: 1; overflow-wrap: anywhere; }
.cook-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 24px; }
.cook-nav .btn { min-height: 56px; font-size: 17px; justify-content: center; }
.cook-nav .btn:disabled { opacity: .35; }
.cook-all { margin-top: 18px; color: var(--text-2); }
.cook-all summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 15px; }
.cook-all-list { list-style: none; margin: 0; padding: 0; }
.cook-all-list li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--text); }

/* ---------- Angebote ---------- */
.offer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 2px; }
.offer-bar .spinner { margin-right: 12px; }
.offer-status { color: var(--text-3); font-size: 13px; margin: 2px 0 6px; min-height: 1em; }
.store-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--accent); }
.store-count { font-size: 12px; color: var(--text-3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.shop-main { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.offer-line { font-size: 13px; color: var(--accent); line-height: 1.35; margin-top: 2px; }
.offer-alt { font-size: 12px; color: var(--text-3); line-height: 1.35; }
.shop-item.done .offer-line, .shop-item.done .offer-alt { display: none; }
.zip-in { max-width: 120px; }
.store-pick { display: flex; flex-direction: column; margin-top: 10px; }
.store-row { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); }
.store-row .store-count { margin-left: auto; }

/* ---------- Auswahl fuer Einkaufsliste ---------- */
.pick-list { display: flex; flex-direction: column; margin: 6px 0 14px; border-top: 1px solid var(--line); }
.pick-row { display: flex; align-items: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--line); font-size: 16px; }
.pick-text { flex: 1; overflow-wrap: anywhere; }
.pick-note { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ---------- Vegan ---------- */
.ing-orig { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.ing-list li.used .ing-orig { text-decoration: none; }
.vegan-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 12px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--ok); }
.vegan-bar.warn { color: var(--text-2); }

/* ---------- Vorrat ---------- */
.tab-icon { padding: 2px 14px; }
.scan-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 12px; margin-bottom: 8px; }
.scan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.scan-head > .icon { width: 26px; height: 26px; color: var(--accent); }
.scan-box .add-row { margin: 0; }
.scan-in { font-size: 17px; }
.scan-last { min-height: 1.3em; margin-top: 8px; font-size: 14px; color: var(--accent); }
.pantry-low { font-size: 14px; color: var(--danger); margin: 10px 0 0; }
.pantry-item { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); min-height: 56px; }
.pantry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.pantry-name { font-size: 17px; overflow-wrap: anywhere; }
.pantry-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 4px 2px; border-bottom: 0; }
.pantry-group-name { font-weight: 600; font-size: 15px; }
.pantry-group-sum { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pantry-group-head.low .pantry-group-sum { color: var(--danger); }
.pantry-item.in-group .pantry-main { padding-left: 14px; }
.pantry-brand { margin-left: 8px; font-size: 13px; color: var(--text-2); }
.stock-cands { display: grid; gap: 6px; margin: 6px 0 12px; }
.scan-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pantry-meta { font-size: 12px; color: var(--text-3); }
.pantry-meta:empty { display: none; }
.pantry-qty { min-width: 5.2em; text-align: center; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pantry-item.low .pantry-qty { color: var(--danger); }
.pantry-item.is-zero .pantry-name { color: var(--text-3); }
.pantry-gone { margin-top: 18px; border-top: 1px solid var(--line); }
.pantry-gone > summary { cursor: pointer; padding: 12px 2px; font-size: 14px; color: var(--text-2); list-style: none; }
.pantry-gone > summary::before { content: '▸ '; }
.pantry-gone[open] > summary::before { content: '▾ '; }
.pantry-gone-list { list-style: none; margin: 0; padding: 0; }
.pantry-gone-row { display: flex; align-items: center; gap: 2px; min-height: 44px; border-bottom: 1px solid var(--line); }
.pantry-gone-name { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 6px 4px; font: inherit; font-size: 15px; color: var(--text-3); cursor: pointer; overflow-wrap: anywhere; }
.pantry-hint { margin-top: 18px; }
.pantry-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pantry-form .chips { margin: -4px 0 0; }
.vegan-warn { color: var(--danger); font-size: 14px; margin-bottom: 8px; }
.ing-stock { display: block; font-size: 12px; color: var(--ok); margin-top: 1px; }
.ing-stock.none { color: var(--text-3); }
.ing-stock.short { color: var(--danger); }
.deduct-row { gap: 8px; }
.deduct-row .check { flex: 1; min-width: 0; }
.deduct-in { width: 84px; flex: 0 0 84px; }

/* ---------- Kosten ---------- */
.tab { min-width: 0; }
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
@media (max-width: 400px) { .tab { font-size: 11px; } .tab-icon { padding: 2px 10px; } }
.invisible { visibility: hidden; }
.month-nav { display: flex; align-items: center; justify-content: space-between; margin: -4px -8px 8px; }
.month-label { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.cost-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 16px 14px; }
.cost-total { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cost-total-sub { color: var(--text-3); font-size: 14px; margin-top: 2px; }
.budget-track { height: 8px; border-radius: 4px; background: var(--surface-2); margin-top: 14px; overflow: hidden; }
.budget-track > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.budget-track.over > span { background: var(--danger); }
.budget-line { display: flex; justify-content: space-between; gap: 10px; width: 100%; margin-top: 10px; padding: 6px 0 0; background: none; border: 0; color: var(--text-2); font-size: 14px; text-align: left; cursor: pointer; }
.budget-line strong { color: var(--text); font-weight: 600; }
.budget-line.over strong { color: var(--danger); }
.btn.add-expense { margin-top: 12px; }
.cost-block { padding-top: 22px; }
.cost-chart { margin-top: 4px; }
.cost-chart-plot { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.cost-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: none; border: 0; padding: 0 4px; cursor: pointer; position: relative; z-index: 1; }
.cost-col-bar { display: block; width: 100%; max-width: 40px; min-height: 0; border-radius: 4px 4px 0 0; background: var(--text-3); opacity: 0.55; }
.cost-col.on .cost-col-bar { background: var(--accent); opacity: 1; }
.cost-col.over .cost-col-bar { background: var(--danger); }
.cost-col.over:not(.on) .cost-col-bar { opacity: 0.55; }
.cost-col-val { font-size: 11px; color: var(--text-3); margin-bottom: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-col.on .cost-col-val { color: var(--text); font-weight: 600; }
.cost-chart-budget { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--text-2); z-index: 2; pointer-events: none; }
.cost-chart-budget span { position: absolute; right: 0; bottom: 2px; font-size: 11px; color: var(--text-2); background: var(--bg); padding: 0 4px; }
.cost-chart-axis { display: flex; gap: 2px; margin-top: 6px; }
.cost-chart-axis span { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); }
.cost-chart-axis span.on { color: var(--text); font-weight: 600; }
.cost-bars { list-style: none; margin: 0; padding: 0; }
.cost-bar-row { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr auto; align-items: center; gap: 10px; padding: 7px 0; }
.cost-bar-label { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-bar-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cost-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.cost-bar-val { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 5.5em; }
.cost-bar-pct { font-size: 12px; font-weight: 400; color: var(--text-3); }
.expense-item { border-bottom: 1px solid var(--line); }
.expense-main { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 4px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; }
.expense-date { font-size: 13px; color: var(--text-3); min-width: 4.6em; font-variant-numeric: tabular-nums; }
.expense-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.expense-store { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense-meta { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense-rcpt { width: 18px; height: 18px; color: var(--text-3); }
.expense-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt-box { margin-bottom: 14px; }
.receipt-box.busy { opacity: 0.5; pointer-events: none; }
.receipt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.receipt-thumb { display: block; width: 100%; max-height: 220px; overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--line); padding: 0; background: var(--surface-2); cursor: zoom-in; }
.receipt-thumb img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: top; }
.receipt-full { display: block; width: 100%; height: auto; border-radius: var(--r-m); }
.expense-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.expense-form .chips { margin: -6px 0 0; }
.amount-in { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.month-open { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px 10px; border-radius: 999px; }
.month-open .icon { width: 18px; height: 18px; color: var(--text-3); }
.month-open:active { background: var(--surface-2); }
.scan-status { font-size: 14px; line-height: 1.4; color: var(--text-2); margin: -4px 0 12px; }
.scan-status.ok { color: var(--ok); }
.scan-status.warn { color: var(--danger); }
.scan-status.busy { color: var(--accent); }
.small-hint { font-size: 13px; margin-top: 4px; }
.parts-summary { margin-top: 2px; }
.parts-edit { display: flex; flex-direction: column; gap: 8px; }
.part-row { display: grid; grid-template-columns: 1fr 7.5em 44px; gap: 8px; align-items: center; }
.part-spacer { width: 44px; }
.items-box { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 12px; }
.items-box > summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.item-list { list-style: none; margin: 0; padding: 0 0 8px; }
.item-row { display: grid; grid-template-columns: 6em minmax(0, 1fr) 36px; gap: 6px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.item-row .item-name { grid-column: 1 / -1; }
.item-row .field { padding: 8px; font-size: 14px; min-height: 40px; }
.item-row .icon-btn.subtle { width: 36px; height: 36px; }
.item-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; overflow-wrap: anywhere; }
.item-fix { font-size: 11px; color: var(--text-3); }
.item-row.unsure .item-cat { border-color: var(--accent); }
.item-price { text-align: right; font-variant-numeric: tabular-nums; }

.year-card .cost-total-sub { margin-top: 4px; }
.year-compare { margin-top: 10px; font-size: 14px; font-weight: 600; }
.year-compare.up { color: var(--danger); }
.year-compare.down { color: var(--ok); }
.year-compare-sub { font-weight: 400; color: var(--text-2); }
.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.month-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--text); text-align: left; cursor: pointer; }
.month-tile:active { background: var(--surface-2); }
.month-tile.current { border-color: var(--accent); }
.month-tile.none .tile-sum, .month-tile.future { color: var(--text-3); }
.month-tile.future { opacity: 0.55; }
.tile-month { font-size: 13px; font-weight: 600; color: var(--text-2); }
.tile-sum { font-family: var(--serif); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tile-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.month-tile.over .tile-bar > span { background: var(--danger); }
.tile-meta { font-size: 11px; color: var(--text-3); line-height: 1.25; }
.month-tile.over .tile-meta { color: var(--danger); }
.year-row { width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.year-row.on .cost-bar-label { font-weight: 700; }
.page-years .topbar { margin: 0 -4px 4px; }

/* ---------- Kamera-Scanner ---------- */
.shop-scan-btn { margin: 0 0 14px; }
.cam-scan-btn { margin-top: 10px; }
.layer-scanner { align-items: stretch; }
.layer-scanner .scrim { background: #000; opacity: 1; }
.scanner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; color: #fff; opacity: 0; transition: opacity .15s; }
.layer.open .scanner { opacity: 1; }
.scan-stage { position: absolute; inset: 0; overflow: hidden; background: #000; }
.scan-video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; left: 7%; right: 7%; top: 50%; height: 30vw; max-height: 220px; transform: translateY(-60%); border: 3px solid rgba(255,255,255,.9); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
.scan-laser { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #e3ac4a; box-shadow: 0 0 8px #e3ac4a; }
.scan-top { position: relative; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px; background: linear-gradient(rgba(0,0,0,.6), transparent); }
.scan-title { flex: 1; font-weight: 600; font-size: 17px; }
.icon-btn.scan-tool { color: #fff; background: rgba(0,0,0,.35); border-radius: 999px; width: 44px; height: 44px; }
.icon-btn.scan-tool.on { background: #e3ac4a; color: #1f1706; }
.scan-bottom { position: relative; margin-top: auto; padding: 12px var(--gutter) calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; background: linear-gradient(transparent, rgba(0,0,0,.7) 30%); }
.scan-hint { text-align: center; font-size: 14px; color: rgba(255,255,255,.85); }
.scan-card { background: var(--surface); color: var(--text); border-radius: var(--r-l); padding: 14px 16px; border-left: 6px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.scan-card.ok { border-left-color: var(--ok); }
.scan-card.warn { border-left-color: var(--accent); }
.scan-card.bad { border-left-color: var(--danger); }
.scan-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.scan-card.bad .scan-card-title { color: var(--danger); font-size: 20px; }
.scan-card.ok .scan-card-title .icon { color: var(--ok); }
.scan-card-msg { color: var(--text-2); font-size: 15px; }
.scan-card-q { font-weight: 600; }
.scan-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.scan-card-actions .btn { flex: 1; }
.scan-log-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .06em; color: var(--text-2); }
.scan-log { list-style: none; margin: 8px 0 12px; padding: 0; max-height: 50vh; overflow-y: auto; }
.scan-log-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.scan-log-row.unknown .scan-log-main > span:first-child { color: var(--danger); }
.scan-log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; }
.shop-item.has-vegan { flex-wrap: wrap; }
.shop-vegan { position: relative; z-index: 1; background: var(--bg); flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; padding: 0 4px 10px 44px; margin-top: -6px; }
.shop-vegan-warn { color: var(--danger); font-size: 13px; font-weight: 600; }
.shop-vegan-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-vegan-actions .btn { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* ---------- Suche (Desktop & Zutaten) ---------- */
.search-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search-row .search { flex: 1 1 240px; }
.search-mode { flex: none; }
.search-clear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text-2); cursor: pointer; flex: none; }
.search-clear .icon { width: 16px; height: 16px; }
.search-clear[hidden] { display: none; }
.row-hit { font-size: 13px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips.dragging { cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .chips:not(.wrap) { scrollbar-width: thin; padding-bottom: 6px; cursor: grab; }
  .chips:not(.wrap)::-webkit-scrollbar { display: block; height: 6px; }
  .chips:not(.wrap)::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
}

/* ---------- Mengen auf der Einkaufsliste ---------- */
.shop-qty { flex: none; min-width: 52px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.shop-qty.empty { color: var(--text-3); font-weight: 500; font-size: 13px; }
.shop-qty:active { background: var(--surface-2); }
.qty-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; align-items: center; margin: 8px 0 10px; }
.qty-in { text-align: center; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty-unit { margin-bottom: 4px; }

/* Mindestbestand je Gruppe (Einstellungen) */
.group-list { display: grid; gap: 6px; margin: 10px 0; }
.group-row { display: grid; grid-template-columns: 1fr 64px 84px 40px; gap: 6px; align-items: center; }
.group-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.group-info { font-size: 12px; color: var(--text-3); padding-left: 2px; }
.group-row.low .group-info { color: var(--danger); }
.group-row .field { min-height: 40px; padding: 6px 8px; }

.pantry-quick { margin: 12px 0 4px; }
.pantry-quick > summary { cursor: pointer; padding: 6px 2px; font-size: 14px; font-weight: 600; color: var(--text-2); list-style: none; }
.pantry-quick > summary::before { content: '▸ '; }
.pantry-quick[open] > summary::before { content: '▾ '; }
.pantry-quick .chips { padding-top: 6px; }
.chip.chip-low { border-color: var(--danger); color: var(--danger); }

.step-ings { margin: 6px 0 2px; }
.step-ings > summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.step-ing-pick .chips { padding: 4px 0; }
.step-ing-pick .link-btn { font-size: 13px; }
.cook-edit-btn { margin: 4px 0 8px; font-size: 14px; }
.cook-edit-hint { font-size: 14px; color: var(--text-2); margin: 6px 0 2px; }

.suggest-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.suggest-meta { font-size: 13px; color: var(--text-3); white-space: nowrap; }

.nut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 6px 0 0; }
.nut-grid > div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 5px 0; font-size: 14px; }
.nut-grid dt { color: var(--text-2); }
.nut-grid dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.nut-grid .nut-sub dt { padding-left: 10px; font-size: 13px; }

.login-list { list-style: none; margin: 8px 0; padding: 0; }
.login-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.login-list li > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.login-state { font-size: 12px; color: var(--text-3); }
.login-state.on { color: var(--ok); }

/* Einstellungen: Uebersicht und Unterseiten */
.settings-menu { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--surface); }
.settings-menu li + li { border-top: 1px solid var(--line); }
.settings-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 14px 12px 16px; background: none; border: 0; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.settings-item:active { background: var(--surface-2); }
.settings-ico { flex: none; width: 36px; height: 36px; border-radius: var(--r-m); background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.settings-ico svg { width: 20px; height: 20px; }
.settings-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-title { font-weight: 600; font-size: 16px; }
.settings-desc { color: var(--text-3); font-size: 13px; line-height: 1.35; }
.settings-chev { flex: none; color: var(--text-3); }
.page-settings-sub .block:first-of-type { padding-top: 12px; }
.site-tips { list-style: none; margin: 12px 0 0; padding: 0; }
.site-tip { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.site-tip:last-child { border-bottom: 0; }
.site-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.site-name { font-weight: 600; }
.site-desc { color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; }
.site-tip .btn { flex: none; text-decoration: none; }
.hint.pre { white-space: pre-line; }
.deduct-pick { flex: 1; min-width: 0; }
.quick-row { margin-top: 4px; }
.cooked-btn { margin-top: 8px; }

/* ---------- 3.7: Kopf mit Zahnrad, Filter-Knopf ---------- */
.page-head.with-gear { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-head-main { min-width: 0; }
.head-gear { margin: 0 -10px 0 0; color: var(--text-2); }
.settings-head { padding-top: 4px; }
.search-row { flex-wrap: nowrap; }
.search-row .search { flex: 1 1 auto; min-width: 0; }
.filter-btn { position: relative; flex: none; width: 52px; height: 52px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); }
.filter-btn.on { border-color: var(--accent); color: var(--accent); }
.filter-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.filter-dot[hidden] { display: none; }
.active-filters { margin-top: 10px; }
.active-filters[hidden] { display: none; }
.chip-active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); min-height: 38px; padding: 0 10px 0 14px; }
.chip-active .chip-x { width: 16px; height: 16px; color: var(--text-3); }
.sort-link { color: var(--text-3); font-weight: 600; margin-left: auto; }
.filter-sheet .sheet-head { margin-bottom: 4px; }
.sheet-reset { margin-left: auto; padding: 10px 4px; }
.filter-group { margin: 18px 0 0; }
.filter-label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.segmented.wide { display: flex; width: 100%; }
.segmented.wide button { flex: 1; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px; cursor: pointer; text-align: left; }
.cat-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.cat-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-opt-n { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.filter-apply { margin-top: 22px; }
.row-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); margin-top: 2px; }
.stock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.row-stock.ok .stock-dot { background: var(--ok); }
.row-stock.miss .stock-dot { background: var(--accent); }

/* ---------- 3.7: Rezept-Ansicht ---------- */
body[data-route="recipe"] #view { padding-bottom: calc(var(--safe-b) + 104px); }
body[data-route="recipe"] #toast { bottom: calc(var(--safe-b) + 96px); }
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; gap: 10px; padding: 12px var(--gutter) calc(12px + var(--safe-b));
  background: var(--bg); border-top: 1px solid var(--line);
}
.action-bar .btn { flex: 1; min-height: 54px; }
.action-bar .btn.primary { flex: 1.4; }
.stock-tile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 10px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
.stock-tile[hidden] { display: none; }
.stock-tile .stock-ico { color: var(--accent); width: 20px; height: 20px; }
.stock-tile.all .stock-ico { color: var(--ok); }
.stock-txt { flex: 1; min-width: 0; color: var(--text-2); white-space: nowrap; }
.stock-txt b { color: var(--text); }
.ing-list li.ing-row { display: grid; grid-template-columns: minmax(64px, auto) 1fr; column-gap: 14px; align-items: baseline; }
.ing-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.ing-list li.scaled .ing-amt { color: var(--accent); }
.ing-name { min-width: 0; overflow-wrap: anywhere; }
.ing-name .ing-orig, .ing-name .ing-stock { display: block; }
.ing-list li.st-ok::before { background: var(--ok); }
.ing-list li.st-short::before, .ing-list li.st-none::before { background: var(--accent); }
.ing-list li.used .ing-amt { color: var(--text-3); }

/* ---------- 3.7: Einkaufsliste ---------- */
.head-actions { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.head-actions .head-gear { margin: 0; }
.head-scan { color: var(--accent); }
.shop-progress { margin: 14px 0 2px; }
.shop-progress:empty { display: none; }
.prog-text { font-size: 14px; color: var(--text-3); margin-bottom: 6px; }
.prog-text b { color: var(--text); }
.prog-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.prog-bar span { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width .25s ease; }
.shop-view-bar { margin: 14px 0 0; }
.shop-view-bar .segmented { display: flex; width: 100%; }
.shop-view-bar .segmented button { flex: 1; min-width: 0; padding: 0 6px; }
.offer-label { font-size: 13px; font-weight: 600; color: var(--text-3); }
.shop-for { font-size: 13px; color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-qty-add { flex: none; height: 36px; padding: 0 6px; border: 0; background: none; color: var(--text-3); font-size: 13px; font-weight: 600; cursor: pointer; }
.shop-cart { margin-top: 22px; }
.shop-cart > summary { cursor: pointer; list-style: none; padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--text-3); border-top: 1px solid var(--line); }
.shop-cart > summary::-webkit-details-marker { display: none; }
.shop-cart > summary::before { content: '▸  '; }
.shop-cart[open] > summary::before { content: '▾  '; }

/* ---------- 3.7: Vorrat ruhiger ---------- */
.scan-head .segmented { flex: 1; display: flex; min-width: 0; }
.scan-head .segmented button { flex: 1; min-width: 0; padding: 0 8px; white-space: nowrap; }
.scan-last:empty { display: none; }
.chip.chip-low { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.pantry-low { color: var(--text-2); font-size: 14px; }
.filter-head { margin-left: 0; }
.filter-head .sheet-reset { margin-left: auto; }
.filter-head .sheet-x { margin-right: -10px; }
.filter-head .sheet-title { margin-right: auto; }
.filter-head .sheet-reset + .sheet-x { margin-left: 4px; }

/* ---------- 3.8: Fenster ---------- */
html.scroll-locked, html.scroll-locked body { overflow: hidden; }
.sheet { overscroll-behavior: contain; }
.scrim { touch-action: none; }

/* ---------- 3.8: Daumenzone ---------- */
.btn.small { min-height: 44px; }
.cook-nav { position: sticky; bottom: 0; padding: 12px 0 calc(8px + var(--safe-b)); background: var(--bg); margin-top: 20px; }
.cook-nav .btn { min-height: 72px; font-size: 19px; border-radius: var(--r-l); }
.cook-text { font-size: 25px; }
.cook-awake { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); margin-left: auto; }
.cook-top .cook-awake + .icon-btn { margin-left: 0; }
.awake-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.cook-timers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.timer-btn { min-height: 52px; border-color: var(--accent); }
.timer-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.timer-bar[hidden] { display: none; }
.timer-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text); font-size: 15px; cursor: pointer; }
.timer-pill b { font-variant-numeric: tabular-nums; font-size: 17px; }
.timer-pill span { color: var(--text-2); font-size: 13px; }
.timer-pill .timer-x { width: 16px; height: 16px; color: var(--text-3); }
.timer-pill.done { background: var(--accent); color: var(--accent-ink); animation: timerPulse 1s ease-in-out infinite; }
.timer-pill.done span, .timer-pill.done .timer-x { color: var(--accent-ink); }
@keyframes timerPulse { 50% { transform: scale(1.04); } }
.page-recipe > .timer-bar { position: sticky; top: 0; z-index: 5; padding: 6px 0; background: var(--bg); }
.ing-ready { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin: -2px 0 4px; font-size: 14px; color: var(--text-3); }
.ready-count b { color: var(--ok); }
.ing-list li.ing-row { min-height: 52px; align-content: center; }
#toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.toast-btn { border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; font-size: 15px; padding: 6px 2px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .timer-pill.done { animation: none; } }
.list-dock {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 8;
  padding: 10px var(--gutter); background: var(--bg); border-top: 1px solid var(--line);
}
.list-dock .search-row { max-width: 640px; margin: 0 auto; }
.list-dock .search { min-height: 52px; }
.dock-add { width: 52px; height: 52px; border-radius: var(--r-l); background: var(--accent); color: var(--accent-ink); flex: none; }
.dock-add .icon { width: 26px; height: 26px; }
body[data-route="recipes"] #toast { bottom: calc(var(--nav-h) + var(--safe-b) + 92px); }
.page-list .active-filters { margin-top: 0; }
.shop-item { display: block; position: relative; overflow: hidden; }
.shop-inner { display: flex; align-items: center; position: relative; z-index: 1; background: var(--bg); }
.swipe-row { position: relative; overflow: hidden; }
.swipe-row > a, .swipe-row > .shop-inner { position: relative; z-index: 1; background: var(--bg); touch-action: pan-y; }
.swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 0; }
.swipe-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 84px; border: 0; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.swipe-act.fav { background: var(--accent); color: var(--accent-ink); }
.swipe-hint { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding-left: 18px; background: var(--ok); color: var(--bg); font-weight: 700; font-size: 14px; z-index: 0; opacity: 0; pointer-events: none; }
.swipe-row.swipe-right .swipe-hint { opacity: 1; }
.action-title { margin: 0 0 10px; font-size: 20px; }
.action-list { display: flex; flex-direction: column; }
.action-item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font-size: 16px; text-align: left; cursor: pointer; }
.action-item .icon { color: var(--text-2); }
.action-item.danger-text, .action-item.danger-text .icon { color: var(--danger); }
.cook-text { flex: 0 0 auto; }
.cook-body > .cook-nav { margin-top: auto; }
.cook-timers { margin-bottom: 16px; }
.page-list .list-tools { margin-top: 0; }
.cook-top > span { white-space: nowrap; }
body.cooking #toast { bottom: calc(var(--safe-b) + 118px); }
@media (max-width: 380px) { .cook-awake span:last-child { display: none; } .cook-top { gap: 10px; } }
.group-members { margin: -4px 0 10px; padding: 0 0 6px 2px; }
.group-members > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--accent); padding: 6px 0; }
.group-members > summary::-webkit-details-marker { display: none; }
.group-member { display: flex; width: 100%; min-height: 44px; }
.group-member .pick-note { margin-left: auto; color: var(--text-3); font-size: 13px; }
.no-callout { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cook-body { touch-action: pan-y; overscroll-behavior-x: none; }

/* ---------- 3.10: Umrechner ---------- */
.conv-tabs { margin: 6px 0 14px; }
.conv-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conv-in { width: 120px; flex: 0 0 120px; font-size: 20px; font-weight: 600; }
.conv-unit { color: var(--text-3); font-weight: 600; }
.conv-seg { flex: 1 1 200px; display: flex; }
.conv-seg button { flex: 1; min-width: 0; padding: 0 8px; }
.conv-sel { flex: 1 1 160px; min-width: 0; }
.conv-pan .form-field { flex: 1 1 140px; }
.conv-pan .conv-in { width: 100%; flex: none; }
.conv-quick { margin-top: 10px; }
.conv-quick .chip { min-height: 40px; }
.conv-out { margin-top: 18px; padding: 16px; border-radius: var(--r-l); background: var(--accent-soft); border: 1px solid var(--accent); min-height: 84px; }
.conv-line { display: flex; flex-direction: column; gap: 2px; }
.conv-line b { font-size: 26px; font-family: var(--serif); }
.conv-line span { color: var(--text-2); font-size: 14px; }
.conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 12px; font-size: 15px; font-variant-numeric: tabular-nums; }
.conv-out .hint { margin-top: 10px; font-size: 13px; }
.cook-top .icon-btn + .icon-btn { margin-left: -6px; }
.form-field .conv-sel { flex: none; width: 100%; }
.conv-form .form-field { margin-top: 10px; }

/* ---------- 3.11: Markthalle ---------- */
body { font-size: 16px; }
.display, .row-title, .sheet-title, .block > h2, .block-head h2 { font-variation-settings: "opsz" 72; letter-spacing: -0.015em; }
.eyebrow { font: italic 500 16px/1.2 var(--serif); color: var(--paprika); margin-bottom: 4px; }
.search, .filter-btn, .settings-menu, .stock-tile, .scan-box, .cat-opt { box-shadow: var(--shadow); }
.list-dock .search { border-radius: 999px; }
.filter-btn, .dock-add { border-radius: 18px; }
.chip.on, .cat-opt.on, .chip-active { background: var(--accent-soft); border-color: var(--accent); }
.tab.active .tab-icon { background: var(--accent-soft); color: var(--accent); }
.tab-badge { background: var(--paprika); color: #fff; }
/* Foto-Raster */
.recipe-grid { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (min-width: 640px) { .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.recipe-tile { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.tile-ph { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: color-mix(in srgb, var(--cat) 22%, var(--surface)); }
.tile-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.tile-ph.has-img img { opacity: 1; }
.tile-ph.has-img .tile-mono { display: none; }
.tile-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: italic 600 64px/1 var(--serif); color: color-mix(in srgb, var(--cat) 80%, var(--text)); }
.tile-time { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(20, 24, 20, 0.62); color: #fff; font-size: 12px; font-weight: 700; }
.tile-fav { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 253, 248, 0.92); color: var(--paprika); display: flex; align-items: center; justify-content: center; }
.tile-fav .icon { width: 17px; height: 17px; }
.tile-fav svg path { fill: currentColor; }
.recipe-tile:active .tile-ph { transform: scale(0.98); }
.tile-title { font: 600 17px/1.22 var(--serif); margin-top: 6px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); min-width: 0; }
.tile-cat span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.recipe-tile .row-stock { margin-top: 0; }
/* Rezeptansicht: Foto randlos, Inhalt als Blatt darueber */
.page-recipe { position: relative; }
.page-recipe.has-hero > .topbar { position: sticky; top: var(--safe-t); z-index: 6; background: transparent; border: 0; margin-bottom: -60px; height: 60px; }
.page-recipe.has-hero > .topbar .icon-btn { background: rgba(255, 253, 248, 0.9); color: #1f2a22; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.page-recipe.has-hero > .topbar .icon-btn.fav-btn.on { color: var(--paprika); }
.page-recipe.has-hero > .topbar .topbar-side { gap: 8px; }
.hero { margin: 0 calc(var(--gutter) * -1); height: 300px; overflow: hidden; background: var(--surface-2); }
.hero .hero-img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; max-height: none; aspect-ratio: auto; display: block; }
.page-recipe.has-hero .recipe-head { position: relative; z-index: 2; margin: -30px calc(var(--gutter) * -1) 0; padding: 22px var(--gutter) 8px; background: var(--bg); border-radius: 28px 28px 0 0; }
.recipe-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--cat, var(--paprika)) 18%, transparent); color: color-mix(in srgb, var(--cat, var(--paprika)) 85%, var(--text)); }
.pill-veg { background: var(--accent-soft); color: var(--accent); }
.facts.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; margin: 18px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.facts.stats div { padding: 10px 8px; text-align: center; align-items: center; }
.facts.stats div + div { border-left: 1px solid var(--line); }
.facts.stats dd { font: 600 19px/1.2 var(--serif); }
.facts.stats dt { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.ing-amt { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--text); }
.ing-list li.scaled .ing-amt { color: var(--text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
/* Zutaten im Wochenangebot: Menge orange + Hinweis */
.ing-list li.on-offer .ing-amt { color: var(--deal); }
.ing-deal { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 2px 0 0 8px; padding: 1px 8px 1px 6px; border: 0; border-radius: 999px; background: var(--deal); color: var(--on-deal); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.6; vertical-align: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ing-deal .icon { width: 13px; height: 13px; flex: none; }
.ing-deal span { overflow: hidden; text-overflow: ellipsis; }
.ing-list li.ing-row { border-bottom-style: dashed; }
.action-bar .btn.primary, .cook-nav .btn.primary { background: var(--accent); color: var(--accent-ink); }
.row-stock.miss .stock-dot { background: var(--paprika); }
.ing-list li.st-short::before, .ing-list li.st-none::before { background: var(--paprika); }
/* Vorrat: ruhige Knapp-Karte, Fuellstand */
.low-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 12px 0 4px; border-radius: 18px; background: var(--paprika-soft); }
.low-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--paprika); color: #fff; display: flex; align-items: center; justify-content: center; }
.low-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text-2); }
.low-txt b { font-size: 15px; color: var(--text); }
.low-go { color: var(--paprika); flex: none; }
.fill { position: relative; display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--surface-2); max-width: 160px; }
.fill-bar { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.fill.low .fill-bar { background: var(--paprika); }
.fill-min { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--text-3); border-radius: 1px; }
.pantry-item.low .pantry-qty { color: var(--paprika); }
.chip.chip-low { border-color: var(--paprika); background: var(--paprika-soft); color: var(--text); }
.fill { width: 100%; }
.cook-need b { color: var(--paprika); font-family: var(--serif); }

/* ---------- iPhone: Statusleiste / Dynamic Island nicht ueberdecken ---------- */
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--safe-t); background: var(--bg); z-index: 40; pointer-events: none; }
#view { padding-top: var(--safe-t); }
.topbar { top: var(--safe-t); }
.page-recipe > .timer-bar { top: calc(var(--safe-t) + 54px); }
.cook-body { padding-top: calc(10px + var(--safe-t)); }
.sheet { max-height: calc(92vh - var(--safe-t)); }
.layer-dialog { padding-top: calc(24px + var(--safe-t)); }
#banner { padding-top: calc(8px + var(--safe-t)); }
.filter-cats > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; border-top: 1px solid var(--line); padding-top: 8px; }
.filter-cats > summary::-webkit-details-marker { display: none; }
.filter-cats > summary .filter-label { margin: 0; }
.filter-cats > summary::after { content: '▾'; color: var(--text-3); margin-left: 6px; }
.filter-cats[open] > summary::after { content: '▴'; }
.cat-sum { margin-left: auto; color: var(--text-2); font-size: 14px; font-weight: 600; }
.filter-cats .cat-pick { margin-top: 8px; }
.filter-apply { position: sticky; bottom: calc(8px + var(--safe-b)); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* 3.11.6 – Kategorien im Editor: Vorschlaege + eingeklappte Liste */
.chip.sugg { border-style: dashed; border-color: var(--accent); color: var(--accent); background: transparent; }
.edit-cats { margin-top: 6px; }
.edit-cats > summary { border-top: 0; padding-top: 0; min-height: 40px; }
.edit-cats > summary .filter-label { font-size: 14px; color: var(--text-2); font-weight: 600; }
.edit-cats .chips { margin-top: 4px; }
.cat-hint { margin: -2px 0 6px; }

/* 3.12.0 – eigene Rezeptseiten */
.site-add { margin-top: 10px; width: 100%; justify-content: center; }
.site-form { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, transparent); display: flex; flex-direction: column; gap: 10px; }
.site-form-title { margin: 0; font-size: 16px; }
.site-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-form-actions .spacer { flex: 1; }
.site-tip.own .site-name::after { content: ''; }
.site-tip .icon-btn { flex: none; }

/* 3.12.1 – TikTok ohne Rezept: Beschreibung anzeigen */
.import-caption { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: flex-start; }
.import-caption-label { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.import-caption-text { margin: 0 0 4px; padding: 8px 10px; border-left: 3px solid var(--line); background: var(--surface-2, transparent); border-radius: 6px; font-size: 14px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; align-self: stretch; }

/* 3.14.0 – lange druecken mit sichtbarem Fortschritt, Zutat auf die Einkaufsliste */
.lp-fill { position: relative; overflow: hidden; }
.lp-fill::after { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: .16; transform: scaleX(0); transform-origin: left center; pointer-events: none; border-radius: inherit; }
.lp-fill.lp-hold::after { transform: scaleX(1); transition: transform .38s linear .12s; }
.lp-fill.lp-fired::after { transform: scaleX(1); opacity: .3; transition: opacity .45s ease-out; }
.no-callout.lp-hold { transform: scale(.985); transition: transform .35s ease .12s; }
.no-callout.lp-fired { animation: lp-pop .3s ease-out; }
@keyframes lp-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.01); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .no-callout.lp-hold, .no-callout.lp-fired { transform: none; animation: none; } }
.action-item .action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-item .action-text small { color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; }
.cook-all-hint { margin: 6px 0 4px; font-size: 13px; color: var(--text-3); }
.cook-all-list li.in-step { color: var(--accent); font-weight: 600; }
.cook-all-list li .in-step-tag { font-weight: 400; font-size: 12px; color: var(--text-3); }

/* 3.15.0 – Kochmodus parken */
.cook-pull { position: absolute; top: calc(var(--safe-t) + 4px); left: 50%; transform: translate(-50%, -140%); display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity .15s, background .15s, color .15s; z-index: 3; white-space: nowrap; }
.cook-pull .icon { width: 16px; height: 16px; }
.cook-pull.show { opacity: 1; }
.cook-pull.ready { background: var(--accent); color: var(--on-accent, #fff); }
.cook.parking { transition: transform .16s ease-in, opacity .16s ease-in !important; transform: translateY(40%) scale(.96) !important; opacity: 0 !important; }
.park-dock { position: fixed; left: 0; right: 0; z-index: 8; bottom: calc(var(--nav-h) + var(--safe-b) + 10px); display: flex; gap: 8px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; justify-content: flex-start; pointer-events: none; }
.park-dock > :first-child { margin-left: auto; }
.park-dock > :last-child { margin-right: auto; }
body.has-parked #view { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 150px); }
body.has-parked[data-route="recipe"] #view { padding-bottom: calc(var(--safe-b) + 170px); }
@media (max-width: 380px) { .cook-top { gap: 6px; } .cook-awake span:last-child { display: none; } }
.park-dock::-webkit-scrollbar { display: none; }
.park-dock[hidden] { display: none; }
body[data-route="recipes"] .park-dock { bottom: calc(var(--nav-h) + var(--safe-b) + 84px); }
body[data-route="recipe"] .park-dock { bottom: calc(var(--safe-b) + 92px); }
body[data-route="edit"] .park-dock, body[data-route="new"] .park-dock, body.cooking .park-dock { display: none; }
.park-pill { pointer-events: auto; flex: none; display: flex; align-items: center; max-width: min(78vw, 300px); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18); animation: park-in .22s ease-out; }
@keyframes park-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.park-open { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border: 0; background: none; color: var(--text); padding: 6px 4px 6px 6px; text-align: left; cursor: pointer; min-height: 52px; }
.park-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.park-ph { display: block; opacity: .75; }
.park-txt { display: flex; flex-direction: column; min-width: 0; }
.park-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.park-step { font-size: 12px; color: var(--accent); font-weight: 600; }
.park-x { flex: none; width: 40px; height: 40px; margin-right: 6px; border: 0; border-radius: 50%; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.park-x .icon { width: 18px; height: 18px; }
body.has-parked[data-route="recipes"] #toast, body.has-parked[data-route="pantry"] #toast, body.has-parked[data-route="shopping"] #toast, body.has-parked[data-route="recipe"] #toast { margin-bottom: 64px; }
@media (prefers-reduced-motion: reduce) { .park-pill { animation: none; } }

/* 3.16.0 – Vorschlag fuer diese Woche (Angebote) */
.week-picks { margin: 4px 0 18px; padding: 14px 0 14px 14px; border-radius: 20px; background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); color: #fff; box-shadow: 0 8px 24px rgba(194, 65, 12, .28); }
.week-head { display: flex; flex-direction: column; gap: 2px; padding-right: 14px; }
.week-badge { font-family: var(--font-display, inherit); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.week-sub { font-size: 13px; opacity: .92; }
.week-run { display: flex; align-items: center; gap: 8px; margin: 8px 14px 0 0; font-size: 13px; }
.week-row { display: flex; gap: 10px; overflow-x: auto; margin-top: 12px; padding: 2px 14px 4px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
.week-row::-webkit-scrollbar { display: none; }
.week-card { flex: none; width: 150px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 10px; border-radius: 16px; background: rgba(255,255,255,.96); color: #1d1d1b; text-decoration: none; }
.week-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden; background: color-mix(in srgb, var(--cat) 30%, #fff); }
.week-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.week-img .tile-mono { font-size: 34px; color: var(--cat); }
.week-from { position: absolute; left: 6px; top: 6px; padding: 3px 8px; border-radius: 999px; background: #1d1d1b; color: #fff; font-size: 11px; font-weight: 700; }
.week-title { font-weight: 700; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 2px; }
.week-meta { font-size: 12px; color: #a3401f; font-weight: 600; padding: 0 2px; }
.tile-deal { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 48px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 9px; border-radius: 999px; background: #c2410c; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.week-detail { margin: 0 0 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); color: #fff; }
.week-detail-head { display: flex; flex-direction: column; gap: 2px; }
.week-detail .week-badge { font-size: 17px; }
.week-offers { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.week-offers li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.16); font-size: 14px; }
.wo-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wo-offer { text-align: right; flex: none; max-width: 60%; }

/* 3.16.2 – Versionshinweis */
.ver-banner { position: fixed; left: var(--gutter); right: var(--gutter); top: calc(var(--safe-t) + 8px); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 14px; background: #c2410c; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 640px; margin: 0 auto; }
.ver-banner[hidden] { display: none; }
.ver-banner, #toast.show { touch-action: none; user-select: none; -webkit-user-select: none; }
#banner { touch-action: pan-y; }
/* im Editor nicht ueber Zurueck/Speichern legen */
body[data-route="edit"] .ver-banner, body[data-route="new"] .ver-banner { display: none; }
.ver-banner .ver-text { flex: 1; font-size: 14px; line-height: 1.35; }
.ver-banner .btn { flex: none; background: #fff; color: #c2410c; border-color: #fff; }
.ver-banner .icon-btn { color: #fff; flex: none; }

/* 3.17.0 – angebrochene Packungen */
.frac-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.frac-row[hidden] { display: none; }
.frac-label { font-size: 13px; color: var(--text-3); margin-right: 2px; }
.frac-row .chip { min-width: 40px; padding-left: 10px; padding-right: 10px; justify-content: center; }
.dialog .frac-row { flex-wrap: nowrap; }
.dialog .frac-label { display: none; }
button.pantry-qty { border: 0; background: none; color: var(--text); padding: 8px 2px; border-radius: 10px; cursor: pointer; font-family: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--text-3); text-underline-offset: 4px; }
button.pantry-qty:active { background: var(--surface-2); }

/* 3.17.1 – Angebote: Nachpruefen-Knopf, Angebots-Fenster */
.week-new { display: inline-flex; align-items: center; gap: 6px; margin: 10px 14px 0 0; padding: 6px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.week-new .icon { width: 16px; height: 16px; }
.deal-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.deal-price { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--deal); }
.deal-old { color: var(--text-3); text-decoration: line-through; }
.deal-store { font-weight: 600; }
button.offer-line.link-like { display: block; border: 0; background: none; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.week-offers li[role=button] { cursor: pointer; }

/* 3.19.0 – Wochenplan */
.plan-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; }
.plan-week-label { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; padding: 4px; }
.plan-week-label b { font-family: var(--serif); font-size: 18px; }
.plan-week-label span { font-size: 13px; color: var(--text-3); }
.plan-days { display: flex; flex-direction: column; gap: 10px; padding-bottom: 90px; }
.plan-day { border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; background: var(--surface); }
.plan-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-day.past { opacity: .6; }
.plan-day-head { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.plan-day-name { font-family: var(--serif); font-weight: 600; font-size: 17px; }
.plan-day-date { color: var(--text-3); font-size: 13px; flex: 1; }
.plan-day.today .plan-day-date { color: var(--accent); font-weight: 700; }
.plan-add { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 999px; padding: 6px 12px 6px 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 38px; }
.plan-add .icon { width: 18px; height: 18px; }
.plan-empty { margin: 2px 0 4px; color: var(--text-3); font-size: 14px; }
.plan-entry { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.plan-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 0; }
.pp-thumb { position: relative; flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--cat) 25%, var(--surface)); color: var(--cat); font-family: var(--serif); font-weight: 700; font-size: 20px; }
.pp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-title { font-weight: 600; font-size: 15.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-meta { font-size: 12.5px; color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pp-dealtag { padding: 0 7px; border-radius: 999px; background: var(--deal); color: var(--on-deal); font-weight: 700; font-size: 11px; }
.pp-deal { font-size: 12.5px; color: var(--deal); font-weight: 700; }
.plan-serv { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 48px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 12px; padding: 4px 6px; font: inherit; cursor: pointer; line-height: 1.1; }
.plan-serv b { font-size: 15px; }
.plan-serv small { font-size: 10.5px; color: var(--text-3); }
.plan-dock { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 8; padding: 10px var(--gutter); background: var(--bg); border-top: 1px solid var(--line); }
.plan-dock .btn { max-width: 640px; margin: 0 auto; display: flex; }
body[data-route="plan"] .park-dock { bottom: calc(var(--nav-h) + var(--safe-b) + 78px); }
body[data-route="plan"] #toast { bottom: calc(var(--nav-h) + var(--safe-b) + 84px); }
.plan-picker .field { margin-bottom: 8px; }
.plan-pick-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.pp-head { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.pp-head.deal { color: var(--deal); }
.pp-row { display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; padding: 8px 2px; min-height: 60px; cursor: pointer; }
.today-plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; background: var(--accent-soft, var(--surface-2)); }
.today-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--accent); }
.today-label .icon { width: 18px; height: 18px; }
.today-chip { background: var(--surface); }
.week-card-wrap { position: relative; flex: none; scroll-snap-align: start; }
.week-hide { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(29, 29, 27, .72); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.week-hide .icon { width: 16px; height: 16px; }



/* 3.21 – zwei Felder nebeneinander (Erinnerungszeiten) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 3.22 – Mindesthaltbarkeit */
.mhd-badge { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.mhd-badge.soon { color: var(--deal, #c2410c); }
.mhd-badge.gone { color: var(--danger, #b91c1c); }
.mhd-box { margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); }
.mhd-box b { display: block; font-size: 14px; margin-bottom: 6px; }
.mhd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mhd-chips .chip .mhd-badge { margin: 0; }

/* 3.22.1 – Vorratskategorien einklappbar */
.cat-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.cat-toggle .cat-count { font-weight: 500; color: var(--text-3); }
.cat-toggle .cat-chev { margin-left: auto; transition: transform .15s ease; }
.cat-toggle[aria-expanded="false"] .cat-chev { transform: rotate(-90deg); }
.cat-toggle { flex-wrap: wrap; }
.cat-toggle .cat-sum { order: 3; flex-basis: 100%; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.cat-toggle[aria-expanded="true"] .cat-sum { display: none; }

/* 3.23 – Woche vorschlagen */
.plan-dock { display: flex; flex-direction: column; gap: 8px; }
.wsug-list { max-height: 55vh; overflow-y: auto; margin: 8px 0 12px; }
.wsug-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wsug-row.off .wsug-main { opacity: .5; }
.wsug-check input { width: 22px; height: 22px; }
.wsug-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wsug-day { color: var(--text-3); font-size: 12px; font-weight: 600; }
.wsug-title { font-size: 15px; }
.wsug-why { font-size: 13px; color: var(--text-2); }
.plan-rest { font-size: 13px; color: var(--text-3); padding: 0 8px; align-self: center; }

/* 3.26 – TM6 gross im Kochmodus */
.tm6-display.big .seg { padding: 12px 16px; font-size: 22px; font-weight: 700; }
.cook-tm6 { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cook-tm6 .tm6-timer { min-height: 48px; }

/* 3.27 – Bewertung und Notiz nach dem Kochen */
.rate-stars { display: flex; gap: 6px; margin: 8px 0 12px; }
.rate-star { width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.rate-star .icon { width: 26px; height: 26px; }
.rate-star.on { color: #d97706; background: color-mix(in srgb, #d97706 14%, var(--surface)); }
.rate-star.on .icon { fill: currentColor; }
.cook-note { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.cook-note-stars { color: #d97706; letter-spacing: 2px; }
.backup-old { color: var(--danger, #b91c1c); font-weight: 600; }
.deck-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.deck-name { flex: none; width: 110px; font-size: 14px; font-weight: 600; }
.deck-url { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--text-2); }

/* 3.29.5 – Wochenplan: Rezept lange druecken und auf einen anderen Tag ziehen */
.plan-entry { -webkit-user-select: none; user-select: none; }
.plan-entry.plan-lifted { opacity: .35; }
.plan-ghost { position: fixed; z-index: 60; margin: 0; padding: 8px 10px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); pointer-events: none; will-change: transform; }
body.plan-dragging { -webkit-user-select: none; user-select: none; }
.plan-day.drop-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .plan-ghost { box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } }
body.plan-dragging .plan-dock { opacity: .25; pointer-events: none; transition: opacity .15s; }

/* 3.30.0 – Editor: Vorschau und Auswahl des eigenen Fotos */
.img-prev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.img-prev img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; background: var(--surface-2); }
.cook-note.editable { cursor: pointer; }
.cook-note-edit { align-self: flex-start; }

/* 3.31.0 – Kassenbon -> Vorrat */
.rcpt-row { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0 10px; }
.rcpt-row .check { display: flex; align-items: center; gap: 12px; }
.rcpt-row .pick-note { white-space: normal; padding-left: 34px; }
.rcpt-row .rcpt-sel { margin-left: 34px; width: calc(100% - 34px); min-height: 38px; font-size: 14px; }