/*
 * Statistik-Modul — Kartenblatt-Palette, identisch zu Landing und
 * Dashboard (services/landing/styles.css). Bewusst dieselbe Handschrift:
 * Der Kunde soll nicht merken, dass er zwischen drei Anwendungen wechselt.
 *
 * Haltung wie dort:
 *   - Eckige Ecken (2px). Kein rounded-lg auf allem.
 *   - Haarlinien statt Schatten für Struktur.
 *   - Zahlen dicktengleich mit tabular-nums — hier sind Kilometer Daten,
 *     keine Deko. Auf einer Statistikseite gilt das doppelt.
 *   - Linksbündig. Zentrierte Blöcke sind das Erste, was eine Seite
 *     beliebig aussehen lässt.
 *   - Rot sparsam. Wenn alles rot ist, ist nichts wichtig.
 *
 * Schrift selbst gehostet, kein Google-CDN: Diese Seiten sind ÖFFENTLICH
 * und werden von den Lesern unserer Kunden aufgerufen. Ein Font-CDN
 * überträgt deren IP an Dritte — genau das sichern wir im AVV § 5 zu,
 * nicht zu tun.
 */

@font-face {
  font-family: "Karla";
  src: url("/fonts/karla-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --paper: #f2f4ef;
  --paper-2: #e9ece4;
  --sheet: #fbfcfa;

  --ink: #12180f;
  --dim: #56604f;
  --faint: #7d867a;

  --rule: #ccd3c4;
  --rule-hi: #aab39f;

  --route: #bf3719;
  --route-hi: #a52d12;

  --water: #1b5570;
  --water-hi: #133e52;

  --ok: #2f6b3d;
  --danger: #a52d12;

  /* Weitere Kartenfarben, nur für Diagramme: Wald und Sand ergänzen Route
     und Wasser zu vier unterscheidbaren Segmentfarben. Bewusst gedeckt —
     eine Statistikseite mit fünf Neontönen sieht aus wie ein Baukasten,
     nicht wie eine Karte. */
  --wald: #46683c;
  --sand: #a8803f;

  --font: "Karla", ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
          Menlo, monospace;

  --maxw: 1000px;
  --pad: clamp(1rem, 4vw, 2.25rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--water); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--water-hi); }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
h3 { font-size: 1rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.num, td.num, .zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --- Kopf ---------------------------------------------------------------
   Bewusst EINE Zeile, die auf schmalen Schirmen umbricht — kein
   Hamburger, kein Aufklappmenü. Die Anwendung hat fünf Seiten; ein Menü
   dafür wäre Apparat ohne Nutzen, und aufklappbare Kästen auf dem Handy
   waren am Dashboard genau die Beschwerde. */
.kopf {
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
}
.kopf-innen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .7rem var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.1rem;
}
.kopf-marke {
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.kopf-marke span { color: var(--faint); font-weight: 400; }
.kopf nav { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .92rem; }
.kopf nav a { text-decoration: none; color: var(--dim); }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--ink); }
.kopf nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--route); }

main { padding: 1.6rem 0 4rem; }

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.zurueck {
  display: inline-block;
  font-size: .9rem;
  color: var(--dim);
  text-decoration: none;
  margin-bottom: .35rem;
}
.zurueck:hover { color: var(--ink); }
.unterzeile { color: var(--dim); margin: 0 0 1.4rem; max-width: 62ch; }

/* --- Flächen ------------------------------------------------------------ */
.karte {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1rem 1.1rem;
}
.karte + .karte { margin-top: .8rem; }

.liste { display: grid; gap: .7rem; }

.zeile {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
}
.zeile-haupt { flex: 1 1 14rem; min-width: 0; }
.zeile-titel { font-weight: 700; }
.zeile-meta { color: var(--faint); font-size: .88rem; }
.zeile-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; }

/* --- Marken für Sichtbarkeit -------------------------------------------- */
.marke {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  padding: .1rem .45rem;
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  color: var(--dim);
  white-space: nowrap;
}
.marke::before { content: "●"; font-size: .6em; }
.marke.oeffentlich { color: var(--ok); border-color: var(--ok); }
.marke.link { color: var(--water); border-color: var(--water); }
.marke.link::before { content: "◐"; }
.marke.privat::before { content: "○"; }

/* --- Formulare ---------------------------------------------------------- */
.feld { margin-bottom: 1rem; }
.feld > label, .feld-label {
  display: block;
  font-weight: 700;
  font-size: .93rem;
  margin-bottom: .25rem;
}
.feld .hinweis { color: var(--faint); font-size: .85rem; margin: .2rem 0 0; }

