/* =====================================================================
   Einkauf — Aussehen wie die ToDo-Sidebar: Arial, rote Kreise, schwarze
   Schrift. Text ist nie grau (Schriftfarben-Regel), Grau nur für Linien.
   ===================================================================== */
:root {
  --rot: #b91c1c;
  --rot-dunkel: #8f1414;
  --rot-hell: #fdeeee;
  --text: #111111;
  --linie: #d4d4d4;
  --linie-hell: #ececec;
  --flaeche: #f6f6f3;
  --gruen: #15803d;
}

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

html, body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100vh;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

#app { max-width: 640px; margin: 0 auto; padding: 10px 14px 96px; }
.ansicht-kueche #app { max-width: none; padding: 14px 22px 96px; }

/* ---------- Kopf ---------- */
.kopf { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; }
.kopf h1 { margin: 0; color: var(--rot); font-size: 32px; font-weight: 700; letter-spacing: -0.5px; }
.datum { display: none; font-size: 18px; font-weight: 700; }
.ansicht-kueche .datum { display: inline; }
.zaehler { margin-left: auto; font-size: 15px; font-weight: 700; }
.zaehler { white-space: nowrap; }
.status-leiste {
  background: var(--rot); color: #ffffff; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px;
  font-size: 15px; font-weight: 700; text-align: center;
}
.zahnrad {
  border: 0; background: none; font-size: 26px; line-height: 1;
  width: 44px; height: 44px; border-radius: 50%;
}
.zahnrad:active { background: var(--flaeche); }

/* ---------- Eingabe ---------- */
.eingabe { margin-bottom: 10px; }
.eingabe-zeile { display: flex; gap: 8px; }
.feld {
  flex: 1; min-width: 0; width: 100%;
  border: 2px solid var(--text); border-radius: 12px;
  padding: 11px 13px; font-size: 18px; background: #ffffff;
  outline: none; -webkit-appearance: none; appearance: none;
}
.feld::placeholder { color: var(--text); opacity: 1; font-weight: 400; }
.feld:focus { border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-hell); }
.dazu {
  border: 0; border-radius: 12px; background: var(--rot); color: #ffffff;
  font-weight: 700; padding: 0 18px; min-height: 48px;
}
.dazu:active { background: var(--rot-dunkel); }

.ziele, .vorschlaege {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: center; margin-top: 12px;
}
/* Robert, 14.10.2026: Beschriftung oben in eigener Zeile, Knöpfe und Pillen darunter in der Mitte */
.ziele-titel, .vorschlaege-titel { flex-basis: 100%; text-align: center; font-size: 14px; font-weight: 700; margin: 0 0 1px; }
.ziel {
  border: 2px solid var(--text); border-radius: 10px;
  padding: 7px 12px; font-size: 15px; font-weight: 700; min-height: 40px;
}
.vorschlag {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--linie); background: var(--flaeche); border-radius: 999px;
  padding: 5px 6px 5px 12px; font-size: 14px; min-height: 36px;
}
.marke-mini {
  border: 1.5px solid; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700;
}

/* Handy: „Eintragen bei" und Vorschläge nur beim Schreiben — sonst ist die Liste im Blick */
.ansicht-handy .eingabe:not(:focus-within):not(.hat-text) .ziele,
.ansicht-handy .eingabe:not(:focus-within):not(.hat-text) .vorschlaege { display: none; }

/* ---------- Filter (nur Handy) ---------- */
.filter {
  display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 10px; margin: 0 -14px;
  padding-left: 14px; padding-right: 14px; scrollbar-width: none;
}
.filter::-webkit-scrollbar { display: none; }
.ansicht-kueche .filter { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--text); background: #ffffff; border-radius: 999px;
  padding: 6px 13px; font-size: 15px; font-weight: 700; white-space: nowrap; min-height: 38px;
}

