/* SmartVan – Kiosk-Oberfläche. Alles lokal, keine externen Schriften (Van ist oft offline). */

:root, [data-theme="dunkel"] {
  --grund: #0f1418;
  --kachel: #182128;
  --kachel2: #212c34;
  --linie: #2b3740;
  --text: #e9eff3;
  --leise: #8d9ea9;
  --warm: #ff8a3d;
  --warm-weich: rgba(255, 138, 61, .16);
  --blau: #4aa3ff;
  --blau-weich: rgba(74, 163, 255, .16);
  --gruen: #3ecf8e;
  --gruen-weich: rgba(62, 207, 142, .16);
  --rot: #ff6262;
  --rot-weich: rgba(255, 98, 98, .16);
  --gelb: #ffc94a;
  --knopf: #26323b;
  --knopf-aktiv: #e9eff3;
  --knopf-aktiv-text: #0f1418;
  --schatten: 0 1px 0 rgba(255,255,255,.03) inset;
  color-scheme: dark;
}

[data-theme="hell"] {
  --grund: #edf1f4;
  --kachel: #ffffff;
  --kachel2: #f3f6f8;
  --linie: #dbe3e9;
  --text: #15202a;
  --leise: #5b6b77;
  --warm: #e2631a;
  --warm-weich: rgba(226, 99, 26, .12);
  --blau: #1f74d6;
  --blau-weich: rgba(31, 116, 214, .12);
  --gruen: #18a36a;
  --gruen-weich: rgba(24, 163, 106, .12);
  --rot: #d93838;
  --rot-weich: rgba(217, 56, 56, .1);
  --gelb: #b88200;
  --knopf: #e8edf1;
  --knopf-aktiv: #15202a;
  --knopf-aktiv-text: #ffffff;
  --schatten: 0 1px 2px rgba(20, 32, 42, .06);
  color-scheme: light;
}

/* Nachtmodus: nur Rot, sehr dunkel – blendet nicht und hält die Augen nachtsichtig */
[data-theme="nacht"] {
  --grund: #000000;
  --kachel: #0b0202;
  --kachel2: #140303;
  --linie: #2a0805;
  --text: #c0392b;
  --leise: #7a2318;
  --warm: #d84a32;
  --warm-weich: rgba(216, 74, 50, .12);
  --blau: #a83224;
  --blau-weich: rgba(168, 50, 36, .12);
  --gruen: #b33a2a;
  --gruen-weich: rgba(179, 58, 42, .12);
  --rot: #ff3b1f;
  --rot-weich: rgba(255, 59, 31, .14);
  --gelb: #c0392b;
  --knopf: #1a0504;
  --knopf-aktiv: #8e2a1d;
  --knopf-aktiv-text: #000000;
  --schatten: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
input, select, textarea { user-select: text; -webkit-user-select: text; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------- Kopfzeile */

.kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
.marke { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; text-decoration: none; justify-self: start; }
.marke svg { width: 28px; height: 28px; color: var(--warm); }
.uhr { text-align: center; line-height: 1.1; }
.uhr-zeit { display: block; font-size: 30px; font-weight: 700; letter-spacing: .5px; }
.uhr-datum { display: block; font-size: 13px; color: var(--leise); }
.kopf-rechts { display: flex; gap: 8px; align-items: center; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }

.knopf-klein {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--kachel); text-decoration: none; cursor: pointer;
  font-size: 14px;
}
.knopf-klein:active { transform: scale(.97); }

.pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--kachel2); color: var(--leise);
}
.pille-sim { background: var(--blau-weich); color: var(--blau); }
.pille-offline { background: var(--rot-weich); color: var(--rot); }
.pille.ist-warm { background: var(--warm-weich); color: var(--warm); }
.pille.ist-ok { background: var(--gruen-weich); color: var(--gruen); }
.pille.ist-blau { background: var(--blau-weich); color: var(--blau); }
.pille.ist-fehler { background: var(--rot-weich); color: var(--rot); }
.pille.ist-warten::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: drehen 1s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- Raster */

