Custom:decluttering-card und CSS-Styling

Dashboard/Cards/Frontend
,
1

Hallo Leute,
kann mir jemand helfen, wie man CSS-Styling ändern muss, wenn man die Templates der decluttering-card nutzt?
Konkret: Ich habe viele Karten, die etwa so aussehen:
original
Jetzt habe ich Styles für die decluttering-card erstellt, indem ich die Kartenkonfig des Originals einfach kopiert habe. Sieht dann so aus:
neu
Wie man sieht, hat der Subheader “Wohnzimmer” keinen grauen Hintergrund.
Im Original ist er so definiert:

  - type: heading
    icon: mdi:sofa
    heading: Wohnzimmer
    badges:
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.buro_kg_thermostat_luftfeuchtigkeit
        color: blue
        tap_action:
          action: more-info
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.buro_kg_thermostat_temperatur
        color: red
        tap_action:
          action: more-info
    card_mod:
      style:
        .: |
          ha-card {
            background-color: #474856 !important;

Der Style ist eine exakte Kopie:

  subtitle_template:
    card:
      type: heading
      heading: '[[subtitle]]'
      icon: '[[icon]]'
      badges:
        - type: entity
          show_state: true
          show_icon: true
          entity: '[[feuchtigkeitssensor]]'
          color: blue
          tap_action:
            action: more-info
        - type: entity
          show_state: true
          show_icon: true
          entity: '[[temperatursensor]]'
          color: red
          tap_action:
            action: more-info
      card_mod:
        style:
          .: |
            ha-card {
              background-color: #474856 !important;
            }

Und die Karte dann trivial so:

  - type: custom:decluttering-card
    template: subtitle_template
    variables:
      - subtitle: Wohnzimmer
      - icon: mdi:sofa
      - feuchtigkeitssensor: sensor.buro_kg_thermostat_luftfeuchtigkeit
      - temperatursensor: sensor.buro_kg_thermostat_temperatur

Das Styling geht auch an anderen Stellen verloren. Ich stecke fest!
Was muss man berücksichtigen, wenn man mit card-mod arbeitet?
Bin für jeden Hinweis dankbar.

2

Scheint niemand eine Antwort zu kennen. Dann muss ich es wohl selbst erkunden. Leider habe ich mit der “Navigation” von card-mod innerhalb der Kartenstruktur keine Ahnung.
Die Syntax ist ja echt kryptisch:

card_mod:
      style:
        .: |
          ha-card {

oder

    card_mod:
      style: |
        :host {
          color: red;

oder

card_mod:
  style: |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);

In der DOM-Struktur finde ich

<ha-card style.....
  #shadow-root
  <div class="container" ...

Der container soll einen grauen Hintergrund bekommen. Wie ist der “Pfad” dort hin?
Was bedeutet “#shadow-root”?
Was bedeuten “.:” bzw. “:host” und wann beginnt der Style mit “- -…”?
Beim besten Willen, das verstehe ich nicht!!!