*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0f0f0f;
  --bg2:      #181818;
  --bg3:      #222;
  --border:   #2a2a2a;
  --amber:    #f59e0b;
  --amber2:   #fbbf24;
  --red:      #ef4444;
  --green:    #22c55e;
  --muted:    #555;
  --text:     #e5e5e5;
  --text2:    #999;
  --auf-amber: #000;       /* Schrift auf orangem Grund */
  --amber-tint: #1a1200;   /* vorgemerkt / Hover */
  --rot-tint:  #1a0606;
  --rot-dunkel: #5a0000;
  --blitz:    #fff;
  --leise:    #2a2a2a;     /* Versionszeile */
  --mono:     'Share Tech Mono', monospace;
  --sans:     'Barlow Condensed', sans-serif;
}

/* ── HELL ── (Dunkel ist die Vorgabe oben; app.js setzt data-theme nach Wahl bzw. Geraeteeinstellung) */
:root[data-theme="hell"] {
  --bg:       #f3f3f1;
  --bg2:      #ffffff;
  --bg3:      #e9e9e6;
  --border:   #d4d4cf;
  --amber:    #d97706;
  --amber2:   #b45309;
  --red:      #dc2626;
  --green:    #15803d;
  --muted:    #8a8a85;
  --text:     #171717;
  --text2:    #57574f;
  --auf-amber: #000;
  --amber-tint: #fff1d6;
  --rot-tint:  #fde7e7;
  --rot-dunkel: #7f1d1d;
  --blitz:    #000;
  --leise:    #c8c8c2;
}

/* ── GROESSE ──
   Die App ist eine schmale Spalte (hoechstens 520 CSS-px, schwarzer Rand daneben ist gewollt).
   Alles ist in rem gebaut; die Grundschrift richtet sich nach Spaltenbreite UND Geraetehoehe:
   - Breite: Spaltenbreite / 22,5  (= 16 px bei 360 px; vier Knoepfe nebeneinander muessen passen)
   - Hoehe:  100dvh / --hoehe (= Hoehe des Inhalts in rem), damit nie gescrollt werden muss
   Der kleinere Wert gewinnt. Das ist nur der Startwert: app.js misst danach den echten Inhalt und
   setzt die Grundschrift so, dass nichts gescrollt werden muss (Fit-to-Screen, s. passeAn()).
   Uebrige Hoehe wird ueber die groessere Schrift genutzt, die Abstaende bleiben klein und fest. */
:root { --hoehe: 43.5; --spalte: min(100vw, 520px); }
html {
  font-size: clamp(11px, min(calc(var(--spalte) / 22.5), calc(100vh / var(--hoehe))), 24px);
  font-size: clamp(11px, min(calc(var(--spalte) / 22.5), calc(100dvh / var(--hoehe))), 24px);
}
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overscroll-behavior: none;
}

/* ── LOGIN ── */
.login-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.login-overlay.hidden { display: none; }

.login-box {
  width: 100%; max-width: 21rem;
  display: flex; flex-direction: column; gap: 1rem;
  animation: fadeUp .4s ease;
}
.login-logo {
  font-size: 3rem; color: var(--amber);
  text-align: center; margin-bottom: .5rem;
  animation: pulse 2s ease infinite;
}
.login-box h2 {
  font-family: var(--sans); font-size: 2rem; font-weight: 700;
  letter-spacing: .3em; text-align: center; color: var(--text);
}
.login-sub {
  text-align: center; color: var(--text2); font-size: .9rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.login-box input {
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); padding: .9rem 1rem;
  font-family: var(--mono); font-size: .95rem;
  outline: none; transition: border-color .2s;
  border-radius: 2px;
}
.login-box input:focus { border-color: var(--amber); }
.login-error {
  color: var(--red); font-size: .85rem; text-align: center;
  letter-spacing: .05em;
}
.login-error.hidden { display: none; }
.login-box button {
  background: var(--amber); color: var(--auf-amber);
  border: none; padding: 1rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  letter-spacing: .2em; cursor: pointer;
  transition: background .2s; border-radius: 2px;
}
.login-box button:hover { background: var(--amber2); }

/* ── PROGRESS BAR ── */
.progress-bar {
  height: 2px; background: var(--border); margin-top: -.7rem; flex: none;
}
.progress-fill {
  height: 100%; width: 0%;
  background: var(--amber);
  transition: width linear;
}
.progress-fill.flash {
  background: var(--blitz);
}

