/* ----------------------------------------------------
   vorralo — Tokens aus dem App-Logo abgeleitet
   - Primary: Logo-Grün
   - Text/Lines: Anthrazit (Logo-Bügel)
   - Background: warmes Off-White (Logo-Hintergrund)
   ---------------------------------------------------- */

:root {
  /* Greyscale + Brand */
  --c-bg:        #fafaf7;   /* warmes Off-White (wie Logo-BG) */
  --c-surface:   #ffffff;
  --c-surface-2: #f1f1ec;
  --c-line:      #e8e8e0;
  --c-line-2:    #d6d6cf;
  --c-text:      #1f2a2d;   /* Anthrazit, wie Logo-Bügel */
  --c-text-2:    #5a6166;
  --c-text-3:    #9aa0a4;
  --c-invert:    #ffffff;
  --c-on-dark:   #ffffff;

  /* Brand: Logo-Grün */
  --c-brand:        #7bb73f;
  --c-brand-hover:  #6ba635;
  --c-brand-press:  #5d9329;
  --c-brand-tint:   #ecf5dc;
  --c-brand-line:   #c9e2a3;
  --c-on-brand:     #102a05;   /* sehr dunkles Grün-Schwarz für Text auf Brand */

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(31,42,45,.05), 0 1px 1px rgba(31,42,45,.04);
  --sh-2: 0 4px 14px rgba(31,42,45,.06);

  /* Type */
  --f-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-100: 12px;
  --fs-200: 13px;
  --fs-300: 15px;
  --fs-400: 17px;
  --fs-500: 22px;
  --fs-600: 28px;
  --fs-700: 40px;
  --fs-800: 56px;

  --lh-tight: 1.15;
  --lh-base:  1.5;

  --container: 1120px;
  --tap-min:   44px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img, svg { display: block; max-width: 100%; }

/* ---------- Layout ---------- */
.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Off-Canvas-Drawer (.nav) liegt mit transform: translateX(100%) rechts neben
     dem Viewport. Ohne overflow-clip schiebt das den scrollWidth nach rechts
     und der Burger landet außerhalb des sichtbaren Bereichs. `overflow-x: clip`
     (modern) verhindert das, ohne die Sticky-Header-Logik zu brechen.
     `hidden` als Fallback für ältere iOS-Versionen. */
  overflow-x: hidden;
  overflow-x: clip;
}
html { overflow-x: hidden; overflow-x: clip; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Mobile: 24px Atemluft + iOS Safe-Area respektieren */
  padding-left:  max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
@media (min-width: 640px) {
  .container {
    padding-left:  max(var(--s-5), env(safe-area-inset-left));
    padding-right: max(var(--s-5), env(safe-area-inset-right));
  }
}
@media (min-width: 960px) {
  .container {
    padding-left:  max(var(--s-6), env(safe-area-inset-left));
    padding-right: max(var(--s-6), env(safe-area-inset-right));
  }
}

/* ---------- Header / Nav ----------
   WICHTIG: kein `backdrop-filter` hier — das würde einen "Containing Block"
   für position: fixed-Nachfahren erzeugen. Der Off-Canvas-Drawer würde dann
   auf die Header-Höhe (56 px) statt aufs Viewport geclipt. Solider Hintergrund
   reicht völlig.
   Aus dem gleichen Grund vermeiden: `transform`, `filter`, `will-change: transform`,
   `contain: paint/layout/strict` auf .site-header. */
.site-header {
  position: sticky;
  top: 0;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  z-index: 50;
}
.site-header .bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 56px;
  /* Bar erbt das Container-Padding — kein zusätzliches Padding mehr (war zu eng
     auf Mobile). Auf Desktop bekommt die Bar leicht mehr Luft per gap. */
}
@media (min-width: 640px)  { .site-header .bar { height: 60px; gap: var(--s-4); } }
@media (min-width: 960px)  { .site-header .bar { height: 64px; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: var(--fs-300);
  color: var(--c-text);
  text-decoration: none;
  min-width: 0;
}
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
@media (min-width: 640px) { .brand { font-size: var(--fs-400); gap: var(--s-3); } .brand img { width: 36px; height: 36px; border-radius: 9px; } }
/* Auf SEHR schmalen Phones (≤340px) Brand-Text ausblenden, Logo reicht */
@media (max-width: 340px) {
  .brand span { display: none; }
}

.nav-spacer { flex: 1; }

/* ---------- Inline-Elemente in der Bar (Avatar / Primary-CTA) ---------- */
.nav-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--c-brand-line);
  flex-shrink: 0;
  transition: transform .12s ease, box-shadow .15s ease;
}
.nav-avatar:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(15,30,30,.18); }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-avatar__initial { font-size: 14px; line-height: 1; }
.nav-avatar--bar { /* Variante in der Bar (immer sichtbar) */ }

.bar-cta { flex-shrink: 0; white-space: nowrap; }

/* ---------- Hamburger: jetzt für Logged-In UND Logged-Out, nur ≤899px sichtbar ---------- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--c-text);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 30, 0.32);
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 90;
}

/* ---------- Nav: Desktop horizontal, Mobile als Drawer ---------- */
.nav {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.nav .nav-link {
  color: var(--c-text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
.nav .nav-link:hover { color: var(--c-text); background: var(--c-surface-2); }

/* Mobile: Toggle sichtbar, Nav als Drawer rechts */
@media (max-width: 899px) {
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--s-5) + env(safe-area-inset-top)) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
    background: var(--c-surface);
    border-left: 1px solid var(--c-line);
    box-shadow: -8px 0 28px rgba(15, 30, 30, 0.18);
    transform: translateX(100%);
    transition: transform 240ms ease-out;
    z-index: 100;
    overflow-y: auto;
  }
  .nav .nav-link {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    min-height: 48px;
    color: var(--c-text);
    font-size: var(--fs-300);
  }
  .nav .nav-link + .nav-link { border-top: 1px solid var(--c-line); }
  .nav .nav-link:hover, .nav .nav-link:focus { background: var(--c-brand-tint); color: var(--c-brand-press); }
  .nav .nav-link--primary { color: var(--c-brand-press); font-weight: 700; }
  .nav .nav-link--muted   { color: var(--c-text-3); font-size: var(--fs-200); }
  .nav .nav-sep {
    border: 0;
    border-top: 1px solid var(--c-line-2);
    margin: var(--s-3) 0;
    height: 0;
  }
  .nav .nav-logout { margin-top: auto; padding-top: var(--s-4); }
  .nav .nav-logout .btn { width: 100%; }
  body.is-nav-open .nav { transform: translateX(0); }
  body.is-nav-open .nav-backdrop { display: block; }
  body.is-nav-open { overflow: hidden; }
}

/* Desktop: Hamburger + Drawer-Helfer weg, Nav inline */
@media (min-width: 900px) {
  .nav-toggle, .nav-backdrop, .nav-sep { display: none !important; }
  .nav .nav-link--muted { display: none; }
  /* Logged-Out: Primary-CTA aus dem Drawer NICHT extra zeigen — sind doppelt; aber wir
     blenden die Drawer-Variante nicht aus, weil .bar-cta nur den Register-Button hat. */
}

/* Desktop-only Trennung der Bar-CTAs */
@media (min-width: 900px) {
  /* In der inline-nav: nicht alle Drawer-Links auf Desktop zeigen.
     Vorlage: nur Hauptaktionen sichtbar machen, Footer-Links ins Footer. */
  .nav .nav-link--primary { color: var(--c-brand-press); font-weight: 600; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--fs-300);
  font-weight: 600;
  cursor: pointer;
  transition: transform .04s ease, background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* Mobile-first: btn-lg/xl sind etwas zurückhaltender. Ab Tablet werden sie groß. */
.btn-sm  { min-height: 40px; padding: 0 var(--s-4); font-size: var(--fs-200); }
/* Mobile: Action-Buttons kompakter, damit alle in einer Zeile bleiben */
@media (max-width: 639px) {
  .list-row-actions .btn-sm,
  .list-row-actions .popover-summary {
    min-height: 38px;
    padding: 0 var(--s-3);
    font-size: var(--fs-100);
  }
  .list-row-actions .btn-icon { width: 38px; min-width: 38px; }
}
.btn-lg  { min-height: 52px; padding: 0 var(--s-5); font-size: var(--fs-300); border-radius: var(--r-lg); }
.btn-xl  { min-height: 56px; padding: 0 var(--s-6); font-size: var(--fs-400); border-radius: var(--r-lg); }
.btn-icon {
  padding: 0;
  width: 40px;
  min-width: 40px;
  justify-content: center;
  font-size: var(--fs-400);
  line-height: 1;
}
@media (min-width: 640px) {
  .btn-lg { min-height: 56px; padding: 0 var(--s-6); font-size: var(--fs-400); }
  .btn-xl { min-height: 64px; padding: 0 var(--s-7); font-size: var(--fs-400); }
}

.btn-primary {
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-color: var(--c-brand);
}
.btn-primary:hover  { background: var(--c-brand-hover); border-color: var(--c-brand-hover); }
.btn-primary:active { background: var(--c-brand-press); border-color: var(--c-brand-press); }

.btn-dark {
  background: var(--c-text);
  color: var(--c-on-dark);
  border-color: var(--c-text);
}
.btn-dark:hover { background: #2a373b; border-color: #2a373b; }

.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-line-2);
}
.btn-ghost:hover { background: var(--c-surface-2); }

.btn-link {
  background: none;
  color: var(--c-text-2);
  padding: 0 var(--s-2);
  min-height: auto;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-line-2);
}
.btn-link:hover { color: var(--c-text); text-decoration-color: var(--c-brand); }

.btn-block { width: 100%; }

/* ---------- Hero ---------- */
/* Default: einfacher Stack, KEIN Grid (sonst brechen alle Pages mit nur Text-Hero). */
/* Hero-Content soll exakt auf der gleichen vertikalen Linie wie Card-Content liegen.
   Container-Padding + Card-Padding addieren, sodass Hero-Text und Card-Innen aligned. */
.hero {
  padding-top:    var(--s-6);
  padding-bottom: var(--s-5);
  padding-left:  calc(max(var(--s-5), env(safe-area-inset-left))  + var(--s-5));
  padding-right: calc(max(var(--s-5), env(safe-area-inset-right)) + var(--s-5));
}
@media (min-width: 640px) {
  .hero {
    padding-left:  calc(max(var(--s-5), env(safe-area-inset-left))  + var(--s-6));
    padding-right: calc(max(var(--s-5), env(safe-area-inset-right)) + var(--s-6));
  }
}
@media (min-width: 960px) {
  .hero {
    padding-top: var(--s-7);
    padding-bottom: var(--s-6);
    padding-left:  calc(max(var(--s-6), env(safe-area-inset-left))  + var(--s-6));
    padding-right: calc(max(var(--s-6), env(safe-area-inset-right)) + var(--s-6));
  }
}
.hero h1 {
  font-size: clamp(26px, 7vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero .accent { color: var(--c-brand); }
.hero p.lede {
  font-size: clamp(15px, 2vw, var(--fs-400));
  color: var(--c-text-2);
  max-width: 56ch;
  margin: 0 0 var(--s-5);
  text-wrap: pretty;
}
.hero .cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: stretch;
}
.hero .cta .btn { width: 100%; }
@media (min-width: 480px) {
  .hero .cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero .cta .btn { width: auto; }
}

/* Hero-Compact: für Innen-Seiten (Admin, Dashboard). Kleinere Typo, weniger Padding.
   NUR top/bottom anpassen — die Hero-Padding-X-calc von .hero unverändert lassen,
   sonst kollabiert das Alignment mit Card-Inhalt. */
.hero-compact { padding-top: var(--s-5); padding-bottom: var(--s-3); }
@media (min-width: 960px) {
  .hero-compact { padding-top: var(--s-6); padding-bottom: var(--s-4); }
}
.hero-compact h1 {
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  font-weight: 700;
}
.hero-compact p.lede {
  font-size: var(--fs-300);
  margin: 0;
}
.hero-compact .tag { margin-bottom: var(--s-3); }

/* Hero-Split: nur Home-Page nutzt das (Text + Visual). */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}
.hero-split .visual { display: none; }
@media (min-width: 960px) {
  .hero-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-7);
  }
  .hero-split .visual {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    background:
      radial-gradient(circle at 30% 30%, var(--c-brand-tint) 0%, transparent 60%),
      var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: var(--s-6);
  }
  .hero-split .visual img {
    width: 60%;
    max-width: 280px;
    height: auto;
    border-radius: 24px;
    box-shadow: var(--sh-2);
  }
}

/* ---------- Bento Grid ---------- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0 var(--s-6);
}
/* Tablet: 2 cols. Spans für ALLE Klassen explizit, sonst defaulten Karten zu span 1. */
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .b-wide  { grid-column: span 2; }
  .b-two   { grid-column: span 2; }
  .b-half  { grid-column: span 1; }
  .b-third { grid-column: span 1; }
  .b-one   { grid-column: span 1; }
}
/* Desktop: 6-col Grid mit feiner Verteilung. */
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(6, 1fr); gap: var(--s-5); }
  .b-wide  { grid-column: span 6; }
  .b-two   { grid-column: span 4; }
  .b-half  { grid-column: span 3; }
  .b-third { grid-column: span 2; }
  .b-one   { grid-column: span 2; }
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color .15s ease, transform .15s ease;
}
@media (min-width: 640px) {
  .card { padding: var(--s-6); }
}
/* min-height bewusst entfernt: leere Cards wirken sonst künstlich aufgepumpt. */
.card:hover { border-color: var(--c-line-2); }

.card.dark {
  background: var(--c-text);
  color: var(--c-on-dark);
  border-color: var(--c-text);
}

.card.brand {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-line);
}

.card .eyebrow {
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
  font-weight: 600;
}
.card.dark  .eyebrow { color: rgba(255,255,255,.55); }
.card.brand .eyebrow { color: var(--c-brand-press); }

.card h3 {
  font-size: var(--fs-500);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: 600;
}
.card p {
  color: var(--c-text-2);
  margin: 0;
}
.card.dark p { color: rgba(255,255,255,.7); }
.card.brand p { color: var(--c-text); }

