/* Oberfläche – nutzt ausschließlich die Design-Tokens aus tokens.css */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg-base);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
img { display: block; }

#app {
  max-width: var(--content-max-width);
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + var(--space-1)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--dock-space));
}

/* ---------- Kopfzeile ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; height: var(--size-topbar); }
.topbar-group {
  display: flex; align-items: center;
  background: var(--color-surface); border-radius: var(--radius-pill); padding: 0 var(--space-1); height: var(--size-topbar-group);
}
.icon-btn {
  width: var(--size-button); height: var(--size-button); display: grid; place-items: center;
  border-radius: var(--radius-pill); color: var(--color-text);
}
.icon-btn.round { background: var(--color-surface); width: var(--size-topbar-group); height: var(--size-topbar-group); }
.icon-btn svg { width: var(--size-icon); height: var(--size-icon); }
.icon-btn:active { background: var(--color-surface-pressed); }

.large-title {
  font-size: var(--font-size-largetitle); font-weight: var(--font-weight-bold); line-height: 1.15;
  color: var(--color-accent); margin: var(--space-2) 0 var(--space-1);
}
.page-title { font-size: var(--font-size-largetitle); font-weight: var(--font-weight-bold); line-height: 1.15; margin: var(--space-2) 0 var(--space-3); }

.status { font-size: var(--font-size-footnote); color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.status:empty { display: none; }
.status .dot { width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--color-warning); }

/* ---------- Abschnitte & Zeilen ---------- */
.section-title {
  font-size: var(--font-size-section); font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary); margin: var(--space-5) 0 var(--space-2);
}
.rows { display: flex; flex-direction: column; gap: var(--space-2); }
.row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: var(--size-row); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  background: var(--color-surface); border-radius: var(--radius-lg);
  transition: opacity var(--duration-normal);
}
.row.done { opacity: 0.5; }
.row.done .row-name { text-decoration: line-through; color: var(--color-text-secondary); }
.row-main { flex: 1; min-width: 0; text-align: left; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.row-name { font-size: var(--font-size-body); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.row-sub { font-size: var(--font-size-footnote); color: var(--color-text-secondary); margin-top: 1px; }

.check {
  width: var(--size-checkbox); height: var(--size-checkbox); flex: none; border-radius: 50%;
  border: var(--border-check) solid var(--color-checkbox); display: grid; place-items: center; position: relative;
}
.check::before { content: ''; position: absolute; inset: calc(var(--space-3) * -1); } /* größere Tippfläche */
.check.on { border-color: var(--color-accent); background: var(--color-accent); }
.check.on::after {
  content: ''; width: 5px; height: 10px; border: solid var(--color-accent-contrast);
  border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}

/* Vorschläge "Vielleicht fällig" */
.suggest { background: var(--color-accent-soft); }
.mini-btn {
  width: var(--size-mini-btn); height: var(--size-mini-btn); border-radius: 50%; display: grid; place-items: center;
  color: var(--color-text-secondary); flex: none;
}
.mini-btn.add { background: var(--color-accent); color: var(--color-accent-contrast); }
.mini-btn svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.mini-btn:disabled { opacity: 0.25; }

.empty { text-align: center; color: var(--color-text-secondary); margin: var(--space-8) 0; line-height: 1.5; font-size: var(--font-size-subhead); }

/* ---------- Unten: Eingabe + Tab-Leiste (Glas) ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  border: 1px solid var(--glass-rim);
  box-shadow:
    var(--glass-shadow),
    0 0 0 var(--border-hairline) var(--glass-edge),
    inset 0 1px 1px var(--glass-rim-inner),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08);
}
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none;
  padding: 0 var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-2));
}
.dock-inner { max-width: var(--content-max-width); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-2); }
.dock-inner > * { pointer-events: auto; }
/* Eingabe oben unter dem Titel – bleibt beim Scrollen oben haften */
.composer {
  position: sticky; top: calc(env(safe-area-inset-top) + var(--space-2)); z-index: 15;
  margin: var(--space-2) 0 var(--space-1);
}
.composer-inner { position: relative; }
.composer-field { display: flex; align-items: center; }
.composer input {
  flex: 1; min-width: 0; height: var(--size-control); border-radius: var(--radius-pill); outline: 0;
  padding: 0 var(--space-4) 0 calc(var(--space-4) + var(--size-icon) + var(--space-2)); font-size: var(--font-size-body);
}
.composer .field-icon {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); width: var(--size-icon); height: var(--size-icon);
  color: var(--color-accent); pointer-events: none; z-index: 1;
}
/* Unscharfer Streifen hinter dem Feld – blendet beim Hochscrollen fließend ein (--stuck: 0…1 aus app.js) */
.composer { --stuck: 0; }
.composer::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--space-4) * -1); right: calc(var(--space-4) * -1);
  top: calc((env(safe-area-inset-top) + var(--space-2)) * -1); bottom: calc(var(--space-4) * -1);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent);
  opacity: var(--stuck);
  visibility: hidden;
}
.composer.stuck::before { visibility: visible; }
.completions {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2));
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-surface-raised); box-shadow: var(--glass-shadow); border: var(--border-hairline) solid var(--color-separator);
}
.completion {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  min-height: var(--size-row); padding: var(--space-2) var(--space-4); text-align: left;
  border-bottom: var(--border-hairline) solid var(--color-separator);
}
.completion:last-child { border-bottom: 0; }
.completion:active { background: var(--tab-active-bg); }
.completion small { color: var(--color-text-secondary); font-size: var(--font-size-footnote); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.completion small.hl { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }

.tabbar {
  position: relative; display: flex; padding: var(--space-1); align-self: center; /* nur so breit wie nötig */
  height: var(--size-tabbar); border-radius: var(--radius-pill);
}
.tab {
  position: relative; z-index: 1; flex: none; min-width: 92px; padding: 0 var(--space-4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: var(--radius-pill); color: var(--color-text);
  font-size: var(--font-size-tab); font-weight: var(--font-weight-semibold); letter-spacing: 0.1px;
  transition: color var(--duration-fast);
}
.tab svg { width: var(--size-tab-icon); height: var(--size-tab-icon); }
.tab.active { color: var(--color-secondary); }
.tab.active svg .fill { fill: currentColor; fill-opacity: 0.18; }
/* Glas-Kapsel hinter dem aktiven Tab – gleitet beim Wechsel wie eine Lupe hinüber */
.tab-pill {
  position: absolute; z-index: 0; top: var(--space-1); bottom: var(--space-1); left: 0;
  border-radius: var(--radius-pill); background: var(--glass-pill);
  box-shadow: inset 0 1px 1px var(--glass-pill-rim);
  transition: transform var(--duration-tab) var(--ease-spring), width var(--duration-tab) var(--ease-spring);
  pointer-events: none;
}
.tab-pill.moving { animation: lens var(--duration-tab) ease-out; }
@keyframes lens {
  0% { scale: 1; }
  35% { scale: 1.14 1.22; background: var(--glass-lens); box-shadow: inset 0 1px 2px var(--glass-rim), var(--glass-shadow); }
  100% { scale: 1; }
}
.tab:active svg { transform: scale(0.92); transition: transform var(--duration-fast); }

/* ---------- Karten, Formulare, Buttons ---------- */
.card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.card h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-headline); font-weight: var(--font-weight-semibold); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.card h3 .link { font-weight: var(--font-weight-regular); padding: 0; }
.hint { color: var(--color-text-secondary); font-size: var(--font-size-subhead); line-height: 1.4; margin: var(--space-1) 0 var(--space-3); }
.hint.warn { color: var(--color-warning); }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field label { font-size: var(--font-size-footnote); color: var(--color-text-secondary); }
.input {
  width: 100%; min-height: var(--size-control); border: 0; outline: 0; border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-2) var(--space-3); font-size: var(--font-size-body);
}
.card .input { background: var(--color-bg); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.4; }
textarea.input.small { min-height: 64px; }
select.input { -webkit-appearance: none; appearance: none; }
.code-input { letter-spacing: 0.5em; text-align: center; font-size: var(--font-size-title); font-variant-numeric: tabular-nums; }
.title-input { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--size-control); border-radius: var(--radius-md);
  background: var(--color-accent); color: var(--color-accent-contrast);
  font-weight: var(--font-weight-semibold); margin-top: var(--space-2);
}
.btn.secondary { background: var(--color-surface); color: var(--color-accent); }
.card .btn.secondary { background: var(--color-bg); }
.btn.danger { background: var(--color-surface); color: var(--color-danger); }
.btn:disabled { opacity: 0.5; }
.btn svg { width: var(--size-icon); height: var(--size-icon); }
.link { color: var(--color-accent); font-size: var(--font-size-subhead); padding: var(--space-3) 0; }
.btn-row { display: flex; gap: var(--space-2); }
.btn-row .btn { flex: 1; }

