/*
 * Vito – im Stil der Hausverwaltung (Tant Antjes Huus):
 * Petrol als Grundton, Magenta als zweite Stimme, Bernstein für Warnungen.
 * Harte Schatten ohne Weichzeichner, rechte Winkel, Bewegung in festen Stufen.
 */

:root {
  color-scheme: light;
  --grund: #f4f2ee;
  --flaeche: #ffffff;
  --flaeche-2: #ebe8e2;
  --schrift: #14181c;
  --schrift-2: #414b55;
  --schrift-3: #6f7b86;
  --linie-2: #cdc8be;
  --gitter: #e6e3dc;

  --akzent: #0d7f84;
  --akzent-sanft: #cdeced;
  --akzent-tief: #085356;
  --zweit: #c22f7a;
  --zweit-sanft: #fbdcec;
  --minus: #cc3355;
  --minus-sanft: #fbdde3;
  --plus: #2a8b52;
  --plus-sanft: #d7f0dd;
  --warn: #c07d0e;
  --warn-sanft: #fce9c4;
  --auf-akzent: #ffffff;

  /* Kurven – geprüft auf Farbfehlsichtigkeit, alle Paare */
  --serie-1: #008f9a;
  --serie-2: #c98200;
  --serie-3: #5b45c2;
  --serie-4: #6f7b86;
  --stoerung-flaeche: rgba(204, 51, 85, 0.12);

  --kante: #14181c;
  --schatten: 3px 3px 0 0 var(--kante);
  --schatten-klein: 2px 2px 0 0 var(--kante);
  --takt: 640ms;
  --schrift-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: #0f1119; --flaeche: #191d28; --flaeche-2: #232836;
    --schrift: #f0f2f4; --schrift-2: #b4bcc6; --schrift-3: #7e8894;
    --linie-2: #2a303c; --gitter: #262b37;
    --akzent: #2fd4d9; --akzent-sanft: #0d3c3f; --akzent-tief: #74e9ed;
    --zweit: #ff5fae; --zweit-sanft: #3d1029;
    --minus: #ff6b85; --minus-sanft: #3d161f;
    --plus: #4fd98a; --plus-sanft: #113520;
    --warn: #ffc555; --warn-sanft: #3a2b0d;
    --auf-akzent: #0f1119;
    --serie-1: #1a9ea3; --serie-2: #c3860c; --serie-3: #8a7cf0; --serie-4: #8e98a3;
    --stoerung-flaeche: rgba(255, 107, 133, 0.16);
    --kante: #05070a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0f1119; --flaeche: #191d28; --flaeche-2: #232836;
  --schrift: #f0f2f4; --schrift-2: #b4bcc6; --schrift-3: #7e8894;
  --linie-2: #2a303c; --gitter: #262b37;
  --akzent: #2fd4d9; --akzent-sanft: #0d3c3f; --akzent-tief: #74e9ed;
  --zweit: #ff5fae; --zweit-sanft: #3d1029;
  --minus: #ff6b85; --minus-sanft: #3d161f;
  --plus: #4fd98a; --plus-sanft: #113520;
  --warn: #ffc555; --warn-sanft: #3a2b0d;
  --auf-akzent: #0f1119;
  --serie-1: #1a9ea3; --serie-2: #c3860c; --serie-3: #8a7cf0; --serie-4: #8e98a3;
  --stoerung-flaeche: rgba(255, 107, 133, 0.16);
  --kante: #05070a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--grund); color: var(--schrift);
  font-family: var(--schrift-sans); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol { margin: 0; }
h1, h2, h3, td, th, dd, dt, p, li, label, summary { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.num { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }

/* ---- Kante ---- */
.kante { border: 2px solid var(--kante); box-shadow: var(--schatten); }
.kante-klein { border: 2px solid var(--kante); box-shadow: var(--schatten-klein); }

/* ---- Kopf ---- */
.kopf {
  position: sticky; top: 0; z-index: 10;
  background: var(--grund); border-bottom: 2px solid var(--kante);
}
.kopf-innen {
  max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: calc(0.7rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right)) 0.6rem max(1rem, env(safe-area-inset-left));
}
.kopf-titel { font-size: clamp(1rem, 5vw, 1.3194rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25; }
.kopf-unterzeile { font-size: 0.8125rem; color: var(--schrift-3); min-height: 1.2em; }

.seite {
  max-width: 760px; margin: 0 auto;
  padding: 1rem max(1rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left));
}

.abschnitt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--schrift-2); }
.abschnitt-abstand { margin: 1.75rem 0 0.75rem; }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0 0.75rem; }

