/* =========================================================
   Familie zuhause – variables Farbsystem v350
   Alle bisherigen --green-* Variablen bleiben als kompatible
   Aliasse erhalten. Neue Komponenten sollen bevorzugt die
   --accent-* bzw. --button-* Variablen verwenden.
   ========================================================= */

:root {
  color-scheme: light;

  /* Fallback: Light-Mode nutzt die helle Farbe. theme.js überschreibt
     diese Werte zentral anhand der Admin-Hexcodes. */
  --accent-deep: #244A32;
  --accent-primary: #2D5A3D;
  --accent-medium: #6E9D79;
  --accent-soft: #C9E9D0;
  --accent-mint: #DCEFE0;
  --accent-pale: #F2F9F3;
  --accent-action: #AEE0B8;
  --accent-action-hover: #97CBA2;
  --accent-action-rgb: 174, 224, 184;
  --accent-medium-rgb: 110, 157, 121;
  --accent-lime: #A1D6AC;
  --accent-lime-rgb: 161, 214, 172;
  --accent-solid-start: #AEE0B8;
  --accent-solid-end: #9ED2A9;
  --accent-on-solid: #07110C;
  --accent-focus: rgba(174, 224, 184, .30);
  --accent-border: rgba(174, 224, 184, .42);
  --accent-soft-bg: rgba(174, 224, 184, .23);
  --accent-softer-bg: rgba(174, 224, 184, .13);
  --accent-shadow: rgba(45, 90, 61, .22);

  /* Kompatibilität für alle bisherigen Komponenten. */
  --green-deep: var(--accent-deep);
  --green-primary: var(--accent-primary);
  --green-medium: var(--accent-medium);
  --green-soft: var(--accent-soft);
  --green-mid: var(--accent-medium);
  --green: var(--accent-action);
  --green-mint: var(--accent-mint);
  --green-pale: var(--accent-pale);
  --primary: var(--accent-action);
  --primary-color: var(--accent-action);
  --primary-dark: var(--accent-deep);
  --primary-light: var(--accent-mint);
  --accent-color: var(--accent-action);
  --button-color: var(--accent-action);
  --card-bg: var(--bg-card);
  --text: var(--text-dark);
  --text-muted: var(--text-light);
  --border: color-mix(in srgb, var(--accent-medium) 20%, transparent);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Fallback: Dark-Mode nutzt die dunkle Farbe. */
  --accent-deep: #AEE0B8;
  --accent-primary: #8DBA97;
  --accent-medium: #6E9D79;
  --accent-soft: #203A29;
  --accent-mint: #172B1E;
  --accent-pale: #102016;
  --accent-action: #2D5A3D;
  --accent-action-hover: #456F52;
  --accent-action-rgb: 45, 90, 61;
  --accent-medium-rgb: 110, 157, 121;
  --accent-lime: #497859;
  --accent-lime-rgb: 73, 120, 89;
  --accent-solid-start: #2D5A3D;
  --accent-solid-end: #3B6848;
  --accent-on-solid: #FFFFFF;
  --accent-focus: rgba(45, 90, 61, .34);
  --accent-border: rgba(45, 90, 61, .48);
  --accent-soft-bg: rgba(45, 90, 61, .20);
  --accent-softer-bg: rgba(45, 90, 61, .11);
  --accent-shadow: rgba(45, 90, 61, .30);
}

/* Grundflächen erhalten einen sehr dezenten Akzent, ohne Lesbarkeit zu verlieren. */
body::before {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(var(--accent-medium-rgb), .08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(var(--accent-action-rgb), .045), transparent 42%) !important;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] body::before {
  --familie-accent-bg-strength: .13;
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 20% -10%, rgba(var(--accent-action-rgb), .14), transparent 34%),
    radial-gradient(circle at 100% 76%, rgba(var(--accent-medium-rgb), .075), transparent 36%),
    linear-gradient(180deg, #07110c 0%, #0b1711 46%, #06100b 100%) !important;
}

/* Formularsteuerelemente übernehmen das Farbschema automatisch. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--accent-action);
}

:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--accent-focus) !important;
  outline-offset: 2px;
}

::selection {
  background: rgba(var(--accent-action-rgb), .28);
}

/* Bestehende Marken- und Navigationsakzente. */
.navbar-brand-accent,
.nav-categories-toggle,
.footer-version-link,
a:not(.btn):hover {
  color: var(--accent-action) !important;
}

.navbar-brand-logo path:nth-child(1),
.navbar-brand-logo path:nth-child(4) { fill: var(--accent-action) !important; }
.navbar-brand-logo path:nth-child(2) { fill: var(--accent-medium) !important; }
.navbar-brand-logo path:nth-child(3) { fill: var(--accent-primary) !important; }
.navbar-brand-logo path:nth-child(5) { stroke: var(--accent-primary) !important; }

/* Einheitliche Button-Tokens. Auch neue .btn-Komponenten erben sie automatisch. */
.btn,
button,
[role="button"],
a.btn {
  --button-solid-bg: linear-gradient(135deg, var(--accent-solid-start), var(--accent-solid-end));
  --button-solid-text: var(--accent-on-solid);
  --button-soft-bg: var(--accent-soft-bg);
  --button-soft-hover: color-mix(in srgb, var(--accent-action) 17%, transparent);
  --button-border: var(--accent-border);
  --button-text: var(--accent-deep);
}

 :root[data-accent] :is(
  .btn-primary,
  .btn-danger,
  .shopping-action-btn-primary,
  .shopping-mobile-add-direct,
  .birthday-add-btn-v240,
  .floating-add-btn,
  .thread-create-fab,
  .fab,
  .desktop-plus-button-v298,
  .weather-scroll-button-v339
) {
  background: var(--button-solid-bg) !important;
  border-color: color-mix(in srgb, var(--accent-action) 55%, transparent) !important;
  color: var(--button-solid-text) !important;
  box-shadow: 0 10px 26px var(--accent-shadow) !important;
}

