/* Preisvergleich Österreich – gemeinsames Stylesheet */
:root {
  --bg:#f6f6f2; --fg:#1d1d1b; --muted:#66665f; --line:#e1e0d8; --accent:#1f6f4a; --accent-fg:#fff;
  --accent-soft:#e3f1e9; --promo:#b3261e; --promo-soft:#fbe9e7; --card:#fff; --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --radius:10px; --focus:#2563eb;
}
/* Dunkel: automatisch nach System, außer "hell" gewählt; oder ausdrücklich "dunkel" (Einstellung in der Fußzeile) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#141413; --fg:#ecebe6; --muted:#a3a39b; --line:#2f2f2c; --accent:#5cc28f; --accent-fg:#0b1f15;
    --accent-soft:#183326; --promo:#ff8a80; --promo-soft:#3a1d1a; --card:#1d1d1b; --shadow:none; --focus:#7aa7ff; }
}
:root[data-theme="dark"] { --bg:#141413; --fg:#ecebe6; --muted:#a3a39b; --line:#2f2f2c; --accent:#5cc28f; --accent-fg:#0b1f15;
  --accent-soft:#183326; --promo:#ff8a80; --promo-soft:#3a1d1a; --card:#1d1d1b; --shadow:none; --focus:#7aa7ff; color-scheme:dark; }
:root[data-theme="light"] { color-scheme:light; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.skip { position:absolute; left:-999px; top:0; background:var(--card); padding:8px 12px; z-index:100; }
.skip:focus { left:8px; top:8px; }
h1 { font-size:24px; margin:0 0 4px; } h2 { font-size:20px; margin:28px 0 10px; } h3 { font-size:16px; margin:20px 0 8px; }
.muted { color:var(--muted); } .note { font-size:12.5px; color:var(--muted); }
main { max-width:1080px; margin:0 auto; padding:16px 16px 72px; }

/* ---------- Kopfzeile ---------- */
.topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); }
.topbar-inner { max-width:1080px; margin:0 auto; padding:10px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.brand { font-weight:700; font-size:17px; color:var(--fg); white-space:nowrap; }
.brand span { color:var(--accent); }
.topsearch { flex:1 1 320px; position:relative; min-width:0; }
.topsearch input { width:100%; padding:9px 12px 9px 36px; font-size:15px; border:1px solid var(--line); border-radius:999px;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 12px center; color:var(--fg); }
nav.main { display:flex; gap:4px; align-items:center; flex-wrap:wrap; font-size:14px; }
nav.main a, nav.main .linkbtn { padding:6px 10px; border-radius:8px; color:var(--fg); }
nav.main a:hover, nav.main .linkbtn:hover { background:var(--accent-soft); text-decoration:none; }
nav.main a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); font-weight:600; }
nav.main form { margin:0; }
.count { display:inline-block; min-width:20px; padding:0 6px; margin-left:4px; border-radius:999px; background:var(--accent); color:var(--accent-fg); font-size:12px; text-align:center; font-weight:600; }
.count:empty { display:none; }