.karte { background: var(--flaeche); padding: 1rem; margin-bottom: 1rem; }
.karte-titel { font-size: 0.9028rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.untertitel { margin-top: 0.125rem; margin-bottom: 0.75rem; color: var(--schrift-3); font-size: 0.8125rem; }

/* ---- Zustand ---- */
.zustand {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem;
  background: var(--flaeche); padding: 1rem; margin-bottom: 1rem;
  --farbe: var(--schrift-3); --sanft: var(--flaeche-2);
}
.zustand[data-zustand="ok"] { --farbe: var(--plus); --sanft: var(--plus-sanft); }
.zustand[data-zustand="stoerung"] { --farbe: var(--minus); --sanft: var(--minus-sanft); }
.zustand[data-zustand="kein_kabel"], .zustand[data-zustand="keine_antwort"] { --farbe: var(--warn); --sanft: var(--warn-sanft); }
.zustand[data-zustand="pi_stumm"] { --farbe: var(--zweit); --sanft: var(--zweit-sanft); }
.zustand-marke {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: var(--farbe); color: var(--flaeche); border: 2px solid var(--kante);
  font-weight: 700; font-size: 1.4rem; line-height: 1;
}
.zustand[data-zustand="stoerung"] .zustand-marke { animation: takt-blinken calc(var(--takt) * 1.4) steps(1, end) infinite; }
.zustand-titel { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.zustand-text { color: var(--schrift-2); margin-top: 0.125rem; }
.zustand-hinweis { margin-top: 0.625rem; padding: 0.5rem 0.75rem; background: var(--sanft); border-left: 4px solid var(--farbe); white-space: pre-line; font-weight: 600; font-size: 0.9375rem; }
.zustand-hinweis:empty, .zustand .knopfzeile:empty { display: none; }
.zustand .knopfzeile { margin-top: 0.75rem; }

/* ---- Kacheln ---- */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 520px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kachel { background: var(--flaeche); padding: 0.625rem 0.75rem; min-width: 0; container-type: inline-size; }
.kachel-titel { font-size: clamp(0.6944rem, 5cqi, 0.7639rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--schrift-3); }
.kachel-wert { font-size: clamp(1.25rem, 14cqi, 1.75rem); font-weight: 700; line-height: 1.15; margin-top: 0.125rem; overflow-wrap: anywhere; }
.kachel-wert small { font-size: 0.55em; font-weight: 600; color: var(--schrift-2); margin-left: 0.15em; }
.kachel-hinweis { font-size: clamp(0.6944rem, 5cqi, 0.7986rem); color: var(--schrift-3); }

/* ---- Knöpfe ---- */
.knopfzeile { display: flex; gap: 0.5rem; align-items: center; }
.knopfzeile.umbruch { flex-wrap: wrap; }
.knopf {
  font: inherit; font-size: 0.875rem; font-weight: 700; line-height: 1.2;
  min-height: 2.5rem; padding: 0.45rem 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 2px solid var(--kante); border-radius: 0; box-shadow: var(--schatten-klein);
  background: var(--flaeche); color: var(--schrift);
  transition: transform 60ms steps(2, end), box-shadow 60ms steps(2, end);
}
.knopf:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf-haupt { background: var(--akzent); color: var(--auf-akzent); }
.knopf-neben { background: var(--flaeche); }
.knopf-gefahr { background: var(--minus-sanft); color: var(--minus); }
.knopf[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }
#zeitraum .knopf { min-height: 2.25rem; padding: 0.3rem 0.7rem; font-size: 0.8125rem; }

/* Ring: dreht sich in festen Stufen */
.ring { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block;
  animation: takt-dreh var(--takt) steps(8, end) infinite; }

.rueckmeldung { margin-top: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.9028rem; border-left: 4px solid var(--akzent); background: var(--akzent-sanft); white-space: pre-line; }
.rueckmeldung[data-art="ok"] { border-color: var(--plus); background: var(--plus-sanft); }
.rueckmeldung[data-art="fehler"] { border-color: var(--minus); background: var(--minus-sanft); }
.rueckmeldung[data-art="warn"] { border-color: var(--warn); background: var(--warn-sanft); }

/* ---- Daten-Listen ---- */
.daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0.25rem 0 0.875rem; font-size: 0.9375rem; }
.daten:empty { display: none; }
.daten dt { color: var(--schrift-3); }
.daten dd { font-weight: 600; }
.fehlerliste { list-style: none; padding: 0; margin: 0.875rem 0 0; border-top: 2px solid var(--kante); }
.fehlerliste li { padding: 0.6rem 0; border-bottom: 1px solid var(--linie-2); display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.25rem 0.75rem; }
.fehlercode { font-family: var(--schrift-mono); font-weight: 600; background: var(--flaeche-2); border: 2px solid var(--kante); text-align: center; align-self: start; padding: 0.1rem 0; }
.fehlerzeit { color: var(--schrift-3); font-size: 0.8125rem; }
.fehlerhinweis { grid-column: 2; font-size: 0.8125rem; color: var(--schrift-2); white-space: pre-line; }
.klein { font-size: 0.8125rem; color: var(--schrift-3); margin-top: 0.5rem; }

/* ---- Diagramme ---- */
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.375rem; padding: 0; font-size: 0.8125rem; color: var(--schrift-2); }
.legende li { display: flex; align-items: center; gap: 0.4rem; }
.legende .schluessel { width: 14px; height: 2px; background: var(--f); }
.legende .flaeche-schluessel { width: 12px; height: 12px; background: var(--stoerung-flaeche); outline: 1px solid var(--minus); outline-offset: -1px; }
.diagramm { position: relative; width: 100%; height: 220px; touch-action: pan-y; }
.diagramm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.diagramm.laedt { opacity: 0.5; }
.leer { color: var(--schrift-3); font-size: 0.875rem; display: grid; place-items: center; height: 100%; margin: 0; }
.achse-text { fill: var(--schrift-3); font-family: var(--schrift-mono); font-size: 10.5px; }
.end-label { fill: var(--schrift-2); font-size: 11.5px; font-weight: 700; }