:root[data-accent] :is(
  .btn-primary,
  .btn-danger,
  .shopping-action-btn-primary,
  .shopping-mobile-add-direct,
  .birthday-add-btn-v240,
  .floating-add-btn,
  .thread-create-fab,
  .fab,
  .desktop-plus-button-v298,
  .weather-scroll-button-v339
) * {
  color: inherit !important;
}

:root[data-accent] :is(
  .btn-primary,
  .btn-danger,
  .shopping-action-btn-primary,
  .shopping-mobile-add-direct,
  .birthday-add-btn-v240,
  .floating-add-btn,
  .thread-create-fab,
  .fab,
  .desktop-plus-button-v298,
  .weather-scroll-button-v339
):hover {
  filter: brightness(1.045) saturate(1.03);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px var(--accent-shadow) !important;
}

:root[data-accent] :is(
  .btn-secondary,
  .btn-outline,
  .btn-whatsapp,
  .external-site-back,
  .admin-settings-back,
  .admin-settings-search-clear,
  .weather-location-button-v338,
  .weather-refresh-v338,
  .govee-refresh-mini,
  .password-toggle,
  .quick-access-manage-v185,
  .family-collapse-toggle-v227,
  .home-summary-button,
  .nav-notification-button,
  .nav-categories-summary,
  .modal-close,
  .confirm-close
) {
  background: var(--button-soft-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--button-text) !important;
}

:root[data-accent] :is(
  .btn-secondary,
  .btn-outline,
  .btn-whatsapp,
  .external-site-back,
  .admin-settings-back,
  .admin-settings-search-clear,
  .weather-location-button-v338,
  .weather-refresh-v338,
  .govee-refresh-mini,
  .password-toggle,
  .quick-access-manage-v185,
  .family-collapse-toggle-v227,
  .home-summary-button,
  .nav-notification-button,
  .nav-categories-summary,
  .modal-close,
  .confirm-close
):hover {
  background: var(--button-soft-hover) !important;
  border-color: color-mix(in srgb, var(--accent-action) 58%, transparent) !important;
  color: var(--accent-deep) !important;
}

/* Tabs, Chips, Auswahlkarten und Filter verwenden dieselbe Akzentfamilie. */
:root[data-accent] :is(
  .auto-tab-v325,
  .view-tab,
  .todo-filter-btn,
  .washing-view-btn,
  .settings-choice-v261,
  .admin-settings-row,
  .tab-button,
  .tab-btn,
  .view-btn,
  .section-tab,
  .filter-chip,
  .chip,
  .pill,
  .category-chip,
  .mood-chip,
  .weather-location-chips-v338 button,
  .fuel-location-chip-v343,
  .fuel-ai-actions-v343 button,
  .fuel-geocode-results-v343 button,
  .fuel-liter-presets-v343 button,
  .weather-ai-actions-v338 button,
  .smart-action-chips button,
  .smart-start-suggestions-v205 button,
  .smart-start-suggestions-v241 button,
  .recipe-ai-suggestions-v316 button,
  .recipe-ai-suggestions-v318 button,
  .recipe-chip-row-v282 button,
  .recipe-pagination-v305 button,
  .recipes-view-toggle button,
  .recipes-view-toggle-v282 button,
  .shopping-day-tabs-v236 button,
  .guestbook-choice-row-v276 button,
  .calendar-custom-person-chip button,
  .fuel-favorite-button-v343
) {
  border-color: color-mix(in srgb, var(--accent-action) 24%, var(--border, transparent)) !important;
}

:root[data-accent] :is(
  .auto-tab-v325,
  .view-tab,
  .todo-filter-btn,
  .washing-view-btn,
  .settings-choice-v261,
  .tab-button,
  .tab-btn,
  .view-btn,
  .section-tab,
  .filter-chip,
  .chip,
  .pill,
  .category-chip,
  .mood-chip,
  .weather-location-chips-v338 button,
  .fuel-location-chip-v343,
  .fuel-ai-actions-v343 button,
  .fuel-geocode-results-v343 button,
  .fuel-liter-presets-v343 button,
  .weather-ai-actions-v338 button,
  .smart-action-chips button,
  .smart-start-suggestions-v205 button,
  .smart-start-suggestions-v241 button,
  .recipe-ai-suggestions-v316 button,
  .recipe-ai-suggestions-v318 button,
  .recipe-chip-row-v282 button,
  .recipe-pagination-v305 button,
  .recipes-view-toggle button,
  .recipes-view-toggle-v282 button,
  .shopping-day-tabs-v236 button,
  .guestbook-choice-row-v276 button,
  .calendar-custom-person-chip button,
  .fuel-favorite-button-v343
):hover {
  background: var(--button-soft-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-deep) !important;
}

