:root {
  --bg: #f3f7f4;
  --surface: #ffffff;
  --surface-2: #e9f3ed;
  --text: #17221d;
  --muted: #66736c;
  --primary: #1f6f55;
  --primary-dark: #15513e;
  --accent: #f3b33d;
  --danger: #b93636;
  --warning: #a96211;
  --border: #d7e2db;
  --shadow: 0 10px 28px rgba(22, 58, 43, .08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; padding-bottom: 92px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 18px 14px; background: rgba(243,247,244,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.app-header h1 { margin: 2px 0 0; font-size: clamp(1.25rem, 5vw, 1.8rem); }
.eyebrow { margin: 0; color: var(--primary); font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.sync-badge { white-space: nowrap; border-radius: 999px; padding: 7px 10px; font-size: .75rem; font-weight: 750; }
.sync-badge.local { background: #e7ece9; color: #4a5951; }
.sync-badge.ok { background: #d9f2e4; color: #155d3c; }
.sync-badge.pending { background: #fff0cf; color: #805000; }
main { width: min(1100px, 100%); margin: 0 auto; padding: 18px; }
.view { display: none; animation: fade .18s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: .4; transform: translateY(4px); } }
.hero-card { background: linear-gradient(135deg, #184f3e, #2e8567); color: white; border-radius: 24px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: var(--shadow); }
.hero-card .eyebrow { color: #bfefdb; }
.hero-card h2 { margin: 6px 0 8px; font-size: clamp(1.7rem, 6vw, 2.7rem); }
.hero-card p:not(.eyebrow) { margin: 0; opacity: .9; max-width: 650px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.stat-card, .panel, .sum-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-card { padding: 17px; display: grid; gap: 8px; }
.stat-card span { color: var(--muted); font-size: .86rem; }
.stat-card strong { font-size: 1.65rem; }
.stat-button { width: 100%; color: var(--text); font: inherit; text-align: left; cursor: pointer; appearance: none; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.stat-button small { color: var(--primary-dark); font-weight: 750; }
.stat-button:hover { border-color: #8bbba9; background: #fbfffd; transform: translateY(-1px); }
.stat-button:active { transform: scale(.985); }
.stat-button:focus-visible { outline: 3px solid rgba(31,111,85,.25); outline-offset: 2px; border-color: var(--primary); }
/* Version 1.5.2 – Übersichtsflächen öffnen die passenden App-Bereiche */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { padding: 18px; margin-bottom: 16px; }
.panel h3 { margin-top: 0; }
.panel-head, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-head h3, .section-head h2 { margin: 0; }
.section-head { margin-bottom: 16px; }
.section-head h2 { font-size: clamp(1.55rem, 6vw, 2.3rem); }
.sum-box { padding: 10px 14px; text-align: right; min-width: 155px; }
.sum-box span, .sum-box small { display: block; color: var(--muted); font-size: .78rem; }
.sum-box strong { display: block; font-size: 1.45rem; }
.primary, .secondary, .danger, .link-btn { border: 0; border-radius: 13px; padding: 11px 15px; font-weight: 750; }
.primary { background: var(--primary); color: white; }
.primary:hover { background: var(--primary-dark); }
.secondary { background: var(--surface-2); color: var(--primary-dark); border: 1px solid #c9ddd2; }
.danger { background: #f9dada; color: #8b2424; }
.link-btn { background: transparent; color: var(--primary); padding: 6px; }
.big { min-height: 54px; padding-inline: 20px; }
.form-panel summary { font-weight: 800; cursor: pointer; }
.form-panel[open] summary { margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
label { display: grid; gap: 6px; color: #34433b; font-size: .88rem; font-weight: 680; }
input, select, textarea { width: 100%; border: 1px solid #cbd8d0; border-radius: 12px; padding: 12px; color: var(--text); background: white; min-height: 45px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(31,111,85,.16); border-color: var(--primary); }
.span-2 { grid-column: span 2; }
.checkline { display: flex; grid-auto-flow: column; justify-content: start; align-items: center; gap: 9px; min-height: 45px; }
.checkline input { width: 22px; height: 22px; min-height: 0; }
.button-row { display: flex; gap: 10px; align-items: center; }
.wrap { flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; margin: 14px 0; }
.toolbar input { flex: 1; }
.card-list { display: grid; gap: 12px; }
.item-card { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: 16px; padding: 15px; box-shadow: var(--shadow); }
.item-card.warning { border-left-color: var(--accent); }
.item-card.danger-card { border-left-color: var(--danger); }
.item-card.done { opacity: .58; }
.item-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.item-top h3 { margin: 0 0 4px; font-size: 1.12rem; }
.item-meta { color: var(--muted); font-size: .83rem; line-height: 1.5; }
.item-price { text-align: right; font-weight: 800; white-space: nowrap; }
.item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.item-actions button { border: 0; border-radius: 10px; padding: 8px 10px; font-weight: 700; background: var(--surface-2); color: var(--primary-dark); }
.item-actions button.danger-mini { color: var(--danger); background: #fae5e5; }
.badge { display: inline-block; border-radius: 999px; padding: 4px 8px; font-size: .72rem; font-weight: 780; margin: 4px 4px 0 0; background: var(--surface-2); color: var(--primary-dark); }
.badge.warn { background: #fff0d5; color: var(--warning); }
.badge.red { background: #f9dada; color: #922a2a; }
.badge.gray { background: #ecefed; color: #58625d; }
.hint { background: #edf5f0; border: 1px solid #d4e6dc; color: #365e4c; padding: 10px 12px; border-radius: 12px; font-size: .84rem; }
.empty-state { color: var(--muted); padding: 14px 0; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.stack { display: grid; gap: 10px; }

.scanner-guide { display: grid; gap: 3px; padding: 11px 12px; border-radius: 12px; background: #fff7e5; border: 1px solid #efd7a4; color: #624b20; }
.scanner-guide span { font-size: .82rem; line-height: 1.4; }
.scanner-box { position: relative; min-height: 300px; border: 2px solid #8fb4a2; border-radius: 16px; overflow: hidden; background: #101713; margin: 12px 0; }
.scanner-box video { width: 100% !important; height: 100% !important; min-height: 300px; object-fit: cover !important; }
.scanner-box canvas { max-width: 100%; }
.scanner-box.running::before { content: ""; pointer-events: none; position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(88%, 520px); height: min(38%, 150px); border: 3px solid rgba(255,255,255,.92); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.22); }
.scanner-box.running::after { content: ""; pointer-events: none; position: absolute; z-index: 9; left: 50%; top: 50%; width: min(82%, 480px); height: 2px; background: #ef4b3f; box-shadow: 0 0 8px rgba(239,75,63,.9); animation: scanline 2s ease-in-out infinite alternate; }
@keyframes scanline { from { transform: translate(-50%, -50px); } to { transform: translate(-50%, 50px); } }
.scanner-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 10px 0; }
.scanner-controls label { margin: 0; }
.scanner-controls select, .scanner-controls input[type="range"] { width: 100%; }
#zoomWrap { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
#zoomWrap > :first-child { grid-column: 1 / -1; }
.photo-scan-button { display: grid; gap: 3px; cursor: pointer; margin-top: 12px; border-radius: 14px; padding: 13px 14px; background: var(--surface-2); border: 1px solid #bdd6c9; color: var(--primary-dark); font-weight: 800; }
.photo-scan-button small { color: var(--muted); font-weight: 500; line-height: 1.35; }
.photo-scan-button input { display: none; }

.result-panel { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.result-panel img { width: 110px; height: 110px; object-fit: contain; border-radius: 12px; background: #f5f5f5; }
.result-panel .result-body h3 { margin: 0 0 5px; }
.recipe-options { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.recipe-options label { min-width: 160px; }
.recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.recipe-card { background: white; border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.recipe-card h3 { margin: 0 0 5px; }
.recipe-card ul, .recipe-card ol { padding-left: 20px; line-height: 1.55; }
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.report-button { appearance: none; border: 1px solid var(--border); background: white; border-radius: 16px; padding: 17px; text-align: left; color: var(--text); box-shadow: var(--shadow); display: grid; gap: 5px; }
.report-button strong { font-size: 1.02rem; }
.report-button span { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.file-label { cursor: pointer; }
.file-label input { display: none; }
.history-list { display: grid; gap: 9px; }
.history-row { border-bottom: 1px solid var(--border); padding-bottom: 9px; display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; }
.history-row:last-child { border: 0; }
.danger-zone { border-color: #efc5c5; }
.version { text-align: center; color: var(--muted); font-size: .78rem; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 7px 7px max(7px, env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-top: 1px solid var(--border); }
.bottom-nav button { border: 0; background: transparent; color: #59665f; font-size: .68rem; padding: 6px 2px; border-radius: 10px; }
.bottom-nav button span { display: block; font-size: 1.25rem; margin-bottom: 2px; }
.bottom-nav button.active { background: var(--surface-2); color: var(--primary-dark); font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: 105px; z-index: 50; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: #17221d; color: white; padding: 11px 15px; border-radius: 12px; max-width: min(90vw, 520px); text-align: center; transition: .22s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hidden { display: none !important; }
hr { border: 0; border-top: 1px solid var(--border); width: 100%; }
@media (max-width: 780px) {
  main { padding: 13px; }
  .hero-card { align-items: stretch; flex-direction: column; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col, .recipe-grid, .report-grid { grid-template-columns: 1fr; }
  .scanner-controls { grid-template-columns: 1fr; }
  .scanner-box, .scanner-box video { min-height: 270px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .section-head { align-items: flex-start; }
  .result-panel { grid-template-columns: 80px 1fr; }
  .result-panel img { width: 80px; height: 80px; }
  .bottom-nav { overflow-x: auto; grid-template-columns: repeat(8, minmax(62px, 1fr)); }
}
@media print {
  .app-header, .bottom-nav, button, form, .toolbar, .scanner-box { display: none !important; }
  body { background: white; padding: 0; }
  main { max-width: none; padding: 0; }
  .view { display: none !important; }
  #view-reports { display: block !important; }
  .report-grid { display: none; }
  .panel { box-shadow: none; }
}

/* Version 1.2.0: Produktbilder, Schnellaufnahme und Speichern */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-save { border: 0; border-radius: 12px; padding: 9px 13px; background: var(--primary); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(31,111,85,.18); }
.header-save:disabled { opacity: .65; cursor: wait; }
.item-main { min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.product-thumb { flex: 0 0 auto; width: 62px; height: 62px; object-fit: contain; border-radius: 12px; border: 1px solid var(--border); background: #f5f7f6; }
.product-thumb.placeholder { display: grid; place-items: center; color: var(--muted); font-size: 1.35rem; font-weight: 800; }
.quick-entry { margin-top: 14px; padding: 14px; border-radius: 14px; background: #f5faf7; border: 1px solid #d5e7dd; }
.quick-entry h4 { margin: 0 0 10px; font-size: 1rem; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.quick-grid label { font-size: .8rem; }
.quick-grid input, .quick-grid select { min-height: 42px; padding: 9px 10px; }
.save-note { margin-top: 8px; font-size: .78rem; color: var(--muted); }
@media (max-width: 780px) {
  .app-header { align-items: flex-start; }
  .header-actions { flex-direction: column; align-items: stretch; }
  .header-save { padding: 8px 11px; }
  .sync-badge { text-align: center; }
  .product-thumb { width: 54px; height: 54px; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .quick-grid .wide { grid-column: span 2; }
}

/* Scanner 1.3.0 */
.scanner-box video { display:block; width:100%; min-height:300px; background:#101713; object-fit:cover; }
.scanner-box:not(.running) video { opacity:.28; }
.photo-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.secondary-photo { background:#f5f8f6; border-color:#b7cbc1; }
.barcode-photo-preview { display:block; width:100%; max-height:260px; object-fit:contain; margin-top:12px; border-radius:12px; border:1px solid var(--line); background:#fff; }
@media (max-width:720px){ .photo-actions{grid-template-columns:1fr;} }

/* Version 1.4.0 – vereinfachter Einkauf und genaue Rezeptmengen */
.item-quantity { text-align: right; font-weight: 850; white-space: nowrap; }
.home-check { margin: 12px 0; }
.home-check > p { margin: 0 0 9px; }
.recommendation { display: grid; gap: 3px; border-radius: 13px; padding: 11px 12px; border: 1px solid var(--border); }
.recommendation span { font-size: .84rem; line-height: 1.4; }
.recommendation.good { background: #e4f5eb; border-color: #b9dfca; color: #185c3d; }
.recommendation.warn { background: #fff2d9; border-color: #eed19b; color: #795015; }
.recommendation.stop { background: #fae1e1; border-color: #e8b9b9; color: #862d2d; }
.recommendation.neutral { background: #edf3f0; color: #38584a; }
.quick-entry.compact { display: grid; gap: 12px; }
.quick-entry.compact > label { max-width: 360px; }
.scan-save-amount { margin: 0; color: var(--muted); }
.unknown-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.result-placeholder { width: 110px; height: 110px; font-size: 2rem; }
.device-panel h3 { margin-bottom: 4px; }
.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 14px; }
.device-grid .checkline { min-height: 38px; }
.recipe-card { display: flex; flex-direction: column; }
.recipe-card .recipe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.ingredient-missing, .ingredient-basic { display: inline-block; margin-left: 6px; border-radius: 999px; padding: 2px 7px; font-size: .7rem; font-weight: 750; }
.ingredient-missing { background: #fff0d5; color: var(--warning); }
.ingredient-basic { background: var(--surface-2); color: var(--primary-dark); }
@media (max-width: 780px) {
  .device-grid { grid-template-columns: 1fr 1fr; }
  .result-placeholder { width: 80px; height: 80px; }
  .unknown-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .device-grid { grid-template-columns: 1fr; }
  .item-top { align-items: flex-start; }
  .item-quantity { font-size: .9rem; }
}


/* Version 1.5.1 – Produktauswahl für die ChatGPT-Rezept-PDF */
.next-expiry-panel { border-left: 6px solid var(--accent); }
.next-expiry-panel > .eyebrow { margin-bottom: 10px; }
#nextExpiryInfo { display: grid; gap: 10px; }
.next-expiry-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.next-expiry-item:last-child { border-bottom: 0; }
.next-expiry-item .product-thumb { width: 54px; height: 54px; }
.next-expiry-item div { display: grid; gap: 3px; }
.next-expiry-item span { color: var(--muted); font-size: .84rem; }
.next-expiry-item.no-expiry { background: #fff8e8; border: 1px solid #efd79e; border-radius: 12px; padding: 9px; }
.recipe-pdf-options h3 { margin-top: 0; }
.kitchen-device-summary { margin-top: 14px; display: grid; gap: 5px; padding: 12px 14px; border-radius: 13px; background: var(--surface-2); border: 1px solid #cadfd4; }
.kitchen-device-summary span { color: var(--muted); line-height: 1.5; font-size: .86rem; }
.recipe-selection-toolbar input { min-width: 220px; }
.compact-panel { padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.compact-panel span { color: var(--muted); font-size: .84rem; }
.recipe-selection-list { display: grid; gap: 11px; margin: 14px 0 88px; }
.recipe-select-card { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; background: var(--surface); border: 2px solid var(--border); border-left: 6px solid var(--primary); border-radius: 16px; padding: 13px 50px 13px 13px; box-shadow: var(--shadow); transition: .16s ease; }
.recipe-select-card.soon { border-left-color: var(--accent); }
.recipe-select-card.no-expiry { border-left-color: #c28a19; background: #fff8e8; }
.recipe-select-card.urgent { border-left-color: #d88116; background: #fffaf1; }
.recipe-select-card.expired { border-left-color: var(--danger); background: #fff5f5; }
.recipe-select-card.selected { border-color: var(--primary); background: #eef8f3; }
.recipe-select-card > input { position: absolute; opacity: 0; pointer-events: none; }
.recipe-select-main { min-width: 0; display: flex; align-items: center; gap: 12px; }
.recipe-select-main h3 { margin: 0 0 3px; font-size: 1.04rem; }
.recipe-select-main p { margin: 0; color: var(--text); font-weight: 750; }
.recipe-select-main .expiry-line { display: block; color: var(--muted); font-size: .82rem; margin-top: 3px; }
.recipe-select-main small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.select-mark { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e7ece9; color: transparent; font-size: 1.1rem; font-weight: 900; }
.recipe-select-card.selected .select-mark { background: var(--primary); color: #fff; }
.sticky-pdf-action { position: sticky; bottom: 82px; z-index: 20; padding: 10px 0 max(4px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--background) 24%); }
.sticky-pdf-action button { width: 100%; }
@media (max-width: 620px) {
  .compact-panel { align-items: flex-start; flex-direction: column; }
  .recipe-select-card { padding-right: 46px; }
  .recipe-select-main { align-items: flex-start; }
  .recipe-select-main .product-thumb { width: 58px; height: 58px; }
}

/* Version 1.5.3 – MHD-Daumenauswahl und Stückzahl direkt nach dem Scan */
.scan-date-card,
.scan-count-card {
  padding: 14px;
  border: 1px solid #cfe1d7;
  border-radius: 14px;
  background: #fff;
}
.scan-field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.scan-field-head strong { display: block; font-size: 1rem; }
.scan-field-head span { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.date-wheel {
  display: grid;
  grid-template-columns: .8fr 1.35fr 1fr;
  gap: 8px;
}
.date-wheel label { display: grid; gap: 5px; font-size: .78rem; color: var(--muted); }
.date-wheel select {
  width: 100%;
  min-height: 54px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #b9d1c4;
  background: #f8fbf9;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  touch-action: manipulation;
}
.count-stepper {
  display: grid;
  grid-template-columns: 58px minmax(82px, 130px) 58px;
  justify-content: start;
  gap: 8px;
}
.count-stepper button,
.count-stepper input {
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid #b9d1c4;
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
}
.count-stepper button { background: #e7f3ed; color: var(--green); }
.count-stepper input { background: #fff; color: var(--text); padding: 0 8px; }
.count-stepper input::-webkit-inner-spin-button,
.count-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.scan-save-amount { padding: 10px 12px; border-radius: 11px; background: #edf6f1; }
@media (max-width: 520px) {
  .date-wheel { grid-template-columns: .75fr 1.25fr .95fr; gap: 6px; }
  .date-wheel select { min-height: 58px; padding: 0 7px; font-size: .98rem; }
  .scan-field-head { align-items: center; }
  .count-stepper { grid-template-columns: 60px 90px 60px; }
}

/* Version 1.5.4 – MHD-Picker startet nach jedem Scan mit dem heutigen Kaufdatum. */

/* Version 1.5.5: kompakte Scanner-Oberfläche – Scannertechnik unverändert */
.scanner-main-panel { display: grid; gap: 10px; }
.scanner-main-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.scanner-main-head h3 { margin: 0 0 4px; }
.scanner-main-head p { margin: 0; }
.scanner-start-btn { flex: 0 0 auto; min-height: 48px; padding-inline: 18px; }

/* Das schwarze Kamerafeld nimmt nur Platz ein, solange die Kamera wirklich läuft. */
.scanner-box { min-height: 0; height: 0; margin: 0; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: height .18s ease, opacity .18s ease, margin .18s ease; }
.scanner-box video { min-height: 0 !important; height: 100% !important; }
.scanner-box.running { height: clamp(190px, 32vw, 260px); min-height: 0; margin: 6px 0 2px; border-width: 2px; opacity: 1; pointer-events: auto; }
.scanner-box.running video { min-height: 0 !important; height: 100% !important; }
.scanner-live-actions { margin-top: 0; }
.scanner-status-compact { margin: 0; }
.scanner-more { border-top: 1px solid var(--border); padding-top: 10px; }
.scanner-more > summary { cursor: pointer; color: var(--primary-dark); font-weight: 800; padding: 5px 0; }
.scanner-more[open] > summary { margin-bottom: 9px; }
.manual-ean-compact { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.manual-ean-compact h4 { margin: 0 0 8px; }
.result-panel { scroll-margin-top: 12px; }

@media (max-width: 780px) {
  .scanner-main-head { align-items: stretch; }
  .scanner-main-head > div { min-width: 0; }
  .scanner-start-btn { min-width: 126px; padding-inline: 12px; }
  .scanner-box.running { height: clamp(170px, 48vw, 215px); min-height: 0; }
  .scanner-box.running::before { width: 91%; height: 46%; }
  .scanner-box.running::after { width: 84%; }
  .scanner-live-actions button { flex: 1 1 auto; }
}


/* Version 1.5.6 – Scanner-Einstieg direkt in Einkauf / Was noch fehlt */
#restockScannerBtn { flex: 0 0 auto; min-height: 46px; }
@media (max-width: 520px) {
  #view-shopping > .section-head { flex-wrap: wrap; }
  #restockScannerBtn { width: 100%; }
}

/* Version 1.5.7 – Nährwert-Ampel nach erfolgreichem Scan */
.nutrition-light { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; margin:11px 0 12px; padding:11px 12px; border:1px solid var(--border); border-radius:14px; background:#f5f7f6; }
.nutrition-light > div:last-child { display:grid; gap:3px; min-width:0; }
.nutrition-light strong { font-size:.95rem; line-height:1.25; }
.nutrition-light span { font-size:.8rem; line-height:1.35; }
.traffic-dots { display:grid; grid-template-columns:repeat(4,18px); gap:5px; align-items:center; }
.traffic-dots > span { width:18px; height:18px; border-radius:50%; background:#d6dcda; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.nutrition-light.green .dot-green { background:#2e9d57; box-shadow:0 0 0 4px rgba(46,157,87,.15); }
.nutrition-light.yellow .dot-yellow { background:#e0b62c; box-shadow:0 0 0 4px rgba(224,182,44,.18); }
.nutrition-light.orange .dot-orange { background:#e47c2a; box-shadow:0 0 0 4px rgba(228,124,42,.16); }
.nutrition-light.red .dot-red { background:#d94b45; box-shadow:0 0 0 4px rgba(217,75,69,.14); }
.nutrition-light.green { background:#edf8f1; border-color:#bedfc9; color:#185c3d; }
.nutrition-light.yellow { background:#fff9e5; border-color:#ead99a; color:#6d5710; }
.nutrition-light.orange { background:#fff0e2; border-color:#efc69f; color:#874810; }
.nutrition-light.red { background:#fdecec; border-color:#eabcbc; color:#862d2d; }
.nutrition-light.unknown { background:#f1f4f3; color:#506158; }
.thumb-wrap { position:relative; display:inline-flex; flex:0 0 auto; }
.thumb-wrap .product-thumb { flex:0 0 auto; }
.nutrition-dot { position:absolute; right:-3px; bottom:-3px; width:17px; height:17px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.18); }
.nutrition-dot.green { background:#2e9d57; }
.nutrition-dot.yellow { background:#e0b62c; }
.nutrition-dot.orange { background:#e47c2a; }
.nutrition-dot.red { background:#d94b45; }
.badge.nutrition-mini.green { background:#e3f4e9; color:#185c3d; }
.badge.nutrition-mini.yellow { background:#fff5cf; color:#6d5710; }
.badge.nutrition-mini.orange { background:#ffe8d2; color:#874810; }
.badge.nutrition-mini.red { background:#f9dddd; color:#862d2d; }
.badge.nutrition-mini.unknown { background:#eef1f0; color:#5a6861; }
@media (max-width: 430px) {
  .nutrition-light { grid-template-columns:1fr; gap:8px; }
  .traffic-dots { grid-template-columns:repeat(4,20px); }
  .traffic-dots > span { width:20px; height:20px; }
}


/* Version 1.5.8 – Verbrauch direkt per EAN aus dem Vorrat ausbuchen */
.stock-scan-actions { justify-content:flex-end; }
.consume-lots { display:grid; gap:8px; margin:12px 0; }
.consume-lot { display:block; border:1px solid var(--border); border-radius:14px; background:#fff; cursor:pointer; }
.consume-lot.recommended { border-color:#8fc6aa; background:#f2faf5; }
.consume-lot > input { position:absolute; opacity:0; pointer-events:none; }
.consume-lot > span { display:flex; align-items:center; gap:11px; padding:10px 12px; }
.consume-lot:has(input:checked) { outline:3px solid rgba(31,111,85,.16); border-color:var(--primary); }
.consume-lot-copy { display:grid; gap:3px; min-width:0; }
.consume-lot-copy small { color:var(--muted); }
.consume-lot-copy em { width:max-content; max-width:100%; padding:3px 8px; border-radius:999px; background:#dff1e6; color:#185c3d; font-size:.72rem; font-style:normal; font-weight:800; }
.consume-actions > .primary { width:max-content; max-width:100%; }
.consume-partial { display:grid; grid-template-columns:minmax(120px,180px) auto minmax(150px,max-content); gap:8px; align-items:end; }
.consume-partial label { margin:0; }
.consume-partial #consumeUnitLabel { min-height:46px; display:flex; align-items:center; font-weight:800; }
@media (max-width:520px) {
  #view-stock > .section-head { flex-wrap:wrap; }
  .stock-scan-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .stock-scan-actions button { width:100%; }
  .consume-partial { grid-template-columns:1fr auto; }
  .consume-partial button { grid-column:1 / -1; width:100%; }
  .consume-actions > .primary { width:100%; }
}

/* Version 1.5.9 – Einkaufsliste zeigt Packungs-/Stückzahl statt Gesamtgramm */
.item-quantity { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.item-quantity strong { font-size:1.12rem; line-height:1; }
.item-quantity small { font-size:.68rem; color:var(--muted); font-weight:700; }
.restock-count-card { margin-top:4px; }

/* Version 1.5.10 – Scan-Anzahl klar als Stück/Packungen und zuletzt gescannte Einkaufsartikel immer oben. Scannertechnik unverändert. */


/* Version 1.6.0 – einfache Komfortfunktionen ohne Änderung der Scannertechnik */
.header-undo { border:0; border-radius:14px; padding:9px 12px; background:#e5f0eb; color:var(--primary-dark); font-weight:800; }
.header-undo:disabled { opacity:.45; }
.compact-favorites { margin-top:12px; padding:14px; }
.compact-favorites h3 { margin:0; }
.favorite-chips { display:flex; gap:8px; flex-wrap:wrap; }
.favorite-chip { border:1px solid #b9d5c8; border-radius:999px; background:#f2faf6; color:var(--primary-dark); padding:9px 12px; font-weight:800; }
.favorite-chip span { margin-left:5px; font-size:1.05rem; }
.badge.opened-badge { background:#e4f2ff; color:#245d7b; }
.badge.favorite-badge { background:#fff3c9; color:#75580c; }
.recipe-user-settings { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.recipe-user-settings label { display:grid; gap:6px; font-weight:750; }
.recipe-user-settings small { color:var(--muted); font-weight:500; line-height:1.35; }
.recipe-user-settings textarea { min-height:86px; }
@media (max-width:620px) {
  .header-actions { gap:6px; }
  .header-undo { padding:8px 10px; font-size:.78rem; }
  .recipe-user-settings { grid-template-columns:1fr; }
  .recipe-user-settings .span-2 { grid-column:auto; }
}


/* Version 1.6.1 – einfache Lagerplatzverwaltung */
.location-scan-btn{border-color:#24735c}
.storage-location-panel{margin-bottom:16px}
.storage-location-form{align-items:end}
.location-list{display:grid;gap:8px;margin-top:14px}
.location-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line,#d9e5df);border-radius:14px;background:rgba(255,255,255,.55)}
.location-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.location-row strong{overflow-wrap:anywhere}
.location-row small{color:var(--muted,#68776f)}
.location-row button:disabled{opacity:.42;cursor:not-allowed}
#locateLocation{min-height:48px}
@media(max-width:680px){.stock-scan-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.stock-scan-actions .primary{grid-column:1/-1}.storage-location-form{grid-template-columns:1fr}.storage-location-form label,.storage-location-form button{grid-column:1/-1}}


/* Version 1.7.0 – offizieller Nutri-Score A–E und optionale persönliche Ernährung */
.nutrition-stat strong { font-size:1.35rem; }
.nutriscore-scale { display:flex; align-items:center; gap:3px; min-width:max-content; }
.nutri-cell { width:34px; height:30px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:.95rem; opacity:.38; transform:skew(-8deg); border-radius:4px; }
.nutri-cell.grade-a { background:#038141; }
.nutri-cell.grade-b { background:#85bb2f; }
.nutri-cell.grade-c { background:#fecb02; color:#222; }
.nutri-cell.grade-d { background:#ee8100; }
.nutri-cell.grade-e { background:#e63e11; }
.nutri-cell.active { opacity:1; transform:skew(-8deg) scale(1.16); box-shadow:0 2px 7px rgba(0,0,0,.22); z-index:1; }
.nutrition-light.grade-a { background:#edf8f1; border-color:#b9ddc8; color:#185c3d; }
.nutrition-light.grade-b { background:#f3f9e8; border-color:#d1e2a7; color:#466a17; }
.nutrition-light.grade-c { background:#fff9df; border-color:#eadb97; color:#6e5711; }
.nutrition-light.grade-d { background:#fff0e0; border-color:#efc38d; color:#81450e; }
.nutrition-light.grade-e { background:#fde9e4; border-color:#eab5a7; color:#862f20; }
.nutrition-dot { width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.66rem; font-weight:900; border-width:2px; }
.nutrition-dot.grade-a { background:#038141; }
.nutrition-dot.grade-b { background:#85bb2f; }
.nutrition-dot.grade-c { background:#fecb02; color:#222; }
.nutrition-dot.grade-d { background:#ee8100; }
.nutrition-dot.grade-e { background:#e63e11; }
.badge.nutrition-mini.grade-a { background:#e1f2e8; color:#175a3b; }
.badge.nutrition-mini.grade-b { background:#edf6d9; color:#466a17; }
.badge.nutrition-mini.grade-c { background:#fff4c6; color:#6e5711; }
.badge.nutrition-mini.grade-d { background:#ffe7cc; color:#81450e; }
.badge.nutrition-mini.grade-e { background:#f9dcd4; color:#862f20; }
.consume-profile-card { margin:12px 0; padding:12px; border-radius:14px; border:1px solid #cfe0d6; background:#f6fbf8; display:grid; gap:6px; }
.consume-profile-card small { color:var(--muted); line-height:1.4; }
.nutrition-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.nutrition-summary-card { background:#fff; border:1px solid var(--border); border-radius:15px; padding:14px; box-shadow:var(--shadow); display:grid; gap:6px; }
.nutrition-summary-card span { color:var(--muted); font-size:.78rem; }
.nutrition-summary-card strong { font-size:1.15rem; }
.nutrition-summary-card.primary-total { background:#eaf5ef; border-color:#bcdaca; }
.nutrition-entry-list { display:grid; gap:9px; }
.nutrition-entry { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.nutrition-entry:last-child { border-bottom:0; }
.nutrition-entry > div { display:grid; gap:3px; min-width:0; }
.nutrition-entry small, .nutrition-entry em { color:var(--muted); font-size:.77rem; font-style:normal; line-height:1.4; }
.profile-list { display:grid; gap:8px; margin-top:14px; }
.profile-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.profile-row span { display:grid; gap:2px; }
.profile-row small { color:var(--muted); font-size:.72rem; }
.profile-row .danger-mini, .nutrition-entry .danger-mini { border:0; border-radius:10px; padding:8px 10px; color:var(--danger); background:#fae5e5; font-weight:700; }
.profile-add-form input { flex:1; min-width:180px; }
@media (max-width:700px) { .nutrition-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { .nutriscore-scale { gap:2px; } .nutri-cell { width:29px; height:27px; } .nutrition-entry { grid-template-columns:auto 1fr; } .nutrition-entry > button { grid-column:2; justify-self:start; } }

/* Version 1.7.1 – schnelle Ernährungserfassung per Scanner/Barcode-Foto */
.nutrition-quick-add .panel-head{margin-bottom:.75rem}
.nutrition-capture-actions{gap:.65rem}
.nutrition-capture-actions button{min-height:48px;flex:1 1 180px}
.nutrition-scan-entry{display:grid;gap:.8rem}
.nutrition-scan-preview{margin:.15rem 0 .25rem}
.nutrition-scan-preview strong,.nutrition-scan-preview span{display:block}
@media (max-width:640px){
  .nutrition-capture-actions{display:grid;grid-template-columns:1fr 1fr}
  .nutrition-capture-actions button{width:100%;padding:.8rem .65rem}
}


/* Version 1.7.2 – Ernährung direkt aus dem Vorrat */
.stock-nutrition-panel{border:2px solid #cfe2d7;background:#f8fcfa;margin:0 0 14px}
.stock-nutrition-product{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:12px}
.stock-nutrition-product h3{margin:0 0 4px}
.stock-nutrition-unit{align-self:end;padding:0 0 12px;font-weight:800;color:var(--muted)}
.nutrition-stock-btn{background:#e8f4ee!important;color:#155b3a!important;border-color:#bad8c8!important}
@media(max-width:430px){.stock-nutrition-panel .panel-head{align-items:flex-start}.stock-nutrition-panel .consume-partial{grid-template-columns:1fr auto}}

/* Version 1.7.3 – persönliche Tagesziele */
.nutrition-goals-panel{border:1px solid #cfe0d6}
.nutrition-goals-editor{display:grid;gap:10px;margin:12px 0}
.goal-editor-row{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(120px,.8fr) minmax(105px,.7fr) minmax(105px,.7fr);gap:9px;align-items:end;padding:10px;border:1px solid var(--border);border-radius:13px;background:#fafcfb}
.goal-editor-row label{margin:0}
.goal-enabled{display:grid!important;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.goal-enabled input{grid-row:1/3}
.goal-enabled small{color:var(--muted);font-size:.73rem}
.goal-progress{margin-top:7px;display:grid;gap:5px}
.goal-progress.hidden{display:none}
.goal-progress-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;font-size:.7rem;line-height:1.25;color:var(--muted)}
.goal-progress-head strong{font-size:.7rem!important;text-align:right;color:inherit}
.goal-bar{height:7px;border-radius:999px;background:#e7ece9;overflow:hidden}
.goal-bar i{display:block;height:100%;border-radius:inherit;background:#5d8f74;transition:width .2s ease}
.goal-progress.green .goal-bar i{background:#2e9d57}.goal-progress.green .goal-progress-head strong{color:#207342}
.goal-progress.orange .goal-bar i{background:#e78924}.goal-progress.orange .goal-progress-head strong{color:#965610}
.goal-progress.red .goal-bar i{background:#d84a43}.goal-progress.red .goal-progress-head strong{color:#a32e29}
.goal-progress.open .goal-bar i{background:#4e83b8}.goal-progress.open .goal-progress-head strong{color:#315f8c}
.goal-progress.off .goal-bar i{background:#aab5af}
@media(max-width:700px){.goal-editor-row{grid-template-columns:1fr 1fr}.goal-enabled{grid-column:1/-1}.goal-editor-row .hidden{display:none}}
@media(max-width:430px){.goal-editor-row{grid-template-columns:1fr}.goal-enabled{grid-column:auto}.goal-progress-head{display:grid}.goal-progress-head strong{text-align:left}}


/* Version 1.7.4 – Hunger: Vorrat + Tagesziele */
.hunger-stat{background:linear-gradient(145deg,#fff8e8,#ffffff);border-color:#ead5a4}
.hunger-stat strong{font-size:1.05rem;line-height:1.15}
.hunger-button{background:#fff4d9;color:#644718;border:1px solid #e4c47a;font-weight:850;min-height:48px;flex:1 1 240px;border-radius:13px;padding:.75rem 1rem}
.hunger-panel{border:2px solid #ead6a7;background:linear-gradient(180deg,#fffdf7,#fff)}
.hunger-panel-head{align-items:flex-start}
.hunger-controls{margin:10px 0 12px}
.hunger-remaining{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 10px}
.hunger-budget{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;font-size:.78rem;font-weight:800;border:1px solid var(--border);background:#f2f5f3}
.hunger-budget.green{background:#e5f5eb;border-color:#b8ddc5;color:#185b3b}
.hunger-budget.orange{background:#fff0dc;border-color:#efc58c;color:#81460f}
.hunger-budget.red{background:#fde8e5;border-color:#e9b7ad;color:#842e22}
.hunger-budget.open{background:#edf3f9;border-color:#cbd9e5;color:#34536b}
.hunger-suggestion-list{display:grid;gap:10px;margin-top:12px}
.hunger-suggestion{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 2px 10px rgba(30,55,44,.05)}
.hunger-suggestion.top-pick{border-color:#c9a84f;background:#fffaf0}
.hunger-suggestion-copy{min-width:0}
.hunger-suggestion-copy h4{margin:2px 0 4px;font-size:1rem}
.hunger-suggestion-copy p{margin:0 0 3px;font-size:.84rem;line-height:1.4}
.hunger-suggestion-copy small{display:block;color:var(--muted);font-size:.76rem;line-height:1.4}
.hunger-rank{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;font-weight:900;color:#8b6718}
.hunger-eat-btn{white-space:nowrap;min-height:44px}
.hunger-skipped{margin:8px 2px 0}
@media(max-width:600px){
  .hunger-suggestion{grid-template-columns:auto 1fr}
  .hunger-eat-btn{grid-column:1/-1;width:100%}
  .hunger-panel-head{display:grid;grid-template-columns:1fr;gap:8px}
  .hunger-panel-head>button{justify-self:start}
}


/* Version 1.7.5 – frei eintragbare persönliche Profilhinweise */
.profile-guidance-panel textarea{width:100%;margin-top:.45rem;min-height:7rem}
.profile-food-guidance{margin:.8rem 0;padding:.85rem 1rem;border-radius:16px;border:1px solid var(--line);background:var(--panel-2,#f7f8fa)}
.profile-food-guidance .profile-guidance-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.45rem}
.profile-food-guidance .profile-guidance-head strong{font-size:.92rem}
.profile-food-guidance .profile-guidance-head span{font-weight:750;font-size:1.02rem}
.profile-food-guidance ul{margin:.35rem 0 .45rem;padding-left:1.15rem;display:grid;gap:.25rem}
.profile-food-guidance li{font-size:.9rem;line-height:1.35}
.profile-food-guidance small{display:block;opacity:.78;line-height:1.35}
.profile-food-guidance.green{border-color:#8fc9a0;background:#eef9f1}
.profile-food-guidance.orange{border-color:#e0ae5f;background:#fff7e7}
.profile-food-guidance.red{border-color:#e19a9a;background:#fff0f0}
.profile-food-guidance.neutral{border-color:#b8c1cc;background:#f6f7f9}
@media (prefers-color-scheme:dark){
  .profile-food-guidance.green{background:#12291a}.profile-food-guidance.orange{background:#332611}.profile-food-guidance.red{background:#321717}.profile-food-guidance.neutral{background:#20242a}
}

/* Version 1.7.10 – Fotoerfassung für Meine Ernährung */
.meal-photo-actions{margin-top:.65rem;gap:.65rem}
.meal-photo-actions button{min-height:48px;flex:1 1 180px}
.meal-photo-button{border:0;border-radius:14px;padding:.85rem 1rem;font:inherit;font-weight:800;background:#174f3f;color:#fff;box-shadow:0 5px 16px rgba(23,79,63,.16)}
.meal-photo-panel{border:2px solid rgba(23,79,63,.14)}
.meal-photo-layout{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:1rem;align-items:start;margin-bottom:1rem}
.meal-photo-preview-wrap{min-height:170px;border-radius:18px;background:#f0f2ef;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(0,0,0,.08)}
.meal-photo-preview{width:100%;height:210px;object-fit:cover;display:block}
.meal-photo-placeholder{padding:1rem;text-align:center;color:#66706a;font-size:.92rem}
.meal-photo-side{display:grid;gap:.75rem}
.meal-photo-result{margin-top:1rem;border-top:1px solid rgba(0,0,0,.08);padding-top:1rem}
.meal-detected-items{display:flex;flex-wrap:wrap;gap:.45rem;margin:.35rem 0 .8rem}
.meal-detected-item{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .62rem;border-radius:999px;background:#eef4f1;border:1px solid rgba(23,79,63,.12);font-size:.9rem}
.estimate-warning{font-weight:800;color:#8a5b08;background:#fff6df;border-radius:12px;padding:.65rem .75rem;margin:.6rem 0 1rem}
@media(max-width:640px){.meal-photo-actions{display:grid;grid-template-columns:1fr 1fr}.meal-photo-actions button{width:100%;padding:.8rem .6rem}.meal-photo-layout{grid-template-columns:1fr}.meal-photo-preview-wrap{min-height:150px}.meal-photo-preview{height:190px}.meal-photo-panel .panel-head{align-items:flex-start}}