/* ---------- Outro CTA ---------- */
.outro {
  padding: var(--s-4) 0 var(--s-7);
}
.outro-card {
  text-align: center;
  align-items: center;
  background: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-on-dark);
}
.outro-card h3 {
  font-size: clamp(20px, 4vw, 28px);
  margin: 0;
}
.outro-card p {
  color: rgba(255,255,255,.65);
  margin: 0;
}
.outro-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
  width: 100%;
  align-items: center;
}
.outro-card .btn-primary { width: 100%; max-width: 320px; }
.outro-card .btn-link { color: rgba(255,255,255,.7); text-decoration-color: rgba(255,255,255,.25); }
.outro-card .btn-link:hover { color: #fff; text-decoration-color: var(--c-brand); }
@media (min-width: 640px) {
  .outro-actions { flex-direction: row; justify-content: center; }
  .outro-card .btn-primary { width: auto; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--c-line);
  padding: var(--s-5) 0;
  color: var(--c-text-3);
  font-size: var(--fs-200);
}
.site-footer .row {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
}

/* ---------- Auth screens ---------- */
.auth-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-4);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--s-5);
}
@media (min-width: 480px) {
  .auth-card { padding: var(--s-7); }
}
.auth-card h1 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-600);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: var(--lh-tight);
}
.auth-card p.lede {
  margin: 0 0 var(--s-6);
  color: var(--c-text-2);
}
.auth-card .form-row + .form-row { margin-top: var(--s-4); }
.auth-card .actions { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.auth-card .alt {
  margin-top: var(--s-5);
  text-align: center;
  font-size: var(--fs-200);
  color: var(--c-text-2);
}
.auth-card .alt a { color: var(--c-brand-press); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-version {
  margin-top: var(--s-6);
  text-align: center;
  font-size: var(--fs-100);
  color: var(--c-text-3, var(--c-text-2));
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

/* ---------- Form ---------- */
.label {
  display: block;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--c-text-2);
  margin-bottom: var(--s-2);
  letter-spacing: 0.01em;
}
.input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  font-family: inherit;
  font-size: var(--fs-400);
  color: var(--c-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(123,183,63,0.18);
}
.input::placeholder { color: var(--c-text-3); }

/* ---------- Flash messages ---------- */
.flash {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  font-size: var(--fs-200);
  border: 1px solid var(--c-line);
}
.flash.success { background: var(--c-brand-tint); border-color: var(--c-brand-line); color: var(--c-text); }
.flash.error   { background: #2a1f1f; color: var(--c-on-dark); border-color: #2a1f1f; }

/* ---------- Coming-soon Banner ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-brand-line);
  background: var(--c-brand-tint);
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 700;
  color: var(--c-brand-press);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  max-width: 100%;
  flex-wrap: wrap;
}
.tag .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
  position: relative;
}
.tag .pulse::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--c-brand);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- Utility ---------- */
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mb-3 { margin-bottom: var(--s-3); }
.u-mb-4 { margin-bottom: var(--s-4); }
.u-mb-5 { margin-bottom: var(--s-5); }
.u-mb-6 { margin-bottom: var(--s-6); }
.u-text-2 { color: var(--c-text-2); }
.u-text-3 { color: var(--c-text-3); }
.u-weight-400 { font-weight: 400; }
.u-weight-500 { font-weight: 500; }
.u-nowrap { white-space: nowrap; }
.u-cursor-pointer { cursor: pointer; }
.u-text-center { text-align: center; }

/* ---------- Section padding (Listen-Block mit Bottom-Air) ---------- */
.section-pad { padding-bottom: var(--s-7); }

/* ---------- Count-Badge (prominent: große Zahl + kleines Label darunter) ---------- */
.count-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 16px;
  border-radius: var(--r-md);
  background: var(--c-brand);
  color: var(--c-on-brand);
  line-height: 1;
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
}
.count-badge__num {
  font-size: var(--fs-500);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.count-badge__label {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.92;
}
.count-badge.is-empty {
  background: var(--c-surface-2);
  color: var(--c-text-3);
  border: 1px solid var(--c-line);
}
.count-badge.is-empty .count-badge__num {
  font-size: var(--fs-400);
  color: var(--c-text-2);
}
/* Kleine Variante für Listenzeilen */
.count-badge--sm {
  flex-direction: row;
  gap: 6px;
  padding: 4px 12px;
  min-width: 0;
}
.count-badge--sm .count-badge__num { font-size: var(--fs-300); }
.count-badge--sm .count-badge__label { margin-top: 0; }

/* ---------- Group-Tabs (Dashboard, v2.0) ---------- */
.group-tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--s-5)) var(--s-4);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--c-line);
  -webkit-overflow-scrolling: touch;
}
.group-tabs::-webkit-scrollbar { display: none; }
.group-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-3) var(--s-4);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-300);
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.group-tab__name { letter-spacing: -0.01em; }
.group-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-3);
  font-size: var(--fs-100);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.group-tab:hover { color: var(--c-text); border-bottom-color: var(--c-line-2); }
.group-tab.is-active {
  color: var(--c-text);
  border-bottom-color: var(--c-brand);
  font-weight: 700;
}
.group-tab.is-active .group-tab__count {
  background: var(--c-brand);
  color: var(--c-on-brand);
}
.group-tab--add {
  color: var(--c-brand-press);
  font-weight: 600;
}
.group-tab--add:hover {
  color: var(--c-brand-press);
  border-bottom-color: var(--c-brand-line);
}
.group-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* ---------- Dashboard (App-artig) ---------- */
.dashboard-greet h1 {
  font-size: clamp(28px, 6vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.dashboard-greet .lede {
  font-size: var(--fs-300);
  color: var(--c-text-2);
}

/* --- Hero-List-Card: prominent „Heute aktiv" --- */
.hero-list-card {
  display: block;
  background: var(--c-text);
  color: var(--c-on-dark);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5);
  text-decoration: none;
  margin-bottom: var(--s-4);
  position: relative;
  overflow: hidden;
  transition: transform 100ms ease, box-shadow 200ms ease;
  box-shadow: 0 8px 24px rgba(15, 30, 30, 0.12);
}
.hero-list-card::before {
  content: '';
  position: absolute;
  inset: 0 0 -40% 60%;
  background:
    radial-gradient(circle at 80% 20%, rgba(123, 183, 63, 0.45) 0%, transparent 60%);
  pointer-events: none;
}
.hero-list-card:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(15, 30, 30, 0.18); }
.hero-list-card:active { transform: translateY(1px); }
.hero-list-card__top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
}
.hero-list-card__eyebrow {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.hero-list-card__count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--c-brand);
  color: var(--c-on-brand);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.hero-list-card__num { font-size: var(--fs-400); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hero-list-card__lbl { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.06em; }
.hero-list-card__name {
  position: relative;
  margin: var(--s-3) 0 var(--s-1);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-list-card__sub {
  position: relative;
  margin: 0 0 var(--s-4);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-300);
}
.hero-list-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--c-brand);
}

/* Choice-Variante: zwei explizite Aktionen im Hero-Card */
.hero-list-card--choice .hero-list-card__name-link {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 120ms ease;
}
.hero-list-card--choice .hero-list-card__name-link:hover {
  border-bottom-color: var(--c-brand);
}
.hero-list-card__choice {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.hero-choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  text-decoration: none;
  min-height: 64px;
  transition: transform 80ms ease, background 140ms ease, border-color 140ms ease;
}
.hero-choice:active { transform: translateY(1px); }
.hero-choice__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.hero-choice__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-choice__title {
  font-weight: 700;
  font-size: var(--fs-300);
  letter-spacing: -0.01em;
}
.hero-choice__sub {
  font-size: var(--fs-100);
  opacity: 0.78;
  overflow-wrap: anywhere;
}
.hero-choice--add {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.hero-choice--add:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.22);
}
.hero-choice--shop {
  background: var(--c-brand);
  border: 1px solid var(--c-brand);
  color: var(--c-on-brand);
}
.hero-choice--shop:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); }
.hero-choice--shop .hero-choice__sub { color: rgba(15, 30, 30, 0.7); opacity: 1; }
@media (max-width: 480px) {
  .hero-list-card__choice { grid-template-columns: 1fr; }
}

/* --- Quick-Actions: 4er-Grid Icon+Label --- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s-3) var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  text-align: center;
  min-height: 80px;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
.quick-action:hover {
  border-color: var(--c-brand-line);
  background: var(--c-brand-tint);
}
.quick-action:active { transform: translateY(1px); }
.quick-action__icon {
  font-size: 22px;
  line-height: 1;
}
.quick-action__label {
  font-size: var(--fs-100);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 380px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* --- Recent-Lists Carousel --- */
.recent-lists {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--s-5)) var(--s-5);
  padding: 4px var(--s-5) var(--s-3);
}
.recent-lists::-webkit-scrollbar { display: none; }
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  scroll-snap-align: start;
  min-height: 130px;
  transition: border-color 120ms, transform 80ms;
}
.recent-list:hover { border-color: var(--c-brand-line); }
.recent-list:active { transform: translateY(1px); }
.recent-list__count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--s-2);
}
.recent-list__num {
  font-size: var(--fs-600);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--c-brand-press);
}
.recent-list__check {
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 0.9;
  color: var(--c-text-3);
}
.recent-list__lbl {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
  font-weight: 600;
}
.recent-list__name {
  font-weight: 700;
  font-size: var(--fs-300);
  margin-top: auto;
  overflow-wrap: anywhere;
}
.recent-list__group {
  font-size: var(--fs-100);
  color: var(--c-text-3);
  overflow-wrap: anywhere;
}
.recent-list.is-empty .recent-list__name { color: var(--c-text-2); font-weight: 600; }
@media (min-width: 640px) {
  .recent-lists {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    overflow-x: visible;
    padding: 0;
    margin: 0 0 var(--s-5);
  }
}

/* --- Group-Rows: kompakt, eine Zeile pro Gruppe --- */
.group-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.group-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0;
}
.group-row__main {
  flex: 1;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  color: inherit;
}
.group-row__main:hover { background: var(--c-surface-2); }
.group-row__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.group-row__name {
  font-weight: 700;
  font-size: var(--fs-400);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.group-row__count {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.group-row__count.is-active {
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
}
.group-row__sub {
  margin: 4px 0 0;
  color: var(--c-text-3);
  font-size: var(--fs-200);
  overflow-wrap: anywhere;
}
.group-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-3);
  border-left: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-text-2);
  min-width: 56px;
}
.group-row__icon:hover { background: var(--c-surface-2); }

/* --- Konto-Row kompakt --- */
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.account-row__main { min-width: 0; }
.account-row__name { font-weight: 700; font-size: var(--fs-300); overflow-wrap: anywhere; }
.account-row__email { color: var(--c-text-3); font-size: var(--fs-200); overflow-wrap: anywhere; }
.account-row__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.account-row .tag-mini.is-verified {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-line);
  color: var(--c-brand-press);
}

/* --- Floating Action Button (Mobile) --- */
.fab {
  position: fixed;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: calc(max(var(--s-5), env(safe-area-inset-bottom)) + 8px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 300;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(15, 30, 30, 0.22), 0 4px 12px rgba(15, 30, 30, 0.12);
  z-index: 80;
  transition: transform 140ms ease, box-shadow 140ms ease;
  line-height: 1;
}
.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15, 30, 30, 0.28), 0 6px 14px rgba(15, 30, 30, 0.14);
}
.fab:active { transform: translateY(0); }
@media (min-width: 1024px) {
  .fab { display: none; }   /* auf Desktop versteckt — Quick-Actions reichen */
}

/* ---------- Dashboard: Gruppen-Karten + Listen-Liste ---------- */
.dashboard-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.dashboard-group__header {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
}
.dashboard-group__title { min-width: 0; flex: 1; }
.dashboard-group__title h3 {
  margin: 0;
  font-size: var(--fs-500);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.dashboard-group__sub {
  margin: 4px 0 0;
  color: var(--c-text-3);
  font-size: var(--fs-200);
  overflow-wrap: anywhere;
}
.dashboard-group__meta {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-shrink: 0;
}
.dashboard-lists {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dashboard-lists__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  min-height: 56px;
  min-width: 0;
  transition: border-color 120ms ease, background 120ms ease;
}
.dashboard-lists__link:hover {
  border-color: var(--c-brand-line);
  background: var(--c-brand-tint);
}
.dashboard-lists__link.is-empty .dashboard-lists__name {
  color: var(--c-text-3);
  font-weight: 500;
}
.dashboard-lists__name {
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: var(--fs-300);
}
@media (min-width: 640px) {
  .dashboard-lists__name { font-size: var(--fs-400); }
}
.dashboard-lists__count { flex-shrink: 0; }
.dashboard-group__actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-200);
}

/* ---------- Preisrange-Card (Item-View) ---------- */
.price-range-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.price-range-row__nums {
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.price-range-row__sep { color: var(--c-text-3); font-weight: 400; }
.price-range-row__typical {
  font-size: var(--fs-300);
  color: var(--c-brand-press);
}
.price-range-row__age {
  font-size: var(--fs-200);
}

.price-history {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-200);
  border-top: 1px solid var(--c-line);
}
.price-history__h {
  font-size: var(--fs-200);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
  font-weight: 600;
  margin: 0;
}
.price-history__item {
  padding: 6px 0;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.price-history__price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
}
.price-history__meta {
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

/* ---------- KI-Funktions-Cards ---------- */
.ai-fn-card__header { display: flex; gap: var(--s-3); align-items: flex-start; }
.ai-fn-card__form .form-row + .form-row { margin-top: var(--s-3); }
.ai-fn-card__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.ai-progress {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
}
.ai-progress__bar {
  position: relative;
  height: 8px;
  background: var(--c-line);
  border-radius: 999px;
  overflow: hidden;
}
.ai-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--c-brand);
  border-radius: 999px;
  transition: width 200ms ease-out;
}
.ai-progress__meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-2);
  font-size: var(--fs-200);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}
.ai-progress__log {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-200);
  color: var(--c-text-2);
  max-height: 180px;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: var(--s-2) var(--s-3);
}
.ai-progress__log li {
  padding: 2px 0;
  border-top: 1px dashed var(--c-line);
}
.ai-progress__log li:first-child { border-top: 0; }

.ai-result {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  color: var(--c-brand-press);
  font-size: var(--fs-200);
  overflow-wrap: anywhere;
}
.ai-result.is-error {
  background: #fff2f0;
  border-color: #f3c2bd;
  color: #8a1c10;
}

/* ---------- Favoriten (Stores) ---------- */
/* Hervorhebung: brand-tinted Hintergrund, kräftigere Brand-Linie. */
.is-favorite {
  background: var(--c-brand-tint) !important;
  border-color: var(--c-brand-line) !important;
}
.fav-star {
  display: inline-block;
  font-size: 1.05em;
  color: var(--c-brand-press);
  line-height: 1;
}
.fav-toggle-btn {
  background: transparent;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  padding: 0 var(--s-3);
  min-height: 36px;
  font-size: var(--fs-200);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-2);
}
.fav-toggle-btn.is-on {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-line);
  color: var(--c-brand-press);
}
.fav-toggle-btn:hover { background: var(--c-surface-2); }
.fav-toggle-btn.is-on:hover { background: var(--c-brand-tint); filter: brightness(0.97); }
.fav-toggle-btn.is-disabled,
.fav-toggle-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fav-toggle-btn:disabled:hover { background: transparent; }

.fav-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  color: var(--c-brand-press);
  font-size: var(--fs-200);
  font-weight: 600;
}
.fav-count-badge.is-full {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text-2);
}

/* ---------- Stores-Übersicht (Marken-Karten + Filialzeilen) ---------- */
.brand-card { padding: 0; margin-bottom: var(--s-4); }
.brand-card__header {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.brand-card__title { margin: 0; font-size: var(--fs-500); overflow-wrap: anywhere; }
.brand-card__sub { margin: 2px 0 0; font-size: var(--fs-200); color: var(--c-text-3); }
.branch-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
}
.branch-row + .branch-row { border-top: 1px solid var(--c-line); }
.branch-row .branch-info { min-width: 0; flex: 1; }
.branch-row .branch-info .name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.branch-row .branch-info .meta {
  color: var(--c-text-3);
  font-size: var(--fs-200);
}
.branch-row .branch-addr {
  color: var(--c-text-2);
  font-weight: 400;
}
.distance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  border: 1px solid var(--c-brand-line);
  font-size: var(--fs-100);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: 4px;
}
.branch-row .branch-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.branch-row.is-archived { opacity: 0.55; }
@media (min-width: 640px) {
  .branch-row { flex-direction: row; align-items: center; }
  .branch-row .branch-actions { justify-content: flex-end; }
}

/* ---------- Item-Autocomplete (Custom Dropdown — iOS-tauglich) ---------- */
.autocomplete { position: relative; }
.autocomplete__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--c-text);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(15, 30, 30, 0.18), 0 2px 6px rgba(15, 30, 30, 0.08);
  max-height: 320px;
  overflow-y: auto;
  font-size: var(--fs-300);
}
.autocomplete__item {
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
}
.autocomplete__item::before {
  content: '↵';
  font-size: 12px;
  color: var(--c-text-3);
  flex-shrink: 0;
}
.autocomplete__item + .autocomplete__item {
  border-top: 1px solid var(--c-line);
  border-radius: 0;
}
.autocomplete__item:first-child { border-top: 0; }
.autocomplete__item:hover,
.autocomplete__item.is-active {
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  font-weight: 600;
}
.autocomplete__item:hover::before,
.autocomplete__item.is-active::before {
  color: var(--c-brand-press);
}