:root[data-accent] :is(
  .auto-tab-v325.is-active,
  .view-tab.active,
  .view-tab.is-active,
  .todo-filter-btn.is-active,
  .washing-view-btn.is-active,
  .settings-choice-v261.is-selected,
  .tab-button.active,
  .tab-button.is-active,
  .tab-btn.active,
  .tab-btn.is-active,
  .view-btn.active,
  .view-btn.is-active,
  .section-tab.active,
  .section-tab.is-active,
  .filter-chip.active,
  .filter-chip.is-active,
  .weather-location-chips-v338 button.is-active,
  .fuel-location-chip-v343.is-active,
  .fuel-geocode-results-v343 button.is-selected,
  .fuel-favorite-button-v343.is-active,
  .recipes-view-toggle button.is-active,
  .recipes-view-toggle-v282 button.is-active,
  .recipes-view-toggle-v282 button[aria-selected="true"],
  .shopping-day-tabs-v236 button.is-active,
  .guestbook-choice-row-v276 button.is-selected,
  .quick-status-choice.selected,
  .quick-status-choice[aria-pressed="true"]
) {
  background: var(--button-solid-bg) !important;
  border-color: color-mix(in srgb, var(--accent-action) 58%, transparent) !important;
  color: var(--button-solid-text) !important;
  box-shadow: 0 8px 22px var(--accent-shadow) !important;
}

:root[data-accent] :is(
  .auto-tab-v325.is-active,
  .view-tab.active,
  .view-tab.is-active,
  .todo-filter-btn.is-active,
  .washing-view-btn.is-active,
  .settings-choice-v261.is-selected,
  .tab-button.active,
  .tab-button.is-active,
  .tab-btn.active,
  .tab-btn.is-active,
  .view-btn.active,
  .view-btn.is-active,
  .section-tab.active,
  .section-tab.is-active,
  .filter-chip.active,
  .filter-chip.is-active,
  .weather-location-chips-v338 button.is-active,
  .fuel-location-chip-v343.is-active,
  .fuel-geocode-results-v343 button.is-selected,
  .fuel-favorite-button-v343.is-active,
  .recipes-view-toggle button.is-active,
  .recipes-view-toggle-v282 button.is-active,
  .recipes-view-toggle-v282 button[aria-selected="true"],
  .shopping-day-tabs-v236 button.is-active,
  .guestbook-choice-row-v276 button.is-selected,
  .quick-status-choice.selected,
  .quick-status-choice[aria-pressed="true"]
) * {
  color: inherit !important;
}

/* Tankpreis-, Wetter- und andere moderne Komponenten nutzen häufig --primary. */
 :root[data-accent] :is(
  .tank-prices-tabs-v344 button.is-active,
  .fuel-api-status-v343.is-connected,
  .auto-fuel-best-badge-v344,
  .notification-smart-badge-v334,
  .notification-smart-badge-v342,
  .badge-member,
  .alert-success,
  .alert-info
) {
  background-color: var(--accent-action) !important;
  border-color: var(--accent-border) !important;
}

:root[data-accent] .tank-prices-tabs-v344 button.is-active {
  background: var(--button-solid-bg) !important;
  color: var(--button-solid-text) !important;
  box-shadow: 0 7px 18px var(--accent-shadow) !important;
}

/* Mobile Navigation: Plus und aktive Flächen passen sich an. */
:root[data-accent] :is(
  .mobile-bottom-nav-plus,
  .mobile-bottom-nav-add,
  .mobile-bottom-nav-item.is-plus,
  .mobile-bottom-nav-center
) {
  background: var(--button-solid-bg) !important;
  border-color: color-mix(in srgb, var(--accent-action) 58%, transparent) !important;
  color: var(--button-solid-text) !important;
  box-shadow: 0 12px 30px var(--accent-shadow) !important;
}

:root[data-accent] :is(
  .mobile-bottom-nav-item.is-active,
  body.mobile-category-sheet-open .mobile-bottom-nav-more
) {
  background: var(--accent-soft-bg) !important;
  border-color: color-mix(in srgb, var(--accent-action) 28%, transparent) !important;
  color: var(--accent-deep) !important;
}

/* Schalter und ausgewählte Checkbox-Karten. */
:root[data-accent] :is(
  .notification-toggle-card-v342 input:checked + .notification-toggle-control-v342,
  .switch-row input:checked + span::before,
  .toggle-switch input:checked + .toggle-slider,
  input[type="checkbox"].switch:checked + label
) {
  background: var(--accent-action) !important;
  border-color: var(--accent-action) !important;
}


/* Alte Spezialkomponenten mit fest codiertem Grün folgen ebenfalls dem gewählten Schema. */
:root[data-accent] .nav-links a:hover,
:root[data-accent] .nav-links a.active,
:root[data-accent] .mobile-bottom-nav-item:hover,
:root[data-accent] .mobile-bottom-nav-item:focus-visible,
:root[data-accent] .mobile-bottom-nav-item:active,
:root[data-accent] .quick-add-sheet .mobile-nav-sheet-link:hover,
:root[data-accent] .quick-add-sheet .mobile-nav-sheet-link:focus-visible,
:root[data-accent] .category-sheet .mobile-category-link:hover,
:root[data-accent] .category-sheet .mobile-category-link:focus-visible {
  background: var(--accent-soft-bg) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-deep) !important;
}

:root[data-accent] button[aria-pressed="true"],
:root[data-accent] button[aria-selected="true"],
:root[data-accent] [role="button"][aria-pressed="true"],
:root[data-accent] [role="button"][aria-selected="true"] {
  border-color: var(--accent-action) !important;
}

