/*
 * Ernährungs- & Gewichts-Tracker — Stylesheet
 * Mobile-First, responsive, mit Hell-/Dunkel-Theme über CSS-Variablen.
 * Kein Framework (kein Bootstrap/Tailwind) — bewusst schlank gehalten.
 */

:root {
  --color-bg: #f5f7f9;
  --color-surface: #ffffff;
  --color-border: #e4e7ec;
  --color-text: #101828;
  --color-text-muted: #667085;
  --color-primary: #1c6e4a;
  --color-primary-dark: #14533a;
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, #ffffff);
  --color-danger: #d92d20;
  --color-danger-bg: #fef3f2;
  --color-info-bg: #eef4ff;
  --color-info-text: #1849a9;
  --color-success-bg: #ecfdf3;
  --color-success-text: #067647;
  --color-error-bg: #fef3f2;
  --color-error-text: #b42318;
  --color-warning-bg: #fef6e7;
  --color-warning-text: #93650b;
  --color-protein: #6941c6;
  --color-carbs: #1570ef;
  --color-fat: #dc6803;
  --color-water: #0ea5e9;
  --color-steps: #10b981;
  --chart-line: #1c6e4a;
  --chart-grid: #e4e7ec;
  --chart-text: #667085;
  --chart-target: #d92d20;
  --chart-bar: #1c6e4a;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-card: 18px;
  --radius-hero: 22px;
  --radius-pill: 999px;
  --space-page: 0.9rem;
  --space-card: 0.95rem;
  --font-hero: 1.35rem;
  --font-stat: 1.25rem;
  --shadow-card: 0 4px 14px rgba(15, 40, 30, 0.04);
  --shadow-hero: 0 10px 28px color-mix(in srgb, var(--color-primary) 8%, transparent);
  --hero-border: color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  --hero-bg: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--color-primary) 9%, #fff) 0%, var(--color-surface) 48%, var(--color-surface) 100%);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 8px 28px rgba(16, 24, 40, 0.1);
  --nav-height: 68px;
  --font-display: 1.85rem;
  --font-title: 1.25rem;
  --font-body: 0.9375rem;

  /* Bewegungs-Grundraster für Mikro-Interaktionen (Kalorienring, Makro-
     Detailansicht usw., siehe assets/js/dashboard-interactive.js) —
     bislang gab es dafür keine gemeinsamen Tokens, jede Stelle im
     Stylesheet definierte Übergangsdauern einzeln. Theme-unabhängig,
     daher nur einmal hier definiert (keine Dopplung in den Dark-Mode-
     Blöcken nötig, anders als bei den Farb-Tokens). */
  --duration-fast: 150ms;
  --touch-min: 44px;
  --touch-min-sm: 40px;
  --duration-base: 250ms;
  --duration-slow: 350ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Stufenfarben der Streak-Abzeichen (siehe .streak-badge weiter unten),
     sieben Schritte von hell nach dunkel/Gold — bewusst als konkrete
     Hex-Werte statt color-mix()-Prozentstufen, damit benachbarte Stufen
     auch bei kleiner Icongröße klar unterscheidbar bleiben. */
  --tier-1: #cdeadd;
  --tier-2: #8fcbac;
  --tier-3: #4a9c76;
  --tier-4: var(--color-primary);
  --tier-5: var(--color-primary-dark);
  --tier-6: #0c3524;
  --tier-7: #c9922f;
  --tier-7-glow: rgba(201, 146, 47, 0.4);

  /* Maskottchen-Farben (Phase 6 der UI-Modernisierung, Erfolgs-Feiern) —
     bewusst aus --color-primary abgeleitet statt eigener fester Werte,
     damit die Figur in beiden Themes automatisch stimmig bleibt, ohne die
     Werte in den Dark-Mode-Blöcken unten zu wiederholen (color-mix()
     wertet var(--color-primary) im jeweils aktiven Theme aus). Heller/
     freundlicher als --color-primary selbst (mit Weiß gemischt), damit die
     Figur sich von den übrigen, satteren Primärfarb-Flächen abhebt. */
  --mascot-green: color-mix(in srgb, var(--color-primary) 74%, #ffffff 26%);
  --mascot-green-hand: color-mix(in srgb, var(--color-primary) 58%, #ffffff 42%);
  --mascot-ink: #1f3a2c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #101317;
    --color-surface: #1a1f26;
    --color-border: #2d3440;
    --color-text: #f2f4f7;
    --color-text-muted: #98a2b3;
    --color-primary: #34c785;
    --color-primary-dark: #1c6e4a;
    --color-danger: #f97066;
    --color-danger-bg: #3a1a17;
    --color-info-bg: #142438;
    --color-info-text: #84caff;
    --color-success-bg: #12261e;
    --color-success-text: #75e0a7;
    --color-error-bg: #3a1a17;
    --color-error-text: #fda29b;
    --color-warning-bg: #3a2c12;
    --color-warning-text: #f7c948;
    --chart-line: #34c785;
    --chart-grid: #2d3440;
    --chart-text: #98a2b3;
    --chart-target: #f97066;
    --chart-bar: #34c785;

    --tier-1: #2a4c3d;
    --tier-2: #3d7059;
    --tier-3: #349968;
    --tier-4: var(--color-primary);
    --tier-5: #5fe0a0;
    --tier-6: #baf6d8;
    --tier-7: #e0ab5f;
    --tier-7-glow: rgba(224, 171, 95, 0.4);
  }
}

:root[data-theme="dark"] {
  --color-bg: #101317;
  --color-surface: #1a1f26;
  --color-border: #2d3440;
  --color-text: #f2f4f7;
  --color-text-muted: #98a2b3;
  --color-primary: #34c785;
  --color-primary-dark: #1c6e4a;
  --color-danger: #f97066;
  --color-danger-bg: #3a1a17;
  --color-info-bg: #142438;
  --color-info-text: #84caff;
  --color-success-bg: #12261e;
  --color-success-text: #75e0a7;
  --color-error-bg: #3a1a17;
  --color-error-text: #fda29b;
  --color-warning-bg: #3a2c12;
  --color-warning-text: #f7c948;
  --chart-line: #34c785;
  --chart-grid: #2d3440;
  --chart-text: #98a2b3;
  --chart-target: #f97066;
  --chart-bar: #34c785;

  --tier-1: #2a4c3d;
  --tier-2: #3d7059;
  --tier-3: #349968;
  --tier-4: var(--color-primary);
  --tier-5: #5fe0a0;
  --tier-6: #baf6d8;
  --tier-7: #e0ab5f;
  --tier-7-glow: rgba(224, 171, 95, 0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: var(--font-title); font-weight: 700; margin: 0.4rem 0 1rem; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; font-weight: 650; margin: 0 0 0.75rem; }
a { color: var(--color-primary); }
.muted { color: var(--color-text-muted); font-size: 0.875rem; }
hr { border: none; border-top: 1px solid var(--color-border); margin: 1rem 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Layout --- */
.app-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.75rem 1rem calc(var(--nav-height) + env(safe-area-inset-bottom) + 1.75rem);
}
.app-main.has-nav { padding-top: 0.35rem; }
.page { padding-bottom: 1rem; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-header__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  line-height: 1.1;
  text-decoration: none;
  color: var(--color-text);
  min-width: 0;
}
.app-header__name {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header__ver {
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.app-header__menu-toggle { display: none; }

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.04);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.35rem 0;
  transition: color var(--duration-fast) var(--ease-standard);
  position: relative;
}
.bottom-nav a .icon { width: 1.4rem; height: 1.4rem; flex: none; transition: transform var(--duration-fast) var(--ease-spring); }
.bottom-nav a:hover, .bottom-nav a:focus-visible { color: var(--color-primary); }
.bottom-nav a.is-active {
  color: var(--color-primary);
  font-weight: 600;
}
.bottom-nav a.is-active .icon { transform: scale(1.08); }

.offline-banner {
  background: var(--color-danger-bg);
  color: var(--color-error-text);
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
}

/* --- Cards & forms --- */
.card {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  box-shadow: var(--shadow-card);
}
.card--hero {
  padding: 1.35rem 1.25rem 1.25rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.card--flat {
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}

/* Ein <canvas> ohne eigenes width-Attribut/CSS rendert per Browser-
   Standard nur 300px breit (bzw. bleibt inline und lässt dadurch unten
   einen kleinen Zeilenhöhen-Rand) — assets/js/charts.js liest
   canvas.clientWidth aus, um die interne Auflösung zu bestimmen (siehe
   setupCanvas()), bekäme dadurch aber ohne diese Regel immer nur die
   300px als Breite statt der tatsächlich verfügbaren Kartenbreite.
   display:block + width:100% sorgen dafür, dass alle drei Diagramme
   (Gewichtsverlauf, Withings-Verlauf, Kalorienverlauf) ihre Karte
   wirklich ausfüllen, statt rechts/unten ungenutzten Platz zu lassen. */
canvas[data-line-chart], canvas[data-bar-chart] { display: block; width: 100%; }

form label { display: block; font-size: 0.85rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
form label:first-of-type { margin-top: 0; }
input, select, textarea, button {
  font: inherit;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
}
/* Ein natives <input type="date"> hat immer nur so viel sichtbaren
   Inhalt wie "TT.MM.JJJJ" + Kalender-Icon — bei width: 100% in einer
   breiten Karte oder gestapelten Formularzeile (siehe
   .form-row--stack-mobile) wirkt es dadurch unnötig "leer"
   in die Breite gezogen. Eine Obergrenze lässt es kompakt und
   proportional zu seinem tatsächlichen Inhalt aussehen, unabhängig
   davon, wie breit das umgebende Element ist. */
input[type="date"] { max-width: 200px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.form-row { display: flex; gap: 0.75rem; align-items: end; }
/* min-width: 0 überschreibt die Flexbox-Standardvorgabe (min-width: auto),
   die ein Kindelement sonst nie unter seine intrinsische Inhaltsbreite
   schrumpfen lässt. Ohne das hier behält z. B. ein natives
   <input type="date"> auf mobilen Browsern (eigene Mindestbreite für
   Tag/Monat/Jahr) stur seine volle Breite und überlappt das
   Nachbarfeld, statt sich der verfügbaren Breite anzupassen. */
.form-row > * { flex: 1; min-width: 0; }
/* Auf schmalen Handy-Breiten reicht der Platz für zwei beschriftete
   Felder nebeneinander (z. B. Datum + Gewicht) oft trotzdem nicht für
   eine wirklich komfortable Eingabe — hier stapeln wir stattdessen
   sauber untereinander (siehe .form-row--stack-mobile in den
   Templates, wo das gewünscht ist). */
@media (max-width: 480px) {
  .form-row--stack-mobile { flex-direction: column; align-items: stretch; }
}
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.checkbox-row input { width: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn--block { display: flex; width: 100%; margin-top: 1rem; }
.btn--small { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.btn--icon { padding: 0.4rem 0.55rem; background: transparent; border-color: transparent; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert--error { background: var(--color-error-bg); color: var(--color-error-text); }
.alert--success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert--info { background: var(--color-info-bg); color: var(--color-info-text); }

.flash-container {
  margin-bottom: 1rem;
  overflow: hidden;
  transition: margin-bottom var(--duration-base) var(--ease-out);
}
.flash-container.is-leaving { margin-bottom: 0; }
.flash {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  max-height: 8rem;
  overflow: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              max-height var(--duration-base) var(--ease-out),
              margin var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out);
}
.flash--success { background: var(--color-success-bg); color: var(--color-success-text); }
.flash--error { background: var(--color-error-bg); color: var(--color-error-text); }
.flash.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .flash, .flash-container { transition: none; }
}


.badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; vertical-align: middle; margin-left: 0.35rem; }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--neutral { background: var(--color-border); color: var(--color-text-muted); }
.badge--success { background: var(--color-success-bg); color: var(--color-success-text); }

/* --- Auth --- */
.auth-page { display: flex; justify-content: center; padding-top: 2rem; }
.auth-page.auth-page--welcome { padding-top: max(0.35rem, env(safe-area-inset-top, 0px)); }
.auth-card { width: 100%; max-width: 400px; }

/* --- Stat cards --- */
.stat-card-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.stat-card { flex: 1 1 45%; display: flex; flex-direction: column; gap: 0.15rem; }
.stat-card__label { font-size: 0.75rem; color: var(--color-text-muted); }
.stat-card__value { font-size: 1.15rem; font-weight: 700; }

/* --- Streak-Hinweis auf dem Dashboard: eine ruhige Zeile mit dem
   aktuellen Streak, ergänzt um eine kompakte, dezente Reihe der sieben
   Meilenstein-Abzeichen (keine Animation, kein Punkte-/Levelsystem —
   die Abzeichen bilden nur die bestehenden StreakCalculator-Meilen-
   steine ab, siehe App\Services\StreakAchievements). --- */
.streak-card { position: relative; padding: 0.85rem 0.9rem; }
/* Kopfzeile der Streak-Karte: aktueller Streak (oder Start-Hinweis)
   links, die beiden Tagesstatus-Chips rechtsbündig auf gleicher Höhe
   — daher als eine gemeinsame Flex-Zeile statt zweier gestapelter
   Blöcke (siehe .streak-today-status weiter unten). flex-wrap +
   margin-left:auto auf den Chips (statt justify-content:space-between)
   sorgt dafür, dass auf sehr schmalen Bildschirmen die Chips als Ganzes
   in eine zweite, weiterhin rechtsbündige Zeile rutschen, statt den
   Zeilentext hässlich mitten im Wort umzubrechen. */
.streak-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* .streak-card__row (Icon + Zahl + Label) bleibt bei ihrer natürlichen
   Breite (kein internes Schrumpfen) — nur der längere Start-Hinweistext
   bekommt flex:1 + min-width:0, damit ER bei Bedarf innerhalb seiner
   eigenen Spalte umbricht. */
.streak-card__header .streak-card__row { flex-shrink: 0; }
.streak-card__header .streak-card__start { flex: 1 1 auto; min-width: 0; }
.streak-card__row { display: flex; align-items: center; gap: 0.5rem; }
.streak-card__icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--color-primary); }
/* Phase 3: Flammen-Emoji statt des vorherigen SVG-Icons, direkt aus der
   Spezifikation übernommen ("🔥 7 TAGE IN FOLGE") — emotionaler als ein
   neutrales Symbol, ohne kindlich zu wirken (Grundtonalität, siehe
   Abschnitt 1 der Spezifikation). */
.streak-card__flame { font-size: 1.6rem; line-height: 1; flex: none; }
.streak-card__value { font-size: 1.55rem; font-weight: 700; margin-right: 0.3rem; font-variant-numeric: tabular-nums; }
.streak-card__label { font-size: 0.85rem; color: var(--color-text-muted); }
.streak-card__ontrack { display: block; margin-top: 0.1rem; font-size: 0.8rem; font-weight: 600; color: var(--color-primary-dark); }
.streak-card__note { margin: 0.35rem 0 0; font-size: 0.75rem; }
.streak-card__start { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }

/* Joker (Streak-Schutz): oben rechts in der Streak-Karte. Existiert im
   Markup nur, wenn beide Voraussetzungen gleichzeitig gelten (siehe
   templates/dashboard/index.php, $showJokerButton) — Warnton statt der
   ruhigen Akzentfarbe, weil er signalisiert "hier ist gerade etwas zu
   tun", nicht "alles normal". Siehe App\Services\StreakJoker,
   public/assets/js/streak-joker.js. */
.joker-slot { position: absolute; top: 0.7rem; right: 0.75rem; }
/* Reserviert Platz für den (absolut positionierten, daher aus dem
   Textfluss genommenen) Joker-Button, damit er den Start-Hinweistext
   nicht überlappt, wenn der Streak gerade bei 0 liegt (siehe
   .streak-card__start weiter unten). */
.streak-card--has-joker .streak-card__header { padding-right: 4.5rem; }
.joker-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.32rem 0.6rem 0.32rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-warning-text) 45%, var(--color-border));
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.joker-btn:hover, .joker-btn:focus-visible { background: color-mix(in srgb, var(--color-warning-text) 18%, var(--color-warning-bg)); }
.joker-btn__icon { width: 15px; height: 15px; flex: none; }
.joker-confirm {
  position: absolute; top: 2.35rem; right: 0; width: 220px; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 0.65rem 0.7rem; z-index: 2;
}
.joker-confirm p { margin: 0 0 0.6rem; font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.45; }
.joker-confirm__actions { display: flex; gap: 0.4rem; }
.joker-confirm__actions button {
  flex: 1; padding: 0.35rem 0.4rem; border-radius: 7px; font: inherit; font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer;
}
.joker-confirm__actions button.joker-confirm__use { background: var(--color-warning-text); border-color: var(--color-warning-text); color: #fff; }
.joker-confirm__actions button:disabled { opacity: 0.6; cursor: default; }
.joker-error { margin: 0.5rem 0 0; font-size: 0.7rem; color: var(--color-danger); }

.streak-risk-note {
  margin: 0.6rem 0 0; padding: 0.5rem 0.65rem; border-radius: 8px;
  background: var(--color-warning-bg); color: var(--color-warning-text);
  font-size: 0.75rem; line-height: 1.45;
}

/* Tagesstatus-Transparenz: zeigt, ob für HEUTE schon beides (Ernährung
   UND Gewicht) erfasst ist, siehe StreakCalculator (ein Tag zählt erst
   dann für den Streak). Bewusst neutral/warnend statt rot — ein noch
   offener Punkt ist keine "Fehlermeldung". */
.streak-today-status { display: flex; gap: 0.35rem; flex: none; margin-left: auto; }
.streak-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.28rem 0.48rem; border-radius: 999px; border: 1px solid var(--color-border);
  font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted);
}
.streak-chip svg { width: 13px; height: 13px; flex: none; }
.streak-chip.is-done { border-color: var(--color-primary); color: var(--color-primary-dark); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.streak-chip.is-open { border-color: var(--color-warning-text); color: var(--color-warning-text); background: var(--color-warning-bg); }

/* Meilenstein-Feiermoment: vollflächiges Overlay (Mockup Screens 3+6).
   Konfetti-Canvas + zentriertes Modal — seitenweit, damit Trophy/Mascot
   und XP-Chip Raum haben. */
.milestone-celebrate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(16, 24, 40, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
  pointer-events: none;
}
.milestone-celebrate.is-visible { opacity: 1; pointer-events: auto; }
.milestone-celebrate__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.milestone-celebrate__modal {
  position: relative; z-index: 1; text-align: center;
  max-width: 320px; width: 100%;
  background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  transform: scale(0.92) translateY(12px);
  transition: transform var(--duration-base) var(--ease-spring);
}
.milestone-celebrate.is-visible .milestone-celebrate__modal {
  transform: scale(1) translateY(0);
}
.milestone-celebrate__modal p { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 650; line-height: 1.4; color: var(--color-text); }
.milestone-celebrate__modal button {
  display: block; width: 100%;
  font: inherit; font-size: 1rem; font-weight: 650;
  padding: 0.85rem 1rem;
  border-radius: 14px; border: 0;
  background: var(--color-primary); color: #fff; cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.milestone-celebrate__modal button:hover { background: var(--color-primary-dark); }
.milestone-celebrate__modal button:active { transform: scale(0.97); }
.milestone-celebrate__banner {
  display: inline-block;
  background: linear-gradient(135deg, #34c785, #1c6e4a);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.65rem;
}
.milestone-celebrate__xp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin: 0.25rem 0 1rem;
}
.milestone-celebrate__milestones {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}
.milestone-celebrate__milestone {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
}
.milestone-celebrate__milestone.is-done {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Streak-Trophäe (Phase 6 der UI-Modernisierung): ersetzt das bisherige
   Medaillen-Icon speziell in der Streak-Meilenstein-Feier (#streak-
   celebrate, siehe templates/dashboard/index.php) durch eine bildhaftere
   Pokal-Grafik — bewusst NUR dort (nicht auch in .gamification-celebrate-
   card, siehe Maskottchen unten), da die beiden Feier-Arten weiterhin
   unterschiedliche Auslöser haben (Tage-Streak vs. Level/Meilenstein/
   Challenge) und dadurch optisch unterscheidbar bleiben sollen. */
.streak-celebrate__trophy { width: 88px; height: 96px; margin: 0 auto 0.75rem; display: block; animation: mascotBounce 2.2s ease-in-out infinite; }
.streak-celebrate__trophy-shine { animation: trophyShine 2.6s ease-in-out infinite; }

/* Maskottchen (Phase 6 der UI-Modernisierung): ersetzt das Stern-/
   Medaillen-/Flaggen-Icon in den bestehenden Gamification-Feier-Karten
   (Level-Aufstieg/Meilenstein/Challenge, siehe .gamification-celebrate-
   card in templates/dashboard/index.php) durch eine wiedererkennbare,
   animierte Figur — löst die Konfetti-Feier NICHT ab (das Canvas-Konfetti
   läuft unverändert weiter, siehe assets/js/gamification-celebrate.js),
   ergänzt sie nur um ein Gesicht. Kleiner als in der Design-Vorschau
   gehalten, da der Feier-Rahmen hier eine kompakte Karte statt eines
   ganzen Bildschirms ist. */
/* --- Maskottchen „Sprössling“ (partials/mascot.php) --- */
.mascot {
  width: 96px;
  height: auto;
  margin: 0 auto 0.65rem;
  display: block;
  overflow: visible;
}
.mascot__arms,
.mascot__face { display: none; }
.mascot--cheer .mascot__arms--cheer,
.mascot--cheer .mascot__face--cheer { display: block; }
.mascot--neutral .mascot__arms--neutral,
.mascot--neutral .mascot__face--neutral { display: block; }
.mascot--sad .mascot__arms--sad,
.mascot--sad .mascot__face--sad { display: block; }

/* Cheer animations */
.mascot--cheer { animation: mascotBounce 1.7s ease-in-out infinite; }
.mascot--cheer .mascot__arm--l { transform-origin: 34px 95px; animation: armCheerL 0.55s ease-in-out infinite; }
.mascot--cheer .mascot__arm--r { transform-origin: 86px 95px; animation: armCheerR 0.55s ease-in-out infinite; }
.mascot--cheer .mascot__leaf { transform-origin: 60px 50px; animation: leafSway 2.8s ease-in-out infinite; }

/* Neutral: gentle idle */
.mascot--neutral { animation: mascotIdle 3.2s ease-in-out infinite; }
.mascot--neutral .mascot__leaf { transform-origin: 60px 50px; animation: leafSway 4s ease-in-out infinite; }

/* Sad: slow droop + tear */
.mascot--sad { animation: mascotSad 2.8s ease-in-out infinite; }
.mascot--sad .mascot__leaf { transform-origin: 60px 50px; animation: leafDroop 3s ease-in-out infinite; }
.mascot--sad .mascot__tear { animation: tearDrop 1.8s ease-in-out infinite; }

/* Inline in streak card */
.mascot--inline {
  width: 52px;
  margin: 0 0.5rem 0 0;
  flex-shrink: 0;
}
.streak-risk-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.streak-risk-row .streak-risk-note { margin: 0; flex: 1; }

/* Legacy class alias used in gamification celebrate cards */
.gamification-celebrate-card__mascot { width: 96px; height: auto; margin: 0 auto 0.65rem; display: block; }

@keyframes mascotBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mascotIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes mascotSad { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(2px) rotate(-2deg); } }
@keyframes armCheerL { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes armCheerR { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-10deg); } }
@keyframes leafSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes leafDroop { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-6deg); } }
@keyframes tearDrop { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); } }
@keyframes trophyShine { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.7; } }