.tooltip { position: fixed; z-index: 30; pointer-events: none; min-width: 9rem; background: var(--flaeche); padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
.tooltip .tt-zeit { color: var(--schrift-3); margin-bottom: 0.25rem; font-family: var(--schrift-mono); font-size: 0.75rem; }
.tooltip .tt-zeile { display: flex; align-items: center; gap: 0.5rem; }
.tooltip .tt-zeile i { width: 12px; height: 2px; background: var(--f); flex: none; }
.tooltip .tt-zeile b { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; min-width: 4.2em; }
.tooltip .tt-zeile span { color: var(--schrift-2); }

.tabelle { margin-top: 0.625rem; font-size: 0.8125rem; }
.tabelle summary { cursor: pointer; color: var(--schrift-2); font-weight: 600; }
.tabelle div { max-height: 260px; overflow: auto; margin-top: 0.375rem; }
.tabelle table { width: 100%; border-collapse: collapse; font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }
.tabelle th, .tabelle td { text-align: right; padding: 0.25rem 0.375rem; border-bottom: 1px solid var(--linie-2); white-space: nowrap; }
.tabelle th:first-child, .tabelle td:first-child { text-align: left; }
.tabelle th { position: sticky; top: 0; background: var(--flaeche); color: var(--schrift-2); font-family: var(--schrift-sans); font-weight: 700; }

/* ---- Meldungen ---- */
.ereignisse { list-style: none; padding: 0; margin-top: 0.5rem; }
.ereignisse li { padding: 0.625rem 0; border-top: 1px solid var(--linie-2); }
.ereignisse li:first-child { border-top: 0; }
.ereignis-kopf { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.ereignis-titel { font-weight: 700; }
.ereignis-zeit { color: var(--schrift-3); font-size: 0.75rem; white-space: nowrap; font-family: var(--schrift-mono); }
.ereignis-text { margin-top: 0.125rem; color: var(--schrift-2); font-size: 0.875rem; white-space: pre-line; }

/* ---- Anmeldung & Dialog ---- */
.anmeldung form { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.anmeldung label { font-weight: 600; font-size: 0.875rem; }
.anmeldung input { font: inherit; padding: 0.6rem 0.75rem; border: 2px solid var(--kante); border-radius: 0; background: var(--grund); color: var(--schrift); }
.dialog { background: var(--flaeche); color: var(--schrift); padding: 1.25rem; max-width: min(26rem, calc(100vw - 2rem)); border-radius: 0; }
.dialog::backdrop { background: rgba(15, 17, 25, 0.55); }
.dialog-titel { font-size: 1.125rem; font-weight: 700; }
.dialog-text { color: var(--schrift-2); margin: 0.375rem 0 1rem; }
.fuss { text-align: center; margin-top: 1.5rem; }
.leise { font: inherit; font-size: 0.875rem; background: none; border: 0; color: var(--schrift-3); text-decoration: underline; cursor: pointer; padding: 0.5rem; }

/* ---- Bewegung in festen Stufen ---- */
@keyframes takt-dreh { to { transform: rotate(360deg); } }
@keyframes takt-blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.35; } }
@keyframes takt-auftritt { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.takt-auftritt { animation: takt-auftritt calc(var(--takt) * 0.5) steps(4, end) both; }
.takt-reihe > * { animation: takt-auftritt calc(var(--takt) * 0.5) steps(4, end) both; }
.takt-reihe > :nth-child(2) { animation-delay: 40ms; }
.takt-reihe > :nth-child(3) { animation-delay: 80ms; }
.takt-reihe > :nth-child(4) { animation-delay: 120ms; }
.takt-reihe > :nth-child(5) { animation-delay: 160ms; }
.takt-reihe > :nth-child(6) { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
  .takt-auftritt, .takt-reihe > *, .ring, .zustand-marke { animation: none !important; }
  .knopf { transition: none; }
}

/* =====================================================================
 * Bereiche, Leiste, Wechsel – wie in der Hausverwaltung
 * ===================================================================== */

.pixelig { shape-rendering: crispEdges; }
.bereich.takt-auftauchen { animation: takt-auftauchen calc(var(--takt) * 0.5) steps(4, end) both; }
@keyframes takt-auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.abschnitt-oben { margin: 0.25rem 0 0.25rem; }

/* Leiste: am Rechner unter dem Kopf, auf dem Telefon unten */
.leiste { display: flex; max-width: 760px; margin: 0 auto; padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left)); gap: 0.25rem; }
.leiste-punkt {
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--schrift-3); background: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.625rem 0.45rem;
  border: 0; border-bottom: 4px solid transparent; text-decoration: none; position: relative;
}
.leiste-punkt svg { width: 18px; height: 18px; }
.leiste-punkt[aria-current="page"] { color: var(--akzent-tief); border-bottom-color: var(--akzent); background: var(--akzent-sanft); font-weight: 700; }
.zaehler {
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; display: inline-grid; place-items: center;
  background: var(--zweit); color: var(--flaeche); font-size: 0.6944rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--kante); font-family: var(--schrift-mono);
}
.zaehler:empty { display: none; }