/* Hierarchischer Autocomplete: Generic-Item + Marken-Varianten direkt drunter */
.autocomplete__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.autocomplete__name {
  font-weight: inherit;
  overflow-wrap: anywhere;
}
.autocomplete__item.is-generic .autocomplete__name {
  font-weight: 700;
}
.autocomplete__variants-hint {
  font-size: var(--fs-100);
  color: var(--c-brand-press);
  background: var(--c-brand-tint);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.autocomplete__brand {
  font-size: var(--fs-100);
  color: var(--c-text-2);
  font-weight: 500;
  background: var(--c-bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.autocomplete__size {
  font-size: var(--fs-100);
  color: var(--c-text-3);
}
.autocomplete__price {
  font-size: var(--fs-100);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
/* Varianten: eingerückt, kleiner Pfeil links statt ↵-Icon */
.autocomplete__item--variant {
  padding-left: 24px;
  font-size: var(--fs-200);
}
.autocomplete__item--variant::before { content: ''; display: none; }
.autocomplete__variant-arrow {
  color: var(--c-text-3);
  font-size: 14px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.autocomplete__item--variant:hover .autocomplete__variant-arrow,
.autocomplete__item--variant.is-active .autocomplete__variant-arrow {
  color: var(--c-brand-press);
}

/* ---------- Stats: Einkaufs-Trips ("Bons") ---------- */
.trip-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.trip-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.trip-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.trip-card__when { display: flex; flex-direction: column; gap: 2px; }
.trip-card__date {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: var(--fs-300);
  font-variant-numeric: tabular-nums;
}
.trip-card__dur {
  color: var(--c-text-3);
  font-size: var(--fs-200);
}
.trip-card__counts {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--c-brand-press);
  flex-shrink: 0;
}
.trip-card__count-num {
  font-size: var(--fs-400);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.trip-card__count-lbl {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.trip-card__sum {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--c-brand-line);
  font-size: var(--fs-200);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.trip-card__meta {
  margin-bottom: var(--s-3);
  font-size: var(--fs-200);
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

/* „Geschäft korrigieren"-Inline-Tool im Trip-Card */
.trip-fix { display: inline-block; margin-left: var(--s-2); margin-top: 6px; }
.trip-fix > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--fs-100);
  font-weight: 500;
}
.trip-fix > summary:hover { color: var(--c-text); border-color: var(--c-line); }
.trip-fix > summary::-webkit-details-marker { display: none; }
.trip-fix[open] > summary { background: var(--c-brand-tint); border-color: var(--c-brand-line); color: var(--c-brand-press); }

.trip-fix__panel {
  margin-top: var(--s-3);
  padding: var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.trip-fix__hint {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-200);
  color: var(--c-text-2);
}
.trip-fix__new {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 540px) {
  .trip-fix__new { grid-template-columns: 1fr; }
}
.trip-fix .btn-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.trip-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}
.trip-card__items li {
  padding: 6px 0;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-200);
}
.trip-card__items li:last-child { border-bottom: 0; }
.trip-card__rank {
  display: inline-block;
  min-width: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--c-text-3);
  font-size: var(--fs-100);
}
.trip-card__name { font-weight: 600; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.trip-card__qty { color: var(--c-text-3); }
.trip-card__time {
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-100);
}
.trip-card__price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-brand-press);
  margin-left: auto;
}

/* ---------- Qty-Picker (Stk/Gewicht/Inhalt + Tag-Pills, v2.0) ---------- */
.qty-picker {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.qty-picker__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qty-picker__group-label {
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  padding: 8px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-200);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-height: 36px;
  line-height: 1;
  transition: background 100ms ease, border-color 100ms ease, transform 60ms ease;
}
.chip:hover { background: var(--c-surface-2); }
.chip:active { transform: translateY(1px); }
.chip.is-active {
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-color: var(--c-brand);
}

.qty-picker__free .label--xs { margin-bottom: 4px; }
.qty-picker__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  font-size: var(--fs-200);
  font-weight: 600;
  user-select: none;
  min-height: 36px;
  line-height: 1;
  transition: background 100ms ease, border-color 100ms ease;
}
.tag-pill:hover { background: var(--c-surface-2); }
.tag-pill input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tag-pill.is-on,
.tag-pill:has(input[type="checkbox"]:checked) {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-line);
  color: var(--c-brand-press);
}

/* Qty-Picker-Host: Add-Form als <details> mit summary — deutlich klickbar als Card */
.qty-picker-host { margin-top: var(--s-3); }
.qty-picker-host__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-200);
  color: var(--c-text);
  font-weight: 600;
  min-height: 48px;
  transition: background .12s, border-color .12s, color .12s;
}
.qty-picker-host__summary::-webkit-details-marker { display: none; }
.qty-picker-host__summary::marker { content: ''; }
.qty-picker-host__icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.qty-picker-host__label { flex: 1; min-width: 0; }
.qty-picker-host__chevron {
  width: 20px;
  height: 20px;
  color: var(--c-text-3);
  transition: transform .2s ease;
  flex-shrink: 0;
  display: block;
}
.qty-picker-host:hover .qty-picker-host__summary { border-color: var(--c-brand-line); background: var(--c-brand-tint); color: var(--c-brand-press); }
.qty-picker-host[open] .qty-picker-host__summary {
  border-color: var(--c-brand);
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.qty-picker-host[open] .qty-picker-host__chevron { transform: rotate(180deg); }
.qty-picker-host > .u-mt-3 {
  border: 1px solid var(--c-brand);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-top: 0 !important;
  background: var(--c-surface);
}

/* Status-Tags im Item-Title (Dringend/Angebot) */
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.status-tag--urgent {
  background: rgba(217, 70, 70, 0.14);
  color: #a8311c;
  border: 1px solid rgba(217, 70, 70, 0.32);
}
.status-tag--sale {
  background: rgba(208, 162, 24, 0.16);
  color: #8a6a0d;
  border: 1px solid rgba(208, 162, 24, 0.32);
}

/* Details-Picker im Meta-Bereich (analog cat-pick) */
.details-pick { display: inline; position: relative; }
.details-pick > summary { list-style: none; cursor: pointer; display: inline; }
.details-pick > summary::-webkit-details-marker { display: none; }
.details-pick > .popover {
  margin-top: var(--s-2);
}
@media (min-width: 640px) {
  .details-pick { position: relative; }
  .details-pick > .popover {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 12;
    min-width: 320px;
    max-width: 380px;
    margin-top: 0;
  }
}
@media (max-width: 639px) {
  .list-row .details-pick { width: 100%; }
  .list-row .details-pick > .popover { width: 100%; }
}

/* ---------- Session-Bar (v2.0): Einkaufs-Session ---------- */
.session-bar {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.session-bar--active {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-text);
  color: var(--c-on-dark);
  border-color: var(--c-text);
}
.session-bar--active .session-bar__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.session-bar--active .session-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session-bar--active .session-bar__title { font-weight: 700; font-size: var(--fs-300); overflow-wrap: anywhere; }
.session-bar--active .session-bar__sub { font-size: var(--fs-200); color: rgba(255, 255, 255, 0.7); overflow-wrap: anywhere; }

.session-bar--active .session-bar__menu { position: relative; }
.session-bar--active .session-bar__menu summary {
  list-style: none;
  cursor: pointer;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.session-bar--active .session-bar__menu summary::-webkit-details-marker { display: none; }
.session-bar--active .session-bar__menu[open] summary { background: rgba(255, 255, 255, 0.22); }
.session-bar--active .session-bar__menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 280px;
  padding: var(--s-4);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}

.session-bar--idle { background: var(--c-brand-tint); border-color: var(--c-brand-line); }
.session-bar--idle .session-bar__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.session-bar--idle .session-bar__summary::-webkit-details-marker { display: none; }
.session-bar--idle .session-bar__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.session-bar--idle .session-bar__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.session-bar--idle .session-bar__title { font-weight: 700; color: var(--c-brand-press); font-size: var(--fs-300); }
.session-bar--idle .session-bar__sub { font-size: var(--fs-200); color: var(--c-text-2); overflow-wrap: anywhere; }
.session-bar--idle .session-bar__chevron {
  font-size: 22px;
  color: var(--c-brand-press);
  transition: transform 200ms ease;
}
.session-bar--idle[open] .session-bar__chevron { transform: rotate(90deg); }
.session-bar--idle .session-bar__menu-panel {
  padding: var(--s-4);
  border-top: 1px solid var(--c-brand-line);
  background: var(--c-surface);
}

/* ---------- Mode-Bar (Plan vs Shop) — nur Mobile/Tablet ---------- */
.mode-bar { display: none; }
@media (max-width: 1023px) {
  .mode-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    margin-bottom: var(--s-4);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
  }
}
.mode-bar-base-keep {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}
.mode-bar__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.mode-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mode-bar__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: var(--fs-300);
}
.mode-bar__sub {
  font-size: var(--fs-200);
  color: var(--c-text-3);
  overflow-wrap: anywhere;
}
.mode-bar__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  text-decoration: none;
  color: var(--c-text);
  font-size: var(--fs-200);
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
}
.mode-bar__action:hover { background: var(--c-surface-2); }

/* Shop-Mode-Variante: kräftige brand-Farbe */
.mode-bar--shop {
  background: var(--c-text);
  color: var(--c-on-dark);
  border-color: var(--c-text);
}
.mode-bar--shop .mode-bar__icon {
  background: var(--c-brand);
  color: var(--c-on-brand);
}
.mode-bar--shop .mode-bar__sub { color: rgba(255, 255, 255, 0.7); }
.mode-bar--shop .mode-bar__action {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.mode-bar--shop .mode-bar__action:hover { background: rgba(255, 255, 255, 0.2); }

/* Add-Form als <details> kapseln, im Shop-Mode collapsed */
.add-form-host { padding: 0; }
.add-form-host[open] { padding: var(--s-5); }
.add-form-host:not([open]) { padding: 0; }
.add-form-host__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--c-text);
  border-radius: var(--r-md);
}
.add-form-host__summary::-webkit-details-marker { display: none; }
.add-form-host__summary:hover { background: var(--c-surface-2); }
.add-form-host__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.add-form-host[open] .add-form-host__summary {
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--s-4);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.add-form-host[open] .add-form-host__icon {
  background: var(--c-brand);
  color: var(--c-on-brand);
}

/* ---------- Shop-Mode: Liste optimiert für Abhaken ---------- */
.is-shop-mode .list-row {
  padding: var(--s-4) var(--s-4);
}
.is-shop-mode .list-row .item-meta { font-size: var(--fs-100); opacity: 0.65; }
.is-shop-mode .list-row .detail-line,
.is-shop-mode .list-row .price-hint { font-size: var(--fs-100); }

/* Im Shop-Mode wird die Abhaken-Aktion stark dominiert */
.is-shop-mode .list-row .list-row-actions {
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}
.is-shop-mode .list-row .list-row-actions > form:first-child { flex: 1 1 70%; }
.is-shop-mode .list-row .list-row-actions > form:first-child .btn-primary {
  width: 100%;
  min-height: 56px;
  font-size: var(--fs-400);
  font-weight: 700;
}
.is-shop-mode .list-row .list-row-actions .store-pick { flex: 0 0 auto; }
.is-shop-mode .list-row .list-row-actions .popover-summary {
  min-height: 56px;
  width: 56px;
  padding: 0;
  justify-content: center;
}
.is-shop-mode .list-row .list-row-actions .popover-summary > * + * { display: none; }
.is-shop-mode .list-row .list-row-actions .btn-icon {
  min-height: 56px;
  width: 56px;
}
@media (min-width: 640px) {
  .is-shop-mode .list-row .list-row-actions { flex-wrap: wrap; }
}

/* Im Shop-Mode: Stores-Summary ist redundant (Filter ist auf Store gepinnt) → ausblenden */
.is-shop-mode .stores-summary,
.is-shop-mode .filter-tabs { display: none; }

/* ---------- Nearby-Card (bei Geo-Fail) ---------- */
.nearby-card {
  background: var(--c-text);
  color: var(--c-on-dark);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.nearby-card__head { margin-bottom: var(--s-3); }
.nearby-card__head .u-text-2 { color: rgba(255, 255, 255, 0.7); }
.nearby-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-md);
  overflow: hidden;
}
.nearby-card__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.nearby-card__row:first-child { border-top: 0; }
.nearby-card__info { flex: 1; min-width: 0; }
.nearby-card__name { font-weight: 700; overflow-wrap: anywhere; }
.nearby-card__sub {
  font-size: var(--fs-200);
  color: rgba(255, 255, 255, 0.65);
  overflow-wrap: anywhere;
}
.nearby-card__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.nearby-card__dist {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-200);
  background: rgba(123, 183, 63, 0.18);
  color: var(--c-brand);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- Top-of-list Layout (Desktop: 2-Spalten) ---------- */
@media (min-width: 1024px) {
  .stores-summary,
  .add-form-host { margin-bottom: var(--s-4); }
  /* Stores-Summary + Add-Form side-by-side, falls beide vorhanden */
  .section-pad > .stores-summary + .add-form-host {
    /* keine Magie — natural flow stays vertikal, aber mehr Atem */
  }
  .section-pad .default-store-hint { margin-bottom: var(--s-4); }
  /* Ein etwas breiterer Atemraum vor dem 'Offen'-Heading */
  .section-pad .section-title { margin-top: var(--s-5); }
}

/* ---------- Stores-Summary (oben in der Liste: „Wo musst du hin?") ---------- */
.stores-summary {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.stores-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.stores-summary__head h3 {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.stores-summary__head .u-text-3 {
  font-size: var(--fs-200);
  color: var(--c-text-3);
}
.stores-summary__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2);
}
.stores-summary__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
  min-height: 64px;
}
.stores-summary__tile:hover {
  border-color: var(--c-brand-line);
  background: var(--c-brand-tint);
}
.stores-summary__tile:active { transform: translateY(1px); }
.stores-summary__tile.is-active {
  border-color: var(--c-brand);
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
}
.stores-summary__count {
  font-size: var(--fs-500);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-brand-press);
}
.stores-summary__tile.is-active .stores-summary__count { color: var(--c-text); }
.stores-summary__name {
  font-size: var(--fs-200);
  font-weight: 600;
  color: inherit;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* ---------- Filter-Tabs (Laden-Filter direkt unter „Offen") ---------- */
.filter-tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: calc(var(--s-2) * -1) 0 var(--s-4);
  padding: var(--s-2) 0 0;
  border-bottom: 1px solid var(--c-line);
  -webkit-overflow-scrolling: touch;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-3) var(--s-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--c-text-2);
  text-decoration: none;
  font-size: var(--fs-200);
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
.filter-tab .count {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-100);
  color: var(--c-text-3);
  background: var(--c-surface-2);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}
.filter-tab:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-line-2);
}
.filter-tab.is-active {
  color: var(--c-text);
  border-bottom-color: var(--c-brand);
  font-weight: 600;
}
.filter-tab.is-active .count {
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
}

