:root { --paper:#f4efe5; --ink:#20231d; --muted:#6b6a62; --accent:#1f3d2e; --signal:#ffd166; --line:#d8d1c4; --tomato:#e85d3f; --green:#315d45; --cream:#fffaf0; --tile:#ffffff; --chip:#eae1d2; --sidebar:rgba(255,250,240,.42); --on-ink:#ffffff; --head:#1f3d2e; --on-head:#f4efe5; --shadow:0 18px 50px rgba(53,42,26,.09); color-scheme:light; }
/* KB-030: Dunkel — per System oder Wahl (data-theme) */
:root[data-theme="dark"], :root:not([data-theme="light"]):not([data-theme="dark"]).system-dark { --paper:#232e34; --ink:#ecefea; --muted:#9aa59e; --accent:#5d9b79; --signal:#ffd166; --line:#46545b; --green:#5d9b79; --cream:#2f3b42; --tile:#3a4852; --chip:#465661; --sidebar:rgba(0,0,0,.14); --on-ink:#232e34; --head:#1b3328; --on-head:#ecefea; --shadow:0 18px 50px rgba(0,0,0,.35); color-scheme:dark; }
/* KB-049: Typografie-Skala — sieben Stufen in rem (Systemschriftgröße gilt), Bricolage Grotesque für Titel und Zahlen, Instrument Sans für Text;
   Schriften selbst gehostet (public/fonts, SIL OFL) — kein Abruf bei Google Fonts mehr */
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap; src:url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap; src:url('/fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Instrument Sans'; font-style:italic; font-weight:400 700; font-display:swap; src:url('/fonts/instrument-sans-latin-italic.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { font-size:100%; --font-display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif; --font-text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-mono:ui-monospace,Menlo,monospace;
  --fs-display:clamp(2.5rem,5vw,4rem); --fs-title:2rem; --fs-section:1.5rem; --fs-lead:1.1875rem; --fs-body:1rem; --fs-meta:0.875rem; --fs-label:0.75rem;
  --lh-display:1.0; --lh-title:1.1; --lh-section:1.15; --lh-lead:1.4; --lh-body:1.55; --lh-meta:1.45; --lh-label:1.3;
  --ls-display:-0.045em; --ls-title:-0.035em; --ls-section:-0.025em; --ls-label:0.12em; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--font-text); min-height:100vh; }
button,input { font:inherit; }
button { color:inherit; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.22; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.app-shell { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:100vh; }
.sidebar { border-right:1px solid var(--line); padding:30px 22px 24px; display:flex; flex-direction:column; background:var(--sidebar); position:sticky; top:0; align-self:start; height:100vh; height:100dvh; overflow:auto; } /* KB-059: bleibt im Bild — Tipp und Konto unten, Rückkehr-Fläche nimmt den Platz des Tipps */
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; font-weight:800; font-size:var(--fs-title); font-family:var(--font-display); letter-spacing:-1px; margin:0 8px 46px; }
.brand-mark { width:40px; height:40px; flex:0 0 auto; color:var(--accent); display:block; } /* KB-042: Bildmarke „Geflecht“ */
.sidebar-heading { display:flex; justify-content:space-between; align-items:center; margin:0 8px 10px; }
.sidebar-heading p,.eyebrow { font-size:var(--fs-label); font-weight:600; letter-spacing:.15em; color:var(--muted); }
.icon-button,.mobile-menu { border:0; background:transparent; font-size:var(--fs-section); cursor:pointer; transition:transform .2s; }
.icon-button:hover { transform:rotate(90deg); }
.list-navigation { display:grid; gap:7px; }
/* KB-059: Marken-Balken links statt Emoji; aktive Liste grün mit gelbem Balken, offene Anzahl rechts */
.nav-list { width:100%; border:0; background:transparent; padding:11px 13px; border-radius:13px; display:grid; grid-template-columns:auto 1fr auto; text-align:left; align-items:center; gap:11px; cursor:pointer; transition:background .2s; }
.nav-list .bar { width:6px; height:22px; border-radius:99px; background:var(--line); }
.nav-list:hover:not(.active) { background:var(--cream); }
.nav-list.active { background:var(--accent); color:var(--paper); }.nav-list.active .bar { background:var(--signal); }
.nav-list small { color:var(--muted); font-size:var(--fs-meta); }.nav-list.active small { color:var(--signal); font-weight:600; }
.nav-list b { font-weight:500; }.nav-list.active b { font-weight:600; }
#cards-button { border:1px solid var(--line); margin-top:6px; }
.tip-card { margin-top:auto; background:var(--green); color:#f7f0df; border-radius:18px; padding:18px; transform:rotate(-1deg); box-shadow:var(--shadow); }
.tip-card span { font-weight:700; font-size:var(--fs-meta); font-family:var(--font-text); color:#f3c969; }
.tip-card p { font-size:var(--fs-meta); line-height:1.45; margin:8px 0 0; }
.profile { display:grid; grid-template-columns:38px 1fr auto; align-items:center; text-align:left; gap:10px; border:0; border-top:1px solid var(--line); background:none; padding:22px 8px 0; margin-top:26px; }
.profile .avatar { background:#d9c8a6; border-radius:50%; width:36px; height:36px; display:grid; place-items:center; font-size:var(--fs-label); }
.profile strong,.profile small { display:block; font-size:var(--fs-meta); }.profile small { color:var(--muted); margin-top:2px; }
.content { padding:0 clamp(28px,6vw,100px) 80px; max-width:1120px; width:100%; margin:auto; }
/* KB-059: Kopfzone — Topbar und Hero auf einer grünen Fläche (Radius 26 px unten), Fortschritt 7 px in Signalgelb */
.headzone { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title actions" "progress progress"; gap:20px 24px; align-items:start; margin:0 calc(-1 * clamp(28px,6vw,100px)); padding:26px clamp(28px,6vw,100px) 24px; background:var(--head); color:var(--on-head); border-radius:0 0 26px 26px; }
.topbar { grid-area:actions; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.top-actions,.member-stack { display:flex; align-items:center; }.top-actions { gap:24px; }
.member-stack span,.member-stack button { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--head); background:#dab282; font-size:var(--fs-label); margin-left:-7px; }.member-stack span:nth-child(2){background:#9eb8a4}.member-stack button{background:transparent;border:1px dashed #aaa;cursor:pointer;font-size:var(--fs-body);}
.share-button { display:inline-flex; align-items:center; gap:8px; border:0; background:rgba(244,239,229,.14); color:var(--on-head); border-radius:30px; padding:9px 16px 9px 13px; font:inherit; font-weight:600; cursor:pointer; transition:background .15s; } /* KB-041; KB-059: auf der Kopfzone */
.share-button:hover { background:rgba(244,239,229,.24); }.share-button svg { width:18px; height:18px; flex:0 0 auto; }
.mobile-menu { display:none; color:var(--on-head); }
.hero { display:contents; }.hero>div:first-child { grid-area:title; min-width:0; }.hero h1 { font-size:var(--fs-title); line-height:1.05; letter-spacing:-.04em; overflow-wrap:anywhere; }
.date { margin:0 0 6px; color:var(--on-head); opacity:.7; font-weight:500; font-size:var(--fs-meta); }
h1,h2 { font-family:var(--font-display); }
h1 { font-size:var(--fs-display); line-height:.95; letter-spacing:-.045em; margin:0; }
.progress-wrap { grid-area:progress; display:grid; gap:9px; font-size:var(--fs-meta); }.progress-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }.progress-line b { color:var(--signal); font-weight:700; font-size:var(--fs-body); font-family:var(--font-display); }.progress-line span { opacity:.7; }
.progress-track { width:100%; height:7px; background:rgba(244,239,229,.16); border-radius:99px; overflow:hidden; }.progress-track div { height:100%; background:var(--signal); border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.add-card { margin-top:22px; display:grid; grid-template-columns:42px 1fr 120px auto auto; align-items:center; gap:10px; background:var(--cream); border:1px solid #e6ded0; border-radius:18px; padding:11px 12px; box-shadow:var(--shadow); position:relative; z-index:1; }
.add-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--accent);color:var(--paper);font-size:var(--fs-section); }
.add-card input { border:0; outline:0; background:transparent; min-width:0; padding:10px; font-size:var(--fs-body); }.add-card input[name=quantity] { border-left:1px solid var(--line); font-size:var(--fs-meta); }
.product-input-wrap { position:relative; min-width:0; }.product-input-wrap>input { width:100%; }.suggestions { position:absolute; top:51px; left:-53px; right:-130px; background:var(--cream); border:1px solid var(--line); border-radius:15px; box-shadow:0 18px 45px rgba(32,35,29,.16); padding:7px; z-index:8; max-height:310px; overflow:auto; }.suggestion { width:100%; border:0; background:transparent; border-radius:10px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:4px 15px; text-align:left; cursor:pointer; }.suggestion:hover,.suggestion.active { background:#eee5d7; }.suggestion strong { font-weight:600; }.suggestion small { color:var(--muted); }.suggestion span { grid-row:1/3; grid-column:2; align-self:center; font-weight:600; font-size:var(--fs-meta); font-family:var(--font-display); }
.add-card button[type=submit] { border:0; background:var(--ink); color:white; padding:12px 17px; border-radius:11px; cursor:pointer; transition:.2s; }.add-card button[type=submit]:hover { background:var(--accent); transform:translateY(-1px); }.add-card button span { margin-left:7px; opacity:.55; }
.filter-row { display:flex; gap:8px; align-items:center; margin:30px 0 20px; }.filter { border:0; padding:8px 13px; border-radius:20px; background:transparent; color:var(--muted); cursor:pointer; }.filter.active { background:var(--ink); color:var(--on-ink); }.filter b { display:inline-grid;place-items:center;background:var(--signal);color:#1b1d18;border-radius:10px;min-width:18px;height:18px;margin-left:5px;font-size:var(--fs-label);}.sort-label { margin-left:auto; border:0;background:none;color:var(--muted);font-size:var(--fs-label);cursor:pointer;padding:8px 12px;border-radius:20px;white-space:nowrap; }.sort-label:hover { background:rgba(255,255,255,.55);color:var(--ink); }
/* KB-059: Liste als eine Fläche; Kategoriezeile mit Balken statt Emoji — genau eine ist gelb („jetzt dran“) */
.items { display:grid; gap:0; background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:6px 0; }.items:empty { display:none; }
.category-title { display:flex;align-items:center;gap:11px;color:var(--muted);font-size:var(--fs-label);font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin:0;padding:16px 20px 10px;}.category-title::before{content:'';width:20px;height:5px;border-radius:99px;background:var(--line);flex:none}
.category.now .category-title { color:var(--ink); }.category.now .category-title::before { background:var(--signal); }.category.now .category-title::after { content:'jetzt dran'; margin-left:auto; color:var(--muted); }
.token { width:40px; height:40px; border-radius:50%; background:var(--chip); display:inline-grid; place-items:center; font-size:var(--fs-body); line-height:1; flex:none; vertical-align:middle; color:var(--ink); }.token.sm { width:28px; height:28px; font-size:var(--fs-meta); } /* KB-060: 40 px, damit die Linien lesbar bleiben */
/* KB-061: Skizzen-Symbole — weiße Zeichnung als Maske, Farbe = currentColor (Tinte auf Chip, Papier auf Grün); Anfangsbuchstabe ohne Symbol */
.sk { display:block; width:32px; height:32px; background-color:currentColor; -webkit-mask-image:var(--sk); mask-image:var(--sk); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.token.sm .sk { width:22px; height:22px; }
.initial { font-weight:700; font-family:var(--font-display); font-size:var(--fs-body); line-height:1; }.token.sm .initial { font-size:var(--fs-meta); }
.item { display:grid; grid-template-columns:24px 40px 1fr auto auto; align-items:center; gap:12px; padding:9px 20px; border-bottom:1px solid var(--chip); animation:slide-in .38s both; }.category .item:last-child { border-bottom:0; }
@keyframes slide-in { from { opacity:0; transform:translateY(9px); } }
.check { appearance:none;width:24px;height:24px;border:1.5px solid #98978c;border-radius:8px;display:grid;place-items:center;cursor:pointer;transition:.2s;}.check:checked{background:var(--green);border-color:var(--green)}.check:checked::after{content:'✓';color:white;font-size:var(--fs-body);}.item:has(.check:checked) .item-name{text-decoration:line-through;color:#999}.item:has(.check:checked){opacity:.7}
.item-name { font-weight:500; }.item-meta { color:var(--muted);font-size:var(--fs-meta);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-main>div { min-width:0; }.quantity { font-weight:600; font-size:var(--fs-meta); font-family:var(--font-display);background:var(--chip);padding:4px 10px;border-radius:8px; }.delete { opacity:0;border:0;background:transparent;color:var(--tomato);font-size:var(--fs-lead);cursor:pointer;transition:.2s}.item:hover .delete{opacity:1}.delete:hover{transform:scale(1.15)}
.empty-state { text-align:center;padding:65px 20px;color:var(--muted)}.empty-state div{font-size:var(--fs-title);color:var(--green)}.empty-state h2{color:var(--ink);font-size:var(--fs-title);margin:12px 0 4px}.empty-state p{margin:0}
.toast { position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:var(--ink);color:var(--on-ink);padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:20;font-size:var(--fs-meta);}.toast.show{opacity:1;transform:translate(-50%,0)}
dialog { border:0;border-radius:22px;background:var(--cream);padding:0;max-height:calc(100dvh - 30px);overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.2);width:min(420px,calc(100% - 30px))}dialog::backdrop{background:rgba(32,35,29,.52);backdrop-filter:blur(4px)}dialog form{padding:34px;display:grid;gap:10px;position:relative}dialog h2{font-size:var(--fs-title);margin:0 0 14px}dialog label{font-size:var(--fs-meta);color:var(--muted);margin-top:5px}dialog input{border:1px solid var(--line);border-radius:11px;padding:13px;background:var(--tile);color:var(--ink);outline:0}.dialog-close{position:absolute;right:18px;top:16px;border:0;background:transparent;font-size:var(--fs-section);cursor:pointer}.primary{border:0;background:var(--accent);color:var(--paper);padding:14px;border-radius:11px;margin-top:12px;cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* KB-026: Offline-Banner + wartende Artikel */
.offline-banner { display:flex; align-items:center; gap:8px; margin:16px 0 -8px; padding:9px 14px; border-radius:12px; background:#f3e3c3; color:#5a4a2a; font-size:var(--fs-meta); font-weight:600; }
.offline-banner::before { content:'⚠︎'; }
.offline-banner.syncing { background:#dde9df; color:var(--green); }.offline-banner.syncing::before { content:'↻'; }
.item.pending { opacity:.72; }.item.pending .item-meta { color:#a5732a; }
/* KB-025: Artikel-Detail-Dialog, „…“-Einstiege, Merkmale in der Zeile */
[hidden] { display:none !important; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--line); background:var(--tile); border-radius:20px; padding:8px 13px; font-size:var(--fs-meta); font-weight:500; cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--paper); }
dialog select { border:1px solid var(--line); border-radius:11px; padding:13px; background:var(--tile); font:inherit; color:var(--ink); }
.dialog-field { display:grid; gap:10px; }
.item-dialog-title { display:flex; align-items:center; gap:8px; }.item-dialog-title span:first-child { font-size:var(--fs-title); }.item-dialog-title .sk { width:38px; height:38px; }.item-dialog-title .initial { font-size:var(--fs-title); }
.item { grid-template-columns:24px 40px 1fr auto auto auto auto; }
.item-name { cursor:pointer; }.item-name:hover { color:var(--accent); }
.item-tags { font-size:var(--fs-meta); color:var(--accent); letter-spacing:.06em; }
.more { border:0; background:transparent; color:var(--muted); font-size:var(--fs-body); line-height:1; cursor:pointer; padding:5px 7px; border-radius:8px; }.more:hover { background:rgba(255,255,255,.6); color:var(--ink); }
.tile-more { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border:1px solid var(--line); border-radius:50%; background:var(--cream); color:var(--muted); font-size:var(--fs-meta); line-height:1; cursor:pointer; opacity:0; transition:.15s; padding:0; }
.tile-wrap:hover .tile-more { opacity:1; }.tile-more:hover { color:var(--ink); }
.tile-wrap .tile-remove { right:auto; left:-6px; }
@media(hover:none){.tile-more{opacity:.85}}
/* KB-008/010: Anmelde-Ansicht, Konto, Mitglieder */
.auth-view { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; background:var(--paper); overflow:auto; }
.auth-card { width:min(420px,100%); background:var(--cream); border-radius:22px; padding:30px 28px 22px; box-shadow:var(--shadow); display:grid; gap:12px; }
.auth-card .brand { justify-self:start; }
.auth-banner { margin:0; padding:10px 14px; border-radius:12px; background:#dde9df; color:var(--green); font-size:var(--fs-meta); font-weight:600; }
.auth-tabs { display:flex; gap:6px; }.auth-tab { flex:1; border:0; background:transparent; padding:10px; border-radius:12px; cursor:pointer; color:var(--muted); font-weight:600; }.auth-tab.active { background:var(--ink); color:var(--on-ink); }
.auth-form { display:grid; gap:8px; }.auth-form label { font-size:var(--fs-meta); color:var(--muted); margin-top:4px; }.auth-form input { border:1px solid var(--line); border-radius:11px; padding:13px; background:var(--tile); color:var(--ink); outline:0; }
.auth-legal, .auth-footer { font-size:var(--fs-meta); color:var(--muted); margin:6px 0 0; }.auth-footer a, .auth-legal a { color:var(--muted); }
.member-stack span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#d9c8a6; font-size:var(--fs-label); font-weight:600; margin-left:-6px; border:2px solid var(--head); }
.member-stack span:first-child { margin-left:0; }.member-stack button { margin-left:-6px; width:32px; height:32px; border-radius:50%; border:1.5px dashed rgba(244,239,229,.55); background:transparent; cursor:pointer; color:var(--on-head); }
.api-keys li .role { font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--green); font-weight:600; margin-left:6px; }
body.guest .delete, body.guest .more, body.guest .tile-more, body.guest #catalog-browser, body.guest .filter-row .sort-label, body.guest #member-stack button, body.guest .share-button { display:none; }
/* KB-022: Kundenkarten */
#cards-button { margin-top:8px; }
.card-barcode { background:white; border-radius:12px; padding:14px 10px; }.card-barcode svg { display:block; width:100%; height:150px; }
.card-number { font-weight:600; font-size:var(--fs-lead); font-family:ui-monospace,Menlo,monospace; letter-spacing:.14em; text-align:center; margin:4px 0 0; }
.card-dialog { width:min(560px,calc(100% - 20px)); }
/* KB-030: Katalog als Liste */
.tile-list { display:grid; gap:5px; padding:4px 14px 14px; }
.tile-row { display:grid; grid-template-columns:28px 1fr auto 30px; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; background:var(--tile); border:1px solid var(--line); text-align:left; cursor:pointer; font-size:var(--fs-meta); }
.tile-row.active { background:var(--green); border-color:var(--green); color:#f7f0df; }.tile-row b { font-weight:500; }.tile-row small { color:var(--muted); }.tile-row.active small { color:#e6f0e8; }
.tile-row .more { justify-self:end; }
/* KB-011: API-Schlüssel-Dialog */
.api-keys { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.api-keys li { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--tile); font-size:var(--fs-meta); }
.api-keys li.revoked { opacity:.55; }.api-keys li.revoked b { text-decoration:line-through; }
.api-keys code { font-size:var(--fs-meta); color:var(--muted); }.api-keys small { display:block; color:var(--muted); font-size:var(--fs-meta); margin-top:2px; }
.api-new { display:grid; gap:8px; padding:12px; border-radius:12px; background:#dde9df; font-size:var(--fs-meta); }
.api-new code { font-size:var(--fs-meta); word-break:break-all; background:var(--tile); padding:8px 10px; border-radius:8px; color:var(--ink); }
/* KB-006/007: Katalog-Browser */
.catalog-browser { margin-top:52px; display:grid; gap:10px; }
.catalog-heading { font-size:var(--fs-section); margin:0 0 6px; }
.catalog-section { background:var(--cream); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.catalog-toggle { width:100%; border:0; background:transparent; display:flex; align-items:center; gap:11px; padding:15px 18px; font-weight:600; cursor:pointer; text-align:left; font-size:var(--fs-body); }
.catalog-toggle.static { cursor:default; }
.catalog-toggle small { color:var(--muted); font-weight:400; }
.catalog-toggle i { margin-left:auto; font-style:normal; color:var(--muted); }
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; padding:4px 14px 16px; }
.tile-wrap { position:relative; display:grid; }
.tile { border:1px solid var(--line); background:var(--tile); border-radius:13px; padding:13px 6px 10px; display:grid; gap:6px; justify-items:center; cursor:pointer; transition:.15s; min-height:78px; }
.tile:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(53,42,26,.08); }
.tile.active { background:var(--green); border-color:var(--green); color:#f7f0df; }
.tile-icon { font-size:var(--fs-section); line-height:1; height:30px; display:grid; place-items:center; }.tile-icon .sk { width:36px; height:36px; }.tile-icon .initial { font-size:var(--fs-section); }
.tile-name { font-size:var(--fs-meta); font-weight:500; line-height:1.15; text-align:center; word-break:break-word; }
.tile-new { border-style:dashed; color:var(--muted); background:transparent; }
.tile-remove { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border:0; border-radius:50%; background:var(--tomato); color:white; font-size:var(--fs-meta); line-height:1; cursor:pointer; opacity:0; transition:.15s; }
.tile-wrap:hover .tile-remove { opacity:1; }
.recent-clear { margin-left:auto; border:0; background:transparent; color:var(--muted); font:inherit; font-size:var(--fs-meta); font-weight:600; text-decoration:underline; cursor:pointer; } /* KB-037 */
.suggestion-create strong { color:var(--green); }
.suggestion-hint { margin:4px 12px 2px; color:var(--muted); font-size:var(--fs-meta); } /* KB-073 */
.suggestion-variants { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; } /* KB-048 */
.suggestion-variants .chip, .item-dialog-variants .chip { padding:5px 11px; font-size:var(--fs-meta); }
.item-dialog-variants { margin:-4px 0 12px; }
.all-done-hint { margin:8px 0 0; } /* KB-047 */
dialog select { border:1px solid var(--line); border-radius:11px; padding:13px; background:white; outline:0; font:inherit; }
/* KB-013: Ladenweg-Dialog */
.store-hint { font-size:var(--fs-meta); color:var(--muted); margin:0 0 4px; line-height:1.4; }
.store-order { list-style:none; margin:0; padding:2px; display:grid; gap:4px; max-height:min(330px,42vh); overflow:auto; }
.store-order li { display:grid; grid-template-columns:28px 1fr auto 28px 28px; align-items:center; gap:6px; padding:6px 8px; border-radius:10px; background:var(--tile); border:1px solid var(--line); font-size:var(--fs-meta); }
.store-order li b { font-weight:500; }.store-order li small { color:var(--green); font-size:var(--fs-label); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.store-order button { border:0; background:var(--paper); border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:var(--fs-meta); }.store-order button:hover:not(:disabled) { background:#eae1d2; }.store-order button:disabled { opacity:.25; cursor:default; }
.store-actions { display:flex; gap:16px; margin-top:4px; }.link-button { border:0; background:none; color:var(--accent); font-size:var(--fs-meta); font-weight:500; cursor:pointer; padding:0; }

@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;inset:0 15% 0 0;z-index:30;transform:translateX(-105%);transition:.3s;box-shadow:20px 0 60px rgba(0,0,0,.18);background:var(--paper)}.sidebar.open{transform:translateX(0)}.content{padding:0 18px 55px}.headzone{margin:0 -18px;padding:14px 18px 18px;border-radius:0 0 22px 22px;gap:14px;grid-template-columns:1fr;grid-template-areas:"actions" "title" "progress"}.mobile-menu{display:block;}.add-card{grid-template-columns:38px 1fr auto auto}.add-card input[name=quantity]{display:none}.suggestions{left:-49px;right:-62px}.add-card button[type=submit]{font-size:0;padding:11px 14px}.add-card button[type=submit] span{margin:0;font-size:var(--fs-body)}.filter-row{overflow:auto;margin-top:22px}.item{grid-template-columns:24px 40px 1fr auto auto auto auto;gap:8px;padding:9px 12px}.category-title{padding:14px 12px 8px}.delete{opacity:.55}.share-button span{display:none}.top-actions{gap:12px}.tile-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));padding:4px 10px 12px}.catalog-return{left:16px;bottom:16px;width:auto;max-width:calc(100% - 32px)}}
@media(hover:none){.tile-remove{opacity:.8}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* KB-012: Rezept-zu-Liste */
.recipe-dialog { width:min(560px,calc(100% - 20px)); }
.recipe-url { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:stretch; }.recipe-url .primary { margin-top:0; padding:0 16px; white-space:nowrap; }
.recipe-list { max-height:min(48vh,420px); overflow:auto; }
.recipe-list li { grid-template-columns:auto 1fr 96px; }.recipe-list li label { display:flex; gap:8px; align-items:center; min-width:0; cursor:pointer; }.recipe-list li label span { min-width:0; }
.recipe-list li input[type=checkbox] { width:18px; height:18px; accent-color:var(--green); }.recipe-list li input.qty { width:100%; padding:7px 9px; font-size:var(--fs-meta); border-radius:8px; border:1px solid var(--line); background:var(--cream); color:var(--ink); }
.recipe-list li.unmatched { border-style:dashed; }.recipe-list li.unmatched small::after { content:" · nicht im Katalog"; color:var(--tomato); }
body.guest #recipe-button { display:none; }

/* KB-014: Vorrat */
.pantry-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-8px 0 18px; padding:10px 12px; border-radius:14px; background:var(--tile); border:1px dashed var(--line); }
.pantry-label { font-size:var(--fs-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.pantry-chips { display:flex; flex-wrap:wrap; gap:6px; flex:1 1 180px; min-width:0; } /* KB-049: bricht als Ganzes um statt Wörter zu quetschen */
.pantry-chip { display:inline-flex; align-items:stretch; border-radius:999px; background:var(--cream); border:1px solid var(--line); overflow:hidden; }
.pantry-add { border:0; background:transparent; cursor:pointer; display:flex; align-items:center; gap:6px; padding:5px 4px 5px 5px; color:var(--ink); font-size:var(--fs-meta); }.pantry-add b { font-weight:600; }.pantry-add small { color:var(--muted); font-size:var(--fs-meta); }.pantry-add small.overdue { color:var(--tomato); font-weight:600; }
.pantry-dismiss { border:0; border-left:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; padding:0 9px; font-size:var(--fs-body); }.pantry-dismiss:hover { color:var(--ink); }
.pantry-list { max-height:min(50vh,420px); overflow:auto; }
body.guest #pantry-strip { display:none; }

/* KB-031: Foto am Artikel */
.item-main { display:flex; align-items:center; gap:10px; min-width:0; }
.item-photo { width:34px; height:34px; border-radius:8px; object-fit:cover; flex:none; border:1px solid var(--line); background:var(--tile); }
.photo-row { display:grid; gap:8px; }.photo-preview { max-width:100%; max-height:220px; border-radius:12px; object-fit:contain; background:var(--tile); justify-self:start; }
.photo-actions { display:flex; gap:16px; align-items:center; }.photo-pick { cursor:pointer; }
body.guest .item-photo { display:none; }

/* KB-015: Wochenplan */
.plan-dialog { width:min(640px,calc(100% - 20px)); }
.plan-nav { display:flex; align-items:center; gap:12px; }.plan-nav b { flex:1; text-align:center; font-size:var(--fs-body); }.plan-nav .link-button { font-size:var(--fs-lead); line-height:1; }#plan-today { font-size:var(--fs-meta); }
.plan-days { display:grid; gap:2px; max-height:min(46vh,420px); overflow:auto; }
.plan-day { display:grid; grid-template-columns:58px 1fr; gap:8px; align-items:start; padding:7px 0; border-bottom:1px solid var(--line); }.plan-day > b { font-size:var(--fs-meta); padding-top:5px; }.plan-day small { display:block; color:var(--muted); font-weight:400; font-size:var(--fs-meta); }
.plan-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.plan-add { border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:5px 10px; font-size:var(--fs-meta); max-width:150px; cursor:pointer; }
.plan-editor { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-top:6px; }.plan-editor summary { cursor:pointer; font-weight:600; font-size:var(--fs-meta); }
.plan-editor-body { display:grid; gap:8px; margin-top:10px; }.plan-editor-body textarea { border:1px solid var(--line); border-radius:11px; padding:10px; background:var(--tile); color:var(--ink); font:inherit; font-size:var(--fs-meta); resize:vertical; }
body.guest #plan-button { display:none; }

/* KB-009: Social-Login */
.auth-providers { display:grid; gap:8px; }
.provider-button { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:11px; background:var(--cream); color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--fs-body); }.provider-button:hover { border-color:var(--ink); }
.auth-divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; }.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* KB-033: Kundenkarte als QR-Code */
.card-barcode svg.qr { display:block; width:min(100%,320px); height:auto; margin:0 auto; }
.card-format-toggle { justify-content:center; margin-top:6px; }
.card-capture { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.card-capture .store-hint { margin:0; }
.card-scanner { display:grid; gap:6px; justify-items:center; }.card-scanner video { width:100%; max-height:240px; border-radius:12px; background:#000; object-fit:cover; }

/* KB-035: Kundenkarten als Karussell im Anbieter-Design */
.card-carousel { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:4px 2px 10px; } /* KB-054: Raster statt Karussell */
.brand-card { width:100%; min-width:0; aspect-ratio:1.586; border-radius:13px; border:0; padding:10px 12px; background:var(--card-bg); color:var(--card-fg); scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; text-align:left; cursor:pointer; box-shadow:0 5px 14px rgba(0,0,0,.16); transition:transform .15s; position:relative; overflow:hidden; }
.brand-card::after { content:""; position:absolute; right:-26px; top:-26px; width:70px; height:70px; border-radius:50%; background:var(--card-accent, rgba(255,255,255,.14)); opacity:.35; }
.brand-card:hover { transform:translateY(-2px); }.brand-card .brand-name { font-weight:800; font-size:var(--fs-label); letter-spacing:.02em; line-height:1.15; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.brand-card .brand-meta { display:flex; justify-content:space-between; width:100%; font-size:var(--fs-label); white-space:nowrap; gap:4px; opacity:.85; font-family:ui-monospace,Menlo,monospace; }
.brand-card.empty { grid-column:1 / -1; background:transparent; color:var(--muted); border:1.5px dashed var(--line); box-shadow:none; justify-content:center; align-items:center; font-size:var(--fs-meta); }
.card-actions { margin:2px 0 10px; } /* KB-054 */
.transfer-list { display:flex; flex-direction:column; gap:4px; margin:6px 0 10px; } /* KB-055 */
.transfer-list label { display:flex; align-items:center; gap:8px; font-size:var(--fs-meta); }
.transfer-list small { color:var(--muted); }
.transfer-qr { margin-top:10px; }
.transfer-qr svg { width:min(100%,320px); display:block; margin:0 auto; }
.transfer-nav { align-items:center; justify-content:space-between; margin:8px 0 12px; }
#cards-dialog { width:min(100vw - 32px, 560px); max-width:none; } /* KB-054: drei Spalten brauchen Breite */
.card-hero { border-radius:14px; padding:14px 16px 12px; background:var(--card-bg, var(--tile)); color:var(--card-fg, var(--ink)); margin-bottom:4px; }.card-hero .eyebrow { color:inherit; opacity:.75; }.card-hero h2 { margin:2px 0 4px; color:inherit; font-size:var(--fs-section); }.card-hero .brand-tail { font-family:ui-monospace,Menlo,monospace; font-size:var(--fs-meta); opacity:.85; }
@media(max-width:760px){ .card-carousel { grid-template-columns:repeat(2,1fr); } .brand-card { padding:8px 9px; } .brand-card .brand-name { font-size:var(--fs-label); } .brand-card .brand-meta { font-size:var(--fs-label); } .card-carousel { gap:8px; } }
.card-barcode svg.qr { max-width:min(100%,360px); }
/* KB-038: Angebote (Kaufland-MVP) */
.offers-dialog { width:min(560px,100%); }
.offers-tools { display:grid; gap:8px; margin:8px 0 10px; }
.offers-tools input[type=search] { border:1px solid var(--line); border-radius:11px; padding:11px 13px; font:inherit; outline:0; background:white; }
.offers-dialog .chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }.offers-dialog .chip { flex:0 0 auto; padding:6px 10px; font-size:var(--fs-meta); }.offers-dialog .chip small { color:var(--muted); font-size:var(--fs-meta); }
.offers-dialog .chip.active { background:var(--green); color:white; border-color:var(--green); }.offers-dialog .chip.active small { color:rgba(255,255,255,.8); }
.offers-list { max-height:min(50vh,440px); overflow:auto; overflow-x:hidden; }.offers-list li { grid-template-columns:auto minmax(0,1fr) auto; }.offers-list li b { overflow-wrap:anywhere; }.offers-list li.on-list { opacity:.6; }
.offer-price { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:3px 8px; white-space:nowrap; max-width:150px; }.offer-price b { font-size:var(--fs-meta); font-weight:700; background:var(--accent); color:var(--paper); border-radius:8px; padding:5px 10px; } /* KB-059: Preisschild in Korbgrün */.offer-price s { color:var(--muted); font-size:var(--fs-meta); }
.offer-price em { font-style:normal; font-size:var(--fs-label); font-weight:700; color:var(--ink); background:var(--chip); border-radius:6px; padding:3px 6px; }
.offer-add { width:30px; height:30px; border:0; border-radius:50%; background:var(--green); color:white; font-size:var(--fs-lead); line-height:1; cursor:pointer; }
.offer-add:disabled { background:var(--line); color:var(--muted); cursor:default; }
.offers-store-pick { display:flex; gap:8px; align-items:center; margin:6px 0; }.offers-store-pick input { width:90px; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font:inherit; }
/* KB-039: Einstellungszeile im Konto-Dialog */
.settings-row { display:flex; align-items:center; min-height:44px; padding:0 2px; margin:-4px 0 6px; }.settings-row .link-button { padding:0; font-size:var(--fs-body); }
@media(max-width:760px){.share-button{padding:11px;border-radius:50%}} /* KB-041: mobil rund, nur Symbol */
/* KB-049: Zeilenhöhen, Laufweiten, Versalien-Labels, tabellarische Ziffern */
body { line-height:var(--lh-body); }
h1 { line-height:var(--lh-display); letter-spacing:var(--ls-display); font-weight:800; }
h2 { line-height:var(--lh-title); letter-spacing:var(--ls-title); font-weight:700; }
.catalog-heading,.card-hero h2 { line-height:var(--lh-section); letter-spacing:var(--ls-section); }
.eyebrow,.sidebar-heading p,.category-title,.pantry-label,.auth-divider,.store-order li small,.api-keys li .role,.sort-label,.filter b { text-transform:uppercase; font-weight:700; letter-spacing:var(--ls-label); line-height:var(--lh-label); }
.store-hint,.item-meta,.tile-name,.chip,.toast,.tile-row,.plan-day,.recipe-list { line-height:var(--lh-meta); }
.quantity,.offer-price,.card-number,.progress-wrap,#open-count,.nav-list small,.filter b,#cards-count,.brand-meta,.brand-tail,.item-meta,.plan-nav b { font-variant-numeric:tabular-nums; }
.brand-card .brand-meta,.card-hero .brand-tail,.card-number,.api-keys code,.api-new code { font-family:var(--font-mono); }
/* KB-059: Rückkehr zur Liste — unten links wie auf iOS: Listenname, „n offen“, Marke rechts; erscheint, sobald der Katalog im Bild ist */
.catalog-return { position:fixed; left:22px; bottom:104px; z-index:25; width:236px; display:flex; align-items:center; gap:12px; border:0; border-radius:15px; background:var(--accent); color:var(--paper); padding:12px 14px; box-shadow:0 14px 34px rgba(0,0,0,.22); cursor:pointer; text-align:left; }
.catalog-return>span { display:grid; flex:1; min-width:0; }.catalog-return strong { font-size:var(--fs-body); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.catalog-return small { font-size:var(--fs-meta); color:var(--signal); font-weight:600; }
.catalog-return .brand-mark { width:28px; height:28px; color:var(--paper); }
body.catalog-return-on .tip-card { visibility:hidden; }
/* KB-062: Spracheingabe — Mikrofon im Eingabefeld, Dialog mit erkanntem Text und Artikel-Vorschau */
.voice-button { width:40px; height:40px; border:0; border-radius:11px; background:var(--chip); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:.15s; }
.voice-button:hover { background:var(--accent); color:var(--paper); }.voice-button.listening { background:var(--tomato); color:#fff; animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scale(1.08); } }
.voice-dialog { width:min(520px,calc(100% - 30px)); }.voice-dialog textarea { border:1px solid var(--line); border-radius:11px; padding:11px 13px; font:inherit; background:var(--tile); color:var(--ink); resize:vertical; min-height:72px; }
.voice-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.voice-controls .primary { margin-top:0; }
.voice-items { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:6px; }
.voice-items li { display:grid; grid-template-columns:auto 28px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:11px; background:var(--tile); }
.voice-items li.off { opacity:.45; }.voice-items input { width:18px; height:18px; accent-color:var(--green); }.voice-items b { font-weight:500; }.voice-items small { color:var(--muted); font-variant-numeric:tabular-nums; }

/* KB-068: Neu in Version X */
.whatsnew { display:grid; gap:6px; }.whatsnew h3 { font-size:var(--fs-meta); color:var(--muted); margin:10px 0 0; text-transform:uppercase; letter-spacing:.04em; }.whatsnew ul { margin:0; padding-left:20px; display:grid; gap:8px; line-height:1.45; }.whatsnew-tag { display:inline-block; background:var(--signal); color:#20231D; border-radius:6px; padding:1px 7px; font-size:var(--fs-meta); font-weight:600; }