/* ═══════════════════════════════════════════════════════════
   Family Planner – Nordic Design System v3
   Mobile-first, keine horizontale Scrollbars
   ═══════════════════════════════════════════════════════════ */

/* ── Local Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/DMSans-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/DMSans-Medium.ttf') format('truetype');
}
/* Display-Font Fallback (zarte Hand-Anmutung, falls Kalmansk nicht lädt). */
@font-face {
  font-family: 'NotePaper';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/NotePaper-regular.otf') format('opentype');
}
/* Titel-/Display-Font des Hand-drawn-Redesigns (siehe --font-display unten). */
@font-face {
  font-family: 'Kalmansk';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Kalmansk-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Whirlybats';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/Whirlybats.otf') format('opentype');
}

/* Display font for the avatar generator: a person's name-initial becomes the
   head/glyph shape. See personAvatarHtml() / renderPersonAvatar() in common.js. */
@font-face {
  font-family: 'Geon';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/fonts-tryout/Geon.otf') format('opentype');
}

/* Person-avatar glyph rendered from the Whirlybats dingbat font as a "sticker".
   Bewusst farblos (monochrome Tinte) statt personenfarbig, plus derselbe
   handgezeichnete Wobble-Filter wie die UI-Icons (#sketch-icons). Die inline
   gesetzte Personenfarbe (currentColor) wird auf Layer-Ebene mit var(--ink)
   überschrieben. .wb-sticker ist der Wrapper; .wb-icon ist ein Back-compat-Alias. */
.wb-icon,
.wb-sticker {
  position: relative;
  display: inline-block;
  line-height: 1;
  filter: url(#sketch-icons);
}
.wb-sticker .wb-layer {
  font-family: 'Whirlybats';
  line-height: 1;
  display: block;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
/* Bottom layer: thick ink stroke + ink fill → monochrome (keine Farbe) */
.wb-sticker .wb-layer-outer {
  color: var(--ink);
  -webkit-text-stroke: 0.40em var(--ink);
  text-stroke: 0.40em var(--ink);
  paint-order: stroke fill;
}
/* Top layer (overlaid): thin ink stroke → erhält die Glyph-Definition */
.wb-sticker .wb-layer-mid {
  position: absolute;
  inset: 0;
  color: var(--ink);
  -webkit-text-stroke: 0.12em #000;
  text-stroke: 0.12em #000;
  paint-order: stroke fill;
}
/* Legacy single-glyph .wb-icon (still used by a few inline spots) */
.wb-icon {
  font-family: 'Whirlybats';
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.85);
  paint-order: stroke fill;
}

:root {
  --bg:          #e5ecf1;
  --surface:     #faf8f4;
  --bg-2:        #f6f5f1;  /* subtile Panel-Fläche (Nutri-Karten etc.) */
  --surface2:    #f0ede7;
  --border:      #ddd9d0;
  --border-dark: #c8c3b8;
  --text:        #1c1b29;
  --text-2:      #4a4740;
  --muted:       #66625b;  /* WCAG-AA auf hellen Flächen */
  --accent:      #159a9c;
  --accent-lt:   #d6efef;
  --accent-dk:   #0e7173;
  --pop-lime:    #c4e835;  /* einziger Highlight-Pop (Links/Interaktion = --accent) */
  /* Aufgaben-Priorität nutzt die semantischen Status-Farben (statt eigener,
     quasi-identischer Tokens): „dringend" → --danger, „hoch" → --warn. */
  --success:     #4a7c59;
  --success-lt:  #e2f0e8;
  --success-dk:  #366043;
  --danger:      #c0392b;
  --danger-lt:   #fff0f0;  /* heller Fehler-/Urgent-Hintergrund */
  --warn:        #c97d20;
  --warn-lt:     #fdf3e3;
  --lunch-bg:    #f0f9f2;
  --dinner-bg:   #f5f0f9;
  /* Akzent-Palette: die 4 Sektionsfarben (Nav-Identität pro Seite) sind zugleich
     die EINZIGE dekorative Palette – Sticker-Tints u. ä. ziehen nur hieraus. */
  --sec-plan:         #a8e0b6;
  --sec-menus:        #a8c8ff;
  --sec-tasks:        #d4b8ff;
  --sec-shop:         #FFD84A;
  /* Section surface – Aufgaben-Container-Hintergrund (einziger genutzter). */
  --sec-tasks-bg:     #e8dff5;
  /* Menü-Kategorie-Badges – tokenisiert (vorher hartcodierte Hexes), damit
     Themes sie überschreiben können. „vegan" teilt die Farbe von „vegetarisch". */
  --cat-meat-bg:  #fde8e8;  --cat-meat-fg:  #9b2c2c;
  --cat-fish-bg:  #dbeafe;  --cat-fish-fg:  #1e40af;
  --cat-veg-bg:   #d1fae5;  --cat-veg-fg:   #065f46;  /* vegetarisch & vegan */
  --cat-soup-bg:  #fef3c7;  --cat-soup-fg:  #92400e;
  --cat-salad-bg: #ecfccb;  --cat-salad-fg: #365314;
  --cat-cold-bg:  #e0f2fe;  --cat-cold-fg:  #0369a1;
  /* Display-/Titel-Font: Kalmansk (Hand-drawn-Redesign), NotePaper als Fallback */
  --font-display:'Kalmansk', 'NotePaper', cursive;
  --font-body:   'DM Sans', system-ui, sans-serif;
  /* Radius-Skala */
  --radius-xs:   4px;
  --radius:      8px;   /* Basis / klein */
  --radius-md:   12px;
  --radius-lg:   18px;  /* grosser Radius (Container, Modals) */
  --radius-pill: 99px;
  /* Schatten (weich) – der prägende „Sticker"-Versatzschatten ist --hand-shadow* */
  --shadow:      0 1px 4px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07);
  --shadow-lg:   0 12px 48px rgba(28,27,41,0.25);
  --bottom-nav-h: 60px;
  --content-wide: 1080px;   /* max. Inhaltsbreite auf Desktop (Dashboard & Kalender gleich) */

  /* ── Hand-drawn redesign ───────────────────────────────────────
     Tokens für den „hand-gezeichneten" Look (Mockup coolschrank.ch):
     Papier-Hintergrund mit Punkteraster, kräftige Tinten-Outlines auf
     Karten + harter Offset-Schatten („Sticker"), warme Palette. */
  --ink:           #1c1c1c;                 /* Outline-/Strichfarbe */
  --ink-border:    2px solid rgba(28,28,28,.82);
  --paper:         #ffffff;                 /* Kartenpapier – weiß, floatend */
  --paper-dot:     rgba(28,28,28,.05);      /* (Raster aktuell aus) */
  --weekend-tint:  rgba(201,125,32,.08);    /* dezenter warmer Wochenend-Ton (Sa/So) */
  /* Versetzter „3D"-Schatten: hinter der Karte liegt ein einfarbiges, nur nach
     unten verschobenes „Blatt" (kein seitlicher Versatz, negativer Spread → mittig
     als Tab unten heraus). Bewusst NICHT mehr farbig/zufällig und OHNE Tinten-Kante
     – ein ruhiger, einheitlicher Blaugrau-Ton (#9cb0c2). box-shadow folgt dem
     border-radius. */
  --hand-shadow-tint: #9cb0c2;             /* einheitliches „Blatt" (kein Zufall mehr) */
  --hand-radius:   22px;                    /* bauchige Ecken */
  /* (Frühere „Mockup-Palette" --hand-teal/-sage/-amber/-violet/-red entfernt –
     Dekor & Sticker-Tints nutzen jetzt die 4 Sektionsfarben + Status/Teal.) */
}

/* Zusammengesetzter 3D-Versatzschatten – einfarbiges „Blatt" ohne Tinten-Kante.
   Auf `*` deklariert, damit der Tint pro Element überschreibbar bliebe (aktuell
   einheitlich, aber so bleibt der Hover-Schatten konsistent). */
* {
  --hand-shadow:      0 17px 0 -9px var(--hand-shadow-tint);
  --hand-shadow-sm:   0 11px 0 -6px var(--hand-shadow-tint);
  /* Hover: das Blatt rutscht weiter raus → Karte „hebt ab" (mit translateY) */
  --hand-shadow-hover:0 21px 0 -9px var(--hand-shadow-tint);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 100%;  /* 16px-Basis (war 93.75% – wirkte zu klein); respektiert Nutzer-Schriftgrösse */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* prevent any child from widening the page */
}
body {
  font-family: var(--font-body);
  /* Weißer Hintergrund – Kacheln floaten über Outline + Offset-Schatten */
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  max-width: 100vw; /* belt-and-suspenders */
}

