/*
 * Stylesheet der App, zweite Fassung des Designs: Kacheln mit leichter Tiefe
 * auf ruhiger Wand, Symbole auf runden Plaketten, brennendes Licht toent die
 * Kachel warm, statt sie ganz zu fuellen. Im Querformat stehen Uhr und Wetter
 * der Uebersicht in einer Leiste links.
 * Fuer Safari 9 geschrieben: Flexbox ohne gap (Abstaende ueber margin), kein
 * inset, kein CSS Grid, keine Container-Einheiten, kein clamp/min/max.
 * Schatten sind statisch und werden nie animiert.
 * Alle Masse in em; die Grundschrift setzt raster.ts am Wurzelelement.
 */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schrift/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"),
       url("schrift/atkinson-hyperlegible-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("schrift/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"),
       url("schrift/atkinson-hyperlegible-latin-700-normal.woff") format("woff");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schrift/barlow-condensed-latin-400-normal.woff2") format("woff2"),
       url("schrift/barlow-condensed-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schrift/barlow-condensed-latin-500-normal.woff2") format("woff2"),
       url("schrift/barlow-condensed-latin-500-normal.woff") format("woff");
}

/*
 * Farben: Tag (hell) und Abend (dunkel). Farbe heisst Zustand: Gluehlicht fuer
 * brennendes Licht, Blau fuer Beschattung, Rot fuer Offenes und Stoerungen.
 * Mulde und Regler sind durchscheinend, damit sie auf warm getoenten Kacheln
 * mitgehen.
 */
html {
  --g-wand: #E2E7EA;
  --g-kachel: #FFFFFF;
  --g-mulde: rgba(22, 40, 52, .07);
  --g-regler: rgba(22, 40, 52, .12);
  --g-linie: #D3DBDF;
  --g-text: #162026;
  --g-leise: #59666E;
  --g-licht: #F2AD3D;
  --g-licht-text: #3A2300;
  --g-schein-oben: #FFEBC7;
  --g-schein-unten: #FFF8EC;
  --g-schein-rand: rgba(222, 146, 30, .32);
  --g-schatten: #3A78A0;
  --g-schatten-grund: #DCEAF4;
  --g-glas: #EAF2F7;
  --g-alarm: #C23A2F;
  --g-alarm-grund: #FBE5E2;
  --g-alarm-text: #FFFFFF;
  --g-aktiv-grund: #162026;
  --g-aktiv-text: #FFFFFF;
  --g-knauf: #FFFFFF;
  --g-feld: #FFFFFF;
  --g-schleier: rgba(20, 27, 31, .55);
  --g-tiefe: 0 1px 2px rgba(22, 32, 38, .06), 0 3px 12px rgba(22, 32, 38, .07);
  --g-tiefe-klein: 0 1px 2px rgba(22, 32, 38, .08), 0 2px 6px rgba(22, 32, 38, .06);
  --schrift: "Atkinson Hyperlegible", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ziffern: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background: #E2E7EA;
  background: var(--g-wand);
}
html[data-modus="abend"] {
  --g-wand: #0C1114;
  --g-kachel: #162027;
  --g-mulde: rgba(255, 255, 255, .07);
  --g-regler: rgba(255, 255, 255, .13);
  --g-linie: #29343B;
  --g-text: #E6EBEE;
  --g-leise: #909EA6;
  --g-licht: #F4B651;
  --g-licht-text: #2A1A00;
  --g-schein-oben: #30291B;
  --g-schein-unten: #1A2124;
  --g-schein-rand: rgba(244, 182, 81, .22);
  --g-schatten: #6EA8D0;
  --g-schatten-grund: #1A2E3B;
  --g-glas: #15232C;
  --g-alarm: #F06A5E;
  --g-alarm-grund: #3A1C1A;
  --g-alarm-text: #1A0503;
  --g-aktiv-grund: #E6EBEE;
  --g-aktiv-text: #0C1114;
  --g-knauf: #FFFFFF;
  --g-feld: #162027;
  --g-schleier: rgba(0, 0, 0, .6);
  --g-tiefe: 0 0 0 1px rgba(255, 255, 255, .045), 0 4px 14px rgba(0, 0, 0, .28);
  --g-tiefe-klein: 0 0 0 1px rgba(255, 255, 255, .06);
  color-scheme: dark;
}

