/* Vereinsfarben aus ~/DgB/08_Corporate_Design/Farben.txt — Grundlage wie Mittagstisch und PR */
:root {
  --rot: #8a1812; --blau: #29235c; --gruen: #076633; --hell: #e5e5e5; --grau: #7c7c7c;
  --grund: #f6f5f2; --karte: #fff; --text: #1e1d2b; --text2: #52514e;
  --akzent: var(--blau); --rot-text: var(--rot); --gruen-text: var(--gruen);
  --rand: #c9c8d0; --feld: #fff; --gelb-grund: #fff7d6; --gelb-rand: #e0b100; --gelb-text: #8a6a00;
  --rot-grund: #fbe9e7;
  --rund: 0; --rund-knopf: 2px;
  /* Diagrammfarben: geprüfte Grundpalette (dataviz, Plätze 1–5), hell gegen #fff */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4;
  --gitter: #ecebe8;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.35rem; margin: 0 0 8px; color: var(--akzent); }
h2 { font-size: 1.05rem; margin: 20px 0 8px; color: var(--akzent); }
h3 { font-size: .92rem; margin: 14px 0 4px; color: var(--text2); font-weight: 600; }
.dgb-konto-platz { margin-left: auto; }

.karte { background: var(--karte); border-radius: var(--rund); padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 14px; }
.karte > h2:first-child { margin-top: 0; }
.schmal { max-width: 380px; margin: 40px auto; }
details > summary { cursor: pointer; font-weight: 600; color: var(--akzent); padding: 4px 0; }
details[open] > summary { margin-bottom: 10px; }

button { font: inherit; border-radius: var(--rund-knopf); padding: 10px 16px; cursor: pointer; border: 1px solid transparent; }
button.haupt { background: var(--blau); color: #fff; font-weight: 600; }
button.leise { background: transparent; border: 1px solid var(--rand); color: var(--akzent); }
button:disabled { opacity: .55; cursor: default; }
a.knopf-link { display: inline-block; text-align: center; text-decoration: none; border-radius: var(--rund-knopf); padding: 10px 16px; }
a.knopf-link.haupt { display: block; background: var(--blau); color: #fff; font-weight: 600; }
a.knopf-link.gross { padding: 16px; font-size: 1.1rem; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.leiste h2 { flex: 1; margin: 0; }
.hinweis { color: var(--grau); margin: 4px 0 10px; font-size: .92rem; }
.klein { color: var(--grau); font-size: .85rem; margin: 4px 0; }

.meldung { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--gruen); color: #fff; padding: 10px 16px; border-radius: var(--rund); box-shadow: 0 2px 8px rgba(0,0,0,.2);
  max-width: calc(100% - 32px); z-index: 10; }
.meldung.fehler-meldung { background: var(--rot); }

/* Lage oben: Störungen oder „alles in Ordnung“. Farbe nie allein: Zeichen und Wort stehen dabei. */
.lage { padding: 10px 14px; margin: 0 0 8px; border-left: 5px solid var(--gruen); background: var(--karte); }
.lage.gelb { border-color: var(--gelb-rand); background: var(--gelb-grund); }
.lage.rot { border-color: var(--rot); background: var(--rot-grund); }
.lage b { display: block; }
.lage ul { margin: 4px 0 0; padding-left: 20px; }
.lage .seit { color: var(--text2); font-size: .85rem; }

/* Räume */
.raeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.raum { background: var(--karte); padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); min-width: 0; }
.raum .name { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.raum .temp { font-size: 1.9rem; font-weight: 700; color: var(--akzent); line-height: 1.15; }
.raum .feuchte { color: var(--text2); }
.raum.weg .temp { color: var(--grau); }
.raum .zeichen { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: 1px; }

/* Schalter-Zeilen */
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hell); }
.zeilen li:first-child { border-top: 0; }
.zeilen .text { min-width: 0; overflow-wrap: anywhere; }
.zeilen .wert { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.schalter { min-width: 76px; padding: 8px 12px; border: 1px solid var(--rand); background: transparent; color: var(--akzent); font-weight: 600; }
.schalter[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }
.weg-text { color: var(--rot-text); font-weight: 600; }

.heiz-zahlen { display: flex; gap: 20px; flex-wrap: wrap; margin: 4px 0 6px; }
.heiz-zahlen div { display: flex; flex-direction: column; }
.heiz-zahlen .zahl { font-size: 1.6rem; font-weight: 700; color: var(--akzent); line-height: 1.1; }

/* Farben je Raum (fest, nie nach Reihenfolge) */
.f-t01 { background: var(--s1); } .f-t02 { background: var(--s2); } .f-t03 { background: var(--s3); }
.f-t04 { background: var(--s4); } .f-aussen { background: var(--s5); }
.l-t01 { stroke: var(--s1); } .l-t02 { stroke: var(--s2); } .l-t03 { stroke: var(--s3); }
.l-t04 { stroke: var(--s4); } .l-aussen { stroke: var(--s5); }
circle.l-t01 { fill: var(--s1); } circle.l-t02 { fill: var(--s2); } circle.l-t03 { fill: var(--s3); }
circle.l-t04 { fill: var(--s4); } circle.l-aussen { fill: var(--s5); }
.diagramm circle.punkt { stroke: var(--karte); }
.heiz-zahlen .klein-zahl { font-size: 1.1rem; margin-top: 6px; }

/* Verlauf */
.segment { display: inline-flex; flex-wrap: wrap; }
.segment button { border: 1px solid var(--rand); background: transparent; color: var(--akzent); padding: 6px 10px; margin-left: -1px; border-radius: 0; }
.segment button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; position: relative; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; }
.legende button { background: transparent; color: var(--text); padding: 4px 2px; border: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; }
.legende button[aria-pressed="false"] { color: var(--grau); text-decoration: line-through; }
.legende .farbe { width: 14px; height: 3px; display: inline-block; }
.legende button[aria-pressed="false"] .farbe { opacity: .3; }
.diagramm { position: relative; width: 100%; height: 220px; touch-action: pan-y; }
.diagramm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.diagramm .achse { fill: var(--text2); font-size: 11px; }
.diagramm .gitter { stroke: var(--gitter); stroke-width: 1; }
.diagramm .linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .etikett { font-size: 11px; fill: var(--text); }
.diagramm .kreuz { stroke: var(--text2); stroke-width: 1; }
.diagramm .punkt { stroke: var(--karte); stroke-width: 2; }
.diagramm .leer { fill: var(--grau); font-size: .92rem; }
.tipp { position: absolute; top: 0; pointer-events: none; background: var(--karte); color: var(--text); border: 1px solid var(--rand);
  box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 6px 8px; font-size: .82rem; white-space: nowrap; z-index: 2; }
.tipp .farbe { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: 3px; }
.tipp b { display: block; margin-bottom: 2px; }
.tabelle-rahmen { overflow-x: auto; }
table.werte { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
table.werte th, table.werte td { padding: 6px 8px; border-bottom: 1px solid var(--hell); text-align: right; white-space: nowrap; }
table.werte th:first-child, table.werte td:first-child { text-align: left; }

.protokoll { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.protokoll li { padding: 6px 0; border-top: 1px solid var(--hell); }
.protokoll li:first-child { border-top: 0; }

@media (max-width: 560px) {
  main { padding: 12px; }
  .raeume { grid-template-columns: 1fr 1fr; }
  .raum .temp { font-size: 1.6rem; }
  .knoepfe > button { flex: 1 1 auto; }
  .segment button { padding: 6px 7px; font-size: .88rem; }
}

/* Dunkelmodus wie Mittagstisch und PR: folgt Handy und Rechner. Diagrammfarben sind eigene, geprüfte Stufen. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --grund: #15141c; --karte: #22212c; --text: #e8e7ee; --text2: #c3c2cc; --grau: #a3a2ad; --hell: #34333f;
    --blau: #4a4399; --akzent: #b9b3f2; --rot-text: #ff8f86; --gruen-text: #7fd6a2;
    --rand: #4a4957; --feld: #1b1a23; --gelb-grund: #3a3220; --gelb-rand: #c79a1c; --gelb-text: #f0cf7a;
    --rot-grund: #3a1f1e;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
    --gitter: #302f3a;
  }
  a { color: var(--akzent); }
  a.knopf-link.haupt { color: #fff; }
  .karte, .raum { box-shadow: 0 1px 4px rgba(0,0,0,.5); }
}