:root {
  /* Neuentwurf 2026-10-06: die Markenfarben der Startseite statt Apple-Blau.
     Kontraste nachgerechnet (Designrunde 4): Tinte auf Creme 16,5:1,
     Sekundaertext 6,5:1, Weiss auf Marke 5,0:1. */
  --bg: #FFFBF6;
  --sidebar-bg: rgba(253, 243, 231, 0.85);
  --surface: #ffffff;
  --surface-raised: #FDF3E7;
  --text-primary: #241A15;
  --text-secondary: #6B584E;
  --text-small: #6B584E;
  /* 4,8:1 auf Creme - auch inaktive Tab-Beschriftungen muessen lesbar sein. */
  --text-tertiary: #7D6A5F;
  --separator: rgba(60, 35, 20, 0.12);
  --separator-light: rgba(60, 35, 20, 0.06);
  --accent: #C2461F;
  --accent-hover: #9C2F14;
  --accent-bg: rgba(194, 70, 31, 0.08);
  --green: #4E7C3F;
  --green-dark: #3B5F2F;
  --green-bg: rgba(78, 124, 63, 0.1);
  --orange: #D98A1F;
  --orange-bg: rgba(217, 138, 31, 0.1);
  --red: #B3261E;
  --red-bg: rgba(179, 38, 30, 0.08);
  --purple: #7A4B8F;
  --fill: rgba(120, 90, 70, 0.08);
  --fill-hover: rgba(120, 90, 70, 0.13);
  --shadow-sm: 0 1px 2px rgba(60, 35, 20, 0.05), 0 1px 4px rgba(60, 35, 20, 0.05);
  --shadow-md: 0 1px 2px rgba(60, 35, 20, 0.05), 0 8px 24px rgba(60, 35, 20, 0.07);
  --shadow-lg: 0 8px 28px rgba(60, 35, 20, 0.12), 0 2px 4px rgba(60, 35, 20, 0.04);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sidebar-w: 220px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; }

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── App Shell ──────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Sidebar ────────────────────────────────────────── */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--separator);
  overflow-y: auto;
  z-index: 10;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 18px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.sidebar-brand svg {
  color: var(--accent);
  flex-shrink: 0;
}

.household-switcher {
  padding: 0 10px 14px;
}

.household-switcher label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.household-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.household-controls select,
.household-controls button {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  min-height: 34px;
}

.household-controls select {
  padding: 0 8px;
}

.household-controls button {
  padding: 0 10px;
  cursor: pointer;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  text-align: left;
}

.nav-item:hover {
  background: var(--fill);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

.nav-item.active svg {
  color: var(--accent);
}

.nav-item svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color 0.15s var(--ease);
}

.nav-item:hover svg {
  color: var(--text-primary);
}

.nav-logout {
  margin-top: auto;
  color: var(--text-tertiary);
  font-size: 12px;
}

.nav-logout:hover {
  color: var(--red);
}

.nav-logout:hover svg {
  color: var(--red);
}

/* ── Content Area ───────────────────────────────────── */

.content {
  padding: 32px 40px 48px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: viewIn 0.28s var(--ease) forwards;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.view-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.view-label {
  margin: 0 0 4px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* ── Buttons ────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.btn-secondary:hover {
  background: var(--fill);
}

.btn-secondary:active {
  transform: scale(0.97);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text-secondary);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s var(--ease);
  flex-shrink: 0;
}

.btn-close:hover {
  background: var(--fill-hover);
}

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.btn-icon:hover {
  background: var(--fill);
  color: var(--text-primary);
}

.btn-icon.danger:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* ── Forms & Inputs ─────────────────────────────────── */

.field {
  display: grid;
  gap: 4px;
}

.field span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.field input,
.field select {
  width: 100%;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  background: var(--surface);
  color: var(--text-primary);
  /* 16px: darunter zoomt Safari auf dem iPhone beim Antippen hinein. */
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 70, 31, 0.18);
}