:root[data-accent] .mobile-bottom-nav-item.is-active::after,
:root[data-accent] .mobile-bottom-nav-item.active::after {
  background: var(--accent-action) !important;
}

/* Einstellungs-Auswahl für die sieben Farbschemata. */
.settings-accent-picker-v347 {
  margin-top: 1.25rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-medium) 18%, transparent);
}
.settings-accent-picker-v347 > strong {
  display: block;
  margin-bottom: .18rem;
  font-size: 1rem;
}
.settings-accent-picker-v347 > p {
  margin: 0 0 .9rem;
  color: var(--text-light);
}
.settings-accent-grid-v347 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}
.settings-accent-choice-v347 {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "swatch title" "swatch hint";
  align-items: center;
  gap: .08rem .65rem;
  min-height: 72px;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--accent-medium) 18%, transparent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--accent-pale) 4%);
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.settings-accent-choice-v347:hover {
  transform: translateY(-1px);
  border-color: var(--accent-border) !important;
  background: var(--accent-softer-bg) !important;
}
.settings-accent-choice-v347.is-selected {
  border-color: var(--accent-action) !important;
  background: var(--accent-soft-bg) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-action) 32%, transparent), 0 9px 22px var(--accent-shadow);
}
.settings-accent-choice-v347.is-selected::after {
  content: '✓';
  position: absolute;
  top: .42rem;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent-action);
  color: var(--accent-on-solid);
  font-size: .72rem;
  font-weight: 900;
}
.settings-accent-choice-v347 strong { grid-area: title; font-size: .9rem; }
.settings-accent-choice-v347 small { grid-area: hint; color: var(--text-light); font-size: .7rem; }
.settings-accent-swatch-v347 {
  grid-area: swatch;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--preview-dark), var(--preview-light));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 5px 12px rgba(0,0,0,.12);
}

:root[data-theme="dark"] .settings-accent-choice-v347 {
  background: rgba(255,255,255,.045);
  border-color: color-mix(in srgb, var(--accent-medium) 22%, transparent);
}
:root[data-theme="dark"] .settings-accent-choice-v347:hover,
:root[data-theme="dark"] .settings-accent-choice-v347.is-selected {
  background: var(--accent-soft-bg) !important;
}

@media (max-width: 760px) {
  .settings-accent-grid-v347 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .settings-accent-grid-v347 { grid-template-columns: 1fr; }
}

/* Disabled bleibt bewusst neutral und klar erkennbar. */
button:disabled,
.btn:disabled,
[aria-disabled="true"] {
  filter: saturate(.35);
  opacity: .52;
  box-shadow: none !important;
  cursor: not-allowed;
}


/* =========================================================
   Admin: zentrale Hex-Farben v349
   ========================================================= */
.accent-admin-intro-v349 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background: var(--accent-softer-bg);
}
.accent-admin-intro-v349 > span { font-size: 1.65rem; line-height: 1; }
.accent-admin-intro-v349 strong { display: block; margin-bottom: .25rem; }
.accent-admin-intro-v349 p { margin: 0; color: var(--text-light); line-height: 1.55; }
.accent-admin-grid-v349 { display: grid; gap: .8rem; margin-top: 1rem; }
.accent-admin-row-v349 {
  display: grid;
  grid-template-columns: minmax(120px, .72fr) minmax(210px, 1fr) minmax(210px, 1fr) minmax(180px, .75fr);
  gap: .75rem;
  align-items: end;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--accent-medium) 22%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--accent-pale) 4%);
}
.accent-admin-name-v349 { align-self: center; }
.accent-admin-name-v349 strong { display: block; }
.accent-admin-name-v349 small { display: block; margin-top: .2rem; color: var(--text-light); }
.accent-admin-field-v349 { display: grid; gap: .36rem; }
.accent-admin-field-v349 > span { font-size: .78rem; font-weight: 800; color: var(--text-light); }
.accent-admin-input-wrap-v349 {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .45rem;
  align-items: center;
}
.accent-admin-input-wrap-v349 input[type="color"] {
  width: 46px;
  height: 46px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-card);
  cursor: pointer;
}
.accent-admin-input-wrap-v349 input[type="text"] {
  min-width: 0;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .035em;
}
.accent-admin-input-wrap-v349 input.is-invalid { border-color: #c94f4f !important; box-shadow: 0 0 0 3px rgba(201,79,79,.16); }
.accent-admin-preview-v349 {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--accent-medium) 24%, transparent);
  border-radius: 14px;
}
.accent-admin-preview-v349 span { display: grid; place-items: center; padding: .55rem; font-size: .75rem; font-weight: 900; text-align: center; }
.accent-admin-actions-v349 { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }
.accent-admin-note-v349 { margin: .75rem 0 0; color: var(--text-light); font-size: .82rem; line-height: 1.5; }
:root[data-theme="dark"] .accent-admin-row-v349 { background: rgba(255,255,255,.035); }

