Zeigt her eure Dashboards!

Das Dashboard sieht sehr gut aus. Da ich gerade auch an ein Dashboard für meine Lenovo Tablett arbeite, wäre ich an deinen Code sehr interessiert. Könntest du mir (evtl. per PN) deine Startseite und ein oder zwei Unterseiten schicken?
VG
Martin

gefällt mir auch sehr gut,… würde mich auch dafür interresieren

danke

Hier ist der komplette Code. Dann muss ich nicht auf jede PN antworten.

Da ich alles über Pop-ups gelöst habe, sind sämtliche Unterseiten (Heizung, Licht, Steckdosen, Kameras etc.) schon vollständig in dieser einen Datei enthalten.

Wichtig – Das musst du danach direkt anpassen:

  • Dein Benutzername (Ganz oben): In den Zeilen 3–5 steht bei users: noch ein Platzhalter. Tausche das unbedingt gegen deinen eigenen Home-Assistant-Benutzernamen aus. Sonst greift der Kiosk-Modus falsch und blendet dir die Menüs aus.

:clipboard: Benötigte HACS-Erweiterungen (Frontend):

Damit das Dashboard fehlerfrei geladen wird, musst du folgende Komponenten über HACS installiert haben:

Für das Layout & Design:

  • layout-card (für das grid-layout, das alles in Spalten anordnet)

  • bubble-card (für das Pop-up-System und die Steuerung)

  • mushroom (für die Template-Karten der Hauptübersicht)

  • button-card (wichtig für die Müllabfuhr-Logik und den Sonnenstand)

  • card-mod (für die erweiterten CSS-Farbanpassungen)

  • swipe-nav & kiosk-mode (für die saubere Tablet-Ansicht)

Für die Spezial-Karten:

  • power-flow-card-plus (für die Solarbank- & Energie-Anzeige)

  • advanced-camera-card (für den Kamera-Stream)

  • weather-chart-card (für das Wetter-Diagramm)

  • flower-card (für die Pflanzen-Ansichten)

  • template-entity-row (für die Zeilen in den Pop-ups)

  • font-clock-card & calendar-card-pro (für Uhrzeit & Kalender)


Viel Erfolg beim Anpassen!

kiosk_mode:
  user_settings:
    - users:
        - dein_benutzername
      hide_header: true
      hide_sidebar: true
      hide_overflow: true
      hide_edit_dashboard: true
swipe_nav:
  animate: fade
  transition_duration: 175
  swipe_amount: 15
  wrap: true
  prevent_default: true
