/* ══════════════════════════════════════════════════════════════════════════
   Öffentliche Pegelansicht — Windschöpfwerk Rote Mühle
   ══════════════════════════════════════════════════════════════════════════

   Eigene Datei, nicht `dashboard.css`. Das Küchentablet ist dort fest auf
   1920 × 1080 verdrahtet (`body { width: 1920px }`), weil es genau ein Gerät
   bedient und kein Scrollen kennt. Diese Seite muss vom Telefon im Regen bis
   zum Büromonitor alles bedienen — dieselbe Datei könnte beides nicht.

   Übernommen wird die Farbwelt des Hauses und die Regel, dass Akzentfarben
   Bedeutung tragen und kein Schmuck sind. Neu ist ein dunkles Erscheinungs-
   bild: Diese Seite liegt auf privaten Telefonen, und die stehen abends im
   Dunkelmodus.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --grund:      #eee9e1;
  --karte:      #fbf8f3;
  --karte-rand: #d8cfc3;
  --feld:       #f1ebe3;
  --linie:      #d8cfc3;

  --text:       #27231f;
  --text-leise: #5d564e;
  --text-still: #7c746a;

  /* Feste Bedeutung, wie im übrigen Haus. */
  --kalt:    #356a8a;   /* Wasser, ruhiger Stand */
  --gut:     #4d7b57;   /* in Ordnung, Zielpegel */
  --achtung: #a66a1f;   /* erhöht, Pumpe arbeitet */
  --alarm:   #b8423d;   /* Notfallpegel, Störung */
  --aus:     #a79d91;

  --wasser:      #4a86ab;
  --wasser-hell: #7fb4d2;

  --r: 12px;
  --schatten: 0 1px 2px rgba(39, 35, 31, .06), 0 4px 14px rgba(39, 35, 31, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:      #16191c;
    --karte:      #1e2226;
    --karte-rand: #2e343a;
    --feld:       #252a2f;
    --linie:      #2e343a;

    --text:       #e8e4de;
    --text-leise: #a8a29a;
    --text-still: #8b857c;

    --kalt:    #6aa8cc;
    --gut:     #7bb389;
    --achtung: #d79a45;
    --alarm:   #e0736d;
    --aus:     #5c5750;

    --wasser:      #3d7ba3;
    --wasser-hell: #58a0c9;

    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── Anmeldung ──────────────────────────────────────────────────────────── */

.tor {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 18px;
}
.tor[hidden] { display: none; }

.tor-karte {
  width: 100%;
  max-width: 380px;
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Das Logo erbt seine Textfarbe von hier — deshalb wird die Wortmarke im
   dunklen Erscheinungsbild automatisch hell, ohne zweite Datei. */
.logo { display: block; color: var(--text-leise); }
.logo-tor { width: 190px; height: 61px; margin-bottom: 2px; }
.logo-fuss { width: 128px; height: 41px; flex-shrink: 0; }

.tor-titel {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 4px;
}
.tor-titel span {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-still);
}

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-leise);
}
.feld input {
  font: inherit;
  color: var(--text);
  background: var(--feld);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 12px 13px;
  min-height: 46px;          /* bequem mit dem Daumen zu treffen */
}
.feld input:focus-visible {
  outline: 2px solid var(--kalt);
  outline-offset: 1px;
  border-color: var(--kalt);
}

.tor-fehler {
  color: var(--alarm);
  font-size: 14px;
  background: color-mix(in srgb, var(--alarm) 10%, transparent);
  border-left: 3px solid var(--alarm);
  padding: 9px 11px;
  border-radius: 0 6px 6px 0;
}
.tor-fehler[hidden] { display: none; }

