/* Fjalla One — self-hosted (DSGVO: kein Google-Fonts-CDN, CSP: style/font-src 'self') */
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fjalla-one-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fjalla-one-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Default-Theme = GRÜN (Brand-Wechsel Flo 07.07.: „als Default fände ich Grün schöner,
   für die gesamte App" — gilt inkl. Login). Terrakotta bleibt als wählbares Template. */
:root {
  --primary: #41794F; --primary-dark: #336341; --primary-light: #D9E9D2;
  --red: #dc2626; --red-light: #fef2f2;
  --ink: #24301F; --ink-soft: #33402C;
  --bg: #FFFFFF; --card: #ffffff;
  /* Produktkarten: hauchzart getöntes Weiß statt reinem Weiß, hebt die Karten
     vom weißen Hintergrund ab (Flo 07.07., Idee aus dem Terrakotta-#FFFCFA) */
  --card-prod: #FAFCF8;
  --gray-100: #E7EEDC; --gray-200: #DAE4CB; --gray-300: #C1D0AF;
  --gray-400: #9BAE8A; --gray-500: #718260; --gray-600: #566548; --gray-700: #3E4A33; --gray-900: #22291B;
  /* Farbtemplates: Akzent-Gradient, App-Hintergrund-Verlauf, Tönungen.
     Default = Grün; die anderen überschreiben via html[data-theme=…] (unten). */
  --grad-a: #4C8C5C; --grad-b: #41794F;                    /* Buttons, Chips, Checks */
  /* Verlauf läuft in reines Weiß aus (Creme wirkte "schmutzig" — Flo, 05.07.) */
  --bg-a: #D9EAD3; --bg-b: #EAF4E5; --bg-c: #FFFFFF;       /* App-Verlauf oben → unten */
  --tint: #E9F2E0;                                          /* helle Akzent-Fläche (Parse-Emoji u.ä.) */
  --bubble-user: #DEEDD6; --bubble-bot: #F0F5E8;            /* Chat-Bubbles */
  --glow: 50, 100, 60;                                      /* RGB für farbige Schatten: rgba(var(--glow), α) */
  --border-warm: 110, 140, 100;                             /* RGB für getönte Rahmen/Trennlinien */
  --seg: 216, 228, 202;                                     /* RGB Hintergrund View-Umschalter */
  --edge: #F0F7ED;                                          /* Rand-Tönung neben der App-Spalte (≈40% von --bg-a), läuft nach Weiß aus (Flo 06.07.) */
  --grad: linear-gradient(180deg, var(--grad-a) 0%, var(--grad-b) 100%);
  --app-bg: linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 7%, var(--bg-c) 13%, var(--bg-c) 100%);
  /* Rundungs-Tokens (§28, Flo: „überall die gleiche Rundung"): lg = Karten,
     radius = Sheets/große Buttons, sm = Eingaben/kleine Buttons/Zeilen, xs =
     Kacheln/Checkboxen/Chips. Kreise/Pills (50 %/999) bleiben bewusst rund. */
  --radius-lg: 18px; --radius: 14px; --radius-sm: 10px; --radius-xs: 7px;
  /* Minimal kräftiger als vorher: auf weißem Grund tragen nur noch die Schatten die Karten */
  --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  /* Höhe der Bildschirmtastatur (ui.js/visualViewport): iOS legt die Tastatur
     ÜBER das Layout-Viewport (interactive-widget greift nur in Chromium) —
     Sheets und Chat-Eingabe rechnen sie sich per padding-bottom frei. */
  --kb: 0px;
}

/* ─── Farbtemplates (pro Liste wählbar, Dashboard → Farbschema) ───────────────
   Die Themes tönen zusätzlich Hintergrund- und Grau-Palette, damit jede Variante
   eine stimmige eigene Temperatur bekommt. Muss synchron bleiben mit ui.js
   (LIST_THEME_META), theme-boot.js und der Backend-Whitelist (LIST_THEMES). */
