/* Einkaufsliste - handyoptimiert, funktioniert auch am PC */
:root {
  --gruen: #2e7d32;
  --gruen-hell: #e8f5e9;
  --rot: #c62828;
  --gelb: #f9a825;
  --text: #1a1c19;
  --grau: #6b6f6a;
  --linie: #e2e5e0;
  --flaeche: #ffffff;
  --hintergrund: #f5f6f4;
  --radius: 14px;
  --kopf: 56px;
  --fuss: 64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; color: var(--text); background: var(--hintergrund);
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ---------------------------------------------------------------- Grundgeruest */
#app { display: flex; flex-direction: column; min-height: 100dvh; }

.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--gruen); color: #fff;
  padding: env(safe-area-inset-top) 0 0 0;
}
.kopf-zeile {
  height: var(--kopf); display: flex; align-items: center; gap: 12px; padding: 0 16px;
}
.kopf-zeile h1 { font-size: 1.15rem; margin: 0; flex: 1; font-weight: 600; }
.kopf-knopf {
  color: #fff; font-size: 1.4rem; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.kopf-knopf:active { background: rgba(255,255,255,.2); }

/* Summenleiste */
.summen {
  display: flex; background: rgba(0,0,0,.13); padding: 10px 16px;
  padding-bottom: 12px; gap: 8px;
}
.summe-block { flex: 1; text-align: center; }
.summe-block .wert { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.summe-block .titel { display: block; font-size: .72rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.summe-block.gross .wert { font-size: 1.6rem; }

main { flex: 1; padding: 12px 12px calc(var(--fuss) + 84px) 12px; }

/* ---------------------------------------------------------------- Fussnavigation */
.fuss {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: var(--flaeche); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.fuss button {
  flex: 1; height: var(--fuss); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: .7rem; color: var(--grau);
}
.fuss button .zeichen { font-size: 1.35rem; line-height: 1; }
.fuss button.aktiv { color: var(--gruen); font-weight: 600; }

/* ---------------------------------------------------------------- Bausteine */
.karte {
  background: var(--flaeche); border-radius: var(--radius);
  border: 1px solid var(--linie); margin-bottom: 12px; overflow: hidden;
}
.karte-kopf {
  padding: 10px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--grau);
  display: flex; align-items: center; gap: 8px; background: #fafbfa;
  border-bottom: 1px solid var(--linie);
}
.punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.zeile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--linie); min-height: 60px;
}
.zeile:last-child { border-bottom: none; }
.zeile:active { background: #f2f4f1; }

.haken {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--linie);
  flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: transparent; background: #fff;
}
.haken.an { background: var(--gruen); border-color: var(--gruen); color: #fff; }

.zeile-text { flex: 1; min-width: 0; }
.zeile-name { font-weight: 600; }
.zeile-unten { font-size: .82rem; color: var(--grau); margin-top: 2px; }
.zeile-rechts { text-align: right; flex: none; }
.zeile-preis { font-weight: 700; }
.zeile-hinweis { font-size: .75rem; color: var(--grau); }

.erledigt .zeile-name { text-decoration: line-through; color: var(--grau); }

.mini-bild {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
  flex: none; background: var(--hintergrund); border: 1px solid var(--linie);
}

.merker {
  display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; background: var(--gelb); color: #3a2c00; margin-left: 6px;
  vertical-align: 1px;
}

.leer { text-align: center; color: var(--grau); padding: 48px 24px; }
.leer .zeichen { font-size: 2.6rem; display: block; margin-bottom: 10px; opacity: .5; }

/* ---------------------------------------------------------------- Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gruen); color: #fff; border-radius: 12px;
  padding: 14px 18px; font-weight: 600; width: 100%; min-height: 50px;
}
.knopf:active { filter: brightness(.92); }
.knopf.zweit { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); }
.knopf.gefahr { background: var(--rot); }
.knopf.klein { padding: 9px 14px; min-height: 40px; width: auto; font-size: .88rem; }
.knopf:disabled { opacity: .5; }

.plus {
  position: fixed; right: 18px; bottom: calc(var(--fuss) + 18px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%; background: var(--gruen); color: #fff;
  font-size: 2rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); z-index: 25;
}

/* ---------------------------------------------------------------- Formulare */
.feld { margin-bottom: 14px; }
.feld label {
  display: block; font-size: .8rem; font-weight: 600; color: var(--grau);
  margin-bottom: 6px;
}
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--linie);
  border-radius: 12px; background: var(--flaeche); min-height: 50px;
}
.feld input:focus, .feld select:focus { outline: 2px solid var(--gruen); border-color: var(--gruen); }
.feld-paar { display: flex; gap: 10px; }
.feld-paar > * { flex: 1; }

.schalter { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.schalter input { width: 24px; height: 24px; accent-color: var(--gruen); flex: none; }
.schalter label { margin: 0; font-size: 1rem; color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------- Blatt (Sheet) */
/* Auf dem Handy sitzt das Blatt am oberen Rand und nimmt die volle Hoehe
   ein. Frueher war es unten angedockt - sobald die Tastatur aufging, lagen
   die Felder darunter und man musste hochscrollen. Zusammen mit
   interactive-widget=resizes-content in der index.html schrumpft das Blatt
   auf den Platz ueber der Tastatur, statt sich dahinter zu verstecken. */
.blatt-hintergrund {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40;
  display: flex; align-items: flex-start; justify-content: center;
}
.blatt {
  background: var(--hintergrund); width: 100%; max-width: 640px;
  height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column;
  animation: hoch .18s ease-out;
}
@keyframes hoch { from { transform: translateY(-24px); opacity: .6; } }
.blatt-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) 16px 16px 16px;
  border-bottom: 1px solid var(--linie); background: var(--flaeche);
}
.blatt-kopf h2 { margin: 0; font-size: 1.05rem; flex: 1; }
.blatt-inhalt { padding: 16px; overflow-y: auto; flex: 1; }
.blatt-fuss {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
  border-top: 1px solid var(--linie); background: var(--flaeche); display: flex; gap: 10px;
}
.blatt-fuss > * { flex: 1; }

