HATG — Home Assistant Theme Generator

Integrationen
,
1

banner
banner1900×460 75.9 KB

Nachdem der Mann ohne Haare :wink: zu uns gesagt hat, wir sollten uns doch einmal mit KI beschäftigen, habe ich das tatsächlich gemacht.

Da ich mich schon immer intensiv mit Home-Assistant-Themes beschäftigt habe, war für mich ein Theme-Generator der naheliegendste Einstieg.

Mein Wissensstand war damals allerdings so gering, dass ich nicht einmal wusste, wie man ein Projekt überhaupt auf GitHub hochlädt.

Den ersten Generator habe ich komplett mit ChatGPT entwickelt. Dafür, dass ich praktisch bei null angefangen habe, war das Ergebnis schon erstaunlich gut. Irgendwann sind wir aber an einen Punkt gekommen, an dem wir uns ständig im Kreis gedreht haben und meine Nerven langsam am Ende waren.

Daraufhin bin ich zu Claude gewechselt. Die Unterschiede waren für mich damals enorm. Dadurch konnte ich den Generator deutlich schneller weiterentwickeln und viele Dinge umsetzen, an denen ich vorher festhing.

Testet es und gebt mir ein Feedback oder Fehler weiter und wir werden sie abarbeiten.

Ein Theme, jede Karte im Griff. HATG ist ein eigenes Panel direkt in deiner Home-Assistant-Oberfläche, mit dem du komplette Themes visuell aufbaust — für Home Assistant selbst, für **Bubble Card**, für **Mushroom** und für globale Anpassungen per **card-mod**. Kein Hin- und Herspringen zwischen YAML-Dateien mehr, keine Rätselraten, welche Variable welche Karte trifft.

## Warum HATG

Moderne Home-Assistant-Themes bestehen aus hunderten einzelnen Stellschrauben — Farben, Radien, Schatten, Schriften, Zustandsfarben für jede Domain, dazu die jeweils eigenen Variablen von Bubble Card und Mushroom. Von Hand gepflegt wird das schnell unübersichtlich, und kleine Namensfehler bleiben unbemerkt, bis eine Karte plötzlich die falsche Farbe zeigt. Jedes Feld in HATG wurde gegen den echten Home-Assistant-, Bubble-Card- und Mushroom-Quellcode geprüft, damit nur real existierende Variablen enthalten sind. HATG bündelt das gesamte Spektrum in einer Oberfläche, die sowohl Einsteiger als auch Profis bedienen können.

Das Ergebnis lässt sich direkt am eigenen Dashboard nachvollziehen — dieselbe Akzentfarbe, derselbe Radius und derselbe Schatten kommen in der HA-eigenen Oberfläche, in Bubble Card und in Mushroom gleichzeitig an:

Ein Theme angewendet auf HA-Theme, Mushroom-cardmod und Bubble-cardmod.

unified-theme-demo
unified-theme-demo1600×772 208 KB

## Features

- **User- und Profi-Modus.** Im User-Modus siehst du nur die Grundlagen — Grundfarben, Status-Farben, Radius/Schatten, Schrift. HATG leitet daraus automatisch passende Werte für Bubble Card, Mushroom und alle Zustandsfarben ab. Im Profi-Modus liegen alle Variablen offen, jede automatisch abgeleitete Farbe ist mit einem Badge markiert und lässt sich gezielt überschreiben oder zurücksetzen.

- **463 Variablen in 18 Kategorien.** Start, Grundfarben & Text, HA-Grundgerüst (Card/Hintergründe/Tabellen/Theme/Header/Toolbar/App Drawer/Sidebar in eigenen Unterordnern), Status/Icons/Entitäten, Schalter & Toggle, Slider & Progress, Buttons & Chips, Eingaben & Auswahlfelder, Material/Paper/MDC, HA 2026 / Web Awesome, Abstände/Rundungen/Schatten/Rahmen, Schrift & Typografie, RGB-Hilfswerte, Graphen & Energie, Bubble Card, Mushroom, Card-mod & Generator sowie Alle Felder — alles einzeln filter- und durchsuchbar.

- **Sync-Widgets zwischen den Frameworks.** Felder, die es in Home Assistant, Bubble Card und Mushroom gleichzeitig gibt, zeigen ein 3er-Icon-Widget zum gegenseitigen Abgleichen; Felder, die nur HA und Bubble Card teilen (z. B. Rahmenfarbe/-dicke), bekommen ein schlankeres 2er-Widget. Ein Klick überträgt den Wert in die jeweils andere Karten-Sprache, ohne dass du die passende Zielvariable erst suchen musst.

- **Basis-Vorlage für den Sofort-Start.** Die Werksvorlage laden startet ein komplett neues, sauberes Theme: Themename wird automatisch gesetzt, alle bisherigen Anpassungen werden zurückgesetzt — kein Vermischen alter und neuer Farben mehr.

- **Wortbaustein-Filter (Tag-Matrix).** Auf „Alle Felder" lassen sich beliebige Bausteine wie `color`, `background`, `button` kombinieren, dazu weiter einschränkende Zusatz-Tags (z. B. `bubble`, `climate`, `stack`) — so findest du auch in 463 Variablen sofort die richtige.

- **Live-Vorschau, die lebt.** Eine simulierte Handy-Oberfläche zeigt sofort, wie sich Änderungen auswirken — mit 5 durchschaltbaren Räumen (Wohnzimmer, Küche, Keller, Garten, Garage) und passenden Kartentypen: Licht, Klima, Media-Player, Sensor, Rollladen/Garage, Türschloss, Slider und Statusfarben-Karte. Umschaltbar zwischen Hell und Dunkel.

- **HA Live.** Zeigt dein echtes Home-Assistant-Dashboard direkt im Panel — kein Mockup. Umschaltbar zwischen Handy-, Tablet- und Desktop-Ansicht, mit Auto-Reload nach dem Speichern.

- **Farbwähler, wie er sein sollte.** Nativer Farbwähler plus Textfeld, wahlweise als Hex, RGB oder RGBA. Textfelder übernehmen Änderungen automatisch, ohne extra Bestätigungs-Klick.

- **Code-Editor im Card-mod-Look.** Die generierte YAML direkt einsehen und bearbeiten, je Sektion in einer eigenen, dunkel syntax-hervorgehobenen Karte — genau dieselbe Editor-Komponente wie beim card-mod-YAML. Werte lassen sich frei eintippen, keine Klick-Farbpunkte mehr nötig.

- **Speichern, das wirklich speichert.** Themes werden als echte YAML-Datei nach `config/themes/` geschrieben, inklusive automatischer Konflikt-Erkennung bei doppelten Namen und automatischem Neuladen der Themes in Home Assistant. Zusätzlich: Themes-Ordner direkt laden, laufender Auto-Zwischenspeicher, und Import bestehender Theme-Dateien (auch ältere Exporte werden beim Laden automatisch normalisiert).

- **Plugins.** Eigene Seite, um HATG-Erweiterungen ein- und auszuschalten.

## Screenshots

start-light
start-light1600×549 88.4 KB

**Start-Seite (hell)** — Theme-Name, Grundfarben mit Hex/RGB/RGBA-Umschalter, Radius und die Live-Vorschau rechts, alle 463 Variablen sind über die Seitenleiste oder „Alle Felder" erreichbar.

start-dark
start-dark1600×549 82.2 KB

**Start-Seite (dunkel)** — HATG im eigenen Dunkelmodus, mit derselben vereinheitlichten Navigation wie im Screenshot darunter.

sidebar-nav
sidebar-nav900×842 71.5 KB

**Seitenleiste.** Alle Menüpunkte — Haupteinträge, Gruppen und Untermenüs — teilen dieselbe Schriftgröße, Schriftstärke und dieselben farbigen Icon-Badges. Bubble Card, Mushroom, HA-Grundgerüst und Tools sind auf einen Blick auseinanderzuhalten.

sync-widgets

**Framework-Sync direkt am Feld.** Rechts neben Hex/RGB/RGBA sitzt ein kleines Icon-Widget (hier HA, Bubble Card und Mushroom) — ein Klick übernimmt die Farbe in die jeweils andere Karten-Sprache.

preview-toggle

**Demo oder echtes Dashboard.** Oben rechts an jeder Vorschau lässt sich zwischen der simulierten Demo-Ansicht und „HA Live" — deinem echten Dashboard — umschalten.

ha-live-phone
ha-live-phone1600×732 98.8 KB