html[data-theme="terracotta"] {
  --primary: #C75B32; --primary-dark: #AC4A26; --primary-light: #F4DBC4;
  --ink: #3A2A1F; --ink-soft: #4A3626;
  --bg: #FFFFFF; --card-prod: #FFFCFA;
  --gray-100: #F1E6D8; --gray-200: #E8D9C5; --gray-300: #D9C4AA;
  --gray-400: #B7A38C; --gray-500: #8C7862; --gray-600: #6B5847; --gray-700: #4E3D2E; --gray-900: #2E2016;
  --grad-a: #D2603A; --grad-b: #C4552C;
  --bg-a: #FEE3D0; --bg-b: #FEF0E4; --bg-c: #FFFFFF;
  --tint: #F7EDE2;
  --bubble-user: #FDE7D6; --bubble-bot: #F8F1E3;
  --glow: 160, 60, 20;
  --border-warm: 160, 120, 90;
  --seg: 238, 222, 206;
  --edge: #FFF4EC;
}
html[data-theme="blue"] {
  --primary: #3A6EA5; --primary-dark: #2E5A89; --primary-light: #D3E2F2;
  --ink: #1F2A36; --ink-soft: #2C3A49;
  --bg: #FFFFFF; --card-prod: #FAFCFE;
  --gray-100: #E4ECF3; --gray-200: #D4E0EB; --gray-300: #B9CBDC;
  --gray-400: #92A9BE; --gray-500: #688095; --gray-600: #4E6377; --gray-700: #384857; --gray-900: #1E2833;
  --grad-a: #4680BC; --grad-b: #3A6EA5;
  --bg-a: #D5E5F4; --bg-b: #E7F0F9; --bg-c: #FFFFFF;
  --tint: #E5EEF7;
  --bubble-user: #DAE9F7; --bubble-bot: #EFF4F9;
  --glow: 40, 85, 140;
  --border-warm: 100, 130, 160;
  --seg: 210, 224, 236;
  --edge: #EEF5FB;
}
html[data-theme="amber"] {
  --primary: #B37F24; --primary-dark: #97691C; --primary-light: #F3E4C2;
  --ink: #332A18; --ink-soft: #423722;
  --bg: #FFFFFF; --card-prod: #FFFDF7;
  --gray-100: #F2EAD8; --gray-200: #E9DDC2; --gray-300: #DACBA4;
  --gray-400: #B8A67F; --gray-500: #8E7D58; --gray-600: #6C5E41; --gray-700: #4E432D; --gray-900: #2B2517;
  --grad-a: #C89232; --grad-b: #B37F24;
  --bg-a: #FBE9C4; --bg-b: #FDF3DE; --bg-c: #FFFFFF;
  --tint: #F6ECD6;
  --bubble-user: #FAE8C8; --bubble-bot: #F7F0DE;
  --glow: 150, 105, 25;
  --border-warm: 160, 130, 80;
  --seg: 238, 226, 196;
  --edge: #FDF6E7;
}
html[data-theme="berry"] {
  --primary: #84478C; --primary-dark: #6E3875; --primary-light: #E9D6EC;
  --ink: #2E2233; --ink-soft: #3D2E43;
  --bg: #FFFFFF; --card-prod: #FDFBFE;
  --gray-100: #EEE6F0; --gray-200: #E2D5E5; --gray-300: #CDB9D1;
  --gray-400: #A992AE; --gray-500: #806A85; --gray-600: #625066; --gray-700: #463A49; --gray-900: #271F29;
  --grad-a: #96599E; --grad-b: #84478C;
  --bg-a: #EBD7EF; --bg-b: #F5EAF7; --bg-c: #FFFFFF;
  --tint: #F0E5F2;
  --bubble-user: #EFDDF2; --bubble-bot: #F4EDF5;
  --glow: 110, 55, 120;
  --border-warm: 140, 110, 150;
  --seg: 228, 214, 232;
  --edge: #F7EFF8;
}
html[data-theme="rose"] {
  --primary: #B84A6C; --primary-dark: #9C3A59; --primary-light: #F2D6DF;
  --ink: #332027; --ink-soft: #432B34;
  --bg: #FFFFFF; --card-prod: #FFFBFC;
  --gray-100: #F2E5E9; --gray-200: #E8D4DA; --gray-300: #D6B7C0;
  --gray-400: #B4929D; --gray-500: #8A6873; --gray-600: #684E57; --gray-700: #4A373E; --gray-900: #2A1F23;
  --grad-a: #C95A7C; --grad-b: #B84A6C;
  --bg-a: #FADBE4; --bg-b: #FCECF1; --bg-c: #FFFFFF;
  --tint: #F5E6EB;
  --bubble-user: #F9DEE7; --bubble-bot: #F6EEF0;
  --glow: 150, 55, 90;
  --border-warm: 160, 115, 130;
  --seg: 238, 215, 222;
  --edge: #FDF0F4;
}
/* Dokument-Scroll komplett sperren: Scrollen passiert nur in .scroll / #login /
   .chat-body. Ohne das schiebt iOS beim Einblenden der Tastatur die ganze Seite
   hoch und lässt sie versetzt stehen — Listeninhalt ragt dann über den Header. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); -webkit-tap-highlight-color: transparent; }
body { display: flex; flex-direction: column; }
/* App- statt Website-Gefühl (Flo 08.07.): Taps markieren keinen Text und öffnen
   kein Kopier-Callout mehr. Ausnahmen überall, wo Lesen/Kopieren gewollt ist. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, .chat-bubble, .legal-body { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
input, button, select { font: inherit; }
button { cursor: pointer; }

/* ─── Login ─── */
/* Mockup-Verlauf, ab 13% voll ausgelaufen (Feedback Flo); Auslauf in Weiß statt Creme (05.07.) */
/* Seit Brand-Wechsel auf Grün (07.07.) läuft der Login über die Theme-Variablen —
   ausgeloggt greift das :root-Default (= Brand), eingeloggt das Listen-Theme. */
