/* SOWANIX — Zählzeiten-Ansicht (/zaehlzeiten.html).
   Zeigt die ABDECKUNG der Messungen: zu welcher Tagesstunde überhaupt gezählt
   wurde. Baut auf den Tokens aus design-system.css und den Dashboard-Bausteinen
   aus verkehr.css auf (dash-card, dash-leer, teilen, visually-hidden …).

   Eigene Signalfarbe: warmes Bernstein. Es geht hier NICHT um eine der drei
   Fahrzeuggruppen (rot/blau/oliv), sondern um die Messzeit selbst — deshalb ein
   eigener, klar unterscheidbarer Ton aus der Warngelb-Familie der Marke.
   Kontrast des Vollton gegen die weisse Karte ≈ 3,7:1 (≥ 3:1 fuer Grafik). */

:root {
  --zz-voll: #b8760a;      /* Vollton: am meisten gezaehlte Stunde */
  --zz-blass: #f2ede5;     /* Startton der Rampe (Papier) */
  --zz-leer: #eae3d7;      /* Stunde ohne jede Messung */
  --zz-linie: #ded6c8;     /* Zifferblatt-Ring, Hilfskreise */
}

/* ---- Lead ---- */
.zz-lead { max-width: 52rem; }
.zz-lead__claim {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-top: var(--space-3);
}

/* ---- Kennzahlen ---- */
.zz-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
}
.zz-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--zz-voll);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4) var(--space-5);
}
.zz-kpi__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-2);
}
.zz-kpi__zahl {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.1;
  margin: 0;
}
.zz-kpi__zusatz {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

/* ---- Uhren-Paar ---- */
.zz-uhren {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-5);
}
.zz-uhr-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  text-align: center;
}
.zz-uhr-karte__titel {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-1);
}
.zz-uhr-karte__spanne {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.zz-uhr {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

/* Zifferblatt */
.zz-uhr .zz-ring {
  fill: #fbf9f5;
  stroke: var(--zz-linie);
  stroke-width: 1.5;
}
.zz-uhr .zz-hilfskreis {
  fill: none;
  stroke: #c4b8a4;          /* etwas kraeftiger als der Ring — liegt auf den Faechern */
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.zz-uhr .zz-tick { stroke: var(--zz-linie); stroke-width: 1; }
.zz-uhr .zz-tick--stunde { stroke: #c9bfad; stroke-width: 2; stroke-linecap: round; }
.zz-uhr .zz-ziffer {
  fill: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}
.zz-uhr .zz-ziffer--spitze { fill: var(--color-text); }
.zz-uhr .zz-nabe { fill: var(--color-primary); }

/* Fach je Stunde: zeigt in voller Laenge, wie weit der Trichter wachsen kann.
   Bleibt es leer, ist die Stunde noch nie gezaehlt worden. */
.zz-uhr .zz-fach {
  fill: var(--zz-leer);
  stroke: #fff;
  stroke-width: 0.75;
  stroke-linejoin: round;
}
/* Stundenstücke (Trichter vom Mittelpunkt nach aussen) */
.zz-uhr .zz-stueck {
  stroke: #fff;
  stroke-width: 0.75;
  stroke-linejoin: round;
  transition: opacity 0.15s;
}
/* Unsichtbare Trefferflaeche fuer leere Stunden (Tooltip/Fokus). */
.zz-uhr .zz-treffer { fill: transparent; }
.zz-uhr .zz-stueck-flaeche:hover .zz-stueck,
.zz-uhr .zz-stueck-flaeche:focus-visible .zz-stueck { opacity: 0.78; }
.zz-uhr .zz-stueck-flaeche:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Balkendiagramm: Stummel fuer nie gezaehlte Stunden. */
.zz-svg .zz-leer { fill: var(--zz-leer); }

/* ---- Balkendiagramm 0–23 Uhr ----
   24 Balken plus Achsenbeschriftung brauchen Mindestbreite; auf schmalen
   Geraeten darf der Rahmen darum waagerecht scrollen (wie die Heatmap im
   Verkehrs-Dashboard) statt alles unleserlich zu stauchen. */
#zz-balken {
  overflow-x: auto;
  margin: 0;
}
.zz-svg {
  display: block;
  width: 100%;
  /* muss zur Untergrenze der viewBox-Breite in zaehlzeiten.js passen (416 px) */
  min-width: 26rem;
  height: auto;
  overflow: visible;
}
/* Die viewBox entspricht der echten Breite — die Angaben hier sind echte Pixel. */
.zz-svg .achse { stroke: var(--color-text-muted); stroke-width: 1.5; }
.zz-svg .gitter { stroke: var(--zz-linie); stroke-width: 1.5; stroke-dasharray: 3 4; }
.zz-svg .tick { fill: var(--color-text); font-size: 14px; font-weight: 600; }
.zz-svg .tick--y { text-anchor: end; }
.zz-svg .achstitel { fill: var(--color-text-muted); font-size: 14px; font-weight: 700; }
.zz-svg .zz-balken { rx: 3; }
.zz-svg .zz-balken-flaeche:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Legende / Skala ---- */
.zz-skala {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.zz-skala__balken {
  width: 8rem;
  height: 0.6rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--zz-blass), var(--zz-voll));
  border: 1px solid var(--zz-linie);
}
.zz-skala__marke {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  background: var(--zz-leer);
  border: 1px solid var(--zz-linie);
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

/* ---- Luecken-Aufruf ---- */
.zz-luecken {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.zz-luecken__titel {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-3);
}
.zz-luecken p { margin: 0 0 var(--space-3); }
.zz-luecken p:last-child { margin-bottom: 0; }
.zz-luecken__stunden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.zz-luecken__stunde {
  background: rgba(27, 30, 35, 0.12);
  border-radius: var(--radius);
  padding: 0.25em 0.6em;
  font-size: var(--text-sm);
  font-weight: 700;
}