![HA Live, Handy-Ansicht](https://raw.githubusercontent.com/Piranha1605/ha-theme-generator/main/docs/screenshots/ha-live-phone.png)

ha-live-tablet
ha-live-tablet1600×579 100 KB

ha-live-desktop
ha-live-desktop1600×833 129 KB

**HA Live — Handy, Tablet, Desktop.** Das Theme, das du gerade bearbeitest, wird nach dem Speichern automatisch in dein echtes Home Assistant nachgeladen — kein Mockup, sondern die tatsächliche Oberfläche. Über die drei Umschalter oben an der Vorschau kannst du direkt kontrollieren, wie sich die neue Farbgebung auf Handy, Tablet und Desktop auswirkt, ohne selbst zwischen Geräten wechseln zu müssen.

open-menu
open-menu420×368 67.9 KB

**Öffnen-Menü** — Theme importieren, zuletzt gesicherten Browser-Entwurf laden, oder eine Basis-Vorlage laden.

save-menu
save-menu420×368 60.7 KB

**Speichern-Menü** — als Datei nach `config/themes/` schreiben, Zwischenstand sichern oder das Theme vor dem Speichern validieren lassen.

## Installation

### HACS (empfohlen)

1. HACS öffnen → drei Punkte oben rechts → **Benutzerdefinierte Repositories**.

2. URL ` GitHub - Piranha1605/ha-theme-generator: Home Assistant Theme Generator with HACS support · GitHub eintragen, Kategorie **Integration**.

3. `HATG` suchen und installieren.

4. Home Assistant neu starten.

5. HATG erscheint als eigener Menüpunkt in der Seitenleiste.

### Manuell

1. Repo-Inhalt nach `config/custom_components/hatg/` kopieren.

2. Home Assistant neu starten.

## Unterstützen

Wenn dir HATG Zeit spart: [:hot_beverage: Buy me a coffee](https://buymeacoffee.com/enricotenif)

## Mitmachen

Repo: GitHub - Piranha1605/ha-theme-generator: Home Assistant Theme Generator with HACS support · GitHub

Issues und Pull Requests sind willkommen — besonders Rückmeldungen zu falsch benannten oder fehlenden Theme-Variablen, damit HATG möglichst genau den tatsächlichen Home-Assistant-Frontend-Code trifft.

Changelog

v0.2.4

  • Bugfix: Der Generator „Blur & Kartentransparenz" funktionierte nicht zuverlässig. Die Seite „Generatoren" ist deshalb vorerst aus der Navigation entfernt, bis die Ursache gefunden ist — die betroffenen Felder (card-backdrop-blur, card-background-color) lassen sich weiterhin ganz normal einzeln unter „Alle Felder" bearbeiten.

v0.2.3

  • Bugfix: Der Generator „Blur & Kartentransparenz" machte fälschlich auch Auswahlmenüs durchsichtig (z. B. HA-Einstellungen-Dropdowns, Bubble-Card-Menüs) statt nur Kartenhintergründe — jetzt sauber auf echte Karten begrenzt.

  • Live-Vorschau reagiert sofort auf von Hand eingetippte Werte (Radius, Farbcodes) — kein zusätzlicher Klick woanders mehr nötig.

  • Neuer Undo-Button (Rückgängig) in der Kopfzeile, auch per Strg/Cmd+Z bedienbar — macht auch automatisch abgeleitete Kaskaden-Änderungen in einem Schritt rückgängig.

  • Bugfix „Alle Felder": Das Wortbaustein-Filter überlappte teils mit der Chip-Zeile und zeigte sinnlose reine Zahlen-Chips (z. B. „10", „13") — beides behoben.

  • „Weiter einschränken" ist jetzt ein aufklappbares Menü unter den Farben, statt einer immer offenen, langen Chip-Liste.

  • Plugin-Seite zeigt Vorschaubilder jetzt in einem 3-Spalten-Layout, ohne abgeschnittenen Text.

  • Speichern-Button ist jetzt neutral statt grün, passend zu den anderen Kopfzeilen-Buttons.

  • Mehrfachauswahl-Leiste öffnet jetzt direkt neben dem „Auswählen"-Button statt in einer eigenen Zeile darunter.

5 „Gefällt mir“
2

Wow .. hört sich Super an … wenn ich etwas mehr Zeit habe, werde ich das ausführlich ausprobieren.

Edit: Ich habe schonmal kurz reingeschaut .. ist ja echt viel zum einstellen. Dabei ist mir aufgefallen, das wenn man Werte von Hand ändert (z.B. Radius, oder Farbwerte), die Werte nicht gleich in der Live-Vorschau übernommen werden (man muss erstmal 1x in der Live-Vorschau klicken). Ausserdem fehlt mir irgendwie ein “Zurück” - Button, wo mit man die letzten Änderungen wieder auf den alten Wert setzen kann (wäre sehr hilfreich, gerade beim ausprobieren).

2 „Gefällt mir“
3

Danke für die Hinweise.Ich hab die neue version hoch geladen da hast du oben rechts einen zurück Knopf. Und die Änderungen werden 1 zu 1 übernommen.den Generator hab ich erst einmal wieder raus da der im Moment nicht so will.

4

Hört sich gut an :+1: :+1:. Werde es probieren.

1 „Gefällt mir“
5

Super .. könntest du noch mehr Beispiel-Vorlagen hinzufügen. Ich wäre z.B. an dem blauen Theme aus den Screenshots interessiert, das gefällt mir sehr gut. Oder auch was wo die Möglichkeiten des Theme-Generators noch mehr gezeigt werden, z.B. was Custom-Hintergründe, Borders, Shadows usw. per Card-Mod so möglich ist, die man global so anwenden könnte.
(Ich hab schon mal nen Stern auf Github hinterlassen, für die super Arbeit bisher)

Ach ja beim speichern ist mir aufgefallen, das der Theme-Name immer kleingeschrieben gespeichert wird.

1 „Gefällt mir“
6

Mein größtes problem ist das ich keinen plan hab wie ich das aufteilen soll das es überschauber bleibt.Ich hab dir die Theme angehängt.

# Erstellt mit HATG v0.2.4
# Theme: HATGv1 – Grundfarbe #56B7BE, Akzent #5BB6BE, Karten-Radius 18px
# Generiert am 2026-07-22

hatgv1:
  modes:
    light:
      # Grundfarben & Text
      accent-color: "#5BB6BE"
      primary-color: "#56B7BE"
      dark-primary-color: "#3A7C81"
      light-primary-color: "#D0EBED"
      primary-text-color: "#444D5C"
      secondary-text-color: "#55677A"
      text-primary-color: "#444D5C"
      disabled-text-color: "#8E8E93"
      disabled-color: "#D1D1D6"
      error-color: "#FF3B30"
      warning-color: "#FFCC00"
      success-color: "#5BB6BE"
      info-color: "#007AFF"
      red-color: "#FF3B30"
      green-color: "#34C759"
      blue-color: "#007AFF"
      orange-color: "#FF9500"
      yellow-color: "#FFCC00"
      purple-color: "#AF52DE"
      pink-color: "#FF2D55"
      cyan-color: "#5AC8FA"
      grey-color: "#3C3C43"
      deep-purple-color: "#6E41AB"
      indigo-color: "#3F51B5"
      light-blue-color: "#03A9F4"
      teal-color: "#009688"
      light-green-color: "#8BC34A"
      lime-color: "#CDDC39"
      amber-color: "#FFC107"
      deep-orange-color: "#FF6F22"
      brown-color: "#795548"
      light-grey-color: "#BDBDBD"
      dark-grey-color: "#606060"
      blue-grey-color: "#607D8B"
      black-color: "#000000"
      white-color: "#FFFFFF"
      printer-cyan-color: "#00AEEF"
      printer-magenta-color: "#EC008C"
      printer-yellow-color: "#FFD400"

      # HA-Grundgerüst / Card
      card-background-color: "#F7FAFB"
      ha-card-background: "#F7FAFB"
      ha-card-background-color: "#F7FAFB"
      wa-color-surface-raised: "#FFFFFF"
      ha-card-border-color: "rgba(0, 0, 0, 0.12)"
      ha-card-border-radius: "18px"
      ha-card-border-width: "1px"
      ha-card-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      table-row-background-color: "#F9F9FB"
      table-row-alternative-background-color: "#F7FAFB"

      # HA-Grundgerüst / Hintergründe
      primary-background-color: "#ECEEF1"
      background-color: "#ECEEF1"
      lovelace-background: "#ECEEF1"
      secondary-background-color: "#E7ECF3"

      # HA-Grundgerüst / Theme
      mdc-theme-background: "#ECEEF1"
      mdc-theme-surface: "#F7FAFB"
      mdc-theme-on-surface: "#444D5C"

      # HA-Grundgerüst / Header
      app-header-background-color: "#FFFFFF"
      app-header-text-color: "#444D5C"
      app-toolbar-background-color: "#FFFFFF"
      toolbar-background-color: "#FFFFFF"
      app-toolbar-text-color: "#1C1C1E"
      toolbar-text-color: "#1C1C1E"

      # HA-Grundgerüst / App Drawer
      app-drawer-background-color: "#FFFFFF"
      app-drawer-text-color: "#3C3C43"
      app-drawer-icon-color: "#007AFF"

      # HA-Grundgerüst / Sidebar
      sidebar-background-color: "#FFFFFF"
      sidebar-selected-background-color: "#E5F1FF"
      sidebar-text-color: "#444D5C"
      sidebar-icon-color: "rgba(68, 77, 92, 0.6)"
      sidebar-selected-text-color: "#1C1C1E"
      sidebar-selected-icon-color: "#007AFF"

      # HA-Grundgerüst / Status, Icons & Entitäten
      state-icon-color: "#56B7BE"
      state-icon-active-color: "#5BB6BE"
      state-icon-unavailable-color: "#FFFFFF"
      state-active-color: "#56B7BE"
      state-inactive-color: "#FFFFFF"
      state-unavailable-color: "#FFFFFF"
      state-on-color: "#56B7BE"
      state-off-color: "#FFFFFF"
      state-light-color: "#56B7BE"
      state-light-active-color: "#56B7BE"
      state-light-on-color: "#ff9300"
      state-switch-color: "#56B7BE"
      state-switch-active-color: "#56B7BE"
      state-switch-on-color: "#56B7BE"
      state-climate-cool-color: "#56B7BE"
      state-climate-heat-color: "#ff2600"
      state-climate-auto-color: "#56B7BE"
      state-climate-dry-color: "#56B7BE"
      state-climate-fan_only-color: "#5AC8FA"
      state-climate-heat_cool-color: "#FFC107"
      state-cover-color: "#56B7BE"
      state-cover-active-color: "#56B7BE"
      state-cover-open-color: "#929000"
      state-cover-closed-color: "#ff2600"
      state-fan-color: "#56B7BE"
      state-fan-active-color: "#56B7BE"
      state-media_player-color: "#56B7BE"
      state-media_player-active-color: "#56B7BE"
      state-vacuum-color: "#56B7BE"
      state-vacuum-active-color: "#56B7BE"
      state-vacuum-error-color: "#FF3B30"
      state-lock-locked-color: "#56B7BE"
      state-lock-locking-color: "#ff2600"
      state-lock-unlocked-color: "#56B7BE"
      state-lock-unlocking-color: "#929000"
      state-lock-jammed-color: "#FF3B30"
      state-lock-open-color: "#FF3B30"
      state-lock-opening-color: "#56B7BE"
      state-alarm_control_panel-triggered-color: "#ff2600"
      state-alarm-triggered-color: "#ff2600"
      state-alarm_control_panel-armed_home-color: "#ffd478"
      state-alarm_control_panel-armed_away-color: "#ffd478"
      state-alarm-armed-color: "#ffd478"
      state-alarm_control_panel-disarmed-color: "#ff9300"
      state-alarm-disarmed-color: "#ff9300"
      state-alarm_control_panel-armed_custom_bypass-color: "#34C759"
      state-alarm_control_panel-armed_night-color: "#34C759"
      state-alarm_control_panel-armed_vacation-color: "#34C759"
      state-alarm_control_panel-arming-color: "#56B7BE"
      state-alarm_control_panel-disarming-color: "#56B7BE"
      state-alarm_control_panel-pending-color: "#56B7BE"
      state-alert-off-color: "#56B7BE"
      state-alert-on-color: "#FF3B30"
      state-binary_sensor-active-color: "#FFC107"
      state-binary_sensor-battery-on-color: "#FF3B30"
      state-binary_sensor-carbon_monoxide-on-color: "#FF3B30"
      state-binary_sensor-gas-on-color: "#FF3B30"
      state-binary_sensor-heat-on-color: "#FF3B30"
      state-binary_sensor-lock-on-color: "#FF3B30"
      state-binary_sensor-moisture-on-color: "#FF3B30"
      state-binary_sensor-problem-on-color: "#FF3B30"
      state-binary_sensor-safety-on-color: "#FF3B30"
      state-binary_sensor-smoke-on-color: "#FF3B30"
      state-binary_sensor-sound-on-color: "#FF3B30"
      state-binary_sensor-tamper-on-color: "#FF3B30"
      state-device_tracker-active-color: "#56B7BE"
      state-device_tracker-home-color: "#56B7BE"
      state-humidifier-on-color: "#56B7BE"
      state-lawn_mower-active-color: "#009688"
      state-lawn_mower-error-color: "#FF3B30"
      state-person-active-color: "#56B7BE"
      state-person-home-color: "#5BB6BE"
      state-plant-active-color: "#FF3B30"
      state-siren-active-color: "#FF3B30"
      state-sun-above_horizon-color: "#FFC107"
      state-sun-below_horizon-color: "#3F51B5"
      state-update-active-color: "#56B7BE"
      state-valve-active-color: "#56B7BE"
      state-water_heater-eco-color: "#34C759"
      state-water_heater-electric-color: "#56B7BE"
      state-water_heater-gas-color: "#56B7BE"
      state-water_heater-heat_pump-color: "#56B7BE"
      state-water_heater-high_demand-color: "#FF6F22"
      state-water_heater-performance-color: "#FF6F22"
      state-weather-clear_night-color: "#6E41AB"
      state-weather-cloudy-color: "#BDBDBD"
      state-weather-exceptional-color: "#FF3B30"
      state-weather-fog-color: "#3C3C43"
      state-weather-hail-color: "#5AC8FA"
      state-weather-lightning_rainy-color: "#CDDC39"
      state-weather-lightning-color: "#FFCC00"
      state-weather-partlycloudy-color: "#607D8B"
      state-weather-pouring-color: "#3F51B5"
      state-weather-rainy-color: "#56B7BE"
      state-weather-snowy_rainy-color: "#03A9F4"
      state-weather-snowy-color: "#C0E0FF"
      state-weather-sunny-color: "#FFC107"
      state-weather-windy_variant-color: "#34C759"
      state-weather-windy-color: "#34C759"
      state-battery-low-color: "#ff2600"
      state-sensor-battery-high-color: "#34C759"
      state-sensor-battery-medium-color: "#56B7BE"
      state-sensor-battery-low-color: "#FF3B30"
      label-badge-background-color: "#FFFFFF"
      label-badge-text-color: "rgba(68, 77, 92, 0.8)"
      label-badge-red: "#FF3B30"
      label-badge-blue: "#56B7BE"
      label-badge-green: "#34C759"
      label-badge-yellow: "#FFCC00"
      state-battery-alert-color: "#ff2600"

      # HA-Grundgerüst / Schalter, Toggle & Slider
      ha-control-switch-color: "#56B7BE"
      ha-control-switch-checked-color: "#5BB6BE"
      ha-control-switch-unchecked-color: "#3A3A3C"
      ha-switch-background-color: "#F7FAFB"
      ha-switch-background-color-hover: "#F7FAFB"
      ha-switch-border-color: "rgba(213, 213, 213, 1)"
      ha-switch-thumb-background-color: "#5BB6BE"
      ha-switch-thumb-background-color-hover: "#5BB6BE"
      ha-switch-thumb-border-color: "rgba(254, 255, 255, 1)"
      ha-switch-thumb-border-color-hover: "rgba(0,0,0,0)"
      ha-switch-checked-background-color: "#5BB6BE"
      ha-switch-checked-background-color-hover: "#5BB6BE"
      ha-switch-checked-border-color: "rgba(254, 255, 255, 1)"
      ha-switch-checked-thumb-background-color: "#5BB6BE"
      ha-switch-checked-thumb-background-color-hover: "#5BB6BE"
      ha-switch-checked-thumb-border-color: "rgba(254, 255, 255, 1)"
      ha-switch-checked-thumb-border-color-hover: "rgba(0,0,0,0)"
      control-slider-color: "#5BB6BE"
      slider-color: "#5BB6BE"
      slider-secondary-color: "#E5F1FF"
      slider-track-color: "#D1D1D6"

      # HA-Grundgerüst / Buttons & Chips
      control-button-background-color: "#E7ECF3"
      control-button-icon-color: "#5BB6BE"
      control-button-border-radius: "18px"

      # HA-Grundgerüst / Eingaben & Auswahlfelder
      input-background-color: "#E7ECF3"
      input-fill-color: "#E7ECF3"
      input-disabled-fill-color: "rgba(249, 249, 251, 0.55)"
      input-disabled-ink-color: "rgba(0, 0, 0, 0.37)"
      input-disabled-label-ink-color: "#8E8E93"
      input-disabled-line-color: "rgba(0, 0, 0, 0.06)"
      input-dropdown-icon-color: "rgba(0, 0, 0, 0.54)"
      input-hover-line-color: "rgba(0, 0, 0, 0.87)"
      input-idle-line-color: "rgba(0, 0, 0, 0.42)"
      input-ink-color: "rgba(0, 0, 0, 0.87)"
      input-label-ink-color: "rgba(0, 0, 0, 0.6)"
      input-outlined-disabled-border-color: "rgba(0, 0, 0, 0.06)"
      mdc-select-idle-line-color: "#C6C6C8"
      mdc-select-dropdown-icon-color: "#3C3C43"
      mdc-select-hover-line-color: "#C6C6C8"
      mdc-text-field-idle-line-color: "#C6C6C8"
      mdc-text-field-hover-line-color: "#C6C6C8"
      ha-color-form-background: "#F9F9FB"
      ha-color-form-background-hover: "#F9F9FB"
      ha-color-form-background-disabled: "rgba(249, 249, 251, 0.55)"

      # HA-Grundgerüst / Material, Paper & MDC
      mdc-theme-primary: "#56B7BE"
      mdc-theme-secondary: "#5BB6BE"
      mdc-theme-on-primary: "#FFFFFF"
      md-sys-color-primary: "#56B7BE"
      md-sys-color-on-primary: "#007AFF"
      md-sys-color-primary-container: "#E5F1FF"
      md-sys-color-on-primary-container: "#FFFFFF"
      md-sys-color-on-surface: "#feffff"
      ha-on-surface-color: "#feffff"
      md-radio-selected-icon-color: "#007AFF"
      mdc-radio-unchecked-color: "#3C3C43"

      # HA-Grundgerüst / HA 2026 / Web Awesome
      ha-color-fill-primary-normal-resting: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-primary-normal-hover: "rgba(91, 182, 190, 0.25)"
      ha-color-fill-primary-quiet-resting: "rgba(91, 182, 190, 0.08)"
      ha-color-fill-primary-quiet-hover: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-disabled-normal-resting: "rgba(142, 142, 147, 0.12)"
      ha-color-on-disabled-normal: "rgba(60, 60, 67, 0.55)"
      ha-color-fill-disabled-loud-resting: "rgba(142, 142, 147, 0.22)"
      ha-color-on-disabled-loud: "rgba(60, 60, 67, 0.65)"
      ha-color-on-disabled-quiet: "rgba(60, 60, 67, 0.50)"
      ha-color-fill-neutral-quiet-resting: "#FFFFFF"
      ha-color-fill-neutral-quiet-hover: "#F9F9FB"
      ha-color-fill-neutral-quiet-active: "#E5F1FF"
      ha-color-fill-neutral-normal-resting: "#F9F9FB"
      ha-color-fill-neutral-normal-hover: "#FFFFFF"
      ha-color-fill-neutral-normal-active: "#E5F1FF"
      ha-color-fill-danger-normal-resting: "rgba(255, 59, 48, 0.15)"
      ha-color-fill-danger-normal-hover: "rgba(255, 59, 48, 0.22)"
      ha-color-fill-danger-normal-active: "rgba(255, 59, 48, 0.28)"
      ha-color-on-danger-normal: "#FF3B30"
      ha-color-fill-warning-normal-resting: "rgba(255, 204, 0, 0.15)"
      ha-color-fill-warning-normal-hover: "rgba(255, 204, 0, 0.22)"
      ha-color-fill-warning-normal-active: "rgba(255, 204, 0, 0.28)"
      ha-color-on-warning-normal: "#8A5A00"
      ha-tooltip-background-color: "#F9F9FB"
      ha-tooltip-text-color: "#1C1C1E"

      # HA-Grundgerüst / Abstände, Rundungen, Schatten & Rahmen
      border-color: "rgba(0, 0, 0, 0.12)"
      border-radius: "18px"
      box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      divider-color: "rgba(0, 0, 0, 0.12)"
      outline-color: "rgba(0, 0, 0, 0.12)"
      outline-variant-color: "#C6C6C8"
      outline-hover-color: "rgba(0, 0, 0, 0.24)"
      ha-line-height-condensed: "1.25"
      ha-line-height-expanded: "1.35"
      ha-line-height-normal: "1.5"

      # HA-Grundgerüst / Schrift & Typografie
      primary-font-family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif"
      ha-font-family-body: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif"
      ha-font-family-heading: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif"
      ha-font-family-longform: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif"
      ha-font-family-code: "'SF Mono', 'Roboto Mono', Consolas, monospace"
      mdc-typography-font-family: "'SF Mono', 'Roboto Mono', Consolas, monospace"
      ha-font-size-scale: "1"
      ha-font-size-2xs: "8px"
      ha-font-size-xs: "8px"
      ha-font-size-s: "12px"
      ha-font-size-m: "14px"
      ha-font-size-l: "16px"
      ha-font-size-xl: "18px"
      ha-font-size-2xl: "20px"
      ha-font-size-3xl: "22px"
      ha-font-size-4xl: "24px"
      ha-font-weight-light: "300"
      ha-font-weight-normal: "400"
      ha-font-weight-body: "400"
      ha-font-weight-medium: "500"
      ha-font-weight-heading: "500"
      ha-font-weight-action: "500"
      ha-font-weight-bold: "700"

      # HA-Grundgerüst / RGB-Hilfswerte
      rgb-primary-color: "86, 183, 190"
      rgb-accent-color: "91, 182, 190"
      rgb-primary-text-color: "68, 77, 92"
      rgb-secondary-text-color: "85, 103, 122"
      rgb-card-background-color: "247, 250, 251"
      rgb-primary-background-color: "236, 238, 241"
      rgb-blue-color: "0, 122, 255"
      rgb-orange-color: "255, 149, 0"
      rgb-state-switch-color: "86, 183, 190"
      rgb-state-light-color: "86, 183, 190"
      rgb-state-cover-color: "86, 183, 190"
      rgb-state-fan-color: "86, 183, 190"
      rgb-state-media_player-color: "86, 183, 190"

      # HA-Grundgerüst / Graphen & Energie
      graph-color-1: "#ff9300"
      graph-color-2: "#007AFF"
      graph-color-3: "#34C759"
      graph-color-4: "#AF52DE"
      graph-color-5: "#FF3B30"
      graph-color-6: "#5AC8FA"
      graph-color-7: "#00C7BE"
      graph-color-8: "#FF2D55"
      graph-color-9: "#FF6B22"
      graph-color-10: "#5856D6"
      graph-color-11: "#A3D977"
      graph-color-12: "#FFCC00"
      graph-color-13: "#AF52DE"
      graph-color-14: "#8E6E53"
      color-1: "#ff9300"
      color-2: "#007AFF"
      color-3: "#34C759"
      color-4: "#AF52DE"
      color-5: "#FF3B30"
      color-6: "#5AC8FA"
      color-7: "#00C7BE"
      color-8: "#FF2D55"
      color-9: "#FF6B22"
      color-10: "#5856D6"
      color-11: "#A3D977"
      color-12: "#FFCC00"
      color-13: "#AF52DE"
      color-14: "#8E6E53"
      energy-grid-consumption-color: "#007AFF"
      energy-grid-return-color: "#AF52DE"
      energy-solar-color: "#ff9300"
      energy-non-fossil-color: "#34C759"
      energy-battery-out-color: "#00C7BE"
      energy-battery-in-color: "#AF52DE"
      energy-gas-color: "#FF3B30"
      energy-water-color: "#5AC8FA"

      # Bubble Card / Karten & Hintergründe
      bubble-card-background-color: "#F7FAFB"
      bubble-main-buttons-background-color: "#F7FAFB"
      bubble-secondary-background-color: "#E7ECF3"
      bubble-icon-background-color: "#F9F9FB"
      bubble-icon-color: "#5BB6BE"
      bubble-name-color: "#444D5C"
      bubble-state-color: "#55677A"
      bubble-accent-color: "#5BB6BE"
      bubble-active-color: "#5BB6BE"
      bubble-toggle-color: "#5BB6BE"
      bubble-line-background-color: "rgba(0, 0, 0, 0.12)"
      bubble-border: "1px solid rgba(0, 0, 0, 0.12)"
      bubble-border-color: "rgba(0, 0, 0, 0.12)"
      bubble-border-radius: "18px"
      bubble-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      bubble-card-border-radius: "18px"
      bubble-select-border-radius: "18px"
      bubble-icon-border-radius: "14px"

      # Bubble Card / Buttons
      bubble-button-background-color: "#FFFFFF"
      bubble-button-active-background-color: "#5BB6BE"
      bubble-button-icon-color: "#5BB6BE"
      bubble-button-active-icon-color: "#FFFFFF"
      bubble-button-text-color: "#1C1C1E"
      bubble-button-active-text-color: "#FFFFFF"
      bubble-button-border-radius: "18px"
      bubble-button-card-background-color: "#FFFFFF"
      bubble-button-main-background-color: "#FFFFFF"
      bubble-button-active-color: "#007AFF"

      # Bubble Card / Sub-Buttons
      bubble-sub-button-background-color: "#F9F9FB"
      bubble-sub-button-active-background-color: "#007AFF"
      bubble-sub-button-icon-color: "#5BB6BE"
      bubble-sub-button-active-icon-color: "#FFFFFF"
      bubble-sub-button-text-color: "#3C3C43"
      bubble-sub-button-active-text-color: "#FFFFFF"
      bubble-sub-button-border-radius: "14px"
      bubble-sub-button-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      bubble-sub-buttons-main-background-color: "#FFFFFF"

      # Bubble Card / Separator
      bubble-separator-background-color: "#FFFFFF"
      bubble-separator-icon-background-color: "#F9F9FB"
      bubble-separator-icon-color: "#5BB6BE"
      bubble-separator-line-color: "rgba(0, 0, 0, 0.12)"
      bubble-separator-name-color: "#1C1C1E"
      bubble-separator-text-color: "#1C1C1E"
      bubble-separator-border-radius: "18px"

      # Bubble Card / Popup & Dialog
      bubble-pop-up-background-color: "#F2F2F7"
      bubble-pop-up-backdrop-filter: "blur(18px)"
      bubble-pop-up-border-radius: "18px"
      bubble-pop-up-box-shadow: "0 10px 28px rgba(60,60,67,.14)"
      dialog-box-shadow: "0 10px 28px rgba(60,60,67,.14)"
      more-info-header-background: "#F9F9FB"
      more-info-header-color: "#1C1C1E"
      popup-border-radius: "12px"
      ha-dialog-scrim-backdrop-filter: "blur(10px)"
      ha-dialog-surface-background: "rgba(255, 255, 255, 0.92)"
      mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.35)"

      # Bubble Card / Horizontal Buttons Stack
      bubble-horizontal-buttons-stack-background-color: "#FFFFFF"
      bubble-horizontal-buttons-stack-button-background-color: "#F9F9FB"
      bubble-horizontal-buttons-stack-button-icon-color: "#3C3C43"
      bubble-horizontal-buttons-stack-button-text-color: "#1C1C1E"
      bubble-horizontal-buttons-stack-border-radius: "18px"
      bubble-horizontal-buttons-stack-box-shadow: "0 10px 28px rgba(60,60,67,0.14)"

      # Bubble Card / Climate
      bubble-climate-background-color: "#FFFFFF"
      bubble-climate-main-background-color: "#FFFFFF"
      bubble-climate-button-background-color: "#F9F9FB"
      bubble-climate-button-icon-color: "#3C3C43"
      bubble-climate-border-radius: "18px"
      bubble-climate-box-shadow: "0 10px 28px rgba(60,60,67,.14)"
      bubble-climate-icon-border-radius: "32px"

      # Bubble Card / Cover
      bubble-cover-background-color: "#FFFFFF"
      bubble-cover-main-background-color: "#FFFFFF"
      bubble-cover-button-background-color: "#F9F9FB"
      bubble-cover-button-icon-color: "#3C3C43"
      bubble-cover-border-radius: "18px"
      bubble-cover-box-shadow: "0 10px 28px rgba(60,60,67,.14)"

      # Bubble Card / Media Player
      bubble-media-player-background-color: "#FFFFFF"
      bubble-media-player-main-background-color: "#FFFFFF"
      bubble-media-player-button-background-color: "#F9F9FB"
      bubble-media-player-button-icon-color: "#3C3C43"
      bubble-media-player-border-radius: "18px"
      bubble-media-player-box-shadow: "0 10px 28px rgba(60,60,67,.14)"

      # Mushroom / Karten & Hintergründe
      mush-card-background: "#F7FAFB"
      mush-control-background-color: "#E7ECF3"
      mush-card-primary-color: "#444D5C"
      mush-card-secondary-color: "#55677A"
      mush-title-color: "#444D5C"
      mush-subtitle-color: "#55677A"

      # Mushroom / Icons
      mush-icon-background-color: "#F9F9FB"
      mush-icon-color: "#3C3C43"
      mush-icon-active-color: "#5BB6BE"

      # Mushroom / Toggle
      mush-toggle-color: "#5BB6BE"
      mush-toggle-background-color: "#D1D1D6"

      # Mushroom / Slider
      mush-slider-color: "#5BB6BE"
      mush-slider-track-color: "#D1D1D6"
      mush-slider-background-color: "#F9F9FB"

      # Mushroom / Chips
      mush-chip-background: "#FFFFFF"
      mush-chip-active-background: "#F9F9FB"
      mush-chip-color: "#1C1C1E"
      mush-chip-icon-color: "#5BB6BE"
      mush-chip-active-color: "#5BB6BE"
      mush-chip-active-icon-color: "#5BB6BE"
      mush-chip-border-color: "#C6C6C8"
      mush-chip-border-radius: "16px"
      mush-chip-font-size: "12px"

      # Mushroom / RGB-Hilfswerte
      mush-rgb-primary-text-color: "68, 77, 92"
      mush-rgb-secondary-text-color: "85, 103, 122"
      mush-rgb-state-switch: "86, 183, 190"
      mush-rgb-state-light: "86, 183, 190"
      mush-rgb-state-cover: "86, 183, 190"
      mush-rgb-state-entity: "91, 182, 190"
      mush-rgb-state-fan: "86, 183, 190"
      mush-rgb-state-media-player: "86, 183, 190"
      mush-rgb-state-vacuum: "86, 183, 190"
      mush-rgb-success: "0, 145, 146"
      mush-rgb-warning: "255, 204, 0"
      mush-rgb-danger: "255, 59, 48"
      mush-rgb-disabled: "142, 142, 147"
      mush-rgb-info: "0, 122, 255"

      # Card-mod & Generator
      card-mod-theme: "hatgv1"
      card-mod-card-yaml: |

        .: |
          ha-card {
            --bubble-main-background-color: var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)));
            --bubble-secondary-background-color: var(--bubble-secondary-background-color, var(--secondary-background-color));
            --bubble-icon-background-color: var(--bubble-icon-background-color, var(--secondary-background-color));
            --bubble-icon-color: var(--bubble-icon-color, var(--accent-color));
            --bubble-name-color: var(--bubble-name-color, var(--primary-text-color));
            --bubble-state-color: var(--bubble-state-color, var(--secondary-text-color));
            --bubble-border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px));
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--bubble-card-background-color, var(--card-background-color)))) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
          }

          .bubble-card,
          .bubble-button-card-container,
          .bubble-media-player,
          .bubble-media-player-container,
          .bubble-cover-card-container,
          .bubble-climate-card-container,
          .bubble-horizontal-buttons-stack-card-container,
          .bubble-pop-up,
          .bubble-pop-up-container {
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--bubble-card-background-color, var(--card-background-color)))) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
          }

          .bubble-background {
            border-radius: inherit !important;
            overflow: hidden !important;
          }

          .bubble-icon-container,
          .bubble-icon-wrapper,
          .bubble-climate-icon-container,
          .bubble-cover-icon-container,
          .bubble-media-player-icon-container {
            border-radius: var(--bubble-icon-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-icon,
          .bubble-icon-container ha-icon,
          .bubble-icon-wrapper ha-icon,
          .bubble-climate-icon-container ha-icon,
          .bubble-cover-icon-container ha-icon,
          .bubble-media-player-icon-container ha-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-sub-button,
          .bubble-sub-button-container,
          .bubble-sub-button-background,
          .bubble-climate-button,
          .bubble-cover-button,
          .bubble-media-player-button {
            border-radius: var(--bubble-sub-button-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-sub-button-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-sub-button-text-color, var(--bubble-state-color, var(--secondary-text-color))) !important;
            box-shadow: var(--bubble-sub-button-box-shadow, var(--bubble-box-shadow, none)) !important;
            border: 0 !important;
          }

          .bubble-sub-button.background-on {
            position: relative;
            overflow: hidden;
            background-color: var(--bubble-sub-button-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))))) !important;
            box-shadow: 0 6px 16px -4px rgba(var(--rgb-accent-color), 0.5), 0 0 10px 1px rgba(var(--rgb-accent-color), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.12) !important;
          }

          .bubble-sub-button.background-on::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(var(--rgb-accent-color), 0.5) 40%, transparent 70%);
            mix-blend-mode: screen;
            opacity: 0.6;
            pointer-events: none;
          }

          .bubble-sub-button ha-icon,
          .bubble-sub-button-container ha-icon,
          .bubble-climate-button ha-icon,
          .bubble-cover-button ha-icon,
          .bubble-media-player-button ha-icon,
          .bubble-horizontal-buttons-stack-card-container .bubble-icon,
          .bubble-horizontal-buttons-stack-card-container ha-icon {
            color: var(--bubble-sub-button-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          .bubble-name,
          .bubble-button-card-container .name,
          .bubble-media-player .name,
          .bubble-cover-card-container .name,
          .bubble-climate-card-container .name {
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            font-size: var(--bubble-name-font-size, 14px) !important;
            font-weight: var(--bubble-name-font-weight, 500) !important;
          }

          .bubble-state,
          .bubble-secondary,
          .bubble-media-player .state,
          .bubble-cover-card-container .state,
          .bubble-climate-card-container .state {
            color: var(--bubble-state-color, var(--secondary-text-color)) !important;
            font-size: var(--bubble-state-font-size, 12px) !important;
          }

          .bubble-range,
          .bubble-range-slider,
          .bubble-slider-container,
          .bubble-slider-background,
          .bubble-media-player-slider-background,
          .bubble-cover-slider-background {
            border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--slider-track-color, var(--divider-color)) !important;
            overflow: hidden !important;
          }

          .bubble-range-fill,
          .bubble-slider-fill,
          .bubble-slider-active,
          .bubble-media-player-slider-fill,
          .bubble-cover-slider-fill {
            background: var(--slider-color, var(--accent-color)) !important;
          }

          .bubble-climate-card-container {
            border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-climate-main-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-cover-card-container {
            border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-cover-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-cover-main-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-media-player {
            border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-media-player-main-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-button,
          .bubble-horizontal-buttons-stack-card-container .bubble-background-color,
          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background-color {
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            background: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            opacity: 1 !important;
          }

          .bubble-pop-up,
          .bubble-pop-up-background,
          .bubble-pop-up-container {
            border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--bubble-pop-up-background-color, var(--primary-background-color)) !important;
            box-shadow: var(--bubble-pop-up-box-shadow, var(--bubble-box-shadow, none)) !important;
            backdrop-filter: var(--bubble-pop-up-backdrop-filter, blur(16px)) !important;
          }

          /* --- Icon Leucht-Zustand (an/aus): Bubble Card --- */
          .bubble-icon-container {
            transition: box-shadow .3s ease-in-out;
          }
          .is-off .bubble-icon-container {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25),
                        0 1px 2px rgba(0, 0, 0, 0.15) !important;
          }
          .is-on .bubble-icon-container {
            box-shadow: 0 0 10px 2px rgba(var(--rgb-accent-color), 0.55),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          }
          .is-on ha-icon.bubble-main-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
            filter: drop-shadow(0 0 4px rgba(var(--rgb-accent-color), 0.7));
          }

          /* --- Mushroom: Icon-Farbe/-Hintergrund/-Rundung an Bubble angleichen --- */
          mushroom-shape-icon {
            --icon-color: var(--mush-icon-color, var(--bubble-icon-color, var(--accent-color)));
            --shape-color: var(--mush-icon-background-color, var(--bubble-icon-background-color, var(--secondary-background-color)));
            --icon-border-radius: var(--bubble-icon-border-radius, 50%);
          }
      card-backdrop-blur: "none"

    dark:
      # Grundfarben & Text
      accent-color: "#07BDDF"
      primary-color: "#07BDDF"
      dark-primary-color: "#3A7C81"
      light-primary-color: "#D0EBED"
      primary-text-color: "#FEFFFF"
      secondary-text-color: "#97A6B8"
      text-primary-color: "#000000"
      disabled-text-color: "#636366"
      disabled-color: "#464646"
      error-color: "#FF453A"
      warning-color: "#FFD60A"
      success-color: "#30D158"
      info-color: "#07BDDF"
      red-color: "#FF453A"
      green-color: "#30D158"
      blue-color: "#07BDDF"
      orange-color: "#FF9F0A"
      yellow-color: "#FFD60A"
      purple-color: "#BF5AF2"
      pink-color: "#FF375F"
      cyan-color: "#32ADE6"
      grey-color: "#C7C7CC"
      deep-purple-color: "#6E41AB"
      indigo-color: "#3F51B5"
      light-blue-color: "#03A9F4"
      teal-color: "#009688"
      light-green-color: "#8BC34A"
      lime-color: "#CDDC39"
      amber-color: "#FFC107"
      deep-orange-color: "#FF6F22"
      brown-color: "#795548"
      light-grey-color: "#BDBDBD"
      dark-grey-color: "#606060"
      blue-grey-color: "#607D8B"
      black-color: "#000000"
      white-color: "#FFFFFF"
      printer-cyan-color: "#33C3FF"
      printer-magenta-color: "#FF3EA8"
      printer-yellow-color: "#FFE14D"

      # HA-Grundgerüst / Card
      card-background-color: "rgba(69, 85, 101, 1)"
      ha-card-background: "rgba(69, 85, 101, 1)"
      ha-card-background-color: "rgba(69, 85, 101, 1)"
      wa-color-surface-raised: "#1C1C1E"
      ha-card-border-color: "rgba(225, 225, 225, 0.12)"
      ha-card-border-radius: "12px"
      ha-card-border-width: "1px"
      ha-card-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      table-row-background-color: "#29323F"
      table-row-alternative-background-color: "#455565"

      # HA-Grundgerüst / Hintergründe
      primary-background-color: "#29323F"
      background-color: "#29323F"
      lovelace-background: "#29323F"
      secondary-background-color: "#1B222C"

      # HA-Grundgerüst / Theme
      mdc-theme-background: "#29323F"
      mdc-theme-surface: "#455565"
      mdc-theme-on-surface: "#F8FAFB"

      # HA-Grundgerüst / Header
      app-header-background-color: "#29323F"
      app-header-text-color: "#F8FAFB"
      app-toolbar-background-color: "#29323F"
      toolbar-background-color: "#1C1C1E"
      app-toolbar-text-color: "#F2F2F7"
      toolbar-text-color: "#F2F2F7"

      # HA-Grundgerüst / App Drawer
      app-drawer-background-color: "#29323F"
      app-drawer-text-color: "#C7C7CC"
      app-drawer-icon-color: "#56B7BE"

      # HA-Grundgerüst / Sidebar
      sidebar-background-color: "#29323F"
      sidebar-selected-background-color: "#d5d5d5"
      sidebar-text-color: "#F8FAFB"
      sidebar-icon-color: "rgba(248, 250, 251, 0.6)"
      sidebar-selected-text-color: "#56B7BE"
      sidebar-selected-icon-color: "#56B7BE"

      # HA-Grundgerüst / Status, Icons & Entitäten
      state-icon-color: "#56B7BE"
      state-icon-active-color: "#5BB6BE"
      state-icon-unavailable-color: "#919191"
      state-active-color: "#56B7BE"
      state-inactive-color: "#97A6B8"
      state-unavailable-color: "#919191"
      state-on-color: "#56B7BE"
      state-off-color: "#FFFFFF"
      state-light-color: "#07BDDF"
      state-light-active-color: "#07BDDF"
      state-light-on-color: "#07BDDF"
      state-switch-color: "#07BDDF"
      state-switch-active-color: "#07BDDF"
      state-switch-on-color: "#07BDDF"
      state-climate-cool-color: "#07BDDF"
      state-climate-heat-color: "#ff2600"
      state-climate-auto-color: "#ffd478"
      state-climate-dry-color: "#07BDDF"
      state-climate-fan_only-color: "#07BDDF"
      state-climate-heat_cool-color: "#FFC107"
      state-cover-color: "#56B7BE"
      state-cover-active-color: "#929000"
      state-cover-open-color: "#929000"
      state-cover-closed-color: "#ff2600"
      state-fan-color: "#56B7BE"
      state-fan-active-color: "#56B7BE"
      state-media_player-color: "#56B7BE"
      state-media_player-active-color: "#56B7BE"
      state-vacuum-color: "#56B7BE"
      state-vacuum-active-color: "#56B7BE"
      state-vacuum-error-color: "#FF453A"
      state-lock-locked-color: "#ff2600"
      state-lock-locking-color: "#ff2600"
      state-lock-unlocked-color: "#929000"
      state-lock-unlocking-color: "#929000"
      state-lock-jammed-color: "#FF453A"
      state-lock-open-color: "#FF453A"
      state-lock-opening-color: "#56B7BE"
      state-alarm_control_panel-triggered-color: "#ff2600"
      state-alarm-triggered-color: "#ff2600"
      state-alarm_control_panel-armed_home-color: "#ffd478"
      state-alarm_control_panel-armed_away-color: "#ffd478"
      state-alarm-armed-color: "#ffd478"
      state-alarm_control_panel-disarmed-color: "#5BB6BE"
      state-alarm-disarmed-color: "#5BB6BE"
      state-alarm_control_panel-armed_custom_bypass-color: "#30D158"
      state-alarm_control_panel-armed_night-color: "#30D158"
      state-alarm_control_panel-armed_vacation-color: "#30D158"
      state-alarm_control_panel-arming-color: "#56B7BE"
      state-alarm_control_panel-disarming-color: "#56B7BE"
      state-alarm_control_panel-pending-color: "#56B7BE"
      state-alert-off-color: "#56B7BE"
      state-alert-on-color: "#FF453A"
      state-binary_sensor-active-color: "#FFC107"
      state-binary_sensor-battery-on-color: "#FF453A"
      state-binary_sensor-carbon_monoxide-on-color: "#FF453A"
      state-binary_sensor-gas-on-color: "#FF453A"
      state-binary_sensor-heat-on-color: "#FF453A"
      state-binary_sensor-lock-on-color: "#FF453A"
      state-binary_sensor-moisture-on-color: "#FF453A"
      state-binary_sensor-problem-on-color: "#FF453A"
      state-binary_sensor-safety-on-color: "#FF453A"
      state-binary_sensor-smoke-on-color: "#FF453A"
      state-binary_sensor-sound-on-color: "#FF453A"
      state-binary_sensor-tamper-on-color: "#FF453A"
      state-device_tracker-active-color: "#56B7BE"
      state-device_tracker-home-color: "#30D158"
      state-humidifier-on-color: "#07BDDF"
      state-lawn_mower-active-color: "#009688"
      state-lawn_mower-error-color: "#FF453A"
      state-person-active-color: "#56B7BE"
      state-person-home-color: "#30D158"
      state-plant-active-color: "#FF453A"
      state-siren-active-color: "#FF453A"
      state-sun-above_horizon-color: "#FFC107"
      state-sun-below_horizon-color: "#3F51B5"
      state-update-active-color: "#56B7BE"
      state-valve-active-color: "#56B7BE"
      state-water_heater-eco-color: "#30D158"
      state-water_heater-electric-color: "#56B7BE"
      state-water_heater-gas-color: "#56B7BE"
      state-water_heater-heat_pump-color: "#56B7BE"
      state-water_heater-high_demand-color: "#FF6F22"
      state-water_heater-performance-color: "#FF6F22"
      state-weather-clear_night-color: "#6E41AB"
      state-weather-cloudy-color: "#BDBDBD"
      state-weather-exceptional-color: "#FF453A"
      state-weather-fog-color: "#C7C7CC"
      state-weather-hail-color: "#32ADE6"
      state-weather-lightning_rainy-color: "#CDDC39"
      state-weather-lightning-color: "#FFD60A"
      state-weather-partlycloudy-color: "#607D8B"
      state-weather-pouring-color: "#3F51B5"
      state-weather-rainy-color: "#56B7BE"
      state-weather-snowy_rainy-color: "#03A9F4"
      state-weather-snowy-color: "#C0E0FF"
      state-weather-sunny-color: "#FFC107"
      state-weather-windy_variant-color: "#30D158"
      state-weather-windy-color: "#30D158"
      state-battery-low-color: "#ff2600"
      state-sensor-battery-high-color: "#30D158"
      state-sensor-battery-medium-color: "#56B7BE"
      state-sensor-battery-low-color: "#FF453A"
      label-badge-background-color: "#1C1C1E"
      label-badge-text-color: "rgba(248, 250, 251, 0.8)"
      label-badge-red: "#FF453A"
      label-badge-blue: "#07BDDF"
      label-badge-green: "#30D158"
      label-badge-yellow: "#FFD60A"
      state-battery-alert-color: "#ff2600"

      # HA-Grundgerüst / Schalter, Toggle & Slider
      ha-control-switch-color: "#56B7BE"
      ha-control-switch-checked-color: "#5BB6BE"
      ha-control-switch-unchecked-color: "#3A3A3C"
      ha-switch-background-color: "#455565"
      ha-switch-background-color-hover: "#455565"
      ha-switch-border-color: "rgba(213, 213, 213, 1)"
      ha-switch-thumb-background-color: "#5BB6BE"
      ha-switch-thumb-background-color-hover: "#5BB6BE"
      ha-switch-thumb-border-color: "rgba(254, 255, 255, 1)"
      ha-switch-thumb-border-color-hover: "rgba(0,0,0,0)"
      ha-switch-checked-background-color: "#5BB6BE"
      ha-switch-checked-background-color-hover: "#5BB6BE"
      ha-switch-checked-border-color: "rgba(254, 255, 255, 1)"
      ha-switch-checked-thumb-background-color: "#5BB6BE"
      ha-switch-checked-thumb-background-color-hover: "#5BB6BE"
      ha-switch-checked-thumb-border-color: "rgba(254, 255, 255, 1)"
      ha-switch-checked-thumb-border-color-hover: "rgba(0,0,0,0)"
      control-slider-color: "#5BB6BE"
      slider-color: "#5BB6BE"
      slider-secondary-color: "#1F3A5F"
      slider-track-color: "#48484A"

      # HA-Grundgerüst / Buttons & Chips
      control-button-background-color: "#1B222C"
      control-button-icon-color: "#5BB6BE"
      control-button-border-radius: "12px"

      # HA-Grundgerüst / Eingaben & Auswahlfelder
      input-background-color: "#29323F"
      input-fill-color: "#29323F"
      input-disabled-fill-color: "rgba(44, 44, 46, 0.50)"
      input-disabled-ink-color: "rgba(255, 255, 255, 0.37)"
      input-disabled-label-ink-color: "#636366"
      input-disabled-line-color: "rgba(255, 255, 255, 0.06)"
      input-dropdown-icon-color: "rgba(255, 255, 255, 0.54)"
      input-hover-line-color: "rgba(255, 255, 255, 0.87)"
      input-idle-line-color: "rgba(255, 255, 255, 0.42)"
      input-ink-color: "rgba(255, 255, 255, 0.87)"
      input-label-ink-color: "rgba(255, 255, 255, 0.6)"
      input-outlined-disabled-border-color: "rgba(255, 255, 255, 0.06)"
      mdc-select-idle-line-color: "#38383A"
      mdc-select-dropdown-icon-color: "#C7C7CC"
      mdc-select-hover-line-color: "#38383A"
      mdc-text-field-idle-line-color: "#38383A"
      mdc-text-field-hover-line-color: "#38383A"
      ha-color-form-background: "#29323F"
      ha-color-form-background-hover: "#29323F"
      ha-color-form-background-disabled: "rgba(44, 44, 46, 0.50)"

      # HA-Grundgerüst / Material, Paper & MDC
      mdc-theme-primary: "#56B7BE"
      mdc-theme-secondary: "#5BB6BE"
      mdc-theme-on-primary: "#29323F"
      md-sys-color-primary: "#56B7BE"
      md-sys-color-on-primary: "#07BDDF"
      md-sys-color-primary-container: "#1F3A5F"
      md-sys-color-on-primary-container: "#29323F"
      md-sys-color-on-surface: "#feffff"
      ha-on-surface-color: "#feffff"
      md-radio-selected-icon-color: "#56B7BE"
      mdc-radio-unchecked-color: "#C7C7CC"

      # HA-Grundgerüst / HA 2026 / Web Awesome
      ha-color-fill-primary-normal-resting: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-primary-normal-hover: "rgba(91, 182, 190, 0.25)"
      ha-color-fill-primary-quiet-resting: "rgba(91, 182, 190, 0.08)"
      ha-color-fill-primary-quiet-hover: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-disabled-normal-resting: "rgba(99, 99, 102, 0.08)"
      ha-color-on-disabled-normal: "rgba(199, 199, 204, 0.50)"
      ha-color-fill-disabled-loud-resting: "rgba(99, 99, 102, 0.22)"
      ha-color-on-disabled-loud: "rgba(199, 199, 204, 0.55)"
      ha-color-on-disabled-quiet: "rgba(199, 199, 204, 0.50)"
      ha-color-fill-neutral-quiet-resting: "#1C1C1E"
      ha-color-fill-neutral-quiet-hover: "#2C2C2E"
      ha-color-fill-neutral-quiet-active: "#1C1C1E"
      ha-color-fill-neutral-normal-resting: "#2C2C2E"
      ha-color-fill-neutral-normal-hover: "#1C1C1E"
      ha-color-fill-neutral-normal-active: "#2C2C2E"
      ha-color-fill-danger-normal-resting: "rgba(255, 69, 58, 0.15)"
      ha-color-fill-danger-normal-hover: "rgba(255, 69, 58, 0.22)"
      ha-color-fill-danger-normal-active: "rgba(255, 69, 58, 0.28)"
      ha-color-on-danger-normal: "#F2F2F7"
      ha-color-fill-warning-normal-resting: "rgba(255, 214, 10, 0.15)"
      ha-color-fill-warning-normal-hover: "rgba(255, 214, 10, 0.22)"
      ha-color-fill-warning-normal-active: "rgba(255, 214, 10, 0.28)"
      ha-color-on-warning-normal: "#F2F2F7"
      ha-tooltip-background-color: "#29323F"
      ha-tooltip-text-color: "#F2F2F7"

      # HA-Grundgerüst / Abstände, Rundungen, Schatten & Rahmen
      border-color: "rgba(225, 225, 225, 0.12)"
      border-radius: "12px"
      box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      divider-color: "rgba(225, 225, 225, 0.12)"
      outline-color: "rgba(225, 225, 225, 0.12)"
      outline-variant-color: "#38383A"
      outline-hover-color: "rgba(225, 225, 225, 0.24)"
      ha-line-height-condensed: "1.25"
      ha-line-height-expanded: "1.35"
      ha-line-height-normal: "1.5"

      # HA-Grundgerüst / Schrift & Typografie
      primary-font-family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-body: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-heading: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-longform: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-code: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      mdc-typography-font-family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-size-scale: "1"
      ha-font-size-2xs: "8px"
      ha-font-size-xs: "8px"
      ha-font-size-s: "12px"
      ha-font-size-m: "14px"
      ha-font-size-l: "16px"
      ha-font-size-xl: "18px"
      ha-font-size-2xl: "20px"
      ha-font-size-3xl: "22px"
      ha-font-size-4xl: "24px"
      ha-font-weight-light: "300"
      ha-font-weight-normal: "400"
      ha-font-weight-body: "400"
      ha-font-weight-medium: "500"
      ha-font-weight-heading: "500"
      ha-font-weight-action: "500"
      ha-font-weight-bold: "700"

      # HA-Grundgerüst / RGB-Hilfswerte
      rgb-primary-color: "86, 183, 190"
      rgb-accent-color: "91, 182, 190"
      rgb-primary-text-color: "248, 250, 251"
      rgb-secondary-text-color: "151, 166, 184"
      rgb-card-background-color: "69, 85, 101"
      rgb-primary-background-color: "41, 50, 63"
      rgb-blue-color: "10, 132, 255"
      rgb-orange-color: "255, 159, 10"
      rgb-state-switch-color: "86, 183, 190"
      rgb-state-light-color: "86, 183, 190"
      rgb-state-cover-color: "86, 183, 190"
      rgb-state-fan-color: "86, 183, 190"
      rgb-state-media_player-color: "86, 183, 190"

      # HA-Grundgerüst / Graphen & Energie
      graph-color-1: "#07BDDF"
      graph-color-2: "#64D2FF"
      graph-color-3: "#30D158"
      graph-color-4: "#BF5AF2"
      graph-color-5: "#FF453A"
      graph-color-6: "#32ADE6"
      graph-color-7: "#64D2FF"
      graph-color-8: "#FF375F"
      graph-color-9: "#FF9F0A"
      graph-color-10: "#5E5CE6"
      graph-color-11: "#A3D977"
      graph-color-12: "#FFD60A"
      graph-color-13: "#BF5AF2"
      graph-color-14: "#A2845E"
      color-1: "#07BDDF"
      color-2: "#64D2FF"
      color-3: "#30D158"
      color-4: "#BF5AF2"
      color-5: "#FF453A"
      color-6: "#32ADE6"
      color-7: "#64D2FF"
      color-8: "#FF375F"
      color-9: "#FF9F0A"
      color-10: "#5E5CE6"
      color-11: "#A3D977"
      color-12: "#FFD60A"
      color-13: "#BF5AF2"
      color-14: "#A2845E"
      energy-grid-consumption-color: "#07BDDF"
      energy-grid-return-color: "#BF5AF2"
      energy-solar-color: "#FF9F0A"
      energy-non-fossil-color: "#30D158"
      energy-battery-out-color: "#64D2FF"
      energy-battery-in-color: "#BF5AF2"
      energy-gas-color: "#FF453A"
      energy-water-color: "#32ADE6"

      # Bubble Card / Karten & Hintergründe
      bubble-card-background-color: "rgba(69, 85, 101, 1)"
      bubble-main-buttons-background-color: "rgba(69, 85, 101, 1)"
      bubble-secondary-background-color: "#455565"
      bubble-icon-background-color: "rgba(41, 50, 63, 0.5)"
      bubble-icon-color: "#5BB6BE"
      bubble-name-color: "#F8FAFB"
      bubble-state-color: "#97A6B8"
      bubble-accent-color: "#5BB6BE"
      bubble-active-color: "#5BB6BE"
      bubble-toggle-color: "#5BB6BE"
      bubble-line-background-color: "rgba(225, 225, 225, 0.12)"
      bubble-border: "1px solid #38383A"
      bubble-border-color: "rgba(225, 225, 225, 0.12)"
      bubble-border-radius: "12px"
      bubble-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      bubble-card-border-radius: "12px"
      bubble-select-border-radius: "12px"
      bubble-icon-border-radius: "50px"

      # Bubble Card / Buttons
      bubble-button-background-color: "#455565"
      bubble-button-active-background-color: "#5BB6BE"
      bubble-button-icon-color: "#000000"
      bubble-button-active-icon-color: "#07BDDF"
      bubble-button-text-color: "#feffff"
      bubble-button-active-text-color: "#000000"
      bubble-button-border-radius: "12px"
      bubble-button-card-background-color: "#455565"
      bubble-button-main-background-color: "#455565"
      bubble-button-active-color: "#07BDDF"

      # Bubble Card / Sub-Buttons
      bubble-sub-button-background-color: "#455565"
      bubble-sub-button-active-background-color: "#5BB6BE"
      bubble-sub-button-icon-color: "#0C0403"
      bubble-sub-button-active-icon-color: "#5BB6BE"
      bubble-sub-button-text-color: "#C7C7CC"
      bubble-sub-button-active-text-color: "#5BB6BE"
      bubble-sub-button-border-radius: "22px"
      bubble-sub-button-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      bubble-sub-buttons-main-background-color: "#29323F"

      # Bubble Card / Separator
      bubble-separator-background-color: "#455565"
      bubble-separator-icon-background-color: "#29323F"
      bubble-separator-icon-color: "#5BB6BE"
      bubble-separator-line-color: "rgba(225, 225, 225, 0.12)"
      bubble-separator-name-color: "#feffff"
      bubble-separator-text-color: "#feffff"
      bubble-separator-border-radius: "12px"

      # Bubble Card / Popup & Dialog
      bubble-pop-up-background-color: "#455565"
      bubble-pop-up-backdrop-filter: "blur(18px)"
      bubble-pop-up-border-radius: "12px"
      bubble-pop-up-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      dialog-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      more-info-header-background: "#2C2C2E"
      more-info-header-color: "#F2F2F7"
      popup-border-radius: "12px"
      ha-dialog-scrim-backdrop-filter: "blur(10px)"
      ha-dialog-surface-background: "rgba(28, 28, 30, 0.92)"
      mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.60)"

      # Bubble Card / Horizontal Buttons Stack
      bubble-horizontal-buttons-stack-background-color: "#455565"
      bubble-horizontal-buttons-stack-button-background-color: "#2C2C2E"
      bubble-horizontal-buttons-stack-button-icon-color: "#C7C7CC"
      bubble-horizontal-buttons-stack-button-text-color: "#F2F2F7"
      bubble-horizontal-buttons-stack-border-radius: "12px"
      bubble-horizontal-buttons-stack-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"

      # Bubble Card / Climate
      bubble-climate-background-color: "#455565"
      bubble-climate-main-background-color: "#455565"
      bubble-climate-button-background-color: "#2C2C2E"
      bubble-climate-button-icon-color: "#C7C7CC"
      bubble-climate-border-radius: "12px"
      bubble-climate-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      bubble-climate-icon-border-radius: "32px"

      # Bubble Card / Cover
      bubble-cover-background-color: "#455565"
      bubble-cover-main-background-color: "#455565"
      bubble-cover-button-background-color: "#2C2C2E"
      bubble-cover-button-icon-color: "#C7C7CC"
      bubble-cover-border-radius: "12px"
      bubble-cover-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"

      # Bubble Card / Media Player
      bubble-media-player-background-color: "#455565"
      bubble-media-player-main-background-color: "#455565"
      bubble-media-player-button-background-color: "#2C2C2E"
      bubble-media-player-button-icon-color: "#C7C7CC"
      bubble-media-player-border-radius: "12px"
      bubble-media-player-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"

      # Mushroom / Karten & Hintergründe
      mush-card-background: "rgba(69, 85, 101, 1)"
      mush-control-background-color: "#1B222C"
      mush-card-primary-color: "#F8FAFB"
      mush-card-secondary-color: "#97A6B8"
      mush-title-color: "#F8FAFB"
      mush-subtitle-color: "#97A6B8"

      # Mushroom / Icons
      mush-icon-background-color: "#29323F"
      mush-icon-color: "#29323F"
      mush-icon-active-color: "#5BB6BE"

      # Mushroom / Toggle
      mush-toggle-color: "#5BB6BE"
      mush-toggle-background-color: "#29323F"

      # Mushroom / Slider
      mush-slider-color: "#5BB6BE"
      mush-slider-track-color: "#48484A"
      mush-slider-background-color: "#29323F"

      # Mushroom / Chips
      mush-chip-background: "#455565"
      mush-chip-active-background: "#1F3A5F"
      mush-chip-color: "#F2F2F7"
      mush-chip-icon-color: "#5BB6BE"
      mush-chip-active-color: "#5BB6BE"
      mush-chip-active-icon-color: "#5BB6BE"
      mush-chip-border-color: "#38383A"
      mush-chip-border-radius: "16px"
      mush-chip-font-size: "12px"

      # Mushroom / RGB-Hilfswerte
      mush-rgb-primary-text-color: "248, 250, 251"
      mush-rgb-secondary-text-color: "151, 166, 184"
      mush-rgb-state-switch: "86, 183, 190"
      mush-rgb-state-light: "86, 183, 190"
      mush-rgb-state-cover: "86, 183, 190"
      mush-rgb-state-entity: "91, 182, 190"
      mush-rgb-state-fan: "86, 183, 190"
      mush-rgb-state-media-player: "86, 183, 190"
      mush-rgb-state-vacuum: "86, 183, 190"
      mush-rgb-success: "48, 209, 88"
      mush-rgb-warning: "255, 214, 10"
      mush-rgb-danger: "255, 69, 58"
      mush-rgb-disabled: "99, 99, 102"
      mush-rgb-info: "10, 132, 255"

      # Card-mod & Generator
      card-mod-theme: "hatgv1"
      card-mod-card-yaml: |

        .: |
          ha-card {
            --bubble-main-background-color: var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)));
            --bubble-secondary-background-color: var(--bubble-secondary-background-color, var(--secondary-background-color));
            --bubble-icon-background-color: var(--bubble-icon-background-color, var(--secondary-background-color));
            --bubble-icon-color: var(--bubble-icon-color, var(--accent-color));
            --bubble-name-color: var(--bubble-name-color, var(--primary-text-color));
            --bubble-state-color: var(--bubble-state-color, var(--secondary-text-color));
            --bubble-border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px));
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--bubble-card-background-color, var(--card-background-color)))) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
          }

          .bubble-card,
          .bubble-button-card-container,
          .bubble-media-player,
          .bubble-media-player-container,
          .bubble-cover-card-container,
          .bubble-climate-card-container,
          .bubble-horizontal-buttons-stack-card-container,
          .bubble-pop-up,
          .bubble-pop-up-container {
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--bubble-card-background-color, var(--card-background-color)))) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
          }

          .bubble-background {
            border-radius: inherit !important;
            overflow: hidden !important;
          }

          .bubble-icon-container,
          .bubble-icon-wrapper,
          .bubble-climate-icon-container,
          .bubble-cover-icon-container,
          .bubble-media-player-icon-container {
            border-radius: var(--bubble-icon-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-icon,
          .bubble-icon-container ha-icon,
          .bubble-icon-wrapper ha-icon,
          .bubble-climate-icon-container ha-icon,
          .bubble-cover-icon-container ha-icon,
          .bubble-media-player-icon-container ha-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-sub-button,
          .bubble-sub-button-container,
          .bubble-sub-button-background,
          .bubble-climate-button,
          .bubble-cover-button,
          .bubble-media-player-button {
            border-radius: var(--bubble-sub-button-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-sub-button-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-sub-button-text-color, var(--bubble-state-color, var(--secondary-text-color))) !important;
            box-shadow: var(--bubble-sub-button-box-shadow, var(--bubble-box-shadow, none)) !important;
            border: 0 !important;
          }

          .bubble-sub-button.background-on {
            position: relative;
            overflow: hidden;
            background-color: var(--bubble-sub-button-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))))) !important;
            box-shadow: 0 6px 16px -4px rgba(var(--rgb-accent-color), 0.5), 0 0 10px 1px rgba(var(--rgb-accent-color), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.12) !important;
          }

          .bubble-sub-button.background-on::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(var(--rgb-accent-color), 0.5) 40%, transparent 70%);
            mix-blend-mode: screen;
            opacity: 0.6;
            pointer-events: none;
          }

          .bubble-sub-button ha-icon,
          .bubble-sub-button-container ha-icon,
          .bubble-climate-button ha-icon,
          .bubble-cover-button ha-icon,
          .bubble-media-player-button ha-icon,
          .bubble-horizontal-buttons-stack-card-container .bubble-icon,
          .bubble-horizontal-buttons-stack-card-container ha-icon {
            color: var(--bubble-sub-button-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          .bubble-name,
          .bubble-button-card-container .name,
          .bubble-media-player .name,
          .bubble-cover-card-container .name,
          .bubble-climate-card-container .name {
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            font-size: var(--bubble-name-font-size, 14px) !important;
            font-weight: var(--bubble-name-font-weight, 500) !important;
          }

          .bubble-state,
          .bubble-secondary,
          .bubble-media-player .state,
          .bubble-cover-card-container .state,
          .bubble-climate-card-container .state {
            color: var(--bubble-state-color, var(--secondary-text-color)) !important;
            font-size: var(--bubble-state-font-size, 12px) !important;
          }

          .bubble-range,
          .bubble-range-slider,
          .bubble-slider-container,
          .bubble-slider-background,
          .bubble-media-player-slider-background,
          .bubble-cover-slider-background {
            border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--slider-track-color, var(--divider-color)) !important;
            overflow: hidden !important;
          }

          .bubble-range-fill,
          .bubble-slider-fill,
          .bubble-slider-active,
          .bubble-media-player-slider-fill,
          .bubble-cover-slider-fill {
            background: var(--slider-color, var(--accent-color)) !important;
          }

          .bubble-climate-card-container {
            border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-climate-main-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-cover-card-container {
            border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-cover-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-cover-main-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-media-player {
            border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-media-player-main-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-button,
          .bubble-horizontal-buttons-stack-card-container .bubble-background-color,
          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background-color {
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            background: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--bubble-card-background-color, var(--card-background-color)))) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            opacity: 1 !important;
          }

          .bubble-pop-up,
          .bubble-pop-up-background,
          .bubble-pop-up-container {
            border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--bubble-pop-up-background-color, var(--primary-background-color)) !important;
            box-shadow: var(--bubble-pop-up-box-shadow, var(--bubble-box-shadow, none)) !important;
            backdrop-filter: var(--bubble-pop-up-backdrop-filter, blur(16px)) !important;
          }

          /* --- Icon Leucht-Zustand (an/aus): Bubble Card --- */
          .bubble-icon-container {
            transition: box-shadow .3s ease-in-out;
          }
          .is-off .bubble-icon-container {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25),
                        0 1px 2px rgba(0, 0, 0, 0.15) !important;
          }
          .is-on .bubble-icon-container {
            box-shadow: 0 0 10px 2px rgba(var(--rgb-accent-color), 0.55),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          }
          .is-on ha-icon.bubble-main-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
            filter: drop-shadow(0 0 4px rgba(var(--rgb-accent-color), 0.7));
          }

          /* --- Mushroom: Icon-Farbe/-Hintergrund/-Rundung an Bubble angleichen --- */
          mushroom-shape-icon {
            --icon-color: var(--mush-icon-color, var(--bubble-icon-color, var(--accent-color)));
            --shape-color: var(--mush-icon-background-color, var(--bubble-icon-background-color, var(--secondary-background-color)));
            --icon-border-radius: var(--bubble-icon-border-radius, 50%);
          }
      card-backdrop-blur: "none"
7

(Beitrag vom Verfasser gelöscht)

8

Ich bin gerade dabei, mein Theme mit HATG zu erstellen. Ich suche noch für 2 Hintergrundfarben die passende Stelle.
Einmal die Hintergrundfarbe für die Detailansicht (Popup) und für den Hintergrund von Bubblecard-Popup-Header (der Haupthintergrund ändert sich, nur der Überschrift-Hintergrund nicht). Für die 2 finde ich nix wo sich da was ändert, hast du da einen Tip ?

9

grafik
grafik761×378 35.6 KB

wenn du das meinst da sitze ich gerade dran.

10

Ja genau das meine ich beim Bubblecard Popup .. und wie gesagt bei den Popups wenn man irgendwo die Detailansicht aufruft .. da bleibt der Hintergrund immer grau.

11

grafik
grafik1004×778 90.5 KB

Filtere mal nach bubble + background + main und schau die mal alle durch.

# Erstellt mit HATG v0.2.13
# Theme: HATG – Grundfarbe #5BB6BE, Akzent #5BB6BE, Karten-Radius 12px
# Generiert am 2026-07-23

hatg:
  modes:
    light:
      # Grundfarben & Text / Grundfarben
      accent-color: "#5BB6BE"
      primary-color: "#5BB6BE"
      dark-primary-color: "#3E7C81"
      light-primary-color: "#D1EBED"
      disabled-color: "#D1D1D6"
      error-color: "#FF3B30"
      warning-color: "#FFCC00"
      success-color: "#34C759"
      info-color: "#007AFF"
      red-color: "#FF3B30"
      green-color: "#34C759"
      blue-color: "#007AFF"
      orange-color: "#FF9500"
      yellow-color: "#FFCC00"
      purple-color: "#AF52DE"
      pink-color: "#FF2D55"
      cyan-color: "#5AC8FA"
      grey-color: "#3C3C43"
      deep-purple-color: "#6E41AB"
      indigo-color: "#3F51B5"
      light-blue-color: "#03A9F4"
      teal-color: "#009688"
      light-green-color: "#8BC34A"
      lime-color: "#CDDC39"
      amber-color: "#FFC107"
      deep-orange-color: "#FF6F22"
      brown-color: "#795548"
      light-grey-color: "#BDBDBD"
      dark-grey-color: "#606060"
      blue-grey-color: "#607D8B"
      black-color: "#000000"
      white-color: "#FFFFFF"
      printer-cyan-color: "#00AEEF"
      printer-magenta-color: "#EC008C"
      printer-yellow-color: "#FFD400"

      # Grundfarben & Text / Text
      primary-text-color: "#59595A"
      secondary-text-color: "#55677A"
      text-primary-color: "#FFFFFF"
      disabled-text-color: "#8E8E93"

      # HA-Grundgerüst / Card
      card-background-color: "#FEFFFF"
      ha-card-background: "#F7FAFB"
      ha-card-background-color: "#F7FAFB"
      wa-color-surface-raised: "#F7FAFB"
      ha-card-border-color: "rgba(0, 0, 0, 0.05)"
      ha-card-border-radius: "12px"
      ha-card-border-width: "1px"
      ha-card-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      table-row-background-color: "#F9F9FB"
      table-row-alternative-background-color: "#F7FAFB"

      # HA-Grundgerüst / Hintergründe
      primary-background-color: "#F2F2F7"
      background-color: "#F2F2F7"
      lovelace-background: "linear-gradient(270deg, #5BB6BE ,#F2F2F7)"
      secondary-background-color: "#F9F9FB"
      glass-effect-style: "off"
      background-style: "custom"

      # HA-Grundgerüst / Theme
      mdc-theme-background: "#F2F2F7"
      mdc-theme-surface: "#F7FAFB"
      mdc-theme-on-surface: "#444D5C"

      # HA-Grundgerüst / Header
      app-header-background-color: "rgba(30, 30, 30, 0.01)"
      app-header-text-color: "#59595A"
      app-toolbar-background-color: "#FFFFFF"
      toolbar-background-color: "#FFFFFF"
      app-toolbar-text-color: "#59595A"
      toolbar-text-color: "#59595A"

      # HA-Grundgerüst / App Drawer
      app-drawer-background-color: "#FFFFFF"
      app-drawer-text-color: "#3C3C43"
      app-drawer-icon-color: "#5BB6BE"

      # HA-Grundgerüst / Sidebar
      sidebar-background-color: "rgba(30, 30, 30, 0)"
      sidebar-selected-background-color: "#E5F1FF"
      sidebar-text-color: "rgba(89, 89, 90, 0.8)"
      sidebar-icon-color: "rgba(89, 89, 90, 1)"
      sidebar-selected-text-color: "#59595A"
      sidebar-selected-icon-color: "#59595A"

      # HA-Grundgerüst / Status, Icons & Entitäten
      state-icon-color: "#59595A"
      state-icon-active-color: "#5BB6BE"
      state-icon-unavailable-color: "#D5D5D5"
      state-active-color: "#007AFF"
      state-inactive-color: "#FFFFFF"
      state-unavailable-color: "#D5D5D5"
      state-on-color: "#34C759"
      state-off-color: "#FFFFFF"
      state-light-color: "#007AFF"
      state-light-active-color: "#007AFF"
      state-light-on-color: "#ff9300"
      state-switch-color: "#007AFF"
      state-switch-active-color: "#5BB6BE"
      state-switch-on-color: "#5BB6BE"
      state-climate-cool-color: "#007AFF"
      state-climate-heat-color: "#ff2600"
      state-climate-auto-color: "#007AFF"
      state-climate-dry-color: "#007AFF"
      state-climate-fan_only-color: "#5AC8FA"
      state-climate-heat_cool-color: "#FFC107"
      state-cover-color: "#007AFF"
      state-cover-active-color: "#007AFF"
      state-cover-open-color: "#929000"
      state-cover-closed-color: "#ff2600"
      state-fan-color: "#007AFF"
      state-fan-active-color: "#007AFF"
      state-media_player-color: "#007AFF"
      state-media_player-active-color: "#007AFF"
      state-vacuum-color: "#007AFF"
      state-vacuum-active-color: "#007AFF"
      state-vacuum-error-color: "#FF3B30"
      state-lock-locked-color: "#007AFF"
      state-lock-locking-color: "#ff2600"
      state-lock-unlocked-color: "#007AFF"
      state-lock-unlocking-color: "#929000"
      state-lock-jammed-color: "#FF3B30"
      state-lock-open-color: "#FF3B30"
      state-lock-opening-color: "#007AFF"
      state-alarm_control_panel-triggered-color: "#ff2600"
      state-alarm-triggered-color: "#ff2600"
      state-alarm_control_panel-armed_home-color: "#ffd478"
      state-alarm_control_panel-armed_away-color: "#ffd478"
      state-alarm-armed-color: "#ffd478"
      state-alarm_control_panel-disarmed-color: "#ff9300"
      state-alarm-disarmed-color: "#ff9300"
      state-alarm_control_panel-armed_custom_bypass-color: "#34C759"
      state-alarm_control_panel-armed_night-color: "#34C759"
      state-alarm_control_panel-armed_vacation-color: "#34C759"
      state-alarm_control_panel-arming-color: "#007AFF"
      state-alarm_control_panel-disarming-color: "#007AFF"
      state-alarm_control_panel-pending-color: "#007AFF"
      state-alert-off-color: "#007AFF"
      state-alert-on-color: "#FF3B30"
      state-binary_sensor-active-color: "#FFC107"
      state-binary_sensor-battery-on-color: "#FF3B30"
      state-binary_sensor-carbon_monoxide-on-color: "#FF3B30"
      state-binary_sensor-gas-on-color: "#FF3B30"
      state-binary_sensor-heat-on-color: "#FF3B30"
      state-binary_sensor-lock-on-color: "#FF3B30"
      state-binary_sensor-moisture-on-color: "#FF3B30"
      state-binary_sensor-problem-on-color: "#FF3B30"
      state-binary_sensor-safety-on-color: "#FF3B30"
      state-binary_sensor-smoke-on-color: "#FF3B30"
      state-binary_sensor-sound-on-color: "#FF3B30"
      state-binary_sensor-tamper-on-color: "#FF3B30"
      state-device_tracker-active-color: "#007AFF"
      state-device_tracker-home-color: "#34C759"
      state-humidifier-on-color: "#007AFF"
      state-lawn_mower-active-color: "#009688"
      state-lawn_mower-error-color: "#FF3B30"
      state-person-active-color: "#007AFF"
      state-person-home-color: "#34C759"
      state-plant-active-color: "#FF3B30"
      state-siren-active-color: "#FF3B30"
      state-sun-above_horizon-color: "#FFC107"
      state-sun-below_horizon-color: "#3F51B5"
      state-update-active-color: "#007AFF"
      state-valve-active-color: "#007AFF"
      state-water_heater-eco-color: "#34C759"
      state-water_heater-electric-color: "#007AFF"
      state-water_heater-gas-color: "#007AFF"
      state-water_heater-heat_pump-color: "#007AFF"
      state-water_heater-high_demand-color: "#FF6F22"
      state-water_heater-performance-color: "#FF6F22"
      state-weather-clear_night-color: "#6E41AB"
      state-weather-cloudy-color: "#BDBDBD"
      state-weather-exceptional-color: "#FF3B30"
      state-weather-fog-color: "#3C3C43"
      state-weather-hail-color: "#5AC8FA"
      state-weather-lightning_rainy-color: "#CDDC39"
      state-weather-lightning-color: "#FFCC00"
      state-weather-partlycloudy-color: "#607D8B"
      state-weather-pouring-color: "#3F51B5"
      state-weather-rainy-color: "#007AFF"
      state-weather-snowy_rainy-color: "#03A9F4"
      state-weather-snowy-color: "#C0E0FF"
      state-weather-sunny-color: "#FFC107"
      state-weather-windy_variant-color: "#34C759"
      state-weather-windy-color: "#34C759"
      state-battery-low-color: "#ff2600"
      state-sensor-battery-high-color: "#34C759"
      state-sensor-battery-medium-color: "#007AFF"
      state-sensor-battery-low-color: "#FF3B30"
      label-badge-background-color: "#FFFFFF"
      label-badge-text-color: "rgba(68, 77, 92, 0.8)"
      label-badge-red: "#FF3B30"
      label-badge-blue: "#007AFF"
      label-badge-green: "#34C759"
      label-badge-yellow: "#FFCC00"
      state-battery-alert-color: "#ff2600"

      # HA-Grundgerüst / Schalter, Toggle & Slider
      ha-control-switch-color: "#007AFF"
      ha-control-switch-checked-color: "#5BB6BE"
      ha-control-switch-unchecked-color: "#D1D1D6"
      ha-switch-background-color: "#D1D1D6"
      ha-switch-background-color-hover: "#D1D1D6"
      ha-switch-border-color: "rgba(0,0,0,0)"
      ha-switch-thumb-background-color: "#FFFFFF"
      ha-switch-thumb-background-color-hover: "#FFFFFF"
      ha-switch-thumb-border-color: "rgba(0,0,0,0)"
      ha-switch-thumb-border-color-hover: "rgba(0,0,0,0)"
      ha-switch-checked-background-color: "#D1EBED"
      ha-switch-checked-background-color-hover: "#D1EBED"
      ha-switch-checked-border-color: "rgba(0,0,0,0)"
      ha-switch-checked-thumb-background-color: "#5BB6BE"
      ha-switch-checked-thumb-background-color-hover: "#5BB6BE"
      ha-switch-checked-thumb-border-color: "rgba(0,0,0,0)"
      ha-switch-checked-thumb-border-color-hover: "rgba(0,0,0,0)"
      control-slider-color: "#007AFF"
      slider-color: "#5BB6BE"
      slider-secondary-color: "#E5F1FF"
      slider-track-color: "#D1D1D6"

      # HA-Grundgerüst / Buttons & Chips
      control-button-background-color: "#F9F9FB"
      control-button-icon-color: "#5BB6BE"
      control-button-border-radius: "12px"

      # HA-Grundgerüst / Eingaben & Auswahlfelder
      input-background-color: "#F9F9FB"
      input-fill-color: "#F9F9FB"
      input-disabled-fill-color: "rgba(249, 249, 251, 0.55)"
      input-disabled-ink-color: "rgba(0, 0, 0, 0.37)"
      input-disabled-label-ink-color: "#8E8E93"
      input-disabled-line-color: "rgba(0, 0, 0, 0.06)"
      input-dropdown-icon-color: "rgba(0, 0, 0, 0.54)"
      input-hover-line-color: "rgba(0, 0, 0, 0.87)"
      input-idle-line-color: "rgba(0, 0, 0, 0.42)"
      input-ink-color: "rgba(0, 0, 0, 0.87)"
      input-label-ink-color: "rgba(0, 0, 0, 0.6)"
      input-outlined-disabled-border-color: "rgba(0, 0, 0, 0.06)"
      mdc-select-idle-line-color: "#C6C6C8"
      mdc-select-dropdown-icon-color: "#3C3C43"
      mdc-select-hover-line-color: "#C6C6C8"
      mdc-text-field-idle-line-color: "#C6C6C8"
      mdc-text-field-hover-line-color: "#C6C6C8"
      ha-color-form-background: "#F9F9FB"
      ha-color-form-background-hover: "#F9F9FB"
      ha-color-form-background-disabled: "rgba(249, 249, 251, 0.55)"

      # HA-Grundgerüst / Material, Paper & MDC
      mdc-theme-primary: "#5BB6BE"
      mdc-theme-secondary: "#5BB6BE"
      mdc-theme-on-primary: "#FFFFFF"
      md-sys-color-primary: "#5BB6BE"
      md-sys-color-on-primary: "#007AFF"
      md-sys-color-primary-container: "#E5F1FF"
      md-sys-color-on-primary-container: "#FFFFFF"
      md-sys-color-on-surface: "#feffff"
      ha-on-surface-color: "#feffff"
      md-radio-selected-icon-color: "#5BB6BE"
      mdc-radio-unchecked-color: "#3C3C43"

      # HA-Grundgerüst / HA 2026 / Web Awesome
      ha-color-fill-primary-normal-resting: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-primary-normal-hover: "rgba(91, 182, 190, 0.25)"
      ha-color-fill-primary-quiet-resting: "rgba(91, 182, 190, 0.08)"
      ha-color-fill-primary-quiet-hover: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-disabled-normal-resting: "rgba(142, 142, 147, 0.12)"
      ha-color-on-disabled-normal: "rgba(60, 60, 67, 0.55)"
      ha-color-fill-disabled-loud-resting: "rgba(142, 142, 147, 0.22)"
      ha-color-on-disabled-loud: "rgba(60, 60, 67, 0.65)"
      ha-color-on-disabled-quiet: "rgba(60, 60, 67, 0.50)"
      ha-color-fill-neutral-quiet-resting: "#FFFFFF"
      ha-color-fill-neutral-quiet-hover: "#F9F9FB"
      ha-color-fill-neutral-quiet-active: "#E5F1FF"
      ha-color-fill-neutral-normal-resting: "#F9F9FB"
      ha-color-fill-neutral-normal-hover: "#FFFFFF"
      ha-color-fill-neutral-normal-active: "#E5F1FF"
      ha-color-fill-danger-normal-resting: "rgba(255, 59, 48, 0.15)"
      ha-color-fill-danger-normal-hover: "rgba(255, 59, 48, 0.22)"
      ha-color-fill-danger-normal-active: "rgba(255, 59, 48, 0.28)"
      ha-color-on-danger-normal: "#FF3B30"
      ha-color-fill-warning-normal-resting: "rgba(255, 204, 0, 0.15)"
      ha-color-fill-warning-normal-hover: "rgba(255, 204, 0, 0.22)"
      ha-color-fill-warning-normal-active: "rgba(255, 204, 0, 0.28)"
      ha-color-on-warning-normal: "#8A5A00"
      ha-tooltip-background-color: "#F9F9FB"
      ha-tooltip-text-color: "#1C1C1E"

      # HA-Grundgerüst / Abstände, Rundungen, Schatten & Rahmen
      border-color: "rgba(0, 0, 0, 0.05)"
      border-radius: "12px"
      box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      divider-color: "rgba(89, 89, 90, 0.1)"
      outline-color: "rgba(0, 0, 0, 0.12)"
      outline-variant-color: "#C6C6C8"
      outline-hover-color: "rgba(0, 0, 0, 0.24)"
      ha-line-height-condensed: "1.25"
      ha-line-height-expanded: "1.35"
      ha-line-height-normal: "1.5"

      # HA-Grundgerüst / Schrift & Typografie
      primary-font-family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-body: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-heading: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-longform: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-code: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      mdc-typography-font-family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-size-scale: "1"
      ha-font-size-2xs: "8px"
      ha-font-size-xs: "8px"
      ha-font-size-s: "12px"
      ha-font-size-m: "14px"
      ha-font-size-l: "16px"
      ha-font-size-xl: "18px"
      ha-font-size-2xl: "20px"
      ha-font-size-3xl: "22px"
      ha-font-size-4xl: "24px"
      ha-font-weight-light: "300"
      ha-font-weight-normal: "400"
      ha-font-weight-body: "400"
      ha-font-weight-medium: "500"
      ha-font-weight-heading: "500"
      ha-font-weight-action: "500"
      ha-font-weight-bold: "700"

      # HA-Grundgerüst / RGB-Hilfswerte
      rgb-primary-color: "91, 182, 190"
      rgb-accent-color: "91, 182, 190"
      rgb-primary-text-color: "68, 77, 92"
      rgb-secondary-text-color: "85, 103, 122"
      rgb-card-background-color: "247, 250, 251"
      rgb-primary-background-color: "242, 242, 247"
      rgb-blue-color: "0, 122, 255"
      rgb-orange-color: "255, 149, 0"
      rgb-state-switch-color: "0, 122, 255"
      rgb-state-light-color: "0, 122, 255"
      rgb-state-cover-color: "0, 122, 255"
      rgb-state-fan-color: "0, 122, 255"
      rgb-state-media_player-color: "0, 122, 255"

      # HA-Grundgerüst / Graphen & Energie
      graph-color-1: "#ff9300"
      graph-color-2: "#007AFF"
      graph-color-3: "#34C759"
      graph-color-4: "#AF52DE"
      graph-color-5: "#FF3B30"
      graph-color-6: "#5AC8FA"
      graph-color-7: "#00C7BE"
      graph-color-8: "#FF2D55"
      graph-color-9: "#FF6B22"
      graph-color-10: "#5856D6"
      graph-color-11: "#A3D977"
      graph-color-12: "#FFCC00"
      graph-color-13: "#AF52DE"
      graph-color-14: "#8E6E53"
      color-1: "#ff9300"
      color-2: "#007AFF"
      color-3: "#34C759"
      color-4: "#AF52DE"
      color-5: "#FF3B30"
      color-6: "#5AC8FA"
      color-7: "#00C7BE"
      color-8: "#FF2D55"
      color-9: "#FF6B22"
      color-10: "#5856D6"
      color-11: "#A3D977"
      color-12: "#FFCC00"
      color-13: "#AF52DE"
      color-14: "#8E6E53"
      energy-grid-consumption-color: "#007AFF"
      energy-grid-return-color: "#AF52DE"
      energy-solar-color: "#ff9300"
      energy-non-fossil-color: "#34C759"
      energy-battery-out-color: "#00C7BE"
      energy-battery-in-color: "#AF52DE"
      energy-gas-color: "#FF3B30"
      energy-water-color: "#5AC8FA"

      # Bubble Card / Karten & Hintergründe
      bubble-card-background-color: "#FEFFFF"
      bubble-main-buttons-background-color: "#FEFFFF"
      bubble-secondary-background-color: "#F9F9FB"
      bubble-icon-background-color: "#F9F9FB"
      bubble-icon-color: "#3C3C43"
      bubble-name-color: "#3C3C43"
      bubble-state-color: "#3C3C43"
      bubble-accent-color: "#5BB6BE"
      bubble-active-color: "#5BB6BE"
      bubble-toggle-color: "#5BB6BE"
      bubble-line-background-color: "rgba(255, 255, 255, 1)"
      bubble-border: "1px solid rgba(0, 0, 0, 0.05)"
      bubble-border-color: "rgba(0, 0, 0, 0.05)"
      bubble-border-radius: "12px"
      bubble-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      bubble-card-border-radius: "12px"
      bubble-select-border-radius: "12px"
      bubble-icon-border-radius: "14px"

      # Bubble Card / Buttons
      bubble-button-background-color: "#FFFFFF"
      bubble-button-active-background-color: "#5BB6BE"
      bubble-button-icon-color: "#5BB6BE"
      bubble-button-active-icon-color: "#FFFFFF"
      bubble-button-text-color: "#1C1C1E"
      bubble-button-active-text-color: "#FFFFFF"
      bubble-button-border-radius: "12px"
      bubble-button-card-background-color: "#FFFFFF"
      bubble-button-main-background-color: "#FFFFFF"
      bubble-button-active-color: "#5BB6BE"

      # Bubble Card / Sub-Buttons
      bubble-sub-button-background-color: "#F9F9FB"
      bubble-sub-button-active-background-color: "#007AFF"
      bubble-sub-button-icon-color: "#5BB6BE"
      bubble-sub-button-active-icon-color: "#FFFFFF"
      bubble-sub-button-text-color: "#3C3C43"
      bubble-sub-button-active-text-color: "#FFFFFF"
      bubble-sub-button-border-radius: "14px"
      bubble-sub-button-box-shadow: "0 4px 10px rgba(60,60,67,.16)"
      bubble-sub-buttons-main-background-color: "#FFFFFF"

      # Bubble Card / Separator
      bubble-separator-background-color: "#FFFFFF"
      bubble-separator-icon-background-color: "#F9F9FB"
      bubble-separator-icon-color: "#5BB6BE"
      bubble-separator-line-color: "rgba(0, 0, 0, 0.12)"
      bubble-separator-name-color: "#1C1C1E"
      bubble-separator-text-color: "#1C1C1E"
      bubble-separator-border-radius: "12px"

      # Bubble Card / Popup & Dialog
      bubble-pop-up-background-color: "#F2F2F7"
      bubble-pop-up-backdrop-filter: "blur(18px)"
      bubble-pop-up-border-radius: "12px"
      bubble-pop-up-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      dialog-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      more-info-header-background: "#F9F9FB"
      more-info-header-color: "#1C1C1E"
      popup-border-radius: "12px"
      ha-dialog-scrim-backdrop-filter: "blur(10px)"
      ha-dialog-surface-background: "rgba(242, 242, 247, 1)"
      mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.35)"

      # Bubble Card / Horizontal Buttons Stack
      bubble-horizontal-buttons-stack-background-color: "#FFFFFF"
      bubble-horizontal-buttons-stack-button-background-color: "#F9F9FB"
      bubble-horizontal-buttons-stack-button-icon-color: "#3C3C43"
      bubble-horizontal-buttons-stack-button-text-color: "#1C1C1E"
      bubble-horizontal-buttons-stack-border-radius: "12px"
      bubble-horizontal-buttons-stack-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"

      # Bubble Card / Climate
      bubble-climate-background-color: "#FFFFFF"
      bubble-climate-main-background-color: "#FFFFFF"
      bubble-climate-button-background-color: "#F9F9FB"
      bubble-climate-button-icon-color: "#3C3C43"
      bubble-climate-border-radius: "12px"
      bubble-climate-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"
      bubble-climate-icon-border-radius: "32px"

      # Bubble Card / Cover
      bubble-cover-background-color: "#FFFFFF"
      bubble-cover-main-background-color: "#FFFFFF"
      bubble-cover-button-background-color: "#F9F9FB"
      bubble-cover-button-icon-color: "#3C3C43"
      bubble-cover-border-radius: "12px"
      bubble-cover-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"

      # Bubble Card / Media Player
      bubble-media-player-background-color: "#FFFFFF"
      bubble-media-player-main-background-color: "#FFFFFF"
      bubble-media-player-button-background-color: "#F9F9FB"
      bubble-media-player-button-icon-color: "#3C3C43"
      bubble-media-player-border-radius: "12px"
      bubble-media-player-box-shadow: "0 36px 60px -22px rgba(40, 30, 10, 0.32),0 18px 30px -10px rgba(40, 30, 10, 0.18),0 6px 12px -3px rgba(40, 30, 10, 0.1),inset 0 2px 0 rgba(255, 255, 255, 0.95),inset 0 -3px 5px rgba(60, 50, 30, 0.2),inset 1px 0 0 rgba(255, 255, 255, 0.8),inset -1px 0 0 rgba(120, 110, 90, 0.25)"

      # Mushroom / Karten & Hintergründe
      mush-card-background: "#FEFFFF"
      mush-control-background-color: "#F9F9FB"
      mush-card-primary-color: "#444D5C"
      mush-card-secondary-color: "#55677A"
      mush-title-color: "#444D5C"
      mush-subtitle-color: "#55677A"

      # Mushroom / Icons
      mush-icon-background-color: "#F9F9FB"
      mush-icon-color: "#3C3C43"
      mush-icon-active-color: "#5BB6BE"

      # Mushroom / Toggle
      mush-toggle-color: "#5BB6BE"
      mush-toggle-background-color: "#D1D1D6"

      # Mushroom / Slider
      mush-slider-color: "#5BB6BE"
      mush-slider-track-color: "#D1D1D6"
      mush-slider-background-color: "#F9F9FB"

      # Mushroom / Chips
      mush-chip-background: "#FFFFFF"
      mush-chip-active-background: "#F9F9FB"
      mush-chip-color: "#1C1C1E"
      mush-chip-icon-color: "#5BB6BE"
      mush-chip-active-color: "#5BB6BE"
      mush-chip-active-icon-color: "#5BB6BE"
      mush-chip-border-color: "#C6C6C8"
      mush-chip-border-radius: "16px"
      mush-chip-font-size: "12px"

      # Mushroom / RGB-Hilfswerte
      mush-rgb-primary-text-color: "68, 77, 92"
      mush-rgb-secondary-text-color: "85, 103, 122"
      mush-rgb-state-switch: "0, 122, 255"
      mush-rgb-state-light: "0, 122, 255"
      mush-rgb-state-cover: "0, 122, 255"
      mush-rgb-state-entity: "91, 182, 190"
      mush-rgb-state-fan: "0, 122, 255"
      mush-rgb-state-media-player: "0, 122, 255"
      mush-rgb-state-vacuum: "0, 122, 255"
      mush-rgb-success: "52, 199, 89"
      mush-rgb-warning: "255, 204, 0"
      mush-rgb-danger: "255, 59, 48"
      mush-rgb-disabled: "142, 142, 147"
      mush-rgb-info: "0, 122, 255"

      # Card-mod & Generator
      card-mod-theme: "hatg"
      card-mod-card-yaml: |
        /* Karte */
          ha-card {
            --bubble-main-background-color: var(--bubble-main-buttons-background-color, var(--card-background-color));
            --bubble-secondary-background-color: var(--bubble-secondary-background-color, var(--secondary-background-color));
            --bubble-icon-background-color: var(--bubble-icon-background-color, var(--secondary-background-color));
            --bubble-icon-color: var(--bubble-icon-color, var(--accent-color));
            --bubble-accent-color: var(--bubble-accent-color, var(--accent-color));
            --bubble-name-color: var(--bubble-name-color, var(--primary-text-color));
            --bubble-state-color: var(--bubble-state-color, var(--secondary-text-color));
            --bubble-border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px));
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--card-background-color))) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
            -webkit-backdrop-filter: var(--card-backdrop-blur, none) !important;
            backdrop-filter: var(--card-backdrop-blur, none) !important;
          }


          ha-card:has(.bubble-separator) {
            box-shadow: none !important;
          }
      card-mod-root-yaml: |
        /* Karte */
          .bubble-container,
          .bubble-card,
          .bubble-button-card-container,
          .bubble-media-player,
          .bubble-media-player-container,
          .bubble-cover-card-container,
          .bubble-climate-card-container,
          .bubble-horizontal-buttons-stack-card-container,
          .bubble-pop-up,
          .bubble-pop-up-container {
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--card-background-color))) !important;
            -webkit-backdrop-filter: var(--card-backdrop-blur, none) !important;
            backdrop-filter: var(--card-backdrop-blur, none) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
            -webkit-mask-image: -webkit-radial-gradient(white, black);
          }

          .bubble-background {
            border-radius: inherit !important;
            overflow: hidden !important;
          }

          .bubble-button-background {
            opacity: 0 !important;
          }

          .bubble-icon-container,
          .bubble-icon-wrapper,
          .bubble-climate-icon-container,
          .bubble-cover-icon-container,
          .bubble-media-player-icon-container {
            border-radius: var(--bubble-icon-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-icon,
          .bubble-icon-container ha-icon,
          .bubble-icon-wrapper ha-icon,
          .bubble-climate-icon-container ha-icon,
          .bubble-cover-icon-container ha-icon,
          .bubble-media-player-icon-container ha-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-name,
          .bubble-button-card-container .name,
          .bubble-media-player .name,
          .bubble-cover-card-container .name,
          .bubble-climate-card-container .name {
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            font-size: var(--bubble-name-font-size, 14px) !important;
            font-weight: var(--bubble-name-font-weight, 500) !important;
          }

          .bubble-state,
          .bubble-secondary,
          .bubble-media-player .state,
          .bubble-cover-card-container .state,
          .bubble-climate-card-container .state {
            color: var(--bubble-state-color, var(--secondary-text-color)) !important;
            font-size: var(--bubble-state-font-size, 12px) !important;
          }

          /* Sub-Buttons */
          .bubble-sub-button,
          .bubble-sub-button-container,
          .bubble-sub-button-background,
          .bubble-climate-button,
          .bubble-cover-button,
          .bubble-media-player-button {
            border-radius: var(--bubble-sub-button-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-sub-button-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-sub-button-text-color, var(--bubble-state-color, var(--secondary-text-color))) !important;
            box-shadow: var(--bubble-sub-button-box-shadow, var(--bubble-box-shadow, none)) !important;
            border: 0 !important;
          }

          .bubble-sub-button ha-icon,
          .bubble-sub-button-container ha-icon,
          .bubble-climate-button ha-icon,
          .bubble-cover-button ha-icon,
          .bubble-media-player-button ha-icon,
          .bubble-horizontal-buttons-stack-card-container .bubble-icon,
          .bubble-horizontal-buttons-stack-card-container ha-icon {
            color: var(--bubble-sub-button-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          /* Schalter, Toggle & Slider */
          .bubble-range,
          .bubble-range-slider,
          .bubble-slider-container,
          .bubble-slider-background,
          .bubble-media-player-slider-background,
          .bubble-cover-slider-background {
            border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--slider-track-color, var(--divider-color)) !important;
            overflow: hidden !important;
          }

          .bubble-range-fill,
          .bubble-slider-fill,
          .bubble-slider-active,
          .bubble-media-player-slider-fill,
          .bubble-cover-slider-fill {
            background: var(--slider-color, var(--accent-color)) !important;
          }

          /* Climate */
          .bubble-climate-card-container {
            border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-climate-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Cover */
          .bubble-cover-card-container {
            border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-cover-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-cover-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Media Player */
          .bubble-media-player {
            border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-media-player-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Horizontal Buttons Stack */
          .bubble-horizontal-buttons-stack-card-container {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-button,
          .bubble-horizontal-buttons-stack-card-container .bubble-background-color,
          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background-color {
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            background-color: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            opacity: 1 !important;
          }

          /* Separator */
          .bubble-separator {
            border-radius: var(--bubble-separator-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--bubble-separator-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
            box-shadow: none !important;
          }

          ha-card:has(.bubble-separator) {
            box-shadow: none !important;
          }

          .bubble-separator .bubble-icon-container {
            background: var(--bubble-separator-icon-background-color, var(--bubble-icon-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-separator-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          .bubble-separator .bubble-icon-container ha-icon,
          .bubble-separator .bubble-icon {
            color: var(--bubble-separator-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          .bubble-separator .name {
            color: var(--bubble-separator-name-color, var(--bubble-name-color, var(--primary-text-color))) !important;
          }

          .bubble-separator .state,
          .bubble-separator .bubble-secondary {
            color: var(--bubble-separator-text-color, var(--bubble-state-color, var(--secondary-text-color))) !important;
          }

          .bubble-line {
            background: var(--bubble-separator-line-color, var(--divider-color)) !important;
          }

          /* Popup & Dialog */
          .bubble-pop-up,
          .bubble-pop-up-background,
          .bubble-pop-up-container {
            border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--bubble-pop-up-background-color, var(--primary-background-color)) !important;
            box-shadow: var(--bubble-pop-up-box-shadow, var(--bubble-box-shadow, none)) !important;
            backdrop-filter: var(--bubble-pop-up-backdrop-filter, blur(16px)) !important;
          }

          .bubble-pop-up .bubble-button-card-container,
          .bubble-pop-up-container .bubble-button-card-container {
            background: var(--bubble-button-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Status */
          .bubble-icon-container {
            transition: box-shadow .3s ease-in-out;
          }
          .is-off .bubble-icon-container {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25),
                        0 1px 2px rgba(0, 0, 0, 0.15) !important;
          }
          .is-on .bubble-icon-container {
            box-shadow: 0 0 10px 2px rgba(var(--rgb-accent-color), 0.55),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          }
          .is-on ha-icon.bubble-main-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
            filter: drop-shadow(0 0 4px rgba(var(--rgb-accent-color), 0.7));
          }

          /* Mushroom */
          mushroom-shape-icon {
            --icon-color: var(--mush-icon-color, var(--bubble-icon-color, var(--accent-color)));
            --shape-color: var(--mush-icon-background-color, var(--bubble-icon-background-color, var(--secondary-background-color)));
            --icon-border-radius: var(--bubble-icon-border-radius, 50%);
          }
      card-backdrop-blur: "none"

      # Importierte Zusatzwerte (von HATG nicht erkannt)
      app-header-backdrop-filter: "blur(8px) saturate(1.1)"
      app-header-edit-background-color: "rgba(30, 33, 54, 0.8)"
      app-header-edit-text-color: "rgba(234, 235, 238, 0.98)"
      app-theme-color: "rgb(0, 0, 0)"

    dark:
      # Grundfarben & Text / Grundfarben
      accent-color: "#5BB6BE"
      primary-color: "#5BB6BE"
      dark-primary-color: "#3E7C81"
      light-primary-color: "#D1EBED"
      disabled-color: "#636366"
      error-color: "#FF4A00"
      warning-color: "#FFC80A"
      success-color: "#30B258"
      info-color: "#5BB6BE"
      red-color: "#FF453A"
      green-color: "#30B258"
      blue-color: "#0A84FF"
      orange-color: "#FF9F0A"
      yellow-color: "#FFD60A"
      purple-color: "#BF5AF2"
      pink-color: "#FF375F"
      cyan-color: "#32ADE6"
      grey-color: "#C7C7CC"
      deep-purple-color: "#6E41AB"
      indigo-color: "#3F51B5"
      light-blue-color: "#03A9F4"
      teal-color: "#009688"
      light-green-color: "#8BC34A"
      lime-color: "#CDDC39"
      amber-color: "#FFC107"
      deep-orange-color: "#FF6F22"
      brown-color: "#795548"
      light-grey-color: "#BDBDBD"
      dark-grey-color: "#606060"
      blue-grey-color: "#607D8B"
      black-color: "#000000"
      white-color: "#FFFFFF"
      printer-cyan-color: "#33C3FF"
      printer-magenta-color: "#FF3EA8"
      printer-yellow-color: "#FFE14D"

      # Grundfarben & Text / Text
      primary-text-color: "#D5D5D5"
      secondary-text-color: "#5BB6BE"
      text-primary-color: "#000000"
      disabled-text-color: "#636366"

      # HA-Grundgerüst / Card
      card-background-color: "#455565"
      ha-card-background: "#455565"
      ha-card-background-color: "#455565"
      wa-color-surface-raised: "#455565"
      ha-card-border-color: "rgba(0, 0, 0, 0.05)"
      ha-card-border-radius: "12px"
      ha-card-border-width: "1px"
      ha-card-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      table-row-background-color: "#29323F"
      table-row-alternative-background-color: "#455565"

      # HA-Grundgerüst / Hintergründe
      primary-background-color: "#29323F"
      background-color: "#29323F"
      lovelace-background: "linear-gradient(270deg, #5BB6BE, rgba(69, 85, 101, 1))      "
      secondary-background-color: "#455565"
      glass-effect-style: "off"
      background-style: "custom"

      # HA-Grundgerüst / Theme
      mdc-theme-background: "#29323F"
      mdc-theme-surface: "#1C1C1E"
      mdc-theme-on-surface: "#F2F2F7"

      # HA-Grundgerüst / Header
      app-header-background-color: "rgba(69, 85, 101, 0)"
      app-header-text-color: "#D5D5D5"
      app-toolbar-background-color: "#455565"
      toolbar-background-color: "rgba(69, 85, 101, 0.1)"
      app-toolbar-text-color: "#D5D5D5"
      toolbar-text-color: "#D5D5D5"

      # HA-Grundgerüst / App Drawer
      app-drawer-background-color: "#29323F"
      app-drawer-text-color: "#C7C7CC"
      app-drawer-icon-color: "#ff9300"

      # HA-Grundgerüst / Sidebar
      sidebar-background-color: "rgba(69, 85, 101, 0)"
      sidebar-selected-background-color: "#d5d5d5"
      sidebar-text-color: "#C7C7CC"
      sidebar-icon-color: "rgba(225, 225, 225, 0.6)"
      sidebar-selected-text-color: "#d5d5d5"
      sidebar-selected-icon-color: "#d5d5d5"

      # HA-Grundgerüst / Status, Icons & Entitäten
      state-icon-color: "#C0C0C0"
      state-icon-active-color: "#5BB6BE"
      state-icon-unavailable-color: "#636366"
      state-active-color: "#5BB6BE"
      state-inactive-color: "#C0C0C0"
      state-unavailable-color: "#636366"
      state-on-color: "#30D158"
      state-off-color: "#C0C0C0"
      state-light-color: "#5BB6BE"
      state-light-active-color: "#5BB6BE"
      state-light-on-color: "#5BB6BE"
      state-switch-color: "#5BB6BE"
      state-switch-active-color: "#5BB6BE"
      state-switch-on-color: "#5BB6BE"
      state-climate-cool-color: "#5BB6BE"
      state-climate-heat-color: "#ff2600"
      state-climate-auto-color: "#ffd478"
      state-climate-dry-color: "#5BB6BE"
      state-climate-fan_only-color: "#32ADE6"
      state-climate-heat_cool-color: "#FFC107"
      state-cover-color: "#5BB6BE"
      state-cover-active-color: "#929000"
      state-cover-open-color: "#929000"
      state-cover-closed-color: "#ff2600"
      state-fan-color: "#5BB6BE"
      state-fan-active-color: "#5BB6BE"
      state-media_player-color: "#5BB6BE"
      state-media_player-active-color: "#5BB6BE"
      state-vacuum-color: "#5BB6BE"
      state-vacuum-active-color: "#5BB6BE"
      state-vacuum-error-color: "#FF453A"
      state-lock-locked-color: "#ff2600"
      state-lock-locking-color: "#ff2600"
      state-lock-unlocked-color: "#929000"
      state-lock-unlocking-color: "#929000"
      state-lock-jammed-color: "#FF453A"
      state-lock-open-color: "#FF453A"
      state-lock-opening-color: "#5BB6BE"
      state-alarm_control_panel-triggered-color: "#ff2600"
      state-alarm-triggered-color: "#ff2600"
      state-alarm_control_panel-armed_home-color: "#ffd478"
      state-alarm_control_panel-armed_away-color: "#ffd478"
      state-alarm-armed-color: "#ffd478"
      state-alarm_control_panel-disarmed-color: "#ff9300"
      state-alarm-disarmed-color: "#ff9300"
      state-alarm_control_panel-armed_custom_bypass-color: "#30D158"
      state-alarm_control_panel-armed_night-color: "#30D158"
      state-alarm_control_panel-armed_vacation-color: "#30D158"
      state-alarm_control_panel-arming-color: "#5BB6BE"
      state-alarm_control_panel-disarming-color: "#5BB6BE"
      state-alarm_control_panel-pending-color: "#5BB6BE"
      state-alert-off-color: "#5BB6BE"
      state-alert-on-color: "#FF453A"
      state-binary_sensor-active-color: "#5BB6BE"
      state-binary_sensor-battery-on-color: "#FF453A"
      state-binary_sensor-carbon_monoxide-on-color: "#FF453A"
      state-binary_sensor-gas-on-color: "#FF453A"
      state-binary_sensor-heat-on-color: "#FF453A"
      state-binary_sensor-lock-on-color: "#FF453A"
      state-binary_sensor-moisture-on-color: "#FF453A"
      state-binary_sensor-problem-on-color: "#FF453A"
      state-binary_sensor-safety-on-color: "#FF453A"
      state-binary_sensor-smoke-on-color: "#FF453A"
      state-binary_sensor-sound-on-color: "#FF453A"
      state-binary_sensor-tamper-on-color: "#FF453A"
      state-device_tracker-active-color: "#5BB6BE"
      state-device_tracker-home-color: "#30D158"
      state-humidifier-on-color: "#5BB6BE"
      state-lawn_mower-active-color: "#009688"
      state-lawn_mower-error-color: "#FF453A"
      state-person-active-color: "#5BB6BE"
      state-person-home-color: "#30D158"
      state-plant-active-color: "#FF453A"
      state-siren-active-color: "#FF453A"
      state-sun-above_horizon-color: "#FFC107"
      state-sun-below_horizon-color: "#3F51B5"
      state-update-active-color: "#5BB6BE"
      state-valve-active-color: "#5BB6BE"
      state-water_heater-eco-color: "#30D158"
      state-water_heater-electric-color: "#5BB6BE"
      state-water_heater-gas-color: "#5BB6BE"
      state-water_heater-heat_pump-color: "#5BB6BE"
      state-water_heater-high_demand-color: "#FF6F22"
      state-water_heater-performance-color: "#FF6F22"
      state-weather-clear_night-color: "#6E41AB"
      state-weather-cloudy-color: "#BDBDBD"
      state-weather-exceptional-color: "#FF453A"
      state-weather-fog-color: "#C7C7CC"
      state-weather-hail-color: "#32ADE6"
      state-weather-lightning_rainy-color: "#CDDC39"
      state-weather-lightning-color: "#FFD60A"
      state-weather-partlycloudy-color: "#607D8B"
      state-weather-pouring-color: "#3F51B5"
      state-weather-rainy-color: "#5BB6BE"
      state-weather-snowy_rainy-color: "#03A9F4"
      state-weather-snowy-color: "#C0E0FF"
      state-weather-sunny-color: "#FFC107"
      state-weather-windy_variant-color: "#30D158"
      state-weather-windy-color: "#30D158"
      state-battery-low-color: "#ff2600"
      state-sensor-battery-high-color: "#30D158"
      state-sensor-battery-medium-color: "#5BB6BE"
      state-sensor-battery-low-color: "#FF453A"
      label-badge-background-color: "#29323F"
      label-badge-text-color: "rgba(225, 225, 225, 0.8)"
      label-badge-red: "#FF453A"
      label-badge-blue: "#5BB6BE"
      label-badge-green: "#30D158"
      label-badge-yellow: "#FFD60A"
      state-battery-alert-color: "#ff2600"

      # HA-Grundgerüst / Schalter, Toggle & Slider
      ha-control-switch-color: "#5BB6BE"
      ha-control-switch-checked-color: "#5BB6BE"
      ha-control-switch-unchecked-color: "#3A3A3C"
      ha-switch-background-color: "#3A3A3C"
      ha-switch-background-color-hover: "#3A3A3C"
      ha-switch-border-color: "rgba(99, 99, 102, 1)"
      ha-switch-thumb-background-color: "#636366"
      ha-switch-thumb-background-color-hover: "#636366"
      ha-switch-thumb-border-color: "rgba(99, 99, 102, 1)"
      ha-switch-thumb-border-color-hover: "rgba(0,0,0,0)"
      ha-switch-checked-background-color: "#3A3A3C"
      ha-switch-checked-background-color-hover: "#D1EBED"
      ha-switch-checked-border-color: "rgba(91, 182, 190, 1)"
      ha-switch-checked-thumb-background-color: "#5BB6BE"
      ha-switch-checked-thumb-background-color-hover: "#5BB6BE"
      ha-switch-checked-thumb-border-color: "rgba(91, 182, 190, 1)"
      ha-switch-checked-thumb-border-color-hover: "rgba(0,0,0,0)"
      control-slider-color: "#5BB6BE"
      slider-color: "#5BB6BE"
      slider-secondary-color: "#1F3A5F"
      slider-track-color: "#48484A"

      # HA-Grundgerüst / Buttons & Chips
      control-button-background-color: "#2C2C2E"
      control-button-icon-color: "#5BB6BE"
      control-button-border-radius: "12px"

      # HA-Grundgerüst / Eingaben & Auswahlfelder
      input-background-color: "#29323F"
      input-fill-color: "#2C2C2E"
      input-disabled-fill-color: "rgba(44, 44, 46, 0.50)"
      input-disabled-ink-color: "rgba(255, 255, 255, 0.37)"
      input-disabled-label-ink-color: "#636366"
      input-disabled-line-color: "rgba(255, 255, 255, 0.06)"
      input-dropdown-icon-color: "rgba(255, 255, 255, 0.54)"
      input-hover-line-color: "rgba(255, 255, 255, 0.87)"
      input-idle-line-color: "rgba(255, 255, 255, 0.42)"
      input-ink-color: "rgba(255, 255, 255, 0.87)"
      input-label-ink-color: "rgba(255, 255, 255, 0.6)"
      input-outlined-disabled-border-color: "rgba(255, 255, 255, 0.06)"
      mdc-select-idle-line-color: "#38383A"
      mdc-select-dropdown-icon-color: "#C7C7CC"
      mdc-select-hover-line-color: "#38383A"
      mdc-text-field-idle-line-color: "#38383A"
      mdc-text-field-hover-line-color: "#38383A"
      ha-color-form-background: "#29323F"
      ha-color-form-background-hover: "#2C2C2E"
      ha-color-form-background-disabled: "rgba(44, 44, 46, 0.50)"

      # HA-Grundgerüst / Material, Paper & MDC
      mdc-theme-primary: "#5BB6BE"
      mdc-theme-secondary: "#5BB6BE"
      mdc-theme-on-primary: "#000000"
      md-sys-color-primary: "#5BB6BE"
      md-sys-color-on-primary: "#5BB6BE"
      md-sys-color-primary-container: "#1F3A5F"
      md-sys-color-on-primary-container: "#212121"
      md-sys-color-on-surface: "#feffff"
      ha-on-surface-color: "#feffff"
      md-radio-selected-icon-color: "#5BB6BE"
      mdc-radio-unchecked-color: "#C7C7CC"

      # HA-Grundgerüst / HA 2026 / Web Awesome
      ha-color-fill-primary-normal-resting: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-primary-normal-hover: "rgba(91, 182, 190, 0.25)"
      ha-color-fill-primary-quiet-resting: "rgba(91, 182, 190, 0.08)"
      ha-color-fill-primary-quiet-hover: "rgba(91, 182, 190, 0.15)"
      ha-color-fill-disabled-normal-resting: "rgba(99, 99, 102, 0.08)"
      ha-color-on-disabled-normal: "rgba(199, 199, 204, 0.50)"
      ha-color-fill-disabled-loud-resting: "rgba(99, 99, 102, 0.22)"
      ha-color-on-disabled-loud: "rgba(199, 199, 204, 0.55)"
      ha-color-on-disabled-quiet: "rgba(199, 199, 204, 0.50)"
      ha-color-fill-neutral-quiet-resting: "#1C1C1E"
      ha-color-fill-neutral-quiet-hover: "#2C2C2E"
      ha-color-fill-neutral-quiet-active: "#1C1C1E"
      ha-color-fill-neutral-normal-resting: "#2C2C2E"
      ha-color-fill-neutral-normal-hover: "#1C1C1E"
      ha-color-fill-neutral-normal-active: "#2C2C2E"
      ha-color-fill-danger-normal-resting: "rgba(255, 69, 58, 0.15)"
      ha-color-fill-danger-normal-hover: "rgba(255, 69, 58, 0.22)"
      ha-color-fill-danger-normal-active: "rgba(255, 69, 58, 0.28)"
      ha-color-on-danger-normal: "#F2F2F7"
      ha-color-fill-warning-normal-resting: "rgba(255, 214, 10, 0.15)"
      ha-color-fill-warning-normal-hover: "rgba(255, 214, 10, 0.22)"
      ha-color-fill-warning-normal-active: "rgba(255, 214, 10, 0.28)"
      ha-color-on-warning-normal: "#F2F2F7"
      ha-tooltip-background-color: "#2C2C2E"
      ha-tooltip-text-color: "#F2F2F7"

      # HA-Grundgerüst / Abstände, Rundungen, Schatten & Rahmen
      border-color: "rgba(0, 0, 0, 0.05)"
      border-radius: "12px"
      box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      divider-color: "rgba(225, 225, 225, 0.02)"
      outline-color: "rgba(225, 225, 225, 0.12)"
      outline-variant-color: "#38383A"
      outline-hover-color: "rgba(225, 225, 225, 0.24)"
      ha-line-height-condensed: "1.25"
      ha-line-height-expanded: "1.35"
      ha-line-height-normal: "1.5"

      # HA-Grundgerüst / Schrift & Typografie
      primary-font-family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-body: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-heading: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-longform: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-family-code: "Roboto, Arial, sans-serif"
      mdc-typography-font-family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', sans-serif"
      ha-font-size-scale: "1"
      ha-font-size-2xs: "8px"
      ha-font-size-xs: "8px"
      ha-font-size-s: "12px"
      ha-font-size-m: "14px"
      ha-font-size-l: "16px"
      ha-font-size-xl: "18px"
      ha-font-size-2xl: "20px"
      ha-font-size-3xl: "22px"
      ha-font-size-4xl: "24px"
      ha-font-weight-light: "300"
      ha-font-weight-normal: "400"
      ha-font-weight-body: "400"
      ha-font-weight-medium: "500"
      ha-font-weight-heading: "600"
      ha-font-weight-action: "500"
      ha-font-weight-bold: "700"

      # HA-Grundgerüst / RGB-Hilfswerte
      rgb-primary-color: "91, 182, 190"
      rgb-accent-color: "91, 182, 190"
      rgb-primary-text-color: "213, 213, 213"
      rgb-secondary-text-color: "91, 182, 190"
      rgb-card-background-color: "69, 85, 101"
      rgb-primary-background-color: "41, 50, 63"
      rgb-blue-color: "10, 132, 255"
      rgb-orange-color: "255, 159, 10"
      rgb-state-switch-color: "91, 182, 190"
      rgb-state-light-color: "91, 182, 190"
      rgb-state-cover-color: "91, 182, 190"
      rgb-state-fan-color: "91, 182, 190"
      rgb-state-media_player-color: "91, 182, 190"

      # HA-Grundgerüst / Graphen & Energie
      graph-color-1: "#5BB6BE"
      graph-color-2: "#64D2FF"
      graph-color-3: "#30D158"
      graph-color-4: "#BF5AF2"
      graph-color-5: "#FF453A"
      graph-color-6: "#32ADE6"
      graph-color-7: "#64D2FF"
      graph-color-8: "#FF375F"
      graph-color-9: "#FF9F0A"
      graph-color-10: "#5E5CE6"
      graph-color-11: "#A3D977"
      graph-color-12: "#FFD60A"
      graph-color-13: "#BF5AF2"
      graph-color-14: "#A2845E"
      color-1: "#5BB6BE"
      color-2: "#64D2FF"
      color-3: "#30D158"
      color-4: "#BF5AF2"
      color-5: "#FF453A"
      color-6: "#32ADE6"
      color-7: "#64D2FF"
      color-8: "#FF375F"
      color-9: "#FF9F0A"
      color-10: "#5E5CE6"
      color-11: "#A3D977"
      color-12: "#FFD60A"
      color-13: "#BF5AF2"
      color-14: "#A2845E"
      energy-grid-consumption-color: "#5BB6BE"
      energy-grid-return-color: "#BF5AF2"
      energy-solar-color: "#FF9F0A"
      energy-non-fossil-color: "#30D158"
      energy-battery-out-color: "#64D2FF"
      energy-battery-in-color: "#BF5AF2"
      energy-gas-color: "#FF453A"
      energy-water-color: "#32ADE6"

      # Bubble Card / Karten & Hintergründe
      bubble-card-background-color: "#455565"
      bubble-main-buttons-background-color: "#455565"
      bubble-secondary-background-color: "#455565"
      bubble-icon-background-color: "#29323F"
      bubble-icon-color: "#5BB6BE"
      bubble-name-color: "#C0C0C0"
      bubble-state-color: "#5BB6BE"
      bubble-accent-color: "#5BB6BE"
      bubble-active-color: "#5BB6BE"
      bubble-toggle-color: "#5BB6BE"
      bubble-line-background-color: "rgba(69, 85, 101, 1)"
      bubble-border: "1px solid rgba(225, 225, 225, 0.12)"
      bubble-border-color: "rgba(0, 0, 0, 0.05)"
      bubble-border-radius: "12px"
      bubble-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      bubble-card-border-radius: "12px"
      bubble-select-border-radius: "12px"
      bubble-icon-border-radius: "50px"

      # Bubble Card / Buttons
      bubble-button-background-color: "#455565"
      bubble-button-active-background-color: "#5BB6BE"
      bubble-button-icon-color: "#C0C0C0"
      bubble-button-active-icon-color: "#5BB6BE"
      bubble-button-text-color: "#feffff"
      bubble-button-active-text-color: "#000000"
      bubble-button-border-radius: "12px"
      bubble-button-card-background-color: "#455565"
      bubble-button-main-background-color: "#455565"
      bubble-button-active-color: "#5BB6BE"

      # Bubble Card / Sub-Buttons
      bubble-sub-button-background-color: "#2C2C2E"
      bubble-sub-button-active-background-color: "#00FCFF"
      bubble-sub-button-icon-color: "#5BB6BE"
      bubble-sub-button-active-icon-color: "#000000"
      bubble-sub-button-text-color: "#C7C7CC"
      bubble-sub-button-active-text-color: "#000000"
      bubble-sub-button-border-radius: "12px"
      bubble-sub-button-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      bubble-sub-buttons-main-background-color: "#1C1C1E"

      # Bubble Card / Separator
      bubble-separator-background-color: "rgba(69, 85, 101, 1)"
      bubble-separator-icon-background-color: "#2C2C2E"
      bubble-separator-icon-color: "#5BB6BE"
      bubble-separator-line-color: "rgba(225, 225, 225, 0.12)"
      bubble-separator-name-color: "#feffff"
      bubble-separator-text-color: "#feffff"
      bubble-separator-border-radius: "12px"

      # Bubble Card / Popup & Dialog
      bubble-pop-up-background-color: "#455565"
      bubble-pop-up-backdrop-filter: "blur(18px)"
      bubble-pop-up-border-radius: "12px"
      bubble-pop-up-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      dialog-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      more-info-header-background: "rgba(69, 85, 101, 1)"
      more-info-header-color: "#F2F2F7"
      popup-border-radius: "12px"
      ha-dialog-scrim-backdrop-filter: "blur(10px)"
      ha-dialog-surface-background: "rgba(69, 85, 101, 1)"
      mdc-dialog-scrim-color: "rgba(69, 85, 101, 1)"

      # Bubble Card / Horizontal Buttons Stack
      bubble-horizontal-buttons-stack-background-color: "#455565"
      bubble-horizontal-buttons-stack-button-background-color: "#2C2C2E"
      bubble-horizontal-buttons-stack-button-icon-color: "#C7C7CC"
      bubble-horizontal-buttons-stack-button-text-color: "#F2F2F7"
      bubble-horizontal-buttons-stack-border-radius: "12px"
      bubble-horizontal-buttons-stack-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"

      # Bubble Card / Climate
      bubble-climate-background-color: "#455565"
      bubble-climate-main-background-color: "#455565"
      bubble-climate-button-background-color: "#29323F"
      bubble-climate-button-icon-color: "#C7C7CC"
      bubble-climate-border-radius: "12px"
      bubble-climate-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"
      bubble-climate-icon-border-radius: "32px"

      # Bubble Card / Cover
      bubble-cover-background-color: "#455565"
      bubble-cover-main-background-color: "#455565"
      bubble-cover-button-background-color: "#29323F"
      bubble-cover-button-icon-color: "#C7C7CC"
      bubble-cover-border-radius: "12px"
      bubble-cover-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"

      # Bubble Card / Media Player
      bubble-media-player-background-color: "#455565"
      bubble-media-player-main-background-color: "#455565"
      bubble-media-player-button-background-color: "#29323F"
      bubble-media-player-button-icon-color: "#C7C7CC"
      bubble-media-player-border-radius: "12px"
      bubble-media-player-box-shadow: "0 36px 60px -22px rgba(0, 0, 0, 0.55),0 18px 30px -10px rgba(0, 0, 0, 0.38),0 6px 12px -3px rgba(0, 0, 0, 0.28),inset 0 2px 0 rgba(143, 153, 163, 0.45),inset 0 -3px 5px rgba(27, 34, 44, 0.55),inset 1px 0 0 rgba(143, 153, 163, 0.32),inset -1px 0 0 rgba(27, 34, 44, 0.45)"

      # Mushroom / Karten & Hintergründe
      mush-card-background: "#455565"
      mush-control-background-color: "#455565"
      mush-card-primary-color: "#C0C0C0"
      mush-card-secondary-color: "#5BB6BE"
      mush-title-color: "#C0C0C0"
      mush-subtitle-color: "#5BB6BE"

      # Mushroom / Icons
      mush-icon-background-color: "#929292"
      mush-icon-color: "#C0C0C0"
      mush-icon-active-color: "#5BB6BE"

      # Mushroom / Toggle
      mush-toggle-color: "#5BB6BE"
      mush-toggle-background-color: "#48484A"

      # Mushroom / Slider
      mush-slider-color: "#5BB6BE"
      mush-slider-track-color: "#48484A"
      mush-slider-background-color: "#29323F"

      # Mushroom / Chips
      mush-chip-background: "#29323F"
      mush-chip-active-background: "#1F3A5F"
      mush-chip-color: "#F2F2F7"
      mush-chip-icon-color: "#5BB6BE"
      mush-chip-active-color: "#5BB6BE"
      mush-chip-active-icon-color: "#5BB6BE"
      mush-chip-border-color: "#38383A"
      mush-chip-border-radius: "16px"
      mush-chip-font-size: "12px"

      # Mushroom / RGB-Hilfswerte
      mush-rgb-primary-text-color: "213, 213, 213"
      mush-rgb-secondary-text-color: "91, 182, 190"
      mush-rgb-state-switch: "91, 182, 190"
      mush-rgb-state-light: "91, 182, 190"
      mush-rgb-state-cover: "91, 182, 190"
      mush-rgb-state-entity: "91, 182, 190"
      mush-rgb-state-fan: "91, 182, 190"
      mush-rgb-state-media-player: "91, 182, 190"
      mush-rgb-state-vacuum: "91, 182, 190"
      mush-rgb-success: "48, 209, 88"
      mush-rgb-warning: "255, 159, 10"
      mush-rgb-danger: "255, 69, 58"
      mush-rgb-disabled: "99, 99, 102"
      mush-rgb-info: "91, 182, 190"

      # Card-mod & Generator
      card-mod-theme: "hatg"
      card-mod-card-yaml: |
        /* Karte */
          ha-card {
            --bubble-main-background-color: var(--bubble-main-buttons-background-color, var(--card-background-color));
            --bubble-secondary-background-color: var(--bubble-secondary-background-color, var(--secondary-background-color));
            --bubble-icon-background-color: var(--bubble-icon-background-color, var(--secondary-background-color));
            --bubble-icon-color: var(--bubble-icon-color, var(--accent-color));
            --bubble-accent-color: var(--bubble-accent-color, var(--accent-color));
            --bubble-name-color: var(--bubble-name-color, var(--primary-text-color));
            --bubble-state-color: var(--bubble-state-color, var(--secondary-text-color));
            --bubble-border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px));
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--card-background-color))) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
            -webkit-backdrop-filter: var(--card-backdrop-blur, none) !important;
            backdrop-filter: var(--card-backdrop-blur, none) !important;
          }

          ha-card:has(.bubble-separator) {
            box-shadow: none !important;
          }
      card-mod-root-yaml: |
        /* Karte */
          .bubble-container,
          .bubble-card,
          .bubble-button-card-container,
          .bubble-media-player,
          .bubble-media-player-container,
          .bubble-cover-card-container,
          .bubble-climate-card-container,
          .bubble-horizontal-buttons-stack-card-container,
          .bubble-pop-up,
          .bubble-pop-up-container {
            border-radius: var(--bubble-border-radius, var(--ha-card-border-radius, 18px)) !important;
            background: var(--bubble-main-buttons-background-color, var(--ha-card-background, var(--card-background-color))) !important;
            -webkit-backdrop-filter: var(--card-backdrop-blur, none) !important;
            backdrop-filter: var(--card-backdrop-blur, none) !important;
            box-shadow: var(--bubble-box-shadow, var(--ha-card-box-shadow, none)) !important;
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            overflow: hidden !important;
            -webkit-mask-image: -webkit-radial-gradient(white, black);
          }

          .bubble-background {
            border-radius: inherit !important;
            overflow: hidden !important;
          }

          .bubble-button-background {
            opacity: 0 !important;
          }

          .bubble-icon-container,
          .bubble-icon-wrapper,
          .bubble-climate-icon-container,
          .bubble-cover-icon-container,
          .bubble-media-player-icon-container {
            border-radius: var(--bubble-icon-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-icon,
          .bubble-icon-container ha-icon,
          .bubble-icon-wrapper ha-icon,
          .bubble-climate-icon-container ha-icon,
          .bubble-cover-icon-container ha-icon,
          .bubble-media-player-icon-container ha-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
          }

          .bubble-name,
          .bubble-button-card-container .name,
          .bubble-media-player .name,
          .bubble-cover-card-container .name,
          .bubble-climate-card-container .name {
            color: var(--bubble-name-color, var(--primary-text-color)) !important;
            font-size: var(--bubble-name-font-size, 14px) !important;
            font-weight: var(--bubble-name-font-weight, 500) !important;
          }

          .bubble-state,
          .bubble-secondary,
          .bubble-media-player .state,
          .bubble-cover-card-container .state,
          .bubble-climate-card-container .state {
            color: var(--bubble-state-color, var(--secondary-text-color)) !important;
            font-size: var(--bubble-state-font-size, 12px) !important;
          }

          /* Sub-Buttons */
          .bubble-sub-button,
          .bubble-sub-button-container,
          .bubble-sub-button-background,
          .bubble-climate-button,
          .bubble-cover-button,
          .bubble-media-player-button {
            border-radius: var(--bubble-sub-button-border-radius, var(--bubble-button-border-radius, var(--bubble-border-radius, 18px))) !important;
            background: var(--bubble-sub-button-background-color, var(--bubble-secondary-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-sub-button-text-color, var(--bubble-state-color, var(--secondary-text-color))) !important;
            box-shadow: var(--bubble-sub-button-box-shadow, var(--bubble-box-shadow, none)) !important;
            border: 0 !important;
          }

          .bubble-sub-button ha-icon,
          .bubble-sub-button-container ha-icon,
          .bubble-climate-button ha-icon,
          .bubble-cover-button ha-icon,
          .bubble-media-player-button ha-icon,
          .bubble-horizontal-buttons-stack-card-container .bubble-icon,
          .bubble-horizontal-buttons-stack-card-container ha-icon {
            color: var(--bubble-sub-button-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          /* Schalter, Toggle & Slider */
          .bubble-range,
          .bubble-range-slider,
          .bubble-slider-container,
          .bubble-slider-background,
          .bubble-media-player-slider-background,
          .bubble-cover-slider-background {
            border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--slider-track-color, var(--divider-color)) !important;
            overflow: hidden !important;
          }

          .bubble-range-fill,
          .bubble-slider-fill,
          .bubble-slider-active,
          .bubble-media-player-slider-fill,
          .bubble-cover-slider-fill {
            background: var(--slider-color, var(--accent-color)) !important;
          }

          /* Climate */
          .bubble-climate-card-container {
            border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-climate-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Cover */
          .bubble-cover-card-container {
            border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-cover-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-cover-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Media Player */
          .bubble-media-player {
            border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-media-player-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Horizontal Buttons Stack */
          .bubble-horizontal-buttons-stack-card-container {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            background: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-button,
          .bubble-horizontal-buttons-stack-card-container .bubble-background-color,
          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            border-radius: var(--bubble-horizontal-buttons-stack-border-radius, var(--bubble-border-radius, 18px)) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background-color {
            border: var(--bubble-border, 1px solid var(--bubble-border-color, var(--ha-card-border-color, transparent))) !important;
          }

          .bubble-horizontal-buttons-stack-card-container .bubble-background {
            background-color: var(--bubble-horizontal-buttons-stack-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
            box-shadow: var(--bubble-horizontal-buttons-stack-box-shadow, var(--bubble-box-shadow, none)) !important;
            opacity: 1 !important;
          }

          /* Separator */
          .bubble-separator {
            border-radius: var(--bubble-separator-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--bubble-separator-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
            box-shadow: none !important;
          }

          ha-card:has(.bubble-separator) {
            box-shadow: none !important;
          }

          .bubble-separator .bubble-icon-container {
            background: var(--bubble-separator-icon-background-color, var(--bubble-icon-background-color, var(--secondary-background-color))) !important;
            color: var(--bubble-separator-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          .bubble-separator .bubble-icon-container ha-icon,
          .bubble-separator .bubble-icon {
            color: var(--bubble-separator-icon-color, var(--bubble-icon-color, var(--accent-color))) !important;
          }

          .bubble-separator .name {
            color: var(--bubble-separator-name-color, var(--bubble-name-color, var(--primary-text-color))) !important;
          }

          .bubble-separator .state,
          .bubble-separator .bubble-secondary {
            color: var(--bubble-separator-text-color, var(--bubble-state-color, var(--secondary-text-color))) !important;
          }

          .bubble-line {
            background: var(--bubble-separator-line-color, var(--divider-color)) !important;
          }

          /* Popup & Dialog */
          .bubble-pop-up,
          .bubble-pop-up-background,
          .bubble-pop-up-container {
            border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 18px)) !important;
            background: var(--bubble-pop-up-background-color, var(--primary-background-color)) !important;
            box-shadow: var(--bubble-pop-up-box-shadow, var(--bubble-box-shadow, none)) !important;
            backdrop-filter: var(--bubble-pop-up-backdrop-filter, blur(16px)) !important;
          }

          .bubble-pop-up .bubble-button-card-container,
          .bubble-pop-up-container .bubble-button-card-container {
            background: var(--bubble-button-main-background-color, var(--bubble-main-buttons-background-color, var(--card-background-color))) !important;
          }

          /* Status */
          .bubble-icon-container {
            transition: box-shadow .3s ease-in-out;
          }
          .is-off .bubble-icon-container {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25),
                        0 1px 2px rgba(0, 0, 0, 0.15) !important;
          }
          .is-on .bubble-icon-container {
            box-shadow: 0 0 10px 2px rgba(var(--rgb-accent-color), 0.55),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
          }
          .is-on ha-icon.bubble-main-icon {
            color: var(--bubble-icon-color, var(--accent-color)) !important;
            filter: drop-shadow(0 0 4px rgba(var(--rgb-accent-color), 0.7));
          }

          /* Mushroom */
          mushroom-shape-icon {
            --icon-color: var(--mush-icon-color, var(--bubble-icon-color, var(--accent-color)));
            --shape-color: var(--mush-icon-background-color, var(--bubble-icon-background-color, var(--secondary-background-color)));
            --icon-border-radius: var(--bubble-icon-border-radius, 50%);
          }
      card-backdrop-blur: "none"
12

Snapshot
Snapshot1588×830 252 KB

So sieht mein aktueller Stand des Themes aus. Hab mich dann doch für einen card-mod Hintergrund entschieden. Aber ist noch nicht fertig, geht auch noch nicht alles so wie ich es möchte.

13 
card_mod:
  style: |
    ha-card {
      background: linear-gradient(180deg, #282828 0%, #1e1e1e 50%, #121212 100%) !important;
      box-shadow: 
        inset 0 1px 0px rgba(255, 255, 255, 0.12),
        inset 1px 0px 0px rgba(255, 255, 255, 0.06),
        inset 0 -1px 1px rgba(0, 0, 0, 0.8),
        inset -1px 0px 1px rgba(0, 0, 0, 0.5),
        0 12px 24px rgba(0, 0, 0, 0.6),
        0 4px 6px rgba(0, 0, 0, 0.4) !important;
      border: 1px solid #383838 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    }

wie bekomme ich das in den Editor für bestimmte Karten, das ich das nicht mehr für jede Karte einzeln hinzufügen muss und alles über das Theme läuft. Ich habe es nicht hinbekommen, das es funktioniert.

Edit: .. hab den Code jetzt per File Editor zum Theme hinzugefügt. Funktioniert erstmal so.

14

Für einzelne HA Karten kommst du um den Cardmod in der Karde nicht herum.Die Theme ballert alles über jede Karte gleich.