/* =========================================================================
   Einkaufsplaner — Gestaltungsregeln

   Diese Datei wird im Supermarkt gelesen, nicht am Schreibtisch. Daraus
   folgt alles Weitere:

   1. MOBIL ZUERST. Alle Grundwerte gelten für ein Telefon; erst ab 40rem
      kommen Spalten dazu. Bedienelemente sind mindestens 44 px hoch —
      man tippt im Stehen, mit einer Hand, oft mit Einkaufswagen.
   2. VIER RADIEN, nicht mehr: 0 (Trenner), 8px (Felder), 14px (Karten),
      999px (Chips/Marken). Ein fünfter Wert fällt sofort auf.
   3. ABSTÄNDE AUS DEM 4er-RASTER (--s1…--s6). Keine krummen Werte.
   4. EIN AKZENT: Orange (--akzent) markiert, was man antippen kann, und
      sonst nichts. Grün ist ausschließlich Ersparnis, Rot ausschließlich
      eine überschrittene Vorgabe. Preise sind neutral — sie sind Daten,
      keine Warnung.
   5. ZAHLEN sind tabellarisch (font-variant-numeric) und rechtsbündig.
      Preise untereinander müssen sich vergleichen lassen.

   Hell und dunkel werden beide bedient; die Tokens unten sind die einzige
   Stelle, an der Farben stehen.
   ========================================================================= */

:root {
  --bg: #fafaf9;
  --flaeche: #ffffff;
  --flaeche-2: #f5f5f4;
  --linie: #e7e5e4;
  --linie-stark: #d6d3d1;
  --text: #1c1917;
  --text-leise: #57534e;
  --text-schwach: #78716c;

  --akzent: #c2410c;          /* 5.4:1 auf --flaeche */
  --akzent-hell: #fff7ed;
  --akzent-linie: #fdba74;
  --gut: #15803d;
  --gut-hell: #f0fdf4;
  --warn: #b91c1c;
  --warn-hell: #fef2f2;

  --r-feld: 8px;
  --r-karte: 14px;
  --r-chip: 999px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --schatten: 0 1px 2px rgba(28, 25, 23, .06), 0 4px 12px rgba(28, 25, 23, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1917;
    --flaeche: #262322;
    --flaeche-2: #2f2b2a;
    --linie: #3f3a38;
    --linie-stark: #57534e;
    --text: #fafaf9;
    --text-leise: #d6d3d1;
    --text-schwach: #a8a29e;

    --akzent: #fb923c;        /* auf dunklem Grund muss der Ton heller werden */
    --akzent-hell: #3a2416;
    --akzent-linie: #9a3412;
    --gut: #4ade80;
    --gut-hell: #14301f;
    --warn: #fca5a5;
    --warn-hell: #3b1d1d;

    --schatten: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 84px;                    /* Platz für die untere Leiste */
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.huelle { max-width: 900px; margin: 0 auto; padding: var(--s4); }

/* ─── Kopf ─────────────────────────────────────────────────────────────── */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s4) var(--s4) var(--s2);
  max-width: 900px; margin: 0 auto;
}
.kopf h1 { font-size: 1.25rem; margin: 0; letter-spacing: -.02em; }
.kopf .weg { color: var(--text-schwach); font-size: .82rem; }

/* ─── Untere Navigation (mobil zuerst, 4 Ziele) ────────────────────────── */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  min-height: 56px; display: flex; flex-direction: column; gap: 2px;
  align-items: center; justify-content: center;
  color: var(--text-schwach); text-decoration: none; font-size: .7rem;
}
.nav a .zeichen { font-size: 1.15rem; line-height: 1; }
.nav a[aria-current="page"] { color: var(--akzent); font-weight: 600; }

/* ─── Karten ───────────────────────────────────────────────────────────── */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-karte); padding: var(--s4);
  margin-bottom: var(--s4); box-shadow: var(--schatten);
}
.karte > h2 { margin: 0 0 var(--s3); font-size: 1.02rem; letter-spacing: -.01em; }
.karte > h2 .zusatz { float: right; font-weight: 400; color: var(--text-schwach);
                      font-size: .8rem; }

/* ─── Formular ─────────────────────────────────────────────────────────── */
label { display: block; font-size: .82rem; color: var(--text-leise);
        font-weight: 600; margin-bottom: var(--s1); }