.recovery-code { font-family: ui-monospace, Menlo, monospace; font-size: var(--font-size-headline); text-align: center; padding: var(--space-4); background: var(--color-bg); border-radius: var(--radius-md); user-select: all; overflow-wrap: anywhere; }

/* ---------- Rezepte ---------- */
.recipe-row { gap: var(--space-3); }
.recipe-row .row-name { font-weight: var(--font-weight-semibold); }
.recipe-thumb { width: var(--size-row); height: var(--size-row); border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--color-surface-pressed); }
.hero {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg);
  margin-bottom: var(--space-3); background: var(--color-surface);
}
.hero-empty {
  width: 100%; aspect-ratio: 16 / 7; border-radius: var(--radius-lg); margin-bottom: var(--space-3);
  background: var(--color-surface); color: var(--color-accent); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--font-size-subhead);
}
.hero-empty svg { width: 30px; height: 30px; }
.hero-wrap { position: relative; }
.hero-actions { position: absolute; right: var(--space-2); bottom: calc(var(--space-3) + var(--space-2)); display: flex; gap: var(--space-2); }
.pill-btn {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: var(--color-glass); color: var(--color-text);
  font-size: var(--font-size-footnote); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pill-btn svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* Fotostreifen (Seiten des Rezepts) */
.thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { position: relative; flex: none; width: var(--size-thumb); height: var(--size-thumb); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .remove {
  position: absolute; top: var(--space-1); right: var(--space-1); width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-overlay); color: #fff; display: grid; place-items: center;
}
.thumb .remove svg { width: 12px; height: 12px; }
.thumb.add { display: grid; place-items: center; color: var(--color-accent); border: var(--border-check) dashed var(--color-separator); background: transparent; }
.thumb.add svg { width: var(--size-icon); height: var(--size-icon); }
.thumb .num { position: absolute; left: var(--space-1); bottom: var(--space-1); font-size: var(--font-size-caption); background: var(--color-overlay); color: #fff; border-radius: var(--radius-pill); padding: 0 6px; }

.viewer { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .close { position: absolute; top: calc(env(safe-area-inset-top) + var(--space-2)); right: var(--space-3); }

.rating { display: flex; gap: var(--space-2); }
.rating button {
  flex: 1; min-height: var(--size-control); border-radius: var(--radius-md); background: var(--color-bg);
  font-size: var(--font-size-headline); display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: var(--border-check) solid transparent;
}
.rating button span { font-size: var(--font-size-subhead); color: var(--color-text-secondary); }
.rating button.on-up { background: var(--color-accent-soft); border-color: var(--color-accent); }
.rating button.on-down { background: var(--color-surface-pressed); border-color: var(--color-negative); }
ol.steps { padding-left: var(--space-5); margin: 0; line-height: 1.45; }
ol.steps li { margin-bottom: var(--space-2); }
ol.steps li::marker { color: var(--color-text-secondary); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--color-separator); display: flex; justify-content: space-between; gap: var(--space-3); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain li small { color: var(--color-text-secondary); white-space: nowrap; }

/* Prüfschritt "schon vorhanden?" */
.ing-row { align-items: flex-start; }
.ing-row .check { margin-top: var(--space-2); }
.ing-row.have { opacity: 0.55; }
.ing-row.have .ing-name { text-decoration: line-through; }
.ing-fields { display: flex; gap: var(--space-2); min-width: 0; }
.ing-fields input { min-width: 0; background: transparent; border: 0; outline: 0; padding: var(--space-1) 0; font-size: var(--font-size-body); }
.ing-name { flex: 1; }
.ing-qty { width: 80px; text-align: right; color: var(--color-text-secondary); }
.ing-orig { font-size: var(--font-size-footnote); color: var(--color-text-secondary); }
.tag { display: inline-block; font-size: var(--font-size-caption); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); margin-left: var(--space-1); }
.toggle-line { display: flex; justify-content: space-between; align-items: center; }
.switch { width: var(--size-switch-w); height: var(--size-switch-h); border-radius: var(--radius-pill); background: var(--color-surface-pressed); position: relative; flex: none; transition: background var(--duration-fast); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(var(--size-switch-h) - 4px); height: calc(var(--size-switch-h) - 4px); border-radius: 50%; background: #fff; transition: transform var(--duration-fast); box-shadow: var(--shadow-raised); }
.switch.on { background: var(--color-positive); }
.switch.on::after { transform: translateX(calc(var(--size-switch-w) - var(--size-switch-h))); }
details.card summary { font-weight: var(--font-weight-semibold); cursor: pointer; }

/* Import-Auswahl */
.choice { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; }
.choice > svg { width: 26px; height: 26px; color: var(--color-accent); flex: none; }
.choice strong { display: block; font-weight: var(--font-weight-semibold); }
.choice .hint { margin: 0; }

/* Rubrik-Reihenfolge */
.order-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-row); border-bottom: var(--border-hairline) solid var(--color-separator); }
.order-row:last-child { border-bottom: 0; }
.order-row .pos { width: var(--space-5); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; font-size: var(--font-size-subhead); }
.order-row .name { flex: 1; }

/* ---------- Bottom-Sheet & Meldungen ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: var(--color-overlay); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: var(--content-max-width); background: var(--color-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));
  max-height: 90dvh; overflow: auto; animation: slideup var(--duration-normal) ease-out;
}
.sheet .input { background: var(--color-surface); }
.sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: var(--color-text-tertiary); margin: 0 auto var(--space-3); }
@keyframes slideup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--dock-space)); transform: translateX(-50%);
  background: var(--color-surface-raised); color: var(--color-text); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-raised); z-index: 60; font-size: var(--font-size-subhead);
  width: max-content; max-width: calc(100vw - var(--space-8)); text-align: center;
}
.toast.error { color: var(--color-danger); }

.spinner { width: 26px; height: 26px; border: 3px solid var(--color-separator); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.9s linear infinite; margin: var(--space-6) auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.center { text-align: center; }
.auth-title { margin-top: var(--space-8); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-0 { margin-bottom: 0; }

/* Direkt in der Liste bearbeiten */
.row.editing { box-shadow: inset 0 0 0 var(--border-check) var(--color-accent); }
.row.editing .row-main { gap: 2px; }
.row.editing input {
  width: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font-size: var(--font-size-body); line-height: 1.25;
}
.row.editing .edit-qty { font-size: var(--font-size-footnote); color: var(--color-text-secondary); }
.row.editing .edit-qty::placeholder { color: var(--color-text-tertiary); }
.mini-btn.info { color: var(--color-accent); }
.mini-btn.info svg { width: var(--size-icon); height: var(--size-icon); }

/* Wischen nach links zum Löschen (wie unter iOS) */
.swipe { position: relative; border-radius: var(--radius-lg); }
.swipe > .row { position: relative; z-index: 1; touch-action: pan-y; will-change: transform; }
.swipe-bg {
  position: absolute; inset: 0; border-radius: var(--radius-lg); display: none; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding-right: var(--space-4); background: var(--color-text-tertiary); color: #fff;
  font-size: var(--font-size-subhead); font-weight: var(--font-weight-semibold);
  transition: background var(--duration-fast);
}
.swipe-bg svg { width: var(--size-icon); height: var(--size-icon); transition: transform var(--duration-fast); }
.swipe.swiping .swipe-bg, .swipe.removing .swipe-bg { display: flex; }
.swipe.armed .swipe-bg, .swipe.removing .swipe-bg { background: var(--color-danger); }
.swipe[data-swipe="dismiss"].armed .swipe-bg, .swipe[data-swipe="dismiss"].removing .swipe-bg { background: var(--color-text-secondary); }
.swipe.armed .swipe-bg svg { transform: scale(1.15); }
.swipe.removing { animation: collapse var(--duration-normal) ease-in forwards; animation-delay: 120ms; overflow: hidden; }
@keyframes collapse { from { max-height: 140px; } to { max-height: 0; margin-bottom: calc(var(--space-2) * -1); opacity: 0; } }

.toast { display: flex; align-items: center; gap: var(--space-3); }
.toast-action { color: var(--color-accent); font-weight: var(--font-weight-semibold); font-size: var(--font-size-subhead); padding: var(--space-1) 0; }
.swipe.swiping { overflow: hidden; }

/* ---------- Micro-Animationen ---------- */
/* Bildschirmwechsel: sanft einblenden */
#app.view-enter > * { animation: view-in 260ms var(--ease-out) both; }
#app.view-enter > *:nth-child(2) { animation-delay: 20ms; }
#app.view-enter > *:nth-child(3) { animation-delay: 40ms; }
#app.view-enter > *:nth-child(n+4) { animation-delay: 60ms; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* Neuer Artikel gleitet in die Liste */
.swipe.appear { animation: row-in 360ms var(--ease-pop) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }

/* Zusammengeführte Menge kurz aufleuchten lassen */
.row.flash { animation: flash 900ms var(--ease-out); }
@keyframes flash { 0%, 30% { background: var(--color-secondary-soft); } }

/* Abhaken: Kreis springt kurz auf, Haken zeichnet sich */
.check.pop { animation: pop 340ms var(--ease-pop); }
@keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.check.pop.on::after { animation: tick 260ms var(--ease-out) 60ms both; }
@keyframes tick { from { opacity: 0; transform: rotate(45deg) translate(-1px, -1px) scale(0.4); } }
.row { transition: opacity var(--duration-normal), background var(--duration-normal), transform var(--duration-fast); }

/* Abgehakte Artikel klappen nach der Haltezeit sanft zusammen */
.swipe.leaving { animation: collapse 320ms var(--ease-out) forwards; overflow: hidden; }

/* Vorschläge: "+" tippt sich ein */
.mini-btn { transition: transform var(--duration-fast) var(--ease-pop), background var(--duration-fast); }
.mini-btn:active { transform: scale(0.85); }

/* Drücken: Buttons und Zeilen geben leicht nach */
.btn, .tab, .icon-btn, .pill-btn, .choice, .hero-empty, .recipe-row { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast), background var(--duration-fast); }
.btn:active, .pill-btn:active, .hero-empty:active, .recipe-row:active { transform: scale(0.97); }
.row-main:active .row-name { opacity: 0.6; }

