/* ===========================================================
   homiary. – Design Tokens
   1:1 nach homiary-CI.md (Corporate Identity & UI Design System)
=========================================================== */
:root {
  /* -- Kernfarben (Abschnitt 6 CI) -- */
  --color-primary: #103B3B;        /* Primary Dark Teal – Text, Headings, Wortmarke */
  --color-sage: #89AAA0;           /* Primary Sage – primärer Haushalt, dekorativ */
  --color-accent: #F28A6D;         /* Primary Coral – Wortmarken-Punkt, Highlights */
  --color-overlap-teal: #4B6762;   /* Dark Overlap Teal – dunkle UI-Zustände */

  --color-primary-light: #2F5650;  /* abgeleitet: hellere Petrol-Stufe (Fokus, Icons) */
  --color-primary-pale: #DCE7E1;   /* abgeleitet: sehr helle Petrol-Fläche (Badges) */
  --color-accent-dark: #D9704F;    /* abgeleitet: dunklere Coral-Stufe (Hover) */

  /* -- Pastell-Palette (Abschnitt 7 CI) -- */
  --color-mint: #E5F0EC;
  --color-mint-ink: #3E6358;
  --color-soft-coral: #FAE3DD;
  --color-soft-coral-ink: #A85333;
  --color-lavender: #E9ECF4;
  --color-lavender-ink: #4C5578;
  --color-cream: #FBF2D8;
  --color-cream-ink: #8A6A1F;

  /* -- Haushalts-Farbpalette (10 Farben, garantiert unterschiedlich
     pro Nutzer – siehe household_color() in functions.php) -- */
  --hh-mint: #E5F0EC;        --hh-mint-ink: #3E6358;
  --hh-coral: #FAE3DD;       --hh-coral-ink: #A85333;
  --hh-lavender: #E9ECF4;    --hh-lavender-ink: #4C5578;
  --hh-cream: #FBF2D8;       --hh-cream-ink: #8A6A1F;
  --hh-sky: #E0EDF5;         --hh-sky-ink: #2E6584;
  --hh-olive: #E6EDDE;       --hh-olive-ink: #55692F;
  --hh-blush: #F8E3EA;       --hh-blush-ink: #9C4463;
  --hh-sand: #F1E7D8;        --hh-sand-ink: #7A5C33;
  --hh-periwinkle: #E6E5F7;  --hh-periwinkle-ink: #4F4A8A;
  --hh-moss: #DEE9DD;        --hh-moss-ink: #3A5C3C;

  /* -- Hintergrund & Flächen (Abschnitt 8 CI) -- */
  --color-bg: #FAFAF8;
  --color-bg-alt: #F1EFE7;
  --color-surface: #FFFFFF;

  /* -- Text & Zustände -- */
  --color-ink: #103B3B;
  --color-muted: #6E7168;
  --color-border: rgba(16, 59, 59, 0.08);
  --color-success: #35714F;
  --color-success-bg: #E4F0E7;
  --color-danger: #B23B2E;
  --color-danger-bg: #FBEAE7;
  --color-info-bg: #EFF1E4;

  /* -- Radien (Abschnitt 10 CI) -- */
  --radius-xs: 9px;    /* kleine Controls, Badges */
  --radius-s: 13px;    /* Inputs */
  --radius-btn: 14px;  /* Buttons */
  --radius-m: 18px;    /* Cards */
  --radius-l: 24px;    /* große Container / Modal-Sheets */
  --radius-pill: 999px;/* Pills / Badges */

  /* -- Schatten (Abschnitt 12 CI): immer teal-getönt, nie schwarz -- */
  --shadow-card: 0 2px 10px rgba(20, 50, 45, 0.05), 0 4px 20px rgba(20, 50, 45, 0.06);

  /* -- Typografie (Abschnitt 5 CI): Nunito überall -- */
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: var(--font-body);

  --nav-height: 66px;
  --sidebar-width: 96px;
  --fab-size: 58px;
  --page-width: 640px;
  --page-gutter: 16px;
  --settings-gap: 24px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
ul { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 .5rem; }
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------------- Icon-System (rounded, line-based, ~1.8px Stroke) ---------------- */
.icon {
  width: 1.4em;
  height: 1.4em;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--color-primary-pale);
  color: var(--color-primary);
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.app-shell {
  min-height: 100%;
  background: var(--color-bg);
  position: relative;
  display: flex;
  flex-direction: column;
}

.content-width {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
}

/* ---------------- App Bar ---------------- */
.appbar {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 0 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom-left-radius: var(--radius-l);
  border-bottom-right-radius: var(--radius-l);
  box-shadow: 0 4px 16px rgba(16,59,59,0.16);
}
.appbar-row {
  width: 100%;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--page-width);
  margin: 0 auto;
}
.appbar-brand {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  opacity: .85;
  min-width: 20px;
}