input[type="text"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  padding: .5rem .6rem;
}
input[type="number"], input[type="date"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
textarea { min-height: 4.5rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 1px;
}

.einheit-gruppe { display: flex; align-items: stretch; }
.einheit-gruppe input { border-right: 0; }
.einheit-gruppe .einheit {
  display: flex;
  align-items: center;
  padding: 0 .6rem;
  border: 1px solid var(--rule-hi);
  border-radius: 0 2px 2px 0;
  background: var(--paper-2);
  color: var(--dim);
  font-size: .9rem;
  white-space: nowrap;
}

/* Auswahl als echte Knöpfe statt Aufklappliste: Auf dem Handy ist ein
   Fingertipp auf "sonnig" schneller als ein Auswahlmenü, und man sieht
   alle Möglichkeiten auf einen Blick. */
.wahl { display: flex; flex-wrap: wrap; gap: .4rem; }
.wahl label {
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  padding: .4rem .7rem;
  cursor: pointer;
  background: var(--paper);
  font-size: .95rem;
}
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl input:checked + span { font-weight: 700; }
.wahl label:has(input:checked) {
  border-color: var(--route);
  box-shadow: inset 0 0 0 1px var(--route);
  background: var(--sheet);
}
.wahl label:has(input:focus-visible) { outline: 2px solid var(--water); outline-offset: 1px; }

.ja-nein { display: flex; align-items: center; gap: .5rem; }
.ja-nein input { width: 1.1rem; height: 1.1rem; accent-color: var(--route); }

/* --- Knöpfe ------------------------------------------------------------- */
.knopf {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  padding: .5rem .95rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.knopf:hover { background: #000; color: var(--paper); }
.knopf.haupt { background: var(--route); border-color: var(--route); }
.knopf.haupt:hover { background: var(--route-hi); border-color: var(--route-hi); }
.knopf.leise {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-hi);
  font-weight: 400;
}
.knopf.leise:hover { background: var(--paper-2); color: var(--ink); }
.knopf.gefahr { background: transparent; color: var(--danger); border-color: var(--danger); }
.knopf.gefahr:hover { background: var(--danger); color: var(--paper); }
.knopf.klein { padding: .25rem .55rem; font-size: .85rem; font-weight: 400; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.1rem; }

/* --- Tabellen ----------------------------------------------------------- */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--sheet);
}
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { padding: .45rem .7rem; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th {
  background: var(--paper-2);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
  position: sticky;
  top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper); }
td.zahl, th.zahl { text-align: right; }

/* --- Diagramme ----------------------------------------------------------
   Das SVG kommt fertig vom Server (charts.py), die Farben aber von hier:
   Eine Palettenänderung soll an EINER Stelle passieren, nicht in beiden
   Dateien. charts.py vergibt nur Rollen-Klassen (.f-route, .f-wasser …),
   die hier zu einer Farbe werden. */
.f-route  { --f: var(--route); }
.f-wasser { --f: var(--water); }
.f-wald   { --f: var(--wald); }
.f-sand   { --f: var(--sand); }
.f-tinte  { --f: var(--dim); }

.dia { display: block; width: 100%; height: 100%; overflow: visible; }