/* ---------- Pagination (Prev/Next + Status) ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) 0;
}
.pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-200);
  min-height: 40px;
  white-space: nowrap;
}
.pagination__link:hover { background: var(--c-surface-2); border-color: var(--c-brand-line); color: var(--c-brand-press); }
.pagination__link.is-disabled {
  background: var(--c-surface-2);
  color: var(--c-text-3);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
.pagination__info {
  font-size: var(--fs-200);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  flex: 1;
  text-align: center;
}

/* ---------- Filter-Pills (Listen-Filter nach Laden) ---------- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-200);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.filter-pill .count {
  color: var(--c-text-3);
  font-weight: 500;
}
.filter-pill:hover { background: var(--c-surface-2); }
.filter-pill.is-active {
  background: var(--c-text);
  color: var(--c-on-dark);
  border-color: var(--c-text);
}
.filter-pill.is-active .count { color: rgba(255,255,255,0.7); }

/* ---------- Default-Laden Hinweis (oben in der Liste) ----------
   <details>-basiert: Summary zeigt Status + "Ändern"/"Setzen"-Pille,
   Klick öffnet inline ein Form mit Select (auto-submit) + optional "Entfernen". */
.default-store-hint {
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  color: var(--c-brand-press);
  font-size: var(--fs-200);
  overflow: hidden;
}
.default-store-hint.is-empty {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text-2);
}
.default-store-hint__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  overflow-wrap: anywhere;
}
.default-store-hint__summary::-webkit-details-marker { display: none; }
.default-store-hint__text { flex: 1; min-width: 0; }
.default-store-hint__action {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-brand-line);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--c-brand-press);
}
.default-store-hint.is-empty .default-store-hint__action {
  border-color: var(--c-line);
  color: var(--c-text-2);
}
.default-store-hint[open] .default-store-hint__action { display: none; }
.default-store-hint__form {
  display: grid;
  gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-4);
}
.default-store-hint__buttons {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ---------- Kategorie-Picker pro Item ---------- */
.cat-pick { display: inline; position: relative; }
.cat-pick__summary {
  list-style: none;
  cursor: pointer;
  display: inline;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-line-2);
}
.cat-pick__summary:hover { text-decoration-color: var(--c-brand); }
.cat-pick__summary::-webkit-details-marker { display: none; }
.cat-pick > .popover {
  /* Mobile: Popover sitzt unter dem Trigger im Fluss, volle Breite */
  margin-top: var(--s-2);
}
@media (min-width: 640px) {
  .cat-pick { position: relative; }
  .cat-pick > .popover {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 12;
    min-width: 260px;
    margin-top: 0;
  }
}
@media (max-width: 639px) {
  .list-row .cat-pick { width: 100%; }
  .list-row .cat-pick > .popover { width: 100%; }
}

/* Cancel-/Link-Button im Popover: kein Default-Browser-Outline. Fokus
   markieren wir nur mit subtiler Hintergrund-Umrandung (kein 2px-Solid). */
.popover .btn-link,
.popover-summary,
.cat-pick__summary,
.default-store-hint__summary {
  -webkit-tap-highlight-color: transparent;
}
.popover .btn-link:focus { outline: none; }
.popover .btn-link:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Add-Form: optionale Laden-Auswahl ---------- */
.add-form .store-row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .add-form .store-row { grid-template-columns: 1fr; }
}

/* ---------- Tag/inactive (kompakt) ---------- */
.tag-mini {
  margin: 0;
  padding: 1px 8px;
  font-size: var(--fs-100);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-2);
  font-weight: 500;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.inline-form { display: inline; }

/* ---------- List-Item-Reihen (mobile-first) ---------- */
/* Mobile: Item-Info oben, Aktionen darunter — keine schmale Action-Spalte mehr.
   Ab Tablet (640px+) nebeneinander wie zuvor. */
.list-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
}
.list-row + .list-row { border-top: 1px solid var(--c-line); }
.list-row .list-row-info { min-width: 0; flex: 1; }
.list-row .list-row-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: nowrap;          /* Mobile: alle Buttons in EINER Zeile */
  flex-shrink: 0;
  align-items: center;
  margin-top: var(--s-1);
}
.list-row .list-row-actions > * { flex-shrink: 0; }
.list-row .list-row-actions > form { display: inline-flex; }
.list-row .list-row-actions .store-pick { flex: 1 1 auto; min-width: 0; }
.list-row .list-row-actions .popover-summary { width: 100%; justify-content: center; }
@media (min-width: 640px) {
  .list-row {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
  }
  .list-row .list-row-actions { flex-wrap: wrap; margin-top: 0; }
  .list-row .list-row-actions .store-pick { flex: 0 0 auto; }
  .list-row .list-row-actions .popover-summary { width: auto; }
}

/* Item-Name & Detail-Zeilen: robustes Wrapping (kein break-all auf iOS Safari) */
.list-row .item-title {
  font-weight: 600;
  font-size: var(--fs-300);
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
@media (min-width: 640px) {
  .list-row .item-title { font-size: var(--fs-400); }
}
.list-row .item-meta {
  font-size: var(--fs-100);
  margin-top: 2px;
  color: var(--c-text-3);
  overflow-wrap: anywhere;
  line-height: 1.4;
}
@media (min-width: 640px) {
  .list-row .item-meta { font-size: var(--fs-200); }
}
.list-row .detail-line,
.list-row .price-hint {
  font-size: var(--fs-100);
}
@media (min-width: 640px) {
  .list-row .detail-line,
  .list-row .price-hint { font-size: var(--fs-200); }
}

/* Add-Form Layout: mobile gestapelt, desktop kompakt */
.add-form { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .add-form .qty-row {
    display: grid; gap: var(--s-3);
    grid-template-columns: 1fr auto; align-items: end;
  }
}

/* ---------- Section-Titel (Listen-Überschriften) ---------- */
.section-title {
  font-size: var(--fs-500);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
}
.section-title--spaced { margin-top: var(--s-7); }
.section-title .count {
  color: var(--c-text-3);
  font-weight: 500;
}

/* ---------- Listen-Tabs (Multi-Listen-Umschalter) ---------- */
.list-tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}
.list-tabs .tag-chip {
  margin: 0;
  padding: 6px 12px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-200);
  font-weight: 500;
}
.list-tabs .tag-chip.is-active {
  background: var(--c-text);
  color: var(--c-on-dark);
  border-color: var(--c-text);
}
.list-tabs .tag-chip.is-add {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-line);
  color: var(--c-brand-press);
}

/* ---------- Detail-Zeilen (Plan-Hinweis, abgehakte Meta) ---------- */
.detail-line {
  font-size: var(--fs-200);
  margin-top: 4px;
  color: var(--c-brand-press);
  overflow-wrap: anywhere;
}
.price-hint {
  font-size: var(--fs-200);
  margin-top: 2px;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------- Nährwert-Badges (Protein / Ballaststoffe) ---------- */
.nutri-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-left: 4px;
  white-space: nowrap;
}
.nutri-badge--protein {
  background: rgba(123, 183, 63, 0.18);
  color: var(--c-brand-press);
  border: 1px solid var(--c-brand-line);
}
.nutri-badge--fiber {
  background: rgba(166, 124, 82, 0.16);
  color: #6b4a23;
  border: 1px solid rgba(166, 124, 82, 0.4);
}
.nutri-badge--omega3 {
  background: #e0f0fb;
  color: #1f4a72;
  border: 1px solid #c4d8ec;
}
.nutri-badge__icon { font-size: 11px; line-height: 1; }
/* Inline-Variante in der Autocomplete-Dropdown */
.autocomplete__item .nutri-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 0 6px;
}

/* ---------- Slim-Add-Modus (Fokus-Screen "Artikel eintragen") ---------- */
/* Sticky-Bar direkt unter dem Site-Header. Dezent, mit klarer „Fertig"-Aktion
   zurück zum Dashboard. */
.slim-add-bar {
  position: sticky;
  top: 56px;
  z-index: 40;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 640px) { .slim-add-bar { top: 60px; } }
@media (min-width: 960px) { .slim-add-bar { top: 64px; } }

.slim-add-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.slim-add-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 8px;
  border-radius: 10px;
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-200);
  background: transparent;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.slim-add-bar__back:hover { background: var(--c-bg); color: var(--c-brand-press); }
.slim-add-bar__back:active { transform: translateY(1px); }
.slim-add-bar__back span[aria-hidden] { font-size: 18px; line-height: 1; }
.slim-add-bar__back-label { line-height: 1; }
/* Auf engen Phones: Title-Block ausblenden, der lange „Zurück zum Dashboard"-Label
   bleibt klar. Listen-Name + offen-Count sieht der User in der Tab-Sektion ohnehin. */
@media (max-width: 480px) {
  .slim-add-bar__title { display: none !important; }
}

.slim-add-bar__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.slim-add-bar__list {
  font-weight: 700;
  font-size: var(--fs-300);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slim-add-bar__sub {
  font-size: var(--fs-100);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.slim-add-bar__shop {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-text-2);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.slim-add-bar__shop:hover { color: var(--c-text); border-color: var(--c-line-2); }

/* Shop-Modus ("Einkaufen vor Ort"): den "+"-Button zum nachträglichen Hinzufügen
   farblich klar hervorheben — vorher dezentes Grau, jetzt gefülltes Markengrün mit
   weißem Plus (analog zum Add-FAB), damit er beim Einkaufen sofort auffällt.
   Gilt NUR im Shop-Modus via .slim-shop-bar — der Warenkorb-Button im Add-Modus
   (gleiche Klasse, andere Bar) bleibt unverändert dezent. */
.slim-shop-bar .slim-add-bar__shop {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(123, 183, 63, .40);
}
.slim-shop-bar .slim-add-bar__shop:hover {
  background: var(--c-brand-hover);
  border-color: var(--c-brand-hover);
  color: #fff;
}

/* Im Slim-Add-Modus: Hero, Session-Bar, Filter etc. weg — der User soll fokussieren.
   Die offenen Items werden NICHT ausgeblendet, sondern via Tabs in die slim-add-tabs-section
   gerendert. Die ursprüngliche .section-pad-Sektion mit allen Items bleibt versteckt. */
body.is-slim-add .session-bar,
body.is-slim-add .session-bar--idle,
body.is-slim-add .session-bar--active,
body.is-slim-add .list-hero,
body.is-slim-add .list-tabs,
body.is-slim-add .filter-tabs,
body.is-slim-add .open-list-store-banner,
body.is-slim-add .default-store-hint,
body.is-slim-add .nearby-card,
body.is-slim-add .cat-block,
body.is-slim-add .empty-state,
body.is-slim-add .section-pad > h2.section-title,
body.is-slim-add .section-pad > .card.is-flush,
body.is-slim-add .section-pad > .pagination,
body.is-slim-add .section-pad > .inline-actions,
body.is-slim-add .recently-done,
body.is-slim-add .open-empty,
body.is-slim-add .fab {
  display: none !important;
}
body.is-slim-add .add-form-host {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: none;
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
  margin-bottom: var(--s-4);
}
body.is-slim-add .add-form-host[open] {
  border-color: var(--c-brand);
  box-shadow: 0 4px 14px rgba(123, 183, 63, .18);
}
/* Summary bleibt sichtbar — Klick öffnet das Formular */
body.is-slim-add .add-form-host__summary { display: flex; }

/* Schwebender Add-FAB im Slim-Add-Modus — analog zum Dashboard-FAB */
.slim-add-fab {
  position: fixed;
  right: max(var(--s-4), env(safe-area-inset-right));
  bottom: calc(max(var(--s-4), env(safe-area-inset-bottom)) + var(--s-3));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  border: 0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 10px 24px rgba(15, 30, 30, .28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .12s ease, box-shadow .15s;
}
.slim-add-fab:hover { background: var(--c-brand-hover); transform: scale(1.04); }
.slim-add-fab:active { transform: scale(.96); }
.slim-add-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.8); transition: opacity .15s, transform .15s; }
body.is-slim-add .section-pad { padding-bottom: var(--s-5); padding-top: 0; }

/* ---------- Slim-Shop-Modus (Einkaufen vor Ort) ---------- */
/* Im Shop-Modus: ALLES ausblenden, was nicht direkt mit dem Einkauf zu tun hat.
   Im Gegensatz zum Slim-Add bleibt hier kein Add-Form sichtbar — die Slim-Shop-
   Sektion bringt ihren eigenen vollständigen Inhalt mit. */
body.is-slim-shop .session-bar,
body.is-slim-shop .session-bar--idle,
body.is-slim-shop .session-bar--active,
body.is-slim-shop .list-hero,
body.is-slim-shop .list-tabs,
body.is-slim-shop .filter-tabs,
body.is-slim-shop .open-list-store-banner,
body.is-slim-shop .default-store-hint,
body.is-slim-shop .nearby-card,
body.is-slim-shop .cat-block,
body.is-slim-shop .empty-state,
body.is-slim-shop .add-form-host,
body.is-slim-shop .section-pad > h2.section-title,
body.is-slim-shop .section-pad > .card.is-flush,
body.is-slim-shop .section-pad > .pagination,
body.is-slim-shop .section-pad > .inline-actions,
body.is-slim-shop .recently-done,
body.is-slim-shop .open-empty,
body.is-slim-shop .fab {
  display: none !important;
}
body.is-slim-shop .section-pad { padding-top: 0; padding-bottom: var(--s-5); }

.slim-shop-section { padding-top: var(--s-4); padding-bottom: var(--s-7); }

/* Store-Banner (aktive Session) */
.slim-shop-store {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--c-text);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  box-shadow: 0 4px 14px rgba(15,30,30,.18);
}
.slim-shop-store__icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.slim-shop-store__main { flex: 1; min-width: 0; }
.slim-shop-store__label { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.slim-shop-store__name {
  font-weight: 700;
  font-size: var(--fs-300);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slim-shop-store__address {
  opacity: .82;
  font-size: var(--fs-100);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slim-shop-store .btn-ghost {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.slim-shop-store .btn-ghost:hover { background: rgba(255,255,255,.22); }

/* OSM-Map-Embed unterhalb der Store-Banner. iframe-Höhe fix für vorhersehbares
   Layout; lädt faul, ohne JS, ohne Vendor-Lib. */
.slim-shop-map {
  margin: calc(var(--s-4) * -1 + var(--s-2)) 0 var(--s-4);
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.slim-shop-map__frame {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}
.slim-shop-map__caption {
  display: flex;
  justify-content: flex-end;
  padding: 6px 10px;
  font-size: var(--fs-100);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.slim-shop-map__caption a { color: var(--c-brand-press); text-decoration: none; }
.slim-shop-map__caption a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .slim-shop-map__frame { height: 150px; }
}

/* „Standort speichern?"-Banner — taucht direkt über dem Slim-Shop-Banner auf,
   wenn User-GPS und Store-Coords stark abweichen oder Store-Coords fehlen. */
.slim-shop-geo-suggest {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, #fff7e6, #ffffff);
  border: 1px solid #f0d58a;
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.slim-shop-geo-suggest[hidden] { display: none !important; }
.slim-shop-geo-suggest__icon { font-size: 24px; flex-shrink: 0; }
.slim-shop-geo-suggest__body {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-200);
}
.slim-shop-geo-suggest__title {
  font-weight: 700;
  color: var(--c-text);
  font-size: var(--fs-300);
}
.slim-shop-geo-suggest__sub {
  color: var(--c-text-2);
  line-height: 1.4;
}
.slim-shop-geo-suggest__form {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  flex-basis: 100%;
  margin-top: var(--s-2);
}

/* Action-Cluster (Wechseln + Beenden) im Slim-Shop-Banner */
.slim-shop-store__actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

/* „🔄 Wechseln"-Popover — öffnet sich unter dem Banner */
.slim-shop-switch { position: relative; }
.slim-shop-switch > summary {
  list-style: none;
  cursor: pointer;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-200);
  white-space: nowrap;
}
.slim-shop-switch > summary:hover { background: rgba(255,255,255,.28); }
.slim-shop-switch > summary::-webkit-details-marker { display: none; }
.slim-shop-switch[open] > summary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-line);
}

.slim-shop-switch__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(92vw, 360px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: var(--s-4);
  color: var(--c-text);
  z-index: 25;
}
.slim-shop-switch__hint {
  font-size: var(--fs-200);
  color: var(--c-text-2);
  margin: 0 0 var(--s-3);
}
.slim-shop-switch__panel .btn-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

/* Mobile: Popover sprengt sonst die Bar — passend zentrieren */
@media (max-width: 540px) {
  .slim-shop-switch__panel {
    right: -8px;
    left: auto;
    width: min(94vw, 340px);
  }
}

/* Store-Picker (keine aktive Session) */
.slim-shop-pick {
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.slim-shop-pick__h { margin: 0 0 var(--s-2); font-size: var(--fs-300); color: var(--c-brand-press); }
.slim-shop-pick__sub { margin: 0 0 var(--s-3); font-size: var(--fs-200); color: var(--c-text); line-height: 1.45; }
.slim-shop-pick__form { display: flex; flex-direction: column; gap: var(--s-2); }

/* Geo-Loading Spinner */
.slim-shop-pick__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-3) 0;
}
.slim-shop-pick__loading[hidden] { display: none; }
.slim-shop-pick__loading .slim-shop-pick__h { margin-top: var(--s-3); }
.slim-shop-pick__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--c-brand-line);
  border-top-color: var(--c-brand);
  animation: slimShopSpin 800ms linear infinite;
}
@keyframes slimShopSpin { to { transform: rotate(360deg); } }