.chip-zahl {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: #ffffff;
}
.chip.an.marke-alle .chip-zahl, .chip.an.marke-egal .chip-zahl, .chip.an.marke-andere .chip-zahl { background: #ffffff; color: var(--rot); }

/* ---------- Liste ---------- */
.gruppe { margin-top: 14px; }
.gruppe-kopf {
  display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 2px;
  font-size: 17px; font-weight: 700; border-bottom: 2px solid var(--text); padding-bottom: 4px;
}
.gruppe-egal .gruppe-kopf { border-bottom-style: dashed; }
.marke-schild {
  display: inline-block; border: 2px solid; border-radius: 8px; padding: 2px 10px 4px; line-height: 1.25;
}
.marke-egal.marke-schild { border-style: dashed; }
.gruppe-zahl { font-size: 15px; }

.eintrag { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--linie-hell); }
.kreis {
  flex: none; width: 44px; height: 44px; border: 0; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center; position: relative;
  font-size: 14px; font-weight: 700; color: #ffffff;
}
.kreis::before {
  content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--rot); box-sizing: border-box;
}
.kreis.voll::before { background: var(--rot); }
.kreis { z-index: 0; }
.kreis::before { z-index: -1; }
.eintrag-text {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none;
  padding: 11px 4px; font-size: 18px; overflow-wrap: anywhere;
}
.eintrag.erledigt .eintrag-text { text-decoration: line-through; text-decoration-thickness: 2px; }
.leer { margin: 8px 0 4px; font-size: 15px; font-weight: 700; }
.laden { font-weight: 700; }

.alles-da { text-align: center; padding: 40px 10px; }
.alles-da-gross { font-size: 26px; font-weight: 700; margin: 0 0 6px; }