/* ---------------- Wordmark "homiary." ---------------- */
.wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  display: inline-flex;
  align-items: baseline;
}
.wordmark .dot { color: var(--color-accent); }
.wordmark-on-dark { color: #fff; }
.wordmark-on-dark .dot { color: var(--color-accent); }
.tagline {
  font-family: var(--font-brand);
  font-weight: 500;
  color: var(--color-muted);
}
.logo-img {
  display: block;
  height: 32px;
  width: auto;
}
.appbar-back {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
}
.appbar-back .icon { width: 1.3em; height: 1.3em; }
.appbar-title {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
}
.hh-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px var(--page-gutter) 2px;
  scrollbar-width: none;
  max-width: var(--page-width);
  margin: 0 auto;
}
.hh-switcher::-webkit-scrollbar { display: none; }
.hh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 7px 14px 7px 8px;
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.hh-chip .hh-chip-dot {
  width: 18px; height: 18px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hh-chip .hh-chip-dot .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.hh-chip.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.hh-chip.active .hh-chip-dot { background: rgba(255,255,255,0.3); }
.hh-chip-add {
  background: transparent;
  border-style: dashed;
  width: 34px;
  padding: 7px;
  text-align: center;
  justify-content: center;
}

/* Haushalts-Farbcodierung (Abschnitt 15 CI) – deterministisch pro Haushalt */
.hh-color-mint .hh-chip-dot, .hh-chip-dot.hh-color-mint, .icon-box.hh-color-mint { background: var(--hh-mint); color: var(--hh-mint-ink); }
.hh-color-coral .hh-chip-dot, .hh-chip-dot.hh-color-coral, .icon-box.hh-color-coral { background: var(--hh-coral); color: var(--hh-coral-ink); }
.hh-color-lavender .hh-chip-dot, .hh-chip-dot.hh-color-lavender, .icon-box.hh-color-lavender { background: var(--hh-lavender); color: var(--hh-lavender-ink); }
.hh-color-cream .hh-chip-dot, .hh-chip-dot.hh-color-cream, .icon-box.hh-color-cream { background: var(--hh-cream); color: var(--hh-cream-ink); }
.hh-color-sky .hh-chip-dot, .hh-chip-dot.hh-color-sky, .icon-box.hh-color-sky { background: var(--hh-sky); color: var(--hh-sky-ink); }
.hh-color-olive .hh-chip-dot, .hh-chip-dot.hh-color-olive, .icon-box.hh-color-olive { background: var(--hh-olive); color: var(--hh-olive-ink); }
.hh-color-blush .hh-chip-dot, .hh-chip-dot.hh-color-blush, .icon-box.hh-color-blush { background: var(--hh-blush); color: var(--hh-blush-ink); }
.hh-color-sand .hh-chip-dot, .hh-chip-dot.hh-color-sand, .icon-box.hh-color-sand { background: var(--hh-sand); color: var(--hh-sand-ink); }
.hh-color-periwinkle .hh-chip-dot, .hh-chip-dot.hh-color-periwinkle, .icon-box.hh-color-periwinkle { background: var(--hh-periwinkle); color: var(--hh-periwinkle-ink); }
.hh-color-moss .hh-chip-dot, .hh-chip-dot.hh-color-moss, .icon-box.hh-color-moss { background: var(--hh-moss); color: var(--hh-moss-ink); }

.card.hh-color-mint { background: var(--hh-mint); }
.card.hh-color-coral { background: var(--hh-coral); }
.card.hh-color-lavender { background: var(--hh-lavender); }
.card.hh-color-cream { background: var(--hh-cream); }
.card.hh-color-sky { background: var(--hh-sky); }
.card.hh-color-olive { background: var(--hh-olive); }
.card.hh-color-blush { background: var(--hh-blush); }
.card.hh-color-sand { background: var(--hh-sand); }
.card.hh-color-periwinkle { background: var(--hh-periwinkle); }
.card.hh-color-moss { background: var(--hh-moss); }

/* ---------------- Main / layout ---------------- */
.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 20px var(--page-gutter) 32px;
}
.app-main.with-bottomnav {
  padding-bottom: calc(var(--nav-height) + 28px);
}
.center-column {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 22px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.auth-hero {
  text-align: center;
  margin-bottom: 28px;
}
.auth-hero .logo-mark {
  width: 64px; height: 64px;
  display: block;
  margin: 0 auto 16px;
}
.auth-hero .logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.auth-hero h1 { font-size: 1.7rem; margin-bottom: 6px; }
.auth-hero p { color: var(--color-muted); font-size: .92rem; }

/* ---------------- Home-Screen (Begrüßung, Übersicht) ---------------- */
.greeting-header { margin-bottom: 22px; }
.greeting-header h1 { font-size: 1.5rem; margin-bottom: 2px; }
.greeting-header p { color: var(--color-muted); margin: 0; }

.summary-card {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-m);
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.summary-card .summary-label { font-size: .8rem; opacity: .75; font-weight: 600; margin-bottom: 4px; }
.summary-card .summary-count { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; }
.summary-card .btn { background: rgba(255,255,255,0.14); color: #fff; }
.summary-card .btn:hover { background: rgba(255,255,255,0.22); }

.mini-hh-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.mini-hh-row::-webkit-scrollbar { display: none; }
.mini-hh-card {
  position: relative;
  flex-shrink: 0;
  width: 116px;
  border-radius: var(--radius-m);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  border: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.mini-hh-card:active { transform: scale(0.96); }
.mini-hh-card.active { border-color: var(--color-primary); }
.mini-hh-card .icon-box { width: 32px; height: 32px; }
.mini-hh-card .icon-box .icon { width: 17px; height: 17px; }
.mini-hh-card .mini-hh-name { font-size: .85rem; font-weight: 700; line-height: 1.25; color: var(--color-ink); }
.mini-hh-card .mini-hh-meta { font-size: .74rem; color: var(--color-muted); font-weight: 600; }
.mini-hh-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mini-hh-check .icon { width: 11px; height: 11px; stroke-width: 3; }

.pantry-teaser-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.pantry-teaser-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.pantry-teaser-row .icon-box { width: 30px; height: 30px; }
.pantry-teaser-row .icon-box .icon { width: 16px; height: 16px; }

/* ---------------- Section headings ---------------- */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 26px 0 12px;
}
.section-heading:first-child { margin-top: 0; }
.section-heading h2 { font-size: 1.05rem; }
.section-heading .count { color: var(--color-muted); font-size: .85rem; }

/* ---------------- Cards & Surfaces ---------------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.card + .card { margin-top: 0; }

/* ---------------- Forms ---------------- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.field-hint {
  font-size: .78rem;
  color: var(--color-muted);
  margin-top: 5px;
}
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=date], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  font-size: 1rem;
  color: var(--color-ink);
  font-family: inherit;
}
input[type=date] { min-height: 48px; color-scheme: light; }
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary-light);
}
input[type=text].code-input {
  letter-spacing: .5em;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  padding-left: 8px;
}
textarea { resize: vertical; min-height: 70px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-btn);
  padding: 15px 18px;
  min-height: 50px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-overlap-teal); }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-border); }
.btn-pastel { background: var(--color-mint); color: var(--color-mint-ink); }
.btn-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.btn-ghost { background: transparent; color: var(--color-muted); }
.btn-sm { width: auto; min-height: 38px; padding: 8px 14px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 1.1em; height: 1.1em; }

.link-row { text-align: center; margin-top: 16px; font-size: .88rem; color: var(--color-muted); }
.link-row a { color: var(--color-primary); font-weight: 700; }

/* ---------------- Alerts ---------------- */
.alert {
  padding: 12px 14px;
  border-radius: var(--radius-s);
  font-size: .88rem;
  margin-bottom: 14px;
  line-height: 1.4;
}
.alert-error { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-success { background: var(--color-success-bg); color: var(--color-success); }
.alert-info { background: var(--color-info-bg); color: var(--color-primary); }

/* ---------------- Shopping list ---------------- */
.add-item-form {
  display: flex;
  gap: 8px;
  position: relative;
}
.add-item-form input { flex: 1; }
.add-item-form .btn { width: auto; padding: 12px 16px; min-height: 46px; }

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.suggestion-chip {
  background: var(--color-primary-pale);
  color: var(--color-primary);
  border: none;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: 600;
}

.sort-toolbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.sort-toolbar::-webkit-scrollbar { display: none; }
.sort-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.sort-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: 14px;
  box-shadow: var(--shadow-card);
  transition: opacity .25s ease, transform .25s ease;
}
.item-row.checked-out { opacity: 0; transform: translateX(30px); }
.item-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-sage);
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  padding: 0;
}
.item-check .icon { width: 15px; height: 15px; stroke-width: 3; }
.item-check:hover { background: var(--color-mint); border-color: var(--color-sage); }
.item-body { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.item-body-text { min-width: 0; }
.item-name { font-weight: 600; font-size: .96rem; }
.item-desc { font-size: .82rem; color: var(--color-muted); margin-top: 1px; }
.item-qty { font-size: .78rem; color: var(--color-muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.item-meta { font-size: .74rem; color: var(--color-muted); margin-top: 2px; }
.item-del {
  background: transparent;
  border: none;
  color: var(--color-muted);
  padding: 6px;
  cursor: pointer;
  display: flex;
  border-radius: 50%;
}
.item-del .icon { width: 16px; height: 16px; }
.item-del:hover { background: var(--color-danger-bg); color: var(--color-danger); }

.empty-state {
  text-align: center;
  padding: 34px 18px;
  color: var(--color-muted);
}
.empty-state .icon-box { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 14px; }
.empty-state .icon-box .icon { width: 26px; height: 26px; }
.empty-state strong { display: block; color: var(--color-ink); margin-bottom: 4px; }

/* Floating Action Button (Abschnitt 13 CI) */
.fab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--nav-height) + 20px);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(16,59,59,0.28);
  cursor: pointer;
  z-index: 25;
  transition: transform .15s ease, background-color .15s ease;
}
.fab:hover { background: var(--color-overlap-teal); }
.fab:active { transform: scale(0.94); }
.fab .icon { width: 26px; height: 26px; stroke-width: 2.2; }