@media (prefers-reduced-motion: reduce) {
  .milestone-celebrate { transition-duration: 0.01ms; }
  .streak-celebrate__trophy, .streak-celebrate__trophy-shine,
  .mascot, .mascot__arm--l, .mascot__arm--r, .mascot__leaf, .mascot__tear,
  .gamification-celebrate-card__mascot {
    animation: none !important;
  }
}

/* Wochenfortschritt: unabhängig vom fortlaufenden Streak (siehe
   StreakCalculator::weekProgress()) — motiviert auch dann noch, wenn
   der Streak selbst gerade unterbrochen ist. Sitzt als eigener,
   zentrierter Block innerhalb der Streak-Karte direkt oberhalb der
   Abzeichen-Reihe (vormals eigene Karte "Wochenrückblick"). */
.progress-bar { height: 8px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.3s ease; }
.streak-week-progress { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; margin-top: 0.75rem; min-width: 0; }
.streak-week-progress .progress-bar { width: 100%; }
.streak-week-progress__note { margin: 0; font-size: 0.78rem; text-align: center; }

/* Erinnerungen (Einstellungen), siehe assets/js/push-reminders.js. */
.reminder-status { margin: 0 0 0.7rem; font-size: 0.82rem; color: var(--color-text-muted); }

/* Abzeichen-Reihe: jede Medaille zeigt einen Fortschrittsring, der
   sich mit dem aktuellen Streak Richtung der jeweiligen Schwelle
   schließt. Ist die Schwelle jemals per Bestwert erreicht worden
   (dauerhaft, siehe UserStreak::best()), bleibt das Abzeichen farbig
   und der Ring ist oben rechts von einem Häkchen durchbrochen —
   unabhängig davon, ob der aktuelle Streak später abbricht. */
.streak-badges { display: flex; gap: 0.25rem; overflow-x: auto; margin-top: 0.65rem; padding: 0.25rem 0; justify-content: flex-start; }
/* Phase 3: jetzt ein echter <button> (siehe templates/dashboard/index.php)
   statt eines reinen div — Button-Grundstile zurückgesetzt, dezentes
   Tap-/Fokus-Feedback ergänzt (Spezifikation Abschnitt 16 "Micro
   Interactions": Cards/Buttons → leichte Scale-Animation beim Antippen). */
.streak-badge {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex: none; width: 40px;
  background: none; border: none; padding: 0.1rem; margin: 0; cursor: pointer;
  border-radius: 8px; transition: transform var(--duration-fast) var(--ease-out);
}
.streak-badge:active { transform: scale(0.93); }
.streak-badge:focus,
.streak-badge:focus-visible { outline: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .streak-badge:active { transform: none; } }
.streak-badge__shape { width: 34px; height: 40px; display: flex; align-items: center; justify-content: center; }
.streak-badge__days { font-size: 0.56rem; color: var(--color-text-muted); white-space: nowrap; }
.streak-medal { width: 34px; height: 40px; overflow: visible; }
.streak-medal__rim { fill: color-mix(in srgb, var(--coin-fill, var(--color-border)) 55%, white); }
.streak-medal__face { fill: var(--coin-fill, var(--color-border)); }
.streak-medal__ribbon { fill: color-mix(in srgb, var(--coin-fill, var(--color-border)) 78%, black); }
.streak-medal__shine { fill: #fff; opacity: 0.22; }
.streak-badge.tier-7.is-achieved .streak-medal { filter: drop-shadow(0 0 4px var(--tier-7-glow)); }

/* --- Entry lists --- */
.entry-list { list-style: none; margin: 0; padding: 0; }
.entry-list__item {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  /* Verhindert, dass natives "ins Sichtfeld scrollen" (Tastaturfokus auf
     ✏️/🗑️, programmatisches scrollIntoView) einen Eintrag nahe dem
     unteren Bildschirmrand exakt unter der fixierten Navigationsleiste
     platziert — der Browser kennt deren Höhe sonst nicht und würde das
     Element bündig mit dem Viewport-Rand ausrichten. */
  scroll-margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 1rem);
}
.entry-list__item:last-child { border-bottom: none; }
.entry-list__item > span:first-child { flex: 1; }
.entry-list__note { display: block; font-size: 0.75rem; color: var(--color-text-muted); }

/* Wisch-Gesten auf Ernährungseinträgen (Spezifikation Abschnitt 4,
   assets/js/food-index.js) — Phase 2 der UI-Modernisierung. Die
   sichtbare Zeile (.entry-list__content) liegt über einer absolut
   positionierten Löschen-Fläche (.entry-list__swipe-reveal, rechts
   ausgerichtet) und wird per JS horizontal verschoben, um sie
   aufzudecken. pan-y lässt vertikales Scrollen der Seite unangetastet. */
.entry-list__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  background: var(--color-surface);
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  will-change: transform;
}
.entry-list__swipe-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.entry-list__swipe-delete-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 88px;
  border: 0;
  padding: 0 0.6rem;
  background: var(--color-error-text);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.entry-list__swipe-delete-btn svg { width: 15px; height: 15px; flex: none; }
.entry-list__item.is-removing .entry-list__content,
.entry-list__item.is-leaving .entry-list__content {
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out) !important;
  opacity: 0;
  transform: translateX(-100%) !important;
}
.entry-list__item.is-duplicating .entry-list__content { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .entry-list__item.is-removing .entry-list__content,
  .entry-list__item.is-leaving .entry-list__content { transition: opacity var(--duration-fast) linear !important; transform: none !important; }
}
.foodindex-swipe-hint { font-size: 0.72rem; text-align: center; margin: 0.8rem 0 0; }
@media (min-width: 560px) { .foodindex-swipe-hint { display: none; } }

/* Mahlzeiten-Karten: waagerecht wischbar (scrollt sanft zur nächsten/
   vorigen Karte, siehe food-index.js) — Inhalt bleibt vollständig
   sichtbar, es wird nichts ausgeblendet oder als Karussell umgebaut. */
.meal-card { touch-action: pan-y; scroll-margin-top: 1rem; scroll-margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 1rem); }
.chart-legend { font-size: 0.75rem; margin-top: 0.5rem; margin-bottom: 0; }

/* --- Antippbares Chart-Tooltip (Phase 4 der UI-Modernisierung,
   assets/js/charts.js: attachInteractivity()) — der jeweilige Canvas-
   Elternknoten bekommt per JS position:relative, damit dieses Tooltip
   absolut darüber positioniert werden kann. --- */
.chart-tooltip {
  position: absolute;
  top: 2px;
  z-index: 2;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow);
}

/* --- Gewichtstrend (templates/weight/index.php) --- */

/* Große Übersichtsanzeige oberhalb des Diagramms (Phase 4 der
   UI-Modernisierung): aktuelles Gewicht groß, Differenz seit Start
   klein darunter. */
.weight-hero { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.weight-hero__value { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.weight-hero__unit { font-size: 1.1rem; font-weight: 500; color: var(--color-text-muted); }
.weight-hero__since { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--color-text-muted); }
.weight-hero__since-icon { width: 1rem; height: 1rem; flex: none; }

/* Zeitraum-Umschalter fürs Gewichtsdiagramm (Phase 4 der
   UI-Modernisierung, siehe WeightController::index()). */
.period-toggle { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
.period-toggle__pill {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.period-toggle__pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.period-toggle__pill:hover { border-color: var(--color-primary); }

.trend-list { list-style: none; margin: 0; padding: 0; }
.trend-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
}
.trend-row:last-child { border-bottom: none; }
.trend-row__icon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--color-text-muted); }
.trend-row__body { flex: 1; }
.trend-row__label { font-size: 0.8rem; color: var(--color-text-muted); }
.trend-row__value { font-weight: 700; }
.trend-row__value small { font-weight: 400; color: var(--color-text-muted); }

.forecast-box {
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  background: var(--color-bg);
  font-size: 0.88rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.forecast-box__icon { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.1rem; color: var(--color-primary); }
.forecast-box--attention .forecast-box__icon { color: var(--color-warning-text); }
.forecast-box strong { display: block; margin-bottom: 0.15rem; }

/* --- Automatische Erkenntnisse (templates/dashboard/index.php) --- */
.insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: var(--color-bg);
  font-size: 0.88rem;
  line-height: 1.4;
}
.insight-item__icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.05rem; }
.insight-item--neutral .insight-item__icon { color: var(--color-text-muted); }
.insight-item--positive .insight-item__icon { color: var(--color-success-text); }
.insight-item--attention .insight-item__icon { color: var(--color-warning-text); }
.insight-list__disclaimer { margin: 0.6rem 0 0; font-size: 0.72rem; }