/* Tab-Symbol hüpft beim Wechsel */
.tab.bounce svg { animation: tab-bounce 420ms var(--ease-pop); }
@keyframes tab-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.22) translateY(-2px); } 100% { transform: scale(1); } }

/* Vorschlagsliste und Hinweise erscheinen weich */
.completions:not([hidden]) { animation: pop-up 200ms var(--ease-out); transform-origin: top center; }
@keyframes pop-up { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.toast { animation: toast-in 320ms var(--ease-pop); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); } to { transform: translate(-50%, 0); } }

/* Bewertung und Schalter */
.rating button { transition: transform var(--duration-fast) var(--ease-pop), background var(--duration-normal), border-color var(--duration-normal); }
.rating button.on-up, .rating button.on-down { animation: pop 340ms var(--ease-pop); }
.switch::after { transition: transform var(--duration-normal) var(--ease-pop); }

/* Fotos blenden ein */
.hero, .recipe-thumb, .thumb img { animation: fade-in 400ms var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } }

/* Eingabefeld leuchtet beim Tippen leicht auf */
.composer input { transition: box-shadow var(--duration-normal), background var(--duration-normal); }
.composer input:focus { box-shadow: var(--glass-shadow), 0 0 0 3px var(--color-accent-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* ---------- Petrol: Wichtiges hervorheben ---------- */
#list .row:not(.suggest) .row-sub { color: var(--color-secondary); font-weight: var(--font-weight-semibold); } /* Mengen */
.section-title.hl { color: var(--color-secondary); }
.suggest { background: var(--color-secondary-soft); }
.suggest .row-sub { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.mini-btn.add { background: var(--color-secondary); color: var(--color-secondary-contrast); }
.tag { background: var(--color-secondary-soft); color: var(--color-secondary); }
.ing-qty { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }
ul.plain li small { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }
.count { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }
.status .dot { background: var(--color-secondary); }
.status { color: var(--color-secondary); font-weight: var(--font-weight-semibold); }

/* ---------- Lebendiger Hintergrund ---------- */
body::before {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 15% 10%, var(--bg-glow-1), transparent 70%),
    radial-gradient(45% 40% at 90% 30%, var(--bg-glow-2), transparent 70%),
    radial-gradient(50% 45% at 30% 85%, var(--bg-glow-3), transparent 70%),
    radial-gradient(35% 30% at 85% 90%, var(--bg-glow-1), transparent 70%);
  filter: blur(20px);
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-4%, 3%, 0) rotate(6deg); }
  100% { transform: translate3d(3%, -2%, 0) rotate(-4deg); }
}
/* Karten leicht durchscheinend, damit die Farben durchschimmern */
.row, .card, .topbar-group, .icon-btn.round, .hero-empty, .recipe-row { background: var(--surface-alpha); }
.suggest { background: var(--color-secondary-soft); }
.sheet { background: var(--bg-base); }
.card .input, .card .btn.secondary, .rating button { background: var(--color-surface-pressed); }