.field input::placeholder {
  color: var(--text-tertiary);
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.suggestion-chip {
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}

.suggestion-chip:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

.field-compact {
  display: grid;
  gap: 4px;
}

.field-compact span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.field-compact input {
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  background: var(--surface);
  color: var(--text-primary);
  /* 16px: darunter zoomt Safari auf dem iPhone beim Antippen hinein. */
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field-compact input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 70, 31, 0.18);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.span-2 {
  grid-column: span 2;
}

/* ── Dialog / Sheet ─────────────────────────────────── */

.sheet {
  width: min(520px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 0;
  flex-direction: column;
}

.sheet:not([open]) {
  display: none;
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

.sheet[open] {
  display: flex;
  animation: sheetIn 0.3s var(--ease) forwards;
}

.sheet[open]::backdrop {
  animation: backdropIn 0.25s var(--ease) forwards;
}

@keyframes sheetIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.sheet-header h2 {
  font-size: 17px;
  font-weight: 600;
}

.sheet-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--separator-light);
}

/* ── Plan View ──────────────────────────────────────── */

.plan-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.meal-detail {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.meal-detail summary {
  padding: 8px 0;
  font-weight: 500;
  user-select: none;
  list-style: none;
}

.meal-detail summary::-webkit-details-marker {
  display: none;
}

.meal-detail summary::before {
  content: '\25B8 ';
  color: var(--text-tertiary);
}

.meal-detail[open] summary::before {
  content: '\25BE ';
}

.meal-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.meal-counts label {
  display: grid;
  gap: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.plan-modes {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.plan-modes label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 2px 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.plan-modes input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}

/* Der Hinweistext ueber den Checkboxen hatte gar keine Regel und erbte den
   Browser-Default-Margin - im Grid kollabieren Margins nicht, die Luecke war
   dadurch etwa dreimal so gross wie zwischen den Optionen. */
.plan-modes .field-hint,
.field-hint {
  margin: 0;
  color: var(--text-small);
  font-size: 13px;
  line-height: 1.4;
}


.meal-counts select {
  width: 52px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  background: var(--surface);
  font-size: 13px;
  outline: none;
}

.meal-counts select:focus {
  border-color: var(--accent);
}

.plan-history {
  margin-bottom: 20px;
}

.plan-history:empty {
  display: none;
}

.plan-history-list {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.plan-history-label {
  align-self: center;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-history-item {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 34px;
  gap: 6px;
  align-items: stretch;
}

.plan-history-button {
  min-width: 150px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  padding: 9px 11px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.plan-delete-button {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--red);
  font-size: 20px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.plan-delete-button:hover {
  background: var(--red-bg);
}

.plan-history-button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 70, 31, 0.15);
}

.plan-history-button strong,
.plan-history-button span {
  display: block;
}

.plan-history-button strong {
  font-size: 13px;
  font-weight: 700;
}

.plan-history-button span {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.day-card {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.day-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.day-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.2px;
}

.meal-block {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--separator-light);
}

.meal-block:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.meal-label {
  margin: 0 0 4px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dish {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.reason {
  margin: 0 0 6px;
  color: var(--text-secondary);
  /* 12px war zu klein zum Lesen, auf Mobil sogar 11px. */
  font-size: 14px;
  line-height: 1.5;
}

/* Lange Begruendungen werden gekuerzt und lassen sich aufklappen.
   Ungekuerzt liest sie ohnehin niemand. */
.reason.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reason-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.reason-toggle:hover { text-decoration: underline; }

.family-fit {
  margin: 0 0 4px;
  color: var(--green-dark);
  font-size: 12px;
  line-height: 1.45;
}

.meal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.choice-button {
  min-height: 28px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.choice-button.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

.ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.ingredient {
  border-radius: 100px;
  background: var(--orange-bg);
  color: var(--orange);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.recipe-button,
.cooked-button {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
  min-height: 34px;
  padding-inline: 8px;
}

.cooked-button.confirmed {
  background: var(--green-bg);
  color: var(--green-dark);
}

.recipe-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--fill);
  padding: 12px;
}

.recipe-head {
  display: grid;
  gap: 2px;
}

.recipe-head strong {
  font-size: 13px;
}

.recipe-head span {
  color: var(--text-secondary);
  font-size: 12px;
}

.recipe-section p {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.recipe-section ul,
.recipe-section ol {
  margin: 0;
  padding-left: 18px;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
}

/* ── People View ────────────────────────────────────── */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.person-card {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease);
}

.person-card:hover {
  box-shadow: var(--shadow-md);
}

.person-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.person-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.person-card-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}

.person-card:hover .person-card-actions {
  opacity: 1;
}

.person-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--fill);
  color: var(--text-secondary);
}

.meta-badge.likes {
  background: var(--green-bg);
  color: var(--green-dark);
}

.meta-badge.dislikes {
  background: var(--red-bg);
  color: var(--red);
}

.meta-badge.hard-rule {
  border: 1px solid rgba(255, 59, 48, 0.25);
  background: var(--red-bg);
  color: var(--red);
}

.meta-badge.cuisine {
  background: var(--accent-bg);
  color: var(--accent);
}

.person-card-notes {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

/* ── History View ───────────────────────────────────── */

.history-list {
  display: grid;
  gap: 0;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--separator-light);
  transition: background 0.1s var(--ease);
}

.history-item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.history-item:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.history-item:only-child {
  border-radius: var(--radius-md);
}

.history-item:hover {
  background: var(--fill);
}

.history-item strong {
  font-size: 14px;
  font-weight: 600;
}

.history-item span {
  color: var(--text-secondary);
  font-size: 13px;
  flex-shrink: 0;
  margin-left: auto;
}

.history-item small {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.35;
}

.history-wrap {
  background: var(--surface);
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Shopping View ──────────────────────────────────── */

.shopping-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content)) 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}

.shopping-summary:empty {
  display: none;
}

.shopping-summary div {
  display: grid;
  gap: 2px;
}

.shopping-summary strong {
  font-size: 17px;
  font-weight: 700;
}

.shopping-summary span,
.shopping-summary p {
  color: var(--text-secondary);
  font-size: 12px;
}

.shopping-summary p {
  justify-self: end;
  margin: 0;
  text-align: right;
}

.shopping-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.shopping-group {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.shopping-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--separator-light);
  padding: 12px 14px;
}

.shopping-group-head h3 {
  margin: 0;
  font-size: 14px;
}

.shopping-group-head span {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.shopping-group-items {
  display: grid;
}

.shopping-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--separator-light);
  font-size: 14px;
}

.shopping-item:last-child {
  border-bottom: 0;
}

.shopping-item strong {
  font-weight: 600;
}

.shopping-item span {
  color: var(--text-secondary);
  font-size: 13px;
  text-align: right;
}

/* ── Offers View ────────────────────────────────────── */

.recipes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.recipe-library-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.recipe-library-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.recipe-library-head h3 {
  margin: 0 0 3px;
  font-size: 15px;
}

.recipe-library-head p,
.recipe-library-head span {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.recipe-preview-steps {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recipe-tags span {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--text-secondary);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Preisrichtwert. Bewusst zurueckhaltender als die Naehrwerte: Die Zahl
   ist eine Schaetzung aus offenen Daten und soll nicht wie ein Kassenbon
   aussehen. */
.richtwert-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.richtwert-strip span {
  display: grid;
  gap: 1px;
  min-width: 92px;
  border: 1px dashed var(--separator-light);
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 7px 9px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.richtwert-strip strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.richtwert-strip small {
  align-self: center;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.nutrition-strip {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}

.nutrition-strip span {
  display: grid;
  gap: 1px;
  min-width: 82px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-sm);
  background: var(--fill);
  padding: 7px 9px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.nutrition-strip strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.nutrition-strip small {
  align-self: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

.recipe-feedback {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--separator-light);
  padding-top: 10px;
}

.recipe-rating-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rating-button {
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.rating-button.active {
  background: var(--fill);
  color: var(--text-primary);
}

.rating-button.active.good {
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green-dark);
}

.rating-button.active.bad {
  border-color: var(--red);
  background: var(--red-bg);
  color: var(--red);
}

.recipe-notes {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text-primary);
  resize: vertical;
}

.recipe-notes-save {
  justify-self: start;
}

.recipe-editor {
  border-top: 1px solid var(--separator-light);
  padding-top: 10px;
}

.recipe-editor summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.recipe-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.recipe-edit-grid label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.recipe-edit-grid input,
.recipe-edit-grid textarea {
  width: 100%;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
}

.recipe-edit-grid textarea {
  resize: vertical;
}

.recipe-edit-grid .recipe-save {
  justify-self: start;
}

/* ── Offers View ────────────────────────────────────── */

.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.offer-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 80px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease);
}

.offer-item:hover {
  box-shadow: var(--shadow-md);
}

.offer-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.offer-info strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-info span {
  color: var(--text-secondary);
  font-size: 12px;
}

.offer-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
  align-self: flex-start;
}

