:root {
  --sage: #878c7a;
  --sage-dark: #626858;
  --sage-soft: #dfe2d8;
  --paper: #f7f4ee;
  --paper-2: #efebe3;
  --card: rgba(255, 253, 248, .9);
  --ink: #30332b;
  --muted: #6d7068;
  --line: #ded9cf;
  --orange: #c97d43;
  --red: #b9574e;
  --blue: #537d89;
  --shadow: 0 14px 38px rgba(70, 68, 58, .08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #c9c9c1;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #c9c9c1; }
button, input, select { font: inherit; }
button { color: inherit; }
/* Fokus für ALLES, was bedienbar ist. Vorher fehlte er ausgerechnet bei den
   Karten, die per tabindex fokussierbar sind – man sah dann nicht, wo man ist. */
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, a:focus-visible,
[tabindex]:focus-visible { outline: 3px solid rgba(135, 140, 122, .55); outline-offset: 2px; border-radius: 6px; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  /* ZWEI Ebenen: vorn der Papierverlauf für den Inhaltsbereich, dahinter die
     durchgehende Farbe der linken Spalte. Ohne die zweite Ebene endet die
     Seitenleiste beim Scrollen sichtbar mittendrin — sie klebt fensterhoch,
     die Seite darunter ist aber mehrere tausend Bildpunkte lang. */
  /* Die Spalte bekommt einen VOLLTON, keinen Verlauf.
 
     Erster Versuch nahm denselben Verlauf wie die Leiste. Der läuft dort über
     831 Bildpunkte und ist unten dunkel angekommen; über die ganze Seitenhöhe
     von mehreren tausend Punkten gestreckt, ist er an derselben Stelle noch
     ganz hell. Genau an der Nahtstelle stand deshalb eine sichtbare Kante.
 
     #747b69 ist die Farbe, mit der der Verlauf der Leiste endet. Damit geht
     die Fläche nahtlos weiter, statt neu anzufangen. */
  background:
    radial-gradient(circle at 88% 10%, #fffdf8 0, var(--paper) 48%, #f0ede6 100%) 224px 0 / calc(100% - 224px) 100% no-repeat,
    #747b69;
}

/* Die Seitenleiste klebt oben und ist genau fensterhoch. Die SEITE ist aber
   viel länger — beim Scrollen endete die Farbfläche deshalb dort, wo die
   klebende Leiste aufhört, und darunter war creme. Es sah aus, als bräche die
   Leiste mittendrin ab.
 
   Gelöst über den Grid-Container: Der bekommt die Farbe der Leiste als linke
   Spalte, durchgehend über die ganze Seitenhöhe. Die Leiste selbst klebt
   unverändert darüber. */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 36px 22px 28px;
  background: linear-gradient(160deg, #9ba18f, #747b69);
  color: white;
  display: flex;
  flex-direction: column;
}

/* Alle Sidebar-Inhalte teilen denselben linken Einzug (--rail-inset), damit Logo,
   Navigations-Icons, Zitat und Synchronisationsstatus auf einer Kante stehen. */
.sidebar { --rail-inset: 15px; }
.wordmark { border: 0; background: transparent; display: block; width: 100%; padding: 0 var(--rail-inset); margin: 0 0 46px; cursor: pointer; }
.wordmark img { display: block; width: 100%; height: auto; }
.main-nav { display: grid; gap: 9px; }
.nav-item { min-height: 53px; padding: 0 var(--rail-inset); display: flex; gap: 14px; align-items: center; border: 0; border-radius: 15px; color: rgba(255,255,255,.9); background: transparent; cursor: pointer; text-align: left; font-weight: 650; }
.nav-item span { font-size: 22px; width: 24px; font-weight: 400; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.24); color: white; }
.count-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: rgba(255,255,255,.9); color: var(--sage-dark); display: grid; place-items: center; font-size: 12px; }
.main-content { min-width: 0; padding: 0 clamp(24px, 3.2vw, 54px) 50px; }
.topbar { min-height: 104px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(210,205,195,.7); color: var(--muted); }
/* Rechte Ecke der Kopfzeile: Synchronisationsstand als schmale Zeile,
   darunter die Uhr. Die Uhr bleibt die größere von beiden – sie wird
   gelesen, der Stand nur überflogen. */
.topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.datetime { display: flex; align-items: center; gap: 28px; }
.datetime strong { font-family: Georgia, serif; font-size: 32px; font-weight: 500; color: var(--ink); }
.view { display: none; padding-top: 34px; animation: enter .2s ease; }
.view.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }

.hero-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 22px; }
.hero-heading h1 { font-family: Georgia, serif; font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1; margin: 0 0 10px; color: #505444; }
.hero-heading p:not(.eyebrow) { margin: 0; color: var(--muted); }
.eyebrow { color: var(--sage-dark); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; margin: 0 0 8px; }
.quiet-action, .primary-action { min-height: 45px; border-radius: 13px; padding: 0 17px; cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,.6); font-weight: 700; }
.quiet-action:hover { background: white; }
.primary-action { border-color: var(--sage); background: var(--sage); color: white; }
.primary-action:hover { background: var(--sage-dark); }

.energy-switch { display: inline-flex; gap: 8px; padding: 6px; margin-bottom: 26px; border-radius: 17px; background: rgba(228,224,215,.65); }
.energy-switch button { min-height: 43px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; color: var(--muted); }
.energy-switch button.active { background: var(--sage); color: white; box-shadow: 0 6px 14px rgba(90,98,80,.18); }

.suggestion-carousel-heading { min-height: 24px; display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 11px; }
.suggestion-carousel-heading span:first-child { color: var(--sage-dark); font-weight: 800; }
.suggestion-carousel { position: relative; }
.suggestion-grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 3px 2px 17px; }
.suggestion-grid::-webkit-scrollbar { display: none; }
.food-card { flex: 0 0 calc((100% - 36px) / 3); min-width: 0; scroll-snap-align: start; border: 1px solid rgba(215,210,200,.88); background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.food-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(70,68,58,.12); }
.carousel-arrow { position: absolute; z-index: 2; top: calc(50% - 28px); width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(135,140,122,.45); border-radius: 50%; background: rgba(255,253,248,.94); color: var(--sage-dark); box-shadow: 0 8px 22px rgba(70,68,58,.14); cursor: pointer; font-size: 31px; line-height: 1; }
.carousel-arrow:hover:not(:disabled) { background: white; transform: scale(1.04); }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-prev { left: -18px; }
.carousel-next { right: -18px; }
.food-image { position: relative; aspect-ratio: 1.45; background: linear-gradient(145deg, #d8d8ce, #a9ae9b); overflow: hidden; }
.food-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-fallback { height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.9); font-family: Georgia, serif; font-size: 32px; text-align: center; padding: 30px; }
.readiness-pill { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); border-radius: 10px; padding: 7px 10px; background: rgba(255,253,248,.92); backdrop-filter: blur(8px); font-size: 12px; font-weight: 750; }
/* Grün ist eine Zusage: alles da. Deshalb nur dort, wo wirklich nichts fehlt –
   sonst verliert das Signal seinen Wert. */