@media (max-width: 767px) {
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .leiste {
    position: fixed; inset: auto 0 0 0; z-index: 30; max-width: none; margin: 0; gap: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px); justify-content: space-around;
    background: var(--flaeche); border-top: 2px solid var(--kante);
  }
  .leiste-punkt {
    flex: 1; min-width: 56px; flex-direction: column; gap: 0.15rem; font-size: 0.7292rem;
    padding: 0.4rem 0.25rem 0.45rem; border-bottom: 0; border-top: 4px solid transparent;
  }
  .leiste-punkt[aria-current="page"] { border-top-color: var(--akzent); }
  .leiste-punkt svg { width: 20px; height: 20px; }
  .leiste-punkt .zaehler { position: absolute; top: 0.2rem; left: calc(50% + 4px); }
}

/* Der Wechselschirm: das Symbol des Ziels baut sich Reihe für Reihe auf */
.wechsel, .auftakt {
  position: fixed; inset: 0; z-index: 60; background: var(--grund);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
}
.wechsel[hidden], .auftakt[hidden] { display: none; }
.wechsel svg { width: 80px; height: 80px; color: var(--akzent); }
.wechsel-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cursor { display: inline-block; width: 8px; height: 14px; background: var(--zweit); animation: takt-blinken calc(var(--takt) * 1.4) steps(1, end) infinite; }
.baut rect { animation: reihe-an 1ms steps(1, end) both; }
@keyframes reihe-an { from { opacity: 0; } to { opacity: 1; } }
.wechsel.geht, .auftakt.geht { animation: schirm-weg 240ms steps(3, end) both; }
@keyframes schirm-weg { to { opacity: 0; } }

/* Der Auftakt beim Öffnen: Pixel fallen, die Glut glimmt */
.auftakt svg { width: min(46vw, 180px); height: min(46vw, 180px); overflow: visible; }
.auftakt .fall { animation: pixel-fall 260ms steps(4, end) both; }
@keyframes pixel-fall { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.auftakt .glut { animation: glut 420ms steps(1, end) infinite both; }
@keyframes glut { 0%, 49% { fill: var(--zweit); } 50%, 100% { fill: var(--warn); } }
.auftakt .boden { transform-origin: center; animation: boden 420ms steps(6, end) both; }
@keyframes boden { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .wechsel, .auftakt { display: none !important; }
  .bereich.takt-auftauchen { animation: none; }
}

/* ---- Karten-Kopf, Links ---- */
.karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.mehr-link { color: var(--akzent-tief); font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.mehr-link:hover { text-decoration: underline; }
.anleitung-link { display: inline-flex; margin-top: 0.625rem; font-weight: 700; font-size: 0.9028rem; color: var(--akzent-tief); text-decoration: none; border-bottom: 2px solid currentColor; }

/* ---- Meldungen / Postfach ---- */
.meldungsliste { list-style: none; padding: 0; margin: 0.25rem 0 0; }
.meldungsliste li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.25rem 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--linie-2); }
.meldungsliste li:first-child { border-top: 0; }
.meldungsliste .art { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 2px solid var(--kante); font-weight: 700; font-size: 0.875rem;
  background: var(--flaeche-2); color: var(--schrift-2); }