*, *:before, *:after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--g-wand);
  color: var(--g-text);
  font-family: var(--schrift);
  font-size: 1em;
  line-height: 1.25;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

#app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}

.bildschirm {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
}
/* Grosse Schaltflaechen sind div mit role=button (Flex in <button> fehlt bis Safari 10) */
[role="button"] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:focus, [role="button"]:focus { outline: none; }
button:focus-visible, [role="button"]:focus-visible { outline: .16em solid var(--g-schatten); outline-offset: .12em; }
button[disabled], [role="button"][aria-disabled="true"] { opacity: .45; cursor: default; }
button:active, [role="button"]:active { opacity: .72; }

.gl {
  -webkit-flex: none;
  flex: none;
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Kopfzeile */
.kopf {
  -webkit-flex: none;
  flex: none;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 1.25em 1.5em 1em;
}
.kopf > * { margin-right: 1.5em; }
.kopf > *:last-child { margin-right: 0; }
.kopf-zeit {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.zeit {
  font-family: var(--ziffern);
  font-size: 3.4em;
  font-weight: 400;
  line-height: .85;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.datum { margin-top: .45em; font-size: 1em; color: var(--g-leise); }
.kopf-wetter {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.wetter-titel { display: none; }
.kopf-wetter .wert {
  margin-right: .3em;
  font-family: var(--ziffern);
  font-size: 2.4em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wetter-text {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  font-size: .95em;
  line-height: 1.3;
}
.wetter-text > * + * { color: var(--g-leise); }
.kopf-chips {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}
.kopf-chips > * { margin-left: .6em; }
.chip {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  height: 3.4em;
  padding: 0 1.15em 0 1em;
  border-radius: 1.7em;
  background: var(--g-kachel);
  box-shadow: var(--g-tiefe-klein);
  font-size: .95em;
  font-weight: 700;
  white-space: nowrap;
}
.chip .gl { margin-right: .5em; }
.chip.licht { background: var(--g-licht); color: var(--g-licht-text); box-shadow: none; }
.chip.warn { background: var(--g-alarm-grund); color: var(--g-alarm); box-shadow: none; white-space: normal; max-width: 26em; }

button.rund {
  text-align: center;
  width: 3.4em;
  height: 3.4em;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--g-kachel);
  box-shadow: var(--g-tiefe-klein);
}

/* Inhalt mit Raster: Abstaende ueber negative Raender, weil flex-gap fehlt */
.inhalt {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .25em 1.5em 1.5em;
}
.raster {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -.5em;
}
.raster > * { margin: .5em; width: calc(100% - 1em); }

html[data-raumspalten="2"] .raumraster > * { width: calc(50% - 1em); }
html[data-raumspalten="3"] .raumraster > * { width: calc(33.333% - 1em); }
html[data-raumspalten="4"] .raumraster > * { width: calc(25% - 1em); }
html[data-raumspalten="5"] .raumraster > * { width: calc(20% - 1em); }
html[data-raumspalten="6"] .raumraster > * { width: calc(16.666% - 1em); }

html[data-kachelspalten="2"] .kacheln > * { width: calc(50% - 1em); }
html[data-kachelspalten="3"] .kacheln > * { width: calc(33.333% - 1em); }
html[data-kachelspalten="4"] .kacheln > * { width: calc(25% - 1em); }
html[data-kachelspalten="2"] .kacheln > .breit { width: calc(100% - 1em); }
html[data-kachelspalten="3"] .kacheln > .breit { width: calc(66.666% - 1em); }
html[data-kachelspalten="4"] .kacheln > .breit { width: calc(50% - 1em); }

/* Uebersicht im Querformat: Uhr, Wetter und Status in der Leiste links (Breite wie LEISTE_BREITE in raster.ts,
   rechts daneben der Rand des Inhalts, die Haelfte von RAND) */
html[data-leiste="1"] .uebersicht {
  -webkit-flex-direction: row;
  flex-direction: row;
}
html[data-leiste="1"] .uebersicht > .kopf {
  width: 18em;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 1.15em 1.5em 1.5em 1.75em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-leiste="1"] .uebersicht > .kopf > * { margin-right: 0; }
html[data-leiste="1"] .uebersicht .zeit { font-size: 6.6em; }
html[data-leiste="1"] .uebersicht .datum { margin-top: .55em; font-size: 1.1em; }
html[data-leiste="1"] .uebersicht .kopf-wetter {
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  margin-top: 2.6em;
}
html[data-leiste="1"] .uebersicht .wetter-titel {
  display: block;
  margin-bottom: .6em;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-leise);
}
html[data-leiste="1"] .uebersicht .kopf-wetter .wert { margin: 0 0 .12em; font-size: 3.6em; }
html[data-leiste="1"] .uebersicht .wetter-text { font-size: 1.05em; }
html[data-leiste="1"] .uebersicht .kopf-chips {
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  margin: auto 0 0;
  padding-top: 1.4em;
}
html[data-leiste="1"] .uebersicht .kopf-chips > * { margin: .6em 0 0; }
html[data-leiste="1"] .uebersicht .chip {
  height: auto;
  min-height: 3.2em;
  padding: .65em 1.1em .65em 1em;
  line-height: 1.3;
  white-space: normal;
}
html[data-leiste="1"] .uebersicht button.rund { margin-top: 1.1em; }
html[data-leiste="1"] .uebersicht > .inhalt { padding: 1.5em 1.5em 1.5em 0; }

/* Raumkarten */
.raumkarte {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  min-height: 12.75em;
  padding: 1.2em 1.3em 1.15em;
  border-radius: 1.25em;
  background-color: var(--g-kachel);
  box-shadow: var(--g-tiefe);
}
.raumkarte.hell, .kachel.an {
  background-color: var(--g-schein-unten);
  background-image: linear-gradient(to bottom, var(--g-schein-oben), var(--g-schein-unten));
  box-shadow: var(--g-tiefe), inset 0 0 0 1px var(--g-schein-rand);
}
.rk-oben {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  margin-bottom: .9em;
}
.rk-name { font-size: 1.15em; font-weight: 700; }
.rk-temp {
  margin-top: .3em;
  font-family: var(--ziffern);
  font-size: 3.5em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.rk-soll { margin-top: .3em; font-size: .95em; color: var(--g-leise); }
.rk-zustaende {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -.2em;
}
.zs {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  height: 2.2em;
  margin: .2em;
  padding: 0 .75em 0 .6em;
  border-radius: 1.1em;
  background: var(--g-mulde);
  font-size: .95em;
  font-weight: 700;
}
.zs .gl { width: 1.2em; height: 1.2em; margin-right: .35em; }
.zs.an { background: var(--g-licht); color: var(--g-licht-text); }

/* Raum */
.kopf-raum > * { margin-right: 1em; }
button.zurueck, button.knopf-aus {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  height: 3.4em;
  padding: 0 1.25em 0 .85em;
  border-radius: 1.7em;
  font-weight: 700;
}
button.zurueck { background: var(--g-kachel); box-shadow: var(--g-tiefe-klein); }
button.zurueck .gl, button.knopf-aus .gl { margin-right: .45em; }
button.knopf-aus { padding: 0 1.35em 0 1.1em; background: var(--g-aktiv-grund); color: var(--g-aktiv-text); }
.raumtitel {
  margin: 0 0 0 .15em;
  font-family: var(--ziffern);
  font-size: 2.6em;
  font-weight: 500;
  line-height: 1;
}
.kopf-raum .kopf-zeit { margin-left: auto; }
.kopf-raum .zeit { font-size: 2.1em; color: var(--g-leise); }
.kopf-raum .kopf-chips { margin-left: 0; }
.fehlend { margin: 1.5em 0 0; font-size: .95em; color: var(--g-leise); line-height: 1.4; }

/* Kacheln */
.kachel {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 10.75em;
  padding: 1.05em 1.15em 1.15em;
  border-radius: 1.25em;
  background-color: var(--g-kachel);
  box-shadow: var(--g-tiefe);
  text-align: left;
}
.kachel.wartet { opacity: .65; }
.k-kopf {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  min-height: 2.5em;
}
/* Symbol auf runder Plakette; sie traegt die Zustandsfarbe */
.k-symbol {
  -webkit-flex: none;
  flex: none;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  margin-right: .75em;
  border-radius: 50%;
  background: var(--g-mulde);
  color: var(--g-text);
}
.k-symbol .gl { width: 1.35em; height: 1.35em; }
.kachel.an .k-symbol, .kachel.hell .k-symbol { background: var(--g-licht); color: var(--g-licht-text); }
.kachel.ein .k-symbol { background: var(--g-aktiv-grund); color: var(--g-aktiv-text); }
.kachel.beschattet .k-symbol { background: var(--g-schatten-grund); color: var(--g-schatten); }
.kachel.melder.aktiv .k-symbol { background: var(--g-alarm); color: var(--g-alarm-text); }
.k-name {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05em;
  font-weight: 700;
}
/* Unten Wert und Kippschalter: zeigt an oder aus, geschaltet wird ueber die Flaeche */
.k-fuss {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-top: 1em;
}
.k-umschalter {
  position: relative;
  display: block;
  -webkit-flex: none;
  flex: none;
  width: 3.3em;
  height: 1.9em;
  margin-left: .75em;
  border-radius: .95em;
  background: var(--g-regler);
}
.k-umschalter i {
  position: absolute;
  top: .2em;
  left: .2em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--g-knauf);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.kachel.an .k-umschalter { background: var(--g-licht); }
.kachel.ein .k-umschalter { background: var(--g-aktiv-grund); }
.kachel.an .k-umschalter i, .kachel.ein .k-umschalter i { left: 1.6em; }
.kachel.ein .k-umschalter i { background: var(--g-aktiv-text); }
.k-hinweis { margin-top: .7em; font-size: .85em; line-height: 1.35; color: var(--g-leise); }
.k-wert {
  font-family: var(--ziffern);
  font-size: 2.5em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.k-wert small { margin-left: .1em; font-size: .55em; color: var(--g-leise); }
.kachel.melder.aktiv .k-wert { color: var(--g-alarm); }
.k-leise { font-size: .95em; color: var(--g-leise); }
.k-zeile { margin: .85em 0 .95em; line-height: 1.4; }
.k-mitte {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  margin-top: .9em;
}
.k-mitte .k-wert { margin-right: .35em; }
.k-mitte b { font-family: var(--ziffern); font-size: 1.5em; font-weight: 500; color: var(--g-text); }
.k-tasten {
  display: -webkit-flex;
  display: flex;
  margin: 0 -.25em;
}
.k-tasten button {
  -webkit-flex: 1;
  flex: 1;
  height: 3.2em;
  margin: 0 .25em;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: .9em;
  background: var(--g-mulde);
  text-align: center;
}
.k-tasten .gl { width: 1.55em; height: 1.55em; }

/* Dimmer: oben schalten, Balken antippen setzt die Helligkeit */
.kachel.dimmer { padding-bottom: .45em; }
.k-schalter {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex: 1;
  flex: 1;
  width: 100%;
}
button.stufe-flaeche { display: block; width: 100%; padding: .95em 0 .85em; }
.stufe {
  position: relative;
  display: block;
  height: 1em;
  overflow: hidden;
  border-radius: .5em;
  background: var(--g-regler);
}
.stufe i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--g-licht); }

/* Lichtsteuerung: die gewaehlte Stimmung leuchtet, "Aus" bleibt neutral */
.stimmungen {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -.3em;
}
.stimmungen button {
  -webkit-flex: 1 1 6em;
  flex: 1 1 6em;
  height: 3.4em;
  margin: .3em;
  padding: 0 .8em;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: .9em;
  background: var(--g-mulde);
  font-weight: 700;
  text-align: center;
}
.stimmungen button[aria-pressed="true"] { background: var(--g-licht); color: var(--g-licht-text); }
.stimmungen button.aus[aria-pressed="true"] { background: var(--g-aktiv-grund); color: var(--g-aktiv-text); }

/* Jalousie: Lamellen zeigen, wie weit sie zu ist */
.jal-mitte {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: .8em 0 .95em;
}
.jal-bild {
  position: relative;
  display: block;
  -webkit-flex: none;
  flex: none;
  width: 3.1em;
  height: 3.7em;
  margin-right: 1em;
  overflow: hidden;
  border: .15em solid var(--g-leise);
  border-radius: .4em;
  background: var(--g-glas);
}
.jal-bild i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  background: -webkit-repeating-linear-gradient(top, var(--g-schatten) 0, var(--g-schatten) .34em, transparent .34em, transparent .5em);
  background: repeating-linear-gradient(to bottom, var(--g-schatten) 0, var(--g-schatten) .34em, transparent .34em, transparent .5em);
}
.jal-text {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.jal-text .k-leise { margin-top: .25em; }

/* Weiche Uebergaenge nur auf Geraeten, die sie fluessig zeichnen (Klasse setzt start.ts nach Messung) */
html.weich .kachel, html.weich .raumkarte, html.weich .zs, html.weich .stimmungen button, html.weich .k-symbol,
html.weich .k-umschalter {
  -webkit-transition: background-color .15s ease-out, color .15s ease-out;
  transition: background-color .15s ease-out, color .15s ease-out;
}
html.weich .k-umschalter i {
  -webkit-transition: left .15s ease-out, background-color .15s ease-out;
  transition: left .15s ease-out, background-color .15s ease-out;
}
html.weich .jal-bild i, html.weich .stufe i {
  -webkit-transition: height .2s linear, width .15s ease-out;
  transition: height .2s linear, width .15s ease-out;
}

/* Einrichtung */
.einrichtung {
  -webkit-flex-direction: row;
  flex-direction: row;
}
.schritte-spalte {
  width: 18em;
  -webkit-flex: none;
  flex: none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 2.4em 1.6em;
  background: var(--g-kachel);
  box-shadow: var(--g-tiefe);
}
.schritte { list-style: none; margin: 0; padding: 0; }
.schritte li {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 1.2em;
  font-size: 1.1em;
  color: var(--g-leise);
}
.schritte .nr {
  -webkit-flex: none;
  flex: none;
  width: 2.3em;
  height: 2.3em;
  margin-right: .8em;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--g-mulde);
  font-family: var(--ziffern);
  font-weight: 500;
}
.schritte .nr .gl { width: 1.2em; height: 1.2em; }
.schritte li.aktiv { color: var(--g-text); font-weight: 700; }
.schritte li.aktiv .nr { background: var(--g-aktiv-grund); color: var(--g-aktiv-text); }
.schritte li.erledigt { color: var(--g-text); }
.e-dauer { margin: auto 0 0; font-size: .95em; color: var(--g-leise); line-height: 1.4; }
.schritt-inhalt {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 2.6em 3em 2.4em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.schritt-inhalt > * { margin-bottom: 1.1em; }
.e-titel { margin: 0 0 1.1em; font-family: var(--ziffern); font-size: 2.8em; font-weight: 500; line-height: 1; }
.e-text { margin-top: 0; max-width: 32em; font-size: 1.15em; line-height: 1.45; }
.feld {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  max-width: 30em;
}
.feld-titel { margin-bottom: .4em; font-size: .95em; font-weight: 700; }
.feld-wert {
  height: 3.2em;
  margin: 0;
  padding: 0 .9em;
  border: 1px solid var(--g-linie);
  border-radius: .8em;
  background: var(--g-feld);
  color: var(--g-text);
  font: inherit;
  font-size: 1.1em;
  -webkit-user-select: text;
  user-select: text;
  -webkit-appearance: none;
}
.feld-wert:focus { outline: none; border-color: var(--g-schatten); }
html.klein .feld-wert { font-size: 16px; }
.feld-hinweis { margin-top: .35em; font-size: .85em; color: var(--g-leise); line-height: 1.35; }
.e-hinweis { margin-top: 0; max-width: 34em; font-size: .95em; line-height: 1.45; color: var(--g-leise); }
button.link { -webkit-align-self: flex-start; align-self: flex-start; color: var(--g-schatten); font-weight: 700; text-decoration: underline; }
.e-tasten {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: .6em;
}
.e-tasten > * { margin-left: .8em; }
button.e-knopf {
  height: 3.5em;
  padding: 0 1.6em;
  border-radius: 1.75em;
  background: var(--g-kachel);
  box-shadow: var(--g-tiefe-klein);
  font-size: 1.05em;
  font-weight: 700;
}
button.e-knopf.primaer { background: var(--g-aktiv-grund); color: var(--g-aktiv-text); box-shadow: none; }
button.e-knopf.gefahr { color: var(--g-alarm); box-shadow: inset 0 0 0 1px var(--g-alarm); }
.meldungen > * { margin: 0 0 .5em; }
.meldung {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  margin: 0;
  max-width: 34em;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.4;
}
.meldung .gl { margin-right: .5em; color: var(--g-schatten); }
.meldung.fehler .gl { color: var(--g-alarm); }
.meldung.ok .gl { color: var(--g-schatten); }
.meldung.ok { font-weight: 400; }

/* Einstellungen und Messwerte */
.d-spalten {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -1em;
}
.d-spalte {
  -webkit-flex: 1 1 24em;
  flex: 1 1 24em;
  min-width: 0;
  margin: 0 1em;
}
.d-abschnitt { margin-bottom: 1.8em; }
.d-ueberschrift {
  margin: 0 0 .7em;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-leise);
}
.d-liste {
  margin-bottom: 1em;
  padding: .2em 1.1em;
  border-radius: 1.1em;
  background: var(--g-kachel);
  box-shadow: var(--g-tiefe);
}
.d-zeile {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: .7em 0;
  border-bottom: 1px solid var(--g-linie);
}
.d-zeile:last-child { border-bottom: 0; }
.d-titel { margin-right: 1em; color: var(--g-leise); }
.d-wert { text-align: right; font-variant-numeric: tabular-nums; -webkit-user-select: text; user-select: text; }
.d-text { margin: .55em 0; color: var(--g-leise); line-height: 1.4; }
.wahl {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -.25em -.25em .6em;
}
.wahl button {
  height: 3.3em;
  margin: .25em;
  padding: 0 1.2em;
  border-radius: 1.65em;
  background: var(--g-kachel);
  box-shadow: var(--g-tiefe-klein);
  font-weight: 700;
}
.wahl button[aria-pressed="true"] { background: var(--g-aktiv-grund); color: var(--g-aktiv-text); box-shadow: none; }
.dialog {
  max-width: 27em;
  padding: 1.25em 1.35em;
  border-radius: 1.25em;
  background: var(--g-kachel);
  box-shadow: var(--g-tiefe);
}
.dialog-kopf {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  margin: 0 0 1em;
  font-size: 1.05em;
  line-height: 1.4;
}
.dialog-kopf .gl { width: 1.6em; height: 1.6em; margin-right: .7em; color: var(--g-alarm); }
.dialog-tasten {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.dialog-tasten button { height: 3.2em; margin-left: .6em; padding: 0 1.3em; border-radius: 1.6em; font-weight: 700; }
.dialog-tasten button.ja { background: var(--g-alarm); color: var(--g-alarm-text); }
.dialog-tasten button.nein { background: var(--g-mulde); }

/* Kurze Meldung unten, etwa wenn ein Befehl nicht ankam */
.meldung-unten {
  position: absolute;
  left: 50%;
  bottom: 1.5em;
  max-width: 36em;
  padding: .9em 1.3em;
  border-radius: 1em;
  background: var(--g-aktiv-grund);
  color: var(--g-aktiv-text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  font-weight: 700;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.leer { margin: 2em 0; }
.eingebettet { margin: 2em 1.5em; font-size: 1.1em; line-height: 1.45; }

/* Schmale Bildschirme: Einrichtung ohne Schrittspalte, Kopf umbrechen, im Raum ohne Uhr (die zeigt die Uebersicht) */
@media (max-width: 700px) {
  .schritte-spalte { display: none; }
  .schritt-inhalt { padding: 1.6em 1.5em; }
  .kopf-chips { margin-left: 0; }
  .kopf-raum .kopf-zeit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.weich .kachel, html.weich .raumkarte, html.weich .zs, html.weich .stimmungen button, html.weich .k-symbol,
  html.weich .k-umschalter, html.weich .k-umschalter i, html.weich .jal-bild i, html.weich .stufe i {
    -webkit-transition: none;
    transition: none;
  }
}