/* --- Streak-Heatmap der letzten 30 Tage (Phase 4 der UI-Modernisierung,
   templates/dashboard/index.php) --- */
.streak-heatmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.streak-heatmap__cell { aspect-ratio: 1; border-radius: 4px; background: var(--color-border); }
.streak-heatmap__cell[data-level="1"] { background: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.streak-heatmap__cell[data-level="2"] { background: var(--color-primary); }
@media (max-width: 380px) {
  .streak-heatmap { grid-template-columns: repeat(6, 1fr); }
}

/* --- Körperanalyse-Karte (templates/withings/index.php, siehe
   App\Services\BodyCompositionAnalysis) — Referenzbereich-Gauge für
   den Körperfettanteil, darunter dieselben .insight-list/.insight-item
   Klassen wie bei den "Automatischen Erkenntnissen" oben für die
   übrigen vier Kennzahlen. --- */
.bodycomp-card h2 { display: flex; align-items: center; gap: 0.45rem; }
.bodycomp-card__icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--color-primary); }
.bodycomp-card__subtitle { margin: -0.4rem 0 0.85rem; }
.bodycomp-row + .bodycomp-row { margin-top: 1rem; }
.bodycomp-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.bodycomp-row__label { font-size: 0.85rem; font-weight: 600; }
.bodycomp-row__value { font-size: 0.85rem; }
.bodycomp-row__value strong { font-size: 1rem; }
.bodycomp-range { position: relative; height: 8px; border-radius: 999px; overflow: hidden; display: flex; border: 1px solid var(--color-border); }
.bodycomp-range__seg { height: 100%; }
.bodycomp-range__seg--low { background: color-mix(in srgb, var(--color-info-text) 35%, var(--color-bg)); }
.bodycomp-range__seg--fit { background: color-mix(in srgb, var(--color-success-text) 45%, var(--color-bg)); }
.bodycomp-range__seg--average { background: var(--color-border); }
.bodycomp-range__seg--high { background: color-mix(in srgb, var(--color-warning-text) 45%, var(--color-bg)); }
.bodycomp-range__marker {
  position: absolute; top: -3px; width: 2px; height: 14px;
  background: var(--color-text); border-radius: 1px;
  transform: translateX(-1px);
}
.bodycomp-range__marker::after {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-text);
}
.bodycomp-range__scale { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.68rem; color: var(--color-text-muted); }

.ai-nutrition { margin: 0.5rem 0 1rem; }
.ai-nutrition-status { margin: 0.4rem 0 0; font-size: 0.8rem; }
.ai-nutrition-status--loading { color: var(--color-text-muted); }
.ai-nutrition-status--success { color: var(--color-success-text); }
.ai-nutrition-status--error { color: var(--color-error-text); }
.entry-list__item form { margin: 0; }

/* --- Rezeptvorschläge (eigene Rezepte im Budget + KI-Vorschläge) --- */
.recipe-suggestions__subtitle { margin: 0.9rem 0 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); }
.recipe-suggestions__subtitle:first-of-type { margin-top: 0.2rem; }
.recipe-suggestions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.recipe-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.recipe-suggestion-item__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.recipe-suggestion-item__name { font-size: 0.9rem; font-weight: 600; }
.recipe-suggestion-item__description { font-size: 0.78rem; color: var(--color-text-muted); }
.recipe-suggestion-item__meta { font-size: 0.75rem; color: var(--color-text-muted); }
.recipe-suggestion-item form { margin: 0; flex-shrink: 0; }
.ai-recipe-suggestions { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.ai-recipe-suggestions__controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ai-recipe-suggestions__controls label { font-size: 0.8rem; color: var(--color-text-muted); }
.ai-recipe-suggestions__controls select { width: auto; }

/* --- Foto-Erfassung einer Mahlzeit --- */
.meal-photo-preview {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin: 0.6rem 0;
}
.meal-photo-items { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.meal-photo-item { padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: 10px; }
.meal-photo-item__header { margin-bottom: 0.3rem; }
.meal-photo-item__name { flex: 1; width: auto; font-weight: 600; }
.meal-photo-item__description { margin: 0 0 0.4rem; }
.meal-photo-item__fields { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.meal-photo-item__field { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 70px; }
.meal-photo-item__field span { font-size: 0.72rem; color: var(--color-text-muted); }
.meal-photo-item__field input { width: 100%; padding: 0.3rem 0.4rem; }

.meal-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.meal-card__header h2 { margin: 0; }

.date-nav { display: flex; align-items: center; justify-content: space-between; }
.date-nav__label { font-weight: 600; }

/* --- Tabs --- */
.tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.tabs__tab {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
}
.tabs__tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Modifier für Tab-Leisten mit vielen/variabel breiten Einträgen (z. B.
   Meilenstein-Kategorien) — läuft horizontal innerhalb der eigenen Zeile,
   statt die ganze Seite in die Breite zu drücken (siehe
   templates/gamification/milestones.php). */
.tabs--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.tabs--scroll .tabs__tab { flex: 0 0 auto; white-space: nowrap; }

/* --- Barcode scanner ---
   #scanner-reader wird von der vendorten html5-qrcode-Bibliothek
   selbst befüllt (Video-Element, Scan-Region-Overlay) und dabei in
   der Höhe passend zur Video-Quelle skaliert — daher hier bewusst
   KEIN festes aspect-ratio/height erzwingen, nur Breite/Optik. */
.scanner-container {
  position: relative;
  width: 100%;
  min-height: 200px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.scanner-container video { width: 100%; height: auto; display: block; }
.manual-barcode-entry { margin-top: 1rem; border-top: 1px solid var(--color-border); padding-top: 0.75rem; }

/* --- Composer-Installer-Ausgabe (/settings/dependencies) --- */
.cli-output {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 22rem;
  overflow-y: auto;
}

/* --- Produktvorschläge ("Puls"-Karussell: gegessene Produkte der
   letzten 30 Tage). Jede Karte zeigt einen Kalorienring und einen
   farbigen Frische-Streifen am Rand, mit spürbar elastischem Einrasten
   — siehe assets/js/food-suggestions.js. --- */
.food-suggestions { padding: 0.85rem 0; }
.food-suggestions__title { margin: 0 0 0.6rem; font-size: 0.95rem; padding: 0 1rem; }
.food-suggestions__list {
  list-style: none;
  margin: 0;
  /* Bewusst NUR ein normales Rand-Polster (kein halbe-Kartenbreite-
     Trick mehr): damit steht die erste Karte bündig am linken und die
     letzte Karte bündig am rechten Rand, statt links/rechts vom
     Karussell künstlich leeren Raum zu erzeugen, nur damit auch die
     äußeren Karten mittig einrasten könnten. Wer die erste/letzte
     Karte zentriert sehen will, tippt auf den zugehörigen Punkt unter
     dem Karussell (#food-suggestions-dots) — dann scrollt sie gezielt
     dorthin. Oben/unten etwas großzügiger bemessen, damit Schatten und
     die leicht vergrößerte Karte nicht am Rand abgeschnitten werden. */
  padding: 1.1rem 1rem 0.85rem;
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.food-suggestions__list li { flex: 0 0 auto; scroll-snap-align: center; }
.food-suggestions__list { gap: 0.55rem; padding-left: 0.85rem; padding-right: 0.85rem; }
@media (min-width: 600px) {
  .food-suggestions__list { gap: 0.75rem; padding-left: 1rem; padding-right: 1rem; }
}
.food-suggestion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  /* Mobil-first: kompakte, möglichst quadratische Kachel */
  width: min(42vw, 148px);
  min-height: min(42vw, 148px);
  padding: 0.55rem 0.55rem 0.6rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  --t: 0;
  transform: scale(calc(0.94 + var(--t) * 0.08));
  box-shadow: 0 calc(2px + var(--t) * 8px) calc(8px + var(--t) * 12px) rgba(16, 24, 40, calc(0.04 + var(--t) * 0.1));
  transition: box-shadow 0.3s ease, border-color 0.15s ease;
}
.food-suggestion.is-settling {
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.3s ease, border-color 0.15s ease;
}
.food-suggestion.is-center {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
}
@media (prefers-reduced-motion: reduce) {
  .food-suggestion, .food-suggestion.is-settling { transition: none; }
}
.food-suggestion:hover, .food-suggestion:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}
.food-suggestion__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  position: relative;
  z-index: 1;
}
.food-suggestion__badge {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 1.9rem);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-align: left;
  box-sizing: border-box;
}
.food-suggestion--custom .food-suggestion__badge { background: var(--color-success-bg); color: var(--color-success-text); }
.food-suggestion--yesterday .food-suggestion__badge { background: var(--color-info-bg); color: var(--color-info-text); }
.food-suggestion--frequent .food-suggestion__badge { background: var(--color-warning-bg); color: var(--color-warning-text); }
.food-suggestion--previous .food-suggestion__badge { background: var(--color-border); color: var(--color-text-muted); }
.food-suggestion__add {
  flex: 0 0 1.55rem;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 40, 30, 0.18);
}
.food-suggestion__add svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}
.food-suggestion:active .food-suggestion__add { transform: scale(0.94); }
.food-suggestion__media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1;
  min-height: 3.1rem;
}
.food-suggestion__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef1f4;
  color: color-mix(in srgb, var(--color-primary) 35%, #4a5568);
  flex: none;
}
.food-suggestion__icon svg { width: 1.15rem; height: 1.15rem; display: block; }
.food-suggestion__photo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  background: var(--color-surface);
  flex: none;
  display: grid;
  place-items: center;
}
.food-suggestion__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.food-suggestion__photo--empty {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  color: color-mix(in srgb, var(--color-primary) 45%, var(--color-text-muted));
}
.food-suggestion__photo--empty svg { width: 1.15rem; height: 1.15rem; }
.food-suggestion__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
}
.food-suggestion__name {
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  letter-spacing: -0.01em;
}
.food-suggestion__ring-row { display: flex; align-items: center; gap: 0.35rem; }
.food-suggestion__ring { width: 22px; height: 22px; flex: none; }
.food-suggestion__ring-track, .food-suggestion__ring-value {
  fill: none;
  stroke-width: 3.5;
}
.food-suggestion__ring-track { stroke: var(--color-border); }
.food-suggestion__ring-value {
  stroke: var(--color-primary);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.food-suggestion__meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.food-suggestion__kcal-num { font-size: 0.78rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.food-suggestion__kcal-unit { font-size: 0.62rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ≥360px: etwas luftiger, weiter annähernd quadratisch */
@media (min-width: 360px) {
  .food-suggestion {
    width: min(40vw, 156px);
    min-height: 156px;
    padding: 0.6rem 0.65rem 0.65rem;
  }
  .food-suggestion__icon { width: 2.5rem; height: 2.5rem; }
  .food-suggestion__photo { width: 3rem; height: 3rem; }
  .food-suggestion__name { font-size: 0.84rem; }
}

/* Tablets / große Phones im Landscape: 2–3 Kacheln gut sichtbar */
@media (min-width: 600px) {
  .food-suggestion {
    width: 168px;
    min-height: 168px;
    border-radius: 18px;
  }
  .food-suggestion__media { gap: 0.55rem; }
  .food-suggestion__icon { width: 2.75rem; height: 2.75rem; border-radius: 14px; }
  .food-suggestion__photo { width: 3.25rem; height: 3.25rem; border-radius: 14px; }
  .food-suggestion__ring { width: 26px; height: 26px; }
}

/* Desktop: Karussell bleibt mobil-ähnlich, etwas größer */
@media (min-width: 900px) {
  .food-suggestion {
    width: 176px;
    min-height: 176px;
  }
}


/* Punkte unter dem Karussell (#food-suggestions-dots): zeigen, welcher
   Vorschlag gerade im Fokus ist; Klick scrollt gezielt zur jeweiligen
   Karte (siehe food-suggestions.js). */
.food-suggestions__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 1rem;
  margin-top: 0.15rem;
}
.food-suggestions__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.food-suggestions__dot.is-center { width: 16px; background: var(--color-primary); }
.food-suggestions__dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .food-suggestions__dot { transition: none; }
}

/* Ripple-Effekt beim Antippen einer Vorschlagskarte (spawnRipple() in
   food-suggestions.js) — rein optisch, entfernt sich nach der Animation
   selbst wieder aus dem DOM. */
.food-suggestion__ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.35;
  pointer-events: none;
  animation: food-suggestion-ripple 0.55s ease-out forwards;
}
@keyframes food-suggestion-ripple {
  to { transform: scale(14); opacity: 0; }
}

/* --- Live-Suche gegen eigene Produkte (Duplikat-Warnung, manuelle Erfassung) --- */
.own-product-matches {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.35rem;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}
/* [hidden] hat per UA-Stylesheet dieselbe Spezifität wie eine Klasse —
   display muss daher gezielt nur im sichtbaren Zustand gesetzt werden,
   sonst gewinnt unsere Regel gegen [hidden] und das Element bleibt trotz
   hidden-Attribut sichtbar. */
