Zum Inhalt

Smart-Home-Zentrale v2 – Bauplan (Recherche 09.10.2026)

Reine Recherche, keine Änderung an HA oder Repos. Ist-Stand lesend geprüft: HA core-2026.7.2 (Container, Storage-Dashboards), Dashboard /smart-home-zentrale (9 Views: start, 7× raum-<raum> als Subview, einstellungen; Kartentypen mushroom-template ×37, tile ×41, markdown ×39, heading ×43, thermostat ×7, history-graph ×14, numeric-input ×32). HACS-Lovelace installiert u. a. button-card v7.0.1, Mushroom v5.2.3, Bubble Card v3.4.1, mini-graph-card v0.13.0, card-mod v4.2.1, Kiosk Mode v14.2.1, layout-card v2.4.7, modern-circular-gauge v0.15.0. Repo-Daten per gh api am 09.10.2026.

1. Kurzbewertung des Mockups (was zählt)

Quelle: Claude-Design Smart-Home-Zentrale.dc.html (vier Ansichten). Die Designsprache ist flach-dunkel, nicht Glas: keine Blur-Effekte, keine Schatten, nur ein 1-px-Rand rgba(255,255,255,.04). Das ist gut, weil es ohne CSS-Eingriffe erreichbar ist.

Merkmal Wert im Mockup Erreichbar mit
Hintergrund / Karte / Innenfläche #111318 / #1c1f26 / #242833 (#262a33 für Pills) Theme (primary-background-color, ha-card-background)
Text / Sekundär / gedämpft #e9ebef / #9aa0aa / #6c727c, #5d636d Theme
Statusfarben heizt #ff9f43, Fenster #4ea8ff, manuell #b48cff, Störung #ff5c5c, Eco/aus #9aa0aa, neutral #d5d9e0, ok #5fd38d, Feuchte #4dd0e1, Gelber Sack #fdd835; Tönung = Farbe mit 14–18 % Alpha button-card-Template (JS-Map), Theme für Thermostat-Ring
Radien Karten 20–24 px, Innenkacheln 16–18 px, Icon-Quadrate 13–14 px (40–44 px groß), Chips 10 px, Pills 12 px Theme (ha-card-border-radius, ha-tile-icon-border-radius), button-card styles
Abstände Kacheln 12 px, Karten 16–18 px, Seitenrand 24/28 px Theme (ha-view-sections-column-gap, -row-gap)
Typografie Figtree 300–600; Uhr 46 px/300; Ist 36 px/500 (iPhone 27 px), Raumname 15 px/600, Status 12,5 px/600 farbig, Kartentitel 16 px/600 Font: Systemschrift (SF Pro) per Theme; Größen: button-card
Raumkachel Icon-Quadrat oben links (getönt nach Zustand), Chevron rechts, Name, Ist groß + „°C“ klein, „Ziel 21 °C“, Statuszeile unten (Icon + Text in Statusfarbe), min-height 236 px, 7 Spalten button-card mit custom_fields + CSS-Grid
Statuschip Text + Icon in Statusfarbe auf getönter Fläche, Radius 10 px button-card; näherungsweise Heading-Badges
Thermostat Ring 300 px, Strich 18 px, 270°-Bogen, Ziel 70 px zentriert, „ZIEL“-Label, Ist klein darunter, −/+ rund 58 px, „Schritt 0,5 °C“, Chip „Heizt“ im Kopf native Thermostat-Karte (Ring, große Zahl, ±-Knöpfe im Frontend-Code belegt)
Übersteuerung 3 Buttons (Titel, Tag „STANDARD“ lila uppercase, Untertext), aktiver Button getönt mit Rand; Leiste „Nächster Zeitplan“ button-card mit state-Styles
Verlauf 24 h Temperatur weiß 3 px, Ziel lila gestrichelt, Feuchte cyan als Fläche auf zweiter Achse, „jetzt“-Marker native history-graph (Farben je Entität seit 2026.6) – zweite Achse nur näherungsweise (zwei Diagramme)
Infokarten Icon-Quadrat getönt, Label klein, Wert 19 px/600, Untertext button-card-Template
Einstellungen Listenzeilen mit Icon-Quadrat, Titel/Untertitel, Wert-Pill; Betriebsart als Segment-Control (aktiv weiß); Temperaturen mit −/+ Stepper entities (Uhrzeiten), button-card (Segment), tile + numeric-input Stil buttons
Schnellaktionen 3 Buttons mit Icon-Quadrat, Titel 17 px, Untertext; aktiver Zustand mit farbigem Rand button-card mit confirmation
Müll Zeilen: Icon-Quadrat, Fraktion, Datum, Pill „Morgen“ (gelb gefüllt) / Wochentag (grau) button-card-Zeilen auf 2 WCS-Sensoren
iPhone 2 Kacheln je Zeile (letzte über 2 Spalten), Ist 27 px, „/ 21 °C“, Schnellaktionen 3-spaltig vertikal, Müll als Liste gleiche Templates, CSS clamp(); Grid-Karte je Breite

