/* Zuhause — gebaut fürs Handy, der große Bildschirm ist der Sonderfall.
   Keine externen Schriften (CSP font-src 'self'): Systemschrift.
   Keine style-Attribute im HTML (CSP style-src 'self'): jede Abweichung steht hier. */

:root{
  --ground:#FAF6F0;
  --surface:#FFFFFF;
  --surface-2:#F2ECE3;
  --surface-3:#E8E0D4;
  --ink:#2B2320;
  --ink-2:#5E534C;
  --ink-3:#8C8079;
  --line:#E4DBCE;
  --line-strong:#CFC3B2;
  --accent:#A8552F;
  --accent-hover:#8C4526;
  --accent-soft:#F7E7DD;
  --on-accent:#FFFFFF;
  --gruen:#3F6F45;
  --gruen-soft:#E3EEE1;
  --rot:#A33125;
  --rot-soft:#F8E3E0;
  --shadow:0 1px 2px rgba(43,35,32,.06), 0 8px 24px -14px rgba(43,35,32,.25);
  --radius:12px;
  --sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --leiste:64px;                      /* Höhe der Tableiste am unteren Rand */
  --unten:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#14110E;
    --surface:#1E1A16;
    --surface-2:#272119;
    --surface-3:#322A20;
    --ink:#EFE8DF;
    --ink-2:#B5AA9D;
    --ink-3:#8A7F73;
    --line:#312A22;
    --line-strong:#463C31;
    --accent:#E08A5F;
    --accent-hover:#EFA079;
    --accent-soft:#33221A;
    --on-accent:#221009;
    --gruen:#87BA83;
    --gruen-soft:#1D2A1C;
    --rot:#E08D80;
    --rot-soft:#2E1A17;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
/* Eigene display-Regeln schlagen sonst das eingebaute [hidden] des Browsers —
   dann steht ein ausgeblendeter Kasten trotzdem auf der Seite. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.55 var(--sans);
  /* Platz für die Tableiste, damit nichts dahinter verschwindet. */
  padding-bottom:calc(var(--leiste) + var(--unten));
  overscroll-behavior-y:contain;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.4rem; margin:0 0 .6rem; letter-spacing:-.01em}
h2{font-size:1.05rem; margin:1.5rem 0 .5rem}
h3{font-size:1rem; margin:0 0 .4rem}
p{margin:.4rem 0}
img{max-width:100%; height:auto}
/* Kein blaues Aufblitzen beim Tippen, dafür ein sichtbarer Ring für Tastaturbedienung. */
a, button, label, summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky; top:0; z-index:10;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top, 0px);
}
.kopf-innen{
  max-width:820px; margin:0 auto; padding:.55rem 1rem;
  display:flex; align-items:center; gap:.75rem; min-height:52px;
}
.marke{font-weight:700; color:var(--ink); font-size:1.05rem}
.marke:hover{text-decoration:none}
.kopf-rechts{margin-left:auto; display:flex; align-items:center; gap:.5rem}
.nav{display:none}                    /* am Handy übernimmt die Tableiste unten */

main{max-width:820px; margin:0 auto; padding:1rem}
.solo{max-width:420px; margin:0 auto; padding:2.5rem 1rem}

/* ---------- Tableiste unten (Daumenbereich) ---------- */
.tableiste{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:var(--unten);
}
.tableiste a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; height:var(--leiste); color:var(--ink-3); font-size:.7rem; font-weight:600;
}
.tableiste a:hover{text-decoration:none}
.tableiste a.aktiv{color:var(--accent)}
.tableiste svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.tableiste a.aktiv svg{stroke-width:2.3}

/* ---------- Karten ---------- */
.karte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow); margin-bottom:1rem;
}
.karte.schmal{padding:.5rem .75rem}
.kachel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem; box-shadow:var(--shadow);
}
.kachel .wert{font-size:1.5rem; font-weight:700; letter-spacing:-.01em; display:block; margin-top:.15rem}
.marke-klein, .label{font-size:.75rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}

