Hab mir jetzt folgendes ausgedacht (mit den align-Klassen erst gar nicht beschäftigt), der Zeitstempel und das Icon sollen ja den Status darstellen/gehören ja zusammen und müssen gar nicht jeweils unter der Temperatur stehen, gefällt mir auch besser:
<header>Vaillant</header>
<div class="vbox top-space">
<div class="hbox">
<div class="vbox">
<div data-type="label">Warmwasser</div>
<div data-type="label"
data-device="MQTT2_ebusd_bai"
data-get="1_Warmwassertemperatur"
data-unit=" °C"
class="tall thin"></div>
</div>
<div class="vbox">
<div data-type="label">Vorlauf</div>
<div data-type="label"
data-device="MQTT2_ebusd_bai"
data-get="1_Vorlauf"
data-unit=" °C"
class="tall thin"></div>
</div>
</div>
<div class="hbox top-narrow-10">
<div class="timestamp"
data-type="label"
data-device="MQTT2_ebusd_bai"
data-get="1_Pumpe"
data-part="2"></div>
<div data-type="symbol"
data-device="MQTT2_ebusd_bai"
class="mini"
data-get="1_Pumpe"
data-states='["68","64","off"]'
data-icons='["fa-circle","fa-circle","fa-circle"]'
data-colors='["red","orange","green"]'></div>
</div>
</div>
edit:
Bis zur nächsten Heizperiode lass ich mir noch eine, für mich ausreichende, Fallunterscheidung zwischen Warmwasseraufbereitung und Heizbetrieb einfallen.
edit2:
Sorry für OT (muss es aber mal loslassen): Und Heiko (du magst dich unter einem anderen Namen angemeldet haben, du liest das aber irgendwann), euch (dich und deinen tollen Chef) soll nicht der Blitz beim_kacken treffen, euch wünsch ich (nicht nur ich, wie ich in Erfahrung bringen konnte) jedesmal Geburtsschmerzen, für euer Geschäftgebaren.