@media (max-width: 1050px) {
  .accent-admin-row-v349 { grid-template-columns: minmax(130px, .65fr) 1fr 1fr; }
  .accent-admin-preview-v349 { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .accent-admin-row-v349 { grid-template-columns: 1fr; }
  .accent-admin-preview-v349 { grid-column: auto; }
  .accent-admin-actions-v349 .btn { width: 100%; }
}


/* =========================================================
   v350 – verbleibende Sonderkomponenten am zentralen Farbsystem
   Nur Akzente werden eingefärbt; große Flächen bleiben bewusst
   neutral, damit alternative Schemata nicht die gesamte App färben.
   ========================================================= */

/* Primäre Seitenaktionen: ältere ID-/Seitenselektoren dürfen die
   zentrale Buttonfarbe nicht mehr mit dem früheren Grün überschreiben. */
:root[data-accent] #btn-add-recipe,
:root[data-accent] #btn-add-event-top,
:root[data-accent] #btn-add-event-day,
:root[data-accent] .recipes-empty-actions-v282 .btn-primary,
:root[data-accent] .recipes-hero-actions-v282 .btn-primary,
:root[data-accent] .calendar-toolbar-actions .btn-primary,
:root[data-accent] .calendar-form-actions-v259 .btn-primary {
  background: var(--button-solid-bg) !important;
  border-color: color-mix(in srgb, var(--accent-action) 58%, transparent) !important;
  color: var(--button-solid-text) !important;
  box-shadow: 0 10px 26px var(--accent-shadow) !important;
}
:root[data-accent] #btn-add-recipe *,
:root[data-accent] #btn-add-event-top *,
:root[data-accent] #btn-add-event-day *,
:root[data-accent] .recipes-empty-actions-v282 .btn-primary *,
:root[data-accent] .recipes-hero-actions-v282 .btn-primary *,
:root[data-accent] .calendar-toolbar-actions .btn-primary *,
:root[data-accent] .calendar-form-actions-v259 .btn-primary * {
  color: inherit !important;
}

/* Globaler Nach-oben-Button. */
:root[data-accent] #global-back-to-top,
:root[data-accent] .global-back-to-top {
  background: var(--button-solid-bg) !important;
  border-color: color-mix(in srgb, var(--accent-action) 60%, transparent) !important;
  color: var(--button-solid-text) !important;
  box-shadow: 0 16px 36px var(--accent-shadow) !important;
}
:root[data-accent] #global-back-to-top:hover,
:root[data-accent] .global-back-to-top:hover {
  box-shadow: 0 20px 46px var(--accent-shadow) !important;
  filter: brightness(1.04) saturate(1.03);
}

/* Offene Einkaufsliste: nur Rahmen, Icon, Pfeil und ein sanfter Schimmer
   greifen das Schema auf – die Karte bleibt lesbar und ruhig. */
:root[data-accent] .shopping-today-widget-v230 {
  color: var(--text-dark) !important;
  border-color: color-mix(in srgb, var(--accent-action) 42%, transparent) !important;
  background:
    radial-gradient(circle at 4% 34%, rgba(var(--accent-action-rgb), .18), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 95%, var(--accent-action) 5%), var(--bg-card)) !important;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--accent-shadow) 68%, transparent) !important;
}
:root[data-accent] .shopping-today-widget-v230 strong {
  color: var(--text-dark) !important;
}
:root[data-accent] .shopping-today-widget-v230 small {
  color: var(--text-light) !important;
}
:root[data-accent] .shopping-today-icon-v230 {
  color: var(--accent-deep) !important;
  background: var(--accent-soft-bg) !important;
  border: 1px solid var(--accent-border) !important;
}
:root[data-accent] .shopping-today-widget-v230 b {
  color: var(--accent-deep) !important;
}
:root[data-theme="dark"][data-accent] .shopping-today-widget-v230 {
  color: var(--text-dark) !important;
  border-color: var(--accent-border) !important;
  background:
    radial-gradient(circle at 4% 34%, rgba(var(--accent-action-rgb), .16), transparent 30%),
    linear-gradient(145deg, rgba(18, 35, 25, .96), rgba(7, 22, 14, .97)) !important;
}
:root[data-theme="dark"][data-accent] .shopping-today-widget-v230 strong {
  color: #F5FFF7 !important;
}
:root[data-theme="dark"][data-accent] .shopping-today-widget-v230 small {
  color: rgba(226, 242, 231, .74) !important;
}

/* Plus-Menü: die Grundfläche bleibt neutral. Das gewählte Schema erscheint
   an Kicker, KI-Karte, Pfeilen, Fokus und Schließen-Button. */
:root[data-accent] .modal-content-mobile-sheet:has(.plus-menu-v309) .modal-close {
  color: var(--accent-deep) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-soft-bg) !important;
  box-shadow: 0 8px 22px var(--accent-shadow) !important;
}
:root[data-accent] .modal-content-mobile-sheet:has(.plus-menu-v309) .modal-close:hover,
:root[data-accent] .modal-content-mobile-sheet:has(.plus-menu-v309) .modal-close:focus-visible {
  background: var(--button-soft-hover) !important;
  border-color: color-mix(in srgb, var(--accent-action) 62%, transparent) !important;
}
:root[data-accent] .plus-menu-handle-v309 {
  background: color-mix(in srgb, var(--accent-action) 34%, transparent) !important;
}
:root[data-accent] .plus-menu-kicker-v309 {
  color: var(--accent-deep) !important;
  border-color: color-mix(in srgb, var(--accent-action) 24%, transparent) !important;
  background: var(--accent-softer-bg) !important;
}
:root[data-accent] .plus-menu-kicker-v309 > span {
  color: var(--accent-on-solid) !important;
  background: var(--accent-action) !important;
}
:root[data-accent] .plus-ai-card-v309 {
  border-color: color-mix(in srgb, var(--accent-action) 34%, transparent) !important;
  background:
    radial-gradient(circle at 90% 16%, rgba(var(--accent-action-rgb), .18), transparent 32%),
    linear-gradient(140deg, color-mix(in srgb, var(--bg-card) 91%, var(--accent-action) 9%), var(--bg-card)) !important;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--accent-shadow) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.62) !important;
}
:root[data-accent] .plus-ai-card-v309::after {
  background: rgba(var(--accent-action-rgb), .10) !important;
}
:root[data-accent] .plus-ai-icon-v309 {
  color: var(--accent-deep) !important;
  border-color: color-mix(in srgb, var(--accent-action) 52%, transparent) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 80%, var(--accent-action) 20%), var(--accent-soft-bg)) !important;
  box-shadow: 0 10px 24px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