/* ── LAYOUT ── */
.app {
  width: 100%; max-width: 520px; margin: 0 auto;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  display: flex; flex-direction: column; gap: .7rem;
}
/* feste, kleine Abstaende - die Hoehe regelt die Grundschrift (app.js) */
.app > .block, .app > .message { flex: none; }
.app > .app-version { margin-top: -.4rem; }

/* ── HEADER ── */
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.header-left { display: flex; align-items: center; gap: .6rem; }
.logo { font-size: 1.4rem; color: var(--amber); }
.header-title {
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: .25em; color: var(--text);
}
.header-right { display: flex; align-items: center; gap: .75rem; }
.status-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--muted); transition: background .5s;
}
.status-dot.ok  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.err { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.install-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); padding: .3rem .7rem;
  font-family: var(--sans); font-size: .8rem; letter-spacing: .1em;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.install-btn:hover { border-color: var(--amber); color: var(--amber); }
.install-btn.hidden { display: none; }
.logout-btn {
  background: transparent; border: none;
  color: var(--muted); font-size: 1.2rem; cursor: pointer;
  transition: color .2s;
  padding: .5rem; min-width: 2.75rem; min-height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
}
.board-btn {
  color: var(--muted); font-size: 1.15rem; line-height: 1; text-decoration: none;
  min-width: 2.2rem; min-height: 2.75rem;
  display: flex; align-items: center; justify-content: center; transition: color .2s;
}
.board-btn:hover, .theme-btn:hover { color: var(--amber); }
.theme-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); line-height: 1;
  min-width: 2.2rem; min-height: 2.75rem;
  display: flex; align-items: center; justify-content: center; transition: color .2s;
}
.board-btn.hidden { display: none; }
.logout-btn svg, .theme-btn svg { width: 1.15rem; height: 1.15rem; }
.logout-btn:hover { color: var(--red); }

/* ── BLOECKE (Heizkreis, Warmwasser, Kessel, Aussen) ── */
.block {
  margin: 0 .9rem;
  background: var(--bg2); border: 1px solid var(--border);
  padding: .6rem .7rem .7rem .9rem;
  position: relative; border-radius: 2px;
}
.block::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--amber);
}
.block-head {
  display: flex; align-items: center; gap: .5rem;
  min-height: 1.75rem; margin-bottom: .5rem; flex: none;
}
.block-title {
  font-size: .72rem; letter-spacing: .22em; color: var(--text2); font-weight: 600;
}
.block-wert {
  font-family: var(--mono); font-size: .95rem; color: var(--amber); white-space: nowrap;
}
.block-zusatz { font-family: var(--sans); font-size: .7rem; color: var(--text2); letter-spacing: .05em; }
.block-zustand {
  margin-left: auto; font-size: .8rem; letter-spacing: .04em; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.block-zustand span { color: var(--text); }
.block-zustand.brenner.an span { color: var(--amber); font-weight: 700; }
.block-zustand.brenner.an::before { content: '◉ '; color: var(--amber); animation: pulse 1s ease infinite; }
/* Zweck des Brenners (Heizung / Warmwasser); Kaminfeger und Wartung in Warnfarbe */
.block-zustand.brenner .zweck:empty { display: none; }
.block-zustand.brenner .zweck.warn { color: var(--red); font-weight: 700; }

/* Fortschritt eines Schaltbefehls (unter den Knoepfen, nur solange einer laeuft bzw. 3 min danach) */
.fortschritt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .3rem;
  margin-top: .45rem; font-size: .74rem; letter-spacing: .03em; line-height: 1.25;
  color: var(--muted);
}
.fortschritt.hidden { display: none; }
.fortschritt .pfeil { color: var(--muted); }
.fortschritt .fertig { color: var(--text2); }
.fortschritt .aktiv  { color: var(--amber); font-weight: 700; animation: pulse 1s ease infinite; }
.fortschritt .ok     { color: var(--green); font-weight: 700; }
.fortschritt .fehler { color: var(--red); font-weight: 700; }
.lesen-btn {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  font-size: 1.05rem; line-height: 1;
  width: 2rem; height: 1.75rem; padding: 0; border-radius: 2px; cursor: pointer; flex: none;
}
.lesen-btn:disabled { opacity: .5; cursor: default; }
.lesen-btn.busy { border-color: var(--amber); color: var(--amber); }
.lesen-btn.busy { animation: pulse 1s ease infinite; }