.own-product-matches:not([hidden]) { display: flex; }
.own-product-matches-hint { font-size: 0.75rem; color: var(--color-text-muted); margin: 0.4rem 0 0; }
.own-product-matches-hint:not([hidden]) { display: block; }
.own-product-match {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.own-product-match:hover, .own-product-match:focus-visible { border-color: var(--color-primary); }
.own-product-match__badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  white-space: nowrap;
}
.own-product-match__name {
  flex: 1 1 auto;
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.own-product-match__meta { flex: 0 0 auto; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }

/* --- Macro bars ---
   Seit Phase 1 der UI-Modernisierung <button>-Elemente (Antippen öffnet
   die Detailansicht, siehe .detail-sheet unten + dashboard-interactive.js)
   statt reiner <div>s — daher der Reset-Block für Button-Vorgaben
   (Rand/Hintergrund/Schrift/Ausrichtung), das Grid-Layout selbst bleibt
   unverändert. */
.macro-bars { display: flex; flex-direction: column; gap: 0.6rem; }
/* Beschriftung+Wert in einer eigenen Zeile ÜBER dem Balken statt im
   vorherigen 3-Spalten-Grid daneben (Label | Balken | Wert): auf
   schmalen Bildschirmen bzw. bei zweizeiligem "Ziel: X g"-Text konnte
   der Balken dadurch mit dem Zahlentext kollidieren — gemeldeter
   Layout-Fehler, siehe CHANGES.md. Der Balken läuft jetzt immer in
   einer eigenen Zeile über die volle Breite und kann strukturell nicht
   mehr mit Text überlappen. */
.macro-bar {
  display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem;
  width: 100%; border: 0; background: none; padding: 0.3rem 0.35rem; margin: -0.3rem -0.35rem;
  border-radius: 8px; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.macro-bar:hover, .macro-bar:focus-visible { background: var(--color-bg); }
.macro-bar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.macro-bar:active { transform: scale(0.99); }
.macro-bar__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.macro-bar__label { font-weight: 600; }
.macro-bar__values { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.macro-bar__target { color: var(--color-text-muted); }
.macro-bar__track { height: 8px; background: var(--color-bg); border-radius: 4px; overflow: hidden; }
.macro-bar__fill { height: 100%; border-radius: 4px; transition: width var(--duration-slow) var(--ease-out); }
.macro-bar__fill--protein { background: var(--color-protein); }
.macro-bar__fill--carbs { background: var(--color-carbs); }
.macro-bar__fill--fat { background: var(--color-fat); }
@media (prefers-reduced-motion: reduce) {
  .macro-bar, .macro-bar__fill { transition: none; }
}

/* --- Calorie summary ring (Dashboard) ---
   Echtes Donut-Diagramm (Conic-Gradient-Ring mit ausgestanzter Mitte
   statt gefüllter Torte): Zahl/Label liegen dadurch immer auf der
   Card-Fläche (--color-surface) statt direkt auf der grün/grauen
   Ringfarbe, was in beiden Themes zuverlässig ausreichend Kontrast
   sicherstellt — unabhängig davon, wie groß der grüne Anteil gerade
   ist (vorher: Text teils auf mittelgrünem Segment, dort < 3:1
   Kontrast in beiden Themes).
   Seit Phase 1 ein <button> (Antippen wechselt gegessen/übrig/Prozent,
   siehe dashboard-interactive.js::ProgressRing) — daher der Button-
   Reset-Block; ohne Kalorienziel bleibt er als disabled-<button>
   optisch identisch, aber nicht antippbar. */
.calorie-summary { display: flex; flex-direction: column; gap: 1.15rem; }
/* Ring und Seiten-Punkte jetzt übereinander statt nebeneinander
   (Nutzer-Feedback) — Ring bleibt so unabhängig von der verfügbaren
   Kartenbreite mittig, die Punkte stehen als klare Fortsetzung darunter. */
.calorie-summary__top { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.calorie-summary__ring {
  --progress: 0;
  --ring-color: var(--color-primary);
  --ring-track: color-mix(in srgb, var(--color-border) 55%, var(--color-bg));
  width: 168px; height: 168px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--ring-color, var(--color-primary)) calc(var(--progress) * 1%), var(--ring-track, #e8eee9) 0);
  transition: background 0.28s var(--ease-out, ease), transform var(--duration-fast, 0.15s);
  flex-shrink: 0;
  position: relative;
  border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer;
  /* Seit Phase 2 waagerecht wischbar (Seite Kalorien/Eiweiß/
     Kohlenhydrate/Fett, siehe dashboard-interactive.js) — pan-y lässt
     dem Browser vertikales Scrollen, blockt aber die horizontale Geste
     nicht vorzeitig, bevor JS sie als Wisch erkennen konnte. */
  touch-action: pan-y;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) linear;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.calorie-summary__ring:disabled { cursor: default; }
.calorie-summary__ring:not(:disabled):hover,
.calorie-summary__ring:not(:disabled):focus-visible { transform: scale(1.035); }
.calorie-summary__ring:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.calorie-summary__ring:not(:disabled):active { transform: scale(0.97); }
.calorie-summary__ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--color-surface);
  z-index: 0;
  transition: box-shadow var(--duration-base) var(--ease-out);
}
/* Dezente Schwellenwert-Rückmeldung bei 25/50/75/100 % während der
   Öffnungsanimation (siehe ProgressRing.animateTo in
   dashboard-interactive.js) — ein kurzer Glow-Puls statt einer
   auffälligen Konfetti-o.ä.-Animation, bewusst zurückhaltend. */
.calorie-summary__ring.is-pulse::before { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ring-color, var(--color-primary)) 22%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .calorie-summary__ring { transition: none; }
  .calorie-summary__ring:not(:disabled):hover, .calorie-summary__ring:not(:disabled):focus-visible, .calorie-summary__ring:not(:disabled):active { transform: none; }
  .calorie-summary__ring::before { transition: none; }
}
.calorie-summary__ring-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.calorie-summary__value { font-size: var(--font-display); font-weight: 750; letter-spacing: -0.03em; line-height: 1.05; }
.calorie-summary__percent {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ring-color, var(--color-primary));
  margin-top: 0.15rem;
}
.calorie-summary__label { font-size: 0.75rem; color: var(--color-text-muted); }
/* Seiten-Punkte des Fortschrittsrings (Kalorien/Eiweiß/Kohlenhydrate/
   Fett) — zeigt, welche der vier wischbaren Seiten gerade aktiv ist. */
.calorie-summary__dots { display: flex; gap: 0.35rem; }
.calorie-summary__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-border);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.calorie-summary__dot.is-active { background: var(--ring-color, var(--color-primary)); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .calorie-summary__dot { transition: none; }
}
/* Statistik-Zeile (Kalorienziel/Verbleibend/Ø 7 Tage) — eigene Zeile
   pro Beschriftung und Wert statt eines dl mit space-between auf EINER
   Zeile: dort rückten Beschriftung und Wert auf schmalen Bildschirmen
   ohne Abstand zusammen, und die Zusatzangabe ("Kalorienziel · Datum")
   brach mitten in die Zeile um (gemeldeter Layout-Fehler, siehe
   CHANGES.md). Drei gleich breite Spalten geben jedem Wert genug
   eigenen Raum, unabhängig von Zahlenlänge oder Sprache. */
.calorie-summary__stats {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
  padding-top: 0.85rem; border-top: 1px solid var(--color-border);
}
.calorie-summary__stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.calorie-summary__stat dt {
  /* Bewusst normale Groß-/Kleinschreibung statt GROSSBUCHSTABEN: Versalien
     brauchen spürbar mehr Breite und liefen bei drei Spalten auf sehr
     schmalen Bildschirmen (320px, z. B. iPhone SE 1. Gen.) unnötig in die
     Auslassungspunkte ("…"), obwohl der Text eigentlich passt. */
  margin: 0; font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calorie-summary__stat dd {
  margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calorie-summary__stat-unit { font-size: 0.7rem; font-weight: 500; color: var(--color-text-muted); margin-left: 0.15rem; }

/* --- Detail-Sheet (Bottom Sheet) ---
   Wiederverwendbare Komponente für Detailansichten, aktuell genutzt von
   den Makro-Balken (siehe dashboard-interactive.js::DetailSheet). Auf
   schmalen Bildschirmen ein von unten einfahrendes Sheet, auf breiteren
   ein zentrierter Dialog — beides über dieselbe Struktur/Klassen. */
.detail-sheet { position: fixed; inset: 0; z-index: 40; }
.detail-sheet[hidden] { display: none; }
body.has-open-sheet { overflow: hidden; }
.detail-sheet__backdrop {
  position: absolute; inset: 0; background: rgba(16, 24, 40, 0.45);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
}
.detail-sheet.is-open .detail-sheet__backdrop { opacity: 1; }
.detail-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  max-width: 480px; max-height: min(78vh, 560px); overflow-y: auto;
  background: var(--color-surface); color: var(--color-text);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 24px rgba(16, 24, 40, 0.18);
  padding: 0.6rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-spring);
}
.detail-sheet.is-open .detail-sheet__panel { transform: translateY(0); }
@media (min-width: 560px) {
  .detail-sheet__panel { top: 50%; bottom: auto; border-radius: 18px; transform: translate(-50%, -46%); left: 50%; right: auto; width: 92%; }
  .detail-sheet.is-open .detail-sheet__panel { transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .detail-sheet__backdrop, .detail-sheet__panel { transition: opacity var(--duration-fast) linear; }
  .detail-sheet__panel { transform: none !important; }
  @media (min-width: 560px) { .detail-sheet__panel { transform: translate(-50%, -50%) !important; } }
}
.detail-sheet__handle { width: 36px; height: 4px; border-radius: 999px; background: var(--color-border); margin: 0.55rem auto 0.4rem; touch-action: none; }
@media (min-width: 560px) { .detail-sheet__handle { display: none; } }
.detail-sheet__close {
  position: absolute; top: 0.6rem; right: 0.7rem; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--color-bg); color: var(--color-text-muted); cursor: pointer;
}
.detail-sheet__close svg { width: 16px; height: 16px; }
.detail-sheet__close:hover, .detail-sheet__close:focus-visible { background: var(--color-border); color: var(--color-text); }
.detail-sheet__title { margin: 0.2rem 2.2rem 0.6rem 0; font-size: 1.05rem; }
.detail-sheet__body { font-size: 0.88rem; color: var(--color-text); }
.detail-sheet__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.15rem; }
.detail-sheet__stat strong { font-size: 1.3rem; }
.detail-sheet__hint { margin: 0.15rem 0 0.9rem; color: var(--color-text-muted); font-size: 0.82rem; }
.detail-sheet__hint--reached { color: var(--color-success-text); }
.detail-sheet__tip {
  margin: 0.8rem 0 0; padding: 0.6rem 0.7rem; border-radius: 10px;
  background: var(--color-info-bg); color: var(--color-info-text); font-size: 0.8rem; line-height: 1.4;
}
.detail-timeline { margin-top: 0.9rem; }
.detail-timeline__title { margin: 0 0 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.detail-timeline__track { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border); }
.detail-timeline__seg { height: 100%; transition: flex-basis var(--duration-slow) var(--ease-out); }
.detail-timeline__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.5rem; font-size: 0.76rem; color: var(--color-text-muted); }
.detail-timeline__legend-item { display: flex; align-items: center; gap: 0.35rem; }
.detail-timeline__swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* --- Toast-Benachrichtigungen (app.js::showToast) --- */
.toast-container {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 1rem);
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  pointer-events: auto;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast__text { flex: 1; }
.toast__action {
  border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; padding: 0; flex: none;
}
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity var(--duration-fast) linear; } }

/* --- Settings danger zone --- */
.danger-zone { margin-top: 1rem; border: 1px solid var(--color-danger); border-radius: 8px; padding: 0.75rem; }
.danger-zone summary { cursor: pointer; font-weight: 600; color: var(--color-danger); }

/* --- Recipe builder / search --- */
.search-results {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-surface);
}
.search-results li { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; }
.search-results li:last-child { border-bottom: none; }
.search-results li:hover, .search-results li:focus { background: var(--color-bg); }
.recipe-item-row { align-items: center; margin-bottom: 0.5rem; }
.recipe-item-row__name { flex: 2; font-size: 0.875rem; }

/* --- Gamification (Fortschritt: Level/XP, Challenges, Meilensteine) ---
   Siehe App\Services\GamificationEngine für die Datenherkunft und
   templates/gamification/*.php + templates/partials/gamification-*.php
   für die Verwendung. Nutzt bewusst dieselben Bausteine wie der Rest
   der App (.card, .progress-bar, .badge, .tabs, .milestone-celebrate)
   statt eines eigenen Stilsystems. */

.level-badge {
  display: flex; align-items: center; gap: 0.85rem;
}
.level-badge__num {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-mono, inherit); font-weight: 700; font-size: 1.1rem;
  border: 2px solid var(--color-primary-dark);
}
.level-badge__num--gold { background: var(--tier-7); border-color: var(--tier-7); }
.level-badge__meta { flex: 1; min-width: 0; }
.level-badge__rank { font-weight: 700; font-size: 0.95rem; }
.level-badge__xp { margin: 0.1rem 0 0.35rem; font-size: 0.78rem; color: var(--color-text-muted); }
.level-badge .progress-bar { width: 100%; }

/* Phase 3: Level-Zahl poppt beim Laden kurz auf (Micro Interaction,
   Spezifikation Abschnitt 16) — Klasse wird per JS gesetzt/entfernt
   (assets/js/gamification-interactive.js), rein CSS-getrieben respektiert
   das ohnehin, da die Funktion bei prefers-reduced-motion die Klasse gar
   nicht erst hinzufügt. */
@keyframes level-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.level-badge__num.is-popping { animation: level-pop 0.4s var(--ease-out); }

.gamification-card { position: relative; }
.gamification-card__link { display: block; margin-top: 0.7rem; font-size: 0.82rem; font-weight: 600; }
.gamification-card__today { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--color-primary-dark); font-weight: 600; }

/* "+X XP ✨"-Aufblitzen bei frisch verdienter XP (Spezifikation Abschnitt
   9, Beispiel "+20 XP ✨") — kurzlebiges, absolut positioniertes Element,
   von JS erzeugt und nach der Animation wieder entfernt (assets/js/
   gamification-interactive.js). Erscheint nur, wenn JS läuft UND
   prefers-reduced-motion nicht aktiv ist (siehe dort) — rein informativ,
   die eigentliche Zahl steht bereits dauerhaft in .gamification-card__today. */
@keyframes xp-pop-rise {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(0.9); }
  20% { opacity: 1; transform: translate(-50%, -2px) scale(1.05); }
  75% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -22px) scale(1); }
}
.xp-pop {
  position: absolute; left: 26px; top: -4px; z-index: 2;
  font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
  padding: 0.15rem 0.55rem; white-space: nowrap; pointer-events: none;
  animation: xp-pop-rise 1.4s var(--ease-out) forwards;
}

/* Rang-Roadmap (Level-/XP-Seite): horizontale Kette aller Ränge, aktueller
   Rang hervorgehoben, künftige Ränge gedimmt. */
.rank-roadmap { display: flex; flex-direction: column; gap: 0.4rem; }
.rank-roadmap__item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem;
  border-radius: 8px; border: 1px solid transparent; font-size: 0.82rem; color: var(--color-text-muted);
}
.rank-roadmap__item.is-passed { color: var(--color-text); }
.rank-roadmap__item.is-current {
  border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary-dark); font-weight: 700;
}
.rank-roadmap__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.rank-roadmap__item.is-passed .rank-roadmap__dot, .rank-roadmap__item.is-current .rank-roadmap__dot { background: var(--color-primary); }
.rank-roadmap__level { margin-left: auto; font-size: 0.72rem; color: var(--color-text-muted); }

/* XP-Verlauf: kompakte Liste, neueste zuerst. */
.xp-history { display: flex; flex-direction: column; gap: 0.1rem; }
.xp-history__item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--color-border); font-size: 0.84rem;
}
.xp-history__item:last-child { border-bottom: none; }
.xp-history__icon { flex: none; width: 17px; height: 17px; color: var(--color-primary); }
.xp-history__label { flex: 1; min-width: 0; }
.xp-history__date { display: block; font-size: 0.72rem; color: var(--color-text-muted); }
.xp-history__amount { flex: none; font-weight: 700; font-family: var(--font-mono, inherit); color: var(--color-primary-dark); }

/* Challenge-Karten: aktive Instanz (Dashboard/Übersicht) und Katalog-Zeilen (Stöbern). */
.challenge-card {
  border: 1px solid var(--color-border); border-radius: 10px; padding: 0.75rem 0.85rem;
  margin-bottom: 0.6rem; background: var(--color-surface);
}
.challenge-card:last-child { margin-bottom: 0; }
.challenge-card__header { display: flex; align-items: flex-start; gap: 0.5rem; justify-content: space-between; }
.challenge-card__title { font-weight: 700; font-size: 0.88rem; }
.challenge-card__desc { margin: 0.15rem 0 0.55rem; font-size: 0.8rem; color: var(--color-text-muted); }
.challenge-card__xp { flex: none; font-size: 0.76rem; font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; }
.challenge-card__progress-note { margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--color-text-muted); text-align: right; }
.challenge-card.is-completed { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.challenge-card.is-completed .challenge-card__progress-note { color: var(--color-primary-dark); font-weight: 600; }
.challenge-card.is-locked { opacity: 0.65; }
.challenge-card__lock { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.challenge-card__lock svg { width: 12px; height: 12px; }
.challenge-list--catalog .challenge-card { padding: 0.6rem 0.7rem; }
/* Phase 3, Micro Interaction (Spezifikation Abschnitt 16): nur die
   tatsächlich klickbaren Katalog-Zeilen (<a class="challenge-card">, siehe
   templates/gamification/challenges.php) bekommen Tap-Feedback — die
   statischen Instanz-Karten (aktuell aktive Challenge) sind keine Links
   und sollen keine Klickbarkeit vortäuschen. */
a.challenge-card { display: block; transition: transform var(--duration-fast) var(--ease-out); }
a.challenge-card:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) { a.challenge-card:active { transform: none; } }

.category-summary { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.85rem; }
.category-summary__item {
  flex: 1; min-width: 90px; text-align: center; padding: 0.55rem 0.4rem;
  border: 1px solid var(--color-border); border-radius: 10px; font-size: 0.72rem; color: var(--color-text-muted);
}
.category-summary__item strong { display: block; font-size: 1.05rem; color: var(--color-text); font-family: var(--font-mono, inherit); }

/* Meilenstein-Kacheln: erreicht = farbig mit Datum, gesperrt = gedimmt mit Schloss. */
.milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.55rem; }
.milestone-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center;
  padding: 0.6rem 0.3rem; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-surface); font-size: 0.68rem; color: var(--color-text-muted); text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}