.scraper-runs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.run-status {
  margin: 0;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--fill);
  color: var(--text-secondary);
}

.run-success {
  background: var(--green-bg);
  color: var(--green-dark);
}

.run-failed {
  background: var(--red-bg);
  color: var(--red);
}

/* ── Admin / Costs View ─────────────────────────────── */

.llm-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-settings:empty {
  display: none;
}

.llm-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.settings-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.settings-card-wide {
  grid-column: span 2;
}

/* ── Meine Daten: Auskunft und Loeschung ─────────────── */

#account-data {
  gap: 10px;
  margin-top: 16px;
}

#account-data .field-hint {
  max-width: 62ch;
}

/* Loeschen ist endgueltig. Der Knopf soll nicht aussehen wie "Speichern". */
.btn-danger {
  justify-self: start;
  min-height: 44px;
  border: 1px solid var(--red);
  border-radius: var(--radius-md);
  background: var(--red-bg);
  padding: 8px 16px;
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.btn-danger:hover { background: color-mix(in srgb, var(--red) 16%, transparent); }
.btn-danger:disabled { opacity: 0.5; cursor: default; }

.danger-zone {
  margin-top: 4px;
  border-top: 1px solid var(--separator-light);
  padding-top: 12px;
}

.danger-zone summary { color: var(--red); font-weight: 600; }

.danger-zone form {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  max-width: 380px;
}

.settings-members {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.source-row strong,
.source-row span {
  overflow-wrap: anywhere;
}

.member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
}

.member-row span {
  overflow-wrap: anywhere;
}

.member-row select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  min-height: 32px;
  padding: 0 8px;
}

.btn-secondary.danger {
  color: var(--red);
  border-color: var(--red-bg);
}

.household-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.settings-action {
  margin-top: 8px;
  justify-self: start;
}

.account-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.account-form input {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font: inherit;
}

.account-form[data-action="password"] input {
  grid-column: 1 / -1;
}

.byok-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.byok-form label {
  grid-column: 1 / -1;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.byok-form input {
  grid-column: 1 / -1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font: inherit;
}

.byok-form button {
  grid-row: auto;
}

.settings-card span,
.settings-card small {
  color: var(--text-secondary);
  font-size: 12px;
}

.settings-card strong {
  color: var(--text-primary);
  font-size: 18px;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}

.settings-card small {
  overflow-wrap: anywhere;
}

.settings-card.budget-ok strong {
  color: var(--green-dark);
}

.settings-card.budget-warning strong {
  color: var(--orange);
}

.settings-card.budget-danger strong {
  color: var(--red);
}

.settings-card.status-ok strong {
  color: var(--green-dark);
}

.settings-card.status-warning strong {
  color: var(--orange);
}

.settings-card.status-danger strong {
  color: var(--red);
}

.llm-card span,
.llm-card small {
  color: var(--text-secondary);
  font-size: 12px;
}

.llm-card strong {
  color: var(--accent);
  font-size: 20px;
  letter-spacing: -0.4px;
}

.llm-list {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.llm-task-summary {
  margin: 0;
  border-bottom: 1px solid var(--separator-light);
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.llm-run {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--separator-light);
  padding: 12px 16px;
}

.llm-run:last-child {
  border-bottom: 0;
}

.llm-run-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.llm-run-main strong {
  font-size: 13px;
  text-transform: capitalize;
}

.llm-run-main span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-run-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 150px;
}

.llm-run-meta span {
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-secondary);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.llm-run.run-failed .llm-run-main strong {
  color: var(--red);
}

/* ── Empty State ────────────────────────────────────── */

.empty {
  color: var(--text-tertiary);
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
}

/* ── Mobile Tab Bar ─────────────────────────────────── */

.tab-bar {
  display: none;
}

/* ── Login Page ─────────────────────────────────────── */

.login-shell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-panel {
  width: min(380px, 100%);
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
  text-align: center;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-bg);
  color: var(--accent);
  margin-bottom: 16px;
}

.login-panel h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.login-panel .subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 24px;
}

.login-form {
  display: grid;
  gap: 12px;
  text-align: left;
}

.login-form + .login-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--separator-light);
}

.login-form .field input {
  padding: 10px 12px;
}

.login-form .btn-primary,
.login-form .btn-secondary {
  width: 100%;
  justify-content: center;
  padding: 10px;
  margin-top: 4px;
}