.inhalt { padding: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

.raster {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "klima heizung wasser"
    "licht licht luefter";
}
.kachel-klima { grid-area: klima; }
.kachel-heizung { grid-area: heizung; }
.kachel-wasser { grid-area: wasser; }
.kachel-licht { grid-area: licht; }
.kachel-luefter { grid-area: luefter; }

@media (max-width: 1000px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "klima klima" "heizung wasser" "licht licht" "luefter luefter"; }
}
@media (max-width: 640px) {
  .raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "klima" "heizung" "wasser" "licht" "luefter"; }
  .kopf { grid-template-columns: auto 1fr; }
  .uhr { display: none; }
  .knopf-klein span { display: none; }
}

.kachel {
  background: var(--kachel);
  border: 1px solid var(--linie);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.kachel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kachel-titel { margin: 0; font-size: 15px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .6px; }
.hersteller { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; margin-left: 4px; }
.unter { color: var(--leise); font-size: 14px; }
.hinweis { margin: 0; font-size: 14px; color: var(--leise); background: var(--kachel2); padding: 10px 12px; border-radius: 12px; }
.hinweis-warn { color: var(--warm); background: var(--warm-weich); }
.hinweis-fehler { color: var(--rot); background: var(--rot-weich); }

.wert-gross { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.wert-gross small { font-size: 22px; font-weight: 500; margin-left: 2px; color: var(--leise); letter-spacing: 0; }
.wert-mittel { font-size: 28px; font-weight: 700; }
.ohne-einheit small { display: none; }

/* ---------------------------------------------------------- Klima */

.klima-haupt { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.klima-neben { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.klima-aussen strong { font-size: 22px; }
.sensoren { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sensoren li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.sensoren .s-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sensoren .s-wert { font-weight: 600; white-space: nowrap; }
.sensoren .s-wert small { color: var(--leise); font-weight: 400; margin-left: 6px; }
.batterie-leer { color: var(--gelb); font-size: 12px; font-weight: 600; }
.sensor-weg { color: var(--rot); font-size: 13px; }

/* ---------------------------------------------------------- Regler */

.regler { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.regler-wert { text-align: center; }
.rund {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--knopf);
  font-size: 32px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.regler-klein .rund { width: 52px; height: 52px; font-size: 26px; }
.rund:active, .szene:active, .segment button:active { transform: scale(.95); }
.rund:disabled { opacity: .35; cursor: default; }

.segment {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--kachel2); border: 1px solid var(--linie);
  border-radius: 14px; padding: 4px; gap: 4px;
}
.segment button {
  min-height: 52px; border: 0; border-radius: 10px; background: transparent;
  font-weight: 600; font-size: 16px; cursor: pointer; color: var(--leise);
}
.segment button.aktiv { background: var(--knopf-aktiv); color: var(--knopf-aktiv-text); }
.segment button.ausstehend { outline: 2px dashed var(--warm); outline-offset: -4px; }
.segment.gesperrt, .regler.gesperrt, .licht-gesperrt { opacity: .4; pointer-events: none; }
.segment-klein button { min-height: 36px; font-size: 14px; padding: 0 10px; }

/* Warmwasser */
.wasser-anzeige { display: flex; flex-direction: column; gap: 12px; }
.balken { height: 10px; border-radius: 99px; background: var(--kachel2); overflow: hidden; border: 1px solid var(--linie); }
.balken-fuell { height: 100%; width: 0; background: linear-gradient(90deg, var(--blau), var(--warm)); border-radius: inherit; transition: width .6s ease; }

/* ---------------------------------------------------------- Schalter */

.schalter {
  position: relative; width: 74px; height: 42px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--knopf); cursor: pointer; flex: none;
  transition: background .2s;
}
.schalter span {
  position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--leise); transition: transform .2s, background .2s;
}
.schalter[aria-checked="true"] { background: var(--gruen-weich); border-color: var(--gruen); }
.schalter[aria-checked="true"] span { transform: translateX(32px); background: var(--gruen); }
.schalter:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------- Licht */

.licht-zeilen { display: flex; flex-direction: column; gap: 8px; }
.zeile { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: 12px; }
.zeile-name { color: var(--leise); font-size: 14px; }
.zeile-wert { text-align: right; font-weight: 600; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--kachel2), var(--gelb)); border: 1px solid var(--linie); }
input[type="range"]::-moz-range-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--kachel2), var(--gelb)); border: 1px solid var(--linie); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: var(--text); border: 3px solid var(--kachel); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--text); border: 3px solid var(--kachel); }
.regler-weiss::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ff9b3d, #ffe2b8, #f4f7ff, #cfe0ff) !important; }
.regler-weiss::-moz-range-track { background: linear-gradient(90deg, #ff9b3d, #ffe2b8, #f4f7ff, #cfe0ff) !important; }
[data-theme="nacht"] input[type="range"]::-webkit-slider-runnable-track,
[data-theme="nacht"] .regler-weiss::-webkit-slider-runnable-track { background: var(--kachel2) !important; }

.szenen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.szene {
  min-height: 52px; border-radius: 14px; border: 1px solid var(--linie);
  background: var(--knopf); cursor: pointer; font-weight: 600;
}
.szene.aktiv { border-color: var(--warm); color: var(--warm); background: var(--warm-weich); }
.farben { display: flex; gap: 10px; flex-wrap: wrap; }
.farbe { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--kachel); outline: 1px solid var(--linie); cursor: pointer; }
.farbe.aktiv { outline: 3px solid var(--text); }
.farbe-1 { background: #ff1a00; } .farbe-2 { background: #ff8a2a; } .farbe-3 { background: #ffd23f; }
.farbe-4 { background: #3ecf8e; } .farbe-5 { background: #2f9bff; } .farbe-6 { background: #a259ff; } .farbe-7 { background: #ff4fa3; }
[data-theme="nacht"] .farbe { filter: brightness(.35) saturate(.6); }

@media (max-width: 640px) {
  .szenen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeile { grid-template-columns: 80px 1fr 56px; }
  .wert-gross { font-size: 48px; }
}

.luefter-ist { margin-top: -6px; }

/* ---------------------------------------------------------- Simulator-Leiste */

.sim-leiste { margin-top: 14px; border: 1px dashed var(--blau); border-radius: 16px; padding: 10px 14px; color: var(--leise); background: var(--blau-weich); }
.sim-leiste summary { cursor: pointer; font-weight: 600; color: var(--blau); min-height: 32px; display: flex; align-items: center; gap: 6px; }
.sim-schalter { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 10px 0 4px; align-items: center; }
.sim-schalter label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.sim-schalter input { width: 20px; height: 20px; }
.sim-raffer { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------- Bildschirmschoner */

.schoner {
  position: fixed; inset: 0; z-index: 50;
  background: #000; color: #9fb0bb;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  cursor: pointer;
}
[data-theme="nacht"] .schoner { color: #5a170f; }
.schoner-zeit { font-size: clamp(80px, 18vw, 200px); font-weight: 200; letter-spacing: -2px; line-height: 1; }
.schoner-temp { display: flex; gap: 40px; font-size: 32px; }
.schoner-temp small { font-size: 16px; opacity: .7; margin-right: 6px; }
.schoner-tipp { font-size: 14px; opacity: .45; }

/* ---------------------------------------------------------- Meldungen */

.meldung {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: min(560px, calc(100% - 32px)); z-index: 40;
  padding: 14px 18px; border-radius: 14px;
  background: var(--text); color: var(--grund); font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.meldung.ist-fehler { background: var(--rot); color: #fff; }

/* ---------------------------------------------------------- Formulare */

.formular-seite { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.formular-schmal { max-width: 420px; margin-top: 8vh; }
.formular-seite h1 { margin: 0; font-size: 26px; }
.zurueck { text-decoration: none; color: var(--leise); min-height: 44px; display: inline-flex; align-items: center; }
.formular { display: flex; flex-direction: column; gap: 14px; }
.formular label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--leise); }
.formular label.haken { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 16px; }
.haken input { width: 22px; height: 22px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .zwei { grid-template-columns: 1fr; } }
.formular input[type="time"], .formular input[type="password"], .formular input[type="email"], .formular select {
  min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linie);
  background: var(--kachel2); color: var(--text); font: inherit; font-size: 17px;
}
.pin-feld { text-align: center; font-size: 28px !important; letter-spacing: 8px; min-height: 64px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--linie); background: var(--kachel2); color: var(--text); width: 100%; }
.knopf {
  min-height: 52px; padding: 0 20px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--knopf-aktiv); color: var(--knopf-aktiv-text); font-weight: 700; font-size: 16px;
}
.knopf-zweit { background: var(--knopf); color: var(--text); border: 1px solid var(--linie); }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; }
.fuss { text-align: center; color: var(--leise); font-size: 13px; }
.kachel p { margin: 0; }

/* ======================================================== M1: Thermometer */

/* Diagrammfarben (geprüft auf Farbenblindheit, je Modus eigene Stufen) */
:root, [data-theme="dunkel"] {
  --reihe-1: #3987e5; --reihe-2: #d95926; --reihe-3: #199e70;
  --reihe-4: #c98500; --reihe-5: #d55181; --reihe-6: #008300;
  --gitter: #26313a;
}
[data-theme="hell"] {
  --reihe-1: #2a78d6; --reihe-2: #eb6834; --reihe-3: #1baf7a;
  --reihe-4: #eda100; --reihe-5: #e87ba4; --reihe-6: #008300;
  --gitter: #e6ecf0;
}
/* Nacht: nur Rottöne – Reihen unterscheiden sich zusätzlich durch Strichart */
[data-theme="nacht"] {
  --reihe-1: #c0392b; --reihe-2: #8e2a1d; --reihe-3: #d84a32;
  --reihe-4: #7a2318; --reihe-5: #a83224; --reihe-6: #5e1a12;
  --gitter: #1e0604;
}

.warnleiste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.warnung {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px; font-weight: 600;
  background: var(--rot-weich); color: var(--rot); border: 1px solid var(--rot);
}
.warnung.art-batterie, .warnung.art-signal { background: var(--warm-weich); color: var(--warm); border-color: transparent; font-weight: 500; }
.warnung svg { flex: none; }

.link-pfeil {
  color: var(--leise); text-decoration: none; font-size: 14px; font-weight: 600;
  min-height: 36px; display: inline-flex; align-items: center; padding: 0 4px;
}
.minmax { font-size: 13px; }
.hinweis-link { text-decoration: none; color: var(--blau); background: var(--blau-weich); font-weight: 600; }
.sensoren li.s-warn .s-wert { color: var(--rot); }
.sensoren li.s-warn-leise .s-name { color: var(--warm); }

.seite-breit { max-width: 1200px; }
.seitenkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Legende = Schalter je Sensor */
.legende { display: flex; flex-wrap: wrap; gap: 8px; }
.legende button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--kachel2); cursor: pointer; font-size: 14px; color: var(--text);
}
.legende button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.legende .punkt { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.punkt-1 { background: var(--reihe-1); } .punkt-2 { background: var(--reihe-2); } .punkt-3 { background: var(--reihe-3); }
.punkt-4 { background: var(--reihe-4); } .punkt-5 { background: var(--reihe-5); } .punkt-6 { background: var(--reihe-6); }

.diagramm { position: relative; width: 100%; height: 320px; touch-action: pan-y; }
.diagramm-klein { height: 170px; }
.diagramm svg { width: 100%; height: 100%; display: block; stroke: none; fill: none; overflow: visible; }
.diagramm .gitter line { stroke: var(--gitter); stroke-width: 1; }
.diagramm .nulllinie { stroke: var(--leise); stroke-width: 1; opacity: .6; }
.diagramm .achse text { fill: var(--leise); font-size: 12px; font-family: inherit; }
.diagramm .linie { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.diagramm .endpunkt { stroke: var(--kachel); stroke-width: 2; }
.diagramm .beschriftung { font-size: 12px; font-weight: 600; fill: var(--text); }
.diagramm .fadenkreuz { stroke: var(--leise); stroke-width: 1; }
.diagramm .markierung { stroke: var(--kachel); stroke-width: 2; }
.reihe-1 { stroke: var(--reihe-1); } .reihe-2 { stroke: var(--reihe-2); } .reihe-3 { stroke: var(--reihe-3); }
.reihe-4 { stroke: var(--reihe-4); } .reihe-5 { stroke: var(--reihe-5); } .reihe-6 { stroke: var(--reihe-6); }
.fuell-1 { fill: var(--reihe-1); } .fuell-2 { fill: var(--reihe-2); } .fuell-3 { fill: var(--reihe-3); }
.fuell-4 { fill: var(--reihe-4); } .fuell-5 { fill: var(--reihe-5); } .fuell-6 { fill: var(--reihe-6); }
[data-theme="nacht"] .linie.reihe-2 { stroke-dasharray: 8 5; }
[data-theme="nacht"] .linie.reihe-3 { stroke-dasharray: 2 4; }
[data-theme="nacht"] .linie.reihe-4 { stroke-dasharray: 12 4 2 4; }
[data-theme="nacht"] .linie.reihe-5 { stroke-dasharray: 4 4; }

.tooltip {
  position: absolute; top: 0; pointer-events: none; z-index: 5;
  background: var(--kachel2); border: 1px solid var(--linie); border-radius: 12px;
  padding: 8px 12px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); min-width: 150px;
}
.tooltip-zeit { color: var(--leise); margin-bottom: 4px; }
.tooltip-zeile { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tooltip-zeile span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.tooltip-zeile strong { font-weight: 600; }

.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th { text-align: left; color: var(--leise); font-weight: 600; font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 10px; border-bottom: 1px solid var(--linie); }
.tabelle th:not(:first-child), .tabelle td:not(:first-child) { text-align: right; white-space: nowrap; }
.tabelle td:first-child { display: flex; align-items: center; gap: 8px; }

/* Sensorverwaltung */
.kachel-link { flex-direction: row; justify-content: space-between; align-items: center; text-decoration: none; font-size: 16px; }
.kachel-link > span:last-child { font-size: 28px; color: var(--leise); }
.sensor-liste { display: flex; flex-direction: column; gap: 10px; }
.sensor-karte { border: 1px solid var(--linie); border-radius: 16px; padding: 14px; background: var(--kachel2); display: flex; flex-direction: column; gap: 12px; }
.sensor-karte.taste { border-color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-weich); }
.sensor-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sensor-kopf strong { font-size: 17px; }
.sensor-werte { display: flex; gap: 14px; flex-wrap: wrap; color: var(--leise); font-size: 14px; }
.sensor-werte b { color: var(--text); font-weight: 600; }
.sensor-kennung { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--leise); }
.taste-hinweis { color: var(--gruen); font-weight: 700; font-size: 14px; }
.formular input[type="text"], .formular input[type="number"] {
  min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linie);
  background: var(--kachel); color: var(--text); font: inherit; font-size: 17px; width: 100%;
}
.sensor-karte .formular select { background: var(--kachel); }
.drei { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .drei { grid-template-columns: 1fr 1fr; } .drei > :first-child { grid-column: 1 / -1; } }
.knopf-gefahr { background: transparent; color: var(--rot); border: 1px solid var(--linie); }