/* ---------- Angebote ---------- */
.offer-badge {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-price-soft); color: var(--color-price);
  font-size: var(--font-size-caption); white-space: nowrap; max-width: 46%;
}
.offer-badge svg { width: 14px; height: 14px; flex: none; }
.offer-badge span { overflow: hidden; text-overflow: ellipsis; }
.offer-badge:active { transform: scale(0.94); }
.sheet-title { margin: 0 0 var(--space-3); font-size: var(--font-size-title); }
.offer-list { display: flex; flex-direction: column; gap: var(--space-2); }
.offer { display: flex; gap: var(--space-3); align-items: center; background: var(--surface-alpha); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.offer-main { flex: 1; min-width: 0; }
.offer-retailer { font-size: var(--font-size-footnote); font-weight: var(--font-weight-semibold); color: var(--color-price); text-transform: uppercase; letter-spacing: 0.4px; }
.offer-title { font-size: var(--font-size-body); }
.offer-meta { font-size: var(--font-size-footnote); color: var(--color-text-secondary); margin-top: 2px; }
.offer-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.offer-price b { font-size: var(--font-size-title); color: var(--color-price); }
.offer-price s { font-size: var(--font-size-footnote); color: var(--color-text-secondary); }
.card h3 .switch { flex: none; }

/* ---------- Einkaufs-Tipp ---------- */
.tip {
  width: 100%; display: flex; align-items: center; gap: var(--space-3); text-align: left;
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-price-soft), var(--color-accent-softer));
  border: 1px solid var(--color-price-soft);
  transition: transform var(--duration-fast) var(--ease-out);
}
.tip:active { transform: scale(0.98); }
.tip-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-price-fill); color: var(--color-price-contrast); }
.tip-icon svg { width: 20px; height: 20px; }
.tip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tip-title { font-weight: var(--font-weight-semibold); }
.tip-sub { font-size: var(--font-size-footnote); color: var(--color-text-secondary); }
.tip-save { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.tip-save small { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.tip-save b { font-size: var(--font-size-headline); color: var(--color-price); }
.offer-price s.save { text-decoration: none; color: var(--color-price); font-weight: var(--font-weight-semibold); }

/* Amber in Preis-Bereichen: Abschnittstitel im Tipp-Blatt */
.section-title.price { color: var(--color-price); }
.tip-icon { box-shadow: 0 4px 12px var(--color-price-soft); }

/* ---------- Erfolge ---------- */
.savings-pill {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%;
  margin-top: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--color-price-soft); color: var(--color-text); font-size: var(--font-size-footnote);
}
.savings-pill b { color: var(--color-price); }
.savings-pill .sp-streak { font-weight: var(--font-weight-semibold); color: var(--color-secondary); margin-left: auto; }

.bank { background: linear-gradient(135deg, var(--color-price-soft), var(--surface-alpha)); }
.bank-label { font-weight: var(--font-weight-semibold); color: var(--color-price); }
.bank-amount { font-size: 40px; font-weight: var(--font-weight-bold); color: var(--color-price); letter-spacing: -0.5px; margin: var(--space-1) 0; font-variant-numeric: tabular-nums; }
.bank-sub { font-size: var(--font-size-footnote); color: var(--color-text-secondary); margin-top: var(--space-1); }
.progress { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-pressed); overflow: hidden; margin-top: var(--space-3); }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-price-fill), var(--color-price)); animation: grow 900ms var(--ease-out) both; transform-origin: left; }
.progress.small { height: 5px; margin-top: var(--space-2); }
.progress.small span { background: var(--color-secondary); }
@keyframes grow { from { transform: scaleX(0); } }