.form-error {
  min-height: 18px;
  margin: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.hidden {
  display: none !important;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 768px) {
  /* Safari zoomt bei Fokus auf Felder unter 16px hinein und nicht zurueck.
     Deshalb hier ausdruecklich 16px, auch wenn es groesser wirkt als noetig. */
  .field input,
  .field select,
  .field textarea,
  .field-compact input,
  .meal-counts select {
    font-size: 16px;
  }

  /* Tippziele auf Fingergroesse. Im ganzen Stylesheet gab es bisher keine
     einzige min-height dieser Art. */
  .btn-primary,
  .btn-secondary,
  .meal-detail summary {
    min-height: 44px;
  }

  .btn-primary,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .app {
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .sidebar {
    display: none;
  }

  .tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--separator);
    padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);
    z-index: 100;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tab-bar::-webkit-scrollbar {
    display: none;
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-tertiary);
    padding: 4px 8px;
    min-width: 68px;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s var(--ease);
  }

  .tab.active {
    color: var(--accent);
  }

  .tab:hover {
    color: var(--text-primary);
  }

  .content {
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 32px;
  }

  h1 {
    font-size: 24px;
  }

  .view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .plan-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .people-grid {
    grid-template-columns: 1fr;
  }

  .person-card-actions {
    opacity: 1;
  }

  .offers-grid {
    grid-template-columns: 1fr;
  }

  .recipes-list {
    grid-template-columns: 1fr;
  }

  .llm-run {
    display: grid;
  }

  .llm-run-meta {
    justify-content: flex-start;
    min-width: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: span 1;
  }

  .sheet {
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: var(--radius-lg);
  }

  .sheet-body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .shopping-list {
    grid-template-columns: 1fr;
  }

  .shopping-summary {
    grid-template-columns: 1fr;
  }

  .shopping-summary p {
    justify-self: start;
    text-align: left;
  }

  .source-row,
  .member-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .content {
    padding: 28px 28px 40px;
  }

  .plan-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (min-width: 1101px) {
  .content {
    padding: 36px 48px 56px;
  }

  .view-header {
    margin-bottom: 20px;
  }

  .plan-bar {
    align-items: center;
  }

  .plan-history-list {
    display: grid;
    grid-template-columns: max-content repeat(auto-fit, minmax(150px, 1fr));
  }

  .plan-history-button {
    min-width: 0;
  }

  .people-grid,
  .recipes-list,
  .offers-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .shopping-list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .admin-settings,
  .llm-summary {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (min-width: 1320px) {
  :root {
    --sidebar-w: 236px;
  }

  .content {
    max-width: 1500px;
    padding: 40px 56px 64px;
  }

  .plan-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (min-width: 1500px) {
  .day-card {
    padding: 14px;
  }

  .plan-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
  }

  .day-card h3 {
    font-size: 14px;
  }

  .dish {
    font-size: 13px;
  }

  .reason,
  .family-fit {
    /* Mobil ist die Hauptnutzung - hier darf die Schrift nicht kleiner
       werden als am Desktop. 11px war unlesbar. */
    font-size: 14px;
  }

  .choice-button {
    padding-inline: 8px;
  }
}

@media (min-width: 1680px) {
  .content {
    max-width: 1680px;
    padding-inline: 64px;
  }

  .plan-grid {
    gap: 12px;
  }

  .day-card {
    padding: 16px;
  }
}

/* ── Preise / Grocery Price Engine ───────────────────── */

.country-switcher {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--fill);
  overflow-x: auto;
  scrollbar-width: none;
}

.country-switcher::-webkit-scrollbar { display: none; }

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 0 auto;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.country-chip:hover:not(.active):not(:disabled) {
  color: var(--text-primary);
  background: var(--fill-hover);
}

.country-chip.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.country-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.country-chip .flag { font-size: 15px; line-height: 1; }

.country-chip .count {
  border-radius: 9px;
  background: var(--fill);
  padding: 1px 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.country-chip.active .count {
  background: var(--accent-bg);
  color: var(--accent);
}

.country-hint {
  margin: 8px 2px 20px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.grocery-search {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.grocery-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
}

.grocery-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.grocery-section { margin-top: 32px; }

.section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.product-card {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.product-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.product-head img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--fill);
  object-fit: contain;
  flex: 0 0 auto;
}

.product-head h3 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
}

.product-meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.badge {
  border-radius: 5px;
  background: var(--fill);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.badge.gtin { font-variant-numeric: tabular-nums; }
.badge.nutri-a, .badge.nutri-b { background: var(--green-bg); color: var(--green-dark); }
.badge.nutri-c { background: var(--orange-bg); color: #a35c00; }
.badge.nutri-d, .badge.nutri-e { background: var(--red-bg); color: var(--red); }

.price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--separator-light);
  padding: 10px 0 9px;
}

.price-row:last-child { padding-bottom: 0; }

.price-row .flag { font-size: 16px; flex: 0 0 auto; }

.price-retailer { flex: 1; min-width: 0; }

.price-retailer strong {
  display: block;
  font-size: 13.5px;
  font-weight: 550;
}

/* Nur den Untertitel als Block setzen - Labels innerhalb von <strong>
   muessen inline bleiben, sonst werden sie zu ganzen Balken. */
.price-retailer > span {
  display: block;
  color: var(--text-tertiary);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-amount {
  text-align: right;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.price-amount strong { font-size: 15px; font-weight: 600; }

.price-amount .eur,
.price-amount .base {
  display: block;
  color: var(--text-tertiary);
  font-size: 11px;
}

.price-amount .was {
  color: var(--text-tertiary);
  font-size: 11.5px;
  text-decoration: line-through;
  margin-right: 5px;
}

.price-row.cheapest .price-amount strong { color: var(--green-dark); }

.tag {
  display: inline-block !important;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tag-promotion { background: var(--red-bg); color: var(--red); }
.tag-loyalty { background: rgba(175, 82, 222, 0.1); color: var(--purple); }
.tag-clearance { background: var(--orange-bg); color: #a35c00; }
.tag-unknown { background: var(--fill); color: var(--text-tertiary); }
.tag-best { background: var(--green-bg); color: var(--green-dark); }

.grocery-promotions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.promo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.promo-info { min-width: 0; }

.promo-info strong {
  display: block;
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-info span {
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.promo-price {
  text-align: right;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.promo-price strong { display: block; font-size: 14px; color: var(--red); }
.promo-price .was { font-size: 11px; text-decoration: line-through; color: var(--text-tertiary); }

.grocery-connectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.connector-item {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.connector-item strong { display: block; font-size: 13px; }

.connector-item span {
  display: block;
  color: var(--text-tertiary);
  font-size: 11.5px;
  margin-top: 2px;
}

.connector-item .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--text-tertiary);
}

.connector-item .dot.ok { background: var(--green); }
.connector-item .dot.stale { background: var(--orange); }

.grocery-loading {
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 20px 0;
}

@media (max-width: 640px) {
  .grocery-search { flex-direction: column; }
  .country-chip { padding: 8px 11px; font-size: 12.5px; }
}

/* ── Navigation: Gruppen und Mobile-Overflow ─────────── */

.nav-group {
  margin: 16px 0 4px;
  padding: 0 12px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
}

.nav-list > .nav-group:first-child { margin-top: 0; }

.more-sheet {
  position: fixed;
  inset: 0;
  /* Muss ueber der Tab-Leiste liegen (z-index 100), sonst verdeckt sie die
     untere Reihe des Menues und es wirkt abgeschnitten. */
  z-index: 120;
  display: grid;
  align-items: end;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
  /* Bei vielen Eintraegen oder kleinen Geraeten scrollbar bleiben. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.more-sheet[hidden] { display: none; }

.more-sheet-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface);
  /* Unten Platz fuer die Tab-Leiste lassen, damit der letzte Eintrag
     vollstaendig sichtbar und antippbar bleibt. */
  padding: 16px 16px calc(76px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg);
  animation: more-sheet-in 0.22s var(--spring);
  max-height: 85dvh;
  overflow-y: auto;
}

@keyframes more-sheet-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  padding: 16px 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.more-item:active { background: var(--fill); }
.more-item svg { color: var(--text-secondary); }

/* Abmelden ist keine weitere Ansicht, sondern der Weg hinaus - deshalb
   ueber die ganze Breite und abgesetzt, nicht als vierte Kachel neben
   "Admin". */
.more-item-abmelden {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--text-secondary);
  padding: 14px 8px;
  /* Nur oben eine Linie: Das trennt vom Kachelblock, ohne dass der
     Knopf selbst wie eine Kachel aussieht. */
  border: 0;
  border-top: 1px solid var(--separator-light);
  border-radius: 0;
  margin-top: 8px;
}

/* ── Live-Preise in der Einkaufsliste ───────────────── */


/* ── Marker fuer Meal-Prep und Reste ─────────────────── */

.meal-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: middle;
}

.meal-badge.is-prep {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.meal-badge.is-leftover {
  background: color-mix(in srgb, #d97706 16%, transparent);
  color: #b45309;
}


/* Meal-Prep-Ziel im Planungsformular */
.prep-target {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--separator-light);
}

.meal-badge.is-warning {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #b91c1c;
}

/* ── Rechtstexte ─────────────────────────────────────── */

.legal-page {
  background: var(--bg);
  color: var(--text-primary);
}

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 24px 20px 64px;
  line-height: 1.6;
}

.legal h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.02em; }
.legal h2 { margin: 32px 0 8px; font-size: 17px; }
.legal p, .legal li { font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }

.legal-meta { color: var(--text-small); font-size: 13px; }
.legal-back { margin-bottom: 20px; font-size: 14px; }
.legal-address { line-height: 1.7; }

/* Hebt hervor, was jemand wirklich lesen sollte - Allergiehinweis,
   Gesundheitsdaten, wie man seine Rechte ausuebt. */
.legal-warning {
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--orange-bg);
  padding: 12px 14px;
}

.legal-form {
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 16px;
  font-size: 14px;
}

.legal-form p { margin: 0 0 10px; }

/* Tabellen muessen auf dem Handy scrollen duerfen, nicht die Seite. */
.legal-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}

.legal-table th,
.legal-table td {
  border-bottom: 1px solid var(--separator-light);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  min-width: 8rem;
}

.legal-table th { font-weight: 600; }

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  border-top: 1px solid var(--separator);
  padding-top: 16px;
  font-size: 14px;
}

/* ── Startseite ──────────────────────────────────────────
   Die einzige Seite, die jemand sieht, bevor er ein Konto hat. Sie
   benutzt dieselben Farbtoken wie die App, damit der Uebergang nach der
   Registrierung nicht wie ein Bruch wirkt. */

.landing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
}