/* Wiederverwendbares Grid für Karten-Sammlungen (Haushalte, Vorrat, …) */
.grid-cards {
  display: flex;
  flex-direction: column;
}
.grid-cards > * { margin-bottom: 12px; }
.grid-cards > *:last-child { margin-bottom: 0; }

.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: .86rem;
  color: var(--color-muted);
}
.history-row .icon { width: 15px; height: 15px; color: var(--color-sage); flex-shrink: 0; }
.history-row .item-name { flex: 1; text-decoration: line-through; color: var(--color-muted); font-weight: 600; font-size: .9rem; }

/* ---------------- Pantry ---------------- */
.pantry-item {
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 10px;
}
.pantry-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pantry-item-head .icon-box { width: 30px; height: 30px; }
.pantry-item-head .icon-box .icon { width: 16px; height: 16px; }
.pantry-item-head .item-name { font-size: .98rem; flex: 1; }
.pantry-quick-add {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-mint-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pantry-quick-add .icon { width: 16px; height: 16px; }
.pantry-quick-add:hover { background: var(--color-accent); color: #fff; }
.pantry-hh-list { display: flex; flex-direction: column; gap: 4px; }
.pantry-hh-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  color: var(--color-muted);
  padding: 2px 0;
}
.pantry-hh-row .hh-chip-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.pantry-hh-row strong { color: var(--color-ink); font-weight: 700; }
.pantry-hh-text { flex: 1; min-width: 0; }
.pantry-edit-toggle {
  background: transparent;
  border: none;
  color: var(--color-muted);
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
}
.pantry-edit-toggle .icon { width: 15px; height: 15px; }
.pantry-edit-toggle:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.pantry-edit-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-s);
  padding: 10px;
  margin: 4px 0 8px;
}
.pantry-edit-form input[type=number] { width: 90px; flex: none; }
.pantry-edit-form select { width: auto; flex: none; padding: 12px 10px; }
.pantry-edit-form .btn { width: auto; flex: none; }

/* ---------------- Household lists / members ---------------- */
/* ---------------- Notizen ---------------- */
.note-card { border-left: 4px solid var(--color-border); }
.note-card.note-pinned { border-left-color: var(--color-accent); background: var(--color-cream); }
.note-card-head { display: flex; align-items: center; gap: 8px; }
.note-teaser-row {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}
.note-teaser-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.note-teaser-row .member-avatar { width: 30px; height: 30px; font-size: .72rem; flex-shrink: 0; }
.note-teaser-text { min-width: 0; }
.note-teaser-text .note-meta { font-size: .74rem; color: var(--color-muted); margin-bottom: 2px; }
.note-teaser-text .note-content { font-size: .88rem; }

.household-card {
  border-radius: var(--radius-m);
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.household-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.household-card-head h3 { font-size: 1.02rem; }
.badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-pale);
  color: var(--color-primary);
}
.badge-accent { background: var(--color-cream); color: var(--color-cream-ink); }
.household-card-meta { font-size: .82rem; color: var(--color-muted); margin-top: 4px; }
.household-card-actions { display: flex; gap: 8px; margin-top: 14px; }

/* Haushalts-Karten-Hintergrundfarben (Pastell, Abschnitt 15 CI) */
.household-card.hh-color-mint { background: var(--hh-mint); }
.household-card.hh-color-coral { background: var(--hh-coral); }
.household-card.hh-color-lavender { background: var(--hh-lavender); }
.household-card.hh-color-cream { background: var(--hh-cream); }
.household-card.hh-color-sky { background: var(--hh-sky); }
.household-card.hh-color-olive { background: var(--hh-olive); }
.household-card.hh-color-blush { background: var(--hh-blush); }
.household-card.hh-color-sand { background: var(--hh-sand); }
.household-card.hh-color-periwinkle { background: var(--hh-periwinkle); }
.household-card.hh-color-moss { background: var(--hh-moss); }

.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.member-row:last-child { border-bottom: none; }
.member-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
}
.member-info { flex: 1; min-width: 0; }
.member-name { font-weight: 700; font-size: .92rem; }
.member-email { font-size: .78rem; color: var(--color-muted); }