/* ---------- Suchvorschläge ---------- */
.suggest { position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(0,0,0,.15); list-style:none; margin:0; padding:6px; max-height:70vh; overflow:auto; z-index:30; }
.suggest li { padding:7px 10px; border-radius:8px; cursor:pointer; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.suggest li[aria-selected="true"], .suggest li:hover { background:var(--accent-soft); }
.suggest .kind { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.suggest .price { font-weight:600; white-space:nowrap; }
.suggest img { width:32px; height:32px; object-fit:contain; background:#fff; border-radius:4px; flex:none; }
.suggest .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Bausteine ---------- */
.card { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:16px; margin:16px 0; box-shadow:var(--shadow); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.callout { border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:12px 14px; background:var(--card); margin:16px 0; }
.flash { border-radius:var(--radius); padding:10px 14px; margin:16px 0 0; background:var(--accent-soft); border:1px solid var(--line); }
.flash.error { background:var(--promo-soft); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.chips li { border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:13px; background:var(--card); }
.chips li.off { opacity:.5; }
.chips a { color:var(--fg); }
.badge { display:inline-block; font-size:12px; font-weight:600; padding:1px 8px; border-radius:999px; background:var(--accent); color:var(--accent-fg); }
.tag { display:inline-block; font-size:12px; padding:0 6px; border-radius:4px; border:1px solid var(--promo); color:var(--promo); margin:1px 0; }
.tag.ok { border-color:var(--accent); color:var(--accent); }
.tag.pack { border-color:var(--muted); color:var(--fg); }
.tag.pack.kiste { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600; }
.chips.filter { margin-top:8px; }
.chips.filter li.on { border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
.promo { color:var(--promo); font-weight:600; }
.crumbs { font-size:13.5px; color:var(--muted); margin:12px 0 0; }
.hero { padding:28px 0 8px; }
.hero h1 { font-size:28px; }
.hero form { margin-top:14px; }
.price-big { font-size:30px; font-weight:700; line-height:1.1; }
.kpis { display:flex; gap:24px; flex-wrap:wrap; align-items:flex-end; }

/* ---------- Formulare ---------- */
form.search { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:16px 0; }
form.search input[type=search], form.search input[type=text] { flex:1 1 260px; }
input[type=search], input[type=text], input[type=email], input[type=password], input[type=number], select {
  padding:9px 11px; font-size:15px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); max-width:100%; }
input[type=number] { width:76px; }
form.stack { display:grid; gap:12px; max-width:400px; }
form.stack label { display:grid; gap:4px; font-size:14px; }
.inline { display:inline-flex; gap:6px; align-items:center; margin:0; flex-wrap:wrap; }
button, .btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; font-size:15px; border:0; border-radius:8px;
  background:var(--accent); color:var(--accent-fg); cursor:pointer; text-decoration:none; font-family:inherit; }
button:hover, .btn:hover { text-decoration:none; filter:brightness(1.07); }
button[disabled] { opacity:.6; cursor:progress; }
.btn.secondary, button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn.danger, button.danger { background:var(--promo); color:#fff; }
.btn.small, button.small { padding:4px 10px; font-size:13px; }
.linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; }
.social { display:grid; gap:8px; max-width:400px; margin:12px 0; }
.social a { justify-content:center; }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); }
.stepper button { background:transparent; color:var(--fg); padding:6px 10px; border-radius:0; font-size:16px; }
.stepper button:hover { background:var(--accent-soft); }
.stepper input { border:0; width:48px; text-align:center; padding:6px 2px; -moz-appearance:textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; }
.checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px 16px; margin:8px 0 12px; }
.check { width:28px; height:28px; border:2px solid var(--line); border-radius:7px; background:var(--card); color:var(--accent); padding:0; justify-content:center; font-size:16px; }
.check[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

/* ---------- Tabellen ---------- */
.wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
th { font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
img.thumb { width:48px; height:48px; object-fit:contain; background:#fff; border-radius:6px; }
tr.best td { background:color-mix(in srgb, var(--accent) 10%, transparent); }
tr.cheaper td { color:var(--accent); font-weight:600; }
tr.off td { opacity:.45; }
tr.done td { opacity:.5; } tr.done .pname { text-decoration:line-through; }
.card table td, .card table th { padding:6px 4px; }

/* Tabellen auf dem Handy als Karten */
@media (max-width: 720px) {
  table.responsive thead { display:none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display:block; width:100%; }
  table.responsive tr { padding:10px 12px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:56px 1fr; column-gap:10px; }
  table.responsive tr:last-child { border-bottom:0; }
  table.responsive td { border:0; padding:2px 0; text-align:left; grid-column:2; }
  table.responsive td.img { grid-column:1; grid-row:1 / span 6; }
  table.responsive td.num { text-align:left; white-space:normal; }
  table.responsive td[data-label]:not([data-label=""])::before { content:attr(data-label) ": "; color:var(--muted); font-size:12.5px; }
  table.responsive td:empty { display:none; }
  table.responsive tr:not(:has(td.img)) { grid-template-columns:1fr; }
  table.responsive tr:not(:has(td.img)) td { grid-column:1; }
  .hide-mobile { display:none; }
  .topbar-inner { gap:8px; }
  nav.main { width:100%; justify-content:space-between; }
  .price-big { font-size:26px; }
}

/* ---------- Toast ---------- */
#toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:50; display:grid; gap:8px; width:min(92vw, 420px); }
#toast div { background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:var(--radius); box-shadow:0 8px 30px rgba(0,0,0,.25); animation:toast-in .2s ease-out; }
#toast div.error { background:var(--promo); color:#fff; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- Preisverlauf ---------- */
.spark { width:100%; height:120px; display:block; }
.spark .line { fill:none; stroke-width:2; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }

footer.site { max-width:1080px; margin:0 auto; padding:24px 16px 40px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* ---------- Cookie-Hinweis, Info-Banner, Admin ---------- */
.consent { background:var(--card); border-bottom:1px solid var(--line); font-size:13.5px; }
.consent-inner { max-width:1080px; margin:0 auto; padding:8px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.consent-inner span { flex:1 1 420px; }
.banner { position:relative; margin:16px 0 0; padding:12px 40px 12px 14px; border-radius:var(--radius); background:#fff7e0; color:#5b4300; border:1px solid #f1d58a; font-size:14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner { background:#3a2f0e; color:#f6dc92; border-color:#6b5517; } }
:root[data-theme="dark"] .banner { background:#3a2f0e; color:#f6dc92; border-color:#6b5517; }
.banner .linkbtn { position:absolute; right:12px; top:10px; color:inherit; font-size:16px; }
.banner a { color:inherit; text-decoration:underline; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--line); margin:8px 0 16px; }
.tabs a { padding:8px 12px; color:var(--fg); border-bottom:2px solid transparent; }
.tabs a[aria-current="page"] { border-color:var(--accent); color:var(--accent); font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; display:grid; gap:2px; }
.stat strong { font-size:24px; }
textarea { padding:9px 11px; font:inherit; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); width:100%; }
code { background:var(--accent-soft); padding:0 4px; border-radius:4px; font-size:90%; }
ul.features { margin:8px 0; padding-left:20px; } ul.features li { margin:4px 0; }

/* ---------- Barcode-Scanner ---------- */
.topsearch .scanbtn { position:absolute; right:4px; top:50%; transform:translateY(-50%); background:transparent; color:var(--muted); padding:6px 8px; border-radius:999px; }
.topsearch .scanbtn:hover { color:var(--accent); background:var(--accent-soft); }
.topsearch:has(.scanbtn:not([hidden])) input { padding-right:44px; }
dialog#scanner { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--fg); padding:14px; width:min(94vw, 460px); }
dialog#scanner::backdrop { background:rgba(0,0,0,.55); }
.scanner-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.scanner-view { position:relative; border-radius:8px; overflow:hidden; background:#000; aspect-ratio:4/3; }
.scanner-view video { width:100%; height:100%; object-fit:cover; display:block; }
.scanner-frame { position:absolute; inset:28% 12%; border:3px solid rgba(255,255,255,.85); border-radius:10px; box-shadow:0 0 0 999px rgba(0,0,0,.25); }
.scanner-status { margin:8px 0; font-weight:600; }

/* ---------- Merkmale, Alarm, Filter ---------- */
.tag.flag { border-color:var(--accent); color:var(--accent); }
.tag.flag.bio { background:var(--accent-soft); font-weight:600; }
.note.ok { color:var(--accent); }
details.alarm { display:inline-block; }
details.alarm summary { list-style:none; cursor:pointer; }
details.alarm summary::-webkit-details-marker { display:none; }
.filterbar { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:8px 0; font-size:14px; }
.filterbar label { display:inline-flex; gap:4px; align-items:center; }
.viewbar { display:flex; gap:6px; align-items:center; justify-content:flex-end; margin:8px 0; font-size:13px; }
.viewbar button[aria-pressed="true"] { background:var(--accent); color:var(--accent-fg); }
.display-options { display:inline-flex; gap:12px; align-items:center; }
.display-options select { padding:2px 6px; font-size:13px; }
.warn { border:1px solid var(--promo); border-left:4px solid var(--promo); background:var(--promo-soft); border-radius:var(--radius); padding:12px 14px; margin:16px 0; }
.bell { position:relative; }

/* Ohne Produktbilder (Einstellung): Platz sparen */
.no-images td.img, .no-images img.thumb { display:none; }

/* Kachelansicht für Produktlisten (Einstellung über der Liste) */
.view-tiles table.products thead { display:none; }
.view-tiles table.products tbody { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:1px; background:var(--line); }
.view-tiles table.products tr { display:flex; flex-direction:column; background:var(--card); padding:12px; }
.view-tiles table.products td { display:block; border:0; padding:2px 0; text-align:left; white-space:normal; }
.view-tiles table.products td.img img.thumb { width:96px; height:96px; }
.view-tiles table.products td:empty { display:none; }

/* ---------- Spritpreise: eigener Bereich, farblich abgesetzt ---------- */
nav.main a.nav-fuel { border:1px solid #2b6cb0; color:#2b6cb0; margin-left:6px; }
nav.main a.nav-fuel[aria-current="page"] { background:#2b6cb0; color:#fff; }
.fuel-area { --accent:#2b6cb0; --accent-soft:#e6eef8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fuel-area { --accent:#7fb2ec; --accent-soft:#16263a; } }
:root[data-theme="dark"] .fuel-area { --accent:#7fb2ec; --accent-soft:#16263a; }
.fuel-banner { border-left:4px solid #2b6cb0; }
.fuel-price { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- Händlerauswahl & Vergleichsspalten ---------- */
details.picker { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:10px 14px; margin:12px 0; }
details.picker summary { cursor:pointer; }
details.picker[open] summary { margin-bottom:8px; }

/* ---------- Handy: Kopfzeile kompakt, untere Navigationsleiste, größere Tippflächen ---------- */
.mobile-icons, .tabbar { display:none; }
@media (max-width: 720px) {
  body { font-size:15px; }
  main { padding:12px 12px 96px; }
  .topbar-inner { padding:8px 12px; gap:8px; }
  .brand { font-size:16px; } .brand .flag { display:none; }
  .mobile-icons { display:inline-flex; gap:2px; margin-left:auto; order:2; }
  .icon-link { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; border-radius:10px; font-size:19px; color:var(--fg); position:relative; }
  .icon-link.on, .icon-link:hover { background:var(--accent-soft); text-decoration:none; }
  .icon-link .count { position:absolute; top:2px; right:0; margin:0; font-size:10.5px; min-width:17px; padding:0 4px; }
  .topsearch { order:3; flex:1 1 100%; }
  .topsearch input, .topsearch .scanbtn { height:44px; }
  nav.main { display:none; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--card); border-top:1px solid var(--line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content:space-around; box-shadow:0 -2px 12px rgba(0,0,0,.06); }
  .tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; font-size:11.5px; color:var(--muted);
    border-radius:10px; position:relative; min-height:48px; justify-content:center; }
  .tabbar a span[aria-hidden] { font-size:20px; line-height:1; }
  .tabbar a[aria-current="page"] { color:var(--accent); font-weight:700; background:var(--accent-soft); }
  .tabbar a:hover { text-decoration:none; }
  .tabbar .count { position:absolute; top:2px; right:calc(50% - 22px); font-size:10.5px; min-width:17px; padding:0 4px; }
  #toast { bottom:calc(76px + env(safe-area-inset-bottom)); }
  footer.site { padding-bottom:96px; gap:10px 14px; }
  /* iOS zoomt Eingabefelder unter 16 px beim Antippen heran */
  input[type=search], input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { font-size:16px; }
  button, .btn { min-height:42px; } .btn.small, button.small { min-height:36px; padding:6px 12px; }
  form.search { gap:8px; }
  form.search input[type=search], form.search input[type=text] { flex:1 1 100%; }
  form.search > select, form.search > button { flex:1 1 auto; }
  /* Filter als wischbare Zeile statt vieler Umbrüche */
  .filterbar, .chips.filter { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
  .filterbar::-webkit-scrollbar, .chips.filter::-webkit-scrollbar { display:none; }
  .filterbar label, .chips.filter li { flex:none; white-space:nowrap; }
  .filterbar label { border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:var(--card); }
  .checks { grid-template-columns:1fr 1fr; }
  .grid2 { gap:10px; }
  .card { padding:12px; margin:12px 0; }
  .hero { padding:12px 0 4px; } .hero h1 { font-size:22px; }
  h1 { font-size:21px; } h2 { font-size:18px; margin:22px 0 8px; }
  .kpis { gap:12px; }
  .stats { grid-template-columns:1fr 1fr; gap:8px; }
  .stat strong { font-size:20px; }
  .viewbar { justify-content:flex-start; }
  details.alarm form { flex-wrap:wrap; }
  /* Kachelansicht: zwei Spalten */
  .view-tiles table.products tbody { grid-template-columns:1fr 1fr; }
  .view-tiles table.products tr { display:flex; padding:10px; }
  .view-tiles table.products td.img img.thumb { width:72px; height:72px; }
  /* Scanner als Vollbild */
  dialog#scanner { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; padding:14px; }
  dialog#scanner .scanner-view { aspect-ratio:3/4; }
  .consent-inner { padding:6px 12px; font-size:12.5px; gap:6px; }
  .consent-inner span { flex-basis:100%; }
  .banner { padding:8px 34px 8px 10px; font-size:12.5px; margin-top:10px; }
}
@media (max-width: 380px) {
  .tabbar a { font-size:10.5px; }
  .checks { grid-template-columns:1fr; }
}

/* ---------- Suchfilter (Schnellauswahl, alle Filter, aktive Filter) ---------- */
form.filters { margin:12px 0; }
.quick { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:10px 0 6px; }
.pill { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:999px; padding:4px 12px; background:var(--card); font-size:14px; cursor:pointer; }
.pill:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
.pill input { accent-color:var(--accent); }
details.more-filters { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:8px 12px; }
details.more-filters summary { cursor:pointer; font-weight:600; }
.filter-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px 18px; margin-top:10px; }
.filter-grid fieldset { border:0; padding:0; margin:0; display:grid; gap:6px; align-content:start; }
.filter-grid legend { font-size:12.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.filter-grid label { display:flex; gap:6px; align-items:center; font-size:14px; }
.chips.active-filters li.on { border-color:var(--accent); background:var(--accent-soft); }
details.browse summary { cursor:pointer; }
.ingredients { margin-top:4px; max-width:46ch; }
@media (max-width: 720px) {
  .quick { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
  .quick::-webkit-scrollbar { display:none; }
  .pill { flex:none; padding:8px 12px; }
  .filter-grid { grid-template-columns:1fr; }
}

/* ---------- Gamification: Einkauf abschließen, Stufen, Abzeichen (gamification.py) ---------- */
.levelchip { font-weight:600; }
.checkout-bar { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:16px 0;
  padding:12px 14px; border-radius:var(--radius); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.checkout-sum { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; position:sticky; bottom:8px; z-index:5; }
input.bigcheck { width:24px; height:24px; accent-color:var(--accent); }
.levelcard { display:flex; gap:16px; align-items:center; }
a.linkcard { color:var(--fg); } a.linkcard:hover { text-decoration:none; border-color:var(--accent); }
.level-emblem { font-size:44px; width:72px; height:72px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--card), var(--accent-soft)); border:2px solid var(--accent); }
.level-body { flex:1; min-width:0; display:grid; gap:4px; }
.level-name { font-size:22px; font-weight:700; line-height:1.1; }
.progress { height:10px; border-radius:999px; background:var(--line); overflow:hidden; }
.progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #f5c518));
  transition:width .8s ease; }
.steps { margin:8px 0 0; padding-left:20px; } .steps li { margin:4px 0; }
.bars { display:flex; gap:10px; align-items:flex-end; height:170px; padding-top:20px; }
.bar { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; min-width:0; }
.bar-fill { width:100%; max-width:56px; background:var(--accent); border-radius:6px 6px 0 0; min-height:2px; }
.bar-value { font-size:11.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.bar-label { font-size:12.5px; color:var(--muted); }
ul.badges { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
ul.badges li { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:12px; display:grid; gap:2px; justify-items:center; text-align:center; }
ul.badges li.earned { border-color:var(--accent); background:linear-gradient(180deg, var(--accent-soft), var(--card)); }
ul.badges li.locked { opacity:.55; }
.badge-icon { font-size:30px; line-height:1.2; }
ol.levels { columns:2 220px; padding-left:22px; } ol.levels li { margin:3px 0; color:var(--muted); }
ol.levels li.reached { color:var(--fg); } ol.levels li.current { font-weight:700; color:var(--accent); }
table.leaderboard td.rank { width:44px; font-size:18px; text-align:center; }
/* Feier nach dem Abschließen: reines CSS, keine Bibliothek */
.celebrate { position:relative; overflow:hidden; text-align:center; padding:28px 16px 20px; margin:16px 0; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--accent-soft), var(--card)); border:1px solid var(--accent); }
.celebrate-amount { font-size:46px; font-weight:800; color:var(--accent); line-height:1.1; animation:pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.celebrate-amount.small { font-size:26px; }
.levelup, .newbadge { margin:10px 0 0; font-size:17px; animation:pop .6s .3s cubic-bezier(.2,1.6,.4,1) both; }
.newbadge .badge-icon { font-size:22px; vertical-align:middle; }
.confetti { position:absolute; inset:0; pointer-events:none; }
.confetti i { position:absolute; top:-12px; left:calc(var(--i) * 3.6%); width:8px; height:14px; border-radius:2px; opacity:0;
  background:hsl(calc(var(--i) * 47), 80%, 55%); animation:fall 2.2s calc(var(--i) * 45ms) ease-in forwards; }
@keyframes fall { 0% { opacity:1; transform:translateY(0) rotate(0); } 100% { opacity:0; transform:translateY(260px) rotate(540deg); } }
@keyframes pop { 0% { transform:scale(.4); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .confetti { display:none; } .celebrate-amount, .levelup, .newbadge { animation:none; } .progress span { transition:none; } }
@media (max-width: 720px) {
  .level-emblem { width:56px; height:56px; font-size:32px; }
  .level-name { font-size:19px; }
  .checkout-sum { position:static; }   /* auf dem Handy nicht kleben: sonst verdeckt er die Preisfrage */
  .checkout-sum button, .checkout-bar .btn { flex:1 1 100%; justify-content:center; }
  ul.badges { grid-template-columns:1fr 1fr; }
  .bars { gap:6px; height:150px; }
  .celebrate-amount { font-size:38px; }
}

/* ---------- Einkaufslisten: Übersicht und Ablauf (anlegen -> aktivieren -> abhaken -> abschließen) ---------- */
ol.flow { margin:8px 0 0; padding-left:22px; color:var(--muted); font-size:14px; } ol.flow li { margin:2px 0; }
ul.listcards { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
ul.listcards li.card { margin:0; display:grid; gap:6px; }
ul.listcards li.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.listcard-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.listcard-name { font-size:17px; font-weight:700; color:var(--fg); }
.listcard-actions form { margin:0; }
ol.steps-bar { list-style:none; display:flex; gap:6px; padding:0; margin:12px 0 0; flex-wrap:wrap; counter-reset:step; }
ol.steps-bar li { flex:1 1 160px; padding:8px 10px; border-radius:var(--radius); border:1px solid var(--line); background:var(--card);
  font-size:13.5px; color:var(--muted); }
ol.steps-bar li.done { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
ol.steps-bar li.current { color:var(--fg); font-weight:700; border-color:var(--accent); background:var(--accent-soft); }
fieldset.pricecheck { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:0; display:grid; gap:8px; }
fieldset.pricecheck legend { font-weight:700; padding:0 4px; }
fieldset.pricecheck .options { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 720px) { ol.steps-bar li { flex:1 1 100%; padding:6px 10px; } }
details.addbox summary { cursor:pointer; list-style:none; } details.addbox summary::-webkit-details-marker { display:none; }
details.addbox[open] summary { margin-bottom:10px; }

/* ---------- Startseite: Kurzanleitung ---------- */
ol.howto { list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
ol.howto li { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; font-size:14px; }
ol.howto li span[aria-hidden] { font-size:18px; }

/* ---------- Admin: Einstellungen ---------- */
.settings-form { display:grid; gap:0; }
.setting-row { display:grid; grid-template-columns:minmax(220px, 1fr) minmax(240px, 1.2fr); gap:8px 20px; padding:12px 0; border-bottom:1px solid var(--line); }
.setting-row:last-of-type { border-bottom:0; }
.setting-input input[type=text], .setting-input input[type=password], .setting-input select { width:100%; }
.setting-value { font-family:ui-monospace, monospace; }
.settings-form > div:last-child { padding-top:12px; }
.banner.site-notice { background:var(--accent-soft); border-color:var(--accent); color:var(--fg); }
@media (max-width: 720px) { .setting-row { grid-template-columns:1fr; } }