.landing-login { text-decoration: none; }

.landing {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.landing section { margin-bottom: 64px; }

.landing h1 {
  margin: 0 0 20px;
  color: var(--text-primary);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.landing h2 {
  margin: 0 0 16px;
  color: var(--text-primary);
  font-size: clamp(21px, 3.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.landing h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.landing-lead {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
}

.landing-lead strong { color: var(--text-primary); }

.landing-hero { padding-top: 24px; }

.landing-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 13px 26px;
  font-size: 16px;
  text-decoration: none;
}

.landing-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.landing-raster article {
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  padding: 18px;
}

.landing-raster p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

/* Die Gegenueberstellung filtern/anpassen. Sie traegt den eigentlichen
   Unterschied - deshalb bekommt sie mehr Gewicht als die uebrigen Karten. */
.landing-vergleich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.landing-karte {
  border: 1px solid var(--separator);
  border-radius: var(--radius-md, 12px);
  padding: 20px;
}

.landing-karte p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.landing-karte ul { margin: 0 0 10px; padding-left: 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

.landing-karte-quelle {
  color: var(--text-tertiary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.landing-karte-alt { background: var(--surface-raised); color: var(--text-secondary); }
.landing-karte-alt .landing-streich { color: var(--text-tertiary); text-decoration: line-through; }

.landing-karte-neu { border-color: var(--accent); background: var(--accent-bg); }

.landing-fazit { color: var(--text-primary); font-weight: 600; }

.landing-tarif { display: flex; flex-direction: column; }
.landing-tarif ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.65; }
.landing-tarif-empfohlen { border-color: var(--accent); }

.landing-betrag {
  margin: 4px 0 0;
  color: var(--text-primary) !important;
  font-size: 30px !important;
  font-weight: 700;
}

.landing-betrag span { color: var(--text-secondary); font-size: 15px; font-weight: 500; }

.landing-kleingedruckt {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--text-small);
  font-size: 13px;
  line-height: 1.6;
}

.landing-form { max-width: 420px; margin-top: 20px; }

/* Kaestchen und Text nebeneinander, nicht untereinander wie die uebrigen
   Felder - sonst steht das Haekchen verloren ueber drei Zeilen Text. */
.landing-zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
}

.landing-zustimmung input { width: 18px; height: 18px; margin-top: 2px; }
.landing-zustimmung span { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }

.landing-stand p {
  max-width: 62ch;
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.landing-fuss {
  border-top: 1px solid var(--separator-light);
  padding: 24px;
  text-align: center;
}

.landing-fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 12px; }
.landing-fuss a { color: var(--text-secondary); font-size: 14px; text-decoration: none; }
.landing-fuss a:hover { color: var(--accent); }
.landing-fuss p { max-width: 62ch; margin: 0 auto; color: var(--text-tertiary); font-size: 12px; line-height: 1.6; }
.landing-fuss strong { color: var(--text-small); font-weight: 600; }

/* Knopfgruppe der Abo-Karte. Frueher ein <p>; seit dort auch ein
   Hinweisabsatz steht, muss es ein Blockelement sein. */
.billing-aktionen { margin-top: 12px; }
.billing-aktionen .field-hint { margin-top: 8px; }

/* ── Was essen wir heute? ─────────────────────────────────
   Der Einstieg. Steht ueber dem Wochenplan und darf mehr Platz nehmen als
   alles andere auf der Seite - es ist die Frage, die taeglich kommt. */

.heute {
  margin-bottom: 32px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  padding: 20px;
}

.heute-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.heute-kopf h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.heute-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.heute-liste[hidden] { display: none; }

.heute-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--separator-light);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-raised);
  padding: 16px;
}