.readiness-pill.is-ready { background: var(--sage); color: #fffdf8; }
/* Die ganze Karte bekommt den grünen Rahmen – auf einen Blick erkennbar,
   ohne die Kachel lesen zu müssen. */
.food-card.is-ready { border-color: var(--sage); box-shadow: 0 0 0 2px var(--sage), var(--shadow); }
.food-card.is-ready:hover { box-shadow: 0 0 0 2px var(--sage), 0 18px 42px rgba(70,68,58,.14); }
.food-card.is-almost { border-color: rgba(201,125,67,.5); }
.readiness-pill.is-almost { background: rgba(255,253,248,.94); color: var(--orange); box-shadow: inset 0 0 0 1px rgba(201,125,67,.4); }
.tag-ready { background: var(--sage); border-color: var(--sage); color: #fffdf8; }
.tag-almost { color: var(--orange); border-color: rgba(201,125,67,.45); }
.food-card-body { padding: 16px; }
.food-card h3 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta, .nutrition-row { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.nutrition-row { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 750; }
.reason { margin-top: 13px; border-radius: 11px; background: var(--sage-soft); color: var(--sage-dark); padding: 10px 11px; font-size: 12px; }

.dashboard-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; margin-top: 22px; }
.panel { border: 1px solid rgba(215,210,200,.88); border-radius: 19px; background: rgba(255,253,248,.72); box-shadow: var(--shadow); padding: 18px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.panel-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 20px; font-weight: 600; }
.panel-heading button { border: 0; background: transparent; cursor: pointer; color: var(--sage-dark); font-size: 12px; }
.snow { font-size: 24px; color: var(--blue); }
.compact-list { display: grid; gap: 1px; }
.compact-row { min-height: 42px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.compact-row:first-child { border-top: 0; }
.compact-row .grow { flex: 1; min-width: 0; }
.status-mini, .source-badge { display: inline-flex; align-items: center; min-height: 22px; border-radius: 99px; padding: 2px 8px; font-size: 10px; border: 1px solid currentColor; }
.status-mini.low { color: var(--orange); }
.status-mini.out { color: var(--red); }
.source-badge.auto_empty { color: var(--red); background: #fff4f1; }
.source-badge.recipe { color: var(--blue); background: #f0f7f8; }
.source-badge.manual { color: var(--sage-dark); background: #f1f3ed; }
.empty-note { color: var(--muted); font-size: 13px; padding: 12px 0; }

.large-stat { font-family: Georgia, serif; color: var(--sage-dark); font-size: 22px; text-align: right; }
.large-stat strong { font-size: 36px; font-weight: 500; }
.audit-banner { padding: 15px 18px; margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; border-radius: 16px; background: var(--sage); color: white; }
.audit-banner div { display: flex; flex-direction: column; gap: 3px; }
.audit-banner span { font-size: 12px; opacity: .8; }
.audit-banner button { border: 0; background: rgba(255,255,255,.2); color: white; border-radius: 10px; min-height: 38px; padding: 0 14px; cursor: pointer; }
.hidden { display: none !important; }
.inventory-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.topbar-logo { display: none; }
.search { flex: 1; max-width: 520px; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.65); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.subtabs { display: flex; gap: 8px; margin: 18px 0; }
.subtabs button { flex: 0 0 auto; white-space: nowrap; }
.subtabs button { min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.6); cursor: pointer; }
.subtabs button.active { background: var(--sage); border-color: var(--sage); color: white; }
.inventory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inventory-row { min-height: 72px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; padding: 10px 12px; background: var(--card); }
.food-dot { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--sage-soft); display: grid; place-items: center; font-family: Georgia, serif; color: var(--sage-dark); font-size: 19px; }
.food-icon { background: linear-gradient(145deg, #f2efe7, #e4e6dc); font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 22px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(98,104,88,.06); }
.inventory-row:has(.state-cycle.out) .food-icon { filter: grayscale(.35); opacity: .72; }
.inventory-name { flex: 1; min-width: 0; }
.inventory-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-name small { color: var(--muted); }
.state-cycle { min-width: 74px; min-height: 38px; padding: 0 10px; border-radius: 11px; background: white; cursor: pointer; text-transform: capitalize; font-size: 12px; font-weight: 800; }
.state-cycle.in { color: var(--sage-dark); border: 1px solid var(--sage); }
.state-cycle.low { color: var(--orange); border: 1px solid var(--orange); }
.state-cycle.out { color: var(--red); border: 1px solid var(--red); }
.prepared-panel { margin-top: 20px; }
.prepared-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prepared-row { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: rgba(255,255,255,.65); }
.prepared-row.is-empty { opacity: .62; }
.prepared-row strong { display: block; margin-bottom: 4px; }
.prepared-row small { color: var(--muted); }
.prepared-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.prepared-open:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.prepared-row .delete-button { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; }
/* Anklickbare Zeile in den Übersichtskarten auf „Heute“ */
.row-action { width: 100%; padding: 0; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.row-action:hover { background: rgba(135,140,122,.08); }
.link-action { border: 0; background: transparent; padding: 0; font: inherit; color: var(--sage-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dialog-hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* `hidden` muss stärker sein als das display:grid der Dialog-Labels,
   sonst bleiben ausgeblendete Felder sichtbar. */
[hidden] { display: none !important; }
/* Höhere Spezifität als `.food-dialog label`, sonst greift dort das Grid-Layout
   und Kästchen und Beschriftung stehen untereinander. */
.food-dialog label.checkbox-row, .checkbox-row { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 650; line-height: 1.4; }
.food-dialog label.checkbox-row input[type="checkbox"], .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--sage); }
/* Menge und Must-have im Vorrat */
.amount-tag { color: var(--ink); font-weight: 700; }
.amount-tag br { content: ""; display: block; margin-top: 3px; }
.stock-lots-section { margin: 20px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.stock-lots-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.stock-lots-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 20px; }
.stock-lots-heading .dialog-hint { max-width: 420px; }
#stock-lots { display: grid; gap: 12px; margin-top: 12px; }
.stock-lot { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.55); }
.stock-lot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stock-lot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.stock-lot-grid .stock-lot-approx { align-self: end; min-height: 44px; }
.expiry-row.is-urgent { border-color: rgba(201,125,67,.45); background: rgba(201,125,67,.07); }
.expiry-row small { display: block; color: var(--orange); margin-top: 2px; }
.must-have-tag { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--sage-soft); color: var(--sage-dark); font-size: 10px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; }
.inventory-row.is-below { border-color: rgba(201,125,67,.45); background: rgba(201,125,67,.06); }
.row-detail { min-width: 38px; padding: 0 10px; color: var(--muted); font-size: 16px; line-height: 1; }
.row-detail:hover { color: var(--ink); }
/* Erststart ohne erfassten Bestand */
.first-run-note { flex: 1; max-width: 560px; padding: 30px 32px; border: 1px dashed var(--line); border-radius: 20px; background: var(--card); }
.first-run-note strong { display: block; font-family: Georgia, serif; font-size: 23px; font-weight: 500; margin-bottom: 9px; }
.first-run-note p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.portion-stepper { display: inline-flex; align-items: center; gap: 11px; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.portion-stepper button { border: 0; background: transparent; width: 30px; height: 30px; cursor: pointer; font-size: 18px; }

.dish-tabs { margin-bottom: 22px; }
.dish-filters { margin: -4px 0 24px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.7); box-shadow: var(--shadow); }
.dish-management-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -7px 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.72); }
.dish-management-bar p { margin: 0; color: var(--muted); font-size: 12px; }
.dish-management-bar > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dish-management-bar button { white-space: nowrap; }
.dish-filter-topline { display: flex; align-items: center; gap: 10px; }
.dish-search { max-width: none; }
.filter-reset { display: none; min-height: 42px; padding: 0 12px; border: 0; background: transparent; color: var(--red); cursor: pointer; font-weight: 750; }
.filter-reset.visible { display: block; }
.dish-filter-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 18px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.dish-filter-options.collapsed { display: none; }
.filter-group > span { display: block; margin-bottom: 7px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 850; }
.filter-group > div { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-group button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.78); color: var(--muted); cursor: pointer; font-size: 11px; }
.filter-group button:hover { border-color: var(--sage); color: var(--sage-dark); }
.filter-group button.active { border-color: var(--sage); background: var(--sage); color: white; }
.filter-result-line { display: flex; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.filter-result-line strong { color: var(--ink); }
.dish-library { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 16px; }
.library-card { min-width: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.library-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(70,68,58,.12); }
/* `height: auto` ist hier der ganze Unterschied zwischen Karte und Katastrophe.
   Am 27.08.2026 bekam jedes `img` die Attribute width="1200" height="1090" –
   damit der Browser das Seitenverhältnis auch ohne Stylesheet kennt. Diese
   Attribute wirken wie eine sehr schwache CSS-Regel: Jede Autorenregel schlägt
   sie – aber nur für die Eigenschaft, die sie auch setzt. Diese Regel setzte
   `width`, nie `height`. Also blieb `height: 1090px` stehen.
   Und sobald Breite UND Höhe feststehen, wird `aspect-ratio` wirkungslos.
   Ergebnis: 272 px breite, 1090 px hohe Bilder. Gemessen, nicht vermutet. */
.library-card img { width: 100%; height: auto; aspect-ratio: 1.1; object-fit: cover; display: block; }
.library-card .image-fallback { aspect-ratio: 1.1; background: linear-gradient(145deg, #b3b8a8, #7d8472); color: white; font-size: 24px; }
.library-body { padding: 14px; }
.library-body h3 { font-family: Georgia, serif; font-size: 18px; margin: 0 0 8px; }
.library-body p { color: var(--muted); font-size: 12px; margin: 0; }
.library-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.library-actions button { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.75); color: var(--sage-dark); font-size: 10px; font-weight: 800; cursor: pointer; }
.library-actions button:hover { border-color: var(--sage); background: var(--sage-soft); }
.library-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tag { border-radius: 99px; background: var(--sage-soft); color: var(--sage-dark); font-size: 10px; padding: 4px 7px; }
.tag.freezer-good { background: #dfeadd; color: #4f6b4a; }
.tag.freezer-okay { background: #f2ead8; color: #86662d; }
.tag.freezer-poor { background: #ece9e2; color: #706d65; }
.tag.dog-separateComponents, .tag.dog-unseasonedPortion { background: #e6eee5; color: #49664a; }
.tag.dog-no { background: #f3e2df; color: #8d5148; }
.inspiration-note { padding: 10px 11px; border-radius: 10px; background: #f1eee7; color: var(--muted); font-size: 11px; margin-top: 10px; }
.no-filter-results { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.no-filter-results strong { color: var(--ink); font-family: Georgia, serif; font-size: 24px; }

.add-form { display: flex; max-width: 720px; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.65); border: 1px solid var(--line); }
.add-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 8px; }
.shopping-list { margin-top: 20px; display: grid; gap: 9px; }
.shopping-row { min-height: 66px; padding: 11px 14px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.check-button { width: 30px; height: 30px; border: 1px solid var(--sage); border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.shopping-row.checked { opacity: .55; }
.shopping-row.checked .check-button { background: var(--sage); color: white; }
.shopping-row.checked .shopping-label { text-decoration: line-through; }
.shopping-info { flex: 1; min-width: 0; }
.shopping-label { font-weight: 750; }
.shopping-sources { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.delete-button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.delete-button:hover { background: #f7e9e7; color: var(--red); }
.shopping-actions { margin-top: 14px; }

dialog { border: 0; border-radius: 20px; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px rgba(40,40,34,.3); }
dialog::backdrop { background: rgba(42,43,37,.42); backdrop-filter: blur(5px); }
.recipe-dialog { width: min(860px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow: auto; }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 25px; cursor: pointer; }
.recipe-hero { min-height: 300px; background: var(--sage); }
.recipe-hero img { width: 100%; height: 340px; object-fit: cover; display: block; }
.recipe-detail { padding: 26px; }
.recipe-detail h2 { font-family: Georgia, serif; font-size: 36px; margin: 0 0 8px; }
.recipe-nutrition { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 20px 0; }
.nutrition-box { border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: rgba(255,255,255,.65); }
.nutrition-box strong, .nutrition-box span { display: block; }
.nutrition-box span { color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.guidance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.guidance-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.62); }
.guidance-card > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.guidance-card strong { display: block; font-size: 14px; }
.guidance-card p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.guidance-card.freezer-good, .guidance-card.dog-separateComponents, .guidance-card.dog-unseasonedPortion { border-color: #cbd9c8; background: #f1f6ef; }
.guidance-card.freezer-okay { border-color: #ddcfac; background: #faf5e8; }
.guidance-card.dog-no { border-color: #e2c9c4; background: #faf0ee; }
.ingredient-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 15px 0 20px; }
.ingredient-line { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.ingredient-line.missing { color: var(--red); }
.food-dialog { width: min(620px, calc(100vw - 30px)); }
.food-dialog form { padding: 26px; }
.food-dialog h2 { font-family: Georgia, serif; font-size: 30px; margin: 0 0 5px; }
.food-dialog p { color: var(--muted); font-size: 13px; }
.food-dialog label { display: grid; gap: 6px; font-size: 12px; font-weight: 750; margin-top: 12px; }
.food-dialog input, .food-dialog select { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; background: white; padding: 0 10px; }
.food-dialog textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 11px; background: white; padding: 10px; font: inherit; box-sizing: border-box; }
.nutrient-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.editor-dialog { width: min(720px, calc(100vw - 30px)); max-height: calc(100vh - 30px); overflow: auto; }
.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.upload-preview { min-height: 150px; margin-top: 10px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--line); border-radius: 14px; background: var(--sage-soft); color: var(--muted); font-size: 12px; }
/* `height: auto` aus demselben Grund wie bei `.library-card img`: `max-height`
   deckelt zwar, aber die Höhe käme sonst aus dem HTML-Attribut statt aus dem
   Seitenverhältnis der tatsächlichen Datei. */
.upload-preview img { width: 100%; height: auto; max-height: 260px; object-fit: cover; display: block; }
.field-help { padding: 9px 11px; border-radius: 10px; background: var(--sage-soft); font-size: 11px !important; }
.recipe-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; transform: translate(-50%, 20px); background: #34382f; color: white; padding: 12px 17px; border-radius: 12px; opacity: 0; pointer-events: none; transition: .2s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Rückgängig-Leiste. Sitzt über dem Toast, damit beide gleichzeitig lesbar
   bleiben: der Toast sagt, was passiert ist, die Leiste bietet den Weg zurück. */
.undo-bar { position: fixed; left: 50%; bottom: 78px; z-index: 11; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); background: #34382f; color: #fffdf8; padding: 10px 12px 10px 17px; border-radius: 12px; box-shadow: var(--shadow); font-size: 13px; }
.undo-bar[hidden] { display: none; }
.undo-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-bar button { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.34); border-radius: 9px; background: rgba(255,255,255,.12); color: #fffdf8; font-weight: 700; cursor: pointer; }
.undo-bar button:hover { background: rgba(255,255,255,.22); }
/* Sitzt die Leiste in einem offenen Dialog, klebt sie an dessen unterem Rand
   statt am Fenster – sonst stünde sie bei langen Dialogen mitten im Inhalt. */
.undo-bar.in-dialog { position: sticky; bottom: 0; left: auto; transform: none; margin: 18px auto 0; }

/* ---------------------------------------------------------------------------
   Touch-Ziele
   Betroffen waren ausgerechnet die häufigsten Alltagsklicks: abhaken, Portion
   plus/minus, Status wechseln, löschen. Die lagen bei 30–38 px und damit unter
   dem, was mit dem Daumen zuverlässig zu treffen ist.

   Gelöst über eine unsichtbare Vergrößerung statt über größere Kästchen: Die
   Optik bleibt exakt wie sie war, die Trefferfläche wächst auf 44 px.
   --------------------------------------------------------------------------- */
.portion-stepper button,
.check-button,
.prepared-row .delete-button,
.delete-button,
.state-cycle,
.row-detail,
.filter-group button,
.library-actions button,
.suggestion-chip,
.quickpicks .suggestion-chip,
#servings-filter [data-servings-step],
.audit-banner button,
.dialog-close { position: relative; }

.portion-stepper button::after,
.check-button::after,
.prepared-row .delete-button::after,
.delete-button::after,
.state-cycle::after,
.row-detail::after,
.filter-group button::after,
.library-actions button::after,
.suggestion-chip::after,
#servings-filter [data-servings-step]::after,
.audit-banner button::after,
.dialog-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px;
  width: 100%; height: 100%;
}

/* Eine Zeile, keine Kachel.
   Bis zum 27.08.2026 war das ein Block am Fuß der dunklen Seitenleiste: zwei
   Zeilen, 50 Pixel hoch, weiße Schrift auf Grün – und auf dem Telefon per
   `display: none` gar nicht vorhanden. Jetzt steht er oben rechts über der Uhr
   und muss sich dem hellen Papier anpassen: dunkler Text, heller Grund.
   Der Punkt wandert dabei nach vorn; in einer Zeile liest man ihn zuerst. */
.sync-note { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.62); color: var(--muted); font-size: 11px; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sync-note:hover { background: #fff; border-color: var(--sage); }
.sync-note strong { color: var(--ink); font-size: 11px; font-weight: 750; letter-spacing: .01em; }
.sync-note small { color: var(--muted); font-size: 11px; }
/* Das Trennzeichen gehört zur Darstellung, nicht zum Text – so bleibt der
   Detailtext für Vorlesegeräte und für app.js unverändert. */
.sync-note small::before { content: "·"; margin-right: 7px; }
.sync-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #d1a13f; box-shadow: 0 0 0 3px rgba(209,161,63,.16); }
/* Dunklere Töne als in der Seitenleiste: Auf hellem Papier verschwindet ein
   Pastellgrün, das auf Dunkelgrün noch leuchtete. */
.sync-dot.synced { background: #6f9c58; box-shadow: 0 0 0 3px rgba(111,156,88,.16); }
.sync-dot.syncing { background: #c8992f; box-shadow: 0 0 0 3px rgba(200,153,47,.18); animation: sync-pulse 1s infinite alternate; }
.sync-dot.offline, .sync-dot.conflict { background: #b8583a; box-shadow: 0 0 0 3px rgba(184,88,58,.16); }
.sync-dot.auth-required, .sync-dot.import-required { background: #c8992f; box-shadow: 0 0 0 3px rgba(200,153,47,.18); }
@keyframes sync-pulse { to { opacity: .45; } }

.account-dialog { width: min(520px, calc(100vw - 30px)); }
.account-dialog form { position: relative; padding: 28px; }
.account-dialog h2 { margin: 0 0 8px; font: 32px/1.05 Georgia, serif; }
.account-dialog p { color: var(--muted); line-height: 1.5; }
.account-dialog label { display: grid; gap: 7px; margin-top: 18px; font-size: 12px; font-weight: 800; }
.account-dialog input[type="password"] { min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.form-error { min-height: 20px; margin-top: 8px; color: var(--red); font-size: 12px; }
.sync-actions { display: grid; gap: 9px; margin-top: 20px; }
.sync-actions button { justify-content: center; }
.danger-action { color: var(--red); }
.privacy-note { padding: 12px; border-radius: 12px; background: var(--sage-soft); font-size: 11px; }
.privacy-note code { font-size: inherit; }

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 184px minmax(0, 1fr);
    /* Die durchgehende Spaltenfarbe muss der schmaleren Leiste folgen. */
    background:
      radial-gradient(circle at 88% 10%, #fffdf8 0, var(--paper) 48%, #f0ede6 100%) 184px 0 / calc(100% - 184px) 100% no-repeat,
      #747b69;
  }
  .sidebar { padding-inline: 15px; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .shopping-preview { grid-column: 1 / -1; }
  .suggestion-grid { gap: 12px; }
  .food-card { flex-basis: calc((100% - 24px) / 3); }
  .food-card h3 { font-size: 18px; }
  .dish-library { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dish-filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .app-shell {
    display: block;
    padding-bottom: 75px;
    /* Auf dem Telefon liegt die Leiste unten als Balken – dann darf links
       keine Farbspalte mehr stehen. */
    background: radial-gradient(circle at 88% 10%, #fffdf8 0, var(--paper) 48%, #f0ede6 100%);
  }
  .sidebar { position: fixed; z-index: 8; inset: auto 0 0 0; width: auto; height: 72px; padding: 8px 10px; display: block; background: rgba(116,123,105,.96); backdrop-filter: blur(15px); }
  /* Nur noch die Wortmarke. Der Synchronisationsstand stand hier bis zum
     27.08.2026 mit in der Regel und war auf dem Telefon damit unsichtbar –
     ausgerechnet dort, wo man am ehesten wissen will, ob der Stand aktuell
     ist. Er sitzt jetzt in der Kopfzeile und bleibt auf jeder Breite da. */
  .wordmark { display: none; }
  .main-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .nav-item { min-height: 56px; justify-content: center; flex-direction: column; gap: 2px; padding: 3px; font-size: 11px; }
  .nav-item span { width: auto; font-size: 18px; }
  .count-badge { position: absolute; margin: -28px 0 0 36px; }
  .main-content { padding: 0 17px 30px; }
  .topbar { min-height: 78px; }
  #page-eyebrow { display: none; }
  /* Marke oben, weil die Navigationsleiste unten keinen Platz dafür hat. */
  .topbar-logo { display: block; width: auto; height: 21px; }
  .topbar { gap: 14px; }
  .topbar-right { width: 100%; gap: 5px; }
  .datetime { width: 100%; justify-content: space-between; }
  .datetime strong { font-size: 27px; }
  /* Auf schmalen Bildschirmen genügt der Kurzstand. Der erklärende Zusatz
     („nur auf diesem Gerät") würde die Zeile umbrechen lassen. */
  .sync-note { min-height: 26px; padding: 3px 9px; font-size: 10px; }
  .sync-note strong { font-size: 10px; }
  .sync-note small { font-size: 10px; }
  .hero-heading { align-items: flex-start; }
  .hero-heading .quiet-action { display: none; }
  .suggestion-grid { gap: 12px; padding-right: 14vw; }
  .food-card { flex-basis: min(330px, 82vw); }
  .carousel-arrow { display: none; }
  .suggestion-carousel-heading span:last-child { display: none; }
  .dashboard-grid, .inventory-list { grid-template-columns: 1fr; }
  .prepared-list { grid-template-columns: 1fr; }
  .dish-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dish-filter-topline { flex-wrap: wrap; }
  .dish-management-bar { align-items: flex-start; }
  .dish-search { flex-basis: 100%; }

  /* Werkzeugleiste lief rechts aus dem Bild. Suche bekommt eine eigene Zeile,
     die beiden Schaltflächen teilen sich die zweite. */
  .inventory-toolbar { gap: 9px; }
  .inventory-toolbar .search { flex: 1 0 100%; }
  .inventory-toolbar .quiet-action { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; }

  /* Vier Orte passen nicht nebeneinander – quer wischbar statt abgeschnitten. */
  .subtabs { margin: 14px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subtabs::-webkit-scrollbar { display: none; }

  /* Überschrift und Aktion einer Karte dürfen umbrechen. */
  .panel-heading { flex-wrap: wrap; gap: 8px 14px; }
  .panel-heading h2 { font-size: 18px; }

  .hero-heading .eyebrow { font-size: 10px; }
}

@media (max-width: 520px) {
  .datetime { font-size: 12px; }
  .energy-switch { display: grid; grid-template-columns: 1fr; width: 100%; }
  .energy-switch button { text-align: left; }
  .subtabs { overflow-x: auto; }
  .subtabs button { white-space: nowrap; }
  .dish-library { grid-template-columns: 1fr; }
  .dish-filter-options { grid-template-columns: 1fr; }
  .ingredient-list, .recipe-nutrition { grid-template-columns: repeat(2, 1fr); }
  .nutrient-inputs { grid-template-columns: repeat(2, 1fr); }
  .dish-management-bar { display: grid; }
  .dish-management-bar > div { justify-content: stretch; }
  .dish-management-bar button { flex: 1; }
  .editor-grid { grid-template-columns: 1fr; }
  .stock-lots-heading { display: grid; }
  .stock-lot-grid { grid-template-columns: 1fr; }
}

/* Portionsangabe auf der Bibliothekskarte */
.servings-note { color: var(--sage-dark); font-weight: 700; }

/* Kochmenge in der geöffneten Rezeptansicht */
.servings-control { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 4px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.6); }
.servings-control > span { font-weight: 750; font-size: 13px; }
.servings-control .portion-stepper { margin-top: 0; background: white; }
.servings-control .portion-stepper b { min-width: 92px; text-align: center; font-size: 14px; }
.servings-control small { color: var(--muted); font-size: 12px; }
.nutrition-scope { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
/* Zutat ist da, reicht aber nicht für die gewählte Menge */
.ingredient-line.too-little { color: var(--orange); }
.ingredient-line.too-little strong { color: var(--orange); }

/* Vorschläge auf der Einkaufsliste */
.shopping-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.suggestions-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; }
/* align-items: center statt baseline – bei Chips ohne zweite Zeile saß der Text
   sonst an der Schriftlinie und damit sichtbar zu hoch im Rahmen. */
.suggestion-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.7); cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1; text-align: left; }
.suggestion-chip:hover { background: white; border-color: var(--sage); }
.suggestion-chip small { color: var(--muted); font-weight: 600; font-size: 11px; line-height: 1; }
.suggestion-chip.is-must { border-color: rgba(201,125,67,.45); }
.suggestion-chip.is-must small { color: var(--orange); }

/* Nährwerte: Bezugsgröße muss immer klar sein */
.nutrition-heading { margin: 20px 0 9px; font-family: Georgia, serif; font-size: 19px; font-weight: 600; }
.nutrition-heading small { margin-left: 8px; font-family: Inter, sans-serif; font-size: 12px; font-weight: 750; color: var(--sage-dark); text-transform: uppercase; letter-spacing: .08em; }
/* Aktionen im Rezeptdialog */
.recipe-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.recipe-actions .is-favorite { border-color: var(--sage); color: var(--sage-dark); background: var(--sage-soft); }

/* Ausklappbare Zubereitung */
.recipe-steps { margin: 20px 0 4px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.6); overflow: hidden; }
.recipe-steps summary { padding: 14px 17px; cursor: pointer; font-family: Georgia, serif; font-size: 19px; font-weight: 600; list-style: none; }
.recipe-steps summary::-webkit-details-marker { display: none; }
.recipe-steps summary::before { content: "▸ "; color: var(--sage-dark); }
.recipe-steps[open] summary::before { content: "▾ "; }
.recipe-steps summary small { margin-left: 8px; font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; color: var(--muted); }
.steps-body { padding: 0 17px 17px; }
.step-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 11px; }
.step-list li { display: flex; gap: 12px; align-items: baseline; line-height: 1.55; }
.step-index { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--sage-soft); color: var(--sage-dark); font-size: 12px; font-weight: 800; }
.step-list li.is-seasoning .step-index { background: var(--sage); color: #fffdf8; }
.step-list em { color: var(--muted); font-size: 12px; font-style: normal; }
.step-hint { margin: 0 0 12px; padding: 10px 12px; border-radius: 11px; background: rgba(83,125,137,.09); color: var(--ink); font-size: 12px; line-height: 1.55; }
.step-note { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Herkunft einer kuratierten Anleitung.
   Sichtbar genug, dass niemand sie fuer ein eigenes Rezept haelt – ruhig
   genug, dass sie beim Kochen nicht im Weg steht. Die Quellenliste bleibt
   zugeklappt: Beim Kochen will man Schritte, nicht Fussnoten. */
.step-origin { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.step-origin .step-hint:last-of-type { margin-bottom: 0; }
.step-sources { margin-top: 10px; font-size: 12px; }
.step-sources summary { cursor: pointer; color: var(--muted); padding: 6px 0; min-height: 32px; }
.step-sources ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.step-sources li { color: var(--ink); line-height: 1.5; }
.step-sources a { color: inherit; }
.step-sources small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

/* Zählstände im Synchronisationsdialog – Grundlage für den Vergleich beim Import */
.sync-facts { margin: 16px 0 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.6); overflow: hidden; }
.sync-fact { display: flex; justify-content: space-between; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.sync-fact:first-child { border-top: 0; }
.sync-fact span { color: var(--muted); }
.sync-fact strong { font-variant-numeric: tabular-nums; }
.sync-fact.is-head { background: var(--sage-soft); }
.sync-fact.is-head span, .sync-fact.is-head strong { color: var(--sage-dark); font-weight: 800; }
.sync-updated { margin: 10px 14px; color: var(--muted); font-size: 11px; line-height: 1.55; }

/* Fehlmenge auf der Einkaufsliste */
.need-amount { margin-left: 9px; padding: 2px 8px; border-radius: 99px; background: var(--sage-soft); color: var(--sage-dark); font-size: 11px; font-weight: 800; }
.suggestion-chip.is-opener { border-color: rgba(83,125,137,.45); }
.suggestion-chip.is-opener small { color: var(--blue); }

/* Vorauswahl beim Hinzufügen eines Lebensmittels */
.quickpicks { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 6px 0 4px; }
.quickpicks .suggestion-chip { min-height: 36px; padding: 0 13px; font-size: 12px; }

/* Fehlende Zutaten auf der Bibliothekskarte */
.library-missing { margin: 4px 0 0; color: var(--orange); font-size: 12px; line-height: 1.5; }
/* Schrittzähler im Personenfilter */
#servings-filter button[data-servings-step] { min-width: 38px; padding: 0 10px; font-size: 17px; line-height: 1; }

/* Machbarkeit auf der Bibliothekskarte – gleiche Prominenz wie auf „Heute“ */
.library-image { position: relative; }
.library-card.is-ready { border-color: var(--sage); box-shadow: 0 0 0 2px var(--sage), var(--shadow); }
.library-card.is-ready:hover { box-shadow: 0 0 0 2px var(--sage), 0 18px 42px rgba(70,68,58,.12); }
.library-card.is-almost { border-color: rgba(201,125,67,.5); }

/* Menge neben dem Namen; der Status bleibt rechts, weil er der Grund fürs Auftauchen ist */
.row-amount { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }

/* Dauer eines Kochschritts. Steht direkt hinter dem Text, weil sie zu diesem
   einen Schritt gehört – nicht zum Gericht. */
.step-list .step-duration { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--sage-soft); font-size: 11px; font-weight: 700; vertical-align: middle; }

/* ---------------------------------------------------------------------------
   Direkte Aktionen in kompakten Zeilen

   „Eier · knapp" war vorher eine reine Anzeige. Wer das liest, will es meist
   sofort auf den Einkauf setzen – und musste dafür die Seite wechseln und den
   Namen erneut eintippen. Der Knopf steht jetzt in derselben Zeile.
   --------------------------------------------------------------------------- */
.row-add { flex: 0 0 auto; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; position: relative; }
.row-add::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: 44px; min-height: 44px; width: 100%; height: 100%; }
.row-add:hover { background: var(--sage-soft); border-color: var(--sage); }
.row-done { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--sage); white-space: nowrap; padding: 0 4px; }

/* ---------------------------------------------------------------------------
   Eine Handlung je Vorschlagskarte

   „Was kann ich jetzt essen?" verdient eine Antwort, die man auch annehmen
   kann. Vorher führte jede Karte nur in einen Dialog, in dem man erst nach
   unten scrollen musste. Genau ein Knopf – zwei wären wieder eine Entscheidung.
   --------------------------------------------------------------------------- */
.card-actions { margin-top: 11px; display: flex; }
.card-actions:empty { display: none; }
.card-action { flex: 1; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s ease; }
.card-action:hover { border-color: var(--sage); background: var(--sage-soft); }
.card-action.primary { border-color: transparent; background: var(--sage-dark, #5f6553); color: #fffdf8; }
.card-action.primary:hover { filter: brightness(1.08); background: var(--sage-dark, #5f6553); }

/* Kurzaktion im Rezeptdialog, direkt unter der Portionswahl. */
.recipe-quick { margin: 14px 0 4px; display: flex; }
.recipe-quick .card-action { flex: 1; min-height: 48px; font-size: 13px; }

/* Zutatenzeichen: ✓ da · ◐ zu wenig · ○ fehlt. Ein Blick statt Rückschluss. */
.ing-mark { display: inline-block; width: 16px; margin-right: 7px; font-style: normal; font-weight: 700; opacity: .85; }
.ingredient-line.have .ing-mark { color: var(--sage); }
.ingredient-line.too-little .ing-mark { color: #b8860b; }
.ingredient-line.missing .ing-mark { color: #a4553b; }

/* Im Vorrat steht der Einkauf-Knopf zwischen Name und Status. Auf schmalen
   Bildschirmen wird die Zeile dadurch eng – dort genügt das Pluszeichen. */
@media (max-width: 520px) {
  .inventory-row .row-add { padding: 0 8px; font-size: 0; min-width: 34px; }
  .inventory-row .row-add::before { content: "+"; font-size: 15px; font-weight: 700; }
  .inventory-row .row-done { font-size: 0; }
  .inventory-row .row-done::before { content: "✓"; font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Zubereiten-Dialog

   Ersetzt eine Ja/Nein-Frage, in der die Mengen nur DASTANDEN. Zählbares in
   ganzen Stücken – ein halbes Ei schlägt niemand auf –, alles andere in Gramm,
   und beides vor dem Abziehen änderbar. Der Hunger schwankt.
   --------------------------------------------------------------------------- */
.cook-items { display: grid; gap: 9px; margin: 16px 0; }
.cook-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.cook-item-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cook-item-name strong { font-size: 14px; }
.cook-item-name small { font-size: 11px; color: var(--muted, #7d7a72); }
.cook-source { color: var(--sage-dark) !important; font-weight: 700; }
.cook-item-amount { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.cook-item-amount input { width: 62px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 15px; font-weight: 700; text-align: center; }
.cook-step { width: 36px; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); font-size: 17px; font-weight: 700; cursor: pointer; position: relative; }
.cook-step:hover { background: var(--sage-soft); border-color: var(--sage); }
.cook-unit { min-width: 34px; font-size: 12px; color: var(--muted, #7d7a72); }

@media (max-width: 520px) {
  .cook-item { flex-wrap: wrap; }
  .cook-item-amount { width: 100%; justify-content: flex-end; }
}

/* ===========================================================================
   MOBIL — Chosen Daily als App, nicht als schmal gewordene Webseite
   ===========================================================================

   Alles hier steht bewusst am Ende der Datei, damit es die Regeln davor
   überschreibt, ohne sie umzubauen. Die Optik bleibt unverändert; korrigiert
   wird nur, was auf einem Telefon in der Hand tatsächlich stört.
   =========================================================================== */

/* --- Safe Areas -----------------------------------------------------------
   Auf einem iPhone ist der untere Bildschirmrand nicht der untere Rand des
   nutzbaren Bereichs – dort liegt der Home-Indikator. Ohne diese Werte sitzt
   die Navigationsleiste teilweise darunter, und der letzte Eintrag einer Liste
   verschwindet hinter ihr. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-height: 72px;
}

@media (max-width: 800px) {
  /* Die Leiste wächst um den Home-Indikator, ihr Inhalt bleibt darüber. */
  .sidebar {
    height: auto;
    padding: 8px 10px calc(8px + var(--safe-bottom));
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
  }
  /* Genau so viel Luft unten, dass nichts hinter der Leiste liegt. */
  .app-shell { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px); }
  .main-content {
    padding-left: calc(17px + var(--safe-left));
    padding-right: calc(17px + var(--safe-right));
  }
  .topbar { padding-top: calc(var(--safe-top) + 4px); }

  /* Die Rückgängig-Leiste muss über die Navigation, nicht dahinter. */
  .undo-bar { bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px); }
  .toast { bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px); }
}

/* --- Dialoge als Blattansicht statt als Miniaturfenster --------------------
   Ein 620 px breites Fenster mitten auf einem 390-px-Bildschirm ist kein
   Dialog, sondern ein Ärgernis. Auf dem Telefon wird daraus eine Fläche, die
   von unten kommt und fast den ganzen Bildschirm einnimmt – so, wie man es von
   einer App kennt. */
@media (max-width: 800px) {
  dialog.food-dialog,
  dialog.editor-dialog,
  dialog.account-dialog,
  #recipe-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;          /* berücksichtigt die eingeblendete Adressleiste */
    margin: auto 0 0;           /* klebt am unteren Rand */
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;           /* das Scrollen übernimmt der Inhalt */
  }

  /* Der Inhalt scrollt, nicht das Fenster. Dadurch bleiben Kopf und Aktionen
     stehen, und iOS springt beim Tippen nicht mehr im ganzen Dialog herum. */
  dialog.food-dialog > form,
  dialog.editor-dialog > form,
  dialog.account-dialog > form,
  #recipe-dialog-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* der Hintergrund scrollt nicht mit */
    padding-bottom: calc(18px + var(--safe-bottom));
  }

  /* Ein Griff oben – das Zeichen dafür, dass man das hier wegwischen kann. */
  dialog.food-dialog::before,
  dialog.editor-dialog::before,
  dialog.account-dialog::before {
    content: "";
    display: block;
    width: 38px; height: 4px;
    margin: 9px auto 0;
    border-radius: 99px;
    background: var(--line);
    flex: 0 0 auto;
  }

  /* Speichern und Abbrechen bleiben sichtbar, auch wenn die Tastatur
     hochkommt. Vorher lagen sie am Ende eines langen Formulars und damit
     zuverlässig hinter der Tastatur. */
  .dialog-actions {
    position: sticky;
    bottom: calc(-1 * var(--safe-bottom));
    z-index: 2;
    margin: 22px -18px calc(-1 * var(--safe-bottom));
    padding: 12px 18px calc(12px + var(--safe-bottom));
    background: linear-gradient(to bottom, rgba(247,244,237,0), var(--paper) 22%);
    border-top: 1px solid var(--line);
  }
  .dialog-actions button { flex: 1; min-height: 48px; }

  .dialog-close { position: sticky; top: 6px; float: right; z-index: 3; }
}

/* --- Formulare: eine Spalte -----------------------------------------------
   Zwei Eingabefelder nebeneinander auf 390 px heißt: beide zu schmal. */
@media (max-width: 560px) {
  .nutrient-inputs,
  .editor-grid,
  .dish-filter-options { grid-template-columns: 1fr; }
  .ingredient-list { grid-template-columns: 1fr; }
  .recipe-nutrition { grid-template-columns: repeat(2, 1fr); }
  .food-dialog input,
  .food-dialog select,
  .food-dialog textarea,
  .editor-dialog input,
  .editor-dialog select,
  .editor-dialog textarea {
    min-height: 48px;
    font-size: 16px;   /* unter 16px zoomt iOS beim Fokus hinein */
  }
  .food-dialog textarea, .editor-dialog textarea { min-height: 110px; }
}

/* --- Lange Namen dürfen nichts sprengen ----------------------------------- */
.inventory-name strong,
.shopping-label,
.cook-item-name strong,
.library-body h3,
.food-card h3,
.compact-row .grow,
.prepared-open strong { overflow-wrap: anywhere; word-break: normal; min-width: 0; }
.inventory-row, .shopping-row, .compact-row, .cook-item, .prepared-row { min-width: 0; }

/* --- Rezeptansicht: Entscheidung und Handlung dicht beieinander ------------
   Das große Bild schob Portionswahl und Hauptaktion auf dem Telefon unter den
   Rand. Beides muss ohne Scrollen sichtbar sein – dafür ist es da. */
@media (max-width: 800px) {
  /* `overflow: hidden` ist hier nicht Kosmetik: Ohne das ignoriert das Bild die
     Höhenbegrenzung des Rahmens und bleibt 300 Pixel hoch – gemessen auf einem
     iPhone SE, wo dadurch die Hauptaktion unter den Rand rutschte. */
  /* `min-height: 300px` aus der Grundfassung schlägt jede `max-height` – das
     war der eigentliche Grund, warum das Bild auf dem Telefon 300 Pixel hoch
     blieb und die Hauptaktion unter den Rand schob. Beides muss zurückgesetzt
     werden, nicht nur die Obergrenze. */
  .recipe-hero { min-height: 0; height: 30vh; max-height: 30vh; overflow: hidden; }
  .recipe-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .recipe-detail { padding: 18px; }
  .recipe-detail h2 { font-size: 26px; }
  .servings-control { gap: 8px 12px; padding: 11px 13px; }
  .servings-control > span { flex: 1 0 100%; font-size: 12px; }
  .servings-control .portion-stepper { flex: 1; }
  .servings-control .portion-stepper b { min-width: auto; flex: 1; }
  .recipe-quick .card-action { min-height: 52px; font-size: 14px; }
  .guidance-grid { grid-template-columns: 1fr; }
  .recipe-actions { display: grid; gap: 9px; }
  .recipe-actions button { width: 100%; min-height: 48px; }
}

/* --- Einkauf: die Liste, die im Supermarkt funktionieren muss --------------
   Eine Hand hält das Telefon, die andere den Wagen. Abhaken muss mit dem
   Daumen gehen, ohne zu zielen. */
@media (max-width: 800px) {
  .shopping-row { gap: 10px; padding: 10px 12px; align-items: center; }
  .check-button { width: 44px; height: 44px; flex: 0 0 44px; font-size: 19px; }
  .shopping-label { font-size: 15px; }
  .need-amount { display: inline-block; margin-left: 6px; }
  .shopping-sources { margin-top: 3px; }
  .source-badge { font-size: 10px; }
  .delete-button { width: 40px; height: 40px; flex: 0 0 40px; }
  .shopping-form { gap: 8px; }
  .shopping-form input { flex: 1 1 100%; min-height: 48px; font-size: 16px; }
  .shopping-form button { flex: 1; min-height: 48px; }
  .shopping-actions { margin-top: 14px; }
  .shopping-actions button { width: 100%; min-height: 48px; }
}

/* --- Vorrat: Status und Menge einhändig ----------------------------------- */
@media (max-width: 800px) {
  .inventory-row { gap: 8px; padding: 10px 12px; }
  .inventory-name small { font-size: 11px; }
  .state-cycle { min-width: 62px; height: 44px; }
  .row-detail { width: 44px; height: 44px; }
  .inventory-row .delete-button { width: 40px; height: 40px; }
  .portion-stepper button { width: 44px; height: 44px; }
  .prepared-row { gap: 8px; padding: 10px 12px; }
}

/* --- Zubereiten-Dialog: der Ort, an dem der Hunger entscheidet ------------- */
@media (max-width: 560px) {
  .cook-item { flex-direction: column; align-items: stretch; gap: 9px; }
  .cook-item-amount { justify-content: space-between; }
  .cook-item-amount input { flex: 1; width: auto; min-height: 48px; font-size: 17px; }
  .cook-step { width: 52px; min-height: 48px; font-size: 20px; }
  .cook-unit { min-width: 62px; text-align: center; }
}
.remember-scope { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 12px; }
.remember-scope select { min-height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 13px; }
@media (max-width: 560px) {
  .remember-scope { flex-wrap: wrap; }
  .remember-scope select { flex: 1 1 100%; min-height: 48px; font-size: 16px; }
}

/* --- Kein waagerechter Überlauf, nirgends --------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
.view, .panel, .dashboard-grid, .inventory-list, .dish-library { min-width: 0; }

/* --- Kein Hover-Zustand, der auf dem Touchscreen kleben bleibt ------------- */
@media (hover: none) {
  .card-action:hover, .row-add:hover, .cook-step:hover,
  .suggestion-chip:hover, .undo-bar button:hover { background: inherit; }
  .card-action.primary:hover { background: var(--sage-dark); }
}

/* --- Bildschirmtastatur ----------------------------------------------------
   `--keyboard-inset` wird in app.js aus dem visualViewport berechnet. Solange
   die Tastatur oben ist, rücken die Dialogaktionen darüber – sonst tippt man in
   ein Feld und kommt nicht mehr an „Speichern". */
@media (max-width: 800px) {
  .keyboard-open dialog.food-dialog,
  .keyboard-open dialog.editor-dialog,
  .keyboard-open dialog.account-dialog {
    max-height: calc(100dvh - var(--keyboard-inset, 0px) - 12px);
  }
  .keyboard-open .dialog-actions {
    bottom: 0;
    padding-bottom: 12px;
  }
  /* Die Rückgängig-Leiste würde sonst unter der Tastatur verschwinden. */
  .keyboard-open .undo-bar { bottom: calc(var(--keyboard-inset, 0px) + 12px); }
}

/* --- Textknöpfe sind auch Knöpfe -------------------------------------------
   Gemessen auf einem 393-px-Bildschirm: „Alle ansehen →" war 98×16 Pixel,
   „Portion eintragen" 104×15. Das trifft man mit dem Daumen nicht, sondern
   daneben. Die sichtbare Gestaltung bleibt – nur die Trefferfläche wächst. */
.panel-heading button,
.link-action,
.quiet-action {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.panel-heading button::after,
.link-action::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px;
  width: 100%; height: 100%;
}

@media (max-width: 800px) {
  /* Auf dem Telefon zusätzlich sichtbar größer – dort ist Platz genug, weil
     die Karten ohnehin untereinander stehen. */
  .panel-heading button { min-height: 40px; padding-inline: 4px; }
  .link-action { min-height: 40px; }
  .quiet-action { min-height: 44px; }
  .hero-heading .quiet-action { min-height: 44px; }
}

/* --- Kleine Bildschirme: die Hauptaktion muss ohne Scrollen erreichbar sein --
   Auf einem iPhone SE (320×568) lag „Zubereiten" gemessen unter dem Rand: Bild,
   Überschrift, Zeile mit Zeit und Zutaten, Portionswahl – und dann war Schluss.
   Wer wissen will, ob er kochen kann, soll nicht erst wischen müssen. */
@media (max-width: 800px) and (max-height: 700px) {
  .recipe-hero { min-height: 0; height: 18vh; max-height: 18vh; }
  .recipe-detail { padding: 14px; }
  .recipe-detail h2 { font-size: 22px; margin: 2px 0 4px; }
  .recipe-detail .eyebrow { display: none; }
  .servings-control { margin: 10px 0 2px; padding: 9px 11px; }
  .servings-control > span { font-size: 11px; }
  .recipe-quick { margin: 10px 0 2px; }
}

/* Sehr schmal (320px): Die Portionswahl braucht die ganze Zeile für sich. */
@media (max-width: 360px) {
  /* Auf 320px passen Beschriftung und Stepper nicht nebeneinander. Der
     erklärende Kleintext entfällt dort – die Zahl steht ja daneben. */
  .servings-control { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; }
  .servings-control > span { flex: 1 0 100%; }
  .servings-control small { display: none; }
  .cook-item-amount input { width: auto; }
  .energy-switch button { font-size: 12px; padding-inline: 10px; }
  .topbar-logo { height: 18px; }
  .nav-item { font-size: 10px; }
}

/* --- Stückgewicht im Bestandsdialog -------------------------------------
   Zwei zusammengehörige Angaben („60 g“ und „Stück“) stehen nebeneinander,
   solange Platz ist. Auf dem Telefon rutschen sie untereinander, weil eine
   zweispaltige Zeile mit zwei Eingabefeldern dort nur eng wird. */
[data-piece-row] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 14px;
  align-items: end;
  margin: 12px 0;
}
[data-piece-row] .dialog-hint { grid-column: 1 / -1; margin: 0; }
.piece-input { display: flex; align-items: center; gap: 6px; }
.piece-input input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  [data-piece-row] { grid-template-columns: minmax(0, 1fr); }
}

/* --- Ankreuzfelder als echte Tippziele -----------------------------------
   Gemessen auf fünf Gerätebreiten: die Zeilen „Muss immer da sein“, „Kein
   Lebensmittel“ und „Diese Stückzahlen als meinen Standard merken“ waren
   341 Pixel breit, aber nur 20 hoch. Breit genug zum Treffen, flach genug
   zum Danebentippen – besonders beim Kochen mit einer Hand. Das Feld selbst
   wächst mit, damit auch der Kasten und nicht nur der Text trifft. */
label.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
label.checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* --- Suchfeld über die ganze Höhe ----------------------------------------
   Die Umrandung `.search` ist 48 Pixel hoch, das Eingabefeld darin aber nur
   21. Wer im Supermarkt oben oder unten in den Rahmen tippt, trifft nichts
   und die Tastatur bleibt zu. Das Feld füllt die Umrandung jetzt aus. */
.search input { align-self: stretch; min-height: 44px; }

/* --- Bewusst nicht angewendeter Standard ---------------------------------
   Erklärt, warum im Kuchen die Rezeptmenge steht und nicht die persönliche
   Portionsgröße – und bietet die Freigabe für genau dieses Gericht an. */
.cook-source.is-blocked {
  display: block;
  line-height: 1.45;
  opacity: .85;
}
.cook-source.is-blocked .link-action {
  font-size: inherit;
  white-space: normal;
  text-align: left;
}

/* --- Nicht bewertet ------------------------------------------------------
   Eigene Farbe für Aussagen, die es (noch) nicht gibt. Bewusst zurückhaltend:
   „nicht bewertet“ ist kein Warnhinweis, sondern eine ehrliche Leerstelle. */
.tag.freezer-unknown,
.tag.dog-unknown {
  background: rgba(120, 120, 120, .10);
  color: var(--ink-soft, #6b6b6b);
  border: 1px dashed rgba(120, 120, 120, .35);
}

/* Hinweis unter einem Formularfeld – erklärt, ohne sich vorzudrängen. */
.feld-hinweis { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }

/* Rest eintragen · Zubereitungszustand als Chips.
   Kompakt, damit der Dialog auf ein Telefon passt, ohne zu scrollen. */
.zustand-wahl { border: 0; padding: 0; margin: 14px 0 0; }
.zustand-wahl legend { padding: 0; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#prepared-state-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.zustand-knopf { position: relative; min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.78); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.zustand-knopf::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: 44px; min-height: 44px; width: 100%; height: 100%; }
.zustand-knopf.active { border-color: var(--sage); background: var(--sage); color: white; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.dialog-hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
/* Ein Rest hebt sich leicht ab – er ist der Grund, warum man hier hinschaut. */
.rest-row { background: rgba(183,191,168,.14); border-radius: 12px; padding: 8px 10px; }

/* Ein Rest lässt sich antippen, um ihn zu korrigieren. Er sieht trotzdem wie
   eine Zeile aus und nicht wie ein Knopf – der eigentliche Zweck ist Lesen. */
.rest-text { position: relative; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rest-text::after { content: ""; position: absolute; inset: -8px -4px; }
.rest-text:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Filterleiste · Gewichtung statt Verstecken.
   Der Council war eindeutig: Ein versteckter Filter ist ein toter Filter
   („ein Knopf, den ich vergesse"). Also bleiben alle sichtbar — aber die
   zwei, die wirklich benutzt werden, tragen mehr Gewicht als die zwölf,
   die es nicht tun. */
.filter-primaer > span { color: var(--ink); font-size: 12px; }
.filter-primaer button { min-height: 38px; font-size: 12.5px; font-weight: 700; }
.filter-leise { opacity: .82; }
.filter-leise > span { font-size: 10px; }
.filter-leise button { min-height: 28px; padding: 0 9px; font-size: 10.5px; font-weight: 600; }
.filter-leise button.active { opacity: 1; }
.filter-group:has(button.active) { opacity: 1; }

/* Aktive Filter: beim Namen genannt, einzeln abschaltbar, direkt über der
   Liste, die sie leer gemacht haben. Eine Zahl allein („3 Filter aktiv")
   sagt nicht welche drei und bietet keinen Weg zurück. */
.filter-result-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aktive-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.aktiv-chip { position: relative; min-height: 30px; padding: 0 10px; border: 1px solid var(--sage); border-radius: 99px; background: var(--sage); color: white; font-size: 11px; font-weight: 700; cursor: pointer; }
.aktiv-chip::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: 44px; min-height: 44px; width: 100%; height: 100%; }
.aktiv-chip span { opacity: .75; margin-left: 3px; }
.aktiv-chip:hover { background: var(--sage-dark); }
.dish-library.ist-leer { min-height: 0; }

/* ---------------------------------------------------------------------------
   Scrolltiefe auf dem Telefon
 
   Live gemessen am 27.08.2026 bei 430 px Breite: Die erste Gerichtekarte
   begann bei 820 von 831 Bildpunkten. 99 Prozent des Bildschirms waren voll,
   bevor ein einziges Gericht sichtbar wurde.
 
   Die Gewichtung der Filter hatte das NICHT gelöst — sie machte die Leiste
   leiser, aber nicht kürzer. Genau der Fehler, den das Red Team vorhergesagt
   hatte: etwas, das klüger aussieht, ohne das Problem zu lösen.
 
   Also gezielt kürzen. Ohne zu verstecken: Jeder Filter bleibt sichtbar, er
   steht nur dichter.
   --------------------------------------------------------------------------- */
@media (max-width: 800px) {
  /* Eine Überschrift, die immer dasselbe sagt, braucht keine 102 Bildpunkte. */
  #view-dishes .hero-heading { margin-bottom: 10px; }
  #view-dishes .hero-heading h1 { font-size: 24px; line-height: 1.15; }
  #view-dishes .hero-heading p { display: none; }

  /* Gruppenname neben die Knöpfe statt darüber – spart je Gruppe eine Zeile. */
  #dish-filter-options .filter-group { display: grid; grid-template-columns: 62px 1fr; align-items: start; gap: 8px; margin: 0 0 8px; }
  #dish-filter-options .filter-group > span { padding-top: 6px; text-align: right; }
  #dish-filter-options .filter-leise > span { padding-top: 4px; }
  #dish-filter-options .filter-group > div { gap: 5px; }

  /* Die selteneren Merkmale dichter, aber weiterhin alle sichtbar. */
  .filter-leise button { min-height: 26px; padding: 0 8px; }
  .filter-extras button { font-size: 10px; }

  .dish-filters { padding: 10px 12px; }
  .filter-result-line { margin-top: 6px; }
}