/* Nearby-Stores (Tap-Targets, größer als Dropdown) */
.slim-shop-nearby {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.slim-shop-nearby__row { margin: 0; }
.slim-shop-nearby__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1.5px solid var(--c-brand-line);
  border-radius: var(--r-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  min-height: 56px;
  transition: border-color .12s, background .12s, transform .08s;
}
.slim-shop-nearby__btn:hover { border-color: var(--c-brand); background: var(--c-brand-tint); }
.slim-shop-nearby__btn:active { transform: translateY(1px); }
.slim-shop-nearby__name { font-weight: 700; font-size: var(--fs-300); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.slim-shop-nearby__addr { font-weight: 400; opacity: .8; }

/* Leaflet-Karte im Picker — über der Stores-Liste. Lazy-loaded via CDN.
   Höhe fix, sodass der Layout-Sprung beim Inkremental-Init klein bleibt. */
.slim-shop-pick__map {
  width: 100%;
  height: 280px;
  margin: var(--s-3) 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: #e6e6e6;
}
@media (max-width: 560px) {
  .slim-shop-pick__map { height: 220px; }
}
/* Leaflet-eigenes Popup etwas an die App-Schrift angleichen */
.leaflet-popup-content { font-family: inherit; font-size: var(--fs-200); margin: 10px 12px; }
.leaflet-popup-content .btn { margin-top: 6px; }

/* User-Position als pulsender Punkt — der Default-circleMarker auf dem
   SVG-Overlay-Pane wurde im engen Store-Cluster komplett verdeckt. */
.shop-picker-user-marker { position: relative; pointer-events: auto; }
.shop-picker-user-marker__dot {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px;
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
}
.shop-picker-user-marker__pulse {
  position: absolute; top: 0; left: 0;
  width: 28px; height: 28px;
  background: rgba(37, 99, 235, 0.35);
  border-radius: 50%;
  animation: shop-picker-user-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes shop-picker-user-pulse {
  0%   { transform: scale(0.7); opacity: 0.85; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Store-Marker — grünes Pin mit Einkaufswagen-Glyph. Visuell klar von
   der blauen User-Position getrennt. */
.shop-picker-store-marker {
  display: flex; align-items: flex-start; justify-content: center;
}
.shop-picker-store-marker__pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 40px;
  font-size: 18px;
  color: #fff;
  background: #54805a;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.shop-picker-store-marker__glyph {
  display: inline-block;
  transform: rotate(45deg);
  line-height: 1;
}
.slim-shop-nearby__dist {
  flex-shrink: 0;
  padding: 4px 10px;
  background: var(--c-brand);
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Manueller Picker als Fallback */
.slim-shop-pick__manual { margin-top: var(--s-4); }
.slim-shop-pick__manual[hidden] { display: none; }
.slim-shop-pick__manual-toggle {
  margin-bottom: var(--s-3);
}
.slim-shop-pick__manual-toggle summary {
  cursor: pointer;
  color: var(--c-text-2);
  font-size: var(--fs-200);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--c-text-3);
  text-underline-offset: 3px;
  list-style: none;
}
.slim-shop-pick__manual-toggle summary::-webkit-details-marker { display: none; }
.slim-shop-pick__retry {
  margin: var(--s-2) 0 0;
  text-align: center;
  font-size: var(--fs-200);
}

/* Shop-Liste (Items zum Abhaken) */
.slim-shop-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.slim-shop-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-200);
  transition: background .15s;
}
.slim-shop-row:last-child { border-bottom: 0; }
.slim-shop-row:hover { background: var(--c-bg); }
.slim-shop-row.is-checking { opacity: .5; pointer-events: none; }

/* Großes Checkbox-Tap-Target links */
.slim-shop-row__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.slim-shop-row__box {
  width: 28px; height: 28px;
  border: 2.5px solid var(--c-line-2);
  border-radius: 8px;
  background: var(--c-surface);
  display: block;
  transition: border-color .15s, background .15s;
}
.slim-shop-row__check:hover .slim-shop-row__box {
  border-color: var(--c-brand);
}
.slim-shop-row__check:active .slim-shop-row__box {
  background: var(--c-brand-tint);
}

.slim-shop-row__pic { margin: 0; }

.slim-shop-row__main { min-width: 0; }
.slim-shop-row__name {
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1.25;
  word-break: break-word;
}
.slim-shop-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.slim-shop-row__meta:empty { display: none; }
.slim-shop-row__meta .aisle-chip {
  background: #eef4fb;
  color: #1f4a72;
  border-color: #c4d8ec;
  font-weight: 600;
}

.slim-shop-row__price {
  width: 44px; height: 44px;
  font-size: 18px;
  color: var(--c-text-3);
}
.slim-shop-row__price:hover { color: var(--c-brand-press); background: var(--c-brand-tint); border-color: var(--c-brand-line); }

.slim-shop-row__delete {
  width: 44px; height: 44px;
  font-size: 16px;
  color: var(--c-text-3);
  opacity: .65;
}
.slim-shop-row__delete:hover { color: #b73b22; background: #fbe9e5; border-color: #f3c8bd; opacity: 1; }
.slim-shop-row.is-deleting { opacity: .5; pointer-events: none; }

/* Bestätigungs-Modal (native <dialog>) für Lösch-Aktion im Shop-Modus */
.confirm-dialog {
  border: 0;
  border-radius: var(--r-md, 12px);
  padding: 0;
  max-width: 420px;
  width: calc(100% - 2rem);
  background: var(--c-bg-card, #fff);
  color: var(--c-text-1, #222);
  box-shadow: 0 18px 48px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
}
.confirm-dialog::backdrop {
  background: rgba(15, 20, 16, 0.45);
  backdrop-filter: blur(2px);
}
.confirm-dialog__form { padding: 1.25rem 1.25rem 1rem; margin: 0; }
.confirm-dialog__h { margin: 0 0 .55rem; font-size: 1.15rem; font-weight: 700; }
.confirm-dialog__body { margin: 0 0 1.1rem; line-height: 1.5; }
.confirm-dialog__actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.confirm-dialog__actions .btn { min-width: 110px; }

/* Preis-Popover (inline unter der Row) */
.slim-shop-price {
  grid-column: 1 / -1;
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.slim-shop-row.is-price-open .slim-shop-row__price {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}
.slim-shop-price .btn-row { display: flex; gap: var(--s-2); margin-top: var(--s-2); }

/* "Im Korb" — erledigte Items dieser Session */
.slim-shop-done {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.slim-shop-done__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.slim-shop-done__row:last-child { border-bottom: 0; }
.slim-shop-done__name {
  font-weight: 600;
  text-decoration: line-through;
  color: var(--c-text-2);
  min-width: 0;
  word-break: break-word;
}
.slim-shop-done__price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.slim-shop-done__undo {
  width: 40px; height: 40px;
  font-size: 18px;
}
.slim-shop-done__row.is-fresh {
  background: var(--c-brand-tint);
  animation: slimFresh 1.4s ease-out;
}
.slim-shop-row.is-fresh {
  background: var(--c-brand-tint);
  animation: slimFresh 1.4s ease-out;
}

/* ---------- Slim-Add Tabs (was schon drauf ist / Wieder drauf) ---------- */
.slim-add-tabs-section {
  padding-top: var(--s-4);
  padding-bottom: var(--s-5);
}
.slim-tabs {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding: 4px;
  background: var(--c-bg);
  border-radius: 12px;
}
.slim-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 10px var(--s-3);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, color .15s;
}
.slim-tab:hover { color: var(--c-text); }
.slim-tab.is-active {
  background: var(--c-text);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15,30,30,.18);
}
.slim-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--fs-100);
  font-weight: 700;
}
.slim-tab.is-active .slim-tab__count {
  background: var(--c-brand);
  color: #fff;
}

.slim-tab-panel { display: none; }
.slim-tab-panel.is-active { display: block; }

/* Tab 1: „Drauf" — Kategorie-Gruppen analog zum Wieder-drauf-Tab */
.slim-on-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.slim-on-group { margin: 0; }
.slim-on-group__h {
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-3);
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-1);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.slim-on-group__count {
  font-size: var(--fs-100);
  color: var(--c-text-3);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.slim-on-group .slim-onlist {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Grid: Pic | Name+Meta (mehrzeilig) | Actions */
.slim-onlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.slim-onlist__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-200);
}
.slim-onlist__row:last-child { border-bottom: 0; }
.slim-onlist__pic { margin: 0 !important; }

.slim-onlist__main { min-width: 0; }
.slim-onlist__line1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.25;
}
.slim-onlist__namelabel { font-weight: 700; word-break: break-word; }
.slim-onlist__qty { color: var(--c-text-3); font-weight: 400; }

/* Chips für Tags + Nährwerte — eigene volle Zeile damit alles lesbar bleibt */
.slim-onlist__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.slim-onlist__flags:empty { display: none; }
.slim-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
}
.slim-chip--urgent  { background: rgba(232, 110, 80, 0.18); color: #a83a1c; border-color: rgba(232, 110, 80, 0.4); }
.slim-chip--sale    { background: #fff3d6; color: #8a4400; border-color: #f3d39a; }
.slim-chip--protein { background: var(--c-brand-tint); color: var(--c-brand-press); border-color: var(--c-brand-line); }
.slim-chip--fiber   { background: #fbf3e6; color: #6b4a23; border-color: rgba(166, 124, 82, 0.45); }
.slim-chip--omega3  { background: #e0f0fb; color: #1f4a72; border-color: #c4d8ec; }

/* ---------- Item-Marken-Variante: Anlegen + Liste ---------- */
.variant-add {
  background: var(--c-bg);
  border: 1px dashed var(--c-brand-line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.variant-add__row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-2);
}
@media (min-width: 540px) {
  .variant-add__row { grid-template-columns: 1.5fr 1fr; }
}

.variant-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.variant-list__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color .12s, background .12s;
}
.variant-list__row:hover { border-color: var(--c-brand-line); background: var(--c-brand-tint); }
.variant-list__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--c-text);
  min-width: 0;
}
.variant-list__name {
  font-weight: 700;
  word-break: break-word;
}
.variant-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--fs-200);
  color: var(--c-text-2);
  align-items: center;
}
.variant-list__brand {
  padding: 2px 8px;
  background: var(--c-bg);
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 600;
}
.variant-list__chevron {
  font-size: 22px;
  color: var(--c-text-3);
  flex-shrink: 0;
}

/* ---------- Marken-Varianten: Käufe-Rollup ---------- */
.variant-usage {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.variant-usage__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(60px, 2fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: var(--fs-200);
}
.variant-usage__name {
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  word-break: break-word;
}
a.variant-usage__name:hover { color: var(--c-brand-press); }
.variant-usage__bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--c-bg);
  overflow: hidden;
}
.variant-usage__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-hover));
  min-width: 4px;
}
.variant-usage__count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--fs-200);
  color: var(--c-text-2);
}
@media (max-width: 540px) {
  .variant-usage__row { grid-template-columns: 1fr; gap: 4px; padding: var(--s-3); }
  .variant-usage__bar { grid-column: 1 / -1; }
  .variant-usage__count { text-align: right; }
}