.invite-token-box {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-s);
  padding: 12px;
  font-size: .82rem;
  margin-top: 10px;
  word-break: break-all;
}

/* ---------------- Bottom Nav (Mobile) / Sidebar (Desktop) ---------------- */
.bottomnav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-width);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  height: var(--nav-height);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
  box-shadow: 0 -4px 16px rgba(16,59,59,0.06);
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--color-muted);
  font-size: .68rem;
  font-weight: 600;
  border-radius: var(--radius-xs);
}
.bn-item .icon { width: 22px; height: 22px; }
.bn-item.active { color: var(--color-primary); }
.bn-item.active .icon { transform: translateY(-1px); stroke-width: 2.1; }

/* ---------------- Tables (admin) ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-m); box-shadow: var(--shadow-card); background: var(--color-surface); }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: left; padding: 11px 12px; white-space: nowrap; border-bottom: 1px solid var(--color-border); }
th { color: var(--color-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; background: var(--color-bg-alt); }
tr:last-child td { border-bottom: none; }
.table-actions { display: flex; gap: 6px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.stat-card .num { font-size: 1.7rem; font-weight: 800; color: var(--color-primary); }
.stat-card .label { font-size: .8rem; color: var(--color-muted); font-weight: 600; }

.admin-nav { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px; }
.admin-nav a {
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: .84rem;
  font-weight: 700;
  color: var(--color-muted);
  white-space: nowrap;
}
.admin-nav a.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.toggle-form { display: inline; }

.divider { height: 1px; background: var(--color-border); margin: 18px 0; border: none; }

.helper-text { font-size: .82rem; color: var(--color-muted); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.checkbox-row input[type=checkbox] { width: 18px; height: 18px; }
.checkbox-row label { margin: 0; font-weight: 600; font-size: .88rem; color: var(--color-ink); }

/* ===========================================================
   Responsive Breakpoints
   Mobile  (Basis, <700px):   1 Spalte, Bottom-Tab-Bar, FAB
   Tablet  (>=700px):         breiterer Inhalt, 2-spaltige Grids
   Desktop (>=1024px):        linke Sidebar-Navigation statt
                               Bottom-Nav, 3-spaltige Grids
=========================================================== */

@media (min-width: 700px) {
  :root { --page-width: 760px; --page-gutter: 28px; }

  .grid-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid-cards > * { margin-bottom: 0; }

  #active-item-list.item-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .item-list .item-row { margin-bottom: 0; }

  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .auth-hero h1 { font-size: 1.9rem; }
}

@media (min-width: 1024px) {
  body { background: var(--color-bg-alt); }

  :root { --page-width: 920px; --page-gutter: 32px; }

  .app-shell:not(.no-nav) { padding-left: var(--sidebar-width, 96px); }

  .appbar { border-radius: 0; padding: 18px 0 14px; }
  .app-main { padding-top: 26px; }
  .app-main.with-bottomnav { padding-bottom: 32px; }

  .center-column { max-width: 460px; padding: 0; }

  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  #active-item-list.item-list { grid-template-columns: repeat(3, 1fr); }

  .bottomnav {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: none;
    width: var(--sidebar-width, 96px);
    max-width: none;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 22px 8px;
    border-top: none;
    border-right: 1px solid var(--color-border);
    box-shadow: none;
  }
  .bn-item { flex: none; padding: 12px 4px; }
  .bn-item.active { background: var(--color-mint); }

  .fab { right: 40px; bottom: 40px; }

  .admin-nav { overflow-x: visible; flex-wrap: wrap; }
}

@media (min-width: 1400px) {
  :root { --page-width: 1040px; }
}

/* Home 2.3: Haushalte geben den Kontext, danach Alltag und Hinweise. */
.home-page { min-width: 0; }
.home-page .greeting-header h1 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.home-page .greeting-header p { font-size: .9rem; }
.home-page .section-heading { margin: 0 0 12px; gap: 12px; flex-wrap: wrap; }
.home-section-link {
  color: var(--color-primary); font-size: .82rem; font-weight: 700;
  min-height: 44px; display: inline-flex; align-items: center;
}
.home-households { margin-bottom: 24px; }
.home-households .mini-hh-row {
  padding: 4px 3px 10px; gap: 12px;
  scroll-snap-type: x proximity; scroll-padding-inline: 3px;
}
.home-households .mini-hh-card {
  width: 158px; gap: 6px; scroll-snap-align: start;
  box-shadow: 0 2px 8px rgba(20,50,45,.04);
}
.home-households .mini-hh-card.active { background: var(--color-mint); }
.home-households .mini-hh-name { overflow-wrap: anywhere; }
.home-household-state { font-size: .65rem; color: var(--color-muted); margin-top: 2px; }
.home-households .active .home-household-state { color: var(--color-primary); font-weight: 700; }
.home-overview { display: grid; gap: 24px; align-items: start; }
.home-overview > * { min-width: 0; }
.home-page .home-shopping-card, .home-page .home-teaser-card { margin: 0; }
.home-overview .section-heading { min-height: 44px; align-items: center; }
.home-shopping-household { font-size: .8rem; color: var(--color-muted); overflow-wrap: anywhere; margin: 0 0 8px; }
.home-shopping .summary-count { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 700; line-height: 1.3; margin-bottom: 18px; }
.home-teaser-card { padding: 6px 18px; }
.home-page .pantry-teaser-row { align-items: flex-start; padding: 14px 0; font-size: .88rem; }
.home-page .pantry-teaser-row .icon-box { flex-shrink: 0; }
.home-page .pantry-teaser-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.home-page .note-teaser-row { padding: 14px 0; }
.home-page .note-meta { overflow-wrap: anywhere; }
.home-page .home-note-pinned .member-avatar { background: var(--color-cream); color: var(--color-cream-ink); }

/* Home – kompakte Notizzeilen (2.5.1–2.8.1): eine Zeile pro Notiz mit
   direktem Erledigt-Toggle (kein Modal nötig) + Klick öffnet ein Modal für
   alles Weitere. */