/* ── Background Decoration ──────────────────────────────────── */

/* Variante 1: Statische graue Kugeln (Kühlschrankmagnete) */
.bg-spheres {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.bg-spheres span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d8d8d8, #bbb 60%, #a8a8a8);
  box-shadow: 1px 2px 4px rgba(0,0,0,0.10), inset -2px -3px 6px rgba(0,0,0,0.08);
  opacity: 0.45;
}

/* Variante 2: Kühlschrank-Buchstaben-Magnete */
.bg-letters {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.bg-letters span {
  position: absolute;
  font-family: 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
  font-weight: 900;
  color: #c8c8c8;
  opacity: 0.18;
  line-height: 1;
  text-transform: uppercase;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────── */
.app-shell { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1; }
.main-content {
  max-width: 500px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem; /* extra bottom for mobile nav */
  width: 100%;
}
/* Desktop: Inhalts-Seiten nutzen die breitere Dashboard-Breite (--content-wide),
   konsistent mit app.php & kalender.php. Menüs (Auto-Fill-Grid) und Einkauf
   (zweispaltig, siehe css/shopping.css) profitieren direkt vom Platz. */
@media (min-width: 1000px) {
  .page-menus .main-content,
  .page-tasks .main-content,
  .page-shop  .main-content { max-width: var(--content-wide); }
}

/* ── Admin-Impersonation Banner ─────────────────────────────── */
.impersonate-bar {
  position: relative;
  z-index: 101;
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
}
.impersonate-bar a {
  color: #fff;
  text-decoration: underline;
  margin-left: 0.75rem;
  font-weight: 600;
}

/* ── Desktop Nav ─────────────────────────────────────────────── */
.nav {
  background: var(--bg);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  height: 52px;
  gap: 0;
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-right: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-brand:hover { text-decoration: none; }
/* Teal-Logo-Quadrat mit weißem Kühlschrank-Icon (Mockup) */
.nav-brand-logo {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--accent-dk);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-brand-logo img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
/* Wortmarke: cool (teal) · schrank (grau) · .ch (teal) */
.nav-brand-word { display: inline-flex; align-items: baseline; }
.nav-brand-word .nbw-1, .nav-brand-word .nbw-3 { color: var(--accent-dk); }
.nav-brand-word .nbw-2 { color: #9a9ea2; }

/* Header-Aktionen rechts: Glocke + Avatar */
.nav-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer; color: inherit;  /* auch als <button> */
}
.nav-icon-btn:hover { background: rgba(28,28,28,0.05); text-decoration: none; }
.nav-icon-btn img, .nav-icon-btn .ui-icon { width: 24px; height: 24px; color: var(--ink); }
.nav-avatar .ui-icon { width: 26px; height: 26px; }
.nav-bell-dot {
  position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid #fff;
}
.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
  align-items: stretch;
}
.nav-links a {
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text);
}
/* Einheitlicher Aktiv-/Hover-Unterstrich für alle Tabs (Pop-Lime, konsistent
   mit dem App-Akzent) – kein farbcodierter Unterstrich je Sektion mehr. */
.nav-links a.active,
.nav-links a:hover { border-bottom-color: var(--pop-lime); }
.nav-install {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  margin-left: 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent-lt, #e8f5e9);
  color: var(--accent-dk);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  line-height: 1;
}
.nav-install:hover { background: var(--accent); color: #fff; }
.nav-install svg { flex-shrink: 0; }
@media (max-width: 768px) {
  .nav-install span { display: none; }
  .nav-install { padding: 0.35rem; }
}
.nav-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 0.5rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--text-2);
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.nav-settings:hover { background: var(--surface2); color: var(--text); }
.nav-settings.active { background: var(--accent-lt); color: var(--accent-dk); }

/* ── Mobile Bottom Nav ───────────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  /* Hand-drawn: freischwebende, abgerundete Papier-Leiste mit Tinten-Outline.
     Neutral (kein Sektionston) – die Navigation trägt eine einheitliche Farbe
     wie die Desktop-Nav, Sektionsfarben bleiben dem Inhalt vorbehalten
     (Styleguide: Sektionsfarben punktuell, nie flächig). Kein 3D-Versatzschatten
     (box-shadow) – die Leiste liegt flach an. Der Rahmen liegt auf einem ::before
     mit Wobble-Filter (#sketch-icons, global via nav.php), damit die Kontur
     handgezeichnet wirkt, ohne die bereits gefilterten Icons doppelt zu verzerren. */
  background: var(--paper);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: none;
  z-index: 200;
  padding: 0 0.5rem;
  margin: 0 auto;
  left: 0.6rem; right: 0.6rem;
  bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  max-width: 280px;   /* schmale, kompakte Leiste */
}
.bottom-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--ink-border);
  border-radius: var(--radius-pill);
  filter: url(#sketch-icons);
  pointer-events: none;
}

/* ── Hand-drawn Entrance / „Draw-in" (global; pro Seite via common.js getriggert) ── */
@keyframes hd-draw-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
/* Variante, die eine leichte „Sticker"-Drehung (var(--hd-rot)) im Endzustand
   behält – sonst würde der Draw-in (transform:none) sie wieder geradeziehen.
   Genutzt von Essensplan-Kacheln und Einkaufs-Sektionen. */