/* Phase 3, Micro Interaction (Spezifikation Abschnitt 16): immer ein
   echter Link (siehe templates/gamification/milestones.php/index.php). */
.milestone-tile:active { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) { .milestone-tile:active { transform: none; } }
.milestone-tile__icon {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.milestone-tile__icon svg { width: 16px; height: 16px; }
.milestone-tile.is-achieved { border-color: var(--tier-7); }
.milestone-tile.is-achieved .milestone-tile__icon { background: var(--tier-7); color: #fff; border-color: var(--tier-7); }
.milestone-tile.is-achieved .milestone-tile__label { color: var(--color-text); font-weight: 600; }
.milestone-tile__label { line-height: 1.3; }

/* Mehrere Feier-Momente nacheinander (Level-Up + Meilenstein(e) +
   Challenge(s) in derselben Anfrage) — wiederverwendet .milestone-celebrate
   (siehe oben), zeigt aber eine Karten-Warteschlange statt eines
   einzelnen fixen Textes, siehe assets/js/gamification-celebrate.js. */
.gamification-card .milestone-celebrate__modal { max-width: 320px; }
.gamification-celebrate-queue { display: contents; }
.gamification-celebrate-card[hidden] { display: none; }

/* --- Responsive: tablet/desktop --- */
@media (min-width: 720px) {
  .app-main { padding-top: 1.5rem; }
  .bottom-nav { position: static; height: auto; border-top: none; border-bottom: 1px solid var(--color-border); }
  .bottom-nav a { flex-direction: row; font-size: 0.85rem; padding: 0.5rem 0; }
  .app-main.has-nav { padding-top: 1.5rem; }
  /* Ohne fixierte untere Nav-Leiste braucht es hier keinen Abstand mehr
     zu deren Höhe — FAB und Toasts rücken einfach an den Bildschirmrand. */
  .toast-container { bottom: 1.5rem; }
  /* Ebenso braucht Scroll-in-View hier keinen Puffer mehr für die
     (jetzt statische) Nav-Leiste. */
  .entry-list__item, .meal-card { scroll-margin-bottom: 1rem; }
}

/* --- Ausrichtung auf Hochformat sperren (mobile Endgeräte) ---
 * Die App ist konsequent für Hochformat gestaltet (untere
 * Navigationsleiste, gestapelte Karten) — im Querformat wäre kaum
 * mehr nutzbar sichtbar. manifest.json setzt zwar bereits
 * "orientation": "portrait-primary" und assets/js/app.js versucht
 * zusätzlich screen.orientation.lock('portrait') (siehe dort), aber
 * beides wird von iOS Safari/Home-Bildschirm-Apps bislang nicht
 * respektiert. Deshalb hier zusätzlich der klassische, plattform-
 * unabhängige CSS-Dreh-Trick: den gesamten Seiteninhalt bei
 * Querformat einfach optisch wieder um 90° zurückdrehen. "hover:
 * none" + "pointer: coarse" grenzt gezielt auf Touch-Geräte ohne Maus
 * ein (Telefone/Tablets), damit ein quer/breit gezogenes
 * Desktop-Browserfenster davon unberührt bleibt. */
@media screen and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* ============================================================
   UI-Upgrade v2 — Mockup-Alignment (Prioritäten 1–8)
   ============================================================ */

/* --- Typography refinements --- */
.calorie-summary__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* --- Macro progress rows (Screen 2) --- */
.macro-rows {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}
.macro-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "icon top"
    "icon track";
  column-gap: 0.55rem;
  row-gap: 0.28rem;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.macro-row__top {
  grid-area: top;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.macro-row__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: icon;
  flex-shrink: 0;
  overflow: hidden;
}
.macro-row__icon svg { width: 1rem; height: 1rem; }
.macro-row__icon--kcal { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.macro-row__icon--protein { background: color-mix(in srgb, var(--color-protein) 14%, transparent); color: var(--color-protein); }
.macro-row__icon--carbs { background: color-mix(in srgb, var(--color-carbs) 14%, transparent); color: var(--color-carbs); }
.macro-row__icon--fat { background: color-mix(in srgb, var(--color-fat) 14%, transparent); color: var(--color-fat); }
.macro-row__icon--water { background: color-mix(in srgb, var(--color-water) 14%, transparent); color: var(--color-water); }
.macro-row__icon--steps { background: color-mix(in srgb, var(--color-steps) 14%, transparent); color: var(--color-steps); }
.macro-row__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.macro-row__values {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  max-width: 9.5rem;
}
.macro-row__track {
  grid-area: track;
  min-width: 0;
  height: 7px;
  background: var(--color-bg);
  border-radius: 999px;
  overflow: hidden;
}
.macro-row__fill {
  height: 100%;
  border-radius: 999px;
  transition: width var(--duration-slow) var(--ease-out);
  min-width: 0;
}
.macro-row__fill--kcal { background: var(--color-primary); }
.macro-row__fill--protein { background: var(--color-protein); }
.macro-row__fill--carbs { background: var(--color-carbs); }
.macro-row__fill--fat { background: var(--color-fat); }
.macro-row__fill--water { background: var(--color-water); }
.macro-row__fill--steps { background: var(--color-steps); }

/* --- Enhanced celebration modals (Screens 3 + 6) --- */
.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(16, 24, 40, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.celebration-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.celebration-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  max-width: 320px;
  width: 100%;
  text-align: center;
  position: relative;
  transform: scale(0.92) translateY(12px);
  transition: transform var(--duration-base) var(--ease-spring);
}
.celebration-overlay.is-visible .celebration-modal {
  transform: scale(1) translateY(0);
}
.celebration-modal__trophy,
.celebration-modal__mascot {
  width: 88px;
  height: 88px;
  margin: 0 auto 0.85rem;
  display: block;
}
.celebration-modal__banner {
  display: inline-block;
  background: linear-gradient(135deg, #34c785, #1c6e4a);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.65rem;
}
.celebration-modal__title {
  font-size: 1.25rem;
  font-weight: 750;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}
.celebration-modal__text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.celebration-modal__xp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.15rem;
}
.celebration-modal__btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-spring);
}
.celebration-modal__btn:hover { background: var(--color-primary-dark); }
.celebration-modal__btn:active { transform: scale(0.97); }
.celebration-modal__milestones {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.75rem 0 1rem;
  flex-wrap: wrap;
}
.celebration-modal__milestone {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
}
.celebration-modal__milestone.is-done {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* --- Weight page hero (Screen 9) --- */
.weight-hero {
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}
.weight-hero__value {
  font-size: 2.4rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text);
}
.weight-hero__unit {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 0.15rem;
}
.weight-hero__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}
.weight-hero__trend.is-up { color: var(--color-danger); }
.weight-period-tabs {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  margin: 1rem 0 0.75rem;
  flex-wrap: wrap;
}
.weight-period-tabs button {
  border: 0;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.weight-period-tabs button.is-active {
  background: var(--color-primary);
  color: #fff;
}

/* --- Food swipe cards (Screen 4) --- */

/* Food-Suggestion Cards — Mockup Screen 4 Alignment */

/* Legacy Screen-4-Regeln deaktiviert — Layout steuert .food-suggestion__head */
.food-suggestion__actions { display: none; }


.food-card-scroller {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0.15rem 0.75rem;
  margin: 0 -0.25rem;
}
.food-card-scroller::-webkit-scrollbar { display: none; }
.food-card {
  flex: 0 0 72%;
  max-width: 260px;
  scroll-snap-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.food-card__img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
  background: var(--color-bg);
}
.food-card__body {
  padding: 0.9rem 1rem 1rem;
  text-align: center;
}
.food-card__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
}
.food-card__kcal {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 0.85rem;
}
.food-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.food-card__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.food-card__btn:active { transform: scale(0.92); }
.food-card__btn--minus {
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.food-card__btn--plus {
  background: var(--color-primary);
  color: #fff;
}

/* --- Surrounding macro mini-rings (Screen 7 detail) --- */
.ring-detail-macros {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.ring-detail-macro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.ring-detail-macro__ring {
  --progress: 0;
  --ring-color: var(--color-primary);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--progress) * 1%), var(--color-border) 0);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring-detail-macro__ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--color-surface);
}
.ring-detail-macro__val {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
}
.ring-detail-macro.is-active .ring-detail-macro__ring {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-color, var(--color-primary)) 28%, transparent);
}
.ring-detail-macro__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* --- Header refinements --- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  gap: 0.75rem;
}
.page-header h1 {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.page-header__action {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}
.page-header__action:hover { background: var(--color-primary-soft); }

/* --- Streak card polish --- */
.streak-card {
  border-radius: var(--radius-lg);
}

/* --- General button polish --- */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 0.8rem 1.25rem;
  font-weight: 650;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .celebration-overlay, .celebration-modal,
  .macro-row__fill, .food-card__btn,
  .bottom-nav a .icon {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   UI-Upgrade v4 — Rang 1–6 (Konsistenz, Empty States, Mehr, …)
   ============================================================ */

/* --- Empty States --- */
.empty-state {
  text-align: center;
  padding: 1.75rem 1.25rem;
}
.empty-state__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.65rem;
  display: block;
}
.empty-state__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}
.empty-state__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  line-height: 1.45;
}
.empty-state__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 1.2rem;
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 650;
  font-size: 0.9rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.empty-state__action:hover { background: var(--color-primary-dark); color: #fff; }

/* --- Mehr-Hub --- */
.more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 400px) {
  .more-grid { grid-template-columns: 1fr 1fr; }
}
.more-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
  padding: 1.15rem 1.2rem;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.more-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.more-tile:active { transform: scale(0.98); }
.more-tile__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
  font-size: 1.25rem;
}
.more-tile__icon .icon { width: 1.25rem; height: 1.25rem; }
.more-tile__label {
  font-weight: 700;
  font-size: 0.95rem;
}
.more-tile__hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* --- Auth pages consistency --- */
body:not(.has-nav) .app-main,
.app-main:not(.has-nav) {
  max-width: 420px;
}
.auth-card {
  margin-top: 1.5rem;
}
.auth-card h1 {
  text-align: center;
  margin-bottom: 1.25rem;
}

/* --- Calorie detail full view (Screen 7) --- */
.ring-detail-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.ring-detail-hero__value {
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ring-detail-hero__unit {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.ring-detail-hero__pct {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
}
.ring-detail-swipe-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0.75rem 0 0;
}

/* --- Meal photo results as food cards --- */
.meal-photo-items.food-card-scroller {
  list-style: none;
  padding: 0.25rem 0.15rem 0.75rem;
  margin: 0.5rem -0.25rem 0;
}
.meal-photo-items .food-card {
  position: relative;
}
.meal-photo-items .food-card__check {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--color-primary);
}
.meal-photo-items .food-card__fields {
  display: none;
}
.meal-photo-items .food-card.is-expanded .food-card__fields {
  display: block;
  padding: 0 1rem 1rem;
}
.meal-photo-items .food-card__fields label {
  font-size: 0.75rem;
  margin-top: 0.4rem;
}
.meal-photo-items .food-card__fields input {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
}

/* --- Page header consistency --- */
.page > h1 {
  font-size: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.25rem 0 1rem;
}

/* --- Gamification card polish --- */
.gamification-card,
.level-badge {
  border-radius: var(--radius-lg);
}


/* --- Gamification integration --- */
.app-header {
  gap: 0.75rem;
}
.header-level {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  background: var(--color-primary-soft);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.header-level__num {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-level__num--gold {
  background: linear-gradient(135deg, #e8a417, #c9922f);
}
.header-level__bar {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 15%, var(--color-bg));
  overflow: hidden;
}
.header-level__fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
}

.xp-daily {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.xp-daily__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.xp-daily__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.xp-daily__value {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.progress-bar__fill--xp {
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #ffd666));
}

.challenge-strip {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.challenge-strip__title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
}
.challenge-chip {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.challenge-chip:hover {
  box-shadow: var(--shadow-sm);
}
.challenge-chip:active { transform: scale(0.99); }
.challenge-chip__title {
  font-size: 0.875rem;
  font-weight: 700;
}
.challenge-chip__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.challenge-chip__bar {
  margin-top: 0.25rem;
  height: 6px;
}
.challenge-chip--block {
  margin-bottom: 0.45rem;
}
.challenge-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gamification-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.level-badge--hero {
  align-items: center;
}

.gamification-card {
  border-radius: var(--radius-lg);
}




/* --- Fortschritt page — polished mockup design --- */
.page--fortschritt {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 1.25rem;
}
.page--fortschritt > h1 { display: none; }

/* Hero */
.fp-hero {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.1rem 1.05rem;
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--color-primary) 9%, #fff) 0%, var(--color-surface) 48%, var(--color-surface) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.fp-hero__deco {
  position: absolute;
  right: -12px;
  top: -8px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.fp-hero__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}
.fp-hero__sprout {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.fp-hero__eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-primary) 75%, var(--color-text));
}
.fp-hero__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.fp-hero__ring {
  --progress: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--color-primary) calc(var(--progress) * 1%),
    color-mix(in srgb, var(--color-primary) 12%, #e8eee9) 0
  );
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.fp-hero__ring::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.fp-hero__ring {
  position: relative;
}
.fp-hero__ring-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.fp-hero__level {
  font-size: 1.85rem;
  font-weight: 850;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.fp-hero__level-label {
  margin-top: 0.22rem;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.fp-hero__meta { flex: 1; min-width: 0; }
.fp-hero__rank {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  color: color-mix(in srgb, var(--color-primary) 35%, #143528);
  line-height: 1.15;
}
.fp-hero__motivate {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.fp-hero__bar-wrap { margin-bottom: 0.35rem; }
.fp-hero__bar {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 10%, #e9efea);
  overflow: hidden;
}
.fp-hero__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #8fe0a8));
}
.fp-hero__xp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.fp-hero__xp {
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.fp-hero__pct {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.fp-hero__remaining {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  color: var(--color-text-muted);
}
.fp-hero__reward {
  position: relative;
  z-index: 1;
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.fp-hero__nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.95rem;
}
.fp-hero__nav-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  background: rgba(255, 255, 255, 0.88);
  color: color-mix(in srgb, var(--color-primary) 40%, var(--color-text));
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.fp-hero__nav-btn:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  color: var(--color-primary);
  background: #fff;
}
.fp-hero__nav-btn:active { transform: scale(0.98); }
.fp-hero__nav-btn svg { flex: none; opacity: 0.9; }

/* Stats */
.fp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.fp-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 0.9rem 0.85rem;
  border-radius: 18px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(15, 40, 30, 0.04);
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}
.fp-stat:hover { box-shadow: 0 8px 20px rgba(15, 40, 30, 0.07); }
.fp-stat:active { transform: scale(0.99); }
.fp-stat__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.fp-stat__icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, #f3faf5);
}
.fp-stat__icon--star {
  color: #c7922a;
  background: color-mix(in srgb, #e8a417 16%, #fff8ea);
}
.fp-stat__label {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--color-text);
}
.fp-stat__value {
  font-size: 1.45rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: color-mix(in srgb, var(--color-primary) 25%, var(--color-text));
}
.fp-stat__of {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--color-text-muted);
}
.fp-stat__hint {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.fp-stat__bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 8%, #e9efea);
  overflow: hidden;
}
.fp-stat__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

/* Sections */
.fp-section {
  padding: 0.15rem 0.1rem 0.25rem;
}
.fp-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  padding: 0 0.15rem;
}
.fp-section__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.fp-section__link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.fp-section__link:hover { text-decoration: underline; }

/* Challenges */
.fp-challenge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.fp-challenge {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0.85rem;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 3px 12px rgba(15, 40, 30, 0.035);
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}
.fp-challenge:hover { box-shadow: 0 8px 18px rgba(15, 40, 30, 0.07); }
.fp-challenge:active { transform: scale(0.99); }
.fp-challenge__icon {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #0d3d28));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.fp-challenge__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.fp-challenge__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.fp-challenge__title {
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.fp-challenge__xp {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, #f2faf5);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.fp-challenge__desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.fp-challenge__progress-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.fp-challenge__bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 8%, #e9efea);
  overflow: hidden;
}
.fp-challenge__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, #8fe0a8));
}

/* History */
.fp-list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0.85rem 0.35rem;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.fp-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.fp-list__item:last-child { border-bottom: none; }
.fp-list__label {
  font-size: 0.875rem;
  font-weight: 650;
  flex: 1;
  min-width: 0;
}
.fp-list__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fp-list__xp {
  font-weight: 800;
  color: var(--color-primary);
}

.empty-state--compact {
  padding: 1.1rem 0.75rem 0.6rem;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}

@media (max-width: 380px) {
  .fp-hero__ring { width: 86px; height: 86px; }
  .fp-hero__ring::before { width: 68px; height: 68px; }
  .fp-hero__level { font-size: 1.55rem; }
  .fp-hero__rank { font-size: 1.15rem; }
  .fp-stats { gap: 0.55rem; }
  .fp-challenge__progress-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "text pct"
      "bar bar";
  }
  .fp-challenge__progress-text { grid-area: text; }
  .fp-challenge__progress-pct { grid-area: pct; }
  .fp-challenge__bar { grid-area: bar; }
}


