/* Familienkalender — Oberfläche.
   Mobile zuerst, hell und dunkel, ohne Framework und ohne Fremdschriften
   (die CSP erlaubt nur eigene Dateien).

   Gestaltungsidee: warmes Papier statt kaltem Grau. Die Fläche tritt zurück,
   Farbe wird sparsam und nur bedeutungstragend eingesetzt — kräftig ist in
   dieser App gleichbedeutend mit „hier steht eine Antwort". */

/* ========================================================== Design-Tokens */
:root {
  /* Flächen: von hinten (bg) nach vorn (surface) */
  --bg:          #faf7f3;
  --surface:     #ffffff;
  --surface-2:   #f4efe8;
  --surface-3:   #eae2d8;

  /* Text in drei Stufen — mehr braucht es nicht */
  --text:        #1e1a15;
  --text-2:      #6a6055;
  --text-3:      #9b9187;

  --border:      #ece5dc;
  --border-2:    #dcd3c7;

  --accent:      #c2562b;
  --accent-2:    #a8461f;
  --accent-soft: #fbeee7;
  --accent-fg:   #ffffff;

  /* Antwortzustände */
  --yes:         #2f7d5d;
  --yes-soft:    #e6f2ec;
  --no:          #c0392b;
  --no-soft:     #fbeae8;
  --maybe:       #b0700e;
  --maybe-soft:  #fbf1e0;
  --open:        #c3bab0;

  /* Lichtschein im Hintergrund */
  --glow-warm: rgba(224, 122, 74, .22);
  --glow-cool: rgba(96, 132, 168, .16);

  /* Verläufe für Flächen mit Gewicht */
  --grad-accent: linear-gradient(135deg, #d9683a 0%, #b8451f 100%);
  --grad-yes:    linear-gradient(135deg, #3d9a70 0%, #2a6f52 100%);
  --grad-no:     linear-gradient(135deg, #d24a3c 0%, #a82f24 100%);
  --grad-maybe:  linear-gradient(135deg, #cf8a1e 0%, #a3640a 100%);
  --grad-card:   linear-gradient(168deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 55%);

  /* Farbige Schatten — ein Knopf wirft Licht in seiner eigenen Farbe */
  --glow-accent: 0 4px 14px rgba(184, 69, 31, .32);
  --glow-yes:    0 4px 14px rgba(42, 111, 82, .34);
  --glow-no:     0 4px 14px rgba(168, 47, 36, .32);
  --glow-maybe:  0 4px 14px rgba(163, 100, 10, .32);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-full: 999px;

  /* Mehrschichtig und sehr flach — Tiefe soll man spüren, nicht sehen */
  --shadow-1: 0 1px 2px rgba(60, 42, 26, .05), 0 1px 3px rgba(60, 42, 26, .04);
  --shadow-2: 0 2px 4px rgba(60, 42, 26, .05), 0 8px 20px rgba(60, 42, 26, .07);
  --shadow-3: 0 4px 12px rgba(60, 42, 26, .10), 0 24px 48px rgba(60, 42, 26, .14);

  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t:      200ms cubic-bezier(.4, 0, .2, 1);

  --tap: 44px;   /* Mindestgröße für alles, was man mit dem Daumen trifft */
}

/* Die dunklen Werte gelten in ZWEI Fällen, deshalb stehen sie zweimal:
   (1) das Gerät steht auf dunkel und es wurde nichts anderes gewählt,
   (2) in der App wurde ausdrücklich „dunkel" gewählt.
   ⚠️ Beide Blöcke müssen inhaltlich gleich bleiben — reines CSS kann eine
   Wertesammlung nicht unter zwei Bedingungen wiederverwenden. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

  /* Der Abstand zwischen Grund und Karte ist hier bewusst größer als im
     Hellmodus: Im Dunkeln trägt ein Schatten kaum, die Fläche muss die
     Abgrenzung allein leisten. */
  --bg:          #100e0c;
  --surface:     #201d19;
  --surface-2:   #2b2723;
  --surface-3:   #37312b;

  --text:        #f3eee7;
  --text-2:      #a99e91;
  --text-3:      #7b7165;

  --border:      #2d2925;
  --border-2:    #3c3630;

  --accent:      #ef906a;
  --accent-2:    #f6a684;
  --accent-soft: #2c201a;
  --accent-fg:   #1a1310;

  --yes:         #56b78d;
  --yes-soft:    #18291f;
  --no:          #e8776a;
  --no-soft:     #2c1c1a;
  --maybe:       #d8a248;
  --maybe-soft:  #2a2116;
  --open:        #554d45;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .30);
  --shadow-3: 0 6px 18px rgba(0, 0, 0, .45), 0 28px 56px rgba(0, 0, 0, .40);

  /* Im Dunkeln darf der Schein kräftiger sein — er ist hier die einzige
     Lichtquelle und trägt die ganze Stimmung. */
  --glow-warm: rgba(214, 106, 58, .26);
  --glow-cool: rgba(74, 112, 150, .20);

  --grad-accent: linear-gradient(135deg, #f0906a 0%, #d2683f 100%);
  --grad-yes:    linear-gradient(135deg, #5cc296 0%, #348f68 100%);
  --grad-no:     linear-gradient(135deg, #ee8578 0%, #c4544a 100%);
  --grad-maybe:  linear-gradient(135deg, #e3ae57 0%, #b7822c 100%);
  --grad-card:   linear-gradient(168deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 58%);

  --glow-accent: 0 4px 16px rgba(240, 144, 106, .22);
  --glow-yes:    0 4px 16px rgba(86, 183, 141, .22);
  --glow-no:     0 4px 16px rgba(232, 119, 106, .22);
  --glow-maybe:  0 4px 16px rgba(216, 162, 72, .22);
  }
}

:root[data-theme="dark"] {

  /* Der Abstand zwischen Grund und Karte ist hier bewusst größer als im
     Hellmodus: Im Dunkeln trägt ein Schatten kaum, die Fläche muss die
     Abgrenzung allein leisten. */
  --bg:          #100e0c;
  --surface:     #201d19;
  --surface-2:   #2b2723;
  --surface-3:   #37312b;

  --text:        #f3eee7;
  --text-2:      #a99e91;
  --text-3:      #7b7165;

  --border:      #2d2925;
  --border-2:    #3c3630;

  --accent:      #ef906a;
  --accent-2:    #f6a684;
  --accent-soft: #2c201a;
  --accent-fg:   #1a1310;

  --yes:         #56b78d;
  --yes-soft:    #18291f;
  --no:          #e8776a;
  --no-soft:     #2c1c1a;
  --maybe:       #d8a248;
  --maybe-soft:  #2a2116;
  --open:        #554d45;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .30);
  --shadow-3: 0 6px 18px rgba(0, 0, 0, .45), 0 28px 56px rgba(0, 0, 0, .40);

  /* Im Dunkeln darf der Schein kräftiger sein — er ist hier die einzige
     Lichtquelle und trägt die ganze Stimmung. */
  --glow-warm: rgba(214, 106, 58, .26);
  --glow-cool: rgba(74, 112, 150, .20);

  --grad-accent: linear-gradient(135deg, #f0906a 0%, #d2683f 100%);
  --grad-yes:    linear-gradient(135deg, #5cc296 0%, #348f68 100%);
  --grad-no:     linear-gradient(135deg, #ee8578 0%, #c4544a 100%);
  --grad-maybe:  linear-gradient(135deg, #e3ae57 0%, #b7822c 100%);
  --grad-card:   linear-gradient(168deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 58%);

  --glow-accent: 0 4px 16px rgba(240, 144, 106, .22);
  --glow-yes:    0 4px 16px rgba(86, 183, 141, .22);
  --glow-no:     0 4px 16px rgba(232, 119, 106, .22);
  --glow-maybe:  0 4px 16px rgba(216, 162, 72, .22);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* color-scheme sorgt dafür, dass auch Eingabefelder, Datumswähler und
   Bildlaufleisten die richtige Tönung bekommen — nicht nur unsere Flächen. */
:root                      { color-scheme: light dark; }
:root[data-theme="light"]  { color-scheme: light; }
:root[data-theme="dark"]   { color-scheme: dark; }

/* Der Grund ist kein flaches Schwarz, sondern ein warmer Lichtschein von oben
   plus ein kühler Gegenpol unten rechts. Das nimmt der Fläche die Leere,
   ohne dass ein einziges Bild geladen werden muss. `fixed` sorgt dafür, dass
   der Schein beim Blättern stehen bleibt statt mitzuwandern. */
body {
  margin: 0;
  background:
    radial-gradient(120% 55% at 50% -10%,  var(--glow-warm),  transparent 62%),
    radial-gradient(90% 45% at 105% 108%,  var(--glow-cool),  transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;

  /* Sicherheitsnetz: Ein einzelnes zu breites Element soll nie die ganze Seite
     seitlich verschieben können — auf dem Handy nimmt das sonst die fest
     positionierte Tab-Leiste mit aus dem Bild.
     Bewusst `clip` und nicht `hidden`: `overflow-x: hidden` am body macht
     `position: sticky` in Kindelementen unwirksam, und davon lebt die Kopfzeile. */
  overflow-x: clip;
}

/* Datums- und Zahlenangaben laufen sonst optisch unruhig */
.day-date, .cal-num, .meal-count, .entry-sub, .version-line { font-variant-numeric: tabular-nums; }

.is-hidden { display: none !important; }
.spacer { flex: 1; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ========================================================= Grundelemente */
.btn {
  appearance: none;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  padding: .625rem 1.1rem;
  border-radius: var(--r-full);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  min-height: var(--tap);
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover  { background: var(--surface-2); }
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-accent);
}
.btn--primary:hover { filter: brightness(1.07); }

.btn--danger { background: transparent; border-color: transparent; color: var(--no); }
.btn--danger:hover { background: var(--no-soft); }

.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.icon-btn {
  appearance: none; border: 0; background: transparent; color: var(--text-2);
  font-size: 1.05rem; width: var(--tap); height: var(--tap);
  border-radius: var(--r-full); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover  { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg    { width: 20px; height: 20px; display: block; }

.link-btn {
  appearance: none; border: 0; background: none; color: var(--accent);
  font: inherit; font-size: .8125rem; font-weight: 550; cursor: pointer;
  padding: .2rem .4rem; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.link-btn:hover { background: var(--accent-soft); }

/* ------------------------------------------------------------- Formulare */
.field { display: block; margin-bottom: 1rem; }

.field-label {
  display: block; font-size: .8125rem; font-weight: 550;
  color: var(--text-2); margin-bottom: .375rem;
}
.field-hint { color: var(--text-3); font-weight: 400; }

.field input:not([type=checkbox]):not([type=color]),
.field select,
.field textarea {
  width: 100%; padding: .7rem .85rem; font: inherit;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-sm);
  min-height: var(--tap);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 3.5rem; }

.field-row { display: flex; gap: .75rem; }
.field-row .field { flex: 1; min-width: 0; }

.color-input {
  width: 58px; height: var(--tap); padding: 3px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  background: var(--surface-2);
}

.check {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 1rem; font-size: .9375rem;
  transition: opacity var(--t-fast);
}
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }

.form-error {
  color: var(--no); background: var(--no-soft);
  font-size: .875rem; margin: 0 0 .875rem;
  padding: .55rem .75rem; border-radius: var(--r-sm);
}

/* ============================================================== Anmeldung */
.view--login { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.login-box   { width: min(430px, 100%); }

/* Der Titel ist der einzige Ort, an dem die App groß auftreten darf —
   der Farbverlauf läuft durch die Schrift selbst. */
.login-title {
  margin: 0 0 .5rem;
  font-size: clamp(2.125rem, 9vw, 2.875rem);
  font-weight: 750; letter-spacing: -0.045em; line-height: 1.05;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
  width: fit-content;
}
.login-sub { margin: 0 0 2rem; color: var(--text-2); font-size: 1.0625rem; }

.person-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: .75rem;
}
.person-tile {
  appearance: none; border: 1px solid var(--border);
  background: var(--grad-card), var(--surface);
  border-radius: var(--r-lg); padding: 1.25rem .75rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .625rem;
  font: inherit; font-weight: 550; color: var(--text);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.person-tile:hover  { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-2); }
.person-tile:active { transform: translateY(0) scale(.97); }
/* Der Avatar wirft Licht in der Farbe der Person — dafür wird die Farbe per
   JavaScript zusätzlich in --pc gelegt. */
.person-tile .avatar {
  width: 58px; height: 58px; font-size: 1.3125rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pc, var(--open)) 45%, transparent);
}

.pin-form { margin-top: .25rem; }

/* ================================================================= Layout */
.app  { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
.view { padding: 0 1rem 2rem; max-width: 780px; margin: 0 auto; }

.topbar {
  display: flex; align-items: center; gap: .25rem;
  padding: .75rem 0 .875rem;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);   /* Rückfall für Browser ohne color-mix() */
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.topbar--plain { padding: 1.5rem 0 .5rem; }

.topbar-title { flex: 1; text-align: center; min-width: 0; }
.topbar h2 {
  margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.025em;
}
/* Überschriften ganzer Ansichten tragen den Verlauf in der Schrift — dasselbe
   Motiv wie auf dem Anmeldebildschirm. */
.topbar--plain h2 {
  text-align: left; font-size: 1.875rem; font-weight: 750; letter-spacing: -0.04em;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
  width: fit-content;
}

/* ------------------------------------------------------------ Tab-Leiste */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex;
  background: var(--surface);   /* Rückfall für Browser ohne color-mix() */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; appearance: none; border: 0; background: none; cursor: pointer;
  padding: .5rem 0 .5rem; color: var(--text-3); font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  position: relative;
  transition: color var(--t-fast);
}
.tab-icon {
  display: grid; place-items: center;
  /* Seit dem vierten Tab (Einkauf) ist es auf schmalen Geräten eng:
     max-width verhindert, dass die Pille breiter wird als ihr Tab. */
  width: 58px; max-width: 100%; height: 32px; border-radius: var(--r-full);
  transition: background var(--t), transform var(--t-fast);
}
.tab-icon svg { width: 22px; height: 22px; display: block; }
.tab-label { font-size: .6875rem; font-weight: 550; letter-spacing: .01em; white-space: nowrap; }
.tab.is-active { color: var(--accent); }
.tab.is-active .tab-icon {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--glow-accent);
}
.tab:active .tab-icon { transform: scale(.9); }

/* ================================================================ Avatare */
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: inline-grid; place-items: center; flex: none;
  font-size: .8125rem; font-weight: 650; color: #fff;
  background: var(--open);
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  transition: opacity var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.avatar--sm { width: 28px; height: 28px; font-size: .75rem; }

.dot {
  width: 11px; height: 11px; border-radius: var(--r-full);
  display: inline-block; margin-right: .5rem; flex: none;
}

/* ======================================================= Heute-Übersicht */
.today-summary {
  background: var(--grad-accent);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 1rem 1.125rem 1.125rem;
  margin-bottom: 1rem;
  box-shadow: var(--glow-accent), var(--shadow-2);
}
.summary-head {
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  opacity: .82; margin-bottom: .625rem;
}
.summary-row {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .3rem 0;
}
.summary-slot {
  font-size: .875rem; font-weight: 600; min-width: 3.75rem; opacity: .9;
}
.summary-count {
  font-size: 1.75rem; font-weight: 750; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.summary-of   { font-size: .8125rem; opacity: .85; }
.summary-open {
  font-size: .75rem; margin-left: auto;
  background: rgba(0, 0, 0, .2); border-radius: var(--r-full);
  padding: .2rem .6rem; white-space: nowrap;
}
.summary-events {
  margin-top: .625rem; padding-top: .625rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: .8125rem; opacity: .9;
}

/* ============================================================= Essenstage */
.day-list { display: flex; flex-direction: column; gap: .75rem; }

.day-card {
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
/* Wochenende bekommt einen leicht anderen Grundton — man erkennt beim
   Blättern sofort, wo die Woche endet. */
.day-card.is-weekend { background: var(--grad-card), var(--surface-2); }

.day-card.is-today {
  border-color: transparent;
  box-shadow: var(--glow-accent), var(--shadow-2);
}

.day-head {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1rem;
}
/* Der heutige Tag trägt seinen Kopf in Farbe — das ist der Ankerpunkt beim
   Öffnen der App. */
.day-card.is-today .day-head { background: var(--grad-accent); }

/* Datum als Kalenderblatt */
.day-datebox {
  flex: none; width: 46px; text-align: center;
  display: flex; flex-direction: column; line-height: 1;
  padding: .35rem 0 .4rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.day-num {
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.day-mon {
  font-size: .625rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3); margin-top: .15rem;
}
.day-card.is-today .day-datebox {
  background: rgba(255, 255, 255, .95);
  border-color: transparent;
  color: #21160f;
}
.day-card.is-today .day-mon { color: #8a6a52; }

.day-title { flex: 1; min-width: 0; }
.day-name {
  font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.02em;
  display: block;
}
.day-card.is-today .day-name { color: #fff; }
.day-badge {
  margin-left: auto; flex: none;
  font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: #fff; background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-full); padding: .25rem .6rem;
}

.day-events {
  padding: .625rem 1rem .5rem; display: flex; flex-wrap: wrap; gap: .375rem;
}

/* Folgt eine Mahlzeit direkt auf den Kopf, träfen dessen Unterkante und die
   Oberkante der Zeile aufeinander — eine Linie reicht. */
.day-head + .meal-row { border-top: 0; }
.event-chip {
  font: inherit; font-size: .75rem; font-weight: 500;
  padding: .3rem .625rem; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.event-chip:hover { background: var(--surface-3); color: var(--text); }
.event-chip .dot  { width: 7px; height: 7px; margin: 0; }
.event-chip .dot--bands { width: 16px; }

/* Im Chip steht der Termin vorn und die Beteiligten hinten, gedämpft —
   beim Überfliegen der Woche zählt das Was, nicht das Wer. */
.chip-label { font-weight: 550; color: var(--text); }
.chip-who   { color: var(--text-3); font-size: .6875rem; }

/* „nicht zu Hause" ist eine Zusatzangabe, kein eigener Eintragstyp —
   deshalb nur ein zarter Rahmen statt einer eigenen Farbe. */
.event-chip.is-away { border-color: var(--border-2); border-style: dashed; }

/* -------------------------------------------------- Auswahl der Beteiligten */
.people-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }

.people-chip {
  appearance: none; cursor: pointer; font: inherit; font-size: .875rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; min-height: 40px;
  border: 1.5px solid var(--border-2); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-2);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.people-chip .dot { width: 9px; height: 9px; margin: 0; }
.people-chip:active { transform: scale(.95); }

/* Ausgewählt wird in der Farbe der jeweiligen Person markiert — so ist ohne
   Lesen erkennbar, wer im Termin steht. --pc setzt app.js je Kachel. */
.people-chip.is-on {
  color: var(--text); font-weight: 600;
  border-color: var(--pc, var(--accent));
  background: color-mix(in srgb, var(--pc, var(--accent)) 16%, var(--surface));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--pc, var(--accent)) 30%, transparent);
}

/* ----------------------------------------------------- Termin in der Liste */
.entry-stripe {
  flex: none; width: 4px; align-self: stretch;
  min-height: 2.25rem; border-radius: var(--r-full);
}
.entry-people { display: flex; gap: -.25rem; flex: none; }
.entry-people .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.entry-people .avatar:first-child { margin-left: 0; }

.cal-more { font-size: .5625rem; font-weight: 700; color: var(--text-3); line-height: 1; }

/* ------------------------------------------- Termintitel im Monatsraster */
/* Auf dem Handy ist in einer Kalenderzelle kein Platz für Text — dort bleiben
   nur die Punkte. Ausgeschrieben wird erst, wo Platz ist (siehe Media-Query). */
.cal-titles { display: none; }

/* Der Farbbalken links ist ein Hintergrundbild, kein Rahmen: `border-left`
   kann nur EINE Farbe tragen, hier sind es so viele wie Beteiligte.
   Es sind ZWEI Ebenen — vorn der Balken, dahinter dieselben Farben blass über
   die ganze Kachel; ein 3px-Streifen allein ging auf einem großen Bildschirm
   unter. Reihenfolge und Größen müssen zu app.js passen (Balken, dann Tönung).
   Deshalb setzen die Regeln darunter auch nur `background-color` — das
   Kurzschreibweise-`background` würde Größe und Wiederholung zurücksetzen und
   das Band über den ganzen Titel kacheln. */
.cal-title {
  display: block; width: 100%;
  font-size: .625rem; line-height: 1.3;
  text-align: left;
  padding: .12rem .3rem .12rem .6rem;
  border-radius: 4px;
  background-color: var(--surface-2);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, left center;
  background-size: 6px 100%, 100% 100%;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-title--rest { background-color: transparent; background-image: none; color: var(--text-3); }
.cal-cell.is-today .cal-title {
  background-color: rgba(255, 255, 255, .9); color: #2a1d14;
}
.cal-cell.is-today .cal-title--rest {
  background-color: transparent; color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------------- Terminfarben */
/* Farben werden nicht gewählt, sondern geerbt: Ein Termin trägt die Farben
   seiner Beteiligten. Deshalb gibt es hier keinen Farbwähler mehr, sondern nur
   noch die Marken — eine Gruppe Punkte oder, ab drei Personen, ein gebändertes
   Plättchen (siehe personMarks() in app.js). */
.marks { display: inline-flex; align-items: center; gap: 3px; flex: none; }

/* Alle Farben in einem Plättchen: waagrechte Bänder, harte Kanten. Die Breite
   ist fest, damit ein Termin des ganzen Haushalts eine Kalenderzelle nicht
   auseinanderzieht. */
.dot--bands { width: 15px; border-radius: var(--r-full); }

/* ------------------------------------------------------------ Feiertage */
/* Ein Feiertag ist kein Termin von jemandem, sondern eine Eigenschaft des
   Tages: keine Personenfarbe, kein Punkt. Die Zelle selbst ist getönt — die
   Regeln dafür stehen weiter unten beim Kalenderraster, weil sie sich sonst
   mit `:hover`, `is-today` und `is-selected` in die Quere kommen. */
.cal-title--holiday {
  background-image:
    linear-gradient(180deg, var(--accent) 0% 100%),
    linear-gradient(180deg, var(--accent-soft) 0% 100%);
  font-weight: 600;
}

.entry.is-holiday .entry-title { color: var(--accent); }
.event-chip.is-holiday { cursor: default; background: var(--accent-soft); }
.event-chip.is-holiday .chip-label { color: var(--accent); }

/* Zuordnung Farbe → Person unter dem Monatsraster. */
.cal-legend {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem;
  margin-top: .625rem;
  font-size: .6875rem; color: var(--text-3);
}
.legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.legend-item .dot { width: 7px; height: 7px; margin: 0; }

/* Eine Mahlzeit: links die Lage (Bezeichnung, Runde, Zählung),
   rechts die eigene Antwort — die steht über die volle Höhe mittig daneben.
   Die linke Spalte ist minmax(0, 1fr), damit langer Text wie „noch niemand
   eingetragen" umbricht, statt die Spalte auseinanderzuziehen. */
.meal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label  choice"
    "people choice"
    "count  choice";
  align-items: center;
  gap: .3rem .875rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
}
.meal-label {
  grid-area: label;
  font-size: .875rem; font-weight: 600; color: var(--text-2);
}
.meal-people {
  grid-area: people;
  display: flex; gap: .3rem; flex-wrap: wrap;
}
.meal-count {
  grid-area: count;
  font-size: .75rem; color: var(--text-3);
}
.meal-choice {
  grid-area: choice;
  display: flex; align-self: center;
}

/* Zustand der anderen. Die Abstufung muss auf einen Blick lesbar sein, ohne
   dass die Kürzel verschwinden — zu blass wirkt nicht zurückhaltend, sondern
   kaputt. Deshalb bleibt die Schrift immer erkennbar; unterschieden wird über
   Ring, Sättigung und Deckkraft. */
.meal-people .avatar[data-status="yes"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--yes);
}
.meal-people .avatar[data-status="maybe"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--maybe);
}
.meal-people .avatar[data-status="no"] {
  opacity: .5; filter: saturate(.35);
}
.meal-people .avatar[data-status="open"] {
  opacity: .42; filter: grayscale(.85);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18);
}

/* Die eigene Antwort als zusammenhängende Gruppe */
.choice-btn {
  appearance: none; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-3);
  cursor: pointer; min-width: 46px; height: 40px;
  font: inherit; font-size: .8125rem; font-weight: 650;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.choice-btn:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
.choice-btn:last-child  { border-radius: 0 var(--r-full) var(--r-full) 0; }
.choice-btn:not(:first-child) { margin-left: -1px; }

.choice-btn:hover  { background: var(--surface-2); color: var(--text); }
.choice-btn:active { transform: scale(.94); }

/* Die gewählte Antwort tritt aus der Gruppe heraus: Verlauf, farbiger Schein
   und eine Spur größer. Das ist der Moment, in dem die App antwortet. */
.choice-btn.is-on {
  color: #fff; border-color: transparent;
  position: relative; z-index: 1;
  transform: scale(1.06);
  border-radius: var(--r-full);
}
.choice-btn[data-value="yes"].is-on   { background: var(--grad-yes);   box-shadow: var(--glow-yes); }
.choice-btn[data-value="no"].is-on    { background: var(--grad-no);    box-shadow: var(--glow-no); }
.choice-btn[data-value="maybe"].is-on { background: var(--grad-maybe); box-shadow: var(--glow-maybe); }
.choice-btn.is-on:active { transform: scale(1); }

/* =============================================================== Kalender */
/* minmax(0, …) statt 1fr: Sonst wäre das Minimum jeder Spalte der min-content
   ihrer Zelle, und ein einzelner langer Termintitel könnte das Raster breiter
   machen als den Bildschirm. */
.cal-weekdays, .cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem;
}
.cal-weekdays { margin-bottom: .375rem; }
.cal-weekdays span {
  text-align: center; font-size: .6875rem; font-weight: 650;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
}

.cal-cell {
  appearance: none; border: 1.5px solid transparent; background: var(--surface);
  border-radius: var(--r-sm); cursor: pointer; font: inherit; color: var(--text);
  aspect-ratio: 1; padding: .3rem .2rem;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.cal-cell:hover  { background: var(--surface-2); }
.cal-cell:active { transform: scale(.94); }
.cal-cell.is-other    { opacity: .32; }
.cal-cell.is-today    {
  color: #fff; font-weight: 700;
  background: var(--grad-accent);
  box-shadow: var(--glow-accent);
}
.cal-cell.is-selected { border-color: var(--accent); }
.cal-cell.is-today.is-selected { border-color: var(--text); }

/* Feiertag: der Tag ist frei, das sagt die Zelle selbst. Muss NACH den Regeln
   für Auswahl und Heute stehen — bei gleicher Spezifität gewinnt die letzte,
   und ein ausgewählter Feiertag soll seinen Auswahlrahmen behalten. */
.cal-cell.is-holiday { background: var(--accent-soft); }
.cal-cell.is-holiday .cal-num { color: var(--accent); font-weight: 700; }
.cal-cell.is-holiday:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.cal-cell.is-today.is-holiday { background: var(--grad-accent); }
.cal-cell.is-today.is-holiday .cal-num { color: #fff; }

.cal-num  { font-size: .875rem; line-height: 1.4; }

/* Der Abstand ZWISCHEN zwei Terminen ist deutlich größer als der zwischen den
   Punkten EINES Termins — nur dadurch ist zu sehen, dass zwei Punkte zusammen
   einen Termin mit zwei Beteiligten meinen und nicht zwei Termine. */
.cal-dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.cal-dots .marks { gap: 1.5px; }
.cal-dots .dot { width: 6px; height: 6px; margin: 0; }
.cal-dots .dot--bands { width: 13px; }

/* Auf dem orangen Heute-Feld gehen kleine Farbpunkte unter — ein hauchfeiner
   heller Ring hebt sie wieder ab. */
.cal-cell.is-today .dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }

.day-detail { margin-top: 1.5rem; }
.day-detail h3 {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 .75rem;
}

/* ===================================================== Karten & Einträge */
.entry-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }

.entry {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: .75rem .875rem; text-align: left;
  font: inherit; color: var(--text); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
button.entry:hover  { background: var(--surface-2); border-color: var(--border-2); }
button.entry:active { transform: scale(.99); }

.entry-main  { flex: 1; min-width: 0; }
.entry-title { font-weight: 550; letter-spacing: -0.01em; }
.entry-sub   { font-size: .8125rem; color: var(--text-3); margin-top: .0625rem; }
.entry-empty {
  color: var(--text-3); font-size: .9375rem;
  padding: 1.25rem 1rem; text-align: center;
  background: var(--surface-2); border-radius: var(--r-md);
}

.card {
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 1.25rem; margin-bottom: .875rem;
}
/* Kartenüberschriften sind Etiketten, keine Schlagzeilen — klein, versal,
   zurückgenommen. Der Inhalt darunter trägt das Gewicht. */
.card h3 {
  margin: 0 0 .875rem;
  font-size: .75rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.card-line { display: flex; align-items: center; margin: 0 0 1.125rem; font-size: 1.0625rem; }
.card-hint { font-size: .8125rem; color: var(--text-3); margin: -.25rem 0 .875rem; line-height: 1.45; }

.feed-row { display: flex; gap: .5rem; margin-bottom: .625rem; }
.feed-input {
  flex: 1; min-width: 0; padding: .65rem .75rem; font: inherit; font-size: .75rem;
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid transparent; border-radius: var(--r-sm);
}

/* ================================================================ Dialoge */
.dialog {
  border: 0; padding: 0;
  border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  width: min(460px, calc(100vw - 1.5rem));
  box-shadow: var(--shadow-3);
}
.dialog::backdrop {
  background: rgba(30, 20, 12, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.dialog[open] { animation: dialog-in 220ms cubic-bezier(.2, .9, .3, 1); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.dialog form { padding: 1.25rem; }
.dialog h3 {
  margin: 0 0 1.125rem; font-size: 1.1875rem;
  font-weight: 650; letter-spacing: -0.02em;
}
.dialog-actions {
  display: flex; gap: .5rem; align-items: center;
  margin-top: 1.25rem; flex-wrap: wrap;
}

/* Umschalter „nicht da" / „woanders" */
.seg {
  display: flex; gap: .25rem; margin-bottom: 1.125rem;
  background: var(--surface-2); padding: .25rem; border-radius: var(--r-full);
}
.seg-btn {
  flex: 1; appearance: none; border: 0; background: transparent;
  color: var(--text-2); border-radius: var(--r-full); padding: .5rem;
  font: inherit; font-size: .875rem; font-weight: 550; cursor: pointer;
  min-height: 40px;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.seg-btn.is-active {
  background: var(--surface); color: var(--text);
  font-weight: 650; box-shadow: var(--shadow-1);
}

/* ================================================= Hinweise & Meldungen */
.update-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1rem;
  padding-top: calc(.75rem + env(safe-area-inset-top));
  background: var(--surface);   /* Rückfall für Browser ohne color-mix() */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  font-size: .9375rem; font-weight: 500;
  animation: slide-down 260ms cubic-bezier(.2, .9, .3, 1);
}
@keyframes slide-down { from { transform: translateY(-100%); } to { transform: none; } }
.update-bar span { flex: 1; min-width: 8rem; }
.update-bar .btn { min-height: 38px; padding: .4rem .9rem; font-size: .875rem; }

.version-line { margin: 1rem 0 0; font-size: .6875rem; color: var(--text-3); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 50;
  background: var(--text); color: var(--bg);
  padding: .625rem 1.125rem; border-radius: var(--r-full);
  font-size: .875rem; font-weight: 500;
  box-shadow: var(--shadow-3); max-width: calc(100vw - 2rem);
  animation: toast-in 200ms cubic-bezier(.2, .9, .3, 1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast.is-error { background: var(--no); color: #fff; }

/* ==================================================== Größere Bildschirme */
@media (min-width: 640px) {
  .view { padding: 0 1.5rem 2.5rem; }
  .meal-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "label people choice";
    gap: 1rem;
  }
  .meal-label { min-width: 4rem; }
  .meal-count { display: none; }        /* auf breiten Schirmen genügen die Avatare */
  .cal-cell   { aspect-ratio: 1 / .82; }
  .day-list   { gap: .875rem; }

  /* Die Tab-Leiste über die ganze Bildschirmbreite zu ziehen sieht auf einem
     Monitor verloren aus — die drei Ziele stünden meterweit auseinander.
     Stattdessen schwebt sie als kompakte Leiste mittig über dem Inhalt. */
  .tabbar {
    left: 50%; transform: translateX(-50%);
    bottom: 1.25rem;
    width: auto; min-width: 340px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: .25rem .5rem;
    box-shadow: var(--shadow-3);
  }
  .tab { padding: .375rem 1.25rem .4rem; }
  .app { padding-bottom: 6.5rem; }
}

/* Ab hier ist Platz für zwei Spalten — sieben Tage passen dann fast ohne
   Blättern auf den Schirm. */
@media (min-width: 1000px) {
  .view { max-width: 1080px; }
  .day-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }
  /* Der heutige Tag bleibt oben und über die volle Breite — er ist der
     einzige, der beim Öffnen wirklich interessiert. */
  .day-card.is-today { grid-column: 1 / -1; }
  .cal-grid, .cal-weekdays, .cal-legend { max-width: 860px; margin-inline: auto; }
  .cal-weekdays { margin-bottom: .375rem; }
  .day-detail   { max-width: 860px; margin-inline: auto; }

  /* Hier ist Platz für die Termintitel — die Zellen werden dafür höher und
     der Inhalt richtet sich oben aus statt zentriert. */
  .cal-cell {
    aspect-ratio: auto; min-height: 92px;
    align-items: stretch; justify-content: flex-start;
    padding: .35rem .3rem;
  }
  .cal-num    { align-self: center; }
  .cal-titles { display: flex; flex-direction: column; gap: 2px; width: 100%; }
  .cal-dots   { display: none; }        /* Titel sagen mehr als Punkte */
}

/* ================================================= Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Serien-Zeichen im Terminchip */
.chip-repeat { color: var(--text-3); font-size: .8125rem; line-height: 1; }

/* ============================================================== Einkauf */
/* ACHTUNG, hier lag ein Fehler: `grid-template-columns: 1fr auto` bedeutet
   `minmax(auto, 1fr)`, und das auto-Minimum eines <input> ist seine intrinsische
   Breite (rund 20 Zeichen). Zusammen mit dem Knopf daneben sprengte das auf dem
   Handy die Zeile — und ein horizontaler Überlauf schiebt auf Android den
   Layout-Viewport, wodurch die fest positionierte Tab-Leiste aus dem Bild
   rutschte. Deshalb: minmax(0, 1fr) PLUS min-width:0 an den Feldern. */
.shop-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  margin-bottom: 1rem;
}
.shop-add input {
  min-width: 0;                      /* darf schrumpfen, statt zu drängeln */
  width: 100%;
  padding: .7rem .85rem; font: inherit; min-height: var(--tap);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
}
.shop-add input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Alle drei Plätze ausdrücklich zuweisen — bei automatischer Verteilung ist
   nicht verlässlich, wo ein über zwei Zeilen gespannter Knopf landet. */
#shop-title { grid-area: 1 / 1 / 2 / 2; }
#shop-qty   { grid-area: 2 / 1 / 3 / 2; max-width: 10rem; }
#shop-add   { grid-area: 1 / 2 / 3 / 3; align-self: stretch; white-space: nowrap; }

.shop-list { display: flex; flex-direction: column; gap: .4rem; }

.shop-row {
  display: flex; align-items: center; gap: .75rem;
  background: var(--grad-card), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .5rem .625rem .5rem .5rem;
  transition: opacity var(--t), background var(--t-fast);
}
.shop-row.is-done { opacity: .55; }

/* Große Trefferfläche — im Supermarkt wird einhändig getippt. */
.shop-check {
  appearance: none; flex: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 2px solid var(--border-2); background: var(--surface);
  color: #fff; display: grid; place-items: center;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.shop-check:active { transform: scale(.9); }
.shop-check svg { width: 18px; height: 18px; }
.shop-row.is-done .shop-check {
  background: var(--grad-yes); border-color: transparent;
  box-shadow: var(--glow-yes);
}

.shop-main  { flex: 1; min-width: 0; }
.shop-title { font-weight: 550; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.shop-row.is-done .shop-title { text-decoration: line-through; }
.shop-sub   { font-size: .75rem; color: var(--text-3); overflow-wrap: anywhere; }

.shop-del {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--text-3); font-size: 1.375rem; line-height: 1;
  width: 34px; height: 34px; border-radius: var(--r-full); flex: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.shop-del:hover { background: var(--no-soft); color: var(--no); }

.shop-done-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 1.5rem 0 .5rem;
  font-size: .75rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}

/* Erinnerungen: die Knöpfe stehen nebeneinander, brechen aber auf schmalen
   Geräten um, statt sich zu quetschen. */
.push-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ================================================================ Suche */
.search-bar { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.search-bar input {
  flex: 1; min-width: 0;                 /* darf schrumpfen (siehe Kasten oben) */
  padding: .65rem .85rem; font: inherit; min-height: var(--tap);
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-full);
}
.search-bar input:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-head {
  font-size: .75rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 .625rem;
}
.search-divider {
  font-size: .6875rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  margin: .875rem 0 .25rem; padding-top: .625rem;
  border-top: 1px solid var(--border);
}
.entry.is-past { opacity: .6; }

/* ============================================== Reiter der Einkaufslisten */
/* Waagrecht scrollbar statt umbrechend: Bei fünf Listen soll die Eingabezeile
   nicht nach unten wandern. */
.list-tabs {
  display: flex; gap: .375rem; margin-bottom: .875rem;
  overflow-x: auto; padding-bottom: .25rem;
  scrollbar-width: none;
}
.list-tabs::-webkit-scrollbar { display: none; }

.list-tab {
  appearance: none; cursor: pointer; font: inherit; font-size: .875rem;
  white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; min-height: 38px;
  border: 1px solid var(--border-2); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast);
}
.list-tab.is-active {
  background: var(--grad-accent); border-color: transparent;
  color: #fff; font-weight: 600; box-shadow: var(--glow-accent);
}
.list-count {
  font-size: .6875rem; font-weight: 700;
  background: rgba(0, 0, 0, .16); border-radius: var(--r-full);
  padding: .05rem .4rem;
}
.list-tab:not(.is-active) .list-count { background: var(--surface-3); }
.list-tab--add, .list-tab--del { padding: .45rem .7rem; font-weight: 700; }
.list-tab--del { color: var(--no); border-color: transparent; }

/* Geburtstage sind keine Termine, die man anklickt — sie sind Hinweise. */
.event-chip.is-birthday { cursor: default; background: var(--accent-soft); }
.event-chip.is-birthday .chip-label { color: var(--accent); }