.dia-gitter { stroke: var(--rule); stroke-width: 1; }
.dia-achse {
  fill: var(--faint);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.dia-einheit { fill: var(--faint); font-size: 12px; letter-spacing: .04em; }
.dia-leer { fill: var(--faint); font-family: var(--font); font-size: 16px; }

.dia-linie {
  fill: none;
  stroke: var(--f);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Die Fläche unter der Linie nur andeuten — sie soll die Höhenlinien
   nicht zudecken. */
.dia-flaeche { fill: var(--f); opacity: .10; stroke: none; }
/* Punkte als Ringe in Papierfarbe: So bleiben sie auch dort sichtbar, wo
   die Linie steil durch sie hindurchläuft. */
.dia-punkt { fill: var(--sheet); stroke: var(--f); stroke-width: 2; }

.dia-balken { fill: var(--f); }
/* Trennlinie in Papierfarbe statt Lücke — bei vielen Segmenten bliebe
   sonst vom kleinsten nichts übrig. */
.dia-segment { fill: var(--f); stroke: var(--sheet); stroke-width: 1.5; }

.dia-legende { fill: var(--ink); font-family: var(--font); font-size: 14px; }
.dia-legende-wert {
  fill: var(--dim);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.dia-legende-farbe { fill: var(--f); }

.dia-ring-summe {
  fill: var(--ink);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 700;
}
.dia-ring-label { fill: var(--faint); font-family: var(--font); font-size: 14px; }

/* --- Blöcke auf dem Dashboard ------------------------------------------- */
.block {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.block-kopf {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
}
.block-titel {
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.block-koerper { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.block-koerper .tabelle-rahmen { border: 0; overflow: auto; flex: 1; }

/* Ein einzelner großer Wert — der Tacho-Blick. */
.block-zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(1.9rem, 7cqw, 3.4rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -.02em;
}
.block-zahl .einheit {
  font-size: .42em;
  font-weight: 400;
  color: var(--faint);
  margin-left: .25em;
  letter-spacing: 0;
}
.block-fuss { color: var(--faint); font-size: .8rem; margin-top: .35rem; }

/* --- Das Raster für Leser ----------------------------------------------
   Dieselbe Anordnung wie im Bearbeitungsmodus, aber als reines CSS-Grid:
   Leser laden KEIN Gridstack. Die Werte kommen als Custom Properties aus
   stats_blocks.grid_*; Zeilenhöhe und Abstand müssen zu den Gridstack-
   Einstellungen in public_page.html passen (cellHeight 70, margin 5),
   sonst springt das Bild beim Verlassen des Bearbeitungsmodus. */
.raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 70px;
  gap: 10px;
}
.block-platz {
  grid-area: var(--y) / var(--x) / span var(--h) / span var(--w);
  min-width: 0;
  min-height: 0;
}

/* Gridstack bringt eigene Positionierung mit — hier nur das Innenleben. */
.grid-stack-item-content { inset: 5px; }
.grid-stack-item-content > .block { height: 100%; }

.block-werkzeuge { margin-left: auto; display: flex; gap: .15rem; flex: none; }
.werkzeug {
  font: inherit;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  padding: .15rem .35rem;
}
.werkzeug:hover { color: var(--ink); border-color: var(--rule-hi); background: var(--paper); }

/* --- Dialoge ------------------------------------------------------------
   Native <dialog>: kein Framework, Escape schliesst, Fokus wird gefangen.
   Nur im Bearbeitungsmodus vorhanden, also nie für Leser. */
.dlg {
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  background: var(--sheet);
  color: var(--ink);
  padding: 1.2rem 1.3rem;
  max-width: min(32rem, calc(100vw - 2rem));
  width: 100%;
  font-family: var(--font);
}
.dlg::backdrop { background: rgba(18, 24, 15, .35); }
.dlg h2 { margin-top: 0; font-size: 1.1rem; }

.wahl.senkrecht { flex-direction: column; align-items: stretch; }

/* Auswahl der Darstellung: Kacheln statt Aufklappliste — man sieht alle
   fünf Möglichkeiten auf einmal. */
.wahl.darstellung label { text-align: center; min-width: 5.2rem; padding: .55rem .5rem; }
.wahl .art {
  display: block;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.1;
  margin-bottom: .15rem;
  color: var(--dim);
}
.wahl label:has(input:checked) .art { color: var(--route); }

.farbklecks {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  background: var(--f);
  border-radius: 2px;
  margin-right: .35rem;
  vertical-align: -1px;
}
.leise-text { font-weight: 400; color: var(--faint); }

@media (max-width: 700px) {
  /* Eine Spalte. Die Reihenfolge kommt aus ORDER BY grid_y, grid_x —
     oben links zuerst, wie gelesen wird. */
  .raster { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .block-platz { grid-area: auto; }
  .block { min-height: 11rem; }
}

/* --- Meldungen ---------------------------------------------------------- */
.meldungen { margin-bottom: 1.1rem; display: grid; gap: .5rem; }
.meldung {
  border: 1px solid var(--rule-hi);
  border-left: 3px solid var(--dim);
  border-radius: 2px;
  padding: .6rem .8rem;
  background: var(--sheet);
  font-size: .94rem;
}
.meldung.gut { border-left-color: var(--ok); }
.meldung.fehler { border-left-color: var(--danger); }

.leer {
  border: 1px dashed var(--rule-hi);
  border-radius: 2px;
  padding: 1.6rem 1.2rem;
  color: var(--dim);
  background: var(--sheet);
}
.leer p { margin: 0 0 .8rem; }
.leer p:last-child { margin-bottom: 0; }

.warnung {
  border: 1px solid var(--rule-hi);
  border-left: 3px solid var(--route);
  border-radius: 2px;
  padding: .7rem .9rem;
  background: var(--sheet);
  font-size: .93rem;
  margin: 1rem 0;
}

/* Geheimer Link — zum Kopieren, deshalb umbruchfähig statt abgeschnitten */
.geheim-link {
  font-family: var(--mono);
  font-size: .85rem;
  word-break: break-all;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .45rem .6rem;
  display: block;
  margin: .4rem 0;
}

/* --- Fuß ---------------------------------------------------------------- */
.fuss {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 1.1rem 0 2rem;
  color: var(--faint);
  font-size: .87rem;
}
.fuss .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fuss a { color: var(--dim); }

@media (max-width: 560px) {
  .zeile { flex-direction: column; align-items: stretch; }
  .zeile-aktionen { justify-content: flex-start; }
  th, td { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Hinweisleiste im Demo-Modus (DEMO_MODE, siehe app.py). */
.demo-leiste {
  background: var(--route, #bf3719);
  color: #fff;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
}
.demo-leiste a { color: #fff; font-weight: 700; white-space: nowrap; }