.meldungsliste .art[data-schwere="kritisch"] { background: var(--minus); color: var(--flaeche); }
.meldungsliste .art[data-schwere="warn"] { background: var(--warn); color: #14181c; }
.meldungsliste .art[data-schwere="gut"] { background: var(--plus-sanft); color: var(--plus); }
.meldungsliste .kopfzeile { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.meldungsliste .titel { font-weight: 700; }
.meldungsliste .zeit { color: var(--schrift-3); font-size: 0.75rem; white-space: nowrap; font-family: var(--schrift-mono); }
.meldungsliste .text { grid-column: 2; color: var(--schrift-2); font-size: 0.875rem; white-space: pre-line; }
.meldungsliste li[data-neu] .titel::after { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--zweit); margin-left: 0.4rem; vertical-align: middle; }
.meldungsliste.kurz .text { display: none; }
.meldungsliste .leer { grid-column: 1 / -1; color: var(--schrift-3); display: block; height: auto; }

/* ---- Statistik ---- */
.stat-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 1rem; }
@media (max-width: 520px) { .stat-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tage { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; margin: 0.5rem 0 0.25rem; }
.tag { aspect-ratio: 1; border: 2px solid var(--kante); display: grid; place-items: center; font-size: 0.625rem; font-weight: 700; line-height: 1; cursor: default; }
.tag[data-zustand="leer"] { border-color: var(--linie-2); background: transparent; }
.tag[data-zustand="ok"] { background: var(--plus-sanft); }
.tag[data-zustand="funkstille"] { background: var(--schrift-3); color: var(--flaeche); }
.tag[data-zustand="verbindung"] { background: var(--warn); color: #14181c; }
.tag[data-zustand="stoerung"] { background: var(--minus); color: var(--flaeche); }
.tag.heute { outline: 2px solid var(--akzent); outline-offset: 1px; }
.tage-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; padding: 0; margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--schrift-2); }
.tage-legende li { display: flex; align-items: center; gap: 0.35rem; }
.tage-legende .tag { width: 12px; height: 12px; border-width: 1px; font-size: 0.5rem; }
.codes { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.codes li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.2rem 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--linie-2); }
.codes li:first-child { border-top: 0; }
.codes .balken-spur { grid-column: 2; height: 10px; background: var(--flaeche-2); }
.codes .balken { height: 10px; background: var(--akzent); border-radius: 0 2px 2px 0; }
.codes .zahlen { grid-column: 2; font-size: 0.8125rem; color: var(--schrift-3); font-family: var(--schrift-mono); }

/* ---- Anleitung ---- */
.kapitel { background: var(--flaeche); margin-bottom: 0.75rem; }
.kapitel > summary { list-style: none; cursor: pointer; padding: 0.875rem 1rem; display: flex; align-items: center; gap: 0.75rem; font-weight: 700; }
.kapitel > summary::-webkit-details-marker { display: none; }
.kapitel > summary::after { content: "+"; margin-left: auto; font-family: var(--schrift-mono); font-size: 1.1rem; color: var(--schrift-3); }
.kapitel[open] > summary::after { content: "–"; }
.kapitel > summary svg { width: 22px; height: 22px; color: var(--akzent); flex: none; }
.kapitel[data-passt] { outline: 3px solid var(--zweit); outline-offset: 2px; }
.kapitel-inhalt { padding: 0 1rem 1rem; }
.kapitel-inhalt ol.schritte { padding-left: 1.25rem; margin: 0.25rem 0 0; }
.kapitel-inhalt ol.schritte li { margin: 0.4rem 0; }
.kapitel-inhalt .warnung { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; background: var(--minus-sanft); border-left: 4px solid var(--minus); font-weight: 600; }
.fortschritt { height: 12px; background: var(--flaeche-2); border: 2px solid var(--kante); margin: 0.5rem 0 0.75rem; }
.fortschritt > span { display: block; height: 100%; background: var(--plus); transition: width 300ms steps(5, end); }
.checkliste { list-style: none; padding: 0; margin: 0; }
.checkliste li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.2rem 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--linie-2); align-items: start; }
.checkliste li:first-child { border-top: 0; }
.haken { width: 1.4rem; height: 1.4rem; border: 2px solid var(--kante); display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; background: var(--flaeche); color: var(--flaeche); cursor: pointer; padding: 0; }
.haken[aria-checked="true"] { background: var(--plus); }
.haken[data-auto] { cursor: default; }
.haken[data-auto][aria-checked="false"] { background: var(--flaeche-2); color: var(--schrift-3); }
.checkliste .erklaerung { grid-column: 2; font-size: 0.8125rem; color: var(--schrift-3); }
.checkliste .automatisch { font-size: 0.6944rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent-tief); margin-left: 0.35rem; }
.checkliste li[data-erledigt] > span:not(.haken) { color: var(--schrift-2); }