.home-notes-card { padding: 4px 14px; }
.home-note-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 2px; }
.home-note-row ~ .home-note-row { border-top: 1px solid var(--color-border); }
.home-note-check-form { flex: 0 0 auto; padding-top: 5px; }
.home-note-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--color-sage); background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: transparent; cursor: pointer; padding: 0;
}
.home-note-check .icon { width: 14px; height: 14px; stroke-width: 3; }
.home-note-check:hover { background: var(--color-mint); border-color: var(--color-sage); color: var(--color-mint-ink); }
.home-note-open {
  display: flex; width: 100%; min-width: 0; gap: 12px; align-items: flex-start;
  padding: 5px 4px; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-radius: var(--radius-s);
  cursor: pointer; transition: background 150ms ease;
}
.home-note-open:hover, .home-note-open:focus-visible { background: var(--color-bg-alt); }
.home-note-avatar { width: 32px; height: 32px; flex: 0 0 32px; font-size: .78rem; }
.home-note-body { min-width: 0; flex: 1; }
.home-note-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .74rem; color: var(--color-muted); }
.home-note-author { font-size: .83rem; color: var(--color-ink); overflow-wrap: anywhere; }
.home-note-flag { padding: 2px 8px; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; }
.home-note-flag-important { background: var(--color-cream); color: var(--color-cream-ink); }
.home-note-flag-urgent { background: var(--color-danger-bg); color: var(--color-danger); }
.home-note-pin { display: inline-flex; margin-left: auto; color: var(--color-accent); }
.home-note-pin .icon { width: 14px; height: 14px; }
.home-note-text {
  margin: 4px 0 0; font-size: .92rem; font-weight: 600; color: var(--color-ink);
  overflow-wrap: anywhere; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-note-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; font-size: .74rem; color: var(--color-muted); }
.home-note-hh-icon { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 7px; }
.home-note-hh-icon .icon { width: 11px; height: 11px; }
.home-note-hh { overflow-wrap: anywhere; }
.home-note-due { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-mint); color: var(--color-mint-ink); font-weight: 700; }
.home-note-due .icon { width: 12px; height: 12px; }
.home-note-due-overdue { background: var(--color-danger-bg); color: var(--color-danger); }
.home-note-comments { flex-shrink: 0; }

/* Home – Notiz-Modal: volle Details + Kommentare, ohne die Seite zu wechseln. */
body.modal-open {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}
dialog.note-modal {
  border: 0; padding: 0; background: transparent; overflow: visible;
  width: 100%; max-width: 100vw; max-height: 100vh;
}
dialog.note-modal[open] {
  display: flex; align-items: flex-end; justify-content: center;
  height: 100%;
}
dialog.note-modal::backdrop { background: rgba(16, 59, 59, 0.4); }
.note-modal-inner {
  width: 100%; max-width: 560px; max-height: min(84vh, 720px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-surface);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-card);
}
.note-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.note-modal-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--color-bg-alt); color: var(--color-primary); cursor: pointer;
}
.note-modal-close .icon { width: 16px; height: 16px; }
.note-modal .note-body { margin-top: 16px; font-size: .96rem; }
.note-modal-comments { margin-top: 20px; border-top: 1px solid var(--color-border); padding-top: 16px; }
.note-modal-comments-title { margin: 0 0 4px; font-weight: 700; font-size: .84rem; }
@media (min-width: 640px) {
  dialog.note-modal[open] { align-items: center; }
  .note-modal-inner { border-radius: var(--radius-l); }
}

@media (min-width: 700px) {
  .home-households .mini-hh-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    overflow: visible;
  }
  .home-households .mini-hh-card { width: auto; }
}
@media (min-width: 1024px) {
  .home-overview {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "shopping notes" "pantry notes";
    grid-template-rows: auto 1fr; gap: 24px;
  }
  .home-shopping { grid-area: shopping; }
  .home-notes { grid-area: notes; }
  .home-pantry { grid-area: pantry; }
  .home-households .mini-hh-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-page .greeting-header { margin-bottom: 28px; }
}

/* Notes 2.4: clear author, target household, priority and conversation. */
.note-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.note-identity .member-avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: .85rem; }
.note-identity-text { min-width: 0; }
.note-author { font-size: .9rem; overflow-wrap: anywhere; }
.note-date { display: block; color: var(--color-muted); font-size: .72rem; }
.note-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; }
.note-household { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; padding: 6px 9px; border-radius: 10px; font-size: .78rem; }
.note-household .icon { flex: 0 0 17px; width: 17px; height: 17px; }
.note-household > span { min-width: 0; overflow-wrap: anywhere; }
.note-priority { display: inline-flex; padding: 5px 9px; border-radius: 10px; font-size: .74rem; font-weight: 700; }
.note-priority-normal { background: var(--color-mint); color: var(--color-mint-ink); }
.note-priority-important { background: var(--color-cream); color: var(--color-cream-ink); }
.note-priority-urgent { background: var(--color-danger-bg); color: var(--color-danger); }
.note-pin-label { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); font-size: .72rem; }
.note-pin-label .icon { width: 15px; height: 15px; }
.note-due { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 10px; font-size: .74rem; font-weight: 700; background: var(--color-mint); color: var(--color-mint-ink); }
.note-due .icon { width: 14px; height: 14px; }
.note-due-overdue { background: var(--color-danger-bg); color: var(--color-danger); }
.note-done-label { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 10px; font-size: .74rem; font-weight: 700; background: var(--color-success-bg); color: var(--color-success); }
.note-done-label .icon { width: 14px; height: 14px; }
.note-is-done { opacity: .62; }
.note-is-done .note-body { text-decoration: line-through; text-decoration-color: var(--color-muted); }
.note-discussion-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .78rem; font-weight: 700; }
.notes-page { min-width: 0; }
.notes-sort-hint { margin-bottom: 18px; }
.notes-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.notes-grid > .card { margin: 0; min-width: 0; }
.note-detail { scroll-margin-top: 160px; border-top: 3px solid transparent; }
.note-detail:target { outline: 2px solid var(--color-sage); outline-offset: 3px; }
.note-level-important { border-top-color: var(--color-cream-ink); }
.note-level-urgent { border-top-color: var(--color-danger); }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 16px 0; font-size: .95rem; }
.note-compose > summary { font-weight: 700; min-height: 44px; cursor: pointer; }
.note-compose > summary .icon { vertical-align: middle; }
.note-compose form { margin-top: 16px; }
.note-compose .checkbox-row { margin-bottom: 16px; }
.note-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.note-options, .note-discussion { border-top: 1px solid var(--color-border); }
.note-options > summary, .note-discussion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 2px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 700;
}
.note-options > summary::-webkit-details-marker, .note-discussion > summary::-webkit-details-marker { display: none; }
.note-options > summary::after, .note-discussion > summary::after {
  content: ''; flex-shrink: 0; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 150ms ease;
}
.note-options[open] > summary::after, .note-discussion[open] > summary::after { transform: rotate(45deg); }
.note-options > summary { color: var(--color-muted); }
.note-priority-form { display: grid; gap: 8px; margin: 4px 0 12px; }
.note-priority-form label { font-size: .8rem; font-weight: 700; }
.note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.note-actions form { flex: 1 1 140px; }