.streak { display: flex; align-items: center; gap: var(--space-3); }
.streak-flame { font-size: 34px; animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }
.streak-num { font-weight: var(--font-weight-bold); font-size: var(--font-size-headline); color: var(--color-secondary); }

.segmented { display: flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-alpha); margin-bottom: var(--space-3); }
.segmented button { flex: 1; padding: var(--space-2) 0; border-radius: var(--radius-pill); font-size: var(--font-size-subhead); color: var(--color-text-secondary); transition: background var(--duration-normal), color var(--duration-normal); }
.segmented button.on { background: var(--color-accent); color: var(--color-accent-contrast); font-weight: var(--font-weight-semibold); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-2); }
.stat-grid div { display: flex; flex-direction: column; }
.stat-grid b { font-size: var(--font-size-title); font-variant-numeric: tabular-nums; }
.stat-grid b.money { color: var(--color-price); }
.stat-grid span { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.top-list { margin: 0; padding-left: var(--space-5); }
.top-list li { padding: var(--space-1) 0; }
.top-list li::marker { color: var(--color-secondary); font-weight: var(--font-weight-bold); }
.top-list li span { display: inline-block; min-width: 60%; }
.top-list li small { color: var(--color-text-secondary); }

.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.badge-card { background: var(--surface-alpha); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-2); text-align: center; opacity: 0.55; filter: grayscale(0.9); }
.badge-card.got { opacity: 1; filter: none; background: linear-gradient(160deg, var(--color-accent-softer), var(--surface-alpha)); box-shadow: inset 0 0 0 1px var(--color-accent-soft); }
.badge-card.got .badge-emoji { animation: pop 500ms var(--ease-pop) both; }
.badge-emoji { font-size: 30px; line-height: 1.2; }
.badge-title { font-size: var(--font-size-footnote); font-weight: var(--font-weight-semibold); margin-top: var(--space-1); }
.badge-desc { font-size: var(--font-size-caption); color: var(--color-text-secondary); line-height: 1.25; margin-top: 2px; }
.section-title small { font-size: var(--font-size-footnote); font-weight: var(--font-weight-regular); margin-left: var(--space-2); }