@keyframes hd-draw-in-rot {
  from { opacity: 0; transform: translateY(10px) scale(0.97) rotate(var(--hd-rot, 0deg)); }
  to   { opacity: 1; transform: rotate(var(--hd-rot, 0deg)); }
}
.hd-enter {
  opacity: 0;
  animation: hd-draw-in 0.5s cubic-bezier(.22,.9,.3,1) both;
  animation-delay: var(--d, 0s);
}
.draw-outline {
  position: absolute; inset: 0;
  pointer-events: none; overflow: visible; z-index: 4;
  filter: url(#sketch-icons);
}
.drawn { position: relative; border-color: transparent !important; }
@media (prefers-reduced-motion: reduce) {
  .hd-enter { animation: none; opacity: 1; transform: none; }
}

/* ── Hand-drawn FAB („+"-Button) – einheitlich für Menus/Aufgaben/Einkauf ── */
.fab {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--accent);
  border: var(--ink-border);
  box-shadow: none;          /* flach – kein 3D-Versatzschatten (Menus/Aufgaben) */
  cursor: pointer;
  align-items: center; justify-content: center;
  z-index: 199;
  transition: transform 0.12s;
  filter: url(#sketch-icons);   /* handgezeichneter Rand (Icon-Button, kein Text) */
}
.fab:active { transform: translateY(1px); }
.fab .ui-icon { width: 26px; height: 26px; color: #fff; }
@media (max-width: 640px) { .fab { display: flex; } }

/* ── Wochen-Streifen-Navigation (ersetzt Vor/Zurück oben) ─────────
   Horizontal scrollbare Tagesschiene (Wochentag + Datum) im Hand-drawn-Look:
   weisses Papier mit Tinten-Rahmen, gewählter Tag voll in Tinte, heute (wenn
   nicht gewählt) in Akzentfarbe. Tippen wählt, schnelles Wischen scrollt dank
   Momentum weiter; Heute-Button springt zurück, Monats-Label öffnet den Picker. */
.weekstrip { position: relative; max-width: 500px; margin: 0 auto 1.3rem; }
.weekstrip-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin: 0 0.1rem 0.5rem;
}
.weekstrip-month {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.2rem; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1;
}
.weekstrip-caret { width: 19px; height: 19px; opacity: 0.6; flex-shrink: 0; margin-top: 2px; }
.weekstrip-today {
  position: relative;
  background: var(--paper); border: none; border-radius: var(--radius-pill);
  padding: 0.18rem 0.7rem; font-size: 0.78rem; font-weight: 700; color: var(--ink);
  cursor: pointer; flex-shrink: 0; transition: transform 0.12s;
}
/* Handgezeichneter Rand auf einem ::before-Overlay (Wobble-Filter), damit die
   Kontur „von Hand" wirkt, der „Heute"-Text selbst aber scharf bleibt. */
.weekstrip-today::before {
  content: ''; position: absolute; inset: 0;
  border: var(--ink-border); border-radius: var(--radius-pill);
  filter: url(#sketch-icons); pointer-events: none;
}
.weekstrip-today:active { transform: translateY(1px); }
.weekstrip-rail {
  display: flex; gap: 0.3rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;     /* elastisches Momentum-Scrollen (iOS) */
  overscroll-behavior-x: contain;
  scrollbar-width: none;                  /* Firefox: Leiste aus */
  padding: 0.15rem 0.1rem;
  /* Ränder weich ausblenden statt hart abzuschneiden: die Pillen am linken/
     rechten Rand faden zu transparent (signalisiert zugleich „hier geht's
     weiter"). --ws-fade ≈ eine Pillenbreite. */
  --ws-fade: 2.4rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ws-fade), #000 calc(100% - var(--ws-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--ws-fade), #000 calc(100% - var(--ws-fade)), transparent 100%);
}
.weekstrip-rail::-webkit-scrollbar { display: none; }   /* WebKit: Leiste aus */
.weekstrip-day {
  position: relative;
  flex: 0 0 2.9rem;                       /* feste Breite → ~7 sichtbar, Rest scrollbar */
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
  padding: 0.45rem 0.1rem 0.55rem;
  background: var(--paper);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, background 0.12s, color 0.12s;
}
/* Handgezeichneter Rand der Tages-Pille auf einem ::before-Overlay (Wobble-
   Filter), damit nur die Kontur wackelt, die Datumszahl (Text) aber scharf
   bleibt. Absolut positioniert → kein Flex-Item, Layout unverändert. */
.weekstrip-day::before {
  content: ''; position: absolute; inset: 0;
  border: var(--ink-border); border-radius: var(--radius-pill);
  filter: url(#sketch-icons); pointer-events: none;
}
.weekstrip-day:active { transform: translateY(1px); }
.weekstrip-wd { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.55; }
.weekstrip-num { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; }
.weekstrip-day.today:not(.selected) .weekstrip-num,
.weekstrip-day.today:not(.selected) .weekstrip-wd { color: var(--accent); opacity: 1; }
.weekstrip-day.selected { background: var(--ink); color: #fff; }
.weekstrip-day.selected .weekstrip-wd { opacity: 0.75; }
/* Wochenende (Sa/So) leicht hervorheben → bessere Orientierung im Streifen. */
.weekstrip-day.weekend:not(.selected) { background: var(--weekend-tint); }
.weekstrip-day.weekend:not(.selected) .weekstrip-wd { opacity: 0.8; }
.weekstrip-dateinput { position: absolute; left: 1rem; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }

/* ── Personen-Filter: nur Avatare (grösser, Personenfarbe) ───────────────
   Volle Breite verteilt; Personen-Buttons zeigen nur den Avatar (kein Name),
   aktiv = Personenfarbe als Rahmen. Alle/Ohne bleiben als kompakte Labels. */
.person-filter { display: flex; gap: 0.4rem; width: 100%; margin: 0.5rem 0 0.85rem; }
.person-filter > button {
  flex: 1 1 0; min-width: 0; height: 48px; padding: 0.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.4);
  border: 2px solid transparent; border-radius: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  filter: url(#sketch-icons);   /* handgezeichnete, wackelnde Kontur */
}
.person-filter > button:hover { background: rgba(255,255,255,0.6); }
.person-filter > button:active { transform: translateY(1px); }
.person-filter > button.active { background: var(--paper); border-color: var(--ink); }
/* Personen-Buttons tragen die Personenfarbe: dezent als Grundton, kräftiger aktiv. */
.person-filter > button.pfa-person { background: color-mix(in srgb, var(--pf-color, #888) 10%, rgba(255,255,255,0.4)); }
.person-filter > button.pfa-person.active {
  border-color: var(--pf-color, var(--ink));
  background: color-mix(in srgb, var(--pf-color, #888) 24%, #fff);
}
.person-filter .pfa-av { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.person-filter .pfa-av svg { width: 100%; height: 100%; }
.person-filter .pfa-label { font-size: 0.74rem; font-weight: 700; color: rgba(0,0,0,0.5); }
.person-filter > button.active .pfa-label { color: var(--ink); }

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  margin: 0.3rem 0.2rem;
  padding: 0.25rem 0;
  text-decoration: none;
  color: rgba(28,28,28,.55);   /* gedämpfte Tinte auf der Papier-Leiste */
  border-radius: var(--radius-pill);
  transition: color 0.15s, background 0.15s;
}
/* Aktiver Tab: Akzent-Pille (Teal) – dieselbe Aktiv-Sprache wie .nav-settings.active
   in der Desktop-Nav, konsistent mit dem App-Akzent statt einer Sektionsfarbe. */
.bottom-nav-item.active {
  color: var(--accent-dk);
  background: var(--accent-lt);
  box-shadow: none;
}
.bottom-nav-icon {
  font-size: 1.2rem; line-height: 1;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.bottom-nav-icon .ui-icon {
  width: 22px; height: 22px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.bottom-nav-item.active .bottom-nav-icon .ui-icon { opacity: 1; }
/* Mockup-Nav: nur Icons, keine Labels */
.bottom-nav-label { display: none; }

/* Hand-drawn ("sketchy") Icon-Look: Wobble-Filter (siehe #sketch-icons in nav.php) */
.bottom-nav-icon .ui-icon,
.nav-icon-btn img,
.nav-icon-btn .ui-icon,
.flip-btn svg {
  filter: url(#sketch-icons);
}

/* ── Page Header ─────────────────────────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}
/* ── Consistent page / section title ────────────────────────────
   Used as .page-title / .tasks-title / .menus-title / .shop-title
   ──────────────────────────────────────────────────────────────── */
.page-title,
.tasks-title,
.menus-title,
.shop-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;  /* Display-Font ist nur 400 – kein Fake-Bold */
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--text);
}
.page-subtitle,
.tasks-subtitle,
.menus-subtitle,
.shop-subtitle {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.1rem;
}
.page-header-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Hand-drawn: kräftige Aktions-Buttons als „Sticker" – Tinten-Outline,
   bauchige Pillen-Form, harter Offset-Schatten, der beim Drücken einrastet. */
.btn-primary, .btn-secondary, .btn-danger {
  border-color: var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled) { transform: translate(2px, 3px); box-shadow: none; }
.btn-primary  { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dk); }
.btn-secondary { background: var(--paper); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--surface2); }
.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; padding: 0.4rem 0.6rem; }
.btn-ghost:hover { color: var(--text); background: #f5f5f5; }
.btn-danger { background: var(--paper); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }

/* ── Utility-Klassen (zentrale Ablösung wiederkehrender Inline-Styles) ── */
.u-flex1    { flex: 1; }
.u-w100     { width: 100%; }
.u-m0       { margin: 0; }
.u-mt-2     { margin-top: 2rem; }
.u-mb-1     { margin-bottom: 1rem; }
.u-mb-sm    { margin-bottom: 0.75rem; }
.u-mb-xs    { margin-bottom: 0.5rem; }
.u-muted    { color: var(--muted); }
.u-text2    { color: var(--text-2); }
.u-empty    { color: var(--muted); text-align: center; padding: 2rem 0; }
.u-row-wrap { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.u-row-sm   { display: flex; gap: 0.4rem; align-items: center; }
.u-row-g4   { display: flex; gap: 0.4rem; }
.u-icon     { width: 18px; height: 18px; }
.u-icon-mid { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; opacity: 0.7; }
.u-dot      { width: 12px; height: 12px; opacity: 0.6; }

/* ── Form Elements ───────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.input, .select, .textarea {
  width: 100%;
  background: var(--paper);
  border: var(--ink-border);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  /* Prevent zoom on iOS */
  font-size: max(16px, 0.9rem);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}
.input::placeholder { color: var(--muted); }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8680' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.2rem;
}
.textarea { resize: vertical; min-height: 80px; font-size: 0.9rem; }
.input-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Import-Vorschau-Zeilen (Termine/Kalender importieren – settings.php &
   kalender.php). Zentral statt doppelter Inline-<style>-Blöcke, mit Tinten-Rand
   statt fremdem Grau (#eee). */
.import-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1.5px solid rgba(28,28,28,0.12); flex-wrap: wrap; }
.import-row:last-child { border-bottom: none; }
.import-row input[type=checkbox] { flex-shrink: 0; }
.import-row .import-fields { display: flex; gap: 0.4rem; flex: 1; flex-wrap: wrap; align-items: center; }
.import-row .import-fields input,
.import-row .import-fields select { font-size: 0.8rem; padding: 0.3rem 0.5rem; border: var(--ink-border); border-radius: var(--radius); font-family: inherit; background: var(--paper); }
.import-row .import-fields input.import-title { flex: 2; min-width: 120px; }
.import-row .import-fields input.import-date { width: 130px; }
.import-row .import-fields input.import-time { width: 78px; }
.import-hint { font-size: 0.7rem; color: var(--muted, #999); margin-top: 0.3rem; }

/* ── §3 Hand-drawn Formfelder ──────────────────────────────────────
   input/select/textarea können selbst kein ::before tragen und ein Filter auf
   dem Feld würde den eingegebenen Text verwackeln. Deshalb zieht common.js
   (wobbleWrapFields) global einen .fw-Wrapper um jedes .input/.select/.textarea;
   dessen ::before zeichnet den wobbelnden Tinten-Rand (#sketch-icons), das Feld
   selbst bleibt randlos → scharfer Text. Gated auf Seiten mit #sketch-icons. */
.fw { position: relative; display: block; min-width: 0; }
.fw::before {
  content: ''; position: absolute; inset: 0;
  border: var(--ink-border); border-radius: var(--radius-md);
  filter: url(#sketch-icons); pointer-events: none; z-index: 1;
  transition: border-color 0.15s;
}
/* Feld randlos (Box-Metrik via transparentem 2px-Rand erhalten), Fokus-Ring
   wandert auf den Wrapper, damit kein zweiter, gerader Rand aufblitzt. */
.fw > .input, .fw > .select, .fw > .textarea { border-color: transparent !important; box-shadow: none !important; }
.fw:focus-within::before { border-color: var(--accent); }
.fw:focus-within { box-shadow: 0 0 0 3px var(--accent-lt); border-radius: var(--radius-md); }
/* Flex-/Breiten-Rollen, die vorher direkt am Feld hingen, jetzt am Wrapper. */
.rec-times .fw, .rec-interval .fw, .search-bar .fw, .step-row .fw, .ob-person-row .fw { flex: 1; min-width: 0; }
.nutri-extra-row .fw:has(> .select) { flex: 0 0 36%; min-width: 0; }
.nutri-extra-row .fw:has(> .input) { flex: 1; min-width: 0; }
/* (Import-Mini-Zeilen behalten bewusst ihren geraden Tinten-Rand – dichte,
   tabellarische Felder; Wobble dort wäre nur Unruhe.) */
/* Schmale Auto-Breite-Selects: Wrapper schrumpft mit statt volle Zeilenbreite. */
.fw:has(> .days-select), .fw:has(> .member-role-select) { display: inline-block; width: auto; }

/* ── Cards ───────────────────────────────────────────────────── */
/* Hand-drawn „Sticker": Papier-Fläche, kräftige Tinten-Outline, harter
   Offset-Schatten, bauchige Ecken. */
.card { background: var(--paper); border: var(--ink-border); border-radius: var(--hand-radius); overflow: hidden; box-shadow: var(--hand-shadow); position: relative; z-index: 1; }
.card-head { padding: 1rem 1.25rem; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.card-title { font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.01em; }
.card-body { padding: 1.25rem; }

/* ══════════════════════════════════════════════════════════════
   WEEK GRID – Desktop: 7 Spalten, Mobile: Tage untereinander
   ══════════════════════════════════════════════════════════════ */
.week-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.week-label {
  font-family: var(--font-display);
  font-size: 1rem;
  flex: 1;
  text-align: center;
  min-width: 0;
}

/* Desktop: 7 Spalten nebeneinander */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.day-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.day-header { text-align: center; padding: 0.35rem; border-radius: var(--radius); }
.day-name { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.day-date { font-size: 1.1rem; font-family: var(--font-display); color: rgba(0,0,0,0.4); line-height: 1.2; }

.day-col.today .day-date { color: var(--accent); font-style: italic; }
.day-col.today .day-header { background: var(--accent-lt); }

/* Mobile: Tage untereinander als Zeilen */
@media (max-width: 700px) {
  .week-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .day-col {
    /* Tag als horizontale Zeile: Header links, Slots rechts */
    display: grid;
    grid-template-columns: 56px 1fr 1fr;
    gap: 0.4rem;
    align-items: stretch;
  }
  .day-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 40px;
  }
  .day-col.today .day-header {
    background: var(--accent-lt);
    border-color: #c8dece;
  }
  .day-name { font-size: 0.62rem; }
  .day-date { font-size: 1.3rem; }
  .meal-slot { min-height: 70px; }
  .meal-slot-img { height: 40px; }
}

.meal-slot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.55rem;
  min-height: 88px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.meal-slot:hover, .meal-slot:active { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.meal-slot.lunch  { background: var(--lunch-bg); }
.meal-slot.dinner { background: var(--dinner-bg); }
.meal-slot.filled { border-color: var(--border-dark); }

.meal-slot-img {
  width: 100%;
  height: 48px;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 0.2rem;
  display: block;
}
.meal-type-badge { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.meal-name { font-size: 0.78rem; font-weight: 500; color: var(--text); line-height: 1.3; }
.meal-cat  { font-size: 0.65rem; color: var(--muted); }
.meal-empty { font-size: 0.7rem; color: var(--border-dark); font-style: italic; margin-top: auto; }

/* Action buttons: immer sichtbar auf Touch-Geräten */
.meal-actions {
  display: none;
  position: absolute;
  bottom: 4px; right: 4px;
  gap: 3px;
}
.meal-slot.filled:hover .meal-actions,
.meal-slot.filled:focus-within .meal-actions { display: flex; }

/* Auf Mobile immer zeigen wenn filled */
@media (max-width: 700px) {
  .meal-slot.filled .meal-actions { display: flex; }
}

.meal-action-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--muted);
  transition: all 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.meal-action-btn:hover,
.meal-action-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.meal-action-btn.danger:hover,
.meal-action-btn.danger:active { background: var(--danger); border-color: var(--danger); color: #fff; }
.meal-action-btn.shop-toggle-btn.excluded { opacity: 0.5; }
.meal-action-btn.shop-toggle-btn.excluded s { text-decoration: line-through; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28,27,41,0.5);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
body:has(.modal-backdrop.open) { overflow: hidden; }
.modal {
  background: var(--paper);
  border: none;
  border-radius: var(--hand-radius);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  /* Nicht das Modal selbst scrollt, sondern der .modal-body (Flex-Spalte). So
     deckt die handgezeichnete ::before-Border immer die ganze Modal-Box ab und
     wird nicht „mittendurch" abgeschnitten, wenn der Inhalt höher ist als die
     Box. overflow:hidden clippt den Inhalt sauber auf die runden Ecken. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-lg);
  transform: translateY(10px);
  transition: transform 0.2s;
  position: relative;
}
/* Hand-drawn: wobbliger Tinten-Rahmen wie bei den Karten (z.B. neue Aufgabe /
   neues Menu). Liegt auf einem ::before mit #sketch-icons (global via nav.php),
   damit der Modal-Inhalt selbst nicht mitverzerrt wird. */
.modal::before {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--ink-border);
  border-radius: inherit;
  filter: url(#sketch-icons);
  pointer-events: none;
  z-index: 5;
}
.modal-backdrop.open .modal { transform: translateY(0); }
/* Kopf/Fuß sitzen auf dem Papier (var(--paper)) und werden von einer dezenten
   Tinten-Haarlinie statt einem fremden Grau (#eee) getrennt – passend zum
   handgezeichneten Tinten-Rahmen (.modal::before). */
.modal-head { padding: 1.1rem 1.25rem; border-bottom: 1.5px solid rgba(28,28,28,0.14); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--paper); z-index: 1; border-radius: var(--hand-radius) var(--hand-radius) 0 0; }
.modal-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.modal-body  { padding: 1.25rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Modals mit eigenem Inhalts-Container statt .modal-body (Kochmodus, Menüansicht)
   scrollen genauso innerhalb der Flex-Spalte. */
#cookContent, #menuViewContent { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-foot  { padding: 0.9rem 1.25rem; border-top: 1.5px solid rgba(28,28,28,0.14); display: flex; justify-content: flex-end; gap: 0.6rem; align-items: center; position: sticky; bottom: 0; background: var(--paper); border-radius: 0 0 var(--hand-radius) var(--hand-radius); }

/* ── Erinnerungs-Overlay (Glocke) ──────────────────────────────── */
.notif-sec { margin-bottom: 1.1rem; }
.notif-sec:last-of-type { margin-bottom: 0.5rem; }
.notif-sec-title { font-size: 0.78rem; font-weight: 700; color: var(--muted, #888); letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.notif-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--text); padding: 0.25rem 0; cursor: pointer; }
.notif-toggle input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.notif-sel { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--text); margin-top: 0.4rem; flex-wrap: wrap; }
.notif-sel select { padding: 0.3rem 0.5rem; border: var(--ink-border); border-radius: var(--radius-md); font-family: inherit; font-size: 0.88rem; background: var(--paper, #fff); }
.notif-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
/* Personen-Picker im Glocken-Overlay: Avatar-Chips (.pfa), die bei vielen
   Mitgliedern umbrechen statt zu schrumpfen. */
.notif-person-filter { flex-wrap: wrap; margin: 0; }
.notif-person-filter > button { flex: 0 0 auto; width: 56px; }
.notif-person-filter > button.pfa-none { width: auto; padding: 0 0.7rem; }

/* Modal auf Mobile: zentriert, über Bottom-Nav */
@media (max-width: 640px) {
  .modal-backdrop {
    align-items: flex-start;
    padding: 0.75rem 0.75rem calc(var(--bottom-nav-h) + 0.75rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal {
    border-radius: var(--radius-lg);
    max-height: none;
    max-width: 100%;
    margin: auto 0;
  }
}

/* ── Cook Mode ───────────────────────────────────────────────── */
.cook-header { text-align: center; padding: 1.25rem 1.25rem 0; }
.cook-menu-name { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.02em; }
.cook-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.cook-progress { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem 0; }
.cook-progress-bar { flex: 1; height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
.cook-progress-fill { height: 100%; background: var(--success); border-radius: 2px; transition: width 0.4s ease; }
.cook-step-count { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.cook-step-body { padding: 1.25rem; }
.cook-step-number { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--success); margin-bottom: 0.5rem; }
.cook-step-text { font-size: 1rem; line-height: 1.75; color: var(--text); }
.cook-loading { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.cook-loading .spinner { margin: 0 auto 0.75rem; }
.cook-nav { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 1.25rem; }
.cook-done { text-align: center; padding: 2rem 1.5rem; }
.cook-done-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.cook-done-text { font-family: var(--font-display); font-size: 1.3rem; color: var(--success); }
.cook-menu-picker { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; }
.cook-pick-btn { display: flex; align-items: center; padding: 0.75rem 1rem; background: var(--paper); border: var(--ink-border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.95rem; font-weight: 500; transition: background 0.15s; }
.cook-pick-btn:hover { background: var(--surface2); }
.cook-pick-btn:hover { background: var(--surface2); }
.cook-pick-cancel { padding: 0.6rem 1rem; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; }

/* Slot modal: added menus list */
.slot-added-menus { margin-bottom: 0.75rem; }
.slot-added-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.35rem; }
.slot-added-item { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.65rem; background: var(--surface); border-radius: 10px; margin-bottom: 0.3rem; font-size: 0.85rem; }
.slot-added-actions { display: flex; align-items: center; gap: 0.15rem; }
.slot-move-btn { background: none; border: none; cursor: pointer; font-size: 0.6rem; color: rgba(0,0,0,0.3); padding: 0.15rem 0.3rem; border-radius: 6px; transition: all 0.15s; line-height: 1; }
.slot-move-btn:hover:not(:disabled) { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.6); }
.slot-move-btn:disabled { opacity: 0.2; cursor: default; }
.slot-remove-menu-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.85rem; padding: 2px 6px; border-radius: 6px; transition: color 0.15s; }
.slot-remove-menu-btn:hover { color: #d93030; }

/* ══════════════════════════════════════════════════════════════
   MENU GRID – kein horizontaler Scroll
   ══════════════════════════════════════════════════════════════ */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  /* Kein overflow-x, kein min-width */
}

@media (max-width: 480px) {
  .menu-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

.menu-card {
  background: var(--paper);
  border: var(--ink-border);
  border-radius: var(--hand-radius);
  box-shadow: var(--hand-shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.menu-card:hover { box-shadow: var(--hand-shadow-hover); transform: translateY(-2px); }
.menu-card:active { transform: translateY(0); }
.menu-card-img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--surface2); }
.menu-card-img-placeholder {
  width: 100%; height: 70px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  font-size: 1.1rem; color: rgba(0,0,0,0.18);
}
.menu-card-img-icon {
  width: 28px; height: 28px; opacity: 0.15;
}
.menu-card-body { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.menu-card-name { font-weight: 500; font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-card-desc { font-size: 0.75rem; color: var(--text-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-card-meta { font-size: 0.68rem; color: var(--muted); display: flex; gap: 0.6rem; margin-top: 0.15rem; flex-wrap: wrap; }
.menu-card-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }

/* Sketchy-Variante der generischen Menü-Karten (z.B. Slot-Menü-Picker auf
   app.php): handgezeichnete Wobble-Kontur (#sketch-card) + weisse Outline
   (4px eingerückter Rahmen, Bild eingerückt) wie die Karten in der Menü-
   Bibliothek (menus.css). Höhere Spezifität als die Basis-.menu-card oben. */
.menu-grid .menu-card {
  position: relative;
  border: none;
  border-radius: 20px;
  overflow: visible;
}
.menu-grid .menu-card::before {
  content: ''; position: absolute; inset: 4px; z-index: 2;
  border: var(--ink-border); border-radius: 16px;
  filter: url(#sketch-card); pointer-events: none;
}
.menu-grid .menu-card-img,
.menu-grid .menu-card-img-placeholder {
  width: calc(100% - 8px); margin: 4px 4px 0; border-radius: 14px 14px 0 0;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.badge-meat       { background: var(--cat-meat-bg);  color: var(--cat-meat-fg); }
.badge-fish       { background: var(--cat-fish-bg);  color: var(--cat-fish-fg); }
.badge-vegetarian { background: var(--cat-veg-bg);   color: var(--cat-veg-fg); }
.badge-vegan      { background: var(--cat-veg-bg);   color: var(--cat-veg-fg); }
.badge-soup       { background: var(--cat-soup-bg);  color: var(--cat-soup-fg); }
.badge-salad      { background: var(--cat-salad-bg); color: var(--cat-salad-fg); }
.badge-cold       { background: var(--cat-cold-bg);  color: var(--cat-cold-fg); }
.badge-other      { background: var(--surface2);     color: var(--text-2); }

/* ── Ingredient Rows ─────────────────────────────────────────── */
.ing-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.ing-row  { display: grid; grid-template-columns: 1fr 70px 70px 28px 28px 32px; gap: 0.3rem; align-items: center; }
.ing-row .input { font-size: 0.82rem; padding: 0.4rem 0.5rem; }
.ing-row.has-tag { grid-template-columns: 1fr 70px 70px 70px 28px 32px; }
.ing-tag-btn {
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 0.75rem; padding: 0; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.ing-tag-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.ing-row.has-tag .ing-tag-btn { display: none; }
/* common.js (wobbleWrapFields) zieht einen .fw-Wrapper um jedes .input — das
   Grid-Item ist dann der Wrapper, nicht das Feld. Darum auch den Wrapper des
   Tag-Felds ausblenden, sonst belegt er eine Spalte und das ✕ kippt in die
   nächste Zeile, bis „Tag" geklickt wird (has-tag). */
.ing-row:not(.has-tag) .ing-tag,
.ing-row:not(.has-tag) .fw:has(> .ing-tag) { display: none; }
/* „Von der Einkaufsliste ausschliessen" je Zutat: Warenkorb-Button, der aktiv
   einen durchgestrichenen, roten Warenkorb zeigt. */
.ing-excl-btn {
  position: relative; width: 28px; height: 28px; border: none; border-radius: 6px;
  background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: all 0.12s;
}
.ing-excl-btn img { width: 16px; height: 16px; opacity: 0.4; }
.ing-excl-btn:hover { background: rgba(0,0,0,0.06); }
.ing-excl-btn:hover img { opacity: 0.7; }
.ing-excl-btn.active img { opacity: 0.85; filter: brightness(0) saturate(100%) invert(33%) sepia(56%) saturate(2200%) hue-rotate(335deg) brightness(95%) contrast(95%); }
/* Durchgestrichener Warenkorb im aktiven Zustand (diagonaler roter Strich). */
.ing-excl-btn.active::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 2px; background: var(--danger); transform: rotate(-45deg); border-radius: 2px;
}
.ing-row.ing-excluded .ing-name { text-decoration: line-through; opacity: 0.55; }

/* ── Autocomplete ────────────────────────────────────────────── */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border: var(--ink-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow);
  z-index: 400; max-height: 200px; overflow-y: auto;
}
.autocomplete-item { padding: 0.5rem 0.8rem; font-size: 0.85rem; cursor: pointer; transition: background 0.1s; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--accent-lt); color: var(--accent-dk); }

/* ── Image Upload ────────────────────────────────────────────── */
.img-upload-area {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 1rem; text-align: center; cursor: pointer;
  transition: all 0.15s; position: relative;
}
.img-upload-area:hover { border-color: var(--accent); background: var(--accent-lt); }
.img-upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.img-preview { width: 100%; max-height: 150px; object-fit: cover; border-radius: var(--radius); margin-bottom: 0.5rem; display: block; }
.img-upload-hint { font-size: 0.76rem; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   SHOPPING – kein horizontaler Scroll
   ══════════════════════════════════════════════════════════════ */
.days-tabs {
  display: flex; gap: 0.3rem;
  flex-wrap: wrap; /* wrap statt scroll */
  align-items: center;
  margin-bottom: 0;
}
.days-tab {
  padding: 0.35rem 0.8rem;
  border: 2px solid #ddd; border-radius: var(--radius-pill);
  background: #fff; color: var(--text-2);
  font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.days-tab.active { background: #5b7fff; border-color: #5b7fff; color: #fff; }
.days-select { width: auto; font-size: 0.78rem; padding: 0.35rem 1.8rem 0.35rem 0.6rem; }

.shopping-section { margin-bottom: 1.1rem; background: var(--sec-shop); border-radius: var(--radius-lg); padding: 0.75rem 1rem; }
.shopping-section-title {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(0,0,0,0.45); margin-bottom: 0.45rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.shop-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: opacity 0.2s; min-width: 0; overflow: hidden;
  max-width: 100%;
}
.shop-item:last-child { border-bottom: none; }
.shop-item.checked { opacity: 0.4; }
.shop-item.checked .shop-name { text-decoration: line-through; }
.shop-check {
  width: 21px; height: 21px; flex-shrink: 0;
  border: 2px solid var(--ink); border-radius: 6px;
  background: var(--paper); cursor: pointer;
  appearance: none; transition: background 0.15s, border-color 0.15s; position: relative;
  /* handgezeichneter Wobble auf Kästchen + Häkchen (gleicher Filter wie UI-Icons) */
  filter: url(#sketch-icons);
}
/* abgehakt: App-Accent statt Standard-Grün, passend zum Handdrawn-Design */
.shop-check:checked { background: var(--accent); border-color: var(--accent); }
.shop-check:checked::after {
  content: ''; position: absolute; left: 4px; top: 2px;
  width: 11px; height: 6px;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: rotate(-45deg);
}
.shop-name   { font-size: 0.88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-amount { font-size: 0.8rem; color: var(--text-2); white-space: nowrap; flex-shrink: 0; min-width: 50px; max-width: 100px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.shop-menus  { font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 80px; max-width: 90px; flex-shrink: 0; }
.shop-manual-badge { font-size: 0.62rem; color: rgba(0,0,0,0.3); white-space: nowrap; min-width: 80px; max-width: 90px; flex-shrink: 0; font-style: italic; }

/* ── Search ──────────────────────────────────────────────────── */
.search-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.search-bar .input { flex: 1; min-width: 0; }

/* ── Filter Pills ────────────────────────────────────────────── */
.filter-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pill {
  padding: 0.2rem 0.7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 0.74rem; cursor: pointer; color: var(--text-2);
  transition: all 0.15s; white-space: nowrap;
}
.pill.active { background: var(--text); border-color: var(--text); color: #fff; }
.pill:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

/* ── Toast ───────────────────────────────────────────────────── */
.toast-wrap { position: fixed; bottom: calc(var(--bottom-nav-h) + 0.75rem); right: 1rem; z-index: 500; display: flex; flex-direction: column; gap: 0.4rem; }
.toast {
  background: var(--text); color: #fff; font-size: 0.82rem;
  padding: 0.6rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow);
  animation: toastIn 0.25s ease;
}
.toast.error { background: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  display: inline-block;
  background: url('images/spinner.svg') no-repeat center / contain;
  color: var(--accent);
  vertical-align: middle;
}
.cook-loading .spinner { width: 28px; height: 28px; }
.btn .spinner { width: 14px; height: 14px; margin-right: 0.25rem; }
.loading-overlay { display: flex; align-items: center; justify-content: center; padding: 3rem; color: var(--muted); gap: 0.6rem; font-size: 0.85rem; }

/* ── Archiv-Trennlinie ───────────────────────────────────────── */
.feed-day.past { opacity: 0.78; }

/* ── Misc ────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty-state-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.empty-state-text { font-size: 0.84rem; }
.divider { height: 1px; background: var(--border); margin: 1rem 0; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 0.82rem; }
.flex { display: flex; }
.gap-2 { gap: 0.5rem; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-1 { margin-top: 0.4rem; }
.mt-2 { margin-top: 1rem; }
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE – alles unter 640px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Desktop Nav verstecken, Bottom Nav zeigen */
  .nav-links { display: none; }
  .bottom-nav { display: flex; }
  .main-content { padding-bottom: calc(var(--bottom-nav-h) + 1rem + env(safe-area-inset-bottom, 0px)); }
  /* Mobile: Seiten-Header ausblenden (Logo-Header oben genügt) */
  .page-header { display: none; }

  .page-header { flex-direction: column; gap: 0.5rem; }
  .page-title { font-size: 1.5rem; }
  .page-header-actions { width: 100%; }

  .modal-body { padding: 1rem; }
  .modal-foot { padding: 0.75rem 1rem; }

  .ing-row { grid-template-columns: 1fr 56px 56px 24px 24px 26px; gap: 0.25rem; }
  .ing-row.has-tag { grid-template-columns: 1fr 56px 56px 56px 24px 26px; }

  /* Woche Navigation kompakter */
  .week-nav { gap: 0.35rem; }
  .week-label { font-size: 0.88rem; }

  /* Shopping controls stapeln */
  .days-tabs { gap: 0.25rem; }
  .days-tab { padding: 0.3rem 0.65rem; font-size: 0.74rem; }

  /* Shopping items: prevent overflow on narrow screens */
  .shop-menus { min-width: 0; max-width: 70px; }
  .shop-manual-badge { min-width: 0; max-width: 55px; }
  .shop-amount { min-width: 35px; max-width: 70px; }
  .shop-container .shop-tag { max-width: 50px; }

  /* Aufgaben-Filterleiste: Labels weg, Zeilen trennen */
  .task-filter-label { display: none; }
  .task-filter-bar { gap: 0.9rem; }
  .task-filter-row + .task-filter-row { padding-top: 0.25rem; border-top: 1px solid var(--border); }
}

/* Sehr schmale Screens: Einkaufs-Items früher abschneiden (…), damit die
   Kachel nicht zu breit wird und der Name nicht aus dem Bild gedrängt wird. */
@media (max-width: 400px) {
  .shop-item { gap: 0.4rem; }
  .shop-name   { font-size: 0.82rem; }
  .shop-amount { min-width: 28px; max-width: 52px; font-size: 0.74rem; }
  .shop-menus  { max-width: 48px; }
  .shop-manual-badge { max-width: 40px; }
  .shop-container .shop-tag { max-width: 38px; }
}

/* ── Desktop Nav Logout (versteckt aber vorhanden für direkt-URL) */
.nav-logout { display: none; }

/* ── Persons / Tasks / Cook (v2) ─────────────────────────────── */
.color-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.person-list, .task-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.person-row, .task-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--sec-tasks-bg);
  border: none;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
}
.person-name {
  flex: 1;
  font-weight: 500;
}
.task-card-body { flex: 1; min-width: 0; }
.task-card-title { font-weight: 500; line-height: 1.3; display: flex; align-items: center; gap: 0.3rem; }
.task-card-desc { color: var(--muted); margin-top: 0.2rem; }
.task-card-meta { margin-top: 0.15rem; }
.task-recurrence-icon { font-size: 0.85rem; }

/* ── UI-Icons (Icon Park Solid, inline via icon()/uiIcon()) ───── */
.ui-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: currentColor;
}
/* Kategorie-Icon im Menü-Platzhalter: etwas kräftiger als der sehr blasse
   Platzhalter-Text, damit das monochrome Icon sichtbar bleibt. */
.ui-icon.cat-icon { color: rgba(0,0,0,0.4); }

/* Cook badge im Meal Slot */
/* Cook indicator: avatar-only sticker peeking over the top-left of the tile */
.cook-badge {
  position: absolute;
  top: 15px; left: 15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  font-size: 0;
  background: transparent !important;
  pointer-events: none;
}
.cook-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

/* Tasks im Wochenplan-Tageskarten */
/* ── Task pills: word-magnet tiles (white, hard shadow, slight tilt) ─── */
.feed-task-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.5rem;
  margin-top: 1.1rem;
}
/* (Aufgaben-Überschrift ist jetzt .feed-section-head.feed-task-head → css/app.css) */
/* Aufgaben als kompakte, floatende Sticker-Pillen (farbig nach Person) */
.task-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  background: #fff;
  border-radius: var(--radius-pill);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: none;
  border: var(--ink-border);
  transition: box-shadow 0.1s, transform 0.1s;
  transform: rotate(var(--tilt, 0deg));
  /* Kein Filter: der Aufgaben-Titel (Text) darf nicht wackeln. */
}
.task-item:active {
  box-shadow: none;
  transform: rotate(var(--tilt, 0deg)) translate(2px, 3px);
}
.task-item.done { opacity: 0.45; }
.task-item.done .task-title-text { text-decoration: line-through; }
.task-item.prio-high .task-title-text   { font-weight: 800; }
.task-item.prio-urgent .task-title-text { font-weight: 800; color: var(--danger); }
.task-check {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.task-icon {
  font-size: 0.75rem;
  flex-shrink: 0;
}
.task-title-text {
  cursor: inherit;
  line-height: 1.3;
}
/* Edit-Button auf der app.php-Aufgaben-Pille (wie auf tasks.php). */
.task-item-edit {
  flex-shrink: 0; margin-left: 0.15rem;
  background: none; border: none; padding: 0.15rem; cursor: pointer;
  opacity: 0.55; display: inline-flex; align-items: center;
  transition: opacity 0.15s;
}
.task-item-edit img { width: 14px; height: 14px; display: block; }
.task-item:hover .task-item-edit { opacity: 0.85; }
.task-item-edit:hover { opacity: 1; }
/* Avatar in der Pill ist über seinen verschobenen viewBox (app.php) nach links
   gerückt → Titel folgt nach links, damit kein Leerraum zum Avatar entsteht. */
.task-item .task-title-text { margin-left: -0.55rem; }
.task-rec-icon { font-size: 0.8rem; }
.task-assignee { white-space: nowrap; }
.task-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  /* Layout-Box bewusst niedrig + overflow sichtbar: der Avatar bestimmt die
     Pill-Höhe NICHT, sondern ragt wie ein Sticker darüber hinaus. So wird die
     Pill so flach wie der „+ Aufgabe"-Platzhalter. */
  width: 30px; height: 16px; overflow: visible;
}
.task-assignee-tag {
  margin-left: auto; font-size: 0.7rem; font-weight: 600;
  opacity: 0.75; white-space: nowrap;
}
.task-item.has-assignee .task-assignee-tag {
  color: rgba(0,0,0,0.55);
}
/* Typ-Icon (z.B. Staubsauger, Auto, Geburtstagstorte) – aus dem Titel erkannt */
.task-type-icon-wrap { display: inline-flex; align-items: center; flex-shrink: 0; }
.task-type-icon { width: 14px; height: 14px; color: rgba(0,0,0,0.4); }
.task-item.done .task-type-icon,
.task-card.done .task-type-icon { opacity: 0.5; }
.note-person-tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.68rem; font-weight: 600;
  white-space: nowrap; opacity: 0.9; flex-shrink: 0;
}
.note-person-icon {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
  /* Layout-Box absichtlich kleiner als der Avatar + overflow sichtbar:
     so bestimmt der Avatar die Zeilenhöhe NICHT und ragt oben/unten über
     die Zeile hinaus – wie ein aufgeklebter Sticker. */
  width: 28px; height: 18px; overflow: visible; flex-shrink: 0;
}
/* Reserviert die Breite eines Avatars, wenn in der Zeile keine Person
   erkannt wurde – damit Zeit und Titel über alle Zeilen bündig bleiben.
   Höhe bewusst niedrig gehalten (passend zur note-person-icon-Box). */
.note-person-placeholder {
  display: inline-block; width: 28px; height: 18px; flex-shrink: 0;
}
.task-item.unassigned { color: var(--text); }
.task-add-btn {
  background: transparent;
  border: 2px dashed rgba(28,28,28,0.5);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1.1rem;
  font-size: 0.95rem; font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  align-self: center;
  transition: background 0.15s;
}
.task-add-btn:hover { background: rgba(28,28,28,0.05); border-color: var(--ink); color: var(--text); }

/* Schnellerfassung (Inline-Freitext „Name Aufgabe", wie Kalendereinträge).
   Gestrichelte „+"-Pille mit Texteingabe; erkennt sie einen Personennamen,
   erscheint links der Avatar und der Rand wird durchgezogen + in Personenfarbe. */
.task-quick-add {
  display: inline-flex; align-items: center; gap: 0.3rem;
  align-self: center;
  max-width: 100%;
  padding: 0.35rem 0.9rem;
  background: transparent;
  /* gleicher feiner gestrichelter Rand wie die Termin-Eingabe (.day-note-add-row) */
  border: 1.5px dashed rgba(28,28,28,0.30);
  border-radius: var(--radius-pill);
  transition: background 0.15s, border-color 0.15s;
}
.task-quick-add:focus-within { background: rgba(28,28,28,0.04); border-color: rgba(28,28,28,0.5); }
.task-quick-add.has-person { border-style: solid; }
/* Avatar-Slot: 0 breit ohne Person, ragt wie bei den Pillen als „Sticker" heraus. */
.task-quick-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0; height: 18px; overflow: visible; line-height: 0;
  transition: width 0.15s;
}
.task-quick-add.has-person .task-quick-av { width: 26px; }
.task-quick-input {
  border: none; background: transparent; outline: none;
  /* gleicher Textstil wie die Termin-Eingabe (.day-note-add-input); font-size
     wie die Aufgaben-Pille (.task-item, 0.92rem), sonst wirkt der Placeholder grösser */
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 400; line-height: 1.4; color: var(--text);
  min-width: 8rem; width: 11rem; max-width: 100%; padding: 0.12rem 0;
}
.task-quick-input::placeholder { color: var(--muted); }

/* ── Priority / Filter / Tags (v3) ───────────────────────────── */

/* Filter Bar auf Tasks-Seite */
.task-filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.task-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.task-filter-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}
.task-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
  filter: url(#sketch-icons);   /* handgezeichnete, wackelnde Kontur */
}
.filter-chip:hover { border-color: var(--accent); }
.filter-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.filter-chip.active .color-dot { border-color: #fff; }
.task-filter-toggle {
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text);
}

/* Priorität-Badge */
.prio-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-xs);
  margin-right: 0.35rem;
  vertical-align: middle;
}
.prio-badge.prio-low      { background: #e9eaec; color: #5d6470; }
.prio-badge.prio-high     { background: #fff0d6; color: #a35a00; }
.prio-badge.prio-urgent   { background: #ffd8d8; color: #b41c1c; }

/* Priorität-Styles (kein border-left mehr) */
.task-card.prio-low      { opacity: 0.85; }

/* Erledigt-Stil */
.task-card-check {
  width: 20px; height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 0.15rem;
}
.task-card.done .task-card-title-text,
.task-card.done .task-card-desc {
  text-decoration: line-through;
  color: var(--muted);
}
.task-card.done {
  opacity: 0.7;
  background: var(--surface2);
}
.task-card.done .prio-badge { opacity: 0.5; }
.task-card.inactive {
  opacity: 0.6;
  background: var(--surface2);
}
.task-card.inactive .task-card-check { cursor: not-allowed; }
.task-card.future:not(.done) {
  background: var(--surface2);
}
.task-card.future:not(.done) .task-card-meta { font-style: italic; }

/* Überfällig */
.task-card.overdue:not(.done) {
  background: #fff3f3;
}
.overdue-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-xs);
  background: #d93030;
  color: #fff;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.task-item.prio-low      { opacity: 0.75; }
.task-prio-mark {
  font-weight: 900;
  font-size: 0.85rem;
  flex-shrink: 0;
  line-height: 1;
}
.task-prio-mark.high   { color: var(--text); }   /* Hoch → ein schwarzes ! */
.task-prio-mark.urgent { color: #d93030; }   /* Dringend → rotes !! */

/* Motivierende Animation beim Abhaken: kurzer Pop + Konfetti-Burst */
@keyframes task-pop {
  0%   { transform: rotate(var(--tilt, 0deg)) scale(1); }
  40%  { transform: rotate(var(--tilt, 0deg)) scale(1.18); }
  100% { transform: rotate(var(--tilt, 0deg)) scale(1); }
}
.task-item.just-done { animation: task-pop 0.42s ease; opacity: 1 !important; }
.confetti-piece {
  position: fixed; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 2px; pointer-events: none; z-index: 9999;
  animation: confetti-fly 0.7s ease-out forwards;
}
@keyframes confetti-fly {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .task-item.just-done { animation: none; }
}

/* Tag Pills (Anzeige) */
.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}
.tag-pill {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Tag Suggestions im Modal */
.tag-suggestions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.tag-suggest {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
}
.tag-suggest:hover { border-color: var(--accent); color: var(--accent-dk); }
.tag-suggest.active {
  background: var(--accent-lt);
  color: var(--accent-dk);
  border-color: var(--accent);
}

/* Gruppen-Header bei "Nach Tags gruppieren" */
.task-group-header {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.6rem 0 0.3rem;
  padding-left: 0.25rem;
}
.task-group-header.task-group-untag { color: var(--border-dark); }

/* ── Notifications-Karte (Settings) ──────────────────────────── */
.notif-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  position: relative;
  z-index: 1;
}
.notif-status {
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.notif-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .nav, .bottom-nav, .days-tabs,
  .page-header-actions, .shop-check, .shop-menus,
  [id="btnManualAdd"], [id="manualItem"], [id="manualAmount"] { display: none !important; }
  body { background: #fff; }
  .main-content { padding: 0; }
}
/* ── Onboarding-/Tour-Overlay (tour.php, von mehreren Seiten genutzt) ──
   Gleiche Sprache wie die regulären Modals: Papier-Karte mit handgezeichnetem
   Tinten-Rahmen (::before + #sketch-icons) und dem einheitlichen Modal-Scrim
   (rgba(28,27,41,.5)) statt des früheren schwarzen 0.78-Schleiers. */
.ob-overlay{position:fixed;inset:0;background:rgba(28,27,41,.5);z-index:9000;display:flex;align-items:center;justify-content:center;padding:1rem}
.ob-overlay.hidden{display:none}
.ob-card{position:relative;background:var(--paper);border:none;border-radius:var(--hand-radius);padding:2rem 2rem 1.75rem;width:100%;max-width:460px;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto}
.ob-card::before{content:'';position:absolute;inset:0;border:var(--ink-border);border-radius:inherit;filter:url(#sketch-icons);pointer-events:none;z-index:5}
.ob-icon{text-align:center;margin-bottom:.6rem;line-height:0}
.ob-icon img{width:72px;height:72px;border-radius:18px}
.ob-icon svg{width:54px;height:54px;color:var(--accent);filter:url(#sketch-icons)}
.ob-title{font-family:var(--font-display);font-size:1.5rem;color:var(--text);margin-bottom:.25rem;letter-spacing:-.02em}
.ob-sub{font-size:.95rem;color:var(--text-2);margin-bottom:1.4rem;line-height:1.5}
.ob-person-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.ob-name-input{flex:1;min-width:0;font-size:.95rem}
/* Farb-Auswahl im Avatar-Editor (aus der Reihe hierher verschoben) */
.obae-colors{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:0 0 1rem}
.obae-colors .ob-color-dot{width:26px;height:26px}
.ob-avatar-preview{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.ob-avatar-preview:hover{border-color:var(--accent)}
.ob-avatar-preview svg{width:100%;height:100%;display:block}
.ob-row-btn{flex-shrink:0;width:28px;height:28px;border:none;background:transparent;border-radius:50%;cursor:pointer;font-size:.95rem;line-height:1;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.ob-row-btn:hover{background:rgba(0,0,0,.06);color:var(--text)}
.ob-color-dots{display:flex;gap:.25rem;flex-shrink:0}
.ob-color-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s;flex-shrink:0}
.ob-color-dot:hover{transform:scale(1.15)}
.ob-color-dot.selected{border-color:var(--text)!important}
.tour-bg{position:fixed;inset:0;background:rgba(28,27,41,.5);z-index:9500}
.tour-bg.hidden{display:none}
.tour-tooltip{position:fixed;z-index:9600;background:var(--paper);border:none;border-radius:var(--hand-radius);padding:1.25rem 1.4rem;width:330px;box-shadow:var(--shadow-lg)}
.tour-tooltip::before{content:'';position:absolute;inset:0;border:var(--ink-border);border-radius:inherit;filter:url(#sketch-icons);pointer-events:none}
.tour-tooltip.hidden{display:none}
.tour-icon{line-height:0;margin-bottom:.5rem}
.tour-icon svg{width:30px;height:30px;color:var(--accent);filter:url(#sketch-icons)}
.tour-step-lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}
.tour-title{font-family:var(--font-display);font-size:1.25rem;color:var(--text);margin-bottom:.45rem}
.tour-text{font-size:.95rem;color:var(--text-2);line-height:1.55;margin-bottom:1rem;white-space:pre-line}
.tour-actions{display:flex;justify-content:space-between;align-items:center}
.tour-highlight{position:relative!important;z-index:9550!important;border-radius:8px!important;outline:3px solid var(--accent)!important;outline-offset:4px!important}
/* Avatar-Editor-Overlay (Onboarding) */
.obae-overlay{z-index:9100}
.obae-card{max-width:300px;text-align:center}
.obae-preview{width:140px;height:140px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;background:var(--surface)}
.obae-preview svg{width:100%;height:100%;display:block}
.obae-cycler{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.obae-cycler-label{font-size:.85rem;color:var(--text-2);font-weight:600;flex:1;text-align:center}
.obae-cycler-btn{width:34px;height:34px;border:var(--ink-border);background:var(--paper);border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--text-2);flex-shrink:0;transition:border-color .15s,color .15s}
.obae-cycler-btn:hover{border-color:var(--accent);color:var(--accent)}
.obae-actions{display:flex;gap:.5rem;margin-top:1.25rem}
/* Interaktiver Demo-Task in Schritt 2 */
.tour-demo{margin:.25rem 0 1rem;padding:.85rem;background:var(--surface2);border-radius:12px;text-align:center}
.tour-demo-hint{font-size:.72rem;color:var(--muted);margin-top:.6rem;min-height:1.1em;transition:color .2s}
.tour-demo-hint.done{color:var(--success);font-weight:600}
/* Install-Anleitung (iOS/Android) */
.ob-install-steps{background:var(--surface2);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.5rem;text-align:left}
.ob-install-steps h4{font-size:.85rem;color:var(--text);margin:0 0 .6rem;font-weight:600}
.ob-install-steps ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.ob-install-steps li{font-size:.82rem;color:var(--text-2);line-height:1.45}
.ob-install-steps .ob-inline-ico{display:inline-flex;vertical-align:-3px;width:16px;height:16px;margin:0 1px}