/* ---------- Küchen-Ansicht: alles größer, Geschäfte nebeneinander ---------- */
.ansicht-kueche .kopf h1 { font-size: 40px; }
.ansicht-kueche .zaehler { font-size: 20px; }
.ansicht-kueche .zahnrad { font-size: 32px; width: 54px; height: 54px; }
.ansicht-kueche .feld { font-size: 30px; padding: 16px 18px; border-width: 3px; border-radius: 16px; }
.ansicht-kueche .dazu { font-size: 22px; padding: 0 28px; border-radius: 16px; }
.ansicht-kueche .ziel { font-size: 18px; padding: 10px 16px; min-height: 52px; }
.ansicht-kueche .ziele-titel, .ansicht-kueche .vorschlaege-titel { font-size: 16px; }
.ansicht-kueche .vorschlag { font-size: 16px; min-height: 44px; padding: 8px 14px; }
.ansicht-kueche .liste {
  display: grid; gap: 14px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ansicht-kueche .gruppe {
  margin: 0; border: 2px solid var(--m-rand, var(--linie)); border-radius: 16px; padding: 0 0 8px;
  min-height: 120px; overflow: hidden;
}
.ansicht-kueche .gruppe-egal { border-style: dashed; }
.ansicht-kueche .gruppe-kopf {
  font-size: 20px; margin: 0 0 4px; padding: 10px 14px 12px; border-bottom: 0;
  background-color: var(--m-bg, #ffffff); color: var(--m-fg, var(--text));
  text-transform: var(--m-gross, none);
  background-image: var(--m-streifen, none); background-repeat: no-repeat;
  background-position: bottom; background-size: 100% 5px;
}
.ansicht-kueche .gruppe-egal .gruppe-kopf { border-bottom: 2px dashed var(--text); }
/* In der Küche ist der ganze Kopf das Schild — das kleine Schild darin entfällt */
.ansicht-kueche .gruppe .marke-schild { border: 0; padding: 0; background: none; color: inherit; }
.ansicht-kueche .gruppe .eintrag, .ansicht-kueche .gruppe .leer { margin-left: 10px; margin-right: 14px; }
.ansicht-kueche .gruppe .leer { margin-left: 14px; }
.ansicht-kueche .eintrag-text { font-size: 20px; }

/* ---------- Bearbeiten-Fenster ---------- */
.blatt-hintergrund {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
}
.ansicht-kueche .blatt-hintergrund { align-items: center; }
.blatt {
  width: 100%; max-width: 560px; background: #ffffff; border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto;
}
.ansicht-kueche .blatt { border-radius: 18px; }
.blatt h2 { margin: 0 0 12px; font-size: 20px; }
.blatt-titel { font-weight: 700; margin: 14px 0 0; }
.blatt-ziele { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; justify-content: center; }
.blatt-fuss { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* ---------- Knöpfe ---------- */
.knopf {
  border: 2px solid var(--text); background: #ffffff; border-radius: 12px;
  padding: 10px 18px; font-weight: 700; min-height: 46px;
}
.knopf:disabled { border-color: var(--linie); cursor: default; }
.knopf-haupt { background: var(--rot); border-color: var(--rot); color: #ffffff; }
.knopf-haupt:active { background: var(--rot-dunkel); }
.knopf-loeschen { border-color: var(--rot); color: var(--rot); }

/* ---------- Einstellungen ---------- */
.einstellungen h1 { color: var(--rot); font-size: 30px; margin: 10px 0 4px; }
.abschnitt { border-top: 2px solid var(--text); margin-top: 22px; padding-top: 12px; }
.abschnitt h2 { margin: 0 0 4px; font-size: 20px; }
.abschnitt p { margin: 0 0 10px; }
.zurueck {
  border: 0; background: none; padding: 10px 0; font-weight: 700; font-size: 17px; color: var(--rot);
}
.geschaeft-reihe { display: flex; gap: 6px; align-items: center; margin-bottom: 7px; }
.geschaeft-reihe .feld { padding: 9px 11px; font-size: 17px; }
.klein {
  flex: none; border: 2px solid var(--text); background: #ffffff; border-radius: 10px;
  min-width: 44px; height: 44px; font-weight: 700; font-size: 17px; padding: 0 8px;
}
.klein:disabled { border-color: var(--linie); cursor: default; }
.klein-loeschen { border-color: var(--rot); color: var(--rot); font-size: 14px; }
.geschaeft-neu { display: flex; gap: 8px; margin-top: 12px; }
.ansicht-wahl { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Hinweis-Leiste ---------- */
.hinweis {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
  background: var(--text); color: #ffffff; border-radius: 12px;
  padding: 12px 16px; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100% - 28px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.hinweis-fehler { background: var(--rot); }
/* Ist das Bearbeiten-Fenster offen, nach oben — sonst verdeckt sie „Löschen" und „Fertig" */
.blatt-offen .hinweis { top: calc(14px + env(safe-area-inset-top)); bottom: auto; }
.hinweis-knopf {
  border: 2px solid #ffffff; background: none; color: #ffffff; border-radius: 9px;
  padding: 6px 12px; font-weight: 700; white-space: nowrap;
}

/* ---------- Anmeldung ---------- */
.anmeldung { max-width: 380px; margin: 12vh auto 0; display: flex; flex-direction: column; gap: 12px; }
.anmeldung h1 { margin: 0; color: var(--rot); font-size: 40px; }
.anmeldung p { margin: 0; }
.anmelde-fehler {
  background: var(--rot-hell); border: 2px solid var(--rot); border-radius: 10px;
  padding: 10px 12px; font-weight: 700;
}

/* =====================================================================
   Geschäfts-Farben (Robert, 14.10.2026) — aus den Logo-Dateien übernommen
   (public/logos/, Wikimedia Commons). Wo das Logo selbst auf Weiß gedacht ist
   (dm, Müller, Spar, Action), ist der Knopf weiß mit farbigem Rand, sonst würde
   das Logo im Hintergrund verschwinden. Schrift mind. 4,5:1 Kontrast.
   ===================================================================== */
.marke-lidl     { --m-bg: #0050AA; --m-fg: #FFF000; --m-rand: #E60A14; }
.marke-hofer    { --m-bg: #1B4F93; --m-fg: #FFFFFF; --m-rand: #1B4F93; --m-gross: uppercase;
                  --m-streifen: linear-gradient(90deg, #FDBE43 0 33%, #F47D32 33% 66%, #E30613 66%); }
.marke-penny    { --m-bg: #CD1414; --m-fg: #FFFFFF; --m-rand: #CD1414; --m-gross: uppercase; }
.marke-billa    { --m-bg: #00574F; --m-fg: #FFD500; --m-rand: #00574F; --m-gross: uppercase; }
.marke-dm       { --m-bg: #FFFFFF; --m-fg: #002878; --m-rand: #002878; --m-gross: lowercase; }
.marke-mueller  { --m-bg: #FFFFFF; --m-fg: #111111; --m-rand: #F16426; }
.marke-spar     { --m-bg: #FFFFFF; --m-fg: #111111; --m-rand: #157946; --m-gross: uppercase; }
.marke-action   { --m-bg: #FFFFFF; --m-fg: #001489; --m-rand: #001489; --m-gross: uppercase; }
.marke-baumarkt { --m-bg: #374151; --m-fg: #FFFFFF; --m-rand: #374151; }
.marke-bipa     { --m-bg: #E4007C; --m-fg: #FFFFFF; --m-rand: #E4007C; --m-gross: uppercase; }
.marke-egal, .marke-andere, .marke-alle { --m-bg: #FFFFFF; --m-fg: #111111; --m-rand: #111111; }

.ziel, .chip, .marke-schild, .marke-mini {
  background-color: var(--m-bg, #ffffff); color: var(--m-fg, var(--text));
  border-color: var(--m-rand, var(--text)); text-transform: var(--m-gross, none);
  background-image: var(--m-streifen, none); background-repeat: no-repeat;
  background-position: bottom; background-size: 100% 4px;
}
.ziel.marke-egal { border-style: dashed; }

/* Ausgewählt: Geschäfts-Knopf behält seine Farbe und bekommt einen schwarzen Ring + Häkchen */
.ziel.an, .chip.an { outline: 3px solid var(--text); outline-offset: 2px; }
.ziel.an::before, .chip.an::before { content: '✓'; margin-right: 5px; }
/* „Egal wo", „Alle" und selbst angelegte Geschäfte ohne Markenfarbe: wie bisher rot gefüllt */
.ziel.an.marke-egal, .ziel.an.marke-andere,
.chip.an.marke-egal, .chip.an.marke-andere, .chip.an.marke-alle {
  background-color: var(--rot); border-color: var(--rot); color: #ffffff; border-style: solid; outline: none;
}

/* ---------- Logos (Robert, 14.10.2026) ---------- */
.ziel.hat-logo, .chip.hat-logo, .marke-schild.hat-logo, .marke-mini.hat-logo {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* hält den versteckten Namen (.nur-vorleser) im Knopf — sonst macht er die Seite breiter */
  position: relative;
}
/* Handy: 16 px hoch, damit „Eintragen bei" in drei Reihen über die Tastatur passt */
.logo {
  display: block; height: 16px; width: auto; flex: none;
  /* kein „Bild sichern"-Menü beim langen Drücken am iPhone, Tippen geht an den Knopf */
  pointer-events: none; -webkit-touch-callout: none; user-select: none;
}
.ziel.hat-logo { border-width: 3px; padding: 6px 10px; }
.chip.hat-logo { border-width: 2px; padding-top: 4px; padding-bottom: 4px; }
.chip .logo { height: 17px; }
.marke-mini.hat-logo { padding: 2px 7px; gap: 4px; }
.marke-mini .logo { height: 13px; }
.marke-schild.hat-logo { padding: 4px 9px; }
.marke-schild .logo { height: 22px; }
.ansicht-kueche .ziel .logo { height: 26px; }
.ansicht-kueche .gruppe-kopf .logo { height: 30px; }
/* Küche: weiße Kopfleiste (dm, Müller, Spar, Action) bekommt unten eine Linie in der Markenfarbe */
.ansicht-kueche .gruppe-kopf { border-bottom: 3px solid var(--m-rand, transparent); }
.ansicht-kueche .marke-hofer .gruppe-kopf { border-bottom: 0; }
/* Name nur für Vorleseprogramme (das Logo zeigt ihn schon) */
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}