/* "Liste geschafft" mit Konfetti */
.celebrate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--color-overlay); animation: fade-in 250ms var(--ease-out); }
.celebrate.out { opacity: 0; transition: opacity 280ms; }
.celebrate-card {
  position: relative; z-index: 2; width: min(86vw, 340px); text-align: center; padding: var(--space-6) var(--space-5) var(--space-4);
  border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-raised);
  animation: pop 520ms var(--ease-pop) both;
}
.celebrate-card h2 { margin: var(--space-1) 0 var(--space-2); font-size: var(--font-size-title); color: var(--color-accent); }
.celebrate-card p { margin: var(--space-1) 0; color: var(--color-text-secondary); }
.celebrate-emoji { font-size: 52px; animation: tab-bounce 900ms var(--ease-pop) 200ms both; }
.celebrate-rank { color: var(--color-secondary) !important; font-weight: var(--font-weight-semibold); }
.celebrate-saved { color: var(--color-price) !important; font-weight: var(--font-weight-semibold); }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confetti i {
  position: absolute; top: 45%; width: var(--s); height: calc(var(--s) * 0.45); background: var(--c); border-radius: 2px;
  animation: confetti 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) both;
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  30% { transform: translate(calc(var(--x) * 0.6), -38vh) rotate(calc(var(--r) * 0.4)); opacity: 1; }
  100% { transform: translate(var(--x), 60vh) rotate(var(--r)); opacity: 0; }
}