/* height + overflow-y statt min-height: Body scrollt nicht mehr (s.o.), also muss
   der Login-Screen selbst scrollen, wenn Tastatur/kleines Display ihn stauchen.
   Vertikal zentriert über margin:auto an der Karte (overflow-sicher). */
#login { display: flex; justify-content: center; height: 100dvh; overflow-y: auto; padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); background: var(--app-bg); }
.login-card { width: 100%; max-width: 360px; margin: auto 0; }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; vertical-align: middle; }
.brand-logo-sm { width: 22px; height: 22px; border-radius: 6px; vertical-align: middle; }
.login-logo-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.login-logo-wrap img { width: 108px; height: auto; margin-bottom: 14px; filter: drop-shadow(0 6px 14px rgba(var(--glow), 0.20)); }
/* Vertikal gestreckt + mehr Laufweite (Feedback Flo) */
.login-logo-wrap h1 { font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 64px; letter-spacing: 0.035em; color: var(--gray-900); display: inline-block; transform: scaleY(1.12); transform-origin: bottom; }
.login-card p { color: var(--gray-500); margin-bottom: 16px; font-size: 14px; }
.login-tabs { display: flex; align-items: center; justify-content: center; gap: 36px; margin-bottom: 26px; }
.login-tab-divider { width: 1px; height: 22px; background: rgba(var(--border-warm), 0.45); flex-shrink: 0; align-self: flex-start; margin-top: 4px; }
.login-tab { position: relative; background: none; border: none; padding: 2px 2px 12px; font-size: 17px; font-weight: 600; color: var(--gray-600); cursor: pointer; width: auto; }
.login-tab.active { color: var(--grad-b); }
.login-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5px; border-radius: 2px; background: var(--grad-b); }
/* Halbtransparentes Weiß wie im Mockup — der Verlauf scheint leicht durch */
.login-card input { width: 100%; padding: 19px 18px; border: 1px solid rgba(var(--border-warm), 0.45); border-radius: 12px; margin-bottom: 14px; font-size: 16px; background: rgba(255, 255, 255, 0.32); box-shadow: 0 1px 3px rgba(var(--glow), 0.05); transition: border-color 0.2s, background 0.2s; }
.login-card input::placeholder { color: var(--gray-500); }
.login-card input:focus { background: rgba(255, 255, 255, 0.7); }
.login-card input:focus { outline: none; border-color: var(--primary); }
.input-group { position: relative; margin-bottom: 16px; }
.input-group input { padding-left: 46px; margin-bottom: 0; }
.input-group.has-toggle input { padding-right: 42px; }
.input-group .input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-500); display: flex; pointer-events: none; }
.input-group .input-icon svg { width: 18px; height: 18px; }
.input-group .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; width: 30px; padding: 0; color: var(--gray-500); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.input-group .pw-toggle svg { width: 18px; height: 18px; }
#loginBtn { width: 100%; padding: 19px; background: var(--grad); color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: 700; box-shadow: 0 4px 10px -2px rgba(var(--glow), 0.45), 0 2px 4px rgba(var(--glow), 0.20); transition: opacity 0.2s; }
#loginBtn:active { opacity: 0.85; }
#loginBtn:disabled { opacity: 0.45; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 22px; font-size: 13px; white-space: nowrap; }
.login-remember { display: flex; align-items: center; gap: 6px; color: var(--gray-600); cursor: pointer; }
/* Custom-Checkbox im selben Stil wie die Textfelder: transparent, warmer 1px-Rahmen, klein.
   padding/box-shadow explizit zurücksetzen — die generische .login-card-input-Regel trifft sonst auch hierher */