:root[data-accent] .plus-ai-chevron-v309,
:root[data-accent] .plus-action-chevron-v309 {
  color: var(--accent-deep) !important;
  background: var(--accent-softer-bg) !important;
  border: 1px solid color-mix(in srgb, var(--accent-action) 18%, transparent) !important;
}
:root[data-accent] .plus-section-head-v309 strong {
  color: var(--accent-deep) !important;
}
:root[data-accent] .plus-action-card-v309:hover,
:root[data-accent] .plus-action-card-v309:focus-visible {
  border-color: color-mix(in srgb, var(--accent-action) 38%, transparent) !important;
  box-shadow: 0 0 0 3px var(--accent-focus), 0 14px 32px rgba(20, 45, 29, .12) !important;
}

:root[data-theme="dark"][data-accent] .mobile-nav-sheet.plus-menu-v309 {
  border-color: color-mix(in srgb, var(--accent-action) 22%, transparent) !important;
  background:
    radial-gradient(circle at 17% 0%, rgba(var(--accent-action-rgb), .15), transparent 33%),
    radial-gradient(circle at 94% 23%, rgba(var(--accent-action-rgb), .07), transparent 28%),
    linear-gradient(148deg, rgba(7, 25, 16, .99), rgba(2, 15, 9, .99)) !important;
}
:root[data-theme="dark"][data-accent] .modal-content-mobile-sheet:has(.plus-menu-v309) .modal-close {
  color: var(--accent-deep) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-soft-bg) !important;
}
:root[data-theme="dark"][data-accent] .plus-menu-kicker-v309 {
  color: var(--accent-deep) !important;
  border-color: color-mix(in srgb, var(--accent-action) 28%, transparent) !important;
  background: var(--accent-softer-bg) !important;
}
:root[data-theme="dark"][data-accent] .plus-menu-kicker-v309 > span {
  color: var(--accent-on-solid) !important;
  background: var(--accent-action) !important;
}
:root[data-theme="dark"][data-accent] .plus-ai-card-v309 {
  border-color: color-mix(in srgb, var(--accent-action) 38%, transparent) !important;
  background:
    radial-gradient(circle at 91% 14%, rgba(var(--accent-action-rgb), .18), transparent 34%),
    linear-gradient(140deg, rgba(24, 44, 30, .94), rgba(7, 25, 15, .97)) !important;
}
:root[data-theme="dark"][data-accent] .plus-ai-card-v309::after {
  background: rgba(var(--accent-action-rgb), .10) !important;
}
:root[data-theme="dark"][data-accent] .plus-ai-icon-v309 {
  color: var(--accent-deep) !important;
  border-color: color-mix(in srgb, var(--accent-action) 62%, transparent) !important;
  background: linear-gradient(145deg, rgba(var(--accent-action-rgb), .26), rgba(var(--accent-action-rgb), .10)) !important;
}
:root[data-theme="dark"][data-accent] .plus-ai-chevron-v309,
:root[data-theme="dark"][data-accent] .plus-action-chevron-v309 {
  color: var(--accent-deep) !important;
  background: var(--accent-softer-bg) !important;
}
:root[data-theme="dark"][data-accent] .plus-section-head-v309 strong {
  color: var(--accent-deep) !important;
}

/* Der mittlere Button bleibt beim geöffneten Menü vollständig im Schema. */
:root[data-accent] body.mobile-plus-sheet-open .mobile-bottom-nav-plus {
  background: var(--button-solid-bg) !important;
  border-color: color-mix(in srgb, var(--accent-action) 62%, transparent) !important;
  color: var(--button-solid-text) !important;
}

/* =========================================================
   v371 – Farbschema dezent in KI-Chat und Seiteninfo
   Die Flächen bleiben bewusst ruhig und neutral. Nur Licht,
   Rahmen, Status, Aktionen und kleine Details übernehmen den
   aktuell gewählten Akzent.
   ========================================================= */

/* Allgemeiner KI-Chat: neutrale Grundfläche mit leichtem Akzentlicht. */
.smart-action-sheet-v205,
.smart-action-sheet-v241,
.smart-action-sheet-v242,
.smart-action-sheet-v244 {
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--accent-action-rgb), .105), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(var(--accent-medium-rgb), .055), transparent 38%),
    var(--bg-card) !important;
  border: 1px solid rgba(var(--accent-action-rgb), .15) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.smart-chat-back-v205,