/* Erfolge – ruhiger, persönlicher */
.celebrate-check {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; font-weight: var(--font-weight-bold); color: var(--color-accent-contrast); background: var(--color-accent);
  animation: pop 520ms var(--ease-pop) 120ms both;
}
.celebrate-card h2 { color: var(--color-text); }
.celebrate-hl { font-size: var(--font-size-headline); font-weight: var(--font-weight-semibold); color: var(--color-secondary) !important; line-height: 1.35; }
.celebrate-hl.money { color: var(--color-price) !important; }
.celebrate-detail { font-size: var(--font-size-subhead); }
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.card.mini { margin-bottom: var(--space-3); }
.mini-num { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); }
.mini-label { font-size: var(--font-size-footnote); color: var(--color-text-secondary); margin-top: 2px; }
.bank .link { padding: var(--space-1) 0 0; }
.badges-wrap summary { font-weight: var(--font-weight-semibold); cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; list-style: none; }
.badges-wrap summary::-webkit-details-marker { display: none; }
.badges-wrap summary::after { content: '›'; color: var(--color-text-secondary); transition: transform var(--duration-normal); }
.badges-wrap[open] summary::after { transform: rotate(90deg); }
.badges-wrap summary .hint { margin: 0 0 0 auto; padding-right: var(--space-2); font-weight: var(--font-weight-regular); }
.badge-card { position: relative; }
.badge-new { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: var(--font-weight-bold); padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-secondary); color: var(--color-secondary-contrast); }
.badges-wrap .badge-card:not(.got) { background: var(--color-surface-pressed); }

/* Pokal mit Fortschrittsring */
.trophy-btn { position: relative; }
.trophy-btn .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.trophy-btn .ring circle { fill: none; stroke-width: 2.6; }
.trophy-btn .ring-bg { stroke: var(--color-price-soft); }
.trophy-btn .ring-fg { stroke: var(--color-price-fill); stroke-linecap: round; transition: stroke-dasharray 1.2s var(--ease-out); }
.trophy-btn > svg:not(.ring) { width: 19px; height: 19px; color: var(--color-price); }
.trophy-dot {
  position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-secondary); box-shadow: 0 0 0 2px var(--surface-alpha);
  animation: pop 420ms var(--ease-pop) both;
}
.trophy-btn.glow { animation: trophy-glow 1.4s var(--ease-out); }
@keyframes trophy-glow {
  0% { box-shadow: 0 0 0 0 var(--color-price-soft); transform: scale(1); }
  30% { box-shadow: 0 0 0 8px var(--color-price-soft); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 14px transparent; transform: scale(1); }
}

.celebrate-when { font-size: var(--font-size-footnote); margin-top: calc(var(--space-1) * -1) !important; }
.savings-pill .sp-more { margin-left: auto; color: var(--color-price); font-weight: var(--font-weight-semibold); }