/* ---------- Startseite: zwei Türen ---------- */
.tueren{display:grid; gap:1rem; grid-template-columns:1fr}
.tuer{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.tuer-flaeche{
  display:block; padding:1.3rem 1.1rem 1.1rem; color:var(--ink); text-align:center;
  border-bottom:1px solid var(--line);
}
.tuer-flaeche:active{background:var(--surface-2)}
.tuer-flaeche:hover{text-decoration:none}
.tuer-zeichen{
  display:grid; place-items:center; width:60px; height:60px; margin:0 auto .5rem;
  border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:1.7rem;
}
.tuer-name{display:block; font-size:1.2rem; font-weight:700}
.tuer-zahl{display:block; font-size:1.8rem; font-weight:700; letter-spacing:-.02em; margin-top:.3rem}
.tuer-hinweis{display:block; font-size:.85rem; color:var(--ink-3); margin-top:.2rem}
.tuer-knoepfe{display:flex; gap:.6rem; padding:.8rem}
.tuer-knoepfe .knopf{flex:1}

/* ---------- Listen ---------- */
.liste{list-style:none; margin:0; padding:0}
.liste li{border-bottom:1px solid var(--line)}
.liste li:last-child{border-bottom:0}
.zeile{
  display:flex; align-items:center; gap:.75rem; padding:.7rem .25rem; color:var(--ink);
  min-height:56px;                    /* bequem zu treffen */
}
.zeile:hover{text-decoration:none}
.zeile:active{background:var(--surface-2)}
.zeile .bild, .zeile .platzhalter{
  width:52px; height:52px; border-radius:10px; flex:none;
  background:var(--surface-2); border:1px solid var(--line);
}
.zeile .bild{object-fit:cover}
.zeile .platzhalter{display:grid; place-items:center; color:var(--ink-3); font-size:1.1rem}
.zeile .mitte{flex:1; min-width:0}
.zeile .titel{font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zeile .unten{font-size:.85rem; color:var(--ink-3); display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zeile .betrag{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}

.leer{color:var(--ink-3); text-align:center; padding:2rem 1rem}

/* ---------- Rezeptkarten ---------- */
.gitter{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.75rem}
.rezeptkarte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); color:var(--ink); display:block;
}
.rezeptkarte:hover{text-decoration:none}
.rezeptkarte:active{border-color:var(--line-strong)}
.rezeptkarte img, .rezeptkarte .kein-bild{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--surface-2);
}
.rezeptkarte .kein-bild{display:grid; place-items:center; color:var(--ink-3); font-size:1.6rem}
.rezeptkarte .text{padding:.6rem .7rem}
.rezeptkarte .text b{display:block; font-size:.95rem; line-height:1.3}
.rezeptkarte .text span{font-size:.8rem; color:var(--ink-3)}

/* ---------- Formulare ---------- */
.feld{margin-bottom:.9rem}
.feld label{display:block; font-size:.85rem; color:var(--ink-2); margin-bottom:.3rem; font-weight:600}
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search],
select, textarea{
  width:100%; padding:.7rem .75rem; font:inherit; color:var(--ink); min-height:48px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  /* 16px Mindestgröße: alles darunter lässt iOS beim Tippen in die Seite hineinzoomen. */
  font-size:16px;
}
textarea{min-height:7rem; resize:vertical; line-height:1.5}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
input.betrag-feld{font-size:1.5rem; font-weight:700; letter-spacing:-.01em; min-height:60px}
.hinweis{font-size:.82rem; color:var(--ink-3); margin-top:.3rem}
.reihe{display:flex; gap:.75rem}
.reihe > *{flex:1; min-width:0}

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:48px; padding:.65rem 1rem; border-radius:12px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font:inherit; font-size:1rem; font-weight:600; cursor:pointer; text-align:center;
}
.knopf:hover{text-decoration:none}
.knopf:active{background:var(--surface-2)}
.knopf.haupt{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.knopf.haupt:active{background:var(--accent-hover)}
.knopf.gefahr{color:var(--rot); border-color:var(--rot)}
.knopf.gefahr:active{background:var(--rot-soft)}
.knopf.breit{width:100%}
.knopf.klein{min-height:40px; padding:.35rem .75rem; font-size:.9rem; border-radius:10px}
.knopfreihe{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}

/* Der wichtigste Knopf klebt am unteren Rand — erreichbar, ohne ans Ende zu scrollen. */
.speicherleiste{
  position:sticky; bottom:calc(var(--leiste) + var(--unten)); z-index:5;
  margin:1rem -1rem 0; padding:.7rem 1rem;
  background:linear-gradient(to bottom, transparent, var(--ground) 45%);
}

.meldung{
  padding:.7rem .85rem; border-radius:10px; margin-bottom:1rem;
  background:var(--rot-soft); color:var(--rot); border:1px solid var(--rot);
}
.meldung.gut{background:var(--gruen-soft); color:var(--gruen); border-color:var(--gruen)}

/* ---------- Foto auswählen ---------- */
.fotofeld{margin-bottom:1rem}
.versteckt{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.fotoknopf{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  width:100%; min-height:132px; padding:1.1rem; text-align:center; cursor:pointer;
  border:2px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--surface-2); color:var(--ink-2); font-weight:600; font-size:1rem;
}
.fotoknopf:active{background:var(--surface-3); border-color:var(--accent)}
.fotoknopf svg{width:34px; height:34px; fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:.35rem}
.fotoknopf .klein{font-size:.82rem; font-weight:400; color:var(--ink-3)}
.fotovorschau{
  display:flex; align-items:center; gap:.8rem; padding:.6rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2);
}
.fotovorschau img{width:76px; height:76px; object-fit:cover; border-radius:10px; flex:none;
  border:1px solid var(--line)}