/* Challenge icons (ChallengeIcons service) */
.challenge-card__header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.challenge-card__icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #0d3d28));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.challenge-card__title { flex: 1; min-width: 0; }
.challenge-detail__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 0.75rem;
  color: #fff;
  background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #0d3d28));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
/* Nested svg inside fp-challenge__icon already sized */
.fp-challenge__icon svg,
.challenge-card__icon svg,
.challenge-detail__icon svg {
  display: block;
}


/* Settings: Dashboard-Widget-Checkboxen */
.settings-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font-weight: 600;
  cursor: pointer;
}
.settings-check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-primary);
}


/* --- Dashboard layout zones, density, responsive grids --- */
.page--dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dash-zone {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dash-zone--status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
/* Kompakt: Streak + Level nebeneinander wenn beide da */
.density-compact .dash-zone--status,
.density-minimal .dash-zone--status {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.density-compact .dash-zone--status > .card,
.density-minimal .dash-zone--status > .card {
  margin: 0;
  min-width: 0;
}
.density-compact .streak-card__header,
.density-minimal .streak-card__header {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.density-compact .streak-badges,
.density-minimal .streak-badges {
  display: none;
}
.density-compact .streak-week-progress,
.density-minimal .streak-week-progress {
  display: none;
}
.density-compact .gamification-card .challenge-strip,
.density-minimal .gamification-card .challenge-strip {
  display: none;
}
.density-compact .gamification-card__link,
.density-minimal .gamification-card__link {
  font-size: 0.75rem;
}
.density-compact .level-badge__xp,
.density-minimal .level-badge__xp {
  display: none;
}
.density-minimal .dash-zone--engage .card h2 {
  font-size: 0.95rem;
}
.density-minimal .dash-zone--charts .card {
  padding: 0.75rem;
}
.density-minimal .fp-hero__motivate,
.density-minimal .streak-card__note,
.density-minimal .insight-list__disclaimer {
  display: none;
}
.density-compact .card,
.density-minimal .card {
  padding: 0.85rem 0.9rem;
}
.density-compact .page--dashboard,
.page--dashboard.density-compact {
  gap: 0.65rem;
}
.density-minimal .page--dashboard,
.page--dashboard.density-minimal {
  gap: 0.5rem;
}

.dash-zone--charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.dash-zone--charts > .card {
  margin: 0;
}

.settings-density {
  border: none;
  margin: 0 0 0.85rem;
  padding: 0;
}
.settings-density legend {
  font-weight: 750;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}
.settings-widgets-label {
  font-weight: 750;
  font-size: 0.9rem;
  margin: 0.5rem 0 0.25rem;
}

@media (min-width: 640px) {
  .dash-zone--status {
    grid-template-columns: 1fr 1fr;
  }
  .dash-zone--engage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .dash-zone--engage > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .dash-zone--charts {
    grid-template-columns: 1fr 1fr;
  }
  .dash-zone--charts > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .density-comfortable .dash-zone--status {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .density-compact .dash-zone--status,
  .density-minimal .dash-zone--status {
    grid-template-columns: 1fr;
  }
}


/* =====================================================================
   Mobile Touch-Optimierung
   ===================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Weniger 300ms-Tap-Delay, kein Double-Tap-Zoom auf Controls */
a, button, .btn, input, select, textarea, label,
[role="button"], [data-macro-detail], [data-badge-detail],
.bottom-nav a, .period-toggle__pill,
.challenge-chip, .fp-challenge, .fp-stat, .settings-check,
.entry-list__item, .streak-badge, .macro-bar, .tabs__tab {
  touch-action: manipulation;
}

/* Primäre Buttons: mind. 44×44 px */
.btn {
  min-height: var(--touch-min);
  padding: 0.7rem 1.1rem;
}
.btn--small {
  min-height: var(--touch-min-sm);
  padding: 0.45rem 0.75rem;
}
.btn--icon {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0.5rem;
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Formulare: 16px verhindert iOS-Zoom beim Fokussieren */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px;
    min-height: var(--touch-min);
    padding: 0.65rem 0.75rem;
  }
  select {
    padding-right: 2rem;
  }
  .checkbox-row {
    min-height: var(--touch-min);
    gap: 0.65rem;
  }
  .checkbox-row input[type="checkbox"],
  .checkbox-row input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }
}

/* Bottom-Navigation: größere Trefferflächen */
.bottom-nav a {
  min-height: var(--nav-height);
  padding: 0.4rem 0.15rem;
  gap: 4px;
}
.bottom-nav a .icon {
  width: 1.5rem;
  height: 1.5rem;
}
.bottom-nav a:active {
  color: var(--color-primary);
}
.bottom-nav a:active .icon {
  transform: scale(1.06);
}

/* FAB über Home-Indicator */
/* Period-Toggle, Tabs, Chips */
.period-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.period-toggle__pill {
  min-height: var(--touch-min-sm);
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tabs__tab {
  min-height: var(--touch-min);
  padding: 0.55rem 0.85rem;
}

/* Karten & Listen: aktives Feedback statt nur Hover */
.card a:active,
.challenge-chip:active,
.fp-challenge:active,
.fp-stat:active,
.stat-card--link:active,
.entry-list__item:active {
  opacity: 0.92;
}
@media (hover: hover) and (pointer: fine) {
  .card a:active,
  .challenge-chip:active,
  .fp-challenge:active {
    opacity: 1;
  }
}

/* Streak-Badges & Makro-Zeilen antippbar */
.streak-badge {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.streak-badge:focus,
.streak-badge:focus-visible,
.streak-badge:focus-within {
  outline: none;
  box-shadow: none;
}
.macro-bar {
  min-height: var(--touch-min);
  padding: 0.45rem 0;
  cursor: pointer;
}

/* Settings-Checkboxen */
.settings-check {
  min-height: var(--touch-min);
  padding: 0.55rem 0;
  gap: 0.75rem;
}
.settings-check input {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

/* Fortschritt-Pills & Challenge-Zeilen */
.fp-hero__nav-btn {
  min-height: var(--touch-min);
}
.fp-challenge {
  padding: 0.95rem 0.9rem;
}
.challenge-chip {
  padding: 0.75rem 0.85rem;
}

/* Swipe-Listen: mehr Platz für Löschen */
.entry-list__swipe-delete-btn {
  min-width: 4.5rem;
  min-height: 100%;
  padding: 0.75rem;
}

/* Sticky-Header / Content Abstand zum Notch */
@supports (padding: max(0px)) {
  .app-header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }
  .app-main {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Gestapelte Aktionen: mehr Abstand gegen Fehltipps */
@media (max-width: 640px) {
  .btn + .btn,
  form .btn--block + .btn--block {
    margin-top: 0.65rem;
  }
  .form-actions,
  .btn-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .form-actions .btn,
  .btn-row .btn {
    width: 100%;
  }
}

/* Fokus sichtbar auch nach Touch (Accessibility) */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* --- Swipe-Gesten --- */
.swipe-date,
.swipe-period,
[data-date-swipe],
[data-period-swipe] {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.swipe-date.is-swiping,
.swipe-period.is-swiping,
.entry-list__item.is-swiping {
  cursor: grabbing;
}
.date-nav.swipe-date {
  position: relative;
}
/* Dezenter Hinweis, dass horizontal gewischt werden kann */
@media (max-width: 560px) {
  .date-nav.swipe-date::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    width: 2rem;
    height: 3px;
    margin-left: -1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
    pointer-events: none;
  }
}
.toast {
  touch-action: pan-y;
  will-change: transform, opacity;
}
.entry-list__item {
  touch-action: pan-y;
}
.calorie-summary__ring,
[data-ring-swipe] {
  touch-action: pan-x pan-y;
}


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

@media (min-width: 641px) {
  /* Desktop behält Radial; Hub nur mobil */
}


/* --- Ernährung /food — Design analog Fortschritt --- */
.page--food {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 1.25rem;
}
.page--food > h1 { display: none; }

.fi-hero {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.1rem 1.15rem;
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--color-primary) 9%, #fff) 0%, var(--color-surface) 48%, var(--color-surface) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.fi-hero__deco {
  position: absolute;
  right: -12px;
  top: -8px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.fi-hero__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
}
.fi-hero__icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.fi-hero__eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-primary) 75%, var(--color-text));
}
.fi-hero__date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
}
.fi-hero__nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  background: rgba(255,255,255,0.88);
  color: var(--color-primary);
  text-decoration: none;
  flex: none;
}
.fi-hero__nav-btn:active { transform: scale(0.96); }
.fi-hero__date-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.fi-hero__weekday {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--color-text-muted);
}
.fi-hero__date-value {
  font-size: 1.2rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--color-primary) 30%, var(--color-text));
}
.fi-hero__kcal {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  position: relative;
  z-index: 1;
}
.fi-hero__kcal-value {
  font-size: 2.35rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fi-hero__kcal-unit {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.fi-hero__summary {
  margin: 0.35rem 0 0.9rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}
.fi-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 750;
  font-size: 0.92rem;
  text-decoration: none;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.fi-hero__cta:active { transform: scale(0.98); }

.fi-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.fi-stat {
  padding: 0.75rem 0.65rem;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  box-shadow: 0 3px 12px rgba(15, 40, 30, 0.035);
  text-align: center;
}
.fi-stat__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.fi-stat__value {
  font-size: 1.15rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-primary) 20%, var(--color-text));
}
.fi-stat__unit {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--color-text-muted);
  margin-left: 0.1rem;
}

.fi-empty {
  padding: 1.35rem 1rem;
  border-radius: 18px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.fi-empty__title {
  margin: 0.35rem 0 0;
  font-weight: 800;
  font-size: 1.05rem;
}
.fi-empty__text {
  margin: 0 0 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.fi-meals {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fi-meal {
  margin: 0;
  padding: 0.9rem 0.95rem 0.75rem;
  border-radius: 18px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: 0 4px 14px rgba(15, 40, 30, 0.04);
}
.fi-meal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}
.fi-meal__title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.fi-meal__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #0d3d28));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.fi-meal__titles { min-width: 0; }
.fi-meal__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.fi-meal__kcal {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.fi-meal__add {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  text-decoration: none;
}
.fi-meal__add:active { transform: scale(0.96); }
.fi-meal__empty {
  margin: 0;
  padding: 0.35rem 0 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.fi-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fi-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.15rem;
}
.fi-entry__main {
  flex: 1;
  min-width: 0;
}
.fi-entry__name {
  display: block;
  font-weight: 750;
  font-size: 0.92rem;
  line-height: 1.25;
}
.fi-entry__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.fi-entry__actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: none;
}
.fi-entry__actions form { margin: 0; }
.fi-entry__btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: none;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.fi-entry__btn--danger {
  background: color-mix(in srgb, var(--color-danger, #c0392b) 8%, transparent);
  color: var(--color-danger, #c0392b);
}
.fi-entry__btn:active { transform: scale(0.95); }

@media (min-width: 640px) {
  .fi-stats { gap: 0.75rem; }
  .fi-hero__kcal-value { font-size: 2.6rem; }
}


/* =====================================================================
   Designsystem — gemeinsame Bausteine (alle Seiten)
   Spezialisierungen: .fp-* (Fortschritt), .fi-* (Ernährung)
   ===================================================================== */

.page--ds {
  display: flex;
  flex-direction: column;
  gap: var(--space-page);
  padding-bottom: 1.25rem;
}
.page--ds > h1:first-child { display: none; }

/* Page Hero */
.ds-hero {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.1rem 1.15rem;
  border-radius: var(--radius-hero);
  background: var(--hero-bg);
  border: 1px solid var(--hero-border);
  box-shadow: var(--shadow-hero);
}
.ds-hero__deco {
  position: absolute;
  right: -12px;
  top: -8px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.ds-hero__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  position: relative;
  z-index: 1;
}
.ds-hero__icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  flex: none;
}
.ds-hero__icon svg { display: block; }
.ds-hero__eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-primary) 75%, var(--color-text));
}
.ds-hero__title {
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: var(--font-hero);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--color-primary) 28%, var(--color-text));
}
.ds-hero__lead {
  margin: 0.35rem 0 0;
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.ds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
  position: relative;
  z-index: 1;
}
.ds-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  background: rgba(255, 255, 255, 0.88);
  color: color-mix(in srgb, var(--color-primary) 40%, var(--color-text));
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.ds-hero__pill:active { transform: scale(0.98); }
.ds-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.65rem;
  padding: 0.55rem 1.1rem;
  margin-top: 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 750;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.ds-hero__cta:active { transform: scale(0.98); }

/* Section */
.ds-section { padding: 0.1rem 0; }
.ds-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  padding: 0 0.1rem;
}
.ds-section__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.ds-section__link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

/* Stat grid */
.ds-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
.ds-stats--3 { grid-template-columns: repeat(3, 1fr); }
.ds-stat {
  padding: 0.85rem 0.8rem;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  box-shadow: var(--shadow-card);
}
.ds-stat__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.ds-stat__value {
  font-size: var(--font-stat);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--color-primary) 22%, var(--color-text));
}
.ds-stat__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* List rows */
.ds-list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0.85rem;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: var(--shadow-card);
}
.ds-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  text-decoration: none;
  color: inherit;
}
.ds-list__item:last-child { border-bottom: none; }
.ds-list__item:active { opacity: 0.92; }
.ds-list__label { font-weight: 650; font-size: 0.9rem; flex: 1; min-width: 0; }
.ds-list__meta { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }
.ds-list__chevron { color: var(--color-text-muted); flex: none; }

/* Empty */
.ds-empty {
  padding: 1.35rem 1rem;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  box-shadow: var(--shadow-card);
}
.ds-empty__title { margin: 0.25rem 0 0; font-weight: 800; font-size: 1.02rem; }
.ds-empty__text { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; }

/* Align Fortschritt/Food heroes to same token surface */
.fp-hero,
.fi-hero {
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-hero);
}
.page--fortschritt,
.page--food {
  gap: var(--space-page);
}

/* Form pages: slightly softer cards */
.page--ds .card h2 {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .ds-stats--3 { grid-template-columns: repeat(3, 1fr); }
  .ds-hero__title { font-size: 1.5rem; }
}





.product-image-fields {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface));
}
.product-image-fields legend {
  padding: 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 750;
}
.product-image-preview img {
  display: block;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  max-width: 120px;
  height: auto;
}
.product-image-fields input[type="file"] {
  width: 100%;
  font-size: 0.9rem;
}