/* ---------- Admin: Error-Log ---------- */
.error-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.error-row {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-line-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.error-row.sev-high { border-left-color: #b23a20; }
.error-row.sev-mid  { border-left-color: #b25d00; }
.error-row.sev-low  { border-left-color: var(--c-line-2); }
.error-row.is-resolved { opacity: .55; }

.error-row__head {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-100); margin-bottom: var(--s-1);
}
.error-row__type {
  background: var(--c-text); color: #fff;
  padding: 2px 8px; border-radius: 4px;
  font-weight: 700; font-size: 10px; letter-spacing: .06em;
}
.error-row.sev-high .error-row__type { background: #b23a20; }
.error-row.sev-mid  .error-row__type { background: #b25d00; }
.error-row__status {
  background: var(--c-bg);
  padding: 1px 8px; border-radius: 4px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.error-row__when { color: var(--c-text-3); margin-left: auto; }
.error-row__msg { font-weight: 600; word-break: break-word; margin: var(--s-1) 0; }
.error-row__meta { color: var(--c-text-2); font-size: var(--fs-100); }
.error-row__meta code { background: var(--c-bg); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.error-row__trace { margin-top: var(--s-2); }
.error-row__trace summary { cursor: pointer; color: var(--c-text-3); font-size: var(--fs-100); }
.error-row__trace pre {
  max-height: 240px; overflow: auto;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 4px; padding: var(--s-2);
  font-size: 11px; line-height: 1.4;
  white-space: pre-wrap;
}
.error-row__ai {
  background: var(--c-brand-tint);
  border-left: 3px solid var(--c-brand);
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  border-radius: 4px;
  font-size: var(--fs-200);
}
.error-row__actions {
  display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px dashed var(--c-line);
}
.error-row__actions .input { flex: 1; min-width: 200px; }
.error-row__resolved {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-200); color: var(--c-text-2);
}

/* ---------- Admin: Statistik ---------- */
.stats-card { padding: var(--s-4); }
.stats-chart {
  display: flex; align-items: flex-end;
  gap: 2px;
  height: 160px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
}
.stats-chart__col {
  flex: 1 0 8px;
  display: flex; flex-direction: column-reverse;
  height: 100%;
  position: relative;
  min-width: 8px;
}
.stats-chart__bar-visits {
  background: var(--c-brand);
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: opacity .15s;
}
.stats-chart__bar-regs {
  background: #b25d00;
  width: 100%;
  border-radius: 2px 2px 0 0;
  margin-top: -1px;
}
.stats-chart__col:hover .stats-chart__bar-visits { opacity: .7; }
.stats-chart__legend {
  display: flex; gap: var(--s-4); margin-top: var(--s-3);
  font-size: var(--fs-100); color: var(--c-text-2);
}
.stats-chart__legend .dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 4px;
  vertical-align: middle;
}
.stats-chart__legend .stats-chart__bar-visits { background: var(--c-brand); }
.stats-chart__legend .stats-chart__bar-regs   { background: #b25d00; }

.stats-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.stats-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(80px, 2fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: 4px 0;
  font-size: var(--fs-200);
}
.stats-list__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.stats-list__bar {
  display: block; height: 8px;
  background: var(--c-bg); border-radius: 4px; overflow: hidden;
}
.stats-list__bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-hover));
  min-width: 4px;
}
.stats-list__count {
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
  font-size: var(--fs-100);
  white-space: nowrap;
}

/* Destructive Action Button */
.btn-danger {
  background: #b23a20;
  color: #fff;
  border-color: #b23a20;
}
.btn-danger:hover { background: #8e2c17; border-color: #8e2c17; }
.btn-danger:active { background: #6e2010; }

.slim-onlist__line2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-100);
  line-height: 1.35;
}
.slim-onlist__line2:empty { display: none; }
.slim-onlist__cat {
  padding: 2px 8px;
  background: var(--c-bg);
  border-radius: 999px;
  color: var(--c-text-2);
  font-weight: 500;
}
.slim-onlist__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fffae5;
  border: 1px solid #f3e2a0;
  border-radius: 4px;
  color: #5a4a1e;
  font-style: normal;
  font-size: var(--fs-100);
  font-weight: 500;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* Wichtig: das HTML-`hidden`-Attribut MUSS gewinnen, sonst rendert der leere
   Platzhalter-Span (für Items ohne Notiz) trotzdem die gelbe Pille. */
.slim-onlist__note[hidden],
.slim-onlist__qty[hidden],
[hidden] { display: none !important; }

.slim-onlist__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Tap-Targets: Desktop 40px, Mobile 44px (Apple HIG-Minimum für Daumen). */
.slim-onlist__row .icon-btn {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 10px;
}
@media (min-width: 720px) {
  .slim-onlist__row .icon-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}
.slim-onlist__row .slim-onlist__del { color: var(--c-text-3); }
.slim-onlist__row .slim-onlist__del:hover { color: #b25d00; background: #fff3d6; border-color: #f3d39a; }
.slim-onlist__row .slim-onlist__edit:hover { color: var(--c-brand-press); background: var(--c-brand-tint); border-color: var(--c-brand-line); }

.slim-onlist__empty {
  padding: var(--s-4);
  color: var(--c-text-3);
  text-align: center;
  font-size: var(--fs-200);
  background: var(--c-bg);
  border-radius: var(--r-md);
  list-style: none;
}
.slim-onlist__row.is-fresh {
  background: var(--c-brand-tint);
  animation: slimFresh 1.4s ease-out;
}

.slim-onlist__row.is-editing { background: var(--c-bg); }
.slim-onlist__row.is-editing .slim-onlist__actions { display: none; }
.slim-onlist__row.is-editing .slim-onlist__line2 { display: none; }

.slim-edit {
  width: 100%;
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.slim-edit__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.slim-edit__chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-100);
  cursor: pointer;
}
.slim-edit__chip:hover { border-color: var(--c-brand-line); color: var(--c-brand-press); background: var(--c-brand-tint); }
.slim-edit__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.slim-edit .label--xs { font-size: var(--fs-100); color: var(--c-text-3); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.slim-edit .btn-row { display: flex; gap: var(--s-2); margin-top: var(--s-2); }

/* Edit-Form spannt sich beim Öffnen über die volle Row-Breite (Grid-Override) */
.slim-onlist__row.is-editing { grid-template-columns: minmax(0, 1fr); }
.slim-onlist__row.is-editing > .slim-onlist__pic { display: none; }
.slim-onlist__row.is-editing > .slim-edit { grid-column: 1 / -1; }
@keyframes slimFresh {
  0% { background: var(--c-brand); color: #fff; }
  20% { background: var(--c-brand-tint); }
  100% { background: var(--c-bg); }
}

/* Top-Vorschläge: „Häufig gekauft" — brand-tinted Hervorhebung über den Kategorien */
.slim-top-suggest {
  background: linear-gradient(180deg, var(--c-brand-tint), var(--c-surface));
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}
.slim-top-suggest__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.slim-top-suggest__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--c-brand);
  color: #fff;
  border-radius: 10px;
  font-size: 18px;
  flex-shrink: 0;
}
.slim-top-suggest__h {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: 800;
  color: var(--c-brand-press);
}
.slim-top-suggest__sub {
  margin: 2px 0 0;
  font-size: var(--fs-100);
  color: var(--c-text-2);
  line-height: 1.35;
}
.slim-top-suggest__grid { /* erbt von .slim-suggest */ }
.slim-suggest__row--top .slim-suggest__btn {
  background: var(--c-surface);
  border-color: var(--c-brand-line);
  border-width: 1.5px;
  box-shadow: 0 1px 3px rgba(123, 183, 63, 0.15);
}
.slim-suggest__row--top .slim-suggest__btn:hover {
  border-color: var(--c-brand);
  background: var(--c-brand-tint);
}

/* Tab 2: Wieder drauf — Kategorie-Gruppen */
.slim-suggest-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.slim-suggest-group { margin: 0; }
.slim-suggest-group__h {
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-3);
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-1);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.slim-suggest-group__count {
  font-size: var(--fs-100);
  color: var(--c-text-3);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.slim-suggest {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 540px) { .slim-suggest { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .slim-suggest { grid-template-columns: repeat(3, 1fr); } }
.slim-suggest__row { margin: 0; }
.slim-suggest__tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 999px;
  background: var(--c-bg);
}
.slim-suggest__btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--r-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  transition: border-color .12s, background .12s, transform .08s;
}
.slim-suggest__btn:hover { border-color: var(--c-brand); background: var(--c-brand-tint); }
.slim-suggest__btn:active { transform: translateY(1px); }
.slim-suggest__btn.is-loading { opacity: .55; pointer-events: none; }
.slim-suggest__name { flex: 1; font-weight: 600; min-width: 0; }
.slim-suggest__times {
  color: var(--c-text-3);
  font-size: var(--fs-100);
  font-weight: 500;
  flex-shrink: 0;
}
.slim-suggest__plus {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

/* ---------- Item-Piktogramm (inline, klein, in Listen-Zeilen) ---------- */
.item-pic {
  display: inline-block;
  width: 28px; height: 28px;
  vertical-align: -8px;
  margin-right: 8px;
  color: var(--c-text);
  flex-shrink: 0;
}
.item-title.is-checked .item-pic { opacity: .45; }

/* ---------- Items-Index: Live-Filter (Suche + Nährwert-Tags) ---------- */
.item-filter {
  position: sticky;
  top: 56px;
  z-index: 30;
  background: var(--c-bg);
  padding: var(--s-3) 0;
  margin: 0 0 var(--s-3);
  border-bottom: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-2);
}
@media (min-width: 640px) { .item-filter { top: 60px; } }
@media (min-width: 960px) { .item-filter { top: 64px; } }

.item-filter__search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 0 var(--s-3);
  transition: border-color .15s;
}
.item-filter__search:focus-within { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(123,183,63,.18); }
.item-filter__icon {
  font-size: 16px;
  line-height: 1;
  color: var(--c-text-3);
  margin-right: var(--s-2);
  pointer-events: none;
  flex-shrink: 0;
}
.item-filter__search .input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: var(--s-3) 0;
  outline: 0;
  font-size: var(--fs-300);
  min-width: 0;
}
.item-filter__clear {
  background: transparent;
  border: 0;
  color: var(--c-text-3);
  cursor: pointer;
  width: 28px;
  height: 28px;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.item-filter__clear:hover { color: var(--c-text); }

.item-filter__row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.item-filter__category {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}
.item-filter__category .input {
  padding: 6px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  border-radius: 10px;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  min-height: 38px;
  appearance: auto;
  max-width: 100%;
}
.item-filter__category .input:focus { outline: 0; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(123,183,63,.18); }
.item-filter__category .input.is-on {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
}
@media (max-width: 540px) {
  .item-filter__category { flex: 1 1 100%; }
}

.item-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.item-filter__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.item-filter__tag:hover { border-color: var(--c-line-2); color: var(--c-text); }
.item-filter__tag:active { transform: translateY(1px); }
.item-filter__tag.is-on {
  background: var(--c-text);
  color: #fff;
  border-color: var(--c-text);
}
.item-filter__tag--protein.is-on { background: var(--c-brand-press); border-color: var(--c-brand-press); }
.item-filter__tag--fiber.is-on   { background: #6b4a23; border-color: #6b4a23; }
.item-filter__tag--omega3.is-on  { background: #1f4a72; border-color: #1f4a72; }

.item-filter__status {
  margin: 0;
  font-size: var(--fs-100);
  color: var(--c-text-3);
  min-height: 1.2em;
}
.item-filter__empty {
  text-align: center;
  padding: var(--s-5);
  color: var(--c-text-2);
  font-size: var(--fs-200);
  background: var(--c-surface);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
}

/* ---------- Item-Grid (Items-Übersicht im PWA-Tile-Stil) ---------- */
.item-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .item-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .item-grid { grid-template-columns: repeat(3, 1fr); } }

.item-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .12s, transform .08s, box-shadow .15s;
}
.item-tile:hover { border-color: var(--c-brand-line); box-shadow: 0 4px 14px rgba(15,30,30,.08); }
.item-tile:active { transform: translateY(1px); }

.item-tile__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: var(--c-text);
  text-decoration: none;
  min-height: 88px;
}

.item-tile__pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  color: var(--c-text);
  /* keine Background-Pille, kein Border — das Pictogram steht für sich,
     nicht als "Button auf dem Icon" */
}
.item-tile__pic img { width: 100%; height: 100%; display: block; }

.item-tile__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.item-tile__name {
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1.25;
  word-break: break-word;
}
.item-tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: var(--fs-200);
  color: var(--c-text-2);
  align-items: center;
}
.item-tile__cat { color: var(--c-text-2); }
.item-tile__cat--empty { color: var(--c-text-3); font-style: italic; }
.item-tile__sep { color: var(--c-text-3); }
.item-tile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.item-tile__chips:empty { display: none; }
.item-tile__chips .nutri-chip { margin-left: 0; }
.item-tile__chips .chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 600;
}
.chip--brand {
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  border: 1px solid var(--c-brand-line);
}

.item-tile__chevron {
  font-size: 28px;
  line-height: 1;
  color: var(--c-text-3);
  flex-shrink: 0;
  padding-left: var(--s-2);
}

/* ---------- User-Avatar (klein, inline) ---------- */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  font-weight: 700;
  border: 1.5px solid var(--c-brand-line);
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-avatar--initial { font-size: 10px; }

/* item-meta: Avatar + Text vernünftig vertikal ausrichten */
.item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  row-gap: 4px;
}

/* ---------- Icon-Buttons (kleine quadratische Action-Buttons) ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  list-style: none;
}
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { border-color: var(--c-brand-line); color: var(--c-brand-press); background: var(--c-brand-tint); }
.icon-btn:active { transform: translateY(1px); }
details[open] > summary.icon-btn { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.details-pick--icon { display: inline-block; }

/* ---------- Nutri-Chips: prominentere Variante ---------- */
.nutri-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  margin-left: 6px;
  white-space: nowrap;
}
.nutri-chip--protein {
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  border: 1px solid var(--c-brand-line);
}
.nutri-chip--fiber {
  background: #fbf3e6;
  color: #6b4a23;
  border: 1px solid rgba(166, 124, 82, 0.45);
}
.nutri-chip--omega3 {
  background: #e0f0fb;
  color: #1f4a72;
  border: 1px solid #c4d8ec;
}
.nutri-chip__icon { font-size: 13px; line-height: 1; }
.nutri-chip__lbl  { font-weight: 700; }

/* ---------- Aisle-Chip (Gang/Regal) ---------- */
.aisle-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: var(--fs-100);
  font-weight: 600;
  background: #eef4fb;
  color: #1f4a72;
  border: 1px solid #c4d8ec;
  vertical-align: middle;
  margin-left: 6px;
  white-space: nowrap;
}
.aisle-chip--lg {
  font-size: var(--fs-300);
  padding: 6px 14px;
  border-radius: 10px;
}

/* Aisle-Eingabe (2-Spalten-Grid) */
.aisle-grid {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: var(--s-2);
}
@media (max-width: 480px) { .aisle-grid { grid-template-columns: 1fr; } }

/* Aisle-Liste auf der Item-Detailseite */
.aisle-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.aisle-list__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  background: var(--c-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
}
.aisle-list__meta { font-size: var(--fs-200); line-height: 1.4; }

/* ---------- Preisvergleich pro Laden ---------- */
.price-compare {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s-2);
}
.price-compare__row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(80px, 2fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  background: var(--c-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  font-size: var(--fs-200);
}
.price-compare__row.is-cheapest {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-line);
}
.price-compare__retailer { font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.price-compare__badge {
  display: inline-block; padding: 1px 8px;
  background: var(--c-brand); color: #fff;
  border-radius: 999px; font-size: var(--fs-100); font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
.price-compare__bar {
  display: block; height: 8px; min-width: 30px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-hover));
  width: var(--w, 50%);
}
.price-compare__avg { font-weight: 700; font-variant-numeric: tabular-nums; }
.price-compare__range { color: var(--c-text-2); font-size: var(--fs-100); }
.price-compare__diff { color: #b25d00; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-compare__your {
  grid-column: 1 / -1;
  font-size: var(--fs-100);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--c-line);
  color: var(--c-text-2);
  line-height: 1.55;
}
.price-compare__your strong { color: var(--c-text-1); font-weight: 600; }
.price-compare__your--none { color: var(--c-text-3); font-style: italic; }
.price-compare__delta {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
  font-size: var(--fs-100);
}
.price-compare__delta--up   { background: #fde7e7; color: #b91c1c; }
.price-compare__delta--down { background: #e7f5ec; color: #166534; }
@media (max-width: 640px) {
  .price-compare__row { grid-template-columns: 1fr 1fr; }
  .price-compare__bar { grid-column: 1 / -1; }
  .price-compare__range { grid-column: 1 / -1; }
}

/* ---------- Item-Title-Zusatz (Menge nach Pipe) ---------- */
.item-title .item-qty {
  font-weight: 500;
  color: var(--c-text-2);
}
.item-title.is-checked {
  color: var(--c-text-2);
  text-decoration: line-through;
}
.item-title.is-checked .item-price {
  text-decoration: none;
  font-weight: 500;
  color: var(--c-text-3);
}

/* ---------- Inline-Link in Meta-Text ---------- */
.meta-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-line-2);
}
.meta-link:hover { text-decoration-color: var(--c-brand); }

/* ---------- Button-Reihe (kompakte Aktionen, gleichmäßig verteilt) ---------- */
.btn-row {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}
.btn-row .btn { flex: 1; min-width: 120px; min-height: 44px; }

/* ---------- Detail-Popover (Laden/Preis) ----------
   Mobile: das Panel sitzt im Fluss unter den Aktions-Buttons (volle Card-Breite).
   Desktop: schwebend rechts unter dem Trigger. */
.store-pick { display: inline-block; }
.popover {
  margin-top: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--sh-2);
}
.popover__title {
  font-weight: 600;
  margin-bottom: 4px;
}
.popover__hint {
  font-size: var(--fs-200);
  color: var(--c-text-3);
  margin: 0 0 var(--s-3);
}
.popover .label--xs { font-size: var(--fs-100); }
.popover .input { min-height: 40px; }
.popover .input + .label--xs { margin-top: var(--s-3); }
.popover .input + .input { margin-top: var(--s-2); }
.popover__cancel {
  margin-top: var(--s-3);
  display: block;
  width: 100%;
  text-align: center;
}
/* Forms im Popover dürfen NIE flex/inline-flex werden — nur Block-Layout.
   Wir setzen !important hier explizit, weil .list-row .list-row-actions form
   in vergangenen Versionen via Selector-Inheritance den Form zur Flex-Reihe
   gemacht hat — was den Popover-Form-Layout zerschießt. */
.popover form,
.popover > form,
.cat-pick .popover form,
.list-row .list-row-actions .popover form {
  display: block !important;
  width: auto !important;
}
.popover form .label,
.popover form .input,
.popover form select,
.popover form input,
.popover form button {
  display: block;
}
.popover form .label   { width: 100%; }
.popover form .input,
.popover form select,
.popover form input[type="text"],
.popover form input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
/* Btn-Row im Popover bleibt flex (Speichern + Abhaken-und-speichern nebeneinander). */
.popover .btn-row { display: flex !important; }
.popover .btn-row .btn { width: auto !important; }