.smart-chat-icon-v205 {
  background: rgba(var(--accent-action-rgb), .055) !important;
  border-color: rgba(var(--accent-action-rgb), .18) !important;
  color: var(--text-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 9px 24px rgba(0,0,0,.10) !important;
}

.smart-chat-back-v205:hover,
.smart-chat-icon-v205:hover {
  background: rgba(var(--accent-action-rgb), .11) !important;
  border-color: rgba(var(--accent-action-rgb), .30) !important;
}

.smart-chat-avatar-v205,
.smart-ai-orb {
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.72), rgba(var(--accent-medium-rgb), .22) 40%, rgba(var(--accent-action-rgb), .42) 76%) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-action-rgb), .24), 0 0 25px rgba(var(--accent-action-rgb), .18) !important;
}

.smart-chat-avatar-v205 i {
  background: var(--accent-medium) !important;
  border-color: var(--bg-card) !important;
  box-shadow: 0 0 12px rgba(var(--accent-medium-rgb), .48) !important;
}

.smart-ai-welcome-v241,
.smart-ai-welcome-v242,
.smart-thinking-card {
  background:
    linear-gradient(145deg, rgba(var(--accent-action-rgb), .06), rgba(var(--accent-medium-rgb), .025)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .14) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.smart-thinking-dots i {
  background: rgba(var(--accent-medium-rgb), .58) !important;
  box-shadow: 0 0 10px rgba(var(--accent-medium-rgb), .30) !important;
}

.smart-start-suggestions-v205 button,
.smart-start-suggestions-v241 button,
.smart-start-suggestions-v241 button[data-smart-shortcut] {
  background: rgba(var(--accent-action-rgb), .045) !important;
  border-color: rgba(var(--accent-action-rgb), .17) !important;
  color: var(--text-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.08) !important;
}

.smart-start-suggestions-v205 button:hover,
.smart-start-suggestions-v241 button:hover {
  background: rgba(var(--accent-action-rgb), .09) !important;
  border-color: rgba(var(--accent-action-rgb), .28) !important;
}

.smart-chat-composer-v205 {
  background: rgba(var(--accent-action-rgb), .035) !important;
  border-color: rgba(var(--accent-action-rgb), .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 11px 28px rgba(0,0,0,.10) !important;
}

.smart-chat-composer-v205:focus-within {
  border-color: rgba(var(--accent-action-rgb), .36) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-action-rgb), .10), 0 11px 28px rgba(0,0,0,.10) !important;
}

.smart-send-btn-v205 {
  color: var(--accent-on-solid) !important;
  background: linear-gradient(135deg, var(--accent-solid-start), var(--accent-solid-end)) !important;
  box-shadow: 0 10px 25px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.from-user .smart-chat-bubble {
  color: var(--accent-on-solid) !important;
  background: linear-gradient(145deg, var(--accent-solid-start), var(--accent-solid-end)) !important;
  border-color: rgba(var(--accent-action-rgb), .30) !important;
  box-shadow: 0 10px 26px var(--accent-shadow) !important;
}

.from-assistant .smart-chat-bubble {
  background:
    linear-gradient(145deg, rgba(var(--accent-action-rgb), .045), rgba(var(--accent-medium-rgb), .02)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .12) !important;
  color: var(--text-dark) !important;
}

.smart-chat-message.from-assistant .smart-chat-bubble::before {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-action-rgb), .07) !important;
}

/* Seiteninfo: Akzent nur an Badge, Rahmen, Hinweis und Aktionen. */
.modal-content:has(.category-info-modal) {
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--accent-action-rgb), .075), transparent 34%),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .14) !important;
}

.category-info-modal-badge {
  background: rgba(var(--accent-action-rgb), .11) !important;
  color: var(--accent-deep) !important;
  border: 1px solid rgba(var(--accent-action-rgb), .15) !important;
}

.category-info-modal-badge-icon {
  background: rgba(var(--accent-action-rgb), .09) !important;
  color: var(--accent-deep) !important;
}

.category-info-modal-card,
.category-info-modal-tip {
  background:
    linear-gradient(145deg, rgba(var(--accent-action-rgb), .038), rgba(var(--accent-medium-rgb), .018)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .13) !important;
}

.category-info-modal-tip {
  box-shadow: inset 3px 0 0 rgba(var(--accent-action-rgb), .42) !important;
}

.category-info-modal-card li::marker {
  color: var(--accent-medium);
}

.category-info-floating-btn {
  background:
    linear-gradient(180deg, rgba(var(--accent-action-rgb), .085), rgba(var(--accent-action-rgb), .035)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .22) !important;
  color: var(--accent-deep) !important;
}

.category-info-floating-glyph {
  background: rgba(var(--accent-action-rgb), .09) !important;
  border-color: rgba(var(--accent-action-rgb), .16) !important;
}

:root[data-theme="dark"] .smart-action-sheet-v205,
:root[data-theme="dark"] .smart-action-sheet-v241,
:root[data-theme="dark"] .smart-action-sheet-v242,
:root[data-theme="dark"] .smart-action-sheet-v244,
:root[data-theme="dark"] .modal-content:has(.category-info-modal) {
  box-shadow: 0 26px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

:root[data-theme="dark"] .smart-chat-back-v205,
:root[data-theme="dark"] .smart-chat-icon-v205,
:root[data-theme="dark"] .smart-start-suggestions-v205 button,
:root[data-theme="dark"] .smart-start-suggestions-v241 button,
:root[data-theme="dark"] .smart-chat-composer-v205 {
  color: var(--text-dark) !important;
}

:root[data-theme="dark"] .category-info-modal-card,
:root[data-theme="dark"] .category-info-modal-tip {
  color: var(--text-dark) !important;
}


/* v371 – Spezifische Theme-Regeln übersteuern ältere fest grüne Light-/Dark-Regeln. */
:root[data-theme] .smart-action-sheet-v205,
:root[data-theme] .smart-action-sheet-v241,
:root[data-theme] .smart-action-sheet-v242,
:root[data-theme] .smart-action-sheet-v244 {
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--accent-action-rgb), .105), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(var(--accent-medium-rgb), .055), transparent 38%),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .15) !important;
}