@media (min-width: 700px) {
  /* Am PC bleibt alles wie gehabt: mittig im Bild, so hoch wie noetig. */
  .blatt-hintergrund { align-items: center; }
  .blatt { border-radius: 20px; height: auto; max-height: 86dvh; }
  .blatt-kopf { border-radius: 20px 20px 0 0; padding: 16px; }
  main { max-width: 720px; margin: 0 auto; width: 100%; }
  .kopf-zeile, .summen { max-width: 720px; margin: 0 auto; width: 100%; }
  .fuss { max-width: 720px; margin: 0 auto; border-radius: 16px 16px 0 0; }
  .plus { right: calc(50% - 360px + 18px); }
}

/* ---------------------------------------------------------------- Letzter Preis */
.preis-tipp {
  background: var(--gruen-hell); border: 1px solid #c8e6c9; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px; font-size: .9rem;
}
.preis-tipp .gross { font-size: 1.25rem; font-weight: 700; color: var(--gruen); }
.preis-tipp .wann { color: var(--grau); font-size: .82rem; }

/* ---------------------------------------------------------------- Anmeldung */
.anmeldung {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; gap: 8px;
  background: var(--gruen); color: #fff;
}
.anmeldung .logo { font-size: 3.4rem; }
.anmeldung h1 { margin: 0 0 4px; font-size: 1.5rem; }
.anmeldung .box {
  background: var(--flaeche); color: var(--text); border-radius: 20px;
  padding: 22px; width: 100%; max-width: 360px; margin-top: 16px;
}
/* Echtes Passwortfeld fuer den PIN. Es steht ausserhalb des sichtbaren
   Bereichs, existiert aber wirklich - nur so bietet der Browser an, die
   Zugangsdaten zu speichern und beim naechsten Mal auszufuellen. */
.pin-feld { position: absolute; left: -9999px; top: 0; width: 200px; height: 40px; }
.pin-punkte { display: flex; justify-content: center; gap: 14px; margin: 6px 0 18px; }
.pin-punkt {
  width: 15px; height: 15px; border-radius: 50%; background: var(--linie);
  transition: background .12s;
}
.pin-punkt.voll { background: var(--gruen); }
.pin-punkt.fehler { background: var(--rot); }
.zahlenfeld { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.zahlenfeld button {
  height: 62px; border-radius: 14px; background: var(--hintergrund);
  font-size: 1.5rem; font-weight: 600; border: 1px solid var(--linie);
}
.zahlenfeld button:active { background: var(--gruen-hell); }
.zahlenfeld button.leer { background: none; border: none; }

.meldung { min-height: 22px; text-align: center; color: var(--rot); font-size: .88rem; }
.wackeln { animation: wackel .32s; }
@keyframes wackel {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* ---------------------------------------------------------------- Toast */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--fuss) + 90px); background: #333; color: #fff;
  padding: 12px 20px; border-radius: 30px; z-index: 60; font-size: .9rem;
  max-width: 88vw; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#toast.an { opacity: 1; }
#toast.fehler { background: var(--rot); }

/* ---------------------------------------------------------------- Preisverlauf */
.verlauf { width: 100%; height: 130px; display: block; }
.verlauf-leer { color: var(--grau); font-size: .9rem; padding: 16px; text-align: center; }

.laden-anzeige {
  position: fixed; inset: 0; background: rgba(255,255,255,.82); z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.kreisel {
  width: 42px; height: 42px; border: 4px solid var(--linie);
  border-top-color: var(--gruen); border-radius: 50%; animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Sortierpfeile */
.sortier-knopf {
  width: 44px; height: 44px; flex: none; border-radius: 10px;
  font-size: 1.15rem; color: var(--gruen); background: var(--hintergrund);
  border: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: center;
}
.sortier-knopf:active { background: var(--gruen-hell); }
.sortier-knopf:disabled { color: var(--linie); background: var(--flaeche); cursor: default; }

/* ---------------------------------------------------------------- Listen */
/* Der Titel im Kopf ist auf der Listenansicht ein Knopf: antippen und die
   Liste wechseln. In allen anderen Ansichten ist er nur Beschriftung. */
.listenwahl {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  color: #fff; font-size: 1.15rem; font-weight: 600;
  padding: 0; text-align: left; cursor: default;
}
.listenwahl #kopftitel {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.listenwahl .pfeil { display: none; font-size: .75rem; opacity: .8; }
.listenwahl.waehlbar { cursor: pointer; }
.listenwahl.waehlbar .pfeil { display: inline; }
.listenwahl.waehlbar:active { opacity: .7; }

/* Umschalter im Archiv: diese Liste oder alle */
.archiv-schalter { display: flex; gap: 8px; margin-bottom: 14px; }
.archiv-schalter button {
  flex: 1; min-height: 42px; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--flaeche);
  font-size: .85rem; font-weight: 600; color: var(--grau);
}
.archiv-schalter button.aktiv {
  background: var(--gruen); border-color: var(--gruen); color: #fff;
}