.knopf-gross {
  font: inherit;
  font-weight: 600;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--kalt);
  color: #fff;
  cursor: pointer;
}
.knopf-gross:hover:not(:disabled) { filter: brightness(1.08); }
.knopf-gross:disabled { opacity: .55; cursor: default; }
@media (prefers-color-scheme: dark) { .knopf-gross { color: #10161a; } }

/* ── Gerüst ─────────────────────────────────────────────────────────────── */

.seite { max-width: 1240px; margin: 0 auto; padding: 14px 14px 28px; }
.seite[hidden] { display: none; }

.kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 2px 14px;
}
.kopf h1 { font-size: 19px; font-weight: 600; line-height: 1.2; }
.saison { font-size: 13.5px; color: var(--text-still); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Ein Punkt, keine Meldung: solange er ruhig ist, ist die Verbindung gut. */
.draht {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gut); font-size: 0; flex-shrink: 0;
}
.draht.weg { background: var(--alarm); }
.draht.alt { background: var(--achtung); }

.knopf-klein {
  font: inherit; font-size: 14px;
  min-height: 40px; padding: 0 14px;
  background: var(--karte);
  color: var(--text-leise);
  border: 1px solid var(--karte-rand);
  border-radius: 8px;
  cursor: pointer;
}
.knopf-klein:hover { color: var(--text); border-color: var(--text-still); }

.stoerung {
  background: color-mix(in srgb, var(--alarm) 12%, var(--karte));
  border: 1px solid var(--alarm);
  border-left-width: 4px;
  border-radius: var(--r);
  padding: 12px 15px;
  margin-bottom: 14px;
  color: var(--text);
  font-size: 14.5px;
}
.stoerung[hidden] { display: none; }
.stoerung p + p { margin-top: 4px; }

/* ── Raster ─────────────────────────────────────────────────────────────── */
/* Telefon: eine Spalte. Ab 860 px zwei — links der Pegel über die volle Höhe,
   weil die Wassersäule von Höhe lebt, rechts Bedienung und Verlauf. */

.raster { display: grid; gap: 14px; grid-template-columns: 1fr; }

@media (min-width: 860px) {
  .raster {
    grid-template-columns: minmax(320px, 400px) 1fr;
  }
  /* Kein `align-items: start` und kein `sticky`: die Pegelkarte SOLL die
     Höhe der rechten Spalte annehmen. Die Wassersäule bekommt den dabei
     gewonnenen Platz — sie ist der eigentliche Inhalt der Seite, und auf
     einem Breitbildschirm stand sie vorher als Briefmarke in einer halb
     leeren Karte. */
  .karte-pegel   { grid-column: 1; grid-row: 1 / span 2; }
  .karte-pumpe   { grid-column: 2; grid-row: 1; }
  .karte-verlauf { grid-column: 2; grid-row: 2; }
  .karte-vertrag { grid-column: 1 / -1; }
}

.karte {
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: 15px 16px 17px;

  /* Ohne das kann eine Karte nicht schmaler werden als ihr breitester Inhalt:
     Rasterfelder haben von Haus aus `min-width: auto`. Die Vertragstabelle ist
     460 px breit, und ohne diese Zeile zwingt sie das ganze Raster auf 569 px
     — das Telefon zoomt dann die komplette Seite heraus, damit sie hineinpasst,
     und jede Schrift wird kleiner. Die Tabelle rollt stattdessen in ihrem
     eigenen Rahmen. */
  min-width: 0;
}
.titel {
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-still);
  margin-bottom: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Pegelkarte ─────────────────────────────────────────────────────────── */

/* Zahl oben, Säule darunter über die volle Breite, Umrechnung unten.
   Nebeneinander sah kompakter aus, drückte die Säule aber auf 152 px — bei
   einem 260 Einheiten breiten viewBox wird eine 12-px-Beschriftung damit auf
   7 px gestaucht und ist am Teich nicht mehr zu lesen. Über die volle Breite
   rendert dieselbe Schrift grösser als nominal. */
.pegel-koerper { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.karte-pegel { display: flex; flex-direction: column; }

.saeule-halter {
  flex: 1 1 auto; min-height: 240px;
  display: flex; justify-content: center; align-items: center;
}
/* `height: auto` statt `100%`: sonst ist der SVG-Kasten so hoch wie der freie
   Platz, die Zeichnung darin aber nur so hoch wie ihr Seitenverhältnis erlaubt
   — und sitzt dann sichtbar zu weit oben. */
.saeule { width: 100%; height: auto; max-height: 100%; display: block; }

.pegel-zahlen { display: flex; flex-direction: column; }

.jetzt-zeile { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.jetzt { display: flex; align-items: baseline; gap: 4px; }
.jetzt-wert {
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jetzt-einheit { font-size: 19px; color: var(--text-still); }

/* Farbe allein trägt nicht — deshalb bekommt der Zustand zusätzlich Wort
   und Rahmen. Dieselbe Regel wie auf dem Küchentablet. */
.lage-chip {
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.lage-chip.ist-normal  { color: var(--gut); }
.lage-chip.ist-erhoeht { color: var(--achtung); }
.lage-chip.ist-notfall { color: var(--alarm); }
.lage-chip.ist-unbekannt { color: var(--text-still); }

.gemessen { font-size: 12.5px; color: var(--text-still); margin-top: 8px; }
.gemessen.alt { color: var(--achtung); font-weight: 600; }

.bezug {
  padding-top: 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  font-size: 13.5px;
  border-top: 1px solid var(--linie);
}
.bezug dt { color: var(--text-leise); }
.bezug dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bezug .heraus dt, .bezug .heraus dd { color: var(--kalt); }

@media (max-width: 400px) {
  .jetzt-wert { font-size: 46px; }
  .saeule-halter { min-height: 210px; }
}

/* ── Pumpenkarte ────────────────────────────────────────────────────────── */

.pumpe-lage {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--feld);
  border-radius: 9px;
  padding: 12px 13px;
  margin-bottom: 15px;
}
.pumpe-punkt {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--aus); flex-shrink: 0; margin-top: 4px;
}
.pumpe-punkt.laeuft { background: var(--gut); animation: pochen 2s ease-in-out infinite; }
.pumpe-punkt.wartet { background: var(--achtung); }
@keyframes pochen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gut) 55%, transparent); }
  70%      { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) { .pumpe-punkt.laeuft { animation: none; } }