input[type=text], input[type=number], input[type=search], textarea, select {
  width: 100%; min-height: 48px; padding: var(--s3);
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--r-feld);
  font: inherit;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent);
}
.feld { margin-bottom: var(--s4); }
.raster { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.hinweis { font-size: .78rem; color: var(--text-schwach); margin: var(--s1) 0 0; }

/* Chips: Märkte und Anlässe. Auswahl per Tippen, kein Aufklappmenü. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--linie-stark); border-radius: var(--r-chip);
  background: var(--flaeche); color: var(--text-leise);
  font-size: .9rem; font-weight: 600; cursor: pointer; user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .punkt { width: 10px; height: 10px; border-radius: var(--r-chip);
               background: var(--marke, var(--text-schwach)); flex: none; }
.chip:has(input:checked) {
  border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }

.anlaesse { display: grid; gap: var(--s2); grid-template-columns: repeat(2, 1fr); }
.anlass {
  position: relative; display: block; padding: var(--s3);
  border: 1px solid var(--linie-stark); border-radius: var(--r-feld);
  background: var(--flaeche); cursor: pointer;
}
.anlass input { position: absolute; opacity: 0; pointer-events: none; }
.anlass b { display: block; font-size: .95rem; }
.anlass span { display: block; font-size: .76rem; color: var(--text-schwach);
               font-weight: 400; line-height: 1.35; }
.anlass:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.anlass:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ─── Knöpfe ───────────────────────────────────────────────────────────── */
button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border: 1px solid var(--linie-stark); border-radius: var(--r-feld);
  background: var(--flaeche); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button:active, .knopf:active { transform: translateY(1px); }
.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; width: 100%; }
@media (prefers-color-scheme: dark) { .primaer { color: #1c1917; } }
.klein { min-height: 40px; padding: 0 var(--s3); font-size: .84rem; }
.gefahr { color: var(--warn); border-color: var(--linie-stark); }
button[disabled] { opacity: .6; cursor: progress; }

/* ─── Listen und Zahlen ────────────────────────────────────────────────── */
.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.leise { color: var(--text-schwach); }
.mini { font-size: .78rem; }

.posten { display: flex; gap: var(--s3); align-items: flex-start;
          padding: var(--s3) 0; border-top: 1px solid var(--linie); }
.posten:first-child { border-top: 0; }
.posten .haken { flex: none; width: 28px; height: 28px; margin-top: 2px; accent-color: var(--akzent); }
.posten .text { flex: 1; min-width: 0; }
.posten .text b { font-weight: 600; }
.posten.erledigt .text { text-decoration: line-through; color: var(--text-schwach); }

.markt { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
         font-weight: 600; color: var(--text-leise); }
.markt .punkt { width: 8px; height: 8px; border-radius: var(--r-chip);
                background: var(--marke, var(--text-schwach)); }

/* Nährwertzeile: vier Kästen nebeneinander, Zahl groß, Einheit klein. */
.werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
         margin-top: var(--s3); }
.wert { background: var(--flaeche-2); border-radius: var(--r-feld);
        padding: var(--s2); text-align: center; }
.wert b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wert span { font-size: .7rem; color: var(--text-schwach); }
.wert.ziel-verfehlt b { color: var(--warn); }
.wert.ziel-erreicht b { color: var(--gut); }

/* ─── Meldungen ────────────────────────────────────────────────────────── */
.meldung { padding: var(--s3) var(--s4); border-radius: var(--r-feld);
           margin-bottom: var(--s3); font-size: .88rem; border: 1px solid; }
.meldung.ok { background: var(--gut-hell); border-color: var(--gut); color: var(--gut); }
.meldung.error { background: var(--warn-hell); border-color: var(--warn); color: var(--warn); }
.meldung.info { background: var(--akzent-hell); border-color: var(--akzent-linie);
                color: var(--akzent); }

.marke-tag { display: inline-block; padding: 2px var(--s2); border-radius: var(--r-chip);
             font-size: .72rem; font-weight: 600; background: var(--flaeche-2);
             color: var(--text-leise); }
.marke-tag.gut { background: var(--gut-hell); color: var(--gut); }
.marke-tag.warn { background: var(--warn-hell); color: var(--warn); }

/* ─── Angebotsliste ────────────────────────────────────────────────────── */
.angebot { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3);
           padding: var(--s3) 0; border-top: 1px solid var(--linie); }
.angebot:first-child { border-top: 0; }
.angebot .preis { font-weight: 700; font-variant-numeric: tabular-nums; }
.angebot .zeile2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2);
                   font-size: .78rem; color: var(--text-schwach); }

.filter { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2);
          -webkit-overflow-scrolling: touch; }
.filter::-webkit-scrollbar { display: none; }

/* ─── Ab Tablet ────────────────────────────────────────────────────────── */
@media (min-width: 40rem) {
  body { padding-bottom: var(--s6); }
  .nav {
    position: static; grid-template-columns: repeat(4, max-content);
    justify-content: center; gap: var(--s2); border-top: 0; background: none;
  }
  .nav a { min-height: 44px; flex-direction: row; gap: var(--s2); font-size: .9rem;
           padding: 0 var(--s3); border-radius: var(--r-chip); }
  .nav a[aria-current="page"] { background: var(--akzent-hell); }
  .raster { grid-template-columns: repeat(4, 1fr); }
  .anlaesse { grid-template-columns: repeat(2, 1fr); }
  .primaer { width: auto; min-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}