/* Der erste Vorschlag ist die Empfehlung, nicht einer von dreien. */
.heute-karte.ist-erster {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.heute-karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.heute-karte h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.heute-zeit {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.heute-grund {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* Die Zeile je Person ist der Kern: Sie zeigt auf einen Blick, dass ein
   Grundgericht fuer alle reicht. */
.heute-teller {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.heute-teller li {
  display: flex;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.heute-teller strong {
  min-width: 72px;
  color: var(--text-primary);
  font-weight: 600;
}

.heute-teller .angepasst { color: var(--orange, #ff9500); }

.heute-hinweis {
  margin: 0;
  color: var(--text-small);
  font-size: 12px;
  line-height: 1.45;
}

.heute-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.heute-wunsch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.heute-wunsch .field-compact { flex: 1 1 260px; }
.heute-wunsch input { width: 100%; }

/* Was Tischuna vom Wunsch verstanden hat. Ohne diese Zeile raet der Nutzer,
   warum er bekommt, was er bekommt. */
.heute-verstanden {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.heute-verstanden[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Das Rezept erscheint in der Karte, nicht auf einer anderen Seite: Wer
   sich gerade entschieden hat, soll nicht erst navigieren muessen. */
.heute-rezept {
  border-top: 1px solid var(--separator-light);
  margin-top: 6px;
  padding-top: 12px;
}

.heute-rezept h3 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

.heute-zutaten,
.heute-schritte,
.heute-tipps {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.heute-zutaten { list-style: disc; }
.heute-schritte { list-style: decimal; }

/* Die Hinweise aus der Anpassung - was weggelassen wurde und warum. Sie
   sind der Grund, warum das Gericht fuer diesen Haushalt funktioniert. */
.heute-tipps {
  list-style: none;
  padding-left: 0;
  color: var(--text-small);
  font-size: 12px;
}

.heute-tipps li { margin-top: 6px; }

/* Der Wochenplan-Titel ist jetzt ein h2, soll aber aussehen wie zuvor. */
.view-titel {
  margin: 0;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Waehrend nachgeladen wird, bleiben die alten Vorschlaege gedimmt stehen -
   bei einem Fehler steht sonst gar nichts mehr da. */
.heute-liste.laedt { opacity: 0.45; pointer-events: none; }

.heute-fehler {
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 14px;
}

.heute-fehler p { margin: 0 0 10px; color: var(--text-primary); font-size: 14px; }

/* Ohne eingetragene Familie bleibt das Kernversprechen unsichtbar. */
.heute-einladung {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  padding: 12px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* Fingerfreundlich: Diese Ansicht wird abends am Handy bedient, oft
   einhaendig. 33 px sind dafuer zu knapp. */
.heute .btn-primary,
.heute .btn-secondary,
.heute-aktionen button {
  min-height: 44px;
}

/* ── Startseite: die neue Erzählung ────────────────────── */

/* Das Problem in vier Zeilen. Bewusst als Liste und nicht als Fliesstext:
   Wer die Seite ueberfliegt, soll sich in einer der Zeilen wiedererkennen. */
.landing-stimmen {
  display: grid;
  gap: 6px;
  max-width: 52ch;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.landing-stimmen li {
  border-left: 3px solid var(--separator);
  padding: 4px 0 4px 14px;
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.5;
}

/* Der Burrito-Abend. Das Herzstueck der Seite - hier wird der Unterschied
   sichtbar statt behauptet. Auf dem Handy untereinander, nicht als
   Tabelle, die man seitlich schieben muss. */
.landing-teller {
  margin: 24px 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 12px);
  background: var(--accent-bg);
  padding: 20px;
}

.landing-teller figcaption {
  margin-bottom: 14px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
}

.landing-teller-liste {
  display: grid;
  gap: 8px;
}

.landing-teller-liste > div {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--separator-light);
  padding-bottom: 8px;
}

.landing-teller-liste > div:last-child { border-bottom: 0; padding-bottom: 0; }
.landing-teller-liste strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.landing-teller-liste span { color: var(--text-secondary); font-size: 14px; }

.landing-teller-fazit {
  margin: 16px 0 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

/* Der Beispielsatz. Er soll wie etwas aussehen, das jemand tippt - nicht
   wie eine Funktionsbeschreibung. */
.landing-beispielsatz {
  max-width: 56ch;
  margin: 0 0 16px;
  border-left: 3px solid var(--accent);
  padding: 10px 0 10px 16px;
  color: var(--text-primary);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}

.landing-tarif ul li { margin-bottom: 4px; }

/* Fingerfreundlich - die Seite wird ueberwiegend am Handy gelesen. */
.landing .btn-primary,
.landing-top .btn-secondary { min-height: 44px; }

/* Die Frage nach dem Ablehnungsgrund. Unauffaellig und unverbindlich -
   die Ablehnung ist schon gespeichert, wenn sie erscheint. */
.heute-grund {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 13px;
}

.heute-grund[hidden] { display: none; }

.heute-grund-knopf {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
}

/* Einwilligung im Personendialog.
   Kein Kaestchen mittig neben einem dreizeiligen Text: Der Haken gehoert
   auf die Hoehe der ersten Zeile, sonst sucht das Auge ihn. */
.person-einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  margin: 0.25rem 0 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--fill);
  /* 0.85rem waere 13,6px - unter 14px erreicht --text-secondary WCAG AA
     nicht. Entweder groesser oder dunkler; hier beides nicht knapp. */
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-small);
}

.person-einwilligung input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  /* Auf Hoehe der ersten Textzeile statt am Kastenrand. */
  margin-top: 0.1rem;
  flex: none;
}

.person-einwilligung span { min-width: 0; }
.person-einwilligung a { color: var(--accent); }

.person-einwilligung-hinweis {
  display: block;
  margin-top: 0.4rem;
  font-style: normal;
  color: var(--text-primary);
}

/* Portionsanteil je Person auf der Vorschlagskarte. */
.heute-portion {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-small);
  white-space: nowrap;
}

/*
 * Hinweise zum Bedarf.
 *
 * Bewusst zurueckhaltend und nicht als Warnung gestaltet. Wer einem Kind
 * ein Abnehm-Ziel eingetragen hat, soll den Satz lesen und nachdenken -
 * nicht angeschrien werden und ihn deshalb wegklicken.
 */
.heute-bedarf-hinweis {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--orange-bg);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
}


/* ── "Trifft im Katalog nichts" ─────────────────────── */

/* Beilaeufig bei Abneigungen: Da kostet ein Fehltreffer nur Punkte. */
.treffer-hinweis {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

/* Deutlich bei Unvertraeglichkeiten: Da schliesst der Begriff Gerichte
   aus, und was nicht trifft, schliesst nichts aus. */
.treffer-hinweis-laut {
  /* Dieselbe Warnfarbe wie sonst im Stylesheet. */
  color: #b45309;
  font-weight: 500;
}


/* ── Auswahl statt Tippen ───────────────────────────── */

.auswahl-gruppen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.auswahl-titel {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Gewaehlt ist gefuellt, nicht nur umrandet: Bei 20 Chips nebeneinander
   ist ein Rahmenwechsel auf dem Telefon nicht zu sehen. */
.suggestion-chip.is-gewaehlt {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.suggestion-chip.is-gewaehlt:hover {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 768px) {
  /* Fingergroesse. Die Chips sind sonst 11px hoch plus Innenabstand. */
  .suggestion-chip {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
  }
}


/* ── Anmeldung: Nebenwege ───────────────────────────── */

.feld-hinweis {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.login-nebenweg {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
}

/* Ein Knopf, der wie ein Link aussieht: Er loest keine Navigation aus,
   sondern blendet ein Formular ein - ein <a href="#"> waere dafuer
   gelogen und faenge sich einen Sprung an den Seitenanfang ein. */
.linkknopf {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.linkknopf:hover { color: var(--text-primary); }

/* Dieselbe Stelle, andere Aussage: Die Meldung nach einer erfolgreichen
   Anforderung ist kein Fehler und darf nicht rot sein. */
.meldung-gut { color: #15803d; }

/* Ein Konto ohne E-Mail-Adresse ist bei einem vergessenen Passwort
   verloren. Das darf nicht erst im Ernstfall auffallen. */
.konto-warnung {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #b45309;
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, #d97706 10%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Wer eine Zutat nicht mitisst.
   Bewusst nur in der Anzeige und nicht im Kopiertext: Der geht nach
   Bring!, und dort wuerde ein Zusatz die Zeile unlesbar machen. */
.shopping-ohne {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

/* Naehrwerte je Person unter dem Namen.
   Eine eigene Zeile, damit sie den Satz "Sylvie ohne Zucchini" nicht
   auseinanderzieht - der ist die Hauptsache auf der Karte. */
.heute-naehrwert {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Die uebrigen Makros gehoeren zu Tischuna+ und stehen deshalb eine Spur
   zurueckhaltender - sie sind Zusatz, nicht Kern. */
.heute-naehrwert-plus { opacity: .8; }

/* Woher die Naehrwerte kommen.
   Zugeklappt, weil es beim zweiten Mal niemand mehr liest - aber da,
   weil es beim ersten Mal zaehlt. */
.heute-herkunft {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.heute-herkunft summary {
  cursor: pointer;
  padding: 4px 0;
  color: var(--text-secondary);
}

.heute-herkunft p {
  margin: 6px 0 0;
  line-height: 1.5;
  max-width: 46rem;
}

/* Die Datenauskunft in der Oberflaeche.
   Zugeklappt, weil sie lang ist - aber an der Stelle, an der jemand
   danach sucht, naemlich neben "Daten herunterladen" und "Konto
   loeschen". */
.daten-uebersicht {
  margin: 0 0 18px;
  font-size: 14px;
}

.daten-uebersicht summary {
  cursor: pointer;
  padding: 6px 0;
  font-weight: 600;
  color: var(--text-primary);
}

.daten-uebersicht dl {
  margin: 10px 0 0;
  max-width: 46rem;
}

.daten-uebersicht dt {
  margin-top: 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.daten-uebersicht dd {
  margin: 3px 0 0;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── Der gefuehrte Erststart ────────────────────────── */

.erststart {
  max-width: 46rem;
}

.erststart h1 {
  margin: 0 0 6px;
}

.erststart-vorspann {
  margin: 0 0 24px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 38rem;
}

.erststart-zeilen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

/* Zwei Spalten am Schreibtisch, untereinander am Telefon. Die zweite
   Spalte ist die wichtigere - sie traegt das, was Tischuna ausmacht -,
   deshalb bekommt sie mehr Platz. */
.erststart-zeile {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}

.erststart-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

@media (max-width: 640px) {
  .erststart-zeile {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--separator-light, #e6e2db);
  }

  .erststart-aktionen {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Der Knopf, der den Verlauf aufklappt. Steht allein unter der Liste,
   braucht also etwas Abstand nach oben und die volle Breite auf dem
   Telefon - sonst ist er ein Ziel von wenigen Millimetern. */
.history-mehr {
  margin-top: 0.75rem;
  width: 100%;
  min-height: 44px;
}

@media (min-width: 641px) {
  .history-mehr { width: auto; }
}

/* Was Tischuna+ bringt, in der Kaufkarte. Keine Aufzaehlungspunkte -
   die Zeilen sind Aussagen, keine Liste zum Abhaken. */
.billing-leistungen {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.billing-leistungen li {
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.5;
}

.billing-leistungen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent, currentColor);
  opacity: 0.6;
}

/* ── Auf dem Telefon: keine Lupe, keine Zielscheiben ─────────────────

   Zwei Regeln, beide aus einer Durchsicht der Oberflaeche auf einem
   375px breiten Geraet. Sie stehen bewusst am Ende und in einer
   Medienabfrage: Am Schreibtisch aendert sich nichts, und wer eine
   der Regeln zurueckdrehen will, findet sie an einer Stelle statt an
   sieben.

   ERSTENS: Eingabefelder unter 16px. Safari auf iOS zoomt beim
   Hineintippen automatisch hinein und kommt von selbst nicht wieder
   heraus - der Nutzer muss zurueckwischen. Betroffen waren die
   Produktsuche (14px), der Rezepteditor (13px) und die Rollenauswahl
   (12px). Genau diese Felder trifft man beim Einrichten zuerst.

   ZWEITENS: Beruehrungsziele unter 44px. Das ist die Groesse, die eine
   Fingerkuppe zuverlaessig trifft. Der Schliessen-Knopf der Dialoge
   war 28x28, die Knoepfe an den Personenkarten 30x30 - und ein
   danebengegangener Druck auf "Person loeschen" ist teurer als einer
   auf "bearbeiten".

   Die Zielgruppe steht mit dem Telefon in der Kueche, oft mit einer
   Hand und nicht immer mit trockenen Fingern. */
@media (max-width: 640px) {
  input,
  select,
  textarea,
  .recipe-edit-grid input,
  .recipe-edit-grid textarea,
  .grocery-search input,
  .rolle-auswahl select {
    /* 16px ist die Schwelle, ab der iOS nicht mehr zoomt - nicht
       "gross genug", sondern genau diese Zahl. */
    font-size: 16px;
  }

  .btn-close,
  .btn-icon {
    width: 44px;
    height: 44px;
  }

  /* Der Rezepteditor wird einspaltig: Zwei Spalten a 16px-Schrift
     passen auf 375px nicht nebeneinander, ohne dass die Beschriftungen
     umbrechen. */
  .recipe-edit-grid {
    grid-template-columns: 1fr;
  }

  .heute-grund-knopf {
    min-height: 44px;
    font-size: 14px;
  }
}


/* ── Neuentwurf: Zeilenlinks unter Plan und Familie ─── */

.zeilen-links {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--separator);
}
.zeilen-links li > button,
.zeilen-links li > a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--separator);
  color: var(--text-primary);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.zeilen-links span {
  margin-left: auto;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.875rem;
}
.zeilen-links li > button::after,
.zeilen-links li > a::after {
  content: "›";
  color: var(--text-secondary);
  font-size: 1.25rem;
}
.tab[aria-current="page"] span {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* ── Toast und Uebernahme ───────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(520px, calc(100% - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--bg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  font-size: 0.9375rem;
}
.toast[hidden] { display: none; }
.toast button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: #FBD3BF;
  font-weight: 700;
  cursor: pointer;
}
.toast [data-toast-zu] { color: var(--bg); font-size: 1.25rem; }
@media (min-width: 900px) {
  .toast { bottom: 24px; }
}

.heute-konflikt {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.heute-konflikt p { margin: 0 0 8px; }

.tag-offen {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-style: italic;
}
.uebernahme-zurueck { margin-top: 6px; }

/* ── Personenblatt (Neuentwurf) ─────────────────────── */

.person-abschnitt {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
}
.person-abschnitt h3 {
  margin: 0;
  font-size: 1rem;
}
.person-abschnitt .field-hint { margin: 0; }
.auswahl-mehr summary,
.person-mehr summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent-hover);
  font-weight: 600;
}
.person-mehr {
  margin-top: 16px;
  border-top: 1px solid var(--separator);
}
.person-mehr summary { color: var(--text-primary); }
.auswahl-mehr .auswahl-gruppe { margin-top: 8px; }

/* ── Kuechenstufe unter Familie ─────────────────────── */

.kuechen-stufe {
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.kuechen-stufe h2 {
  margin: 0 0 12px;
  font-size: 1.0625rem;
}
.kuechen-stufe .field-hint { margin: 8px 0 0; }
.stufen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--fill);
}
.stufe-knopf {
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.stufe-knopf[aria-checked="true"] {
  background: var(--surface);
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}

/* ── Geraete-Angebot am Rezept ──────────────────────── */

.geraete-angebot {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #E9EEF6;
  color: var(--text-primary);
}
.geraete-angebot p { margin: 0 0 8px; }
.geraete-knoepfe { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.geraete-variante { margin-top: 12px; }
.geraete-variante h4 { margin: 0; font-size: 1rem; }
.geraete-variante ol { padding-left: 20px; display: grid; gap: 6px; }
.geraete-neu { font-size: 0.8125rem; color: var(--text-secondary); }
.geraete-bewertung { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.geraete-bewertung button { min-width: 44px; min-height: 44px; }