:root[data-theme] .smart-chat-back-v205,
:root[data-theme] .smart-chat-icon-v205 {
  background: rgba(var(--accent-action-rgb), .055) !important;
  border-color: rgba(var(--accent-action-rgb), .18) !important;
  color: var(--text-dark) !important;
}

:root[data-theme] .smart-thinking-card,
:root[data-theme] .smart-ai-welcome-v241,
:root[data-theme] .smart-ai-welcome-v242 {
  background:
    linear-gradient(145deg, rgba(var(--accent-action-rgb), .06), rgba(var(--accent-medium-rgb), .025)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .14) !important;
}

:root[data-theme] .smart-start-suggestions-v205 button,
:root[data-theme] .smart-start-suggestions-v241 button,
:root[data-theme] .smart-start-suggestions-v241 button[data-smart-shortcut] {
  background: rgba(var(--accent-action-rgb), .045) !important;
  border-color: rgba(var(--accent-action-rgb), .17) !important;
  color: var(--text-dark) !important;
}

:root[data-theme] .smart-chat-composer-v205 {
  background: rgba(var(--accent-action-rgb), .035) !important;
  border-color: rgba(var(--accent-action-rgb), .18) !important;
}

:root[data-theme] .from-user .smart-chat-bubble {
  color: var(--accent-on-solid) !important;
  background: linear-gradient(145deg, var(--accent-solid-start), var(--accent-solid-end)) !important;
  border-color: rgba(var(--accent-action-rgb), .30) !important;
}

:root[data-theme] .from-assistant .smart-chat-bubble {
  background:
    linear-gradient(145deg, rgba(var(--accent-action-rgb), .045), rgba(var(--accent-medium-rgb), .02)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .12) !important;
  color: var(--text-dark) !important;
}

:root[data-theme] .category-info-modal-badge {
  background: rgba(var(--accent-action-rgb), .11) !important;
  color: var(--accent-deep) !important;
  border-color: rgba(var(--accent-action-rgb), .15) !important;
}

:root[data-theme] .category-info-modal-badge-icon {
  background: rgba(var(--accent-action-rgb), .09) !important;
  color: var(--accent-deep) !important;
}

:root[data-theme] .category-info-modal-card,
:root[data-theme] .category-info-modal-tip {
  background:
    linear-gradient(145deg, rgba(var(--accent-action-rgb), .038), rgba(var(--accent-medium-rgb), .018)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .13) !important;
  color: var(--text-dark) !important;
}

:root[data-theme] .category-info-floating-btn {
  background:
    linear-gradient(180deg, rgba(var(--accent-action-rgb), .085), rgba(var(--accent-action-rgb), .035)),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .22) !important;
  color: var(--accent-deep) !important;
}

:root[data-theme] .category-info-floating-glyph {
  background: rgba(var(--accent-action-rgb), .09) !important;
  border-color: rgba(var(--accent-action-rgb), .16) !important;
}

:root[data-theme] .modal-content:has(.category-info-modal) {
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--accent-action-rgb), .075), transparent 34%),
    var(--bg-card) !important;
  border-color: rgba(var(--accent-action-rgb), .14) !important;
}

:root[data-theme] .smart-action-sheet-v241 .smart-chat-title-v205 strong,
:root[data-theme] .smart-action-sheet-v205 .smart-chat-title-v205 strong {
  color: var(--text-dark) !important;
}

:root[data-theme] .smart-action-sheet-v205 .smart-chat-title-v205 small {
  color: var(--text-medium) !important;
}

/* Info-Aktionen müssen auch die älteren, spezifischen Dark-Mode-Buttonregeln überstimmen. */
:root[data-theme][data-accent] .category-info-modal button.btn-primary,
:root[data-theme][data-accent] .category-info-modal .btn.btn-primary {
  background: linear-gradient(135deg, var(--accent-solid-start), var(--accent-solid-end)) !important;
  border-color: rgba(var(--accent-action-rgb), .42) !important;
  color: var(--accent-on-solid) !important;
  box-shadow: 0 10px 24px var(--accent-shadow) !important;
}

:root[data-theme][data-accent] .category-info-modal button.btn-primary *,
:root[data-theme][data-accent] .category-info-modal .btn.btn-primary * {
  color: inherit !important;
}

:root[data-theme][data-accent] .category-info-modal button.btn-outline,
:root[data-theme][data-accent] .category-info-modal .btn.btn-outline {
  background: rgba(var(--accent-action-rgb), .045) !important;
  border-color: rgba(var(--accent-action-rgb), .22) !important;
  color: var(--accent-deep) !important;
}

:root[data-theme][data-accent] .category-info-modal button.btn-outline:hover,
:root[data-theme][data-accent] .category-info-modal .btn.btn-outline:hover {
  background: rgba(var(--accent-action-rgb), .095) !important;
  border-color: rgba(var(--accent-action-rgb), .34) !important;
}