views:
  - type: custom:grid-layout
    path: grid
    title: Home
    layout:
      grid-template-columns: 1fr repeat(16, 56px) 1fr
      grid-auto-rows: 5px
      grid-column-gap: 8px
      grid-row-gap: 1px
      justify-content: center
      margin: 0px 0px 0px -12px
      layout_type: grid
    cards:
      - type: custom:mushroom-template-card
        vertical: true
        view_layout:
          grid-column: 2 / span 2
          grid-row: 66 / span 20
        grid_options:
          columns: 4
          rows: 10
        icon: >-
          {% if is_state('input_boolean.klingel_ruhemodus', 'on') %}
          mdi:bell-off {% else %} mdi:bell {% endif %}
        icon_color: >-
          {% if is_state('input_boolean.klingel_ruhemodus', 'on') %} red {% else
          %} green {% endif %}
        primary: >-
          {% if is_state('input_boolean.klingel_ruhemodus', 'on') %} Klingel aus
          {% else %} Klingel an {% endif %}
        secondary: ""
        entity: input_boolean.klingel_ruhemodus
        tap_action:
          action: toggle
      - type: custom:mushroom-template-card
        primary: Heizung
        icon: mdi:heating-coil
        tap_action:
          action: navigate
          navigation_path: "#Heizung"
        color: |-
          {% if is_state('switch.heizung_shellyplus1', 'on') %}
            orange
          {% else %}
            grey
          {% endif %}
        icon_color: |-
          {% if is_state('switch.heizung_shellyplus1', 'on') %}
            orange
          {% else %}
            grey
          {% endif %}
        features_position: bottom
        view_layout:
          grid-column: 6 / span 4
          grid-row: 66 / span 20
        grid_options:
          columns: 4
          rows: 20
        vertical: true
        icon_tap_action:
          action: navigate
          navigation_path: "#Heizung"
      - type: custom:mushroom-template-card
        primary: Garten
        icon: mdi:camera
        tap_action:
          action: navigate
          navigation_path: "#gartenkamera"
        color: >-
          {% if
          is_state('automation.reolink_zu_echo_show_pro_push_video_ton_schalter',
          'on') %}
            orange
          {% else %}
            grey
          {% endif %}
        features_position: bottom
        view_layout:
          grid-column: 10 / span 4
          grid-row: 66 / span 20
        grid_options:
          columns: 4
          rows: 20
        vertical: true
        entity: camera.garten_standardauflosung
        icon_tap_action:
          action: navigate
          navigation_path: /test-2/kamera-garten
      - type: custom:mushroom-template-card
        primary: Haus
        icon: mdi:camera-account
        tap_action:
          action: navigate
          navigation_path: "#HausKamera"
        color: |-
          {% if is_state('alarm_control_panel.blink_kameras','armed_away') %}
            green
          {% else %}
            grey
          {% endif %}
        features_position: bottom
        view_layout:
          grid-column: 14 / span 4
          grid-row: 66 / span 20
        grid_options:
          columns: 4
          rows: 20
        vertical: true
        entity: alarm_control_panel.blink_kameras
        icon_tap_action:
          action: perform-action
          perform_action: script.blink_toggle
          target:
            entity_id: alarm_control_panel.blink_kameras
      - type: custom:mushroom-template-card
        primary: Lampen
        icon: mdi:lamp
        tap_action:
          action: navigate
          navigation_path: "#Lampen"
        color: |-
          {% if is_state('light.lampen', 'on') %}
            orange
          {% else %}
            grey
          {% endif %}
        features_position: bottom
        vertical: true
        view_layout:
          grid-column: 2 / span 2
          grid-row: 86 / span 20
        grid_options:
          columns: 4
          rows: 10
      - type: custom:mushroom-template-card
        primary: Steckdosen
        icon: mdi:flash
        tap_action:
          action: navigate
          navigation_path: "#Steckdosen"
        features_position: bottom
        vertical: true
        view_layout:
          grid-column: 4 / span 2
          grid-row: 86 / span 20
        grid_options:
          columns: 4
          rows: 10
        icon_color: |-
          {% if is_state('switch.computer_steckdose', 'off') or 
                is_state('switch.steckdose_hauswasserwerk', 'off') or 
                is_state('switch.steckdose_mediacenter', 'off') %}
            orange
          {% else %}
            green
          {% endif %}
      - type: custom:mushroom-template-card
        primary: Batterien
        icon: mdi:battery
        tap_action:
          action: navigate
          navigation_path: "#Batterien"
        color: "{{ states('sensor.zustand_batterie_farbe') }}"
        icon_color: "{{ states('sensor.zustand_batterie_farbe') }}"
        features_position: bottom
        view_layout:
          grid-column: 6 / span 2
          grid-row: 86 / span 20
        grid_options:
          columns: 4
          rows: 10
        vertical: true
      - type: custom:mushroom-template-card
        primary: Smoke
        icon: mdi:smoke-detector-variant
        tap_action:
          action: navigate
          navigation_path: "#Rauchmelder"
        color: |-
          {% if is_state('binary_sensor.rauchmelder_rauch', 'on') %}
            red
          {% else %}
            grey
          {% endif %}
        features_position: bottom
        vertical: true
        grid_options:
          columns: 4
          rows: 10
        view_layout:
          grid-column: 8 / span 2
          grid-row: 86 / span 20
      - type: tile
        view_layout:
          grid-column: 10 / span 2
          grid-row: 86 / span 20
        grid_options:
          columns: 4
          rows: 10
        entity: switch.anwesenheitssimulation
        name: AWS
        icon: mdi:home-lightbulb-outline
        vertical: true
        hide_state: true
        tap_action:
          action: toggle
        features_position: bottom
      - type: custom:button-card
        view_layout:
          grid-column: 14 / span 4
          grid-row: 86 / span 20
        grid_options:
          columns: 4
          rows: 20
        entity: sensor.abfall_liste
        show_name: false
        show_icon: false
        styles:
          grid:
            - grid-template-areas: "\"t1\" \"t2\""
            - grid-template-rows: 1fr 1fr
            - row-gap: 8px
          card:
            - background: rgba(0, 0, 0, 0.05)
            - border: 1px solid rgba(255, 255, 255, 0.05)
            - border-radius: 12px
            - padding: 8px
            - height: 100%
            - box-sizing: border-box
            - box-shadow: none
        custom_fields:
          t1:
            card:
              type: custom:button-card
              entity: sensor.abfall_liste
              name: |
                [[[ 
                  if (!entity || !entity.attributes || !entity.attributes.termine) return 'Lade...';
                  const t = entity.attributes.termine;
                  return (t && t[0]) ? t[0].summary : 'Kein Termin';
                ]]]
              label: |
                [[[ 
                  if (!entity || !entity.attributes || !entity.attributes.termine) return '';
                  const t = entity.attributes.termine;
                  if (t && t[0]) {
                    const d = new Date(t[0].start);
                    return d.toLocaleDateString('de-DE', {weekday: 'short', day: '2-digit', month: '2-digit'});
                  }
                  return '';
                ]]]
              show_name: true
              show_label: true
              show_icon: true
              styles:
                card:
                  - background: none
                  - border-radius: 8px
                  - padding: 6px 10px
                  - height: 41px
                  - box-shadow: none
                grid:
                  - grid-template-areas: "\"i n l\""
                  - grid-template-columns: 20px 1fr 50px
                name:
                  - justify-self: start
                  - font-size: 11px
                  - font-weight: 600
                  - color: white
                  - margin-left: 3px
                  - white-space: nowrap
                  - letter-spacing: "-0.2px"
                label:
                  - justify-self: end
                  - font-size: 10px
                  - color: "#aaaaaa"
                icon:
                  - width: 20px
                  - color: |
                      [[[ 
                        if (!entity || !entity.attributes || !entity.attributes.termine) return 'white';
                        const t = entity.attributes.termine;
                        if (t && t[0]) {
                          const m = t[0].summary.toLowerCase();
                          if (m.includes('rest')) return '#4caf50';
                          if (m.includes('papier')) return '#2196f3';
                          if (m.includes('bio')) return '#795548';
                          return '#ffeb3b';
                        }
                        return 'white';
                      ]]]
          t2:
            card:
              type: custom:button-card
              entity: sensor.abfall_liste
              name: |
                [[[ 
                  if (!entity || !entity.attributes || !entity.attributes.termine) return '';
                  const t = entity.attributes.termine;
                  return (t && t[1]) ? t[1].summary : '';
                ]]]
              label: |
                [[[ 
                  if (!entity || !entity.attributes || !entity.attributes.termine) return '';
                  const t = entity.attributes.termine;
                  if (t && t[1]) {
                    const d = new Date(t[1].start);
                    return d.toLocaleDateString('de-DE', {weekday: 'short', day: '2-digit', month: '2-digit'});
                  }
                  return '';
                ]]]
              show_name: true
              show_label: true
              show_icon: true
              styles:
                card:
                  - background: none
                  - border-radius: 8px
                  - padding: 6px 10px
                  - height: 41px
                  - box-shadow: none
                grid:
                  - grid-template-areas: "\"i n l\""
                  - grid-template-columns: 20px 1fr 50px
                name:
                  - justify-self: start
                  - font-size: 11px
                  - font-weight: 600
                  - color: white
                  - margin-left: 3px
                  - white-space: nowrap
                  - letter-spacing: "-0.2px"
                label:
                  - justify-self: end
                  - font-size: 10px
                  - color: "#aaaaaa"
                icon:
                  - width: 20px
                  - color: |
                      [[[ 
                        if (!entity || !entity.attributes || !entity.attributes.termine) return 'white';
                        const t = entity.attributes.termine;
                        if (t && t[1]) {
                          const m = t[1].summary.toLowerCase();
                          if (m.includes('rest')) return '#4caf50';
                          if (m.includes('papier')) return '#2196f3';
                          if (m.includes('bio')) return '#795548';
                          return '#ffeb3b';
                        }
                        return 'white';
                      ]]]
      - type: custom:mushroom-template-card
        primary: Pflanzen
        secondary: ""
        icon: mdi:water
        entity: input_boolean.bewasserungs_automatik
        tap_action:
          action: navigate
          navigation_path: "#PflanzenNeu"
        icon_tap_action:
          action: toggle
        icon_color: >-
          {% if is_state('switch.steckdose_gartenpumpe_1', 'on') or
          is_state('switch.steckdose_gartenpumpe_2', 'on') %}
            blue
          {% elif is_state('input_boolean.bewasserungs_automatik', 'on') %}
            green
          {% else %}
            grey
          {% endif %}
        badge_icon: >-
          {% if is_state('switch.steckdose_gartenpumpe_1', 'on') or
          is_state('switch.steckdose_gartenpumpe_2', 'on') %}
            mdi:sprinkler-variant
          {% endif %}
        badge_color: green
        vertical: true
        grid_options:
          columns: 4
          rows: 10
        view_layout:
          grid-column: 12 / span 2
          grid-row: 86 / span 20
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 196 / span 20
        card_type: pop-up
        hash: "#Lampen"
        button_type: name
        show_header: false
        name: Lampen
        icon: mdi:lamp
        sub_button:
          main: []
          bottom: []
        cards:
          - type: entities
            title: Alle Lampen
            show_header_toggle: true
            state_color: true
            entities:
              - type: custom:template-entity-row
                entity: light.kuchenlicht
                name: Küchen Licht
                icon: mdi:lightbulb
                toggle: true
                active: "{{ is_state('light.kuchenlicht', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.kuchenlicht', 'on') else 'grey'
                  }}
                secondary: |
                  {% if is_state('light.kuchenlicht', 'on') %}
                    Helligkeit: {{ (state_attr('light.kuchenlicht', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.licht_kuche
                name: Küchen Stehlampe
                icon: mdi:floor-lamp
                toggle: true
                active: "{{ is_state('light.licht_kuche', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.licht_kuche', 'on') else 'grey'
                  }}
                secondary: |
                  {% if is_state('light.licht_kuche', 'on') %}
                    Helligkeit: {{ (state_attr('light.licht_kuche', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.kuchenzeile_treiber
                name: Küchenzeile
                icon: mdi:led-strip-variant
                toggle: true
                active: "{{ is_state('light.kuchenzeile_treiber', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.kuchenzeile_treiber', 'on')
                  else 'grey' }}
                secondary: |
                  {% if is_state('light.kuchenzeile_treiber', 'on') %}
                    Helligkeit: {{ (state_attr('light.kuchenzeile_treiber', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.steckdose_licht_wintergarten
                name: Wintergarten Licht
                icon: mdi:sprout
                toggle: true
                active: "{{ is_state('light.steckdose_licht_wintergarten', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.steckdose_licht_wintergarten',
                  'on') else 'grey' }}
                secondary: |
                  {% if is_state('light.steckdose_licht_wintergarten', 'on') %}
                     An
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.wohnzimmer
                name: Wohnzimmer
                icon: mdi:sofa
                toggle: true
                active: "{{ is_state('input_boolean.wohnzimmer_licht_helfer', 'on') }}"
                color: >-
                  {{ 'orange' if
                  is_state('input_boolean.wohnzimmer_licht_helfer', 'on') else
                  'grey' }}
                secondary: >
                  {% if is_state('input_boolean.wohnzimmer_licht_helfer', 'on')
                  %}
                    {% set helligkeit = state_attr('light.wohnzimmer', 'brightness') %}
                    {% if helligkeit %}
                      Helligkeit: {{ (helligkeit / 2.55) | round(0) }} %
                    {% else %}
                      An (20%)
                    {% endif %}
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.wohnzimmer_2
                name: Wohnzimmer Deckenlampe
                icon: mdi:sofa
                toggle: true
                active: "{{ is_state('light.wohnzimmer_2', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.wohnzimmer_2', 'on') else
                  'grey' }}
                secondary: |
                  {% if is_state('light.wohnzimmer_2', 'on') %}
                    Helligkeit: {{ (state_attr('light.wohnzimmer_2', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.steckdose_flurlicht
                name: Flur Licht
                icon: mdi:door-open
                toggle: true
                active: "{{ is_state('light.steckdose_flurlicht', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.steckdose_flurlicht', 'on')
                  else 'grey' }}
              - type: custom:template-entity-row
                entity: light.schlafzimmer
                name: Schlafzimmer
                icon: mdi:bed
                toggle: true
                active: "{{ is_state('light.schlafzimmer', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.schlafzimmer', 'on') else
                  'grey' }}
                secondary: |
                  {% if is_state('light.schlafzimmer', 'on') %}
                    Helligkeit: {{ (state_attr('light.schlafzimmer', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.garten_laube_vorne
                name: Garten Laube
                icon: mdi:flower-tulip-outline
                toggle: true
                active: "{{ is_state('light.garten_laube_vorne', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.garten_laube_vorne', 'on') else
                  'grey' }}
                secondary: |
                  {% if is_state('light.garten_laube_vorne', 'on') %}
                    Helligkeit: {{ (state_attr('light.garten_laube_vorne', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.gartenlampe_eingang
                name: Gartenlampe Eingang
                icon: mdi:walk
                toggle: true
                active: "{{ is_state('light.gartenlampe_eingang', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.gartenlampe_eingang', 'on')
                  else 'grey' }}
                secondary: |
                  {% if is_state('light.gartenlampe_eingang', 'on') %}
                    Helligkeit: {{ (state_attr('light.gartenlampe_eingang', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: custom:template-entity-row
                entity: light.gartenlampe_haus
                name: Gartenlampe Haus
                icon: mdi:walk
                toggle: true
                active: "{{ is_state('light.gartenlampe_haus', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('light.gartenlampe_haus', 'on') else
                  'grey' }}
                secondary: |
                  {% if is_state('light.gartenlampe_haus', 'on') %}
                    Helligkeit: {{ (state_attr('light.gartenlampe_haus', 'brightness') / 2.55) | round(0) }} %
                  {% endif %}
              - type: section
              - type: custom:template-entity-row
                entity: input_boolean.garten_licht_automatik
                name: Garten Automatik Aktiv
                icon: mdi:motion-sensor
                toggle: true
                active: "{{ is_state('input_boolean.garten_licht_automatik', 'on') }}"
                color: >-
                  {{ 'green' if is_state('input_boolean.garten_licht_automatik',
                  'on') else 'red' }}
                secondary: >
                  {% if is_state('input_boolean.garten_licht_automatik', 'on')
                  %}
                    Aktiviert (Bewegung schaltet Licht)
                  {% else %}
                    Deaktiviert (Dauerlicht/Aus möglich)
                  {% endif %}
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 56/ span 20
        card_type: pop-up
        hash: "#Steckdosen"
        button_type: name
        show_header: false
        name: Steckdosen
        icon: mdi:flash
        sub_button:
          main: []
          bottom: []
        slider_fill_orientation: left
        slider_value_position: right
        cards:
          - type: entities
            title: Steckdosen
            show_header_toggle: false
            state_color: true
            entities:
              - type: custom:template-entity-row
                entity: switch.computer_steckdose
                name: Computer
                icon: mdi:desktop-tower
                active: "{{ is_state('switch.computer_steckdose', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.computer_steckdose', 'on')
                  else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.computer_steckdose_leistung') |
                  round(0) }} W

                  gesamt: {{ states('sensor.computer_gesamt') | round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_mediacenter
                name: Mediacenter
                icon: mdi:television
                active: "{{ is_state('switch.steckdose_mediacenter', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_mediacenter', 'on')
                  else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_mediacenter_leistung') |
                  round(0) }} W

                  gesamt: {{ states('sensor.media_center_gesamt') | round(2) }}
                  kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_hauswasserwerk
                name: Hauswasserwerk
                icon: mdi:water-pump
                active: "{{ is_state('switch.steckdose_hauswasserwerk', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_hauswasserwerk',
                  'on') else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_hauswasserwerk_power') |
                  round(0) }} W

                  gesamt: {{ states('sensor.steckdose_hauswasserwerk_energy') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_tablet
                name: Tablet
                icon: mdi:tablet
                active: "{{ is_state('switch.steckdose_tablet', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_tablet', 'on') else
                  'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_tablet_leistung') |
                  round(0) }} W

                  gesamt: {{ states('sensor.tablet_gesamt') | round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_waschmaschine
                name: Waschmaschine
                icon: mdi:washing-machine
                active: "{{ is_state('switch.steckdose_waschmaschine', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_waschmaschine',
                  'on') else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_waschmaschine_power') |
                  round(0) }} W

                  gesamt: {{ states('sensor.steckdose_waschmaschine_energy') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.fritz_smart_energy_200_1
                name: 3D Drucker
                icon: mdi:printer-3d
                active: "{{ is_state('switch.fritz_smart_energy_200_1', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.fritz_smart_energy_200_1',
                  'on') else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.fritz_smart_energy_200_1_leistung')
                  | round(0) }} W

                  gesamt: {{ states('sensor.fritz_smart_energy_200_1_energie') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_buro_heizung
                name: Büro Heizung
                icon: mdi:radiator
                active: "{{ is_state('switch.steckdose_buro_heizung', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_buro_heizung', 'on')
                  else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_buro_heizung_power') |
                  round(0) }} W

                  gesamt: {{ states('sensor.steckdose_buro_heizung_energy') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_gartenpumpe_1
                name: Gartenpumpe 1
                icon: mdi:water
                active: "{{ is_state('switch.steckdose_gartenpumpe_1', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_gartenpumpe_1',
                  'on') else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_gartenpumpe_1_power') |
                  round(0) }} W

                  gesamt: {{ states('sensor.steckdose_gartenpumpe_1_energy') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_gartenpumpe_2
                name: Gartenpumpe 2
                icon: mdi:water
                active: "{{ is_state('switch.steckdose_gartenpumpe_2', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_gartenpumpe_2',
                  'on') else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_gartenpumpe_2_power') |
                  round(0) }} W

                  gesamt: {{ states('sensor.steckdose_gartenpumpe_2_energy') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_pizzaofen
                name: Pizzaofen
                icon: mdi:pizza
                active: "{{ is_state('switch.steckdose_pizzaofen', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_pizzaofen', 'on')
                  else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_pizzaofen_power') |
                  round(0) }} W

                  gesamt: {{ states('sensor.steckdose_pizzaofen_energy') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_laube
                name: Laube
                icon: mdi:home-lightning-bolt
                active: "{{ is_state('switch.steckdose_laube', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_laube', 'on') else
                  'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_laube_power') | round(0)
                  }} W

                  gesamt: {{ states('sensor.steckdose_laube_energy') | round(2)
                  }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_laube_vorne
                name: Laube vorne
                icon: mdi:home-lightning-bolt
                active: "{{ is_state('switch.steckdose_laube_vorne', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_laube_vorne', 'on')
                  else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_laube_vorne_power') |
                  round(0) }} W

                  gesamt: {{ states('sensor.steckdose_laube_vorne_energy') |
                  round(2) }} kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 176 / span 20
        card_type: pop-up
        hash: "#HausKamera"
        button_type: name
        show_header: false
        sub_button:
          main: []
          bottom: []
        cards:
          - type: alarm-panel
            entity: alarm_control_panel.blink_kameras
            name: Kameras
            states:
              - arm_away
            card_mod:
              style:
                ha-assist-chip:
                  $: |
                    div > md-ripple {
                      {% if is_state('alarm_control_panel.blink_kameras', 'disarmed') %}
                        background-color: red !important;
                      {% else %}
                        background-color: green !important;
                      {% endif %}
                    }
          - type: entities
            title: Kameras & Bewegung
            show_header_toggle: false
            entities:
              - type: custom:template-entity-row
                entity: switch.haustur_bewegungserkennung_der_kamera
                name: Haustür
                icon: mdi:doorbell-video
                toggle: true
                active: "{{ is_state(config.entity, 'on') }}"
                color: "{{ 'green' if is_state(config.entity, 'on') else 'grey' }}"
                secondary: |
                  {% if is_state('binary_sensor.haustur_bewegung', 'on') %}
                    ALARM: Bewegung ({{ now().strftime('%H:%M | %d.%m.') }})
                  {% else %}
                    Status: Keine Bewegung
                  {% endif %}
                card_mod:
                  style: >
                    div.secondary { font-size: 10px !important; opacity: 0.8;
                    margin-top: 4px !important; }
              - type: custom:template-entity-row
                entity: switch.wohnzimmer_bewegungserkennung_der_kamera
                name: Wohnzimmer
                icon: mdi:sofa
                toggle: true
                active: "{{ is_state(config.entity, 'on') }}"
                color: "{{ 'green' if is_state(config.entity, 'on') else 'grey' }}"
                secondary: |
                  {% if is_state('binary_sensor.wohnzimmer_bewegung', 'on') %}
                    ALARM: Bewegung ({{ now().strftime('%H:%M | %d.%m.') }})
                  {% else %}
                    Status: Keine Bewegung
                  {% endif %}
                card_mod:
                  style: >
                    div.secondary { font-size: 10px !important; opacity: 0.8;
                    margin-top: 4px !important; }
              - type: custom:template-entity-row
                entity: switch.wintergarten_bewegungserkennung_der_kamera
                name: Wintergarten
                icon: mdi:sprout
                toggle: true
                active: "{{ is_state(config.entity, 'on') }}"
                color: "{{ 'green' if is_state(config.entity, 'on') else 'grey' }}"
                secondary: |
                  {% if is_state('binary_sensor.wintergarten_bewegung', 'on') %}
                    ALARM: Bewegung ({{ now().strftime('%H:%M | %d.%m.') }})
                  {% else %}
                    Status: Keine Bewegung
                  {% endif %}
                card_mod:
                  style: >
                    div.secondary { font-size: 10px !important; opacity: 0.8;
                    margin-top: 4px !important; }
              - type: custom:template-entity-row
                entity: switch.outdoor_bewegungserkennung_der_kamera
                name: Outdoor 1
                icon: mdi:cctv
                toggle: true
                active: "{{ is_state(config.entity, 'on') }}"
                color: "{{ 'green' if is_state(config.entity, 'on') else 'grey' }}"
                secondary: |
                  {% if is_state('binary_sensor.outdoor_bewegung', 'on') %}
                    ALARM: Bewegung ({{ now().strftime('%H:%M | %d.%m.') }})
                  {% else %}
                    Status: Keine Bewegung
                  {% endif %}
                card_mod:
                  style: >
                    div.secondary { font-size: 10px !important; opacity: 0.8;
                    margin-top: 4px !important; }
              - type: custom:template-entity-row
                entity: switch.outdoor_2_bewegungserkennung_der_kamera
                name: Outdoor 2
                icon: mdi:camera
                toggle: true
                active: "{{ is_state(config.entity, 'on') }}"
                color: "{{ 'green' if is_state(config.entity, 'on') else 'grey' }}"
                secondary: |
                  {% if is_state('binary_sensor.outdoor_2_bewegung', 'on') %}
                    ALARM: Bewegung ({{ now().strftime('%H:%M | %d.%m.') }})
                  {% else %}
                    Status: Keine Bewegung
                  {% endif %}
                card_mod:
                  style: >
                    div.secondary { font-size: 10px !important; opacity: 0.8;
                    margin-top: 4px !important; }
      - type: custom:bubble-card
        card_type: pop-up
        hash: "#Batterienalt"
        button_type: name
        show_header: false
        name: Batterien
        sub_button:
          main: []
          bottom: []
        cards:
          - type: entities
            title: Batteriestände
            show_header_toggle: false
            entities:
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_batterie
                name: Rauchmelder Wohnzimmer
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_batterie')|float(0) >
                    20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_2_batterie
                name: Rauchmelder Küche
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_2_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_2_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_2_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_3_batterie
                name: Rauchmelder Flur
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_3_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_3_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_3_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_4_batterie
                name: Rauchmelder Lager
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_4_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_4_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_4_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_5_batterie
                name: Rauchmelder Laube
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_5_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_5_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_5_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_6_batterie
                name: Rauchmelder Holz Lager
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_6_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_6_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_6_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.badezimmer_thermostat_1_battery
                name: Thermostat Badezimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.badezimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.badezimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.badezimmer_wandthermostat_1_battery
                name: Wandthermostat Badezimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.badezimmer_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.badezimmer_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.flur_thermostat_1_battery
                name: Thermostat Flur
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.flur_thermostat_1_battery', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.flur_thermostat_1_battery', 'on')
                    else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.kleiderraum_wandthermostat_1_battery
                name: Wandthermostat Kleiderraum
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.kleiderraum_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.kleiderraum_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.laube_schlafzimmer_thermostat_1_battery
                name: Thermostat Laube Schlafzimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.laube_schlafzimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.laube_schlafzimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.lebensraum_thermostat_1_battery
                name: Thermostat Lebensraum
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.lebensraum_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.lebensraum_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.lebensraum_wandthermostat_1_battery
                name: Wandthermostat Lebensraum
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.lebensraum_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.lebensraum_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.schlafzimmer_thermostat_1_battery
                name: Thermostat Schlafzimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.schlafzimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.schlafzimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.schlafzimmer_wandthermostat_1_battery
                name: Wandthermostat Schlafzimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.schlafzimmer_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.schlafzimmer_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.wohnzimmer_thermostat_1_battery
                name: Thermostat Wohnzimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.wohnzimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.wohnzimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.wohnzimmer_wandthermostat_1_battery
                name: Wandthermostat Wohnzimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.wohnzimmer_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.wohnzimmer_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.badezimmer_fensterkontakt_1_battery
                name: Fensterkontakt Badezimmer
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.badezimmer_fensterkontakt_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.badezimmer_fensterkontakt_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.haustur_batteriestand
                name: Kamera Haustür
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.haustur_batteriestand', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.haustur_batteriestand', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.outdoor_batteriestand
                name: Kamera Outdoor 1
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.outdoor_batteriestand', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.outdoor_batteriestand', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.outdoor_2_batteriestand
                name: Kamera Outdoor 2
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.outdoor_2_batteriestand', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.outdoor_2_batteriestand', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: sensor.0xa4c138da66acc759_battery
                name: Bewegungsmelder Tablet
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.0xa4c138da66acc759_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.0xa4c138da66acc759_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.0xa4c138da66acc759_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.0xa4c138e43bd441af_battery
                name: Bewegungsmelder Flur
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.0xa4c138e43bd441af_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.0xa4c138e43bd441af_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.0xa4c138e43bd441af_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.bewegungsmelder_buro_battery
                name: Bewegungsmelder Büro
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.bewegungsmelder_buro_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.bewegungsmelder_buro_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.bewegungsmelder_buro_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.kuchenlicht_schalter_battery
                name: Lichtschalter Küche
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.kuchenlicht_schalter_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.kuchenlicht_schalter_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.kuchenlicht_schalter_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.schalter_kuchenzeile_battery
                name: Schalter Küchenzeile
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.schalter_kuchenzeile_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.schalter_kuchenzeile_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.schalter_kuchenzeile_battery')|float(0) > 20
                    else 'red' }}; }
        view_layout:
          grid-column: 18 / span 2
          grid-row: 150 / span 20
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 99 / span 20
        card_type: pop-up
        hash: "#Heizung"
        name: Heizungssteuerung
        show_header: false
        button_type: name
        sub_button:
          main: []
          bottom: []
        slider_fill_orientation: left
        slider_value_position: right
        cards:
          - type: custom:bubble-card
            card_type: climate
            entity: climate.lebensraum_wandthermostat_1
            name: Küche
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.lebensraum_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.lebensraum_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.lebensraum_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.lebensraum_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: custom:bubble-card
            card_type: climate
            entity: climate.wohnzimmer
            name: Wohnzimmer
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.wohnzimmer', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.wohnzimmer', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.wohnzimmer', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.wohnzimmer', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: custom:bubble-card
            card_type: climate
            entity: climate.badezimmer_wandthermostat_1
            name: Badezimmer
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.badezimmer_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.badezimmer_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.badezimmer_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.badezimmer_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: custom:bubble-card
            card_type: climate
            entity: climate.kleiderraum_wandthermostat_1
            name: Flur
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.kleiderraum_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.kleiderraum_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.kleiderraum_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.kleiderraum_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: custom:bubble-card
            card_type: climate
            entity: climate.schlafzimmer_wandthermostat_1
            name: Schlafzimmer
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.schlafzimmer_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.schlafzimmer_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.schlafzimmer_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.schlafzimmer_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: custom:bubble-card
            card_type: climate
            entity: climate.flur_thermostat_1
            name: Wintergarten
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.flur_thermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.flur_thermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.flur_thermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.flur_thermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: custom:bubble-card
            card_type: climate
            entity: climate.laube_wohnbereich_wandthermostat_1
            name: Laube Wohnbereich
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.laube_wohnbereich_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.laube_wohnbereich_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.laube_wohnbereich_wandthermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.laube_wohnbereich_wandthermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: custom:bubble-card
            card_type: climate
            entity: climate.laube_schlafzimmer_thermostat_1
            name: Laube Schlafzimmer
            button_type: switch
            icon: mdi:heating-coil
            show_state: true
            show_attribute: true
            attribute: current_temperature
            min_temp: 10
            max_temp: 22
            hide_temperature: false
            state_color: false
            show_icon: true
            scrolling_effect: true
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                state_background: false
                show_arrow: false
                show_state: false
            modules:
              - frosted_glass
            frosted_glass:
              icon_background: light
              background:
                - 112
                - 107
                - 107
              main_shadow: true
            styles: |
              .bubble-icon-container {
                {% set ist = state_attr('climate.laube_schlafzimmer_thermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.laube_schlafzimmer_thermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  background-color: rgba(255, 152, 0, 0.25) !important;
                {% else %}
                  background-color: rgba(112, 107, 107, 0.3) !important;
                {% endif %}
              }
              .bubble-icon {
                {% set ist = state_attr('climate.laube_schlafzimmer_thermostat_1', 'current_temperature') | float(-1) %}
                {% set soll = state_attr('climate.laube_schlafzimmer_thermostat_1', 'temperature') | float(-1) %}
                {% if ist != -1 and soll != -1 and ist < (soll - 0.5) %}
                  color: rgb(255, 152, 0) !important;
                {% else %}
                  color: rgb(150, 150, 150) !important;
                {% endif %}
              }
          - type: history-graph
            entities:
              - entity: switch.heizung_shellyplus1
                name: Wolf GG EK
            hours_to_show: 24
            title: Heizaktivität (24h)
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                icon: |
                  {% set shelly = states('switch.heizung_shellyplus1') %}
                  {% if shelly in ['unavailable', 'unknown'] %}
                    mdi:alert-circle
                  {% elif is_state('switch.heizung_shellyplus1', 'on') %}
                    mdi:fire
                  {% else %}
                    mdi:shield-check
                  {% endif %}
                icon_color: |
                  {% set shelly = states('switch.heizung_shellyplus1') %}
                  {% if shelly in ['unavailable', 'unknown'] %}
                    red
                  {% elif is_state('switch.heizung_shellyplus1', 'on') %}
                    orange
                  {% else %}
                    green
                  {% endif %}
                content: >
                  {% set shelly = states('switch.heizung_shellyplus1') %}

                  {% set liter = states('sensor.gasverbrauch_in_litern_2') |
                  float(0) %}

                  {% set thermostats = [
                    'climate.lebensraum_wandthermostat_1', 'climate.wohnzimmer', 
                    'climate.badezimmer_wandthermostat_1', 'climate.kleiderraum_wandthermostat_1', 
                    'climate.schlafzimmer_wandthermostat_1', 'climate.flur_thermostat_1', 
                    'climate.laube_wohnbereich_wandthermostat_1', 'climate.laube_schlafzimmer_thermostat_1'
                  ] %}

                  {% set offline = expand(thermostats) | selectattr('state',
                  'in', ['unavailable', 'unknown']) | list | count %}


                  {% if shelly in ['unavailable', 'unknown'] %}
                    Shelly FEHLER
                  {% elif offline > 0 %}
                    {{ offline }} Sensoren weg
                  {% else %}
                    System OK • {{ liter | round(1) }} L heute
                  {% endif %}
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: sensor.gasverbrauch_in_litern_2
              - type: entity
                entity: sensor.temperatur_sensor_lager_temperature
                name: Lager Temperatur
            alignment: start
      - type: custom:button-card
        view_layout:
          grid-column: 2 / 18
          grid-row: 1 / span 10
        entity: sun.sun
        show_name: false
        show_state: false
        show_icon: false
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Google Kalender
              size: wide
              content:
                type: custom:calendar-card-pro
                entities:
                  - entity: calendar.dertimos_gmail_com
                  - entity: calendar.geburtstage
                  - entity: calendar.feiertage_in_deutschland
                  - entity: calendar.kalenderwochen
                days_to_show: 30
                default_view: list
                weather:
                  entity: weather.forecast_home
                  position: date
                  date:
                    show_conditions: true
                    show_high_temp: true
                    show_low_temp: false
                    icon_size: 14px
                    font_size: 12px
                    color: var(--primary-text-color)
                  event:
                    show_conditions: true
                    show_temp: true
                    icon_size: 14px
                    font_size: 12px
                    color: var(--primary-text-color)
                tap_action:
                  action: expand
                hold_action:
                  action: more-info
        grid_options:
          columns: 16
          rows: 8
        styles:
          card:
            - background: rgba(0, 0, 0, 0.1)
            - border: 1px solid rgba(255, 255, 255, 0.1)
            - border-radius: 12px
            - height: 40px !important
            - min-height: 40px !important
            - max-height: 40px !important
            - position: relative
            - padding: 0px
            - overflow: hidden
            - cursor: pointer
          custom_fields:
            uhr:
              - position: absolute
              - left: 20px
              - top: 50%
              - transform: translateY(-50%)
              - width: auto
              - pointer-events: none
            datum:
              - position: absolute
              - right: 20px
              - top: 50%
              - transform: translateY(-50%)
              - font-size: 1.3rem
              - font-weight: 300
              - color: white
              - white-space: nowrap
              - pointer-events: none
        custom_fields:
          uhr:
            card:
              type: custom:font-clock-card
              font_name: san-serif
              font_weight: "300"
              font_size: 1.5rem
              format: HH:mm
              align: left
              show_icon: false
              card_mod:
                style: |
                  ha-card { 
                    background: none !important; 
                    border: none !important;
                    box-shadow: none !important; 
                  }
          datum: |
            [[[ return states['sensor.dashboard_datum'].state ]]]
      - type: custom:weather-chart-card
        view_layout:
          grid-column: 2 / span 8
          grid-row: 10 / span 31
        grid_options:
          columns: 8
          rows: 31
        entity: weather.forecast_home
        show_main: true
        show_temperature: true
        show_current_condition: true
        show_attributes: false
        show_time: false
        show_time_seconds: false
        show_day: false
        show_date: false
        show_humidity: false
        show_pressure: false
        show_wind_direction: false
        show_wind_speed: false
        show_sun: false
        show_feels_like: false
        show_dew_point: false
        show_wind_gust_speed: false
        show_visibility: false
        show_last_changed: false
        use_12hour_format: false
        icons_size: "19"
        animated_icons: false
        icon_style: style1
        autoscroll: true
        forecast:
          precipitation_type: rainfall
          show_probability: false
          labels_font_size: "11"
          precip_bar_size: "100"
          style: style2
          show_wind_forecast: true
          condition_icons: true
          round_temp: false
          type: daily
          number_of_forecasts: "0"
          disable_animation: false
        current_temp_size: "24"
      - type: custom:power-flow-card-plus
        entities:
          battery:
            state_of_charge: sensor.solarbank_3_e2700_pro_ladestand
            use_separated_entities: true
            entity:
              consumption: sensor.solarbank_3_e2700_pro_entladeleistung
              production: sensor.solarbank_3_e2700_pro_aufladeleistung
          grid:
            entity:
              consumption: sensor.smart_meter_netzbezug
              production: sensor.smart_meter_netzeinspeisung
          solar:
            entity: sensor.solarbank_3_e2700_pro_solarleistung
            display_zero_state: true
          home:
            entity: sensor.solarbank_3_e2700_pro_hausbedarf
            override_state: true
            subtract_individual: false
            tap_action:
              action: call-service
              service: script.trigger_anker_echtzeit
        clickable_entities: true
        display_zero_lines: true
        use_new_flow_rate_model: true
        base_decimals: 0
        kilo_decimals: 1
        view_layout:
          grid-column: 10 / span 8
          grid-row: 10 / span 31
        card_mod:
          style: |
            ha-card {
              height: 325px !important; /* Fixer Wert für dein Wallpanel */
              display: flex !important;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              background: transparent !important; /* Optional, falls Overlay drunter liegt */
            }
            .card-content {
              transform: scale(0.90); 
              width: 100%;
            }
      - type: custom:button-card
        card_mod:
          style: |
            ha-card {
              border: none !important;
              box-shadow: none !important;
              background: none !important;
              backdrop-filter: none !important;
              --ha-card-border-width: 0px !important;
            }
            ha-card:after, ha-card:before { display: none !important; }
        view_layout:
          grid-column: 10 / span 1
          grid-row: 9 / span 5
        show_name: false
        show_icon: false
        show_state: false
        styles:
          card:
            - background: transparent
            - padding-left: 15px
            - padding-top: 16px
            - overflow: visible !important
          grid:
            - grid-template-areas: >-
                "aufgang" "aufgang_zeit" "gap" "untergang" "untergang_zeit"
                "line" "diff"
            - grid-template-rows: auto auto 2px auto auto 10px auto
            - justify-items: start
          custom_fields:
            aufgang:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
              - white-space: nowrap
            aufgang_zeit:
              - font-size: 14px
              - font-weight: bold
            untergang:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
              - white-space: nowrap
            untergang_zeit:
              - font-size: 14px
              - font-weight: bold
            line:
              - width: 35px
              - border-top: 1px solid rgba(255,255,255,0.3)
              - height: 1px
              - margin-top: 2px
            diff:
              - font-size: 11px
              - color: rgba(255,255,255,0.8)
              - margin-top: "-2px"
        custom_fields:
          aufgang: Sonnenaufgang
          aufgang_zeit: |
            [[[ 
              const d = new Date(states['sensor.sun_next_rising'].state); 
              return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0'); 
            ]]]
          untergang: Sonnenuntergang
          untergang_zeit: |
            [[[ 
              const d = new Date(states['sensor.sun_next_setting'].state); 
              return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0'); 
            ]]]
          line: "&nbsp;"
          diff: |
            [[[ 
              const s = states['sensor.home_sun_daylight'];
              if (!s || !s.attributes.today || !s.attributes.yesterday) return '';
              
              const diffMinTotal = (s.attributes.today - s.attributes.yesterday) * 60;
              const absMinTotal = Math.abs(diffMinTotal);
              const m = Math.floor(absMinTotal);
              const s_rest = Math.round((absMinTotal - m) * 60);
              
              const sign = diffMinTotal > 0 ? '+ ' : '- ';
              return sign + m + ':' + s_rest.toString().padStart(2, '0') + ' Min. Licht';
            ]]]
      - type: custom:button-card
        triggers_update:
          - sensor.hausbedarf_energie_heute
          - sensor.taglicher_netzbezug
          - number.solarbank_3_e2700_pro_tarifpreis_kwh
        card_mod:
          style: |
            ha-card {
              border: none !important;
              box-shadow: none !important;
              background: none !important;
              --ha-card-border-width: 0px !important;
            }
            ha-card:after, ha-card:before { display: none !important; }
        view_layout:
          grid-column: 16 / span 2
          grid-row: 9 / span 5
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Energie-Statistiken
              size: wide
              content:
                type: vertical-stack
                cards:
                  - type: heading
                    heading: Energie-Historie (Letzte 7 Tage)
                  - type: statistics-graph
                    entities:
                      - sensor.hausbedarf_energie_heute
                      - sensor.taglicher_netzbezug
                    chart_type: bar
                    period: day
                    days_to_show: 7
                    stat_types:
                      - change
                  - type: heading
                    heading: Live-Verlauf (24h)
                  - type: history-graph
                    entities:
                      - sensor.hausbedarf_energie_heute
                      - sensor.taglicher_netzbezug
                    hours_to_show: 24
                    refresh_interval: 0
        show_name: false
        show_icon: false
        show_state: false
        styles:
          card:
            - background: transparent
            - padding-right: 15px
            - padding-top: 16px
            - overflow: visible !important
            - cursor: pointer
          grid:
            - grid-template-areas: >-
                "autarkie" "autarkie_wert" "gap" "ersparnis" "ersparnis_wert"
                "line" "diff"
            - grid-template-rows: auto auto 2px auto auto 10px auto
            - justify-items: end
          custom_fields:
            autarkie:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
            autarkie_wert:
              - font-size: 14px
              - font-weight: bold
            ersparnis:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
            ersparnis_wert:
              - font-size: 14px
              - font-weight: bold
            line:
              - width: 35px
              - border-top: 1px solid rgba(255,255,255,0.3)
              - height: 1px
              - margin-top: 2px
            diff:
              - font-size: 11px
              - color: rgba(255,255,255,0.8)
        custom_fields:
          autarkie: Autarkie heute
          autarkie_wert: |
            [[[ 
              const s1 = states['sensor.hausbedarf_energie_heute'];
              const s2 = states['sensor.taglicher_netzbezug'];
              if (!s1 || !s2 || s1.state === 'unavailable' || s2.state === 'unavailable' || s1.state === 'unknown') return '...';
              
              const verbrauch = parseFloat(s1.state) || 0;
              const netz = parseFloat(s2.state) || 0;
              if (verbrauch <= 0) return '0.0 %';
              
              const autarkie = ((verbrauch - netz) / verbrauch) * 100;
              return Math.max(0, Math.min(100, autarkie)).toFixed(1) + ' %';
            ]]]
          ersparnis: Ersparnis heute
          ersparnis_wert: |
            [[[ 
              const s1 = states['sensor.hausbedarf_energie_heute'];
              const s2 = states['sensor.taglicher_netzbezug'];
              const sp = states['number.solarbank_3_e2700_pro_tarifpreis_kwh'];
              if (!s1 || !s2 || s1.state === 'unavailable' || s2.state === 'unavailable') return '...';

              const verbrauch = parseFloat(s1.state) || 0;
              const netz = parseFloat(s2.state) || 0;
              const eigenverbrauch = Math.max(0, verbrauch - netz);
              const preis = (parseFloat(sp?.state) || 32) / 100;
              return (eigenverbrauch * preis).toFixed(2) + ' €';
            ]]]
          line: "&nbsp;"
          diff: |
            [[[ 
              const s1 = states['sensor.hausbedarf_energie_heute'];
              const s2 = states['sensor.taglicher_netzbezug'];
              if (!s1 || !s2 || s1.state === 'unavailable' || s2.state === 'unavailable') return '...';

              const verbrauch = parseFloat(s1.state) || 0;
              const netz = parseFloat(s2.state) || 0;
              const eigenverbrauch = Math.max(0, verbrauch - netz);
              return eigenverbrauch.toFixed(2) + ' kWh';
            ]]]
      - type: custom:button-card
        card_mod:
          style: |
            ha-card {
              border: none !important;
              box-shadow: none !important;
              background: none !important;
              backdrop-filter: none !important;
              --ha-card-border-width: 0px !important;
            }
            ha-card:after, ha-card:before { display: none !important; }
        view_layout:
          grid-column: 10 / span 1
          grid-row: 48 / span 5
        show_name: false
        show_icon: false
        show_state: false
        styles:
          card:
            - background: transparent
            - padding-left: 15px
            - padding-bottom: 17px
            - overflow: visible !important
          grid:
            - grid-template-areas: >-
                "uv_label" "uv_wert" "gap" "prog_label" "prog_wert" "line"
                "info"
            - grid-template-rows: auto auto 2px auto auto 10px auto
            - justify-items: start
          custom_fields:
            uv_label:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
            uv_wert:
              - font-size: 12px
              - font-weight: bold
            prog_label:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
            prog_wert:
              - font-size: 12px
              - font-weight: bold
            line:
              - width: 35px
              - border-top: 1px solid rgba(255,255,255,0.3)
              - height: 1px
              - margin-top: 2px
            info:
              - font-size: 11px
              - color: rgba(255,255,255,0.8)
              - margin-top: "-2px"
        custom_fields:
          uv_label: UV-Index
          uv_wert: |
            [[[ 
              const uv = states['weather.forecast_home']?.attributes?.uv_index;
              return uv !== undefined ? uv : '0';
            ]]]
          prog_label: Solar Vorschau
          prog_wert: |
            [[[ 
              const p = states['sensor.solar_vorhersage_gesamt']?.state;
              return p ? parseFloat(p).toFixed(2) + ' kWh' : '0 kWh';
            ]]]
          line: "&nbsp;"
          info: Vorhersage aktiv
      - type: custom:button-card
        card_mod:
          style: |
            ha-card {
              border: none !important;
              box-shadow: none !important;
              background: none !important;
              backdrop-filter: none !important;
              --ha-card-border-width: 0px !important;
            }
            ha-card:after, ha-card:before { display: none !important; }
        view_layout:
          grid-column: 16 / span 2
          grid-row: 48 / span 5
        show_name: false
        show_icon: false
        show_state: false
        styles:
          card:
            - background: transparent
            - padding-right: 15px
            - padding-bottom: 15px
            - overflow: visible !important
          grid:
            - grid-template-areas: >-
                "netz_kwh_label" "netz_kwh_wert" "gap" "netz_w_label"
                "netz_w_wert" "line" "status"
            - grid-template-rows: auto auto 2px auto auto 10px auto
            - justify-items: end
          custom_fields:
            netz_kwh_label:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
            netz_kwh_wert:
              - font-size: 11px
              - font-weight: bold
            netz_w_label:
              - font-size: 10px
              - color: rgba(255,255,255,0.6)
            netz_w_wert:
              - font-size: 11px
              - font-weight: bold
            line:
              - width: 35px
              - border-top: 1px solid rgba(255,255,255,0.3)
              - height: 1px
              - margin-top: 2px
            status:
              - font-size: 11px
              - margin-top: "-2px"
              - color: |
                  [[[ 
                    return states['binary_sensor.solarbank_3_e2700_pro_wifi_verbindung']?.state === 'on' 
                    ? 'rgba(255,255,255,0.8)' 
                    : '#ff5252'; 
                  ]]]
        custom_fields:
          netz_kwh_label: Netzbezug heute
          netz_kwh_wert: |
            [[[ 
              const s = states['sensor.taglicher_netzbezug'];
              if (!s || s.state === 'unknown' || s.state === 'unavailable') return '0.00 kWh';
              let val = parseFloat(s.state);
              return val.toFixed(2) + ' kWh';
            ]]]
          netz_w_label: Aktueller Bezug
          netz_w_wert: |
            [[[ 
              const w = parseFloat(states['sensor.smart_meter_netzbezug']?.state) || 0;
              // Falls der Wert negativ ist (Einspeisung), zeigen wir 0 W an
              const anzeige = w < 0 ? 0 : w;
              return anzeige.toFixed(0) + ' W';
            ]]]
          line: "&nbsp;"
          status: |
            [[[ 
              const wifi = states['binary_sensor.solarbank_3_e2700_pro_wifi_verbindung']?.state;
              return wifi === 'on' ? 'WiFi: Online' : 'WiFi: Offline';
            ]]]
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 77 / span 20
        card_type: pop-up
        hash: "#Rauchmelder"
        show_icon: false
        scrolling_effect: false
        show_name: false
        button_type: name
        show_header: false
        sub_button:
          main: []
          bottom: []
        cards:
          - type: entities
            title: Rauchmelder
            entities:
              - type: custom:template-entity-row
                entity: binary_sensor.rauchmelder_rauch
                name: Wohnzimmer
                state: (Test drücken)
                icon: mdi:smoke-detector
                secondary: >-
                  Status: {{ 'RAUCH!' if
                  is_state('binary_sensor.rauchmelder_rauch', 'on') else 'Frei'
                  }}
                tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.rauchmelder_none
                card_mod:
                  style: >
                    div.secondary { color: {{ 'red' if
                    is_state('binary_sensor.rauchmelder_rauch', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.rauchmelder_2_rauch
                name: Küche
                state: (Test drücken)
                icon: mdi:smoke-detector
                secondary: >-
                  Status: {{ 'RAUCH!' if
                  is_state('binary_sensor.rauchmelder_2_rauch', 'on') else
                  'Frei' }}
                tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.rauchmelder_2_none
                card_mod:
                  style: >
                    div.secondary { color: {{ 'red' if
                    is_state('binary_sensor.rauchmelder_2_rauch', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.rauchmelder_3_rauch
                name: Flur
                state: (Test drücken)
                icon: mdi:smoke-detector
                secondary: >-
                  Status: {{ 'RAUCH!' if
                  is_state('binary_sensor.rauchmelder_3_rauch', 'on') else
                  'Frei' }}
                tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.rauchmelder_3_none
                card_mod:
                  style: >
                    div.secondary { color: {{ 'red' if
                    is_state('binary_sensor.rauchmelder_3_rauch', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.rauchmelder_4_rauch
                name: Lager
                state: (Test drücken)
                icon: mdi:smoke-detector
                secondary: >-
                  Status: {{ 'RAUCH!' if
                  is_state('binary_sensor.rauchmelder_4_rauch', 'on') else
                  'Frei' }}
                tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.rauchmelder_4_none
                card_mod:
                  style: >
                    div.secondary { color: {{ 'red' if
                    is_state('binary_sensor.rauchmelder_4_rauch', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.rauchmelder_5_rauch
                name: Laube
                state: (Test drücken)
                icon: mdi:smoke-detector
                secondary: >-
                  Status: {{ 'RAUCH!' if
                  is_state('binary_sensor.rauchmelder_5_rauch', 'on') else
                  'Frei' }}
                tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.rauchmelder_5_none
                card_mod:
                  style: >
                    div.secondary { color: {{ 'red' if
                    is_state('binary_sensor.rauchmelder_5_rauch', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.rauchmelder_6_rauch
                name: Holzlager
                state: (Test drücken)
                icon: mdi:smoke-detector
                secondary: >-
                  Status: {{ 'RAUCH!' if
                  is_state('binary_sensor.rauchmelder_6_rauch', 'on') else
                  'Frei' }}
                tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.rauchmelder_6_none
                card_mod:
                  style: >
                    div.secondary { color: {{ 'red' if
                    is_state('binary_sensor.rauchmelder_6_rauch', 'on') else
                    'green' }}; }
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 124 / span 20
        card_type: pop-up
        hash: "#PflanzenNeu"
        show_header: false
        button_type: name
        sub_button:
          main: []
          bottom: []
        cards:
          - type: entities
            entities:
              - type: custom:template-entity-row
                entity: input_boolean.bewasserungs_automatik
                name: Pflanzen Automatik
                icon: mdi:water
                active: "{{ is_state('input_boolean.bewasserungs_automatik', 'on') }}"
                color: >-
                  {{ 'blue' if is_state('input_boolean.bewasserungs_automatik',
                  'on') else 'grey' }}
                toggle: false
                secondary: >-
                  Bewässerung {{ 'aktiv' if
                  is_state('input_boolean.bewasserungs_automatik', 'on') else
                  'aus' }}
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.bewasserungs_automatik
          - type: entities
            entities:
              - type: custom:template-entity-row
                entity: switch.steckdose_gartenpumpe_1
                name: Gartenpumpe 1
                icon: mdi:water
                active: "{{ is_state('switch.steckdose_gartenpumpe_1', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_gartenpumpe_1',
                  'on') else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_gartenpumpe_1_power') |
                  round(0) }} W gesamt: {{
                  states('sensor.steckdose_gartenpumpe_1_energy') | round(2) }}
                  kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
              - type: custom:template-entity-row
                entity: switch.steckdose_gartenpumpe_2
                name: Gartenpumpe 2
                icon: mdi:water
                active: "{{ is_state('switch.steckdose_gartenpumpe_2', 'on') }}"
                color: >-
                  {{ 'orange' if is_state('switch.steckdose_gartenpumpe_2',
                  'on') else 'grey' }}
                toggle: true
                secondary: >
                  aktuell: {{ states('sensor.steckdose_gartenpumpe_2_power') |
                  round(0) }} W gesamt: {{
                  states('sensor.steckdose_gartenpumpe_2_energy') | round(2) }}
                  kWh
                card_mod:
                  style: |
                    div.secondary { white-space: pre-line; }
          - type: custom:flower-card
            entity: plant.garten_gemuse
            battery_sensor: sensor.pflanzen_garten_gemuse_battery
            show_bars:
              - moisture
              - temperature
              - humidity
            name: Gemüsebeet
          - type: entities
            entities:
              - type: custom:template-entity-row
                entity: switch.bewasserungscomputer_1
                name: Gemüsebeet
                icon: mdi:water-pump
                active: "{{ is_state('switch.bewasserungscomputer_1', 'on') }}"
                color: >-
                  {{ 'blue' if is_state('switch.bewasserungscomputer_1', 'on')
                  else 'grey' }}
                toggle: false
                secondary: >-
                  {{ 'Gießt...' if is_state('switch.bewasserungscomputer_1',
                  'on') else 'Aus' }}
                tap_action:
                  action: call-service
                  service: script.gemusebeet
              - entity: input_number.bewasserungszeit_gemusebeet
                name: Dauer Gemüsebeet
          - type: custom:flower-card
            entity: plant.beerengarten
            battery_sensor: sensor.pflanzen_garten_beerenbeet_battery
            show_bars:
              - moisture
              - conductivity
              - temperature
              - illuminance
              - humidity
              - dli
          - type: entities
            entities:
              - type: custom:template-entity-row
                entity: switch.bewasserungscomputer_3
                name: Beerengarten
                icon: mdi:water-pump
                active: "{{ is_state('switch.bewasserungscomputer_3', 'on') }}"
                color: >-
                  {{ 'blue' if is_state('switch.bewasserungscomputer_3', 'on')
                  else 'grey' }}
                toggle: false
                secondary: >-
                  {{ 'Gießt...' if is_state('switch.bewasserungscomputer_3',
                  'on') else 'Aus' }}
                tap_action:
                  action: call-service
                  service: script.beerengarten
              - entity: input_number.bewasserungszeit_beerengarten
                name: Dauer Beerengarten
          - type: custom:flower-card
            entity: plant.blumenwiese
            battery_sensor: sensor.pflanzen_blumenwiese_battery
            show_bars:
              - moisture
              - conductivity
              - temperature
              - illuminance
              - humidity
              - dli
          - type: entities
            entities:
              - type: custom:template-entity-row
                entity: switch.bewasserungscomputer_2
                name: Blumenwiese
                icon: mdi:water-pump
                active: "{{ is_state('switch.bewasserungscomputer_2', 'on') }}"
                color: >-
                  {{ 'blue' if is_state('switch.bewasserungscomputer_2', 'on')
                  else 'grey' }}
                toggle: false
                secondary: >-
                  {{ 'Gießt...' if is_state('switch.bewasserungscomputer_2',
                  'on') else 'Aus' }}
                tap_action:
                  action: call-service
                  service: script.blumenwiese
              - entity: input_number.bewasserungszeit_blumenwiese
                name: Dauer Blumenwiese
          - type: custom:flower-card
            entity: plant.rot_ahorn
            battery_sensor: sensor.pflanzen_garten_pumpe_2_battery
            show_bars:
              - moisture
              - conductivity
              - temperature
              - illuminance
              - humidity
              - dli
          - type: entities
            entities:
              - type: custom:template-entity-row
                entity: switch.steckdose_gartenpumpe_2
                name: Rot-Ahorn
                icon: mdi:water-pump
                active: "{{ is_state('switch.steckdose_gartenpumpe_2', 'on') }}"
                color: >-
                  {{ 'blue' if is_state('switch.steckdose_gartenpumpe_2', 'on')
                  else 'grey' }}
                toggle: false
                secondary: >-
                  {{ 'Gießt...' if is_state('switch.steckdose_gartenpumpe_2',
                  'on') else 'Aus' }}
                tap_action:
                  action: call-service
                  service: script.manuell_giesen_pumpe_2_direkt
              - entity: input_number.bewasserungszeit_rot_ahorn
                name: Dauer Rot-Ahorn
          - type: custom:flower-card
            entity: plant.badezimmer
            battery_sensor: sensor.0xa4c13886bf2d955c_battery
            show_bars:
              - moisture
              - conductivity
              - temperature
              - illuminance
              - humidity
              - dli
          - type: custom:flower-card
            entity: plant.wintergarten
            battery_sensor: sensor.pfanzen_wintergarten_2_battery
            show_bars:
              - moisture
              - temperature
              - humidity
          - type: custom:flower-card
            entity: plant.wohnzimmer
            battery_sensor: sensor.planzen_wohnzimmer_battery
            show_bars:
              - moisture
              - temperature
              - humidity
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 20 / span 20
        card_type: pop-up
        hash: "#GartenKamera"
        button_type: name
        show_header: false
        name: Garten Kamera
        sub_button:
          main: []
          bottom: []
        cards:
          - type: tile
            entity: automation.reolink_zu_echo_show_pro_push_video_ton_schalter
            name: Überwachung
            icon: mdi:camera
            tap_action:
              action: toggle
            grid_options:
              columns: 6
          - type: tile
            entity: input_boolean.kamera_garten_modus_tag_nacht
            name: Tag-Modus
            icon: mdi:sun-clock
            tap_action:
              action: toggle
            grid_options:
              columns: 6
          - type: entities
            title: Kameraeinstellungen
            show_header_toggle: false
            entities:
              - type: section
                label: Steuerung
              - entity: button.garten_gehe_zu_startposition
                name: Startposition anfahren
              - entity: select.garten_ptz_voreinstellung
                name: Voreinstellung wählen
              - entity: number.garten_zoom
                name: Zoom-Stufe
              - entity: switch.garten_automatisches_tracking
                name: Auto-Tracking
                state_color: true
              - entity: switch.garten_autofokus
                name: Autofokus
              - type: section
                label: Licht & Nachtsicht
              - entity: light.garten_scheinwerfer
                name: Scheinwerfer
              - entity: select.garten_scheinwerfermodus
                name: Scheinwerfer-Modus
              - entity: switch.garten_infrarotlicht_im_nachtmodus
                name: Infrarot-Licht
              - entity: light.garten_status_led
                name: Status LED
              - type: section
                label: Aufnahme & Alarm
              - entity: switch.garten_aufzeichnen
                name: Video-Aufzeichnung
              - entity: switch.garten_audio_aufnehmen
                name: Audio-Aufnahme
              - entity: number.garten_lautstarke
                name: Lautsprecher-Lautstärke
              - entity: siren.garten_sirene
                name: Sirene (Manuell)
              - entity: switch.garten_sirene_bei_ereignis
                name: Sirene bei Alarm
              - type: section
                label: Benachrichtigungen
              - entity: switch.garten_push_benachrichtigungen
                name: Push-Nachricht
              - entity: switch.garten_e_mail_bei_ereignis
                name: E-Mail Alarm
              - type: section
                label: KI-Empfindlichkeit
              - entity: number.garten_bewegungsempfindlichkeit
                name: Allgemein
              - entity: number.garten_ki_personen_empfindlichkeit
                name: Personen
              - entity: number.garten_ki_tier_empfindlichkeit
                name: Tiere
              - entity: number.garten_ki_fahrzeug_empfindlichkeit
                name: Fahrzeuge
              - type: section
                label: System-Info
              - entity: sensor.garten_wlan_signal
                name: WLAN Signalstärke
      - type: custom:bubble-card
        view_layout:
          grid-column: 18 / span 2
          grid-row: 220 / span 20
        card_type: pop-up
        hash: "#Batterien"
        button_type: name
        show_header: false
        name: Batterien
        sub_button:
          main: []
          bottom: []
        cards:
          - type: entities
            title: Batteriestände
            show_header_toggle: false
            entities:
              - type: section
                label: Rauchmelder
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_batterie
                name: Wohnzimmer
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_batterie')|float(0) >
                    20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_2_batterie
                name: Küche
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_2_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_2_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_2_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_3_batterie
                name: Flur
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_3_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_3_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_3_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_4_batterie
                name: Lager
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_4_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_4_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_4_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_5_batterie
                name: Laube
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_5_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_5_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_5_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.rauchmelder_6_batterie
                name: Holz Lager
                state: " "
                secondary: "Ladezustand: {{ states('sensor.rauchmelder_6_batterie') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.rauchmelder_6_batterie')|float(0) > 50 else
                    'orange' if states('sensor.rauchmelder_6_batterie')|float(0)
                    > 20 else 'red' }}; }
              - type: section
                label: Thermostate
              - type: custom:template-entity-row
                entity: binary_sensor.badezimmer_thermostat_1_battery
                name: Badezimmer (Thermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.badezimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.badezimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.badezimmer_wandthermostat_1_battery
                name: Badezimmer (Wandthermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.badezimmer_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.badezimmer_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.flur_thermostat_1_battery
                name: Flur (Thermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.flur_thermostat_1_battery', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.flur_thermostat_1_battery', 'on')
                    else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.kleiderraum_wandthermostat_1_battery
                name: Kleiderraum (Wandthermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.kleiderraum_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.kleiderraum_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.laube_schlafzimmer_thermostat_1_battery
                name: Laube Schlafzimmer (Thermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.laube_schlafzimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.laube_schlafzimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.laube_wohnbereich_thermostat_2_battery
                name: Laube Wohnbereich (Thermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.laube_wohnbereich_thermostat_2_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.laube_schlafzimmer_thermostat_1_battery',
                    'on') else 'green' }}; }      
              - type: custom:template-entity-row
                entity: binary_sensor.lebensraum_thermostat_1_battery
                name: Lebensraum (Thermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.lebensraum_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.lebensraum_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.lebensraum_wandthermostat_1_battery
                name: Lebensraum (Wandthermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.lebensraum_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.lebensraum_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.schlafzimmer_thermostat_1_battery
                name: Schlafzimmer (Thermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.schlafzimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.schlafzimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.schlafzimmer_wandthermostat_1_battery
                name: Schlafzimmer (Wandthermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.schlafzimmer_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.schlafzimmer_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.wohnzimmer_thermostat_1_battery
                name: Wohnzimmer (Thermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.wohnzimmer_thermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.wohnzimmer_thermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.wohnzimmer_wandthermostat_1_battery
                name: Wohnzimmer (Wandthermostat)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.wohnzimmer_wandthermostat_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.wohnzimmer_wandthermostat_1_battery',
                    'on') else 'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.badezimmer_fensterkontakt_1_battery
                name: Badezimmer (Fensterkontakt)
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.badezimmer_fensterkontakt_1_battery',
                  'on') else 'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.badezimmer_fensterkontakt_1_battery',
                    'on') else 'green' }}; }
              - type: section
                label: Kameras
              - type: custom:template-entity-row
                entity: binary_sensor.haustur_batteriestand
                name: Haustür
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.haustur_batteriestand', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.haustur_batteriestand', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.outdoor_batteriestand
                name: Outdoor 1
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.outdoor_batteriestand', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.outdoor_batteriestand', 'on') else
                    'green' }}; }
              - type: custom:template-entity-row
                entity: binary_sensor.outdoor_2_batteriestand
                name: Outdoor 2
                state: " "
                secondary: >-
                  Status: {{ 'Schwach' if
                  is_state('binary_sensor.outdoor_2_batteriestand', 'on') else
                  'OK' }}
                card_mod:
                  style: >
                    state-badge { color: {{ 'red' if
                    is_state('binary_sensor.outdoor_2_batteriestand', 'on') else
                    'green' }}; }
              - type: section
                label: Bewegungsmelder
              - type: custom:template-entity-row
                entity: sensor.0xa4c138da66acc759_battery
                name: Tablet
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.0xa4c138da66acc759_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.0xa4c138da66acc759_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.0xa4c138da66acc759_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.0xa4c138e43bd441af_battery
                name: Flur
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.0xa4c138e43bd441af_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.0xa4c138e43bd441af_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.0xa4c138e43bd441af_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.bewegungsmelder_buro_battery
                name: Büro
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.bewegungsmelder_buro_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.bewegungsmelder_buro_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.bewegungsmelder_buro_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.gartensensor_eingang_battery
                name: Eingang Garten
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.gartensensor_eingang_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.gartensensor_eingang_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.gartensensor_eingang_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.gartensensor_haus_battery
                name: Haus Garten
                state: " "
                secondary: "Ladezustand: {{ states('sensor.gartensensor_haus_battery') }}%"
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.gartensensor_haus_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.gartensensor_haus_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.briefkasten_post_ist_da_battery
                name: Post ist da
                state: " "
                secondary: >-
                  Ladezustand: {{
                  states('sensor.briefkasten_post_ist_da_battery') }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.briefkasten_post_ist_da_battery')|float(0) >
                    50 else 'orange' if
                    states('sensor.briefkasten_post_ist_da_battery')|float(0) >
                    20 else 'red' }}; } 
              - type: custom:template-entity-row
                entity: sensor.briefkasten_post_ist_entnommen_battery
                name: Post entnommen
                state: " "
                secondary: >-
                  Ladezustand: {{
                  states('sensor.briefkasten_post_ist_entnommen_battery') }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.briefkasten_post_ist_entnommen_battery')|float(0)
                    > 50 else 'orange' if
                    states('sensor.briefkasten_post_ist_entnommen_battery')|float(0)
                    > 20 else 'red' }}; }             
              - type: section
                label: Lichtschalter
              - type: custom:template-entity-row
                entity: sensor.kuchenlicht_schalter_battery
                name: Küche
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.kuchenlicht_schalter_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.kuchenlicht_schalter_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.kuchenlicht_schalter_battery')|float(0) > 20
                    else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.schalter_kuchenzeile_battery
                name: Küchenzeile
                state: " "
                secondary: >-
                  Ladezustand: {{ states('sensor.schalter_kuchenzeile_battery')
                  }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.schalter_kuchenzeile_battery')|float(0) > 50
                    else 'orange' if
                    states('sensor.schalter_kuchenzeile_battery')|float(0) > 20
                    else 'red' }}; }
              - type: section
                label: Bewässerungscomputer
              - type: custom:template-entity-row
                entity: sensor.bewasserungscomputer_1_battery
                name: Bewässerungscomputer 1
                state: " "
                secondary: >-
                  Ladezustand: {{
                  states('sensor.bewasserungscomputer_1_battery') }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.bewasserungscomputer_1_battery')|float(0) >
                    50 else 'orange' if
                    states('sensor.bewasserungscomputer_1_battery')|float(0) >
                    20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.bewasserungscomputer_2_battery
                name: Bewässerungscomputer 2
                state: " "
                secondary: >-
                  Ladezustand: {{
                  states('sensor.bewasserungscomputer_2_battery') }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.bewasserungscomputer_2_battery')|float(0) >
                    50 else 'orange' if
                    states('sensor.bewasserungscomputer_2_battery_battery')|float(0)
                    > 20 else 'red' }}; }
              - type: custom:template-entity-row
                entity: sensor.bewasserungscomputer_3_battery
                name: Bewässerungscomputer 3
                state: " "
                secondary: >-
                  Ladezustand: {{
                  states('sensor.bewasserungscomputer_3_battery') }}%
                card_mod:
                  style: >
                    state-badge { color: {{ 'green' if
                    states('sensor.bewasserungscomputer_3_battery')|float(0) >
                    50 else 'orange' if
                    states('sensor.bewasserungscomputer_3_battery')|float(0) >
                    20 else 'red' }}; }
      - type: custom:mushroom-template-card
        primary: Gartentor
        secondary: >-
          {% if is_state('switch.garten_shelly_tursummer', 'on') %} Offen {%
          else %} Geschlossen {% endif %}
        icon: >-
          {% if is_state('switch.garten_shelly_tursummer', 'on') %}
          mdi:lock-open {% else %} mdi:lock {% endif %}
        tap_action:
          action: perform-action
          perform_action: switch.turn_on
          target:
            entity_id: switch.garten_shelly_tursummer
        entity: switch.garten_shelly_tursummer
        view_layout:
          grid-column: 4 / span 2
          grid-row: 66 / span 20
          place-self: stretch
        card_mod:
          style: |
            :host {
              display: flex !important;
              width: 100% !important;
              height: 100% !important;
            }
            ha-card {
              width: 100% !important;
              height: 100% !important;
              flex: 1 1 100% !important;
            }
        color: >-
          {% if is_state('switch.garten_shelly_tursummer', 'on') %} green {%
          else %} grey {% endif %}
        icon_color: >-
          {% if is_state('switch.garten_shelly_tursummer', 'on') %} green {%
          else %} grey {% endif %}
        vertical: true
  - type: sidebar
    title: Kamera Vollbild
    path: kamera-garten
    cards:
      - type: custom:advanced-camera-card
        cameras:
          - camera_entity: camera.garten_hochauflosung
            live_provider: webrtc-card
            ptz:
              enabled: true
            webrtc_card:
              entity: camera.garten_hochauflosung
        menu:
          buttons:
            microphone:
              enabled: true
              permanent: false
              icon: mdi:microphone
              type: toggle
              priority: 64
    subview: true
  - type: sections
    path: energie-details
    title: Energie Details
    cards: []
    sections:
      - type: grid
        cards:
          - type: energy-date-selection
            grid_options:
              columns: 24
              rows: 1
          - type: vertical-stack
            cards:
              - type: energy-distribution
              - type: heading
                icon: ""
                heading: Energienutzung
                heading_style: title
                grid_options:
                  columns: 12
                  rows: 1
              - type: energy-usage-graph
              - type: heading
                heading: Solarproduktion
                heading_style: title
              - type: energy-solar-graph
          - type: vertical-stack
            cards:
              - type: energy-sources-table
              - type: heading
                heading: Einzelne Geräte
                heading_style: title
              - type: energy-devices-graph
        column_span: 2
      - type: grid
        cards:
          - type: gauge
            entity: sensor.solarbank_3_e2700_pro_temperatur
            name: Solarbank Temperatur
            unit: °C
            min: 0
            max: 65
            severity:
              green: 0
              yellow: 45
              red: 55
          - type: vertical-stack
            cards:
              - type: glance
                show_icon: true
                show_name: true
                show_state: true
                entities:
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv1
                    name: Süd 1
                    card_mod:
                      style: >
                        :host { --paper-item-icon-color: #3498db; color:
                        #3498db; font-weight: bold; }
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv2
                    name: Ost/West 1
                    card_mod:
                      style: >
                        :host { --paper-item-icon-color: #d4ac0d; color:
                        #d4ac0d; font-weight: bold; }
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv3
                    name: Ost/West 2
                    card_mod:
                      style: >
                        :host { --paper-item-icon-color: #e74c3c; color:
                        #e74c3c; font-weight: bold; }
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv4
                    name: Süd 2
                    card_mod:
                      style: >
                        :host { --paper-item-icon-color: #2ecc71; color:
                        #2ecc71; font-weight: bold; }
              - type: custom:button-card
                entity: sensor.solarbank_3_e2700_pro_solarleistung
                show_name: true
                name: "Auslastung:"
                show_state: false
                styles:
                  card:
                    - height: 40px
                    - padding: 0px 15px
                    - border: 1px solid rgba(255,255,255,0.1)
                  grid:
                    - grid-template-areas: "\"n prozent\""
                    - grid-template-columns: 1fr auto
                  name:
                    - justify-self: start
                    - font-size: 14px
                    - color: white
                  custom_fields:
                    prozent:
                      - font-weight: bold
                      - font-size: 16px
                      - color: |
                          [[[
                            const p = (parseFloat(states['sensor.solarbank_3_e2700_pro_solarleistung'].state) / 3000) * 100;
                            if (p < 10) return "#ff4d4d"; // Rot
                            if (p < 50) return "#ffd700"; // Gelb/Gold
                            return "#4caf50";             // Grün
                          ]]]
                custom_fields:
                  prozent: |
                    [[[ 
                      const watt = states['sensor.solarbank_3_e2700_pro_solarleistung'].state;
                      return ((parseFloat(watt) / 3000) * 100).toFixed(1) + ' %';
                    ]]]                    
              - type: entities
                entities:
                  - entity: sensor.solarbank_gesamtleistung
                    name: Gesamtleistung aktuell
                    card_mod:
                      style: >
                        :host { font-size: 0.9em; }

                        .state { font-weight: 900; font-size: 1.1em; text-align:
                        right; }
                  - entity: sensor.solarbank_3_e2700_pro_hauptakku_ladestand
                    name: Batterie Füllstand
                    icon: mdi:battery
                  - entity: sensor.solarbank_3_e2700_pro_hauptakku_ladestand
                    name: "Status / Voll um:"
                    icon: mdi:battery-clock
                    type: custom:template-entity-row
                    state: >
                      {% set soc =
                      states('sensor.solarbank_3_e2700_pro_hauptakku_ladestand')
                      | float(0) %} {% set power =
                      states('sensor.solarbank_3_e2700_pro_aufladeleistung') |
                      float(0) %} {% if soc >= 100 %}
                        Voll um {{ states.sensor.solarbank_3_e2700_pro_hauptakku_ladestand.last_changed.local().strftime('%H:%M') }} Uhr
                      {% elif power > 5 %}
                        Lädt mit {{ power | round(0) }} W
                      {% else %}
                        Keine Ladung
                      {% endif %}
              - type: history-graph
                entities:
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv1
                    name: Süd 1
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv2
                    name: Ost/West 1
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv3
                    name: Ost/West 2
                  - entity: sensor.solarbank_3_e2700_pro_solar_pv4
                    name: Süd 2
                hours_to_show: 24
      - type: grid
        cards:
          - type: vertical-stack
            cards:
              - type: heading
                heading: Eigenverbrauch
                heading_style: title
              - type: energy-solar-consumed-gauge
              - type: heading
                heading: Netto vom Netz bezogen
                heading_style: title
              - type: energy-grid-neutrality-gauge
              - type: heading
                heading: Gasverbrauch
                heading_style: title
              - type: energy-gas-graph
    footer: {}
    max_columns: 2
    subview: false

Auch bei mir gibt es wieder eine neuerung ich habe meine Heielberger Wallbox mit einem ESP 32 S3 versehen was kann der ESP alles er liest meinen Zähler Lesekopf aus und meine 3 ESP für die akuu Packs inklusive soc wieviel spannnung ect dazu gibt es verschiedene Betriebsmodi so kann ich Manuell Laden oder eben i Wintermodus der dann auch eine niedrigere PV erzeugung zulässt und den reststrom aus den Akkus nimmt und soit puffert bis zu einem gewissen Wert.

Ob das ganze funktioniert kann ich aber erst testen wenn mein E Auto da ist, genauso werde ich mir en Dashboard aufbauen aktuell ist nur 1 Phase angeschlossen zum Testen aber sie wird dauerhaft auf 3 Phasen betrieben da der Akku im Haus groß ist und ich so keine Phasen umschaltung brauche.

Nachtrag das 3 Dashboard dazu also die 3 te Version eine erarbiete ich mir noch

Hallo werte Community,

ich bin echt begeistert, welche Dashboards der eine oder andere am Start hat. Wie vielfältig doch die Anspüche eines jeden zu seinem Dashboard bestehen. Möchte auch mein Dashboard gern einmal Vorstellen. Am Ende ist es immer eine subjektive Wahrnehmung, wie das Dashboard aussehen soll.

Derzeit bin ich damit zu frieden. Es ist immer noch Luft nach oben. Fürs erste soll es aber reichen. Bei Fragen oder Anregungen haut in die Tastaturen. Freu mich darauf. :wink:

Hier mal die Startseite meins aktuellen mobilen Dashboards.

Die Unteransichten sind noch relativ unspektakulär, werden aber wenn wir im Haus eingezogen sind, an die Räumlichkeiten angepasst und optimiert.

Hier noch mein Dashbord auf dem Tablet in der Küche.

In dem unteren freien Feld werden bei Bedarf noch Unwetterwarnungen angezeigt.

Hallo,
ich sehe gerade dein Fritzbox Dashboard mit dem Gastzugang via QR-Code. Kannst du kurz beschreiben, wie du den Gastzugang zur Verfügung stellst? Ich habe eine 5690 Pro und hatte damit extreme Probleme. Ich hatte pro Tag per Script das Guest-WLAN-Kennwort geändert. Im Ergebnis hat mir das System aber das Haupt WLAN Kennwort geändert und ich kam nur per LAN auf meine Fritzbox. Das ganze hatte mit der alten 7590 ohne Probleme funktioniert.

Mit welcher App / Integration liesst du den Status aus? Änderst du auch per Automation das Guest-WLAN-Kennwort ?

Gruß
Martin

Das sollte aus den FritzBox Tools kommen, die dann eine image Entität bereit stellt, z.b.: image.fritz_box_7590_ui_gastzugang

Okay, danke. Teste ich mal.

Kennwörter kann man (scheinbar) nicht über Fritzbox Tools ändern. Richtig?
Den QR Code sehe ich aber.

Nein, nicht das ich wüsste.

Hallo MartyBr,

Ich nutze die Integration Fritz!Box Tools.

Und mittels:

type: picture
image_entity: image.fritz_box_7590_mikes_gastzugang

wird der QR-Code dargestellt.

Den Gastzugang habe ich gesondert in der Fritzbox eingestellt. Aber das kennst du ja sicher schon. Einzig muss bei mir noch der Gastzugang eingeschaltet werden, da er nicht dauerhaft zur Verfügung steht.

Ich hoffe ich konnte Dir weiterhelfen.

Das Passwort kann nur in der Fritzbox geändert werden. Aber wenn Du es in der Fritzbox geändert hast, wird es in der Integration aktualisiert.

Danke dir. Ich hatte das Thema etwas aus den Augen verloren, da ich ziemliche Probleme mit der 5690 Pro hatte. Die hat ja 3 Frequenzen: 2.4, 5 und 6 GHz. Und das sorgte für Konfusion bei Script: ich hatte eindeutig das Gäste WLAN ausgewählt und trotzdem hat das System immer das zentrale WLAN-Kennwort geändert. Ich habe daher alle erstmal raus geschmissen.

Hier nochmals etwas verfeinert mit der Logik dazu und de scheint zu funktionieren, also die hardware und Software steht aber das Auto kommt ja bald ich muss mirmal ein freiwilliges Opfer Suchen dem ich ein paar kWh in den Akku Tanken kann.

Sieht super aus! Könntest du den Code dafür teilen?
Ich suche genau danach

Hallo zusammen,

ich möchte euch mein aktuelles Home-Assistant-Dashboard vorstellen. Es heißt bei mir einfach Homi und ist über längere Zeit aus dem Rounded-Bubble-Design und verschiedenen Custom Cards entstanden. Mein Ziel war kein möglichst spektakuläres Dashboard, sondern eine Oberfläche, die im Alltag schnell verständlich ist, auf Desktop und Tablet funktioniert und sich später noch vernünftig pflegen lässt.

Der aktuelle Aufbau

Das Dashboard besteht aktuell aus 12 Ansichten und 115 Decluttering-Templates. Dazu kommen zwei eigene Navbar-Templates für Desktop und Tablet.

Neben der Startseite gibt es Raumansichten für Wohnen, Küche, Bad, Flur und Terrasse. Weitere Ansichten bündeln größere Themen wie Kaffeemaschine, 3D-Drucker, Energieverbrauch, Homelab, Batterien und Wetter. Ich gehe deshalb nicht auf jede Ansicht einzeln ein – wichtiger ist das gemeinsame System dahinter.

Fast alle Ansichten verwenden das Sections-Layout. Nur die Wetterseite nutzt wegen ihres besonderen Aufbaus ein eigenes Grid-Layout. Die normale Reihenfolge ist meistens:

  1. kompakte Topbar mit den wichtigsten Werten,
  2. Uhr beziehungsweise aktive Timer,
  3. mehrere thematische Kartengruppen,
  4. Detail-Popups,
  5. responsive Navigation am unteren Rand.

Optisch nutze ich dunkle blau-violette Flächen, große Rundungen, kompakte Schrift und möglichst wenig Schatten. Farben haben dabei meistens eine Bedeutung: Grün steht beispielsweise für aktiv oder in Ordnung, Orange für eine Warnung und Rot für einen kritischen Zustand.

Die wichtigsten Bausteine

Das Grundgerüst bilden vor allem diese Custom Cards:

  • Decluttering Card für wiederverwendbare Templates
  • Button Card für frei gestaltete Status-, Geräte- und Gruppenkarten
  • Bubble Card für Popups
  • Auto Entities für automatisch gefilterte Listen
  • Navbar Card für die Navigation auf Desktop und Tablet

Dazu kommen an passenden Stellen spezialisierte Karten, beispielsweise ApexCharts, die Energieverbrauchskarte oder Horseshoe-Anzeigen. Ich versuche aber nicht, jede Funktion mit der Button Card nachzubauen. Wenn eine native oder spezialisierte Karte eine Aufgabe besser löst, wird sie in das vorhandene Design eingebettet.

Warum so viele Templates?

115 Templates klingen zunächst nach sehr viel. Tatsächlich machen sie das Dashboard aber erst wartbar. Die Templates enthalten das Aussehen und die Logik, jedoch keine fest eingebauten Geräte. Die konkreten Entitäten werden erst in der jeweiligen Ansicht als Variablen übergeben.

Dadurch kann ich dieselbe Licht-, Status- oder Timerkarte in mehreren Räumen einsetzen. Ändere ich später Höhe, Schrift oder Farben eines gemeinsamen Templates, wird die Änderung überall übernommen.

Ein Beispiel ist die Statusgruppe auf der Startseite. Sie fasst eingeschaltete Lichter, offene Rollläden, den Sicherheitsstatus und kritische Batterien in vier kleinen Kacheln zusammen:

type: custom:decluttering-card
template: homi_group_home_status_overview
variables:
  - sensor_angeschaltete_lichter: sensor.dashboard_lichter_aktiv
  - sensor_offene_rollos: sensor.dashboard_rolllaeden_offen
  - sensor_status_sicherheit: sensor.dashboard_sicherheitsstatus
  - sensor_batterien_kritisch: sensor.dashboard_batterien_kritisch

Die hier gezeigten Entitäten sind absichtlich fiktiv.

Kartengruppen statt einzelner Sensorlisten

In den Ansichten versuche ich, zusammengehörende Dinge als eine visuelle Gruppe darzustellen. Eine Gruppe besitzt einen gemeinsamen Header und darunter zwei oder mehrere kompakte Kacheln. So bleiben beispielsweise Beleuchtung, Raumklima, Geräte, Sicherheit oder Steckdosen klar voneinander getrennt.

Die Beleuchtungsgruppe der Küche wird in der Ansicht nur noch mit zwei Entitäten aufgerufen:

type: custom:decluttering-card
template: homi_group_kueche_lights
variables:
  - light_deckenlicht: light.kueche_deckenlicht_beispiel
  - light_lichterkette: light.kueche_led_beispiel

Das Template baut daraus den Gruppenrahmen und zwei homi_tile_light-Kacheln. Tippen schaltet das Licht, ein längerer Druck öffnet die Detailansicht und die Kachel zeigt auch die Helligkeit an. Die eigentliche Ansicht bleibt dadurch sehr kurz.

Dasselbe Prinzip verwende ich unter anderem für den Kühlschrank, Rauchmelder, die Kaffeemaschine, den 3D-Drucker und meine Homelab-Systeme. Gerade bei komplexeren Geräten ist die Hauptkarte bewusst reduziert. Weitere Messwerte und Steuerungen liegen in einem Popup, statt die Übersicht zu überladen.

Timer, Popups und dynamische Listen

Timer sind bei mir eigene wiederverwendbare Kacheln mit Live-Countdown. Auf einigen Seiten ersetzen kompakte Timerkarten die Uhr, solange ein Timer aktiv ist. Eine Gruppe mit zwei Lüftungstimern sieht im Aufruf beispielsweise so aus:

type: custom:decluttering-card
template: homi_group_bad_timers
variables:
  - timer_duschen: timer.bad_lueftung_duschen_beispiel
  - timer_toilette: timer.bad_lueftung_toilette_beispiel

Für Details nutze ich Bubble-Card-Popups. Dort landen zum Beispiel Lichtsteuerungen, offene Kontakte oder Aktionen für virtuelle Maschinen. Gefährlichere Aktionen wie Neustart oder Herunterfahren haben zusätzlich einen Bestätigungsdialog.

Dynamische Listen werden mit Auto Entities erzeugt. Das nutze ich vor allem bei Batterien, eingeschalteten Lichtern und offenen Kontakten. Dadurch zeigt das Dashboard nur die Einträge, die gerade wirklich relevant sind, ohne dass ich jede Karte von Hand ein- und ausblenden muss.


Responsive Nutzung

Das Dashboard ist nicht nur für einen Bildschirm gebaut. Die Sections ordnen sich abhängig von der verfügbaren Breite neu an. Zusätzlich gibt es zwei Navbar-Varianten: eine für Desktop und eine für Tablet. Auch einzelne Karten können über Sichtbarkeitsregeln nur auf bestimmten Displaygrößen erscheinen.

Die Oberfläche bleibt dadurch auf dem großen Monitor übersichtlich, ohne auf dem Tablet zu einer unlesbaren Miniaturansicht zu werden.

Mein Fazit

Der Aufbau hat anfangs mehr Arbeit gemacht als ein Dashboard aus einzelnen Standardkarten. Inzwischen zahlt sich das Template-System aber aus: Neue Räume oder Geräte lassen sich aus vorhandenen Kartenfamilien zusammensetzen und gemeinsame Änderungen müssen nur an einer Stelle erfolgen.

Für mich ist Homi inzwischen ein guter Mittelweg aus Optik, Bedienbarkeit und Wartbarkeit. Es ist weiterhin ein laufendes Projekt, aber die grundlegende Struktur steht: kompakte Übersichten, wiederverwendbare Templates und Details nur dort, wo man sie wirklich braucht.

Falls Interesse besteht, kann ich einzelne Kartenfamilien oder Templates später noch genauer zeigen.

Highlights:






Ich arbeite gerade an einem neuen globalen Theme (Danke an Piranha1605 für HATG). Es gibt einen Dark und Light Mode und der 3D Card-Mod Hintergrund lässt sich per Flag abschalten (wenn man Flat-Design bevorzugt) Es ist noch nicht perfekt, funktioniert aber schon so gut das ich es bereits bei mir aktiv nutze. Für den 3D-Hintergrund wird card-mod benötigt und die Themes müssen über die configuration.yaml geladen werden.

Hier schonmal ein paar Sreenshots:




Super geworden.Ich bin gerade dabei die Kinderkrankheiten zu fixen.Hast du noch was gefunden? Und welche Version hast du gerade am laufen? Ich bin gerade dabei dem Programm beizubringen was zu was gehört das man im Prinzip nur noch eine Seite braucht und der rest Automatisch an alle anderen Karten und an Bubble und Mushroom angepasst wird.

ich hab das zweite Bild bei deiner Theme als wallpaper gesetzt.Ist richtig gut geworden.

Ich hab das mit den Farben usw. alles mit der Version 0.2.12 gemacht. Dann den ganzen card-mod code manuell entfernt und den card-mod Code von mir manuell hinzugefügt, weil ich nicht wusste wie ich es sonst machen sollte. Bubblecard nutze ich nur das Popup und Mushroom-card garnicht. Weiss also nicht wie es da aussieht.
Ich habe unter dark und light jeweils noch ein paar Variablen gesetzt und an Ende dann den card-mod Code der dann mit den übergebenen Werten die am Anfang von dark und light stehen entsprechend den Hintergrund für dark und light unterschiedlich gerendert für alle Karten, ausser glaub ich 3 bisher. Und es wird ein Flag abgefragt, was ich per Helfer setzen kann, ob card-mod genutzt werden soll oder nicht (für Flat-Design ohne card-mod). Wenn der Helfer nicht extistiert wird card-mod ausgeführt. achja für die Textfarbe für die Überschriften wird noch im card-mod Teil gesetzt, weil es da keinen Eintrag für gab.
Wenn man das alles auch direkt im Editor anpassen kann, wäre das natürlich eleganter. Guck es dir mal an, ob man das auch direkt im Editor machen könnte.
Achja ich weiss nicht, ob das in der neuen Version schon gefixt ist, der Theme-Name wurde immer klein geschrieben gespeichert (hab ich von Hand geändert)

Ich hänge mal die bisherige Version mal an, auch für Andere die es mal probieren wollen.

Awesome-Blue.yaml (46,4 KB)

Hallo zusammen,

ich möchte euch mein aktuelles Home-Assistant-Dashboard vorstellen

QHOME Pool ist mein Home-Assistant-Projekt zur Visualisierung und Steuerung meiner kompletten Pooltechnik. Ziel war es, Wetter, Wasserqualität, Wärmepumpe, Filteranlage und Dosierung in einer modernen, appähnlichen Oberfläche zusammenzuführen. Statt möglichst viele Daten anzuzeigen, steht der aktuelle Zustand und die Frage „Muss ich heute etwas tun?“ im Mittelpunkt. Das Dashboard ist aktuell noch vollständig auf meine eigene Home-Assistant-Installation zugeschnitten.