/* Brot & Brötchen – Design B „Klar & Werkzeug“ mit der Wärme von A (Krustenbraun/Mehl-Töne) */
:root {
  --sans:-apple-system,"SF Pro Text","Segoe UI",Inter,sans-serif;
  --bg:#f6f2eb; --karte:#fff; --tinte:#2a241e; --grau:#7a7066; --linie:#e6dfd3; --hell:#f3ede3;
  --akz:#a4612c; --akz-h:#f3e4d4; --honig:#d9962b; --gruen:#4f8a5b; --gruen-h:#e3efe4; --rot:#b2453b; --rot-h:#f6e2df; --blau:#5c7f9a; --blau-h:#e3ebf1;
  --nav-h:76px; --gross:1;
  --sa-t:env(safe-area-inset-top,0px); --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#171411; --karte:#221e19; --tinte:#f1ebe2; --grau:#a69c8f; --linie:#36302a; --hell:#2a2520; --akz:#d08a4c; --akz-h:#3a2a1c; --honig:#e0a447; --gruen-h:#213324; --rot-h:#3a2320; --blau-h:#20303a; } }
:root[data-theme="dark"] { --bg:#171411; --karte:#221e19; --tinte:#f1ebe2; --grau:#a69c8f; --linie:#36302a; --hell:#2a2520; --akz:#d08a4c; --akz-h:#3a2a1c; --honig:#e0a447; --gruen-h:#213324; --rot-h:#3a2320; --blau-h:#20303a; }

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--tinte); font:17px/1.4 var(--sans); min-height:100vh; -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
a { color:var(--akz); }
[hidden] { display:none !important; }
.nur-tablet { display:none; }

/* A+ : alles im Inhalt wächst mit (Stufe in --gross, am Gerät gemerkt) */
#app, .blatt > div, .koch { zoom:var(--gross); }

/* ---------- Grundgerüst ---------- */
#app { padding-bottom:calc(var(--nav-h) + var(--sa-b)); min-height:100vh; }
.kopf { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; padding:calc(10px + var(--sa-t)) 14px 10px; background:var(--karte); border-bottom:1px solid var(--linie); }
.kopf h1 { font-size:22px; font-weight:800; flex:1; letter-spacing:-.01em; line-height:1.15; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kopf .zurueck { font-size:30px; color:var(--akz); line-height:1; padding:0 6px 2px 0; min-width:44px; min-height:44px; display:inline-flex; align-items:center; margin-left:-8px; }
.kopf .ik { width:40px; height:40px; border-radius:10px; background:var(--hell); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.aplus { font:800 15px var(--sans); background:var(--tinte); color:var(--bg); border-radius:8px; padding:7px 11px; min-height:40px; min-width:44px; flex:none; }
.inhalt { padding:12px 14px; max-width:720px; margin:0 auto; }
.sek { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--grau); margin:14px 0 6px; }
.sek:first-child { margin-top:2px; }
.leer { color:var(--grau); text-align:center; padding:28px 10px; font-size:16px; }

/* Unterleiste (Handy) */
nav.nav { position:fixed; left:0; right:0; bottom:0; height:calc(var(--nav-h) + var(--sa-b)); background:var(--karte); border-top:1px solid var(--linie); display:flex; padding:6px 4px var(--sa-b); z-index:20; }
nav.nav a { flex:1; text-align:center; color:var(--grau); font-size:11px; font-weight:700; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; position:relative; }
nav.nav a i { font-style:normal; font-size:24px; line-height:1.1; }
nav.nav a.on { color:var(--akz); }
nav.nav a .z { position:absolute; top:4px; right:calc(50% - 24px); background:var(--honig); color:#fff; border-radius:999px; font-size:11px; padding:1px 6px; }

/* ---------- Knöpfe, Chips, Felder ---------- */
.knopf { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--akz); color:#fff; border-radius:12px; padding:13px 16px; font-weight:800; font-size:16px; text-decoration:none; }
.knopf.hell { background:var(--karte); color:var(--tinte); border:2px solid var(--linie); }
.knopf.breit { display:flex; width:100%; }
.knopf.klein { padding:8px 12px; font-size:14px; border-radius:9px; }
.knopf.gruen { background:var(--gruen); } .knopf.rot { background:var(--rot); } .knopf.grau { background:var(--hell); color:var(--tinte); }
.knopf:disabled { opacity:.5; }
.chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.chips::-webkit-scrollbar { display:none; }
.chips.umbruch { flex-wrap:wrap; overflow:visible; }
.chip { flex:none; border:2px solid var(--linie); background:var(--karte); border-radius:9px; padding:10px 12px; min-height:44px; font-size:14px; font-weight:700; color:var(--tinte); white-space:nowrap; }
.chip.on { background:var(--akz); color:#fff; border-color:var(--akz); }
.chip.ohne.on { background:var(--rot); border-color:var(--rot); }
.chip small { font-weight:600; opacity:.7; margin-left:4px; }
.such { display:flex; align-items:center; gap:8px; background:var(--karte); border:2px solid var(--linie); border-radius:12px; padding:0 12px; margin-bottom:10px; }
.such input { flex:1; border:0; background:none; padding:11px 0; font-size:17px; outline:none; min-width:0; }
.such button { color:var(--grau); font-size:20px; padding:4px; }
.feld { background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:8px 12px; margin-bottom:8px; }
.feld label, .feld > .l { display:block; font-size:11px; color:var(--grau); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.feld input[type=text], .feld input[type=number], .feld input[type=url], .feld input[type=time], .feld input[type=date], .feld input[type=datetime-local], .feld select, .feld textarea { width:100%; border:0; background:none; padding:4px 0; font-size:18px; font-weight:700; outline:none; }
.feld textarea { font-weight:500; font-size:16px; min-height:60px; resize:vertical; }
.feld .w { display:flex; justify-content:space-between; align-items:center; font-size:18px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; gap:8px; }
.feld .w input[type=number] { width:90px; text-align:right; font-size:20px; }
.pm { display:flex; gap:6px; }
.pm button { width:44px; height:44px; border-radius:9px; background:var(--hell); font-size:22px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
input[type=range] { width:100%; accent-color:var(--akz); margin:8px 0 2px; height:28px; }
.seg { display:flex; background:var(--hell); border-radius:10px; padding:3px; margin-top:6px; gap:2px; }
.seg button { flex:1; text-align:center; padding:11px 4px; min-height:44px; font-size:14px; font-weight:800; color:var(--grau); border-radius:8px; }
.seg button.on { background:var(--akz); color:#fff; }
.zeile2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.zeile3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
/* Schmale Spalten (iPad hochkant mit A+, iPhone): Felder dürfen schrumpfen, nichts läuft über den Rand (Prüfung 29.10.2026) */
.zeile2 > *, .zeile3 > *, .daten > div { min-width:0; }
.feld input, .feld select { min-width:0; max-width:100%; }
.feld .w { flex-wrap:wrap; }
.feld .w input[type=number] { flex:0 1 90px; }
.daten div b { overflow-wrap:anywhere; }
.chips.umbruch .chip { max-width:100%; white-space:normal; text-align:left; }
.hinweis-box { background:var(--akz-h); border-left:5px solid var(--akz); border-radius:10px; padding:10px 12px; font-size:15px; margin:8px 0; }
.hinweis-box.neu { background:var(--gruen-h); border-color:var(--gruen); }
.hinweis-box.warn { background:var(--rot-h); border-color:var(--rot); }
.aend { background:var(--gruen-h); color:var(--gruen); border-radius:6px; padding:0 5px; font-weight:800; }
.aend s { color:var(--grau); font-weight:500; margin-right:4px; }

/* ---------- Bücher + Liste ---------- */
.buecher { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.buch { background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px; cursor:pointer; min-height:72px; }
.buch.on { border-color:var(--akz); background:var(--akz-h); }
.buch b { display:block; font-size:14px; line-height:1.15; }
.buch small { color:var(--grau); font-size:12px; display:block; margin-top:4px; }
.buch i { font-style:normal; font-size:22px; display:block; margin-bottom:2px; }
.heute { display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--akz),#7c4219); color:#fff; border-radius:14px; padding:12px 14px; margin-bottom:12px; width:100%; text-align:left; }
.heute i { font-style:normal; font-size:28px; }
.heute b { display:block; font-size:16px; } .heute small { opacity:.85; font-size:13px; }
.reihe { display:flex; align-items:center; gap:12px; background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; text-decoration:none; color:inherit; }
.reihe.on { border-color:var(--akz); box-shadow:0 0 0 2px var(--akz-h); }
.reihe .bild { width:64px; height:64px; border-radius:10px; background:var(--hell) center/cover; flex:none; display:flex; align-items:center; justify-content:center; font-size:28px; }
.reihe .tx { flex:1; min-width:0; }
.reihe b { display:block; font-size:17px; line-height:1.2; }
.reihe small { color:var(--grau); font-size:13px; display:block; margin-top:3px; }
.reihe .st { color:var(--honig); font-size:13px; letter-spacing:-1px; }
.reihe .pf { color:var(--grau); font-size:22px; }
.plak { display:inline-block; font-size:11px; font-weight:800; padding:2px 6px; border-radius:6px; background:var(--hell); color:var(--grau); margin-right:4px; vertical-align:middle; }
.plak.neu { background:var(--honig); color:#fff; letter-spacing:.06em; } .neuz { color:var(--honig); font-weight:800; }
.hilfe details { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:8px 12px; margin-bottom:6px; } .hilfe summary { font-weight:800; font-size:15px; cursor:pointer; padding:8px 0; } .hilfe p { margin-top:6px; font-size:15px; line-height:1.4; color:var(--tinte); }
.tabs button { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
nav.nav a .z.gold { background:var(--honig); }
.plak.bsp { background:var(--blau-h); color:var(--blau); } .plak.gut { background:var(--gruen-h); color:var(--gruen); } .plak.fehlt { background:var(--rot-h); color:var(--rot); }
.treffer { color:var(--grau); font-size:14px; margin:6px 0 8px; display:flex; justify-content:space-between; align-items:center; }
.treffer select { border:0; background:var(--hell); border-radius:8px; padding:9px 10px; min-height:40px; font-weight:700; font-size:14px; }

/* ---------- Rezept: 3 Karten ---------- */
.tabs { display:flex; background:var(--hell); border-radius:10px; padding:3px; margin:10px 14px; gap:2px; }
.tabs button { flex:1; text-align:center; padding:12px 0; min-height:44px; font-size:14px; font-weight:800; color:var(--grau); border-radius:8px; }
.tabs button.on { background:var(--karte); color:var(--tinte); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.karten { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.karten::-webkit-scrollbar { display:none; }
.karte { flex:0 0 100%; scroll-snap-align:start; padding:0 14px 16px; min-width:0; }
.karten.neben { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:12px; overflow:visible; padding:0 14px; }
.karten.neben .karte { min-width:0; }
.karten.neben .karte { padding:0; }
.foto { height:200px; border-radius:14px; overflow:hidden; margin-bottom:10px; background:var(--hell) center/cover; display:flex; align-items:center; justify-content:center; font-size:60px; position:relative; }
.foto .plak { position:absolute; left:10px; top:10px; background:rgba(255,255,255,.9); color:var(--tinte); }
.ku { color:var(--grau); font-size:14px; margin:2px 0 8px; }
.daten { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.daten div { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:7px 4px; text-align:center; font-size:11px; color:var(--grau); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.daten div b { display:block; font-size:17px; color:var(--tinte); letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; }
.daten div b.k { font-size:13px; }
table.zut { width:100%; border-collapse:collapse; background:var(--karte); border:1px solid var(--linie); border-radius:12px; overflow:hidden; }
.zut td { padding:8px 10px; border-bottom:1px solid var(--linie); font-size:16px; vertical-align:top; }
.zut tr:last-child td { border-bottom:0; }
.zut td.g { width:84px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.zut td.p { width:60px; text-align:right; color:var(--akz); font-weight:700; font-size:13px; white-space:nowrap; }
.zut td.ab { width:34px; text-align:center; font-size:20px; color:var(--grau); cursor:pointer; }
.zut tr.abgehakt td { color:var(--grau); text-decoration:line-through; }
.zut tr.geaendert td.g { background:var(--gruen-h); color:var(--gruen); }
.zut th { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--grau); text-align:left; padding:7px 10px; background:var(--hell); }
.skal { display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
.skal .seg { flex:1; margin:0; min-width:180px; }
.schritt { display:flex; gap:10px; background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; margin-bottom:8px; align-items:flex-start; }
.schritt .t { font-variant-numeric:tabular-nums; font-weight:800; color:var(--akz); font-size:14px; width:54px; flex:none; padding-top:3px; line-height:1.2; }
.schritt .t small { display:block; color:var(--grau); font-weight:600; font-size:11px; }
.schritt .n { width:26px; height:26px; border-radius:7px; background:var(--tinte); color:var(--bg); font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; font-size:14px; }
.schritt p { font-size:16px; line-height:1.35; flex:1; }
.schritt .tm7 { display:block; margin-top:5px; font-size:13px; color:var(--blau); background:var(--blau-h); border-radius:6px; padding:3px 7px; font-weight:700; }
.schritt .dauer { display:inline-block; margin-top:5px; font-size:12px; color:var(--grau); font-weight:700; background:var(--hell); border-radius:6px; padding:2px 7px; }
.schritt.gare { border-left:5px solid var(--honig); } .schritt.backen { border-left:5px solid var(--akz); }
.ofen { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.ofen div { background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:12px; font-size:12px; color:var(--grau); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.ofen div b { display:block; font-size:30px; color:var(--tinte); letter-spacing:0; text-transform:none; line-height:1.1; margin-top:2px; font-variant-numeric:tabular-nums; }
.ofen div b.k { font-size:18px; }
.ofen div b small { font-size:13px; color:var(--grau); font-weight:600; margin-left:4px; }
.ofen .voll { grid-column:1/3; }
.phase { display:flex; align-items:center; gap:10px; background:var(--karte); border:1px solid var(--linie); border-left:5px solid var(--honig); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.phase b { flex:1; font-size:16px; } .phase span { color:var(--grau); font-size:13px; display:block; font-weight:500; }
.phase .z { font-weight:800; color:var(--tinte); font-size:18px; font-variant-numeric:tabular-nums; }
.phase .z small { font-size:12px; color:var(--grau); font-weight:600; }
.phase .tm { background:var(--tinte); color:var(--bg); border-radius:8px; padding:11px 10px; font-size:13px; font-weight:800; min-width:64px; text-align:center; }
.phase .tm.laeuft { background:var(--gruen); color:#fff; }
.fertig { display:flex; justify-content:space-between; align-items:center; background:var(--tinte); color:var(--bg); border-radius:12px; padding:12px 16px; margin-top:8px; }
.fertig b { font-size:22px; font-variant-numeric:tabular-nums; }
.aktionen { position:sticky; bottom:calc(var(--nav-h) + var(--sa-b)); display:flex; gap:6px; padding:8px 14px; background:var(--bg); border-top:1px solid var(--linie); z-index:4; }
.aktionen button { flex:1; background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:8px 4px; font-size:11px; font-weight:800; color:var(--tinte); display:flex; flex-direction:column; align-items:center; gap:2px; }
.aktionen button i { font-style:normal; font-size:20px; }
.aktionen button.haupt { background:var(--akz); color:#fff; border-color:var(--akz); }
.sterne { font-size:28px; letter-spacing:2px; color:var(--linie); cursor:pointer; user-select:none; }
.sterne span.on { color:var(--honig); }
.tagebuch { display:flex; gap:10px; background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px; margin-bottom:8px; }
.tagebuch .bild { width:70px; height:70px; border-radius:10px; background:var(--hell) center/cover; flex:none; }
.tagebuch b { display:block; font-size:15px; } .tagebuch small { color:var(--grau); font-size:13px; }
.version { background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; margin-bottom:8px; font-size:15px; }
.version b { color:var(--akz); }
.links a { display:flex; align-items:center; gap:8px; background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:9px 12px; margin-bottom:6px; text-decoration:none; color:var(--tinte); font-size:15px; }
.links a i { font-style:normal; font-size:18px; }

/* ---------- Planer ---------- */
.plan { background:var(--karte); border:1px solid var(--linie); border-radius:12px; overflow:hidden; margin-bottom:10px; }
.plan div { display:flex; gap:10px; padding:9px 12px; border-bottom:1px solid var(--linie); font-size:15px; align-items:flex-start; }
.plan div:last-child { border-bottom:0; }
.plan b { font-variant-numeric:tabular-nums; width:88px; flex:none; color:var(--akz); }
.plan b small { display:block; color:var(--grau); font-weight:600; font-size:11px; }
.plan div.hervor { background:var(--akz-h); }
.plan div.jetzt { background:var(--gruen-h); }

/* ---------- Kochmodus ---------- */
.koch { position:fixed; inset:0; background:var(--bg); z-index:40; display:flex; flex-direction:column; padding:calc(12px + var(--sa-t)) 16px calc(12px + var(--sa-b)); }
.koch .kk { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.koch .kk b { flex:1; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.koch .kk button { background:var(--hell); border-radius:10px; padding:8px 14px; font-weight:800; }
.koch .schrittgross { flex:1; overflow:auto; }
.koch .nr { font-size:14px; color:var(--grau); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.koch .txt { font-size:26px; line-height:1.3; font-weight:600; margin:8px 0 12px; }
.koch .tm7 { font-size:17px; color:var(--blau); background:var(--blau-h); border-radius:10px; padding:8px 12px; font-weight:700; margin-bottom:10px; }
.koch .timer { display:flex; align-items:center; gap:10px; background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.koch .timer b { font-size:40px; font-variant-numeric:tabular-nums; flex:1; }
.koch .timer button { background:var(--akz); color:#fff; border-radius:12px; padding:14px 18px; font-weight:800; font-size:18px; min-width:90px; }
.koch .timer button.stop { background:var(--rot); }
.koch .timer.fertig { background:var(--gruen-h); border-color:var(--gruen); }
.koch .zutaten-klein { font-size:15px; color:var(--grau); margin-bottom:8px; }
.koch .fuss { display:flex; gap:8px; }
.koch .fuss button { flex:1; background:var(--karte); border:2px solid var(--linie); border-radius:14px; padding:16px; font-size:18px; font-weight:800; }
.koch .fuss button.haupt { background:var(--akz); color:#fff; border-color:var(--akz); }
.koch .pkt { display:flex; gap:4px; justify-content:center; margin:6px 0; }
.koch .pkt i { width:8px; height:8px; border-radius:50%; background:var(--linie); } .koch .pkt i.on { background:var(--akz); }

/* ---------- Blatt (Dialog von unten) ---------- */
.blatt { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:flex-end; justify-content:center; }
.blatt > div { background:var(--bg); border-radius:18px 18px 0 0; width:100%; max-width:720px; max-height:92vh; overflow:auto; padding:14px 14px calc(16px + var(--sa-b)); }
.blatt h3 { font-size:20px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.blatt h3 .zu { margin-left:auto; font-size:22px; color:var(--grau); background:var(--hell); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.hinweis { position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--sa-b) + 12px); transform:translateX(-50%); background:var(--tinte); color:var(--bg); padding:9px 16px; border-radius:999px; font-weight:700; z-index:60; max-width:90vw; text-align:center; }

/* ---------- Anmeldung ---------- */
.anmeldung { max-width:360px; margin:12vh auto; padding:16px; text-align:center; }
.anmeldung .logo { font-size:56px; margin-bottom:6px; }
.anmeldung h1 { font-size:24px; font-weight:800; margin-bottom:4px; }
.anmeldung p { color:var(--grau); font-size:15px; margin-bottom:14px; }
.anmeldung input { width:100%; border:2px solid var(--linie); border-radius:12px; padding:12px; font-size:18px; background:var(--karte); margin-bottom:10px; }
.anmeldung .fehler { color:var(--rot); font-weight:700; min-height:22px; margin-top:8px; }

/* ---------- Neu / Eingang ---------- */
.kamera { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,var(--akz),#7c4219); color:#fff; border-radius:16px; padding:18px 16px; width:100%; text-align:left; margin-bottom:10px; }
.kamera i { font-style:normal; font-size:40px; }
.kamera b { display:block; font-size:19px; } .kamera small { opacity:.9; font-size:14px; }
.neuweg { display:flex; align-items:center; gap:12px; background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:12px 14px; margin-bottom:8px; width:100%; text-align:left; }
.neuweg i { font-style:normal; font-size:26px; width:40px; text-align:center; }
.neuweg b { display:block; font-size:16px; } .neuweg small { color:var(--grau); font-size:13px; }
.vorschau-bilder { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.vorschau-bilder div { width:72px; height:72px; border-radius:10px; background:var(--hell) center/cover; position:relative; }
.vorschau-bilder div button { position:absolute; top:-6px; right:-6px; background:var(--rot); color:#fff; border-radius:50%; width:22px; height:22px; font-size:13px; }
.auftrag { display:flex; gap:10px; align-items:center; background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; margin-bottom:6px; font-size:14px; }
.auftrag .plak { flex:none; }

/* ---------- Korb ---------- */
.korb { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vorschlag { background:var(--karte); border:1px solid var(--linie); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.vorschlag .bild { height:110px; background:var(--hell) center/cover; display:flex; align-items:center; justify-content:center; font-size:36px; }
.vorschlag .tx { padding:8px 10px; flex:1; }
.vorschlag b { display:block; font-size:15px; line-height:1.2; } .vorschlag small { color:var(--grau); font-size:12px; display:block; margin-top:3px; }
.vorschlag .kn { display:flex; border-top:1px solid var(--linie); }
.vorschlag .kn button { flex:1; padding:9px 4px; font-weight:800; font-size:13px; }
.vorschlag .kn button.ja { color:var(--gruen); } .vorschlag .kn button.nein { color:var(--rot); }
.quelle { display:flex; align-items:center; gap:10px; background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; margin-bottom:6px; }
.quelle .tx { flex:1; min-width:0; } .quelle b { display:block; font-size:15px; } .quelle small { color:var(--grau); font-size:12px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.schalter { width:50px; height:30px; border-radius:15px; background:var(--linie); position:relative; flex:none; }
.schalter::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:left .15s; }
.schalter.on { background:var(--gruen); } .schalter.on::after { left:23px; }

/* ---------- Einkauf / Vorrat ---------- */
.eink { display:flex; align-items:center; gap:10px; background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:10px 12px; margin-bottom:6px; }
.eink .ab { font-size:24px; width:32px; text-align:center; }
.eink .tx { flex:1; font-size:16px; } .eink.erledigt .tx { color:var(--grau); text-decoration:line-through; }
.eink input { width:80px; text-align:right; border:0; border-bottom:2px solid var(--linie); background:none; font-weight:800; font-size:16px; }
.eink .x { color:var(--grau); font-size:20px; padding:4px 6px; }

/* ---------- Editor ---------- */
.ed-zeile { display:grid; grid-template-columns:64px 56px 1fr 90px 30px; gap:4px; margin-bottom:6px; align-items:center; }
.ed-zeile input, .ed-zeile select { border:1px solid var(--linie); border-radius:8px; padding:7px 6px; background:var(--karte); font-size:15px; width:100%; min-width:0; }
.ed-zeile .x { color:var(--grau); font-size:20px; text-align:center; }
.ed-schritt { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:8px; margin-bottom:6px; }
.ed-schritt .z { display:grid; grid-template-columns:70px 70px 1fr 30px; gap:4px; margin-bottom:4px; }
.ed-schritt input, .ed-schritt select, .ed-schritt textarea { border:1px solid var(--linie); border-radius:8px; padding:6px; background:var(--bg); font-size:15px; width:100%; }
.ed-schritt textarea { min-height:52px; resize:vertical; }

/* ---------- Tablet (iPad ab 768 px): Seitenleiste + Liste neben Rezept ---------- */
@media (min-width: 768px) {
  .nur-tablet { display:initial; } .nur-handy { display:none !important; }
  :root { --nav-h:0px; }
  body { display:flex; }
  nav.nav { position:fixed; top:0; bottom:0; left:0; right:auto; width:200px; height:auto; flex-direction:column; border-top:0; border-right:1px solid var(--linie); padding:calc(16px + var(--sa-t)) 10px 16px calc(10px + var(--sa-l)); gap:4px; }
  nav.nav .marke { font-size:18px; font-weight:800; padding:6px 10px 14px; color:var(--akz); display:block !important; }
  nav.nav a { flex:none; flex-direction:row; justify-content:flex-start; gap:10px; padding:11px 12px; border-radius:10px; font-size:15px; }
  nav.nav a.on { background:var(--akz-h); }
  nav.nav a .z { position:static; margin-left:auto; }
  #app { margin-left:200px; flex:1; padding-bottom:20px; min-width:0; }
  .inhalt { max-width:900px; padding:14px 22px; }
  .kopf { padding-left:22px; padding-right:22px; }
  .kopf h1 { font-size:24px; }
  .aktionen { bottom:0; }
  .hinweis { bottom:24px; }
  .blatt { align-items:center; } .blatt > div { border-radius:18px; max-height:86vh; }
  /* Rezepte: Liste links, Rezept rechts */
  .split { display:grid; grid-template-columns:minmax(280px,40%) 1fr; min-height:calc(100vh - 60px); } /* Liste max. ein Drittel, damit das Rezept auch bei A+ Platz hat */
  .split > .liste { border-right:1px solid var(--linie); overflow:auto; max-height:calc(100vh - 60px); }
  .split > .detail { min-width:0; }
  .split .inhalt { padding:12px 16px; }
  .buecher { grid-template-columns:1fr 1fr 1fr; }
  .korb { grid-template-columns:repeat(3,1fr); }
  .koch .txt { font-size:34px; }
  .koch .timer b { font-size:56px; } .koch .timer button { padding:18px 24px; font-size:22px; }
  .koch .fuss button { padding:20px; font-size:22px; }
}
/* iPad hochkant (768–999 px): schmalere Seitenleiste + Liste, damit die Rezept-Spalte breit genug ist (Prüfung 29.10.2026: vorher 240 px, Tabellen/Knöpfe liefen über) */
@media (min-width: 768px) and (max-width: 999px) {
  nav.nav { width:160px; padding-left:calc(6px + var(--sa-l)); padding-right:6px; }
  nav.nav a { padding:11px 10px; font-size:14px; }
  #app { margin-left:160px; }
  .split .inhalt { padding:12px 12px; }
  .split .kopf { padding-left:12px; padding-right:12px; }
  .split .tabs { margin-left:12px; margin-right:12px; }
  .split .karte { padding-left:12px; padding-right:12px; }
}
@media (min-width: 1000px) {
  .karten.neben-auto { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; overflow:visible; padding:0 16px; }
  .karten.neben-auto .karte { padding:0; }
  .foto { height:220px; }
}
@media print {
  nav.nav, .kopf, .aktionen, .tabs, .aplus { display:none !important; }
  #app { margin:0; padding:0; } body { background:#fff; }
}

/* Tippflächen ≥ 44 px (Prüfung 29.10.2026, iPad) */
.nur-tablet, .ab, .x, .knopf.klein { min-height:44px; }