Nicht erreichbar ohne CSS-Injektion: die Schrift Figtree (kein @font-face per Theme), die Feuchte-Fläche in demselben Diagramm wie die Temperatur, der exakte Ring-Winkel (270°) und die Skalenbeschriftung 12°/28°. Alles andere geht ohne card-mod.

2. Empfohlener Stack

Grundsatz: native Karten + Theme für Layout, Thermostat, Verlauf, Eingaben; button-card (installiert) für alles, was freie Typografie und zustandsabhängige Farben braucht. Keine neue HACS-Abhängigkeit nötig.

Baustein Version / Pflege Wofür Begründung Quelle
Sections-View (nativ) HA 2026.7–2026.10 Grundgerüst, Spalten, Sichtbarkeit column_span, grid_options, visibility (ab 2026.10 auch Template-Bedingung), theme: je View, background: je View Views, Release 2026.10
heading (nativ) – Kopfzeilen, Legende, Raumkopf mit Chips Badges entity/button mit color (Hex), show_state, Aktionen und visibility je Badge (hui-heading-badge.ts) Heading
thermostat (nativ) – Regler auf Raumseiten Ring + große Zielzahl + ±-Knöpfe (ha-state-control-climate-temperature.ts: mdiMinus/mdiPlus/ha-big-number), show_current_as_primary, Features climate-preset-modes Thermostat
history-graph (nativ) – Verlauf 24 h color je Entität (2026.6), min_y_axis/max_y_axis, fit_y_data, expand_legend, hours_to_show (Frontend hui-history-graph-card.ts) History graph
tile (nativ) – Wetter, Aufheizrate, Preset-Temperaturen color (Hex), vertical, hide_state, state_content, features_position: inline (ab 2026.9 repariert), numeric-input Stil buttons Tile, Release 2026.9
clock, entities, grid, markdown (nativ) – Uhr, Uhrzeit-Helfer, 7er-Raster, Platzhalter clock_size: large, no_background; grid mit columns: 7, square: false Clock
button-card custom-cards/button-card v7.0.1 (13.11.2025), 7.1.0-dev.2 (21.04.2026); 2 510 ★, 34 offene Issues; Maintainer antwortet (Issues #1208/#1213 im 09/2026 geschlossen); keine Meldungen zu 2026.8/9/10 gefunden Raumkacheln, Statuschips, Schnellaktionen, Übersteuerung, Müll-Zeilen, Sommer/Winter, Infokarten Freie CSS-Grid-Layouts (custom_fields, styles), JS-Templates, state-Styles, confirmation (templatebar), section_mode: true + grid_options für Sections, button_card_templates im Raw-Editor des Storage-Dashboards. Eigenes Shadow-DOM, greift nicht in HA-Interna ein (anders als card-mod) Doku, Custom Fields, Templates, Sections
Theme zentrale-dunkel (YAML in themes/) nativ Farben, Radien, Abstände, Schrift Alle Variablen im Frontend-Code belegt (ha-card.ts, hui-sections-view.ts, typography.globals.ts); je View per theme: zuweisbar → gilt auch auf Robins iPhone ohne Profiländerung Themes
Template-Sensoren (nativ) – Status je Raum, Zusammenfassung, Lüftung, ETA, nächster Zeitplan Verlagert die 4 690-Zeichen-Jinja-Logik aus 7×4 Kartenfeldern in testbare Entitäten; button-card (JS) kann kein Jinja Template
Waste Collection Schedule (installiert) v2.35.0 (27.09.2026), Push 08.10.2026, 2 255 ★ 2 Sensoren „nächster/übernächster Abholtag“ GUI-Sensoren mit event_index, value_template (value.types, value.daysTo, value.date), add_days_to installation.md
iOS-Companion-Kiosk (nativ, Labs) App 2026.9.3 Header/Sidebar weg, Bildschirmschoner, tägliches Neuladen ersetzt Kiosk-Mode-Plugin; tägliches kiosk_reload ist zugleich die Absicherung gegen button-card #1211 Companion-Doku

Bewusst nicht: Mushroom (bleibt installiert, wird in v2 nicht mehr gebraucht – kann keine große Zahl und keine getönten Chips ohne card-mod), Bubble Card (sehr aktiv, v3.4.1 vom 25.09.2026, eigene styles: ohne card-mod – aber eigene „Bubble“-Optik, Mockup-Treue nur mit viel Gegen-CSS; Fallback, falls button-card bricht), Streamline Card (v0.2.2 vom 24.05.2026, seitdem kein Push, 35 offene Issues), decluttering-card-plus (Repo seit 18.08.2026, 16 ★ – zu jung), mini-graph-card (nur falls zweite Achse zwingend, s. §4), UIX v8.4.0 (07.10.2026; nur falls später echtes CSS nötig – z. B. Figtree), card-mod/ApexCharts/simple-thermostat (hart ausgeschlossen).

Neu anzulegen: 1 Theme-Datei; Template-Sensoren (s. §3.0); 2 WCS-Sensoren per Integrations-Optionen; button_card_templates im Dashboard. Keine HACS-Installation.

3. Bauplan je Ansicht

3.0 Vorarbeit: Status in Entitäten (Voraussetzung für alles Folgende)

Je Raum ein Status, der von Kachel, Raumkopf, Übersteuerungs-Buttons und iPhone gleich gelesen wird. Zustandscodes (Reihenfolge wie in v1): alt, stoerung, notbetrieb, fenster, aus, boost, manuell_gehalten, manuell_bis, grund, manuell_zeitplan, abwesend, frost, heizt, eco, ziel.

Farbgruppen (JS-Map im button-card-Template): stoerung|notbetrieb → rot, fenster → blau, manuell_* → lila, heizt|boost → orange, eco|abwesend|frost|aus → grau, ziel|grund → neutral, alt → gedämpft.

Zwei Wege: - A (empfohlen, falls /config versioniert ist): YAML template:-Sensor je Raum mit Attributen (kind, text, icon, naechster_zeitplan, lueftung, eta) – 7 Sensoren + 1 Zusammenfassung. Attribute sind seit 2026.9 vollständig templatebar. - B (ohne Dateizugriff): UI-Helfer „Template-Sensor“ (ha-mcp ha_config_set_helper), je Raum 5 Stück (Status-Code, Status-Text, Zeitplan, Lüftung, ETA) = 36 Helfer.

Templates vorher mit ha_eval_template gegen VTherm 10.5.0-Attribute prüfen (v1-Logik übernehmen, sie ist für das Bad getestet).

3.1 Startseite (iPad)

View: type: sections, max_columns: 3, theme: zentrale-dunkel, dense_section_placement: true.

Element Karte Hinweis
Uhr + Datum clock (clock_size: large, no_background: true) + markdown text_only für das deutsche Datum 2026.8-Entwicklerblog nennt einen Datumsformat-Editor für die Clock-Card – nach dem Update prüfen, dann Markdown weg
Wetter tile auf weather.openweathermap, color: "#cfd4dc" oder button-card wetter_chip für die Mockup-Form
Gerätestatus button-card info_chip auf sensor.uberwachte_gerate_offline Farbe grün/amber/rot per JS
Zahnrad heading-Badge type: button, icon: mdi:cog-outline, navigate nativ
Überschrift „Heizung“ + Zusammenfassung + Legende heading mit Badges: entity (Zusammenfassungs-Sensor, show_state) und 5× button (icon: mdi:circle, color Hex, text) Legende komplett nativ
7 Raumkacheln grid (columns: 7, square: false) mit 7× button-card raum_kachel; zweite grid (columns: 2) für Handy, umgeschaltet per visibility: condition: screen s. Schnipsel 3.1.a
Schnellaktionen Section column_span: 2, 3× button-card schnellaktion mit confirmation s. 3.1.b
Müllabfuhr Section column_span: 1, 2× button-card muell_zeile s. 3.1.c
Platzhalter Licht/Medien/Sicherheit button-card mit gestricheltem Rand, tap_action: none oder weglassen

3.1.a Raumkachel (button-card-Template, einmal im Raw-Editor unter button_card_templates)

button_card_templates:
  raum_kachel:
    section_mode: true
    show_icon: false
    show_name: false
    show_state: false
    variables:
      raum: badezimmer          # wird je Kachel überschrieben
      name: Bad
      icon: mdi:shower
      status: sensor.heizung_badezimmer_status   # Attribute: kind, text, icon
    entity: '[[[ return "climate.heizung_" + variables.raum ]]]'
    tap_action:
      action: navigate
      navigation_path: '[[[ return "/smart-home-zentrale/raum-" + variables.raum ]]]'
    custom_fields:
      kopf: |
        [[[
          const C = {heat:'#ff9f43', window:'#4ea8ff', manual:'#b48cff', error:'#ff5c5c', eco:'#9aa0aa', idle:'#d5d9e0', alt:'#6c727c'};
          const G = {stoerung:'error', notbetrieb:'error', fenster:'window', boost:'heat', heizt:'heat',
                     manuell_gehalten:'manual', manuell_bis:'manual', manuell_zeitplan:'manual',
                     eco:'eco', abwesend:'eco', frost:'eco', aus:'eco', ziel:'idle', grund:'idle', alt:'alt'};
          const kind = states[variables.status]?.attributes?.kind ?? 'alt';
          const c = C[G[kind] ?? 'idle'];
          return `<div style="display:flex;justify-content:space-between;align-items:center">
            <div style="width:40px;height:40px;border-radius:13px;background:${c}26;color:${c};display:flex;align-items:center;justify-content:center">
              <ha-icon icon="${variables.icon}" style="--mdc-icon-size:22px"></ha-icon></div>
            <ha-icon icon="mdi:chevron-right" style="color:#5d636d;--mdc-icon-size:18px"></ha-icon></div>`;
        ]]]
      name: '[[[ return variables.name ]]]'
      ist: |
        [[[
          const t = entity?.attributes?.current_temperature;
          const s = (t === undefined || t === null) ? '–' : Number(t).toFixed(1).replace('.', ',');
          return `<span style="font-size:clamp(27px,3vw,36px);font-weight:500;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums">${s}</span><span style="font-size:15px;color:#9aa0aa;margin-left:3px">°C</span>`;
        ]]]
      ziel: |
        [[[
          const z = entity?.attributes?.temperature;
          return 'Ziel ' + (z == null ? '–' : String(z).replace('.0','').replace('.', ',')) + ' °C';
        ]]]
      status: |
        [[[
          const a = states[variables.status]?.attributes ?? {};
          const C = {heat:'#ff9f43', window:'#4ea8ff', manual:'#b48cff', error:'#ff5c5c', eco:'#9aa0aa', idle:'#d5d9e0', alt:'#6c727c'};
          const G = {stoerung:'error', notbetrieb:'error', fenster:'window', boost:'heat', heizt:'heat',
                     manuell_gehalten:'manual', manuell_bis:'manual', manuell_zeitplan:'manual',
                     eco:'eco', abwesend:'eco', frost:'eco', aus:'eco', ziel:'idle', grund:'idle', alt:'alt'};
          const c = C[G[a.kind ?? 'alt'] ?? 'idle'];
          return `<span style="color:${c};display:flex;gap:6px;align-items:flex-start;font-size:12.5px;font-weight:600;line-height:1.3">
            <ha-icon icon="${a.icon ?? 'mdi:check'}" style="--mdc-icon-size:15px"></ha-icon><span>${a.text ?? ''}</span></span>`;
        ]]]
    styles:
      card:
        - padding: 14px
        - border-radius: 20px
        - background: '#1c1f26'
        - border: 1px solid rgba(255,255,255,.04)
        - box-shadow: none
      grid:
        - grid-template-areas: '"kopf" "name" "ist" "ziel" "status"'
        - grid-template-rows: min-content min-content min-content min-content 1fr
        - row-gap: 8px
      custom_fields:
        name: [{font-size: 15px}, {font-weight: 600}, {justify-self: start}, {margin-top: 4px}]
        ist: [{justify-self: start}]
        ziel: [{font-size: 13px}, {color: '#9aa0aa'}, {justify-self: start}]
        status: [{justify-self: start}, {align-self: end}]

Einsatz je Raum:

type: custom:button-card
template: raum_kachel
variables: {raum: kueche, name: Küche, icon: mdi:stove, status: sensor.heizung_kueche_status}
grid_options: {columns: 6, rows: 4}     # im 2er-Grid fürs Handy; im 7er-Grid ohne grid_options

Die doppelte Farb-Map wandert in ein variables-Objekt des Templates (button-card wertet variables als JS aus), hier nur zur Lesbarkeit ausgeschrieben.

3.1.b Schnellaktion mit Bestätigung (deutsch)

type: custom:button-card
template: schnellaktion                 # Icon-Quadrat, Titel, Untertext wie raum_kachel
name: Alle Eco
label: Alle Räume auf Eco-Temperatur
icon: mdi:leaf
entity: input_boolean.heizung_abwesend   # nur für den aktiven Zustand bei „Abwesend“
tap_action:
  action: perform-action
  perform_action: script.heizung_alle_eco
  confirmation:
    title: Alle Räume auf Eco?
    text: Alle Raumregler wechseln bis zum nächsten Zeitplanwechsel auf Eco.
    confirm_text: Ja, alle Eco
    dismiss_text: Abbrechen

Dasselbe confirmation-Objekt (text, title, confirm_text, dismiss_text, exemptions) gilt für native button/tile-Karten (Actions-Doku). Der HA-Dialog ist ein Standarddialog; Texte frei, Buttons deutsch über confirm_text/dismiss_text.

3.1.c Müll mit 2 Fraktionen

WCS-Integration → „Konfigurieren“ → Sensoren (GUI unterstützt event_index, value_template, add_days_to; nur source_index ist YAML-only):

Sensor event_index value_template weitere Optionen
sensor.muell_naechster_abholtag 0 {{ value.types \| join(' + ') }} add_days_to: true, details_format: upcoming, count: 4
sensor.muell_uebernaechster_abholtag 1 {{ value.types \| join(' + ') }} wie oben

event_index zählt Abholtage, nicht Fraktionen („The next pickup date has event_index 0“) – zwei Fraktionen am selben Tag landen also in einem Sensor als „Gelber Sack + Restmüll“. Attribute: daysTo (0 = heute, 1 = morgen), types.

type: custom:button-card
template: muell_zeile
entity: sensor.muell_naechster_abholtag
custom_fields:
  icon: |
    [[[
      const I = {'Restmüll':'mdi:trash-can-outline','Gelber Sack':'mdi:recycle','Papier':'mdi:newspaper-variant-outline','Bioabfall':'mdi:leaf'};
      const K = {'Gelber Sack':'#fdd835','Bioabfall':'#8bc34a'};
      return entity.state.split(' + ').map(t => `<ha-icon icon="${I[t] ?? 'mdi:delete-outline'}" style="color:${K[t] ?? '#cfd4dc'};--mdc-icon-size:22px"></ha-icon>`).join('');
    ]]]
  name: '[[[ return entity.state ]]]'
  datum: |
    [[[
      const d = Number(entity.attributes.daysTo);
      const dt = new Date(Date.now() + d*86400000);
      return dt.toLocaleDateString('de-DE', {weekday:'long', day:'numeric', month:'short'});
    ]]]
  pill: |
    [[[
      const d = Number(entity.attributes.daysTo);
      const t = d === 0 ? 'Heute' : d === 1 ? 'Morgen' : new Date(Date.now()+d*86400000).toLocaleDateString('de-DE',{weekday:'short'});
      const hot = d <= 1;
      return `<span style="font-size:13px;font-weight:${hot?700:600};color:${hot?'#111318':'#cfd4dc'};background:${hot?'#fdd835':'rgba(255,255,255,.07)'};border-radius:10px;padding:5px 10px">${t}</span>`;
    ]]]
tap_action: {action: more-info, entity: calendar.bremer_stadtreinigung}

Fraktionsnamen (Restmüll, Gelber Sack, …) müssen den tatsächlichen Typnamen bzw. alias der Quelle c_trace_de entsprechen – vor dem Bau aus dem Kalender ablesen. Optional zusätzlich je Fraktion ein Sensor mit types: [Papier] für die Mehr-Info-Ansicht.

3.2 Raumseite (Subview je Raum, 7×, erzeugt per Skript aus einer Vorlage)

View: subview: true, back_path: /smart-home-zentrale/start, max_columns: 3.

Element Karte
Kopf (Zurück, Icon, Name, „Ist 20,7 °C · Luftfeuchte 64 %“, Statuschip, Uhr) heading (heading_style: title, icon, tap_action: navigate zurück) mit Badges: entity Ist (show_state), entity Feuchte, und je Statusgruppe ein entity-Badge auf den Status-Sensor mit color Hex + visibility (condition: state, attribute: kind) → nur der passende Chip ist sichtbar. Heading-Badges haben keinen Hintergrund (Mockup-Tönung nur mit button-card status_chip)
Thermostat nativ, s. 3.2.a
Übersteuerung A/B/C 3× button-card uebersteuerung mit state-Highlight; visibility wie v1 (heizung_neu_<raum> an, Regler nicht unavailable)
„Nächster Zeitplan“ tile (hide_state: false, icon: mdi:calendar-clock) auf Attribut/Sensor naechster_zeitplan, oder button-card leiste
Verlauf 24 h 2× history-graph untereinander (Section column_span: 2), s. 3.2.b
Lüftungshinweis, Aufheizrate 2× button-card info_karte (Icon-Quadrat cyan/orange, Label, Wert 19 px, Untertext aus Sensor-Attribut lueftung bzw. eta)

3.2.a Thermostat

type: thermostat
entity: climate.heizung_badezimmer
name: Thermostat
show_current_as_primary: false        # Ziel groß, Ist klein – wie im Mockup
features:
  - type: climate-preset-modes
    style: icons
    preset_modes: [comfort, eco, boost, frost]
grid_options: {columns: 12, rows: 8}
visibility:
  - {condition: state, entity: input_boolean.heizung_neu_badezimmer, state: "on"}
  - {condition: state, entity: climate.heizung_badezimmer, state_not: unavailable}

Schrittweite 0,5 °C kommt aus target_temp_step des VTherm-Reglers. Die Ringfarbe folgt hvac_action (Theme-Variable state-climate-heat-color → #ff9f43); das Übersteuerungs-Lila des Mockups liegt damit nur auf Chip und Buttons, nicht auf dem Ring.

3.2.b Verlauf

type: history-graph
hours_to_show: 24
expand_legend: false
min_y_axis: 16
max_y_axis: 24
fit_y_data: true
entities:
  - entity: sensor.badezimmer_temperature          # Ist (weiß)
    name: Temperatur
    color: "#e9ebef"
  - entity: climate.heizung_badezimmer             # Ziel + Heizphasen
    name: Ziel
    color: "#b48cff"
grid_options: {columns: 24, rows: 6}
---
type: history-graph
hours_to_show: 24
min_y_axis: 40
max_y_axis: 90
entities:
  - entity: sensor.badezimmer_humidity
    name: Feuchte
    color: "#4dd0e1"
grid_options: {columns: 24, rows: 3}

Ob climate.* im History-Graph Ziel- und Ist-Linie zeichnet, war schon am 06.10. offen – am Gerät prüfen; sonst sensor.heizung_<raum>_target-Attribut über einen Template-Sensor spiegeln. Eine echte zweite Achse im selben Diagramm bietet nur mini-graph-card (y_axis: secondary; installiert v0.13.0, Release 05/2025, Dev-Builds bis 10/2026) – Option, nicht Empfehlung.

3.3 Einstellungen (Subview)

Element Karte
Zeitplan (5 Uhrzeiten) entities mit input_datetime.heizung_* (Zeitfeld direkt editierbar, Zeile = Icon + Name + Wert – nah am Mockup)
Betriebsart Sommer/Winter 2× button-card segment in horizontal-stack, s. 3.3.a
Grundtemperatur Wohnzimmer tile input_number.heizung_wohnzimmer_grundtemperatur + numeric-input style: buttons
Presets je Raum tile + numeric-input style: buttons (wie v1, 32 Karten) – alternativ entities je Raum mit vier number.*-Zeilen (kompakter)

3.3.a Sommer/Winter ohne englische Optionsnamen

type: horizontal-stack
cards:
  - type: custom:button-card
    template: segment
    entity: select.central_configuration_central_mode
    name: Winter
    icon: mdi:snowflake
    state: [{value: Auto, styles: {card: [{background: '#e9ebef'}, {color: '#111318'}]}}]
    tap_action:
      action: perform-action
      perform_action: select.select_option
      target: {entity_id: select.central_configuration_central_mode}
      data: {option: Auto}
      confirmation: {title: Heizperiode starten?, text: "Alle Räume folgen wieder dem Zeitplan.", confirm_text: Winter, dismiss_text: Abbrechen}
  - type: custom:button-card
    template: segment
    entity: select.central_configuration_central_mode
    name: Sommer
    icon: mdi:white-balance-sunny
    state: [{value: Frost protection, styles: {card: [{background: '#e9ebef'}, {color: '#111318'}]}}]
    tap_action:
      action: perform-action
      perform_action: select.select_option
      target: {entity_id: select.central_configuration_central_mode}
      data: {option: Frost protection}
      confirmation: {title: Heizung aus?, text: "Thermostate halten nur noch Frostschutz.", confirm_text: Sommer, dismiss_text: Abbrechen}

Rein nativ ginge es mit 4 tile-Karten (2 aktiv-, 2 inaktiv-gestylt) und visibility auf den Select-Zustand – mehr Karten, weniger Treue.

3.4 iPhone

Keine eigene View: Sections brechen bei < 768 px auf eine Spalte um. Zusätzlich: - Raumkacheln: zweites grid (columns: 2) mit visibility: condition: screen, media_query: "(max-width: 767px)"; das 7er-Grid bekommt (min-width: 768px). Letzte Kachel per grid_options: {columns: 12} über die volle Breite. - Ist-Größe skaliert per clamp(27px, 3vw, 36px) im Template (s. o.); Ziel als „/ 21 °C“ nur bei schmaler Breite: variables.kompakt: true in den Handy-Instanzen. - Schnellaktionen: Template-Variante vertikal: true (Icon über Titel, kein Untertext). - Müll: dieselben zwei Zeilen in einer Karte.

4. Theme-Vorschlag zentrale-dunkel (ohne card-mod)

Datei themes/zentrale-dunkel.yaml (die Instanz lädt HACS-Themes, also existiert themes: !include_dir_merge_named). Zuweisung per theme: zentrale-dunkel in allen 9 Views – kein Profilwechsel nötig, gilt auf iPad und iPhone. modes: dark: sorgt dafür, dass HA die Dunkel-Basis (Dialoge, Dropdowns) lädt.

zentrale-dunkel:
  modes:
    dark:
      # Flächen
      primary-background-color: "#111318"
      secondary-background-color: "#111318"
      lovelace-background: "#111318"
      card-background-color: "#1c1f26"
      ha-card-background: "#1c1f26"
      ha-card-border-width: "1px"
      ha-card-border-color: "rgba(255,255,255,0.04)"
      ha-card-border-radius: "22px"
      ha-card-box-shadow: "none"
      ha-dialog-surface-background: "#1c1f26"
      # Text
      primary-text-color: "#e9ebef"
      secondary-text-color: "#9aa0aa"
      disabled-text-color: "#6c727c"
      divider-color: "rgba(255,255,255,0.06)"
      # Akzente
      primary-color: "#b48cff"          # Slider, aktive Controls → Mockup-Lila
      accent-color: "#ff9f43"
      state-climate-heat-color: "#ff9f43"
      state-climate-idle-color: "#d5d9e0"
      state-climate-off-color: "#9aa0aa"
      state-climate-auto-color: "#b48cff"
      error-color: "#ff5c5c"
      warning-color: "#ff9f43"
      success-color: "#5fd38d"
      info-color: "#4ea8ff"
      # Typografie (Figtree ist ohne @font-face nicht ladbar → Systemschrift)
      ha-font-family-body: "-apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif"
      ha-font-family-heading: "-apple-system, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif"
      ha-font-weight-heading: "600"
      ha-font-smoothing: antialiased
      # Sections-Layout
      ha-view-sections-column-gap: "16px"
      ha-view-sections-row-gap: "12px"
      ha-view-sections-column-min-width: "300px"
      ha-view-sections-extra-top-margin: "0px"
      # Tile/Heading-Details
      ha-tile-icon-border-radius: "13px"
      ha-border-radius-lg: "16px"
      ha-border-radius-xl: "18px"
      ha-border-radius-pill: "10px"

Alle Schlüssel sind im Frontend-Quellcode (Tag 20260729.7 = HA 2026.8 und dev) vorhanden: ha-card.ts (--ha-card-background, --ha-card-backdrop-filter, --ha-card-box-shadow, --ha-card-border-radius, --ha-card-border-width, --ha-card-border-color), hui-sections-view.ts (--ha-view-sections-column-gap, -row-gap, -row-height, -column-min-width, -column-max-width, -extra-top-margin, -narrow-column-gap), typography.globals.ts (--ha-font-family-body/-heading, --ha-font-size-scale, --ha-font-weight-*), core.globals.ts (--ha-border-radius-*, --ha-space-*), hui-tile-card.ts (--ha-tile-icon-border-radius, --tile-color). HA warnt, dass außer primary-color/accent-color/state-* nichts garantiert stabil ist (Frontend-Doku) – Folge eines Bruchs wäre aber nur ein Rückfall auf die Standardoptik, kein Funktionsverlust.

Glas (optional, nicht im Mockup): ha-card-backdrop-filter: "blur(18px) saturate(140%)" plus ha-card-background: "rgba(28,31,38,0.72)" und ein View-background (Optionen image, opacity, size, alignment, repeat, attachment; ab 2026.9 auch dashboardweit per UI). Für ein 24/7-Kiosk auf dem iPad Pro 1. Gen. nicht empfohlen.

5. Risiken, Fallbacks, Testplan HA 2026.9/2026.10

Risiken

  1. card-mod in der Instanz (unabhängig vom neuen Dashboard). 2026.9 bricht card-mod 4.2.1 (#616, #617); ein alter extra_module_url-Eintrag auf card-mod.js in configuration.yaml führt nach dem Update zu „Could not load Home Assistant“ (Forum 2026.9, ha-expert). → Vor #246: configuration.yaml auf extra_module_url prüfen, ULM-Themes (card-mod-theme-Schlüssel) nicht als Profil-Theme lassen.
  2. button-card ist ruhig, nicht tot. Stabil v7.0.1 (11/2025), Dev 7.1.0 (04/2026), Maintainer schließt Issues (09/2026). Offen: #1211 Haptic-Listener wird nie entfernt → verworfene Karten werden nicht freigegeben (Kiosk-relevant beim Hin- und Herwechseln zwischen Views). Gegenmittel: iOS-Kiosk „Automatisches Neuladen“ täglich oder notify.mobile_app_* mit kiosk_reload um 04:00. Fallback: Bubble Card (styles: ohne card-mod, reagiert auf jede HA-Version binnen Tagen – 3.1.3 für 2026.3, 3.1.6 für 2026.4, 3.4.0 für 2026.8).
  3. Theme-Variablen sind offiziell „unsupported“ – Bruch = Standardoptik, Funktion bleibt.
  4. 2026.8: state_color → color bei entities/glance (nur Deprecation), Developer Tools → Tools, neue ha-tile-info-Tokens (Dev-Blog 2026.8). 2026.9: Inline-Features im Tile repariert; Dashboard-Hintergrund per UI; Updates nur noch für Admins (Wandtablet-Nutzer darf ohnehin nicht). 2026.10: Legacy-Auth weg, Benutzernamen werden normalisiert (Wandtablet-Nutzer klein schreiben); mqtt.publish nur Admin (nicht genutzt); Sichtbarkeitsbedingungen jetzt mit Template-Bedingung (Release 2026.10). Kein Bruch bei nativen Karten gefunden.
  5. WCS-Typnamen können sich mit der Quelle ändern → Icon-Map im Template als Variable führen, Fallback-Icon vorhanden.
  6. history-graph bei climate zeigt Ziel/Ist möglicherweise nicht wie erwartet (offen seit 06.10.).

Testplan für #246 (2026.9 → direkt 2026.10.x)

Kein Parallelbetrieb einer Config-Kopie: eine zweite Instanz würde MQTT/Zigbee mitlesen und Automationen doppelt feuern. Stattdessen Backup + gepinnte Image-Rückkehr.

  1. Vorab: Backup; Release-Notes 2026.8/9/10 „Backward-incompatible“ lesen; grep -n extra_module_url configuration.yaml; Benutzernamen klein/ohne Leerzeichen; Dashboard-Config als JSON sichern (ha_config_get_dashboard).
  2. Update auf aktuellen 2026.10.x-Patch (2026.9.4 vom 27.09. enthält die 2026.9-Fixes; 2026.10.0 vom 07.10.).
  3. Nach dem Update, iPad und iPhone, Cache leeren:
  4. Browser-Konsole: keine „Custom element doesn't exist“, keine button-card-Fehler
  5. Start: 7 Kacheln rendern, Farben je Zustand, Ist-Wert aktualisiert sich live
  6. Raum: Thermostat ± wirkt, Preset-Icons, Übersteuerung-Highlight, beide Graphen farbig
  7. Einstellungen: Uhrzeit ändern, Sommer/Winter-Bestätigungsdialog deutsch, Stepper
  8. Theme greift (Radius 22 px, Hintergrund #111318); Dialoge dunkel
  9. Kiosk: Header/Sidebar weg, Bildschirmschoner, Neuladen-Befehl
  10. 24 h später: Speicher der HA-App am iPad (Einstellungen → Companion → Debug)
  11. Rückfall: Image-Tag zurückpinnen, Backup einspielen.

6. Offene Entscheidungen für Robin

  1. Statuslogik: YAML-Template-Sensoren mit Attributen (7 Sensoren, braucht Schreibzugriff auf /config) oder UI-Helfer (≈36 Stück per ha-mcp)? Empfehlung: YAML, falls /config im Repo liegt; sonst UI-Helfer.
  2. Müll: reichen die zwei Abholtag-Sensoren (Fraktionen eines Tags mit „+“), oder zusätzlich je Fraktion ein Sensor für Mehr-Info/Farben? Und: die echten Typnamen der Bremer Quelle (Restmüll/Bioabfall/Papier/Gelber Sack?) bitte nennen.
  3. Thermostat-Ring: nativer Ring (Farbe nach hvac_action, orange beim Heizen) akzeptieren, oder VT-UI-Card (3.4.0, Custom-Repo) für Fenster/Timed-Preset-Anzeige im Ring? Empfehlung: nativ, VT-Zustände kommen über den Statuschip.
  4. Verlauf: zwei native Diagramme untereinander (°C / %) oder mini-graph-card mit zweiter Achse (ruhendes Projekt)? Empfehlung: nativ.
  5. Presets in den Einstellungen: 32 Tile-Karten wie v1 oder 7 entities-Karten (je Raum vier Zahlenzeilen)? Empfehlung: entities – kompakter, näher am Mockup-Listenstil.

Quellen (Auswahl, alle 09.10.2026 abgerufen)