@media (min-width: 640px) {
  .store-pick { position: relative; }
  .popover {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10;
    min-width: 320px;
    margin-top: 0;
  }
}

/* Mobile: Popover spannt die ganze Listen-Zeile */
@media (max-width: 639px) {
  .list-row .store-pick { width: 100%; }
  .list-row .popover { width: 100%; }
}

/* ---------- Trigger-Summary (kein default-Marker, Button-Look) ---------- */
.popover-summary {
  list-style: none;
  cursor: pointer;
  min-height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-2);
  background: var(--c-surface);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-200);
  color: var(--c-text-2);
  font-weight: 500;
}
.popover-summary::-webkit-details-marker { display: none; }
.popover-summary:hover { background: var(--c-surface-2); }

/* ---------- Compact Form-Block (Liste umbenennen / Konto-Inline) ---------- */
.inline-actions {
  margin-top: var(--s-7);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.inline-actions__row {
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}
.inline-actions__row form {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.inline-actions__row .input { min-width: 160px; }
.inline-actions__row .btn { min-height: 40px; }

/* ---------- Empty-State Card ---------- */
.empty-card {
  align-items: center;
  text-align: center;
}
.empty-card p { margin: 0; color: var(--c-text-2); }

/* ---------- Card flush (für reine Zeilen-Listen — kein Innenpadding) ---------- */
.card.is-flush { padding: 0; }

/* ---------- Card-Block-Abstand (Kategorie-Cluster) ---------- */
.cat-block + .cat-block { margin-top: var(--s-5); }
.cat-block .eyebrow { margin: 0 0 var(--s-2); }

/* ---------- Landing: Hero-Trust, How-to, Personas, FAQ ---------- */
.hero--landing .tag { background: var(--c-brand-tint); border-color: var(--c-brand-line); color: var(--c-brand-press); }
.cta-sub {
  display: none;
  color: var(--c-text-3); font-size: var(--fs-100); margin: var(--s-2) 0 0;
}
@media (max-width: 540px) { .cta-sub { display: block; } }

.hero-trust {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  padding: 0; margin: var(--s-5) 0 0;
  color: var(--c-text-2); font-size: var(--fs-200);
}
.hero-trust li { font-weight: 600; color: var(--c-text); }
.hero-trust--mini {
  margin-top: var(--s-2);
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-100);
  color: var(--c-text-3);
}
.hero-trust--mini li { font-weight: 400; color: var(--c-text-3); }

/* ---------- 5-col Howto-Grid + Vergleichstabelle + Roadmap ---------- */
@media (min-width: 1100px) {
  .howto__grid--5 { grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
}

.compare-section { padding: var(--s-6) 0 var(--s-4); }
.compare-table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  margin-bottom: var(--s-5);
  box-shadow: 0 4px 14px rgba(15,30,30,.06);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-200);
}
.compare-table th, .compare-table td {
  padding: var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.compare-table th {
  font-weight: 600;
  color: var(--c-text-2);
  background: var(--c-bg);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.compare-table td:first-child, .compare-table th:first-child { font-weight: 600; color: var(--c-text); }
.compare-table .compare-table__brand {
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  font-weight: 600;
}
.compare-table tr:last-child td { border-bottom: 0; }

/* Mobile: Tabelle als gestapelte Karten — kein horizontal-scroll, voll lesbar */
@media (max-width: 720px) {
  .compare-table-wrap { padding: 0; background: transparent; border: 0; box-shadow: none; }
  .compare-table thead { display: none; }
  .compare-table tbody { display: grid; gap: var(--s-3); }
  .compare-table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-1);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
  }
  .compare-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: baseline;
    padding: var(--s-1) 0;
    border-bottom: 0;
    font-size: var(--fs-200);
  }
  .compare-table td:first-child { font-weight: 700; padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-1); }
  .compare-table td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--c-text-3);
    font-size: var(--fs-100);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
  }
  .compare-table .compare-table__brand {
    background: transparent;
    border-radius: var(--r-sm);
    padding: var(--s-1) 0;
  }
  .compare-table .compare-table__brand::before { color: var(--c-brand-press); }
}

.roadmap { padding: var(--s-7) 0 var(--s-5); }
.roadmap__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .roadmap__grid { grid-template-columns: repeat(3, 1fr); } }
.roadmap-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
}
.roadmap-card h3 { margin: 0 0 var(--s-3); font-size: var(--fs-300); }
.roadmap-card ul { margin: 0; padding-left: 1.2em; color: var(--c-text); line-height: 1.55; font-size: var(--fs-200); }
.roadmap-card ul li + li { margin-top: var(--s-2); }
.roadmap-card__state {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--s-3);
}
.roadmap-card--done .roadmap-card__state  { background: var(--c-brand-tint); color: var(--c-brand-press); border: 1px solid var(--c-brand-line); }
.roadmap-card--soon .roadmap-card__state  { background: #fff3d6; color: #b25d00; border: 1px solid #f3d39a; }
.roadmap-card--later .roadmap-card__state { background: #eef4fb; color: #1f4a72; border: 1px solid #c4d8ec; }

/* Register-Trust */
.register-trust {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-md);
}
.register-trust__list { list-style: none; padding: 0; margin: 0; line-height: 1.7; color: var(--c-brand-press); font-size: var(--fs-200); }
.u-text-center { text-align: center; }

/* Legal callout (Datenschutz Kurzfassung) */
.legal-block--callout {
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-7);
}
.legal-block--callout h2 { border-bottom: 0; padding-bottom: 0; color: var(--c-brand-press); }

/* ---------- Smart-Features-Block ---------- */
.smart { padding-top: var(--s-7); padding-bottom: var(--s-6); }
.smart-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .smart-grid { grid-template-columns: repeat(3, 1fr); }
}
.smart-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.smart-card__head {
  display: flex; align-items: flex-start; gap: var(--s-3);
}
.smart-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  border-radius: 12px;
  font-size: 22px;
  flex-shrink: 0;
}
.smart-card h3 { margin: 4px 0 0; font-size: var(--fs-300); line-height: 1.25; }
.smart-card p { margin: 0; color: var(--c-text-2); line-height: 1.55; font-size: var(--fs-200); }
.smart-card__mock { margin-top: auto; }
.smart-card__mock .mock { box-shadow: 0 4px 14px rgba(15,30,30,.06); }
.btn-sub {
  display: block; font-size: var(--fs-100); opacity: .85;
  font-weight: 400; letter-spacing: 0; margin-top: 2px;
  white-space: normal;
}
.btn { line-height: 1.15; }
.btn .btn-sub { line-height: 1.25; }
/* Auf Mobile: Sub-Text NICHT in den Button — sonst zu hoch und unleserlich.
   Stattdessen wird Sub-Info als separater u-text-3-Absatz unter dem Button gezeigt. */
@media (max-width: 540px) {
  .btn .btn-sub { display: none; }
  .hero .cta .btn { width: 100%; } /* CTAs voll breit auf Phone */
}

.howto { padding-top: var(--s-7); padding-bottom: var(--s-5); }
.howto__head { text-align: center; margin-bottom: var(--s-6); }
.howto__head .eyebrow { display: inline-block; color: var(--c-brand-press); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-2); }
.howto__head h2 { margin: 0 auto; font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 28ch; text-wrap: balance; }

.howto__grid {
  list-style: none; padding: 0; margin: 0 0 var(--s-6);
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 720px) {
  .howto__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .howto__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
}
.howto-step {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
}
.howto-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--c-brand); color: #fff;
  border-radius: 50%; font-weight: 700;
  margin-bottom: var(--s-3);
}
.howto-step h3 { margin: 0 0 var(--s-2); font-size: var(--fs-300); }
.howto-step p { margin: 0; color: var(--c-text-2); font-size: var(--fs-200); line-height: 1.55; }
.howto__cta { text-align: center; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.howto__cta-sub { color: var(--c-text-2); font-size: var(--fs-200); }

.personas { padding: var(--s-6) 0; }
.personas__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .personas__grid { grid-template-columns: repeat(3, 1fr); } }
.persona-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.persona-card__icon { font-size: 36px; line-height: 1; margin-bottom: var(--s-3); }
.persona-card h3 { margin: 0 0 var(--s-2); }
.persona-card p { margin: 0; color: var(--c-text-2); line-height: 1.55; }

.faq { padding: var(--s-6) 0; max-width: 880px; }
.faq__list { display: grid; gap: var(--s-3); }
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.faq-item > summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: var(--c-text-3); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.faq-item[open] > summary::after { content: "–"; }
.faq-item p { margin: var(--s-3) 0 0; color: var(--c-text-2); line-height: 1.6; }

.outro-card .eyebrow { color: var(--c-brand-press); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .12em; }
.outro-foot { margin: var(--s-4) 0 0; color: var(--c-text-3); font-size: var(--fs-200); }