/* Immer sichtbare Schnellaktionen: Erledigt-Toggle + Fälligkeit setzen,
   ohne erst ein Details-Element öffnen zu müssen. */
.note-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }
.note-done-form { flex: 0 0 auto; }
.note-done-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .82rem;
  background: var(--color-primary); color: #fff; min-height: 44px;
}
.note-done-toggle .icon { width: 16px; height: 16px; }
.note-done-toggle.is-done { background: var(--color-success-bg); color: var(--color-success); }
.note-due-form { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }
.note-due-form input[type=date] { flex: 1 1 auto; min-width: 0; padding: 10px 12px; min-height: 44px; }
.note-due-save {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-s); border: 0; cursor: pointer;
  background: var(--color-mint); color: var(--color-mint-ink);
}
.note-due-save .icon { width: 17px; height: 17px; }
.note-comments { list-style: none; padding: 0; margin: 0; }
.note-comment { padding: 12px 0; }
.note-comment + .note-comment { border-top: 1px solid var(--color-border); }
.note-comment-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .82rem; overflow-wrap: anywhere; }
.note-comment-heading time { color: var(--color-muted); font-size: .7rem; }
.note-comment p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }
.note-text-button { min-height: 44px; color: var(--color-muted); text-decoration: underline; font-size: .75rem; }
.note-comment-form { padding-top: 12px; border-top: 1px solid var(--color-border); }
.notes-page select, .notes-page textarea { min-width: 0; max-width: 100%; }
@media (min-width: 700px) {
  .note-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.note-household.hh-color-mint { background: var(--hh-mint); color: var(--hh-mint-ink); }
.note-household.hh-color-coral { background: var(--hh-coral); color: var(--hh-coral-ink); }
.note-household.hh-color-lavender { background: var(--hh-lavender); color: var(--hh-lavender-ink); }
.note-household.hh-color-cream { background: var(--hh-cream); color: var(--hh-cream-ink); }
.note-household.hh-color-sky { background: var(--hh-sky); color: var(--hh-sky-ink); }
.note-household.hh-color-olive { background: var(--hh-olive); color: var(--hh-olive-ink); }
.note-household.hh-color-blush { background: var(--hh-blush); color: var(--hh-blush-ink); }
.note-household.hh-color-sand { background: var(--hh-sand); color: var(--hh-sand-ink); }
.note-household.hh-color-periwinkle { background: var(--hh-periwinkle); color: var(--hh-periwinkle-ink); }
.note-household.hh-color-moss { background: var(--hh-moss); color: var(--hh-moss-ink); }

/* Home 2.4.1: Kommentare direkt unter der Notiz aufklappen. */

/* Pantry 2.5: direkte Haushaltsaktionen und durchsuchbare Übersicht. */
.pantry-page [hidden] { display: none !important; }
.pantry-search-field input[type=search] { width: 100%; padding: 12px 14px; min-height: 48px; border: 1.5px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-surface); font: inherit; color: var(--color-ink); }
.pantry-action-hint { margin: 0 0 18px; }
.pantry-page .pantry-hh-row { gap: 6px; }
.pantry-page .pantry-hh-text strong { display: block; overflow-wrap: anywhere; }
.pantry-quantity-label { display: block; color: var(--color-muted); font-size: .8rem; }
.pantry-page .pantry-edit-toggle, .pantry-remove-btn { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.pantry-remove-btn { color: var(--color-muted); }
.pantry-remove-btn .icon { width: 18px; height: 18px; }
.pantry-remove-btn:hover, .pantry-remove-btn:focus-visible { color: var(--color-danger); background: var(--color-danger-bg); }
.pantry-page button:disabled { opacity: .5; cursor: wait; }
.pantry-page .pantry-item-head .item-name { min-width: 0; overflow-wrap: anywhere; }
.pantry-page .pantry-quick-add { width: 44px; height: 44px; flex: 0 0 44px; }
.pantry-page .pantry-edit-form { flex-wrap: wrap; }
.pantry-page .pantry-edit-form input, .pantry-page .pantry-edit-form select { flex: 1 1 100px; min-width: 0; }
.pantry-feedback { position: sticky; top: 150px; z-index: 31; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--radius-s); box-shadow: var(--shadow-card); overflow-wrap: anywhere; }
.pantry-feedback-error { background: var(--color-danger-bg); color: var(--color-danger); }
.pantry-feedback-success { background: var(--color-success-bg); color: var(--color-success); }
@media (min-width: 1024px) { .pantry-page .pantry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 2.8.2: shared text editor and readable two-line navigation label. */
.note-editor { margin: 12px 0; }
.note-editor > form { padding-top: 12px; }
.note-editor textarea { width: 100%; min-width: 0; resize: vertical; }
.bn-item { min-width: 0; }
.bn-label { line-height: 1.15; white-space: normal; text-align: center; }
@media (max-width: 899px) {
  .bn-label { max-width: 76px; }
}

/* 2.8.3: one badge system for notes, Home and dialogs. */
.note-labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.note-labels .note-badge {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  min-height: 27px; padding: 4px 9px; border-radius: 8px;
  font-size: .75rem; font-weight: 600; line-height: 1.35;
  box-sizing: border-box; overflow-wrap: anywhere;
}
.note-labels .note-badge .icon { width: 13px; height: 13px; flex: 0 0 13px; }
.note-status-neutral { background: var(--color-bg); color: var(--color-muted); }
.note-status-overdue { background: var(--color-danger-bg); color: var(--color-danger); }
.note-status-today { background: var(--color-cream); color: var(--color-cream-ink); }
.note-status-done { background: var(--color-success-bg); color: var(--color-success); }
.note-detail.note-is-overdue { border-top: 3px solid var(--color-danger); }
.home-note-row { padding: 12px 2px; }
.home-note-is-overdue { box-shadow: inset 3px 0 var(--color-danger); padding-left: 9px; }
.home-note-top { gap: 6px; }
.home-note-foot { gap: 7px; }
.home-note-foot .note-labels { margin-top: 0; }
.home-note-comments { font-size: .75rem; line-height: 1.35; color: var(--color-muted); }
.note-options .note-date-options {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; margin: 14px 0 18px; width: 100%;
}
.note-date-options label { grid-column: 1 / -1; font-size: .8rem; font-weight: 700; }
.note-date-options input[type=date] { width: 100%; box-sizing: border-box; }
.note-quick-actions { margin: 12px 0; }
@media (max-width: 420px) {
  .note-options .note-date-options { grid-template-columns: minmax(0, 1fr); }
  .note-date-options .btn { justify-self: start; }
}

/* v3 App installation, household notifications and shopping signals */
.push-page{min-width:0;display:grid;gap:var(--settings-gap)}
.push-page .card{margin:0}.push-hero{background:#e5f0ec}.push-hero h2{font-size:1.65rem;line-height:1.2;margin:12px 0}.push-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.1em;color:#4b6762}
.push-page p,.shopping-signal p{line-height:1.55}.push-muted{color:var(--text-muted,#4b6762);font-size:.875rem;margin-top:16px}
.push-actions{display:flex;gap:10px;flex-wrap:wrap}.push-actions .btn{min-height:48px;white-space:normal}
.push-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;font-size:.95rem;cursor:pointer;border-bottom:1px solid rgba(16,59,59,.07)}
.push-toggle:last-of-type{border-bottom:0}.push-toggle input{appearance:auto;width:24px;height:24px;flex:0 0 24px;accent-color:#103b3b;margin:0}
.push-preferences{display:grid;gap:16px}.push-preferences h2,.push-preferences p{margin:0}.push-preferences>.btn{justify-self:start}
.push-device{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.push-device span{overflow-wrap:anywhere}
.shopping-signal summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;flex-wrap:wrap}.shopping-signal summary span{font-size:.8rem;font-weight:400;color:#4b6762}.shopping-signal[open] summary{margin-bottom:16px}.shopping-signal-message{padding-top:12px;border-top:1px solid rgba(16,59,59,.08)}
.pwa-update{position:fixed;z-index:1000;bottom:calc(85px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(90%,480px);padding:16px;background:#e5f0ec;border-radius:18px;box-shadow:0 4px 20px #14322d20;display:flex;gap:12px;align-items:center}
[hidden]{display:none!important}
@media(max-width:480px){.push-actions{flex-direction:column}.push-actions .btn{width:100%}.push-hero h2{font-size:1.4rem}.shopping-signal summary span{width:100%;padding-left:28px}}

/* v3.0.1 — account-wide profile, scoped to keep household screens unchanged */
.profile-page { width: 100%; min-width: 0; }
.profile-identity { display: flex; align-items: center; gap: 16px; margin: 4px 0 28px; }
.profile-initial { display: grid; place-items: center; flex: 0 0 60px; height: 60px; border-radius: 22px; background: var(--color-mint, #e5f0ec); color: var(--color-primary); font-size: 1.65rem; font-weight: 700; }
.profile-identity > div { min-width: 0; }
.profile-identity h2 { font-size: 1.5rem; line-height: 1.25; overflow-wrap: anywhere; margin: 0 0 5px; }
.profile-identity p { color: var(--color-muted); font-size: .9rem; margin: 0; }
.profile-layout { display: grid; gap: var(--settings-gap); }
.profile-layout > section { min-width: 0; }
.profile-page section > h2, .profile-account h2 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.profile-links { background: var(--color-surface); border-radius: 20px; padding: 0 18px; box-shadow: var(--shadow-card); }
.profile-link { display: flex; align-items: center; gap: 12px; padding: 18px 0; color: var(--color-ink); text-decoration: none; }
.profile-link + .profile-link { border-top: 1px solid rgba(16,59,59,.07); }
.profile-link:hover .profile-link-text strong { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.profile-link:focus-visible, .profile-delete summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 10px; }
.profile-link-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0; }
.profile-icon-mint { background: #e5f0ec; }.profile-icon-coral { background: #fae3dd; }.profile-icon-lavender { background: #e9ecf4; }
.profile-link-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.profile-link-text strong { font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; }
.profile-link-text > span { font-size: .82rem; color: var(--color-muted); line-height: 1.45; }
.profile-link > .icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-muted); }
.profile-form-card { margin: 0; padding: 22px; border-radius: 20px; }
.profile-optional { font-weight: 400; color: var(--color-muted); margin-left: 4px; font-size: .8rem; }
.profile-email { margin: 4px 0 22px; }
.profile-email > span { display: block; font-size: .82rem; color: var(--color-muted); margin-bottom: 5px; }
.profile-email strong { display: block; overflow-wrap: anywhere; font-size: .95rem; font-weight: 600; }
.profile-email p { margin: 6px 0 0; font-size: .78rem; color: var(--color-muted); line-height: 1.45; }
.profile-account { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(16,59,59,.1); }
.profile-account-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profile-account-heading h2 { margin: 0; }
.profile-account-heading .btn { width: auto; min-height: 44px; }
.profile-delete { margin-top: 12px; }
.profile-delete summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--color-muted); font-size: .85rem; padding: 12px 0; min-height: 44px; }
.profile-delete summary::-webkit-details-marker { display: none; }
.profile-delete summary .icon { width: 15px; height: 15px; transition: transform .15s; }
.profile-delete[open] summary .icon { transform: rotate(90deg); }
.profile-delete-content { max-width: 560px; padding: 0 0 12px; }
.profile-delete-content p { font-size: .88rem; line-height: 1.6; color: var(--color-muted); margin: 0 0 14px; }
.profile-delete-content .btn { width: auto; white-space: normal; }
.profile-version { margin: 20px 0 0; color: var(--color-muted); font-size: .75rem; text-align: center; }
@media (min-width: 1024px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--settings-gap); align-items: start; }
}

/* v3.0.2 — shared settings surfaces, using the app-wide page grid. */
.settings-page { --settings-padding: 20px; }
.settings-page .card { padding: var(--settings-padding); border-radius: var(--radius-m); margin-bottom: var(--settings-gap); }
.settings-page .profile-links { padding-inline: var(--settings-padding); border-radius: var(--radius-m); }
.settings-page .profile-form-card, .settings-page .push-page .card { margin: 0; }
.settings-page .card > h2, .settings-page .push-preferences > h2 { font-size: 1.15rem; line-height: 1.35; margin-bottom: 10px; }
.settings-page .card > h3 { font-size: 1rem; margin-bottom: 8px; }
.settings-page .card > p { line-height: 1.6; }
.settings-page .card > p:last-child { margin-bottom: 0; }
.settings-page .card > p + form, .settings-page .card > p + .field { margin-top: 18px; }
.settings-page .push-hero h2 { font-size: 1.5rem; margin-top: 12px; }
.settings-page .push-muted { color: var(--color-muted); }
.settings-page .btn-secondary { background: var(--color-mint); color: var(--color-primary); }
.settings-page .btn-secondary:hover { background: var(--color-primary-pale); }
.settings-page .push-actions { margin-bottom: 16px; }
.settings-page .push-actions .btn { width: auto; flex: 1 1 180px; }
.settings-page .push-preferences { gap: 16px; }
.settings-page .push-preferences > h2 { margin-bottom: 0; }
.settings-page .push-preferences > p { color: var(--color-muted); font-size: .9rem; }
.settings-page .push-preferences-grid { display: grid; gap: var(--settings-gap); }
.settings-page .push-toggle span { min-width: 0; overflow-wrap: anywhere; }
.settings-page .push-device { flex-wrap: wrap; }
.settings-page .push-device .btn { width: auto; flex-shrink: 0; }
.settings-page .admin-nav { flex-wrap: wrap; overflow: visible; gap: 8px; margin: 0 0 var(--settings-gap); }
.settings-page .admin-nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.settings-page .admin-nav a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.settings-page .section-heading { margin-top: var(--settings-gap); }
.settings-page input, .settings-page select, .settings-page textarea { min-width: 0; max-width: 100%; }
@media (min-width: 700px) {
  .settings-page { --settings-padding: 24px; }
  .settings-page form > .btn, .settings-page .card > .btn { width: auto; }
}
@media (min-width: 1024px) {
  .settings-page .push-page { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .settings-page .push-preferences, .settings-page .push-devices { grid-column: 1 / -1; }
  .settings-page .push-preferences-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .settings-page .push-actions .btn { width: 100%; flex: auto; }
}

/* v3.0.3 — item-specific conversations stay collapsed until needed. */
#active-item-list { align-items: start; }
#active-item-list .item-row { flex-wrap: wrap; }
.shopping-comments { flex: 0 0 100%; min-width: 0; border-top: 1px solid var(--color-border); padding-top: 8px; }
.shopping-comments summary { cursor: pointer; font-size: .8rem; color: var(--color-muted); min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }
.shopping-comments summary::before { content: '›'; font-size: 1.1rem; }
.shopping-comments[open] summary::before { transform: rotate(90deg); }
.shopping-comments summary::-webkit-details-marker { display: none; }
.shopping-comments[open] summary { color: var(--color-primary); }
.shopping-comments-content { padding-top: 8px; font-size: .85rem; }
.shopping-comment-thread { padding: 0; margin: 0; list-style: none; }
.shopping-comment-thread li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.shopping-comment-thread p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0; }
.shopping-comment-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.shopping-comment-meta time { font-size: .75rem; color: var(--color-muted); }
.shopping-comment-delete { font-size: .75rem; color: var(--color-danger); min-height: 32px; }
.shopping-comment-form { margin-top: 12px; }
.shopping-comment-form label { display: block; font-size: .8rem; font-weight: 700; }
.shopping-comment-form textarea { margin: 6px 0 8px; font-size: .9rem; }
.shopping-comment-status { color: var(--color-danger); margin-top: 8px; }
.shopping-signal .push-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.shopping-signal .push-actions .btn { width: 100%; min-height: 48px; padding: 12px 16px; }
.shopping-signal .btn-secondary { background: var(--color-mint); }

/* v3.0.4: visible last reply and compact masonry with natural card heights. */
.shopping-comment-preview { flex: 0 0 100%; margin: 0; padding: 10px 12px; background: var(--color-mint); border-radius: var(--radius-xs); font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shopping-comment-preview strong { font-weight: 700; }
.remember-choice { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; min-height: 44px; font-size: .9rem; cursor: pointer; }
.remember-choice input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--color-primary); }
@media (min-width: 700px) {
  #active-item-list.shopping-masonry { grid-auto-rows: 1px; row-gap: 0; grid-auto-flow: row dense; }
  #active-item-list.shopping-masonry > .item-row { align-self: start; }
}

/* v3.0.5: text and editor occupy the same place. */
.note-editor .note-read-view { display: flex; align-items: flex-start; gap: 12px; }
.note-editor .note-read-view .note-body { flex: 1; min-width: 0; margin: 0; }
.note-editor .note-read-view > .btn { flex-shrink: 0; }
.note-editor > form { padding-top: 0; }

/* v3.0.6 — full-width shopping cards in the mobile flex column. */
@media (max-width: 699px) {
  #active-item-list.item-list { align-items: stretch; }
  #active-item-list.item-list > .item-row { width: 100%; min-width: 0; align-self: stretch; }
}

/* v3.0.7 — mobile view choice, independent of sorting. */
.shopping-view-toggle { display: none; }
@media (max-width: 699px) {
  .shopping-view-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: var(--radius-btn); background: var(--color-mint); }
  .shopping-view-toggle button { min-height: 44px; padding: 8px 20px; border-radius: 10px; font-size: .85rem; font-weight: 700; }
  .shopping-view-toggle button[aria-pressed="true"] { background: var(--color-primary); color: white; }
  #active-item-list.item-list[data-mobile-view="grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  #active-item-list.shopping-masonry[data-mobile-view="grid"] { grid-auto-rows: 1px; row-gap: 0; grid-auto-flow: row dense; }
  #active-item-list.item-list[data-mobile-view="grid"] > .item-row { align-self: start; display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 8px; padding: 12px; }
  #active-item-list[data-mobile-view="grid"] .shopping-comment-preview,
  #active-item-list[data-mobile-view="grid"] .shopping-comments { grid-column: 1 / -1; }
  #active-item-list[data-mobile-view="grid"] .item-name { overflow-wrap: anywhere; font-size: .9rem; }
  #active-item-list[data-mobile-view="grid"] .item-desc { overflow-wrap: anywhere; }
  #active-item-list[data-mobile-view="grid"] .shopping-comment-preview { padding: 8px; }
  #active-item-list[data-mobile-view="grid"] .item-del { width: 26px; }
}