.fotovorschau .mitte{flex:1; min-width:0}
.fotovorschau .name{display:block; font-weight:600; font-size:.9rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fotovorschau .tauschen{margin-top:.45rem; display:flex; gap:.5rem; flex-wrap:wrap}

/* ---------- Filter ---------- */
.filter{display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1rem}
.filter .feld{margin:0; flex:1 1 9rem}
.filter .feld.weit{flex:1 1 100%}
.filter .knopf{flex:1 1 100%}
.marken{display:flex; gap:.4rem; flex-wrap:wrap; margin:.5rem 0 1rem}
.marke-chip{
  display:inline-flex; align-items:center; min-height:38px; padding:.3rem .8rem;
  border-radius:999px; background:var(--surface-2); color:var(--ink-2);
  font-size:.88rem; border:1px solid var(--line);
}
.marke-chip:hover{text-decoration:none}
.marke-chip.aktiv{background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600}

/* ---------- Balken ---------- */
.balken{height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin-top:.35rem}
.balken > div{height:100%; background:var(--accent); border-radius:999px}
.balken.voll > div{background:var(--rot)}

/* ---------- Tabelle ---------- */
.tabelle{width:100%; border-collapse:collapse; font-size:.95rem}
.tabelle th, .tabelle td{padding:.6rem .4rem; border-bottom:1px solid var(--line); text-align:left}
.tabelle th{font-size:.75rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
.tabelle td.zahl, .tabelle th.zahl{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- Detailseiten ---------- */
.zutaten{list-style:none; padding:0; margin:0}
.zutaten li{padding:.5rem 0; border-bottom:1px dashed var(--line)}
.schritte{padding-left:1.2rem; margin:0}
.schritte li{padding:.4rem 0}
.belegbild{border-radius:var(--radius); border:1px solid var(--line); display:block; margin-top:.5rem}
.zurueck{display:inline-flex; align-items:center; min-height:40px; margin-bottom:.4rem;
  font-size:.95rem; color:var(--ink-2)}

/* ---------- Schwebender Knopf ---------- */
.plus{
  position:fixed; right:1rem; z-index:20;
  bottom:calc(var(--leiste) + var(--unten) + .9rem);
  width:58px; height:58px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:1.9rem; line-height:1;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.55);
}
.plus:hover{text-decoration:none}
.plus:active{background:var(--accent-hover)}

.fussnote{color:var(--ink-3); font-size:.8rem; text-align:center; margin-top:1.5rem}

/* ---------- Kleine Helfer ---------- */
.abstand{margin-bottom:1rem}
.abstand-klein{margin-bottom:.9rem}
.ohne-abstand{margin-bottom:0}
.hoch{margin-top:.5rem}
.hoch-klein{margin-top:.2rem}
.flach{padding:0; min-height:0}
.bild-klein{max-width:160px}
.bild-mittel{max-width:200px}
.umbruch{white-space:pre-wrap}
.wahl{display:flex; align-items:center; gap:.5rem; min-height:44px; font-weight:400}
.wahl input{width:22px; height:22px; flex:none; min-height:0}
.hohes-feld{min-height:11rem}
.weit{flex:1 1 100%}
.gut{color:var(--gruen)}
.schlecht{color:var(--rot)}

/* ---------- Ab Tablet ---------- */
@media (min-width:640px){
  body{padding-bottom:2rem}
  .tableiste{display:none}
  .nav{
    display:flex; gap:.25rem; max-width:820px; margin:0 auto; padding:0 .6rem .5rem;
    overflow-x:auto; scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:.4rem .8rem; border-radius:999px; white-space:nowrap;
    color:var(--ink-2); font-size:.95rem}
  .nav a:hover{background:var(--surface-2); text-decoration:none}
  .nav a.aktiv{background:var(--accent-soft); color:var(--accent); font-weight:600}
  main{padding:1.25rem 1rem 3rem}
  h1{font-size:1.7rem}
  .tueren{grid-template-columns:1fr 1fr}
  .kacheln{display:grid; grid-template-columns:repeat(4, 1fr); gap:.75rem; margin-bottom:1rem}
  .filter .knopf{flex:0 0 auto}
  .filter .feld.weit{flex:2 1 12rem}
  .speicherleiste{position:static; margin:1rem 0 0; padding:0; background:none}
  .plus{bottom:1.5rem; right:1.5rem}
}