/* ── KNOEPFE ── */
.modes-grid, .ww-grid {
  display: grid; gap: .45rem;
  grid-auto-rows: 3.1rem;
}
.modes-grid { grid-template-columns: repeat(4, 1fr); }
.ww-grid    { grid-template-columns: repeat(2, 1fr); }
.mode-btn {
  position: relative;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); padding: .35rem .15rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .04em; cursor: pointer; min-height: 2.75rem; min-width: 0;
  transition: all .15s; text-transform: uppercase;
  border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
}
@media (hover: hover) { .mode-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-tint); } }  /* nur echte Maus: am Handy blieb der zuletzt beruehrte Knopf sonst umrandet */
/* voll markiert = Ist (am Bus bestaetigt) */
.mode-btn.active { border-color: var(--amber); color: var(--auf-amber); background: var(--amber); }
/* eigene Vorgabe, noch nicht am Bus bestaetigt: vorgemerkt (Warteschlange) / gesendet (Kontrolle steht aus) */
.mode-btn.vorgemerkt, .mode-btn.gesendet { border-style: dashed; border-color: var(--amber2); }
.mode-btn.vorgemerkt:not(.active), .mode-btn.gesendet:not(.active) { color: var(--amber); background: var(--amber-tint); }
/* Befehl nicht uebernommen / abgelehnt / keine Rueckmeldung */
.mode-btn.fehler { border-style: dashed; border-color: var(--red); }
.mode-btn.fehler:not(.active) { color: var(--red); background: var(--rot-tint); }
.mode-btn .hinweis {
  font-size: .58rem; letter-spacing: .04em; font-weight: 400; text-transform: none;
  line-height: 1.05; white-space: normal; text-align: center; max-width: 100%;
}
.mode-btn.gesendet .hinweis { animation: pulse 1s ease infinite; }
.mode-btn.fehler.active .hinweis { color: var(--rot-dunkel); font-weight: 600; }

/* ── KESSEL / AUSSEN ── */
.kessel-zeile { display: flex; align-items: center; gap: .9rem; padding: .15rem 0; }
.kessel-wert { font-family: var(--mono); font-size: 2.2rem; color: var(--amber); line-height: 1; white-space: nowrap; }
.einheit { font-family: var(--mono); font-size: .75rem; color: var(--text2); margin-left: .15rem; }
.kessel-detail {
  font-size: .85rem; letter-spacing: .03em; color: var(--text2); line-height: 1.35;
}
.kessel-detail span { font-family: var(--mono); color: var(--text); }
.aussen-wert { font-family: var(--mono); font-size: 2.8rem; color: var(--amber); line-height: 1;
  display: flex; align-items: center; }
.block.aussen .block-head { margin-bottom: .3rem; }

/* ── ZUSATZANZEIGEN ── (eine kompakte Zeile, bricht bei vielen Eintraegen um; leer = ausgeblendet) */
.block.zusatz { padding-top: .45rem; padding-bottom: .45rem; }
.block.zusatz.hidden { display: none; }
.zusatz-liste {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem;
  font-size: .85rem; letter-spacing: .03em; color: var(--text2); line-height: 1.3;
}
.zusatz-item { white-space: nowrap; }
.zusatz-item .zwert { font-family: var(--mono); color: var(--text); margin-left: .3rem; }
.zusatz-item.alt .zwert { color: var(--muted); }
.zusatz-item.an .zwert { color: var(--amber); font-weight: 700; }
.zusatz-item.an .zwert::before { content: '◉ '; color: var(--amber); animation: pulse 1s ease infinite; }

/* ── MESSAGE ── (hoechstens zwei Zeilen, damit die Hoehe planbar bleibt; ganzer Text im title) */
.message {
  margin: 0 .9rem;
  padding: .45rem .8rem;
  font-size: .8rem; letter-spacing: .1em; color: var(--text2);
  border-left: 2px solid var(--border);
  min-height: 2rem; line-height: 1.3; flex: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  transition: color .3s, border-color .3s;
}
.message.err,
.message.error { color: var(--red); border-color: var(--red); }
.message.ok    { color: var(--green); border-color: var(--green); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

.app-version {
  flex: none;
  text-align: center; padding: .1rem 1rem .3rem;
  font-family: var(--mono); font-size: .6rem;
  color: var(--leise); letter-spacing: .1em;
}

/* Kessel und Aussen stehen untereinander (die Reihe gibt ihre Bloecke an .app weiter) */
.reihe { display: contents; }
.reihe > .block { flex: none; }
/* Diagnose (?diag): Viewport, Pixelverhaeltnis, gewaehlte Schrift - zum Nachsehen am Handy */
#diag { color: var(--text2); }
#diag.hidden { display: none; }