/* ---------- Mock-Illustrationen (Home + Tour) ---------- */
.hero-mock,
.mock {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  font-size: var(--fs-200);
  box-shadow: 0 8px 24px rgba(15, 30, 30, 0.08);
  display: flex; flex-direction: column; gap: var(--s-2);
  width: 100%;
}
.hero-mock { padding: var(--s-4); }
.mock__bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-line);
  color: var(--c-text-2); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .08em;
}
.mock__brand { color: var(--c-brand); font-size: 14px; }
.mock__line {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px dashed var(--c-line);
}
.mock__line:last-child { border-bottom: 0; }
.mock__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--c-line-2); color: var(--c-line-2);
  font-size: 12px; flex-shrink: 0;
}
.mock__line.is-checked { color: var(--c-text-3); text-decoration: line-through; }
.mock__line.is-checked .mock__check { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.mock__tag { margin-left: auto; background: #fff3d6; color: #b25d00; border-radius: 6px; padding: 1px 6px; font-size: 11px; }
.mock__price { margin-left: auto; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.mock__session {
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-100); color: var(--c-brand-press);
  margin-top: auto;
}
.mock__session-end {
  align-self: flex-end; color: var(--c-text-2); font-size: var(--fs-100); padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-md); margin-top: var(--s-2);
}

/* Dashboard-Mock */
.mock--dashboard .mock__tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.mock__tab { padding: var(--s-1) var(--s-3); border: 1px solid var(--c-line); border-radius: 999px; font-size: var(--fs-100); color: var(--c-text-2); }
.mock__tab.is-on { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.mock__tab--add { color: var(--c-brand-press); border-style: dashed; }
.mock__hero { background: var(--c-text); color: #fff; border-radius: var(--r-md); padding: var(--s-3); margin-top: var(--s-2); }
.mock__hero-top { display: flex; justify-content: space-between; align-items: center; }
.mock__hero-eyebrow { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.mock__hero-count { background: var(--c-brand); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: var(--fs-100); }
.mock__hero-name { font-size: var(--fs-400); font-weight: 700; margin-top: var(--s-1); }
.mock__hero-sub { opacity: .7; font-size: var(--fs-100); margin-bottom: var(--s-3); }
.mock__choice { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.mock__choice-btn { flex: 1 1 0; min-width: 100px; text-align: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); font-size: var(--fs-100); }
.mock__choice-btn--shop { background: var(--c-brand); border-color: var(--c-brand); }

/* Add-Mock */
.mock__input { border: 1.5px solid var(--c-brand-line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); background: #fff; color: var(--c-text); }
.mock__caret { color: var(--c-brand); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mock__suggest { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.mock__sg { background: var(--c-brand-tint); color: var(--c-brand-press); border-radius: 999px; padding: 2px 8px; font-size: var(--fs-100); }
.mock__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.mock__chip { border: 1px solid var(--c-line); border-radius: 999px; padding: 2px 8px; font-size: var(--fs-100); color: var(--c-text-2); }
.mock__chip.is-on { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.mock__chip--tag { color: var(--c-brand-press); border-color: var(--c-brand-line); background: #fff; }

/* Stats-Mock */
.mock--stats .mock__stats-row { display: flex; gap: var(--s-3); }
.mock__stat { flex: 1; background: var(--c-bg); border-radius: var(--r-md); padding: var(--s-3); text-align: center; }
.mock__stat-num { display: block; font-size: var(--fs-500); font-weight: 700; line-height: 1; }
.mock__stat-lbl { display: block; font-size: var(--fs-100); color: var(--c-text-2); margin-top: 2px; }
.mock__bars { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.mock__bar-row { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: var(--s-2); font-size: var(--fs-100); }
.mock__bar-fill { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-hover)); width: var(--w, 50%); }
.mock__bar-val { text-align: right; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.mock__bar-lbl { color: var(--c-text-2); }

/* Invite-Mock */
.mock__members { display: flex; flex-direction: column; gap: var(--s-1); }
.mock__member { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-md); }
.mock__avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--c-brand-tint); color: var(--c-brand-press); border-radius: 50%; font-size: var(--fs-100); font-weight: 700; }
.mock__member.is-me { background: var(--c-brand-tint); }
.mock__member--pending { color: var(--c-text-3); }
.mock__invite { background: var(--c-bg); border-radius: var(--r-md); padding: var(--s-3); margin-top: var(--s-2); }
.mock__invite-label { font-size: var(--fs-100); color: var(--c-text-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s-2); }
.mock__invite-row { display: flex; gap: var(--s-2); }
.mock__invite-input { flex: 1; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.mock__invite-btn { background: var(--c-brand); color: #fff; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); white-space: nowrap; }
.mock__invite-hint { margin-top: var(--s-2); font-size: var(--fs-100); color: var(--c-text-3); }

.hero-split .visual .hero-mock {
  background: var(--c-surface);
  width: 100%; max-width: 360px; aspect-ratio: auto;
  border-radius: 24px;
  padding: var(--s-4);
}

/* ---------- Tour ---------- */
.tour { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.tour__head { text-align: center; margin-bottom: var(--s-6); }
.tour__head h1 { margin: var(--s-2) 0 var(--s-3); font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.tour__head .lede { color: var(--c-text-2); max-width: 60ch; margin: 0 auto; }

.tour-stage {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: 0 12px 32px rgba(15, 30, 30, 0.08);
}

.tour-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  counter-reset: tstep;
}
.tour-step {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-1);
  background: transparent; border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-2);
  color: var(--c-text-2); font: inherit; cursor: pointer;
  transition: all .15s ease;
}
.tour-step:hover { border-color: var(--c-brand-line); color: var(--c-text); }
.tour-step.is-active { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.tour-step.is-done { border-color: var(--c-brand-line); background: var(--c-brand-tint); color: var(--c-brand-press); }
.tour-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-bg); color: inherit; font-weight: 700; font-size: var(--fs-200);
  border: 1px solid currentColor;
}
.tour-step.is-active .tour-step__num { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.tour-step__txt { font-size: var(--fs-100); }
@media (max-width: 720px) {
  .tour-steps { grid-template-columns: repeat(5, 1fr); gap: var(--s-1); }
  .tour-step__txt { display: none; }
}

.tour-slides { position: relative; min-height: 460px; }
.tour-slide {
  display: none;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.tour-slide.is-active { display: grid; animation: tourFade .25s ease; }
@keyframes tourFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .tour-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.tour-slide__eyebrow { display: inline-block; color: var(--c-brand-press); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-2); }
.tour-slide h2 { margin: 0 0 var(--s-3); font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.tour-slide p { color: var(--c-text); line-height: 1.6; margin: 0 0 var(--s-3); }
.tour-bullets { margin: 0 0 var(--s-4); padding-left: 1.2em; color: var(--c-text-2); line-height: 1.6; }
.tour-bullets li + li { margin-top: var(--s-1); }
.tour-cta { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.tour-cta--final { margin-top: var(--s-4); }

.tour-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-5);
  padding-top: var(--s-4); border-top: 1px solid var(--c-line);
}
.tour-pos { color: var(--c-text-2); font-variant-numeric: tabular-nums; }

.tour-skip { text-align: center; margin: var(--s-5) 0 0; }

/* ---------- Dashboard: Empty-Hero + First-Run-Hint + Location-Hint ---------- */
/* Empty-State NICHT umfärben — Base-Card ist dunkel, würde sonst weiße Schrift
   auf hellem Hintergrund ergeben. Stattdessen nur Akzente: Count-Pille zurück-
   haltend, Welcome-Box auf den dunklen Hintergrund anpassen. */
.hero-list-card--empty .hero-list-card__count {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
}
.hero-list-card--empty .hero-list-card__num { font-size: var(--fs-300); opacity: .65; }
.hero-list-card__first {
  position: relative;
  background: rgba(123, 183, 63, 0.18);
  border: 1px solid rgba(123, 183, 63, 0.35);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-3) 0;
  color: #fff;
  font-size: var(--fs-200);
  line-height: 1.5;
}

.firstrun-hint {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  background: var(--c-text); color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: 0 8px 24px rgba(15, 30, 30, 0.18);
}
.firstrun-hint__icon { font-size: 28px; line-height: 1; }
.firstrun-hint__body { line-height: 1.5; font-size: var(--fs-200); }
.firstrun-hint__body strong { display: block; font-size: var(--fs-300); margin-bottom: 2px; }
.firstrun-hint .btn-primary { background: var(--c-brand); border-color: var(--c-brand); }
@media (max-width: 600px) {
  .firstrun-hint { grid-template-columns: 1fr; text-align: left; }
  .firstrun-hint__icon { font-size: 22px; }
  .firstrun-hint .btn { justify-self: start; }
}

.location-hint {
  background: var(--c-surface);
  border: 1px dashed var(--c-brand-line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.location-hint__label { display: block; margin-bottom: var(--s-3); color: var(--c-text); line-height: 1.5; }
.location-hint__row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.location-hint__row .input { flex: 1 1 200px; min-width: 0; }
.location-hint__zip { flex: 0 1 110px !important; }

/* ---------- Avatar-Seite ---------- */
.avatar-page { padding-bottom: var(--s-7); display: grid; gap: var(--s-4); }
.avatar-current__row {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.avatar-current__preview img,
.avatar-placeholder {
  width: 128px; height: 128px;
  border-radius: 50%;
  display: block;
  border: 2px solid var(--c-line);
  background: var(--c-brand-tint);
}
.avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 48px; font-weight: 700; color: var(--c-brand-press);
}
.avatar-current__meta { flex: 1 1 200px; min-width: 0; }
.avatar-current__meta code { background: var(--c-bg); padding: 2px 6px; border-radius: 4px; font-size: var(--fs-100); }

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.avatar-grid__item { margin: 0; }
.avatar-grid__btn {
  display: block;
  width: 100%;
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  border-radius: 16px;
  padding: var(--s-2);
  cursor: pointer;
  transition: border-color .12s ease, transform .1s ease;
}
.avatar-grid__btn:hover { border-color: var(--c-brand); transform: translateY(-2px); }
.avatar-grid__btn:active { transform: translateY(0); }
.avatar-grid__btn svg { width: 100%; height: auto; display: block; }

.avatar-upload__file {
  display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0;
  flex-wrap: wrap;
}

.avatar-cropper { margin-top: var(--s-4); display: grid; gap: var(--s-4); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 720px) { .avatar-cropper { grid-template-columns: minmax(0, 320px) 1fr; } }
.avatar-cropper[hidden] { display: none; }
.avatar-cropper__stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  margin: 0 auto;
}
.avatar-cropper__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.avatar-cropper__stage canvas:active { cursor: grabbing; }
.avatar-cropper__mask {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent calc(50% - 4px), rgba(15,30,30,.55) calc(50% - 3px));
  border-radius: var(--r-md);
}
.avatar-cropper__controls label { display: block; font-size: var(--fs-200); color: var(--c-text-2); margin-bottom: var(--s-2); }
.avatar-cropper__controls input[type="range"] { width: 100%; }

/* ---------- Legal-Seiten (Impressum, Datenschutz) ---------- */
.legal { max-width: 880px; padding-top: var(--s-7); padding-bottom: var(--s-8); }
.legal__head { margin-bottom: var(--s-7); }
.legal__head h1 { margin: 0 0 var(--s-3); font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.15; }
.legal__head .lede { color: var(--c-text-2); margin: 0; }

.legal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.legal-card {
  /* lange Werte (E-Mails, URLs) dürfen umbrechen, sonst overflow */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.legal-card h2 {
  margin: 0 0 var(--s-2);
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
.legal-card address { font-style: normal; line-height: 1.55; }

.legal-block { margin: var(--s-6) 0; }
.legal-block h2 {
  font-size: 1.15rem;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.legal-block h3 {
  font-size: 1rem;
  margin: var(--s-5) 0 var(--s-2);
}
.legal-block p { line-height: 1.6; color: var(--c-text); margin: 0 0 var(--s-3); }
.legal-block p:last-child { margin-bottom: 0; }

.legal-list {
  margin: 0 0 var(--s-3);
  padding-left: 1.2em;
  line-height: 1.6;
}
.legal-list li + li { margin-top: var(--s-2); }

.legal-dl {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: var(--s-2) var(--s-4);
  margin: 0;
}
.legal-dl dt { color: var(--c-text-2); }
.legal-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 540px) {
  .legal-dl { grid-template-columns: 1fr; gap: var(--s-1); }
  .legal-dl dd { margin: 0 0 var(--s-3); }
}

/* dl in den schmalen Cards immer stacked — sonst werden Mail/URL/Telefon abgeschnitten */
.legal-dl--stack { grid-template-columns: 1fr; gap: 0; }
.legal-dl--stack dt {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-3);
  margin-top: var(--s-3);
}
.legal-dl--stack dt:first-of-type { margin-top: 0; }
.legal-dl--stack dd { margin: 2px 0 0; font-weight: 500; }

/* ====================================================
   Preisrange-Pille direkt am Item-Row (Slim-Add + Slim-Shop)
   + Aufklapp-Panel mit Preisvergleich pro Geschäft
   ==================================================== */
.price-range-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-line);
  border-radius: 999px;
  color: var(--c-brand-press);
  font-size: var(--fs-100);
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, border-color 0.15s;
}
.price-range-pill:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.price-range-pill__icon { font-size: 11px; }
.price-range-pill__chevron { font-size: 14px; line-height: 1; transition: transform 0.2s; }
.price-range-pill.is-open .price-range-pill__chevron { transform: rotate(180deg); }
.price-range-pill--shop {
  /* In der Shop-Bar deutlicher Kontrast (weil im Slim-Shop alles auf Brand-Grün liegt) */
  background: #fff;
  border-color: var(--c-line-2);
  color: var(--c-text);
}
.price-range-pill--shop:hover { background: var(--c-brand-tint); color: var(--c-brand-press); border-color: var(--c-brand-line); }

/* Aufklapp-Panel */
.price-compare-panel {
  flex-basis: 100%;
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-200);
}
.price-compare-panel[hidden] { display: none !important; }
.price-compare-panel__h {
  margin: 0 0 4px;
  font-size: var(--fs-300);
  font-weight: 700;
}
.price-compare-panel__sub {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-100);
  color: var(--c-text-3);
}
.price-compare-panel__loading,
.price-compare-panel__empty {
  padding: var(--s-3);
  color: var(--c-text-2);
  text-align: center;
  font-size: var(--fs-200);
  line-height: 1.5;
}

/* Checkbox-Row für Account-Push-Toggle */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-bg);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-300);
  line-height: 1.4;
}
.checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--c-brand);
  flex-shrink: 0;
}
.checkbox-row strong { font-weight: 600; }

/* ====================================================
   PWA Standalone-Mode
   - body.is-pwa wird per JS gesetzt, wenn die App
     aus der Home-Screen-Installation gestartet wurde
     (display-mode: standalone/minimal-ui).
   - Verstecken wir dann die Browser-typischen Navigations-
     Affordances (Footer-Links zu Datenschutz etc. via PWA-Menü
     erreichbar). Außerdem oben Safe-Area-Padding für die iOS-
     Notch/Dynamic-Island, weil black-translucent die Statusbar
     OBEN über den Content rendert.
   ==================================================== */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  /* iOS-Statusbar mit black-translucent: oben Pixel-Padding für Notch.
     Auf Android schadet's nicht, der env() ist dort meist 0. */
  body { padding-top: env(safe-area-inset-top); }

  /* Footer mit Legal-Links: in der App weniger relevant — schrumpfen
     und vom Bottom-Home-Indicator wegrücken. */
  .site-footer { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }

  /* PWA-Splash-Hint: kein „Im Browser öffnen"-Banner mehr.
     (Vorhanden für Suchmaschinen-Hits, irrelevant in der App.) */
  .pwa-only-hide { display: none !important; }
}

/* Body bekommt eine zusätzliche Klasse via JS, falls die installierte App läuft
   (matchMedia plus navigator.standalone für iOS). Hier nochmal redundant,
   für die JS-getriggerte Variante: */
body.is-pwa .pwa-only-hide { display: none !important; }
body.is-pwa { padding-top: env(safe-area-inset-top); }

/* Install-Prompt-Hooks: wir setzen body.pwa-installable wenn der Browser
   beforeinstallprompt feuert (Chrome/Edge). Komponenten können sich daran
   aufhängen, z. B. ein „Als App installieren"-Banner im Konto-Menü. */
.pwa-install-hint { display: none; }
body.pwa-installable .pwa-install-hint { display: inline-flex; }
body.pwa-installed  .pwa-install-hint { display: none !important; }

/* Window-Controls-Overlay-Mode (Desktop-PWAs auf Chrome/Edge/Brave): der
   Title-Bar-Bereich wird transparent über unseren Header gelegt. Wir geben
   dem Header dann Padding-Top, damit das Brand nicht hinter den Window-
   Controls verschwindet. */
@media (display-mode: window-controls-overlay) {
  .site-header {
    padding-top: env(titlebar-area-y, 0px);
    padding-left: env(titlebar-area-x, 0px);
  }
}

/* ====================================================
   PWA-Install-Seite (/install)
   ==================================================== */
.install-hero { padding-bottom: var(--s-4); }
.install-states {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.install-state {
  text-align: left;
  padding: var(--s-5) var(--s-5);
}
.install-state__icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: var(--s-3);
}
.install-state h2 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-500);
}
.install-state p { margin: 0 0 var(--s-3); }
.install-state__hint {
  font-size: var(--fs-200);
  color: var(--c-text-2);
  background: var(--c-bg);
  padding: var(--s-3);
  border-radius: var(--r-md);
  margin-top: var(--s-3);
}
.install-state__cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
  align-items: center;
}
.install-state__more {
  margin-top: var(--s-4);
}
.install-state__more summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--c-text-2);
  padding: var(--s-2) 0;
}
.install-state__more summary:hover { color: var(--c-text); }

/* Schritt-Liste mit großen, klickbaren Item-Höhen — Lese-Komfort auf Mobile. */
.install-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: var(--s-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.install-steps li {
  counter-increment: step;
  position: relative;
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-6) + var(--s-3));
  background: var(--c-bg);
  border-radius: var(--r-md);
  font-size: var(--fs-300);
  line-height: 1.45;
}
.install-steps li::before {
  content: counter(step);
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  width: var(--s-6);
  height: var(--s-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-brand);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  font-size: var(--fs-200);
}
.install-steps strong { color: var(--c-text); }
.install-steps__hint {
  display: block;
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: #fff3d6;
  border: 1px solid #f3d39a;
  border-radius: var(--r-sm);
  color: #5a4a1e;
  font-size: var(--fs-200);
}
.install-steps__icon {
  display: inline-block;
  font-size: 1.2em;
  margin-left: 4px;
}

.install-state--installed { border-left: 4px solid var(--c-brand); }
.install-state--ios       { border-left: 4px solid #007aff; }
.install-state--android   { border-left: 4px solid #3ddc84; }
.install-state--desktop   { border-left: 4px solid var(--c-text-2); }
.install-state--unknown   { border-left: 4px solid var(--c-text-3); }

.install-account {
  background: var(--c-bg);
  border: 1px dashed var(--c-line-2);
}

/* ====================================================
   Mobile-Install-Hint-Banner (global)
   - Erscheint NUR auf mobilen Geräten im Browser (nicht in der PWA)
   - Dismissable, dann 14 Tage Ruhe via localStorage
   - Bleibt unter Header, über Content, nicht fixed (kein nerviger Sticky)
   ==================================================== */
.pwa-mobile-hint {
  display: none;
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, #f5fff0, #fff);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-md);
  font-size: var(--fs-200);
  line-height: 1.45;
  position: relative;
}
/* Sichtbar nur, wenn JS die Klasse setzt. */
body.pwa-mobile-needs-install .pwa-mobile-hint { display: flex; align-items: center; gap: var(--s-3); }
/* In der installierten PWA UND auf der /install-Seite NIE zeigen — wäre redundant. */
body.is-pwa .pwa-mobile-hint,
body.is-install-page .pwa-mobile-hint { display: none !important; }

.pwa-mobile-hint__icon {
  font-size: 20px;
  flex-shrink: 0;
}
.pwa-mobile-hint__text {
  flex: 1;
  min-width: 0;
  color: var(--c-text);
}
.pwa-mobile-hint__text strong { color: var(--c-brand-press); }
.pwa-mobile-hint__cta {
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  background: var(--c-brand);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-200);
}
.pwa-mobile-hint__cta:hover { background: var(--c-brand-press); color: #fff; }
.pwa-mobile-hint__close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--c-text-3);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.pwa-mobile-hint__close:hover { color: var(--c-text); }

/* ====================================================
   Push-Permission-Hint (nur in installierter PWA)
   - Erscheint per JS, wenn Notification.permission !== 'granted'
     UND keine aktive Subscription UND nicht in 7d dismissed
   - CSS-Doppelung: ohne is-pwa-Klasse trotz [hidden]-Attribut blockieren
   ==================================================== */
.pwa-push-hint-wrap { margin: 0; }
.pwa-push-hint {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, #fff7e6, #ffffff);
  border: 1px solid #f0d58a;
  border-radius: var(--r-md);
  font-size: var(--fs-200);
  line-height: 1.45;
}
.pwa-push-hint[hidden] { display: none !important; }
/* Im Nicht-PWA-Modus sicherheitshalber komplett aus */
body:not(.is-pwa) .pwa-push-hint { display: none !important; }

.pwa-push-hint__icon {
  font-size: 24px;
  flex-shrink: 0;
}
.pwa-push-hint__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pwa-push-hint__title {
  font-weight: 700;
  color: var(--c-text);
}
.pwa-push-hint__sub {
  color: var(--c-text-2);
  font-size: var(--fs-100);
}
.pwa-push-hint__cta {
  flex-shrink: 0;
  background: var(--c-brand);
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-200);
  cursor: pointer;
  white-space: nowrap;
}
.pwa-push-hint__cta:hover:not(:disabled) { background: var(--c-brand-press); }
.pwa-push-hint__cta:disabled { opacity: .6; cursor: wait; }
.pwa-push-hint__close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--c-text-3);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.pwa-push-hint__close:hover { color: var(--c-text); }

/* Mobile-Layout: Banner wird mehrzeilig — Buttons unter den Text */
@media (max-width: 540px) {
  .pwa-push-hint {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .pwa-push-hint__body { flex-basis: 100%; }
  .pwa-push-hint__cta { width: auto; }
}