:root{--bg: #fbf7f2;--surface: #ffffff;--surface-2: #f4ece3;--text: #2a211c;--muted: #7c6a5f;--line: #e6dbcf;--accent: #b4522a;--accent-soft: #f6e5dc;--danger: #a4322b;--ok: #3f7d42;--radius: 14px;--shadow: 0 1px 2px rgba(60, 40, 25, .07), 0 6px 18px rgba(60, 40, 25, .06);--safe-b: env(safe-area-inset-bottom, 0px)}@media(prefers-color-scheme:dark){:root{--bg: #1a1512;--surface: #241c18;--surface-2: #2e2520;--text: #f1e7df;--muted: #a8968a;--line: #3a2f28;--accent: #e2814f;--accent-soft: #3a271e;--danger: #e0776d;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25)}}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}h1,h2,h3{line-height:1.25;margin:0 0 .5rem;font-weight:650;letter-spacing:-.01em}h1{font-size:1.5rem}h2{font-size:1.15rem}a{color:var(--accent)}p{margin:0 0 .75rem}.app{display:flex;flex-direction:column;min-height:100%}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;padding-top:max(.7rem,env(safe-area-inset-top));background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar .title{font-weight:680;font-size:1.05rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .brand{display:flex;align-items:center;gap:.5rem;flex:1}.topbar .brand svg{width:26px;height:26px;flex:none}.content{flex:1;padding:1rem;padding-bottom:calc(5.5rem + var(--safe-b));max-width:900px;width:100%;margin:0 auto}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}.tabbar button{background:none;border:0;color:var(--muted);cursor:pointer;padding:.55rem .3rem .6rem;font:inherit;font-size:.72rem;display:flex;flex-direction:column;align-items:center;gap:.15rem}.tabbar button svg{width:22px;height:22px}.tabbar button[aria-current=true]{color:var(--accent);font-weight:600}.tabbar .badge{position:absolute;transform:translate(14px,-4px);background:var(--accent);color:#fff;border-radius:10px;font-size:.62rem;padding:0 .32rem;min-width:16px;line-height:16px;font-weight:700}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}button,.btn{font:inherit;font-weight:560;cursor:pointer;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:.62rem 1rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;transition:filter .12s,background .12s;text-decoration:none}button:active,.btn:active{filter:brightness(.94)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line));background:transparent}.btn-sm{min-height:36px;padding:.35rem .7rem;font-size:.86rem;border-radius:9px}.btn-icon{padding:.5rem;min-width:44px}.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.spread{display:flex;gap:.75rem;align-items:center;justify-content:space-between}.grow{flex:1;min-width:0}input,textarea,select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:.68rem .8rem;width:100%;min-height:44px}input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}textarea{min-height:110px;resize:vertical;line-height:1.5}label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:0 0 .3rem}.field{margin-bottom:.85rem}.field-row{display:flex;gap:.6rem}.field-row>*{flex:1}.muted{color:var(--muted)}.small{font-size:.85rem}.tiny{font-size:.76rem}.center{text-align:center}.stack>*+*{margin-top:.75rem}.note{border-radius:11px;padding:.7rem .85rem;font-size:.88rem;border:1px solid}.note-warn{background:#fff6e6;border-color:#f0d59a;color:#6d4b12}.note-error{background:#fdeceb;border-color:#f0b8b3;color:#8b2d26}.note-info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--text)}@media(prefers-color-scheme:dark){.note-warn{background:#3a2f18;border-color:#6b5524;color:#f3dfae}.note-error{background:#3b201d;border-color:#6f3a34;color:#f3c3bd}}.install-hint{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem .9rem;margin-bottom:.9rem;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}.install-hint .install-icon{color:var(--accent);flex:none;padding-top:.1rem}.install-hint .btn-icon{margin:-.4rem -.35rem 0 0;flex:none}.offline-bar{background:var(--surface-2);color:var(--muted);text-align:center;font-size:.8rem;padding:.35rem;border-bottom:1px solid var(--line)}.searchbar{display:flex;gap:.5rem;margin-bottom:.8rem}.filter-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.15rem}.filter-row .chips{flex:1;min-width:0;margin-bottom:0}.filter-label{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-bottom:.55rem}.chips{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.55rem;margin-bottom:.3rem;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.32rem .75rem;font-size:.82rem;min-height:34px;color:var(--muted);white-space:nowrap}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.recipe-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.recipe-card{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;border-radius:var(--radius);min-height:0;align-items:stretch}.recipe-card .thumb{aspect-ratio:4 / 3;width:100%;object-fit:cover;display:block;background:var(--surface-2)}.recipe-card .thumb-empty{aspect-ratio:4 / 3;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}.recipe-card .body{padding:.6rem .7rem .75rem;display:flex;flex-direction:column;gap:.28rem}.recipe-card .name{font-weight:620;font-size:.95rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.recipe-card .meta{font-size:.76rem;color:var(--muted);display:flex;gap:.5rem;flex-wrap:wrap}.chapter+.chapter{margin-top:1.6rem}.chapter-title{position:sticky;top:3.5rem;z-index:5;display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;padding:.3rem 0;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:linear-gradient(var(--bg) 70%,transparent)}.chapter-count{font-size:.72rem;font-weight:600;letter-spacing:0;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:0 .45rem;line-height:1.5}.listentools{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}.listentools .chip{display:inline-flex;align-items:center;gap:.3rem}.sortierung{margin-left:auto;display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.82rem}.sortierung select{width:auto;min-height:34px;padding:.2rem 1.4rem .2rem .5rem;border-radius:999px;font-size:.82rem;color:var(--text);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:none}.thumb-wrap{position:relative;display:block}.fav-badge{position:absolute;top:.4rem;right:.4rem;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;background:color-mix(in srgb,var(--accent) 88%,transparent);box-shadow:0 1px 4px #00000040}.recipe-card .own-rating{color:var(--accent);font-weight:640}.diary{padding:.7rem .85rem;margin-bottom:1rem;display:grid;gap:.55rem}.diary-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.rating-stars{display:flex;gap:.1rem;margin-left:auto}.star{background:none;border:0;padding:.2rem;min-height:36px;min-width:36px;color:var(--line);cursor:pointer;display:grid;place-items:center}.star[data-on=true]{color:#e0a52b}.star svg{fill:currentColor}.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}.empty svg{width:56px;height:56px;opacity:.35;margin-bottom:.75rem}.hero{width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:var(--radius);background:var(--surface-2);margin-bottom:.9rem}.meta-grid{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.meta-pill{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.4rem .65rem;font-size:.82rem;display:flex;gap:.35rem;align-items:center}.meta-pill b{font-weight:640}.servings-box{padding:.8rem .9rem;margin-bottom:1rem}.servings-row{display:flex;align-items:center;gap:.8rem}.servings-value{font-size:1.1rem;font-weight:680;min-width:4.5rem;text-align:center}.stepper{display:flex;align-items:center;gap:.3rem}.stepper button{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;font-size:1.4rem;line-height:1}.ing-list{list-style:none;padding:0;margin:0}.ing-list li{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .2rem;border-bottom:1px solid var(--line)}.ing-list li:last-child{border-bottom:0}.ing-list .amount{font-variant-numeric:tabular-nums;font-weight:620;white-space:nowrap;flex:none}.ing-group{font-weight:650;font-size:.85rem;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin:.9rem 0 .1rem}.step-list{list-style:none;padding:0;margin:0;counter-reset:step}.step-list li{display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--line);cursor:pointer}.step-list li:last-child{border-bottom:0}.step-list .num{counter-increment:step;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:.82rem;font-weight:700}.step-list .num:before{content:counter(step)}.step-list li[data-done=true]{opacity:.45}.step-list li[data-done=true] .text{text-decoration:line-through}.step-list li[data-done=true] .num{background:var(--accent);color:#fff}.source-line{font-size:.82rem;color:var(--muted);margin-top:1.5rem;padding-top:.8rem;border-top:1px solid var(--line)}.line-editor{display:flex;gap:.4rem;margin-bottom:.4rem;align-items:flex-start}.line-editor input,.line-editor textarea{flex:1}.line-editor textarea{min-height:66px}.line-editor .handle{color:var(--muted);font-size:.8rem;padding-top:.8rem;min-width:1.4rem;text-align:right;flex:none;font-variant-numeric:tabular-nums}.line-editor input.as-heading{font-weight:650;color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.shop-list{list-style:none;padding:0;margin:0}.shop-list li{display:flex;align-items:center;gap:.75rem;padding:.7rem .2rem;border-bottom:1px solid var(--line)}.shop-list li:last-child{border-bottom:0}.shop-list input[type=checkbox]{width:24px;height:24px;min-height:24px;flex:none;accent-color:var(--accent)}.shop-list li[data-checked=true] .label{text-decoration:line-through;color:var(--muted)}.shop-list .qty{font-variant-numeric:tabular-nums;font-weight:620}.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);animation:spin .7s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}.loading-box{display:flex;align-items:center;gap:.7rem;justify-content:center;padding:2.5rem 1rem;color:var(--muted)}.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius)}@keyframes shimmer{to{background-position:-200% 0}}.login-wrap{min-height:100%;display:grid;place-items:center;padding:1.5rem}.login-card{width:100%;max-width:360px;padding:1.6rem 1.4rem}.login-card .logo{display:grid;place-items:center;margin-bottom:1rem}.login-card .logo svg{width:56px;height:56px}@media print{.topbar,.tabbar,.no-print,.servings-box button,.offline-bar{display:none!important}body{background:#fff;color:#000;font-size:11pt}.content{padding:0;max-width:none}.card{border:0;box-shadow:none}.hero{max-height:7cm;width:auto}.step-list li,.ing-list li{break-inside:avoid;border-color:#ccc}.step-list .num{background:#eee!important;color:#000!important}a{color:#000;text-decoration:none}h1{font-size:18pt}}