/* Korrekturen nach Sichtprüfung */
.haken[data-auto][aria-checked="false"] { color: transparent; }
.kacheln { margin-bottom: 1rem; }
.tag[data-zustand="ok"] { border-color: var(--plus); }

/* ---- Testbetrieb: unübersehbar ---- */
.testband { display: none; }
body.testbetrieb .testband {
  display: block; text-decoration: none; text-align: center; font-size: 0.7292rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: calc(0.3rem + env(safe-area-inset-top, 0px)) 1rem 0.3rem; color: #14181c;
  background: repeating-linear-gradient(135deg, var(--warn) 0 12px, #ffd98a 12px 24px);
  border-bottom: 2px solid var(--kante);
}
body.testbetrieb .kopf-innen { padding-top: 0.6rem; }
.testkarte { border-color: var(--warn); box-shadow: 3px 3px 0 0 var(--warn); background: var(--warn-sanft); }
.szenario-gruppe { margin-top: 0.75rem; }
.szenario-gruppe .kachel-titel { margin-bottom: 0.35rem; }
#unplausibel .rueckmeldung { margin: 0 0 1rem; }
.sim-lage { margin: 0.5rem 0 0.25rem; padding: 0.4rem 0.6rem; border: 2px solid var(--kante); background: var(--flaeche); font-weight: 700; font-size: 0.875rem; }

/* =====================================================================
 * Umbau 25.09.: Reiter, Protokoll, Einstellungen
 * ===================================================================== */
a.knopf { text-decoration: none; }
.kopf-text { min-width: 0; }
.kopf-knopf {
  flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  background: var(--flaeche); color: var(--schrift-2);
}
.kopf-knopf[hidden] { display: none; }
.kopf-knopf svg { width: 20px; height: 20px; }
.kopf-knopf[aria-current="page"] { background: var(--akzent-sanft); color: var(--akzent-tief); }
.kopf-knopf:active { transform: translate(2px, 2px); box-shadow: none; }

/* ---- Reiter im Bereich Meldungen ---- */
.reiter { display: flex; border: 2px solid var(--kante); box-shadow: var(--schatten-klein); background: var(--flaeche); margin: 0.25rem 0 1rem; }
.reiter-punkt { flex: 1; text-align: center; padding: 0.55rem 0.5rem; font-weight: 700; font-size: 0.875rem; color: var(--schrift-2); text-decoration: none; }
.reiter-punkt + .reiter-punkt { border-left: 2px solid var(--kante); }
.reiter-punkt[aria-current="page"] { background: var(--akzent); color: var(--auf-akzent); }
.filterzeile { margin-bottom: 0.75rem; }
.filterzeile .knopf { min-height: 2.25rem; padding: 0.3rem 0.7rem; font-size: 0.8125rem; }

/* ---- Protokoll ---- */
.protokoll { list-style: none; padding: 0; margin: 0; }
.protokoll > li { border-top: 1px solid var(--linie-2); }
.protokoll > li:first-child { border-top: 0; }
.protokoll summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; padding: 0.65rem 0; }
.protokoll summary::-webkit-details-marker { display: none; }
.protokoll .art { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 2px solid var(--kante); font-weight: 700; font-size: 0.875rem; background: var(--flaeche-2); color: var(--schrift-2); }
.protokoll .art[data-schwere="kritisch"] { background: var(--minus); color: var(--flaeche); }
.protokoll .art[data-schwere="warn"] { background: var(--warn); color: #14181c; }
.protokoll .art[data-schwere="gut"] { background: var(--plus-sanft); color: var(--plus); }
.protokoll li[data-typ="aktion"] .art { border-radius: 50%; }
.p-kopf { display: grid; min-width: 0; }
.p-titel { font-weight: 700; }
.p-kurz { font-size: 0.8125rem; color: var(--schrift-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details[open] .p-kurz { white-space: normal; }
.p-zeit { font-family: var(--schrift-mono); font-size: 0.75rem; color: var(--schrift-3); white-space: nowrap; }
.p-inhalt { padding: 0 0 0.75rem 2.5rem; }
.p-inhalt .daten { font-size: 0.875rem; margin-bottom: 0.25rem; }
.p-text { color: var(--schrift-2); font-size: 0.875rem; white-space: pre-line; margin-bottom: 0.5rem; }
@media (max-width: 520px) {
  .protokoll summary { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .p-zeit { grid-column: 2; grid-row: 2; margin-top: -0.35rem; }
  .p-inhalt { padding-left: 0; }
  .p-inhalt .daten { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .p-inhalt .daten dd { margin-bottom: 0.4rem; }
}
.feld-titel { display: block; font-weight: 700; font-size: 0.875rem; margin: 1rem 0 0.35rem; }
.haken-zeile { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; margin-top: 0.75rem; cursor: pointer; font-size: 0.9375rem; font-weight: 600; }
.haken-zeile .erklaerung { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--schrift-3); }
.haken-zeile.gross { font-size: 1rem; }

/* ---- Einstellungen ---- */
.schalter-zeile { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.schalter { font: inherit; display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0.25rem 0; cursor: pointer; color: var(--schrift); font-weight: 700; }
.schalter-spur { width: 3rem; height: 1.6rem; border: 2px solid var(--kante); background: var(--flaeche-2); position: relative; box-shadow: var(--schatten-klein); flex: none; }
.schalter-knopf { position: absolute; top: 2px; left: 2px; width: calc(1.6rem - 8px); height: calc(1.6rem - 8px); background: var(--schrift-3); transition: left 120ms steps(3, end); }
.schalter[aria-checked="true"] .schalter-spur { background: var(--warn); }
.schalter[aria-checked="true"] .schalter-knopf { left: calc(100% - 1.6rem + 6px); background: var(--kante); }
.schalter-lage { font-size: 0.875rem; color: var(--schrift-2); }
@media (max-width: 520px) { .zahlfelder { grid-template-columns: minmax(0, 1fr); } }

/* ---- Testkarte ---- */
.testkarte .karte-kopf { margin-bottom: 0.25rem; }
.echt-lage { font-size: 0.8125rem; color: var(--schrift-2); margin-top: 0.35rem; }
.echt-lage:empty { display: none; }
.echt-lage[data-zustand="stoerung"] { color: var(--minus); font-weight: 700; }
.szenarien { margin-top: 0.75rem; border-top: 2px solid var(--kante); padding-top: 0.5rem; }
.szenarien > summary { cursor: pointer; font-weight: 700; font-size: 0.875rem; }
.szenarien .untertitel { margin: 0.25rem 0 0; }

/* ---- Steckdose (FRITZ!) ---- */
.fritz-anleitung { margin: 0.25rem 0 0.75rem; }
.fritz-anleitung > summary { cursor: pointer; font-weight: 700; font-size: 0.875rem; color: var(--akzent-tief); }
.fritz-anleitung .schritte { padding-left: 1.25rem; margin: 0.35rem 0 0; font-size: 0.9375rem; }
.fritz-anleitung .schritte li { margin: 0.3rem 0; }
.feld { display: block; margin-top: 0.75rem; }
.feld .feld-titel { margin: 0 0 0.3rem; }
.feld input { font: inherit; width: 100%; padding: 0.55rem 0.7rem; border: 2px solid var(--kante); border-radius: 0; background: var(--grund); color: var(--schrift); }
.fritz-form .knopfzeile, #fritz-auswahl .knopfzeile { margin-top: 1rem; }
.auswahl { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.auswahl-eintrag { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.6rem 0.75rem; border: 2px solid var(--kante); background: var(--flaeche); cursor: pointer; }
.auswahl-eintrag:has(input:checked) { background: var(--akzent-sanft); box-shadow: var(--schatten-klein); }
.auswahl-eintrag input { width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; accent-color: var(--akzent); }
.auswahl-name { display: block; font-weight: 700; }
.auswahl-eintrag .erklaerung { display: block; font-size: 0.8125rem; color: var(--schrift-3); }
.fuss-links { margin-top: 0.5rem; }
.fuss-links .leise { padding-left: 0; }

/* ---- Testkarte: einklappbar ---- */
.klapp-titel { font: inherit; display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; padding: 0.25rem 0; margin: -0.25rem 0; cursor: pointer; color: var(--schrift); }
.klapp-pfeil { width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.klapp-titel[aria-expanded="false"] .klapp-pfeil { transform: rotate(-45deg); }
.knopf-klein { min-height: 2.1rem; padding: 0.25rem 0.65rem; font-size: 0.8125rem; }
.testkarte .karte-kopf { align-items: center; }
.testkarte.eingeklappt .echt-lage, .testkarte.eingeklappt .testkarte-inhalt { display: none; }
.testkarte.eingeklappt .sim-lage { margin-bottom: 0; }

/* ---- Diagnose (3.10.): Heizung gerade, Einstellungen, Verlauf-Karten, Statistik ---- */
.legende .schluessel.gestrichelt { background: repeating-linear-gradient(90deg, var(--f) 0 4px, transparent 4px 7px); }
.erklaerung-text { margin-top: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--schrift-2); background: var(--flaeche-2); border-left: 4px solid var(--linie-2); }
.diagramm.streifen { height: auto; }
.streifen-text { fill: var(--schrift-2); font-size: 11.5px; font-weight: 600; }
.jetzt-satz { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0.25rem 0 0.625rem; }
.jetzt-satz[data-art="stoerung"] { color: var(--minus); }
.daten dd .erklaerung { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--schrift-3); margin-top: 0.1rem; }
.leise-rechts { font: inherit; font-size: 0.8125rem; font-weight: 600; background: none; border: 0; color: var(--akzent-tief); text-decoration: underline; cursor: pointer; padding: 0; }
.stat-tabelle { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.9375rem; table-layout: fixed; }
.stat-tabelle th:first-child, .stat-tabelle td:first-child { width: 34%; }
.stat-tabelle th, .stat-tabelle td { text-align: right; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--linie-2); }
.stat-tabelle th:first-child, .stat-tabelle td:first-child { text-align: left; }
.stat-tabelle th { font-size: 0.7639rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--schrift-3); }
.stat-tabelle td:not(:first-child) { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }
.diagramm.klein { height: 150px; }
.hinweis-zeile { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--schrift-3); }

/* ---- Einstellungen an der Heizung ändern ---- */
.daten dd .aendern-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.knopf-klein.aendern { min-height: 1.9rem; padding: 0.15rem 0.55rem; font-size: 0.75rem; }
.dialog .dialog-titel { font-size: 1.125rem; }
.stepper { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }
.stepper input { font: inherit; font-family: var(--schrift-mono); font-size: 1.4rem; font-weight: 600; text-align: center; width: 100%;
  padding: 0.4rem 0.5rem; border: 2px solid var(--kante); border-radius: 0; background: var(--grund); color: var(--schrift); }
.stepper .knopf { min-width: 2.75rem; padding: 0.3rem 0; font-size: 1.2rem; font-family: var(--schrift-mono); }
.stepper-einheit { text-align: center; color: var(--schrift-3); font-size: 0.8125rem; margin-top: -0.4rem; }
.wahl { display: grid; gap: 0.4rem; margin: 0.75rem 0; }
.wahl label { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.5rem 0.65rem; border: 2px solid var(--kante); background: var(--flaeche); cursor: pointer; font-weight: 600; }
.wahl label:has(input:checked) { background: var(--akzent-sanft); box-shadow: var(--schatten-klein); }
.wahl input { width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--akzent); }
.wahl .erklaerung { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--schrift-3); }
.vorher-nachher { display: flex; align-items: center; gap: 0.75rem; justify-content: center; font-size: 1.3rem; font-weight: 700; margin: 0.75rem 0; font-family: var(--schrift-mono); }
.vorher-nachher .alt { color: var(--schrift-3); text-decoration: line-through; font-weight: 400; }
.vorher-nachher .pfeil { color: var(--akzent); }
.dialog .erklaerung-text { margin-top: 0.5rem; }
.dialog .warte { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; margin: 0.75rem 0; }