.pumpe-zustand { font-weight: 600; font-size: 16px; }
.pumpe-text { font-size: 13.5px; color: var(--text-leise); }

.schalter-liste { display: flex; flex-direction: column; }
.schalter {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 2px;
  border-top: 1px solid var(--linie);
  cursor: pointer;
  min-height: 56px;              /* Daumenziel */
}
.schalter:first-child { border-top: 0; }
.schalter-text { flex: 1 1 auto; font-size: 15px; }
.schalter-text small {
  display: block; font-size: 12.5px; color: var(--text-still); margin-top: 1px;
}
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }

.wippe {
  flex: 0 0 auto;
  width: 50px; height: 30px;
  border-radius: 999px;
  background: var(--aus);
  position: relative;
  transition: background .18s ease;
}
.wippe::after {
  content: ''; position: absolute;
  top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff;
  transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.schalter input:checked ~ .wippe { background: var(--gut); }
.schalter input:checked ~ .wippe::after { transform: translateX(20px); }
.schalter input:focus-visible ~ .wippe { outline: 2px solid var(--kalt); outline-offset: 2px; }
.schalter input:disabled ~ .wippe { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .wippe, .wippe::after { transition: none; }
}

.regler-block { border-top: 1px solid var(--linie); padding-top: 15px; margin-top: 3px; }
.regler-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; margin-bottom: 9px;
}
.regler-wert {
  font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--kalt);
}
.regler {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent; cursor: pointer;
  /* 44 px, nicht 30: der Griff ist zwar 26 px gross, aber getroffen wird die
     ganze Flaeche des Elements. Mit dem Daumen und im Regen zaehlt jeder
     Millimeter. */
  height: 44px;
}
.regler::-webkit-slider-runnable-track {
  height: 7px; border-radius: 999px; background: var(--feld); border: 1px solid var(--linie);
}
.regler::-moz-range-track {
  height: 7px; border-radius: 999px; background: var(--feld); border: 1px solid var(--linie);
}
.regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--kalt); border: 3px solid var(--karte);
  margin-top: -10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.regler::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--kalt); border: 3px solid var(--karte);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.regler:focus-visible { outline: 2px solid var(--kalt); outline-offset: 4px; border-radius: 6px; }