.login-remember input, .login-consent input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; padding: 0; margin: 0; box-shadow: none; border: 1px solid rgba(var(--border-warm), 0.45); border-radius: 4px; background: rgba(255, 255, 255, 0.32); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; }
.login-remember input:checked, .login-consent input:checked { background: var(--primary); border-color: var(--primary); }
.login-remember input:checked::before, .login-consent input:checked::before { content: '✓'; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
/* Consent-Gate (§7.1): AGB-Checkbox im Register-Tab */
#consentGroup { margin-bottom: 14px; }
.login-consent { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; color: var(--gray-600); font-size: 13px; line-height: 1.5; text-align: left; }
.login-consent input { margin-top: 2px; }
.login-consent a { color: var(--primary); font-weight: 600; }
.consent-dse { margin-top: 6px; padding-left: 23px; font-size: 12px; color: var(--gray-500); text-align: left; }
.consent-dse a { color: var(--gray-500); text-decoration: underline; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; color: var(--gray-400); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.login-social { display: flex; gap: 10px; margin-bottom: 18px; }
/* Social-Buttons im Mockup deckender weiß als die Inputs */
.login-social button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, 0.85); color: #3D3D3D; border: 1px solid rgba(var(--border-warm), 0.4); border-radius: 12px; box-shadow: 0 1px 3px rgba(var(--glow), 0.05); font-size: 14px; font-weight: 600; padding: 16px 6px; cursor: not-allowed; }
.login-social button svg { width: 17px; height: 17px; flex-shrink: 0; }
.login-switch { text-align: center; font-size: 13px; color: var(--gray-600); }
.login-switch a { color: var(--primary); font-weight: 700; text-decoration: none; }
/* Passwordless: Umschalter E-Mail-Code ⇄ Passwort */
.login-method-switch { text-align: center; font-size: 13.5px; margin: 2px 0 0; }
.login-method-switch a { color: var(--primary); font-weight: 700; text-decoration: none; }
.login-error { color: var(--red); font-size: 13px; margin-top: 8px; display: none; }
.login-loading { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--gray-500); font-size: 14px; }
.spinner { width: 20px; height: 20px; border: 2px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-footer { text-align: center; margin-top: 16px; font-size: 12px; color: var(--gray-400); }

/* ─── App Shell ─── */
/* Gleicher Farbverlauf wie #login (Vorgabe: App-Hintergrund = Login-Verlauf) */
#app { display: none; flex-direction: column; height: 100dvh; max-width: 600px; margin: 0 auto; width: 100%; background: var(--app-bg); position: relative; }

/* ─── Header ─── */
/* Sticky-Kopf ist opak: zeigt exakt die eigene Scheibe des App-Verlaufs (Gradient auf
   Viewport-Höhe skaliert), damit scrollender Inhalt darunter verschwindet statt
   durchzuscheinen. Segment-Wrap setzt die Scheibe um die Header-Höhe versetzt fort. */
.header { background-image: var(--app-bg); background-repeat: no-repeat; background-size: 100% 100vh; background-size: 100% 100dvh; padding: 12px 16px; padding-top: calc(12px + var(--safe-top)); display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; }
.header h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 6px; min-width: 0; }
.list-name-btn { background: transparent; border: none; color: var(--ink); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 0; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.list-name-btn:active { background: var(--gray-100); }
.list-chev { font-size: 12px; color: var(--gray-400); flex-shrink: 0; }
/* Zähler-Badge wie im Mockup: Terracotta-Pill neben dem Titel */
.count-chip { font-size: 12.5px; font-weight: 700; color: #fff; background: var(--grad); min-width: 26px; height: 22px; padding: 0 8px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.header-spacer { flex: 1; }
/* Titel links wie im Mockup, Badge direkt daneben */
.header-title { flex: 1; display: flex; justify-content: flex-start; align-items: center; gap: 8px; min-width: 0; }
.header-title .list-name-btn { padding: 4px 4px 4px 0; max-width: 100%; }
.header-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.icon-btn { background: transparent; border: none; color: var(--gray-700); width: 38px; height: 38px; border-radius: 10px; font-size: 19px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.icon-btn:active { background: var(--gray-100); }
.icon-btn svg { width: 21px; height: 21px; }
.offline-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; display: none; box-shadow: 0 0 0 3px #fef3c7; }
.offline-dot.visible { display: block; }

/* ─── Tier Badge ─── */
.tier-badge { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 8px; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; }
.tier-badge.free { background: var(--gray-100); color: var(--gray-500); }
.tier-badge.supporter { background: #fef3c7; color: #92400e; }
.tier-badge.pro { background: #f3e8ff; color: #7c3aed; }

/* ─── Header Menu (Slide-in Drawer) ─── */
.menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.menu-backdrop.visible { opacity: 1; pointer-events: auto; }
.menu { position: fixed; top: 0; right: 0; bottom: 0; width: 70%; max-width: 240px; background: white; box-shadow: var(--shadow-lg); z-index: 56; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.menu.visible { transform: translateX(0); }
.menu-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--gray-200); font-weight: 700; font-size: 17px; flex-shrink: 0; }
.menu-drawer-header .icon-btn { width: 32px; height: 32px; flex-shrink: 0; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 20px; background: white; border: none; font-size: 15px; color: var(--ink); text-align: left; }
.menu button svg { width: 19px; height: 19px; flex-shrink: 0; }
.menu button + button { border-top: 1px solid var(--gray-100); }
.menu button:active { background: var(--gray-100); }
.menu button.danger { color: var(--red); }
.menu-bottom { margin-top: auto; }
.menu-footer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: var(--gray-400); font-size: 13px; font-weight: 600; }
.menu-legal { border-top: 1px solid var(--gray-200); flex-shrink: 0; }
.menu-legal > button { color: var(--gray-500); font-size: 13px; padding: 13px 20px; }
.menu-legal > button:not(.danger) { padding-left: 47px; }
.menu-legal > button svg { width: 15px; height: 15px; }

/* ─── Segmented Control (iOS-Stil wie Mockup: ein Container, aktive Pill, Trennstriche) ─── */
.segment-wrap { padding: 8px 16px 8px; position: sticky; top: calc(63px + var(--safe-top)); z-index: 20; background-image: var(--app-bg); background-repeat: no-repeat; background-size: 100% 100vh; background-size: 100% 100dvh; background-position: 0 calc(-63px - var(--safe-top)); }
.segment { display: flex; gap: 0; padding: 3px; background: rgba(var(--seg), 0.65); border-radius: 12px; }
.seg-btn { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 6px; border: none; background: transparent; color: var(--ink-soft); border-radius: 9px; font-size: 14px; font-weight: 600; transition: all 0.15s; }
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn.active { background: var(--grad); color: white; box-shadow: 0 2px 6px -1px rgba(var(--glow), 0.35); }
/* Dünner Trennstrich zwischen inaktiven Nachbarn (iOS-Verhalten: neben der aktiven Pill keiner) */
.seg-btn + .seg-btn::before { content: ''; position: absolute; left: -0.5px; top: 22%; bottom: 22%; width: 1px; background: rgba(var(--border-warm), 0.35); }
.seg-btn.active::before, .seg-btn.active + .seg-btn::before { display: none; }

/* ─── Scroll area ─── */
/* min-height: 0 ist Pflicht: Safari lässt Flex-Kinder sonst nicht unter die
   Inhaltshöhe schrumpfen — .scroll wird dann so hoch wie die Liste und scrollt
   nie intern (der Überlauf landete früher im Dokument, das jetzt gesperrt ist). */
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 0 110px; overscroll-behavior: contain; }