/* --- Produkte (/settings/products) — Designsystem --- */
.page--products .ds-empty__icon {
  color: var(--color-primary);
  opacity: 0.85;
  margin-bottom: 0.15rem;
}
.pa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.pa-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.85rem;
  border-radius: var(--radius-card, 18px);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: var(--shadow-card, 0 4px 14px rgba(15, 40, 30, 0.04));
}
.pa-card__media {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.pa-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--color-surface);
}
.pa-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-primary) 55%, var(--color-text-muted));
}
.pa-card__body {
  flex: 1;
  min-width: 0;
}
.pa-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pa-card__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.pa-card__badge {
  font-size: 0.65rem;
  font-weight: 750;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text));
  white-space: nowrap;
}
.pa-card__brand {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.pa-card__meta {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  font-variant-numeric: tabular-nums;
}
.pa-card__ean {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}
.pa-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: none;
}
.pa-card__actions form { margin: 0; }
.pa-card__btn {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: none;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.pa-card__btn--danger {
  background: color-mix(in srgb, var(--color-danger, #c0392b) 10%, transparent);
  color: var(--color-danger, #c0392b);
}
.pa-card__btn:active { transform: scale(0.95); }

@media (min-width: 640px) {
  .pa-card { padding: 0.95rem 1rem; }
  .pa-card__actions { flex-direction: row; }
}


/* --- Withings (/withings) — Designsystem --- */
.page--withings .ds-empty__icon { color: var(--color-primary); opacity: 0.85; }
.wi-hero-sync { display: inline; margin: 0; }
.wi-hero-sync .ds-hero__cta {
  margin-top: 0;
  border: none;
  font: inherit;
  cursor: pointer;
}
.wi-status--ok {
  border-color: color-mix(in srgb, var(--color-success-text, #067647) 25%, var(--color-border));
  color: var(--color-success-text, #067647);
  background: color-mix(in srgb, var(--color-success-bg, #ecfdf3) 80%, #fff);
}
.wi-latest {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-card, 18px);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: var(--shadow-card, 0 4px 14px rgba(15, 40, 30, 0.04));
  text-align: center;
}
.wi-latest__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.wi-latest__value {
  font-size: 2.2rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wi-latest__unit {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-left: 0.15rem;
}
.wi-latest__when {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.wi-stats {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) {
  .wi-stats { grid-template-columns: repeat(3, 1fr); }
}
.wi-chart-card { padding: 0.75rem; }
.wi-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wi-history__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: var(--shadow-card, 0 4px 14px rgba(15, 40, 30, 0.04));
}
.wi-history__when {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wi-history__date { font-weight: 750; font-size: 0.9rem; }
.wi-history__time { font-size: 0.75rem; color: var(--color-text-muted); }
.wi-history__values { text-align: right; }
.wi-history__weight {
  display: block;
  font-size: 1.05rem;
  font-weight: 850;
  color: color-mix(in srgb, var(--color-primary) 25%, var(--color-text));
  font-variant-numeric: tabular-nums;
}
.wi-history__fat {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}


/* --- Prio 1: Auth + Tabs + Product preview --- */
.auth-page--ds {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent),
    var(--color-bg);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  color: var(--color-primary);
}
.auth-brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-primary) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.auth-brand__name {
  font-weight: 850;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.auth-page--ds .auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  box-shadow: var(--shadow-hero, 0 12px 40px rgba(15, 40, 30, 0.08));
}
.auth-card__links {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  text-align: center;
}

.tabs--segmented {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-border) 45%, var(--color-surface));
  margin-bottom: 0.85rem;
}
.tabs--segmented .tabs__tab {
  flex: 1;
  margin: 0;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.65rem 0.4rem;
  min-height: 2.6rem;
}
.tabs--segmented .tabs__tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 4px rgba(15, 40, 30, 0.08);
}

.product-picked-preview:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.85rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
.product-picked-preview[hidden] { display: none !important; }
.product-picked-preview img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
}
.product-picked-preview__label {
  font-weight: 750;
  font-size: 0.9rem;
  line-height: 1.3;
}



.ds-empty--compact {
  padding: 1rem 0.85rem;
  text-align: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border: 1px dashed color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}
.ds-empty--compact .ds-empty__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 800;
}
.ds-empty--compact .ds-empty__text {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.btn--sm {
  display: inline-flex;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.challenge-detail__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}




/* --- Auth Welcome Login — mobil optimiert, immer hell --- */
.auth-page--welcome {
  --aw-bg: #f4f7f5;
  --aw-surface: #ffffff;
  --aw-text: #14231c;
  --aw-muted: #5c6b64;
  --aw-primary: #1c6e4a;
  --aw-primary-soft: #2f9e6a;
  --aw-primary-btn: #22a06b;
  --aw-field-bg: #ffffff;
  --aw-field-border: #e6eee9;
  --aw-glow: rgba(34, 160, 107, 0.18);
  --aw-pad-x: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding:
    max(0.5rem, env(safe-area-inset-top, 0px))
    var(--aw-pad-x)
    max(1rem, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(ellipse 100% 42% at 50% 6%, rgba(47, 158, 106, 0.13), transparent 70%),
    var(--aw-bg);
  color: var(--aw-text);
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}
.auth-welcome {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Formular bei Tastatur möglichst erreichbar halten */
  justify-content: flex-start;
  gap: 0;
}
.auth-welcome__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.15rem;
  max-width: 100%;
}
.auth-welcome__logo {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e8f6ef;
  color: var(--aw-primary);
  flex: none;
}
.auth-welcome__logo svg { width: 20px; height: 20px; }
.auth-welcome__name {
  font-weight: 850;
  font-size: clamp(1rem, 4.2vw, 1.15rem);
  letter-spacing: -0.02em;
  color: var(--aw-text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(70vw, 16rem);
}
.auth-welcome__hero {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  margin: 0.15rem 0 0;
  /* Skaliert mit Viewport-Höhe, nicht nur Breite */
  min-height: clamp(120px, 28vh, 200px);
}
.auth-welcome__glow {
  position: absolute;
  inset: 12% 14% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--aw-glow), transparent 72%);
  pointer-events: none;
}
.auth-welcome__mascot {
  position: relative;
  width: clamp(120px, min(42vw, 34vh), 200px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(28, 110, 74, 0.15));
  animation: auth-mascot-bob 3.6s ease-in-out infinite;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .auth-welcome__mascot { animation: none; }
}
@keyframes auth-mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.auth-welcome__copy {
  text-align: center;
  margin: 0.15rem 0 0.85rem;
  padding: 0 0.15rem;
}
.auth-welcome__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.3rem, 5.5vw, 1.55rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--aw-text);
}
.auth-welcome__lead {
  margin: 0 auto;
  font-size: clamp(0.85rem, 3.6vw, 0.94rem);
  line-height: 1.4;
  color: var(--aw-muted);
  max-width: 20.5rem;
}
.auth-welcome__alert {
  width: 100%;
  margin-bottom: 0.65rem;
  font-size: 0.88rem;
}
.auth-welcome__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.auth-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 3.15rem; /* ≥ 44px Touch */
  padding: 0.1rem 0.85rem;
  border-radius: 16px;
  background: var(--aw-field-bg);
  border: 1px solid var(--aw-field-border);
  box-shadow: 0 2px 8px rgba(20, 35, 28, 0.04);
  touch-action: manipulation;
}
.auth-field:focus-within {
  border-color: color-mix(in srgb, var(--aw-primary) 45%, var(--aw-field-border));
  box-shadow: 0 0 0 3px rgba(28, 110, 74, 0.12);
}
.auth-field__icon {
  flex: none;
  color: #8a9a92;
  display: grid;
  place-items: center;
  width: 1.25rem;
}
/* 16px verhindert iOS-Zoom beim Fokussieren */
.auth-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.75rem 0 !important;
  margin: 0 !important;
  font: inherit;
  font-size: 16px !important;
  line-height: 1.25;
  color: var(--aw-text) !important;
  -webkit-text-fill-color: var(--aw-text);
  caret-color: var(--aw-primary);
  outline: none;
  /* iOS: keine runden System-Defaults */
  -webkit-appearance: none;
  appearance: none;
}
.auth-field input::placeholder {
  color: #8a9a92 !important;
  opacity: 1;
  -webkit-text-fill-color: #8a9a92;
}
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--aw-text);
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-field__toggle {
  flex: none;
  border: 0;
  background: transparent;
  color: #8a9a92;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.35rem;
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
.auth-field__toggle:hover,
.auth-field__toggle:focus-visible {
  color: var(--aw-primary);
  outline: none;
}
.auth-welcome__remember {
  margin: 0.05rem 0 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--aw-muted);
  touch-action: manipulation;
}
.auth-welcome__remember input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--aw-primary);
  flex: none;
}
.auth-welcome__forgot {
  margin: -0.15rem 0 0;
  text-align: right;
  font-size: 0.9rem;
}
.auth-welcome__forgot a {
  color: var(--aw-primary-soft);
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.25rem 0;
  touch-action: manipulation;
}
.auth-welcome__submit {
  margin-top: 0.2rem;
  min-height: 3.25rem !important;
  border-radius: 16px !important;
  border: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 750 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--aw-primary-btn) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(34, 160, 107, 0.28) !important;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.auth-welcome__submit:active {
  transform: scale(0.985);
}
.auth-welcome__register {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--aw-muted);
  line-height: 1.4;
}
.auth-welcome__register a {
  color: var(--aw-primary);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  touch-action: manipulation;
}
.auth-welcome__secure {
  margin: 0.85rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--aw-primary) 40%, var(--aw-muted));
  text-align: center;
  padding: 0 0.25rem;
}

/* Sehr kleine / kurze Screens (iPhone SE, Landscape-Tastatur) */
@media (max-height: 700px) {
  .auth-welcome__hero {
    min-height: clamp(88px, 18vh, 140px);
    margin: 0;
  }
  .auth-welcome__mascot {
    width: clamp(88px, 22vh, 140px);
  }
  .auth-welcome__copy {
    margin: 0.1rem 0 0.65rem;
  }
  .auth-welcome__title {
    font-size: 1.25rem;
  }
  .auth-welcome__lead {
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .auth-welcome__form { gap: 0.5rem; }
  .auth-field { min-height: 3rem; border-radius: 14px; }
  .auth-welcome__submit { min-height: 3rem !important; }
  .auth-welcome__secure { margin-top: 0.55rem; }
}

@media (max-height: 560px) {
  .auth-welcome__hero { min-height: 72px; }
  .auth-welcome__mascot { width: 72px; animation: none; }
  .auth-welcome__brand { margin-bottom: 0; }
  .auth-welcome__copy { margin-bottom: 0.45rem; }
  .auth-welcome__lead { display: none; }
}

/* Breite Phones */
@media (max-width: 360px) {
  .auth-page--welcome {
    --aw-pad-x: max(0.85rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  .auth-welcome__title { font-size: 1.25rem; }
}

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

html:has(.auth-page--welcome),
body:has(.auth-page--welcome) {
  background: #f4f7f5 !important;
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
.app-main:not(.has-nav):has(.auth-page--welcome) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100%;
  background: #f4f7f5 !important;
  min-height: 100dvh;
}
.auth-page.auth-page--welcome {
  margin: 0;
  box-sizing: border-box;
}


/* Maskottchen-Sticker (PNG) */
img.mascot--sticker {
  display: block;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 8px 18px rgba(28, 110, 74, 0.14));
}
img.mascot--sticker.mascot--inline {
  display: inline-block;
  vertical-align: middle;
}


/* Fortschritt-Hero: Maskottchen neben Level-Ring */
.fp-hero__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.fp-hero__mascot {
  flex: none;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin-left: auto;
}
.fp-hero__mascot-img,
.fp-hero__mascot img.mascot {
  width: 104px !important;
  height: auto !important;
  max-width: 104px;
}
@media (max-width: 400px) {
  .fp-hero__mascot { width: 84px; height: 84px; }
  .fp-hero__mascot-img,
  .fp-hero__mascot img.mascot { width: 84px !important; max-width: 84px; }
}

/* Empty States mit Sticker */
.empty-state--mascot,
.fi-empty.empty-state--mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1.35rem 1rem 1.5rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface, #fff) 92%, var(--color-primary) 8%);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.empty-state__mascot,
.empty-state--mascot img.mascot,
.fi-empty img.mascot {
  margin: 0 auto 0.25rem;
}
.empty-state__title,
.fi-empty__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.empty-state__text,
.fi-empty__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  max-width: 22rem;
}
.empty-state__cta { margin-top: 0.55rem; }


/* Belohnungs-Roadmap */
.rewards-roadmap__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: start;
}
.rewards-roadmap__level {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--color-primary);
  padding-top: 0.1rem;
}
.rewards-roadmap__item.is-done .fp-list__label {
  color: var(--color-text-muted);
}
.rewards-roadmap__item.is-done .rewards-roadmap__level {
  opacity: 0.75;
}