/* ---- Technikerzugang ---- */
.technikerband { display: none; }
body.techniker .technikerband { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap;
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 1rem 0.35rem; background: var(--akzent-sanft); color: var(--akzent-tief);
  border-bottom: 2px solid var(--kante); font-size: 0.8125rem; font-weight: 700; }
body.techniker .technikerband .leise { color: var(--akzent-tief); padding: 0; }
body.techniker .kopf-innen { padding-top: 0.6rem; }
body.techniker #zahnrad, body.techniker #einrichtung-karte, body.techniker .aendern, body.techniker #zustand-aktion a.knopf,
body.techniker #letzte-meldungen-karte .mehr-link { display: none !important; }
body.techniker #filter [data-filter="verbindung"], body.techniker #filter [data-filter="pi"] { display: none; }
.techniker-liste { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.techniker-liste li { display: grid; gap: 0.25rem 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--linie-2); }
.techniker-liste li:first-child { border-top: 0; }
.techniker-liste .name { font-weight: 700; }
.techniker-liste .klein { margin: 0; }
.anfrage-karte { border-color: var(--zweit); box-shadow: 3px 3px 0 0 var(--zweit); }
.techniker-liste .code-hinweis { margin: 0.4rem 0 0; font-size: 0.875rem; font-weight: 700; }
.techniker-liste .code-gross { margin: 0.1rem 0 0.3rem; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 2.25rem; font-weight: 600; letter-spacing: 0.4em; line-height: 1.1; color: var(--zweit); }
.qr-kasten { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.75rem; align-items: start; margin-top: 0.75rem; }
.qr-kasten svg { width: 8rem; height: 8rem; display: block; border: 2px solid var(--kante); background: #fff; }
.link-text { font-family: var(--schrift-mono); font-size: 0.72rem; word-break: break-all; color: var(--schrift-2); margin: 0; }
.feld-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; margin-top: 0.5rem; }
.feld-zeile .feld { margin-top: 0; }
select.auswahlfeld { font: inherit; padding: 0.5rem 0.6rem; border: 2px solid var(--kante); border-radius: 0; background: var(--grund); color: var(--schrift); }