.regler:disabled { opacity: .5; cursor: default; }

.regler-grenzen { font-size: 12.5px; color: var(--text-still); margin-top: 3px; }
.pumpe-fehler {
  font-size: 13.5px; color: var(--alarm); font-weight: 600;
  margin-top: 13px; padding: 9px 11px; border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--alarm) 10%, transparent);
  border-left: 3px solid var(--alarm);
}
.pumpe-fehler[hidden] { display: none; }

/* ── Verlauf ────────────────────────────────────────────────────────────── */

.reiter { display: flex; gap: 4px; }
.reiter-knopf {
  font: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em;
  min-height: 34px; padding: 0 11px;
  background: transparent; color: var(--text-still);
  border: 1px solid var(--linie); border-radius: 7px;
  cursor: pointer; text-transform: none;
}
.reiter-knopf:hover { color: var(--text); }
.reiter-knopf.ist-aktiv {
  background: var(--feld); color: var(--kalt); border-color: var(--kalt);
}

.diagramm-halter { position: relative; }
.diagramm { width: 100%; height: 210px; display: block; }
@media (min-width: 860px) { .diagramm { height: 250px; } }

.diagramm-hinweis {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 13.5px; color: var(--text-still);
  background: var(--karte);
}
.diagramm-hinweis[hidden] { display: none; }

.legende {
  display: flex; flex-wrap: wrap; gap: 6px 15px;
  align-items: center;
  font-size: 12.5px; color: var(--text-still);
  margin-top: 9px;
}
.legende span { display: inline-block; flex-shrink: 0; }
.l-linie { width: 15px; height: 3px; background: var(--wasser); border-radius: 2px; }
.l-band  { width: 15px; height: 10px; background: color-mix(in srgb, var(--gut) 40%, transparent);
           border-radius: 2px; }
.l-ziel  { width: 15px; height: 0; border-top: 2px dashed var(--gut); }
.l-not   { width: 15px; height: 0; border-top: 2px dashed var(--alarm); }

/* ── Vertragstabelle ────────────────────────────────────────────────────── */

/* Auf dem Telefon passt die Tabelle nicht in die Breite. Statt sie zu
   verstümmeln, rollt sie — und bekommt an der Kante einen Schatten, der
   verschwindet, sobald man am Ende angekommen ist. Ohne dieses Zeichen sieht
   eine abgeschnittene Spalte einfach nur nach einem Fehler aus.
   Ganz ohne JavaScript: `background-attachment: local` bewegt die Verläufe
   mit dem Inhalt, `scroll` lässt die Schatten stehen. */
.tabelle-halter {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--karte) 30%, rgba(0, 0, 0, 0)) left center,
    linear-gradient(to left, var(--karte) 30%, rgba(0, 0, 0, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
.vertrag { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14px; }
.vertrag th, .vertrag td {
  padding: 9px 11px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--linie);
}
.vertrag th:first-child, .vertrag td:first-child { text-align: left; }
.vertrag thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-still); font-weight: 700;
}
.vertrag td { font-variant-numeric: tabular-nums; }
.vertrag tbody tr.gilt { background: var(--feld); }
.vertrag tbody tr.gilt td:first-child { font-weight: 700; box-shadow: inset 3px 0 0 var(--kalt); }
.vertrag .zeitraum { display: block; font-size: 12px; color: var(--text-still); font-weight: 400; }

.fussnote { font-size: 12.5px; color: var(--text-still); margin-top: 11px; }

.fuss {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-still);
  margin-top: 18px; padding: 15px 2px 0;
  border-top: 1px solid var(--linie);
}
.fuss-marke { display: flex; align-items: center; gap: 11px; }
.fuss-zeilen { display: flex; flex-direction: column; gap: 2px; text-align: right; }
@media (max-width: 520px) {
  .fuss { flex-direction: column; align-items: flex-start; }
  .fuss-zeilen { text-align: left; }
}