/* Streak-Reward-Grafiken */
.streak-badge__shape--art {
  width: 44px;
  height: 44px;
  position: relative;
}
.streak-badge__art {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.streak-badge.is-locked .streak-badge__art {
  opacity: 0.42;
  filter: grayscale(0.85) drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.streak-badge.is-achieved .streak-badge__art {
  opacity: 1;
}
.streak-badge__lock {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.15);
  pointer-events: none;
}
.streak-badges {
  gap: 0.35rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.streak-badges::-webkit-scrollbar { display: none; }
.streak-badge { min-width: 48px; }


/* Streak-Karte: nie breiter als andere Dashboard-Karten */
.page--dashboard,
.dash-zone,
.dash-zone--status {
  min-width: 0;
  max-width: 100%;
}
.dash-zone--status > .card,
.streak-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.streak-card {
  overflow: hidden;
}
.streak-badges {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.65rem;
  padding: 0.2rem 0 0.15rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  box-sizing: border-box;
}
.streak-badge {
  flex: 0 0 auto;
  min-width: 0;
  width: 3rem;
  padding: 0.1rem;
}
.streak-badge__shape--art,
.streak-badge__shape {
  width: 2.5rem;
  height: 2.5rem;
}
.streak-badge__art {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.streak-badge__days {
  display: block;
  text-align: center;
  font-size: 0.58rem;
  line-height: 1.1;
}

@media (max-width: 400px) {
  .streak-badge { width: 2.65rem; }
  .streak-badge__shape--art,
  .streak-badge__shape,
  .streak-badge__art {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}


/* --- Flexbox-Optimierung Dashboard / Streak --- */
.page--dashboard,
.dash-zone,
.dash-zone--hero,
.dash-zone--status,
.dash-zone--engage,
.dash-zone--charts {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
.dash-zone--status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.dash-zone > .card,
.dash-zone--hero > .card,
.dash-zone--status > .card,
.dash-zone--charts > .card,
.dash-zone--engage > .card {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.streak-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.streak-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  min-width: 0;
}
.streak-card__header .streak-card__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 12rem;
  min-width: 0;
}
.streak-card__header .streak-card__start {
  flex: 1 1 12rem;
  min-width: 0;
}
.streak-today-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
}
.streak-card__note {
  min-width: 0;
}
.streak-risk-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.streak-risk-row .streak-risk-note {
  flex: 1 1 auto;
  min-width: 0;
}
.streak-week-progress {
  min-width: 0;
  width: 100%;
}
.streak-badges {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.15rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.streak-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

@media (min-width: 720px) {
  .dash-zone--charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}


/* === Grid-Layouts: Hero + Dashboard-Zonen === */
.fp-hero {
  display: grid;
  gap: 0.85rem;
}
.fp-hero__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ring meta mascot";
  align-items: center;
  gap: 0.75rem 0.85rem;
  min-width: 0;
}
.fp-hero__ring { grid-area: ring; }
.fp-hero__meta { grid-area: meta; min-width: 0; }
.fp-hero__mascot {
  grid-area: mascot;
  margin-left: 0;
  width: 96px;
  height: 96px;
}
.fp-hero__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.fp-hero__nav-btn {
  flex: unset;
  min-width: 0;
  width: 100%;
}
.fp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.fi-hero__date {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.5rem;
}
.fi-hero__date-meta { min-width: 0; }
.fi-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.dash-zone--status,
.dash-zone--charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.dash-zone--status > .card,
.dash-zone--charts > .card {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 520px) {
  .fp-hero__top {
    grid-template-columns: auto auto;
    grid-template-areas:
      "ring mascot"
      "meta meta";
    justify-content: space-between;
  }
  .fp-hero__nav {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 640px) {
  .dash-zone--status,
  .dash-zone--charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-zone--charts > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 400px) {
  .fp-hero__mascot { width: 80px; height: 80px; }
  .fi-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.calorie-summary {
  --ring-color: var(--color-primary);
}
.calorie-summary__ring[data-ring-key="protein"] { --ring-color: var(--color-protein); }
.calorie-summary__ring[data-ring-key="carbs"] { --ring-color: var(--color-carbs); }
.calorie-summary__ring[data-ring-key="fat"] { --ring-color: var(--color-fat); }
.calorie-summary__ring[data-ring-key="kcal"] { --ring-color: var(--color-primary); }


.portion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.portion-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}
.portion-chip.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  color: var(--color-primary-dark);
}


/* /food/add — Design analog Ernährung/Fortschritt */
.page--food-add {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.page--food-add .fa-hero {
  margin-bottom: 0.15rem;
}
.page--food-add .fa-suggest {
  padding: 0.85rem 0 0.7rem;
  border-radius: 20px;
}
.page--food-add .fa-suggest__head {
  padding: 0 1rem 0.15rem;
}
.page--food-add .food-suggestions__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-muted);
}
.page--food-add .fa-tabs {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
  border-radius: 16px;
  padding: 0.28rem;
}
.page--food-add .fa-tabs .tabs__tab.is-active {
  color: var(--color-primary-dark);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.page--food-add .fa-panel {
  border-radius: 20px;
  padding: 1rem 0.95rem 1.1rem;
}
.page--food-add .fa-panel > .muted {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.4;
}
.page--food-add .fa-scanner {
  border-radius: 18px;
  min-height: 220px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, #000);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.page--food-add .manual-barcode-entry {
  margin-top: 1rem;
  padding-top: 0.85rem;
}
.page--food-add .manual-barcode-entry label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.page--food-add #food-entry-form label {
  display: block;
  margin: 0.85rem 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--color-text-muted);
}
.page--food-add #food-entry-form label:first-of-type {
  margin-top: 0;
}
.page--food-add #food-entry-form input[type="text"],
.page--food-add #food-entry-form input[type="number"],
.page--food-add #food-entry-form select {
  width: 100%;
  min-height: 2.7rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-primary) 20%);
  background: var(--color-surface);
  padding: 0.55rem 0.75rem;
  font: inherit;
}
.page--food-add #food-entry-form input:focus,
.page--food-add #food-entry-form select:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-color: var(--color-primary);
}
.page--food-add .form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
}
.page--food-add .btn--primary.btn--block {
  margin-top: 1rem;
  min-height: 2.85rem;
  border-radius: 14px;
  font-weight: 750;
}
.page--food-add details {
  margin-top: 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, var(--color-bg) 65%, var(--color-surface));
}
.page--food-add details summary {
  font-weight: 750;
  font-size: 0.85rem;
  cursor: pointer;
}


/* Manuelles Erfassungsformular */
.page--food-add .ai-nutrition { margin: 0.35rem 0 0.85rem; }
.page--food-add .ai-nutrition .btn,
.page--food-add .fa-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.6rem;
  margin-top: 0.15rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.88rem;
}
.page--food-add .fa-qty {
  display: block;
  margin-top: 0.35rem;
}
.page--food-add .fa-qty__fields {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.65rem;
  align-items: flex-end;
}
.page--food-add .fa-qty__fields > div {
  flex: 1 1 0;
  min-width: 0;
}
.page--food-add .fa-qty__fields > div:last-child {
  flex: 0 0 42%;
  max-width: 11rem;
}
.page--food-add .fa-qty .portion-chips {
  grid-column: 1 / -1;
  margin-top: 0;
}
.page--food-add .fa-nutri {
  margin-top: 0.9rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  padding: 0.55rem 0.75rem 0.75rem;
}
.page--food-add .fa-nutri summary {
  font-weight: 750;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--color-primary) 40%, var(--color-text));
  list-style: none;
  cursor: pointer;
  padding: 0.25rem 0;
}
.page--food-add .fa-nutri summary::-webkit-details-marker { display: none; }
.page--food-add .fa-nutri summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.35rem;
  color: var(--color-primary);
}
.page--food-add .fa-nutri[open] summary::before { content: "▾"; }
.page--food-add .fa-nutri__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 0.65rem;
  margin-top: 0.45rem;
}
@media (min-width: 420px) {
  .page--food-add .fa-nutri__grid {
    grid-template-columns: 1fr 1fr;
  }
  .page--food-add .fa-nutri__grid label[for="kcal_per_100"],
  .page--food-add .fa-nutri__grid #kcal_per_100 {
    grid-column: 1 / -1;
  }
}
.page--food-add .product-picked-preview {
  margin: 0.85rem 0 0.35rem;
}
.page--food-add .checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0.25rem;
  font-size: 0.88rem;
}


.milestone-tile__icon {
  overflow: hidden;
}
.milestone-tile__sticker {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}
.milestone-tile__sticker.is-locked {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.55;
}
.milestone-detail__sticker {
  display: grid;
  place-items: center;
  margin: 0 0 0.85rem;
}
.milestone-detail__sticker img {
  width: min(220px, 70vw);
  height: auto;
}
.milestone-detail__sticker.is-locked img {
  filter: grayscale(1);
  opacity: 0.55;
}
.milestone-celebrate__sticker {
  width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.wi-loss { padding: 0.95rem 1rem; }
.wi-loss__title { margin: 0 0 0.65rem; font-size: 0.95rem; }
.wi-loss__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.wi-loss__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.wi-loss__stats strong { font-size: 1.05rem; }
.wi-loss__bar {
  margin-top: 0.75rem;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
  overflow: hidden;
}
.wi-loss__bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
}
.wi-loss__pct {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
@media (max-width: 420px) {
  .wi-loss__stats { grid-template-columns: 1fr 1fr; }
}

body.qc-open { overflow: hidden; }
.qc { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; }
.qc[hidden] { display: none !important; }
.qc__backdrop { position: absolute; inset: 0; background: rgba(16,24,40,0.42); }
.qc__sheet {
  position: relative;
  margin: 0 auto;
  width: min(28rem, 100%);
  background: var(--color-surface);
  border-radius: 22px 22px 0 0;
  padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 32px rgba(15,40,30,0.12);
}
.qc__preview { display: grid; place-items: center; margin-bottom: 0.35rem; }
.qc__preview img {
  width: 72px; height: 72px; object-fit: contain;
  border-radius: 14px; background: #fff; border: 1px solid var(--color-border);
}
.qc__title { margin: 0 0 0.2rem; font-size: 1.15rem; text-align: center; }
.qc__hint { margin: 0 0 0.85rem; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; }
.qc__label { font-size: 0.78rem; font-weight: 750; color: var(--color-text-muted); }
.qc__row { display: flex; gap: 0.55rem; align-items: center; margin: 0.3rem 0 0.55rem; }
.qc__row input { flex: 1; min-height: 2.7rem; border-radius: 12px; border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; font: inherit; }
.qc__unit { font-weight: 750; min-width: 2.5rem; }
.qc__edit {
  margin-top: 0.45rem;
  background: transparent;
  border: 1px solid var(--color-border);
}

.fp-hero__mascot-img--xp {
  width: min(168px, 42vw);
  height: auto;
  max-height: 168px;
  object-fit: contain;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* Fortschritt-Hero Variante B: Sticker zentriert, Ring+XP darunter */
.page--fortschritt .fp-hero__top--xp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "mascot mascot"
    "ring meta";
  align-items: center;
  gap: 0.65rem 0.85rem;
}
.page--fortschritt .fp-hero__top--xp .fp-hero__mascot {
  grid-area: mascot;
  width: auto;
  height: auto;
  max-width: none;
  justify-self: center;
  margin: 0.15rem 0 0.2rem;
}
.page--fortschritt .fp-hero__top--xp .fp-hero__mascot-img,
.page--fortschritt .fp-hero__top--xp .fp-hero__mascot img.mascot {
  width: 160px !important;
  max-width: min(160px, 58vw) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}
.page--fortschritt .fp-hero__top--xp .fp-hero__ring { grid-area: ring; }
.page--fortschritt .fp-hero__top--xp .fp-hero__meta { grid-area: meta; min-width: 0; }

@media (max-width: 520px) {
  .page--fortschritt .fp-hero__top--xp {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "mascot mascot"
      "ring meta";
  }
}
@media (max-width: 400px) {
  .page--fortschritt .fp-hero__top--xp .fp-hero__mascot { width: auto; height: auto; }
  .page--fortschritt .fp-hero__top--xp .fp-hero__mascot-img,
  .page--fortschritt .fp-hero__top--xp .fp-hero__mascot img.mascot {
    width: 148px !important;
    max-width: min(148px, 62vw) !important;
  }
}

.macro-icon {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.macro-row__icon {
  background: transparent !important;
  padding: 0;
  overflow: hidden;
}
.macro-row__icon .macro-icon {
  width: 100%;
  height: 100%;
  max-width: 2.75rem;
  max-height: 2.75rem;
  object-fit: contain;
}
.calorie-summary__ring-content {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.05rem;
}
.calorie-summary__ring-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 0.05rem;
}
.fi-hero__kcal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.fi-hero__kcal-icon {
  width: 48px;
  height: 48px;
}
.fi-stat {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.2rem;
}
.fi-stat__icon {
  width: 44px;
  height: 44px;
}

.product-barcode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.product-fetch-off {
  width: 100%;
  min-height: 2.6rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font: inherit;
  font-weight: 700;
}
@media (min-width: 520px) {
  .product-barcode-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .product-fetch-off { width: auto; padding: 0.55rem 0.9rem; }
}

.pa-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.pa-search input[type="search"] {
  min-height: 2.6rem;
  border-radius: 12px;
}
.ds-hero__inline-form { display: inline; }
.ds-hero__pill--btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border: 0;
}
.pa-dupes { margin-bottom: 1.25rem; }
.pa-dupe {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
}
.pa-dupe__list { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.pa-dupe__kcal { opacity: 0.7; margin-left: 0.35rem; font-size: 0.85em; }
.pa-dupe__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.detail-sheet__panel--badge .detail-sheet__title {
  text-align: center;
  margin: 0.15rem 2.2rem 0.35rem;
  font-size: 1.2rem;
}
.detail-sheet__panel--badge .detail-sheet__body {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.45rem;
  padding-bottom: 0.4rem;
}
.badge-sheet__sticker {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  margin: -0.2rem 0 0.15rem;
  transform: scale(0.84);
  opacity: 0;
}
.detail-sheet.is-open .is-badge-in .badge-sheet__sticker {
  animation: badgeStickerIn 0.36s cubic-bezier(0.22, 1.2, 0.36, 1) 0.05s both;
}
.badge-sheet__sticker img {
  width: 148px;
  height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-text) 12%, transparent));
}
.badge-sheet__sticker.is-locked img {
  filter: grayscale(0.55) contrast(0.95) drop-shadow(0 4px 10px color-mix(in srgb, var(--color-text) 8%, transparent));
  opacity: 0.82;
}
.badge-sheet__chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-sheet__desc { margin: 0; max-width: 28rem; }
.badge-sheet__status { margin: 0; font-size: 0.82rem; }
.badge-sheet__track {
  width: min(100%, 16rem);
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.badge-sheet__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--color-primary);
}
.detail-sheet.is-open .is-badge-in .badge-sheet__fill {
  animation: badgeFill 0.45s var(--ease-out, ease-out) 0.12s both;
  width: calc(var(--badge-p, 0) * 1%);
}
.badge-sheet__cta {
  margin-top: 0.35rem;
  min-width: min(100%, 16rem);
}
@keyframes badgeStickerIn {
  from { opacity: 0; transform: scale(0.82) translateY(8px); }
  70% { opacity: 1; transform: scale(1.05) translateY(0); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes badgeFill {
  from { width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-sheet__sticker,
  .detail-sheet.is-open .is-badge-in .badge-sheet__sticker,
  .detail-sheet.is-open .is-badge-in .badge-sheet__fill {
    animation: none;
    opacity: 1;
    transform: none;
    width: calc(var(--badge-p, 0) * 1%);
  }
}

.dash-macros.ds-section {
  margin: 0;
  padding: var(--space-card);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.dash-macros .macro-rows,
.dash-macros .macro-row,
.dash-macros .macro-row__top {
  min-width: 0;
  max-width: 100%;
}
.dash-macros .ds-section__head {
  margin-bottom: 0.65rem;
}
.dash-macros .ds-section__title {
  margin: 0;
  font-size: 1.05rem;
}

.settings-widgets-note { margin-top: 0.5rem; }
a.level-badge { text-decoration: none; color: inherit; }
.auth-page--simple .auth-welcome__hero { display: none; }
.page--error .ds-hero { text-align: center; }


.ds-empty--macros {
  margin-top: 1.15rem;
  padding: 1.25rem 0.9rem 1rem;
  gap: 0.45rem;
}
.ds-empty__sticker {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  margin: 0.15rem 0 0.35rem;
}
.meal-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  max-width: 18rem;
  margin-top: 0.35rem;
}
.meal-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.meal-pill.is-suggested {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}


/* Streak-Sticker: kein Klick-/Fokusrahmen, einheitliche Kachel */
button.streak-badge,
.streak-badge {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
button.streak-badge:focus,
button.streak-badge:focus-visible,
button.streak-badge:active,
.streak-badge:focus,
.streak-badge:focus-visible,
.streak-badge:active {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.streak-badge.is-achieved .streak-badge__shape--art {
  outline: none;
  box-shadow: none;
  border: 0;
}


/* iOS PWA: weniger Composite-Kosten, kein Gummiband, sichtbare Karten zuerst */
html, body {
  overscroll-behavior-y: none;
}
@supports (-webkit-touch-callout: none) {
  .bottom-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-surface);
  }
  .page--dashboard .dash-zone--charts .card,
  .page--dashboard .dash-zone--engage .card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 240px;
  }
}
.streak-badge__art,
.ds-empty__sticker,
.badge-sheet__sticker img {
  content-visibility: auto;
}


/* Rezeptliste: stapelbare Karten, Formular nicht in eine Zeile quetschen */
.recipe-card {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: var(--radius-card, 18px);
  box-shadow: var(--shadow-card, 0 4px 14px rgba(15, 40, 30, 0.04));
  padding: 1rem 1.05rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.recipe-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.recipe-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.recipe-card__meta {
  margin: 0.28rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.recipe-card__tools {
  display: flex;
  gap: 0.35rem;
  flex: none;
}
.recipe-card__tool {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.recipe-card__tool--danger { color: #b42318; }
.recipe-card__log {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.65rem 0.7rem;
  align-items: end;
}
.recipe-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--color-text-muted);
}
.recipe-card__field input,
.recipe-card__field select {
  width: 100%;
  min-height: 44px;
}
.recipe-card__submit {
  grid-column: 1 / -1;
  min-height: 44px;
}
@media (min-width: 520px) {
  .recipe-card__log {
    grid-template-columns: 5.5rem minmax(8rem, 1fr) auto;
  }
  .recipe-card__submit { grid-column: auto; }
}

.recipe-card__photo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.more-section {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


@keyframes hint-icon-nudge {
  0% { transform: translateX(0); }
  40% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.insight-item__icon.is-enter {
  animation: hint-icon-nudge var(--duration-slow) var(--ease-out) 1;
}
@media (prefers-reduced-motion: reduce) {
  .insight-item__icon.is-enter { animation: none; }
}