: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; --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; --shadow:0 18px 50px rgba(0,0,0,.35); color-scheme:dark; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; 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); }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; font:800 29px 'Fraunces',serif; 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:11px; font-weight:600; letter-spacing:.15em; color:var(--muted); }
.icon-button,.mobile-menu { border:0; background:transparent; font-size:25px; cursor:pointer; transition:transform .2s; }
.icon-button:hover { transform:rotate(90deg); }
.list-navigation { display:grid; gap:7px; }
.nav-list { width:100%; border:0; background:transparent; padding:13px 14px; border-radius:13px; display:grid; grid-template-columns:30px 1fr auto; text-align:left; align-items:center; gap:7px; cursor:pointer; transition:.2s; }
.nav-list:hover { background:rgba(255,255,255,.5); transform:translateX(3px); }
.nav-list.active { background:var(--cream); box-shadow:0 5px 20px rgba(62,52,34,.07); }
.nav-list small { color:var(--muted); }
.nav-list b { font-weight:600; }
.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:650 13px 'Fraunces',serif; color:#f3c969; }
.tip-card p { font-size:13px; 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:11px; }
.profile strong,.profile small { display:block; font-size:12px; }.profile small { color:var(--muted); margin-top:2px; }
.content { padding:0 clamp(28px,6vw,100px) 80px; max-width:1120px; width:100%; margin:auto; }
.topbar { height:95px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.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(--paper); background:#dab282; font-size:11px; margin-left:-7px; }.member-stack span:nth-child(2){background:#9eb8a4}.member-stack button{background:transparent;border:1px dashed #aaa;cursor:pointer;font-size:17px}
.share-button { display:inline-flex; align-items:center; gap:8px; border:0; background:var(--ink); color:var(--paper); border-radius:30px; padding:10px 18px 10px 14px; font:inherit; font-weight:600; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.14); transition:transform .15s, box-shadow .15s; } /* KB-041 */
.share-button:hover { transform:translateY(-1px); box-shadow:0 9px 20px rgba(0,0,0,.18); }.share-button svg { width:18px; height:18px; flex:0 0 auto; }
.mobile-menu { display:none; }
.hero { display:flex; align-items:end; justify-content:space-between; padding:56px 0 34px; }
.date { margin:0 0 5px; color:var(--tomato); font:650 15px 'Fraunces',serif; }
h1,h2 { font-family:'Fraunces',serif; }
h1 { font-size:clamp(48px,7vw,82px); line-height:.95; letter-spacing:-.045em; margin:0; }
.progress-wrap { width:150px; font-size:12px; color:var(--muted); text-align:right; padding-bottom:7px; }
.progress-track { width:100%; height:4px; background:var(--line); margin-top:9px; border-radius:4px; overflow:hidden; }.progress-track div { height:100%; background:var(--green); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.add-card { display:grid; grid-template-columns:42px 1fr 120px 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(--tomato);color:white;font-size:25px; }
.add-card input { border:0; outline:0; background:transparent; min-width:0; padding:10px; font-size:16px; }.add-card input[name=quantity] { border-left:1px solid var(--line); font-size:13px; }
.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:600 12px 'Fraunces',serif; }
.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(--tomato); 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(--tomato);border-radius:10px;min-width:18px;height:18px;margin-left:5px;font-size:10px;}.sort-label { margin-left:auto; border:0;background:none;color:var(--muted);font-size:11px;cursor:pointer;padding:8px 12px;border-radius:20px;white-space:nowrap; }.sort-label:hover { background:rgba(255,255,255,.55);color:var(--ink); }
.items { display:grid; gap:28px; }.category-title { display:flex;align-items:center;gap:13px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;}.category-title::after{content:'';height:1px;background:var(--line);flex:1}.category-title span{font-size:15px}
.item { display:grid; grid-template-columns:34px 1fr auto auto; align-items:center; gap:12px; padding:14px 8px; border-bottom:1px solid rgba(216,209,196,.75); animation:slide-in .38s both; }
@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:14px}.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:12px;margin-top:3px}.quantity { font:600 12px 'Fraunces',serif;background:var(--chip);padding:7px 10px;border-radius:9px; }.delete { opacity:0;border:0;background:transparent;color:var(--tomato);font-size:18px;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:31px;color:var(--green)}.empty-state h2{color:var(--ink);font-size:30px;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:13px}.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:31px;margin:0 0 14px}dialog label{font-size:12px;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:25px;cursor:pointer}.primary{border:0;background:var(--tomato);color:white;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:12px; 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:13px; font-weight:500; cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--tomato); border-color:var(--tomato); color:white; }
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:28px; }
.item { grid-template-columns:34px 1fr auto auto auto auto; }
.item-name { cursor:pointer; }.item-name:hover { color:var(--tomato); }
.item-tags { font-size:13px; color:var(--tomato); letter-spacing:.06em; }
.more { border:0; background:transparent; color:var(--muted); font-size:17px; 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:13px; 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:13px; 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:12px; 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:11px; 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:11px; font-weight:600; margin-left:-6px; border:2px solid var(--paper); }
.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 var(--muted); background:transparent; cursor:pointer; color:var(--muted); }
.api-keys li .role { font-size:10px; 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:600 18px 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:13px; }
.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:13px; }
.api-keys li.revoked { opacity:.55; }.api-keys li.revoked b { text-decoration:line-through; }
.api-keys code { font-size:12px; color:var(--muted); }.api-keys small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.api-new { display:grid; gap:8px; padding:12px; border-radius:12px; background:#dde9df; font-size:12px; }
.api-new code { font-size:13px; 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:24px; 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:14px; }
.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:25px; line-height:1; }
.tile-name { font-size:11.5px; 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:12px; 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:12px; font-weight:600; text-decoration:underline; cursor:pointer; } /* KB-037 */
.suggestion-create strong { color:var(--green); }
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:12px; 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:24px 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:13px; }
.store-order li b { font-weight:500; }.store-order li small { color:var(--green); font-size:9px; 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:13px; }.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(--tomato); font-size:12px; 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}.topbar{height:70px}.topbar>.eyebrow{display:none}.mobile-menu{display:block;font-size:20px}.hero{padding:37px 2px 26px}.hero h1{font-size:50px}.progress-wrap{width:95px}.add-card{grid-template-columns:38px 1fr 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{font-size:17px;margin:0}.filter-row{overflow:auto;margin-top:22px}.item{grid-template-columns:30px 1fr auto auto auto auto;gap:8px;padding-left:2px}.item-tags{font-size:12px}.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}}
@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:12px; 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:11px; 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; min-width:0; }
.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:6px 4px 6px 10px; color:var(--ink); font-size:13px; }.pantry-add b { font-weight:600; }.pantry-add small { color:var(--muted); font-size:11px; }
.pantry-dismiss { border:0; border-left:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; padding:0 9px; font-size:15px; }.pantry-dismiss:hover { color:var(--tomato); }
.pantry-none { font-size:12px; color:var(--muted); }
.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:14px; }.plan-nav .link-button { font-size:20px; line-height:1; }#plan-today { font-size:12px; }
.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:13px; padding-top:5px; }.plan-day small { display:block; color:var(--muted); font-weight:400; font-size:11px; }
.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:12px; 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:13px; }
.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:13px; 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:14px; }.provider-button:hover { border-color:var(--ink); }
.auth-divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; 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:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.brand-card { flex:0 0 calc(33.333% - 7px); min-width:118px; 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:14px; 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:11px; opacity:.85; font-family:ui-monospace,Menlo,monospace; }
.brand-card.empty { background:transparent; color:var(--muted); border:1.5px dashed var(--line); box-shadow:none; justify-content:center; align-items:center; font-size:12px; }
.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:26px; }.card-hero .brand-tail { font-family:ui-monospace,Menlo,monospace; font-size:12px; opacity:.85; }
@media(max-width:760px){ .brand-card { flex-basis:calc(33.333% - 6px); min-width:96px; padding:8px 9px; } .brand-card .brand-name { font-size:12px; } .brand-card .brand-meta { font-size:10px; } .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:12px; }.offers-dialog .chip small { color:var(--muted); font-size:11px; }
.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: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:15px; }.offer-price s { color:var(--muted); font-size:12px; }
.offer-price em { font-style:normal; font-size:11px; font-weight:700; color:white; background:var(--tomato); border-radius:6px; padding:2px 5px; }
.offer-add { width:30px; height:30px; border:0; border-radius:50%; background:var(--green); color:white; font-size:18px; 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:14px; }
@media(max-width:760px){.share-button{padding:11px;border-radius:50%}} /* KB-041: mobil rund, nur Symbol */