/* ======================================================== M6: Automatik */
.automatik-zeile {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: -4px 0 12px; padding: 0 4px; color: var(--leise); font-size: 14px; text-decoration: none;
}
.automatik-zeile b { color: var(--text); font-weight: 600; }
.tage { display: flex; gap: 6px; flex-wrap: wrap; }
.tage button {
  min-width: 44px; min-height: 40px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--kachel); color: var(--leise); font-weight: 600; cursor: pointer;
}
.tage button[aria-pressed="true"] { background: var(--knopf-aktiv); color: var(--knopf-aktiv-text); border-color: transparent; }
.zeitplan-zeile { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: end; }
@media (max-width: 560px) { .zeitplan-zeile { grid-template-columns: 1fr; } }
.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.protokoll li:first-child { border-top: 0; }
.protokoll .p-zeit { color: var(--leise); white-space: nowrap; }
.protokoll .art-fehler { color: var(--rot); }
.protokoll .art-frost { color: var(--blau); }

/* ======================================================== M5: Tablet */
.kopplungscode {
  font-size: 44px; font-weight: 700; letter-spacing: 10px; text-align: center;
  padding: 16px; border-radius: 16px; background: var(--kachel2); border: 1px dashed var(--linie);
}
.app-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-zeile .app-name { display: flex; flex-direction: column; min-width: 0; }
.app-zeile .app-name small { color: var(--leise); font-size: 12px; overflow-wrap: anywhere; }
.app-zeile .segment { min-width: 240px; }
.app-zeile.ist-frei { border-color: var(--gruen); }
.sensor-karte.app-zeile { flex-direction: row; }
@media (max-width: 560px) {
  .sensor-karte.app-zeile { flex-direction: column; align-items: stretch; }
  .app-zeile .segment { min-width: 0; width: 100%; }
}