/* Auswertungen (Schritt 7a): Reiter, Zeitraumwahl, Tabellen, Verlauf als Säulen. Nur Tokens aus tokens.css (keine Farb-, Schrift-,
   Abstands- oder Rundungswerte hier; TokenTests prüft das). Tabellen scrollen am Handy waagerecht (hub-tabelle-rahmen). */

.au-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rd-abstand-3); margin-bottom: var(--rd-abstand-2); }

.au-reiter { display: flex; flex-wrap: wrap; gap: var(--rd-abstand-1); }
.au-reiter button {
  border: 1px solid var(--rd-rahmen); background: var(--rd-flaeche); color: var(--rd-text); padding: var(--rd-abstand-1-5) var(--rd-abstand-3);
  border-radius: var(--rd-rundung-voll); cursor: pointer; font: inherit; font-weight: var(--rd-gewicht-mittel);
}
.au-reiter button:hover { background: var(--rd-flaeche-hover); }
.au-reiter button[aria-selected="true"] { background: var(--rd-gruen-ui); color: var(--rd-text-hell); border-color: var(--rd-gruen-ui); font-weight: var(--rd-gewicht-halbfett); }
.au-reiter button:focus-visible, .au-rund:focus-visible { outline: none; box-shadow: var(--rd-fokus); }

.au-zeitraum { display: inline-flex; align-items: center; gap: var(--rd-abstand-1-5); }
.au-zeitraum-text { font-size: var(--rd-schrift-gross); min-width: 9.5em; text-align: center; }
.au-rund {
  width: 32px; height: 32px; border-radius: var(--rd-rundung-voll); border: 1px solid var(--rd-rahmen); background: var(--rd-flaeche);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rd-text); font-size: var(--rd-schrift-ueberschrift); line-height: 1;
}
.au-rund:hover { background: var(--rd-flaeche-hell); }

.au-stand { font-size: var(--rd-schrift-klein); margin: 0 0 var(--rd-abstand-3); }

.au-tabelle th[scope="row"], .au-verlauf th[scope="row"] {
  font-weight: var(--rd-gewicht-mittel); white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--rd-text);
}
.au-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-tabelle th.au-zahl { text-align: right; }
.au-summe th, .au-summe td { background: var(--rd-flaeche-hell); font-weight: var(--rd-gewicht-halbfett); }
.au-gesamt th, .au-gesamt td { background: var(--rd-flaeche-hell); font-weight: var(--rd-gewicht-fett); border-top: 2px solid var(--rd-rahmen); }
.au-geschuetzt { color: var(--rd-text-gedaempft); font-style: italic; }

/* Verlauf: je Monat zwei schmale Säulen (Krank, Kind krank), darunter die Werte als Text – Farbe nie als einzige Information. */
.au-verlauf th, .au-verlauf td { text-align: center; white-space: nowrap; }
.au-verlauf th[scope="row"] { text-align: left; }
.au-saeulen { display: flex; align-items: flex-end; justify-content: center; gap: var(--rd-abstand-0-5); height: var(--rd-abstand-8); }
.au-saeule { display: block; width: var(--rd-abstand-1-5); min-height: var(--rd-abstand-px); background: var(--rd-saeule-krank); border-radius: var(--rd-rundung-mini) var(--rd-rundung-mini) 0 0; }
.au-saeule-kk { background: var(--rd-saeule-kindkrank); }
.au-saeule-gesamt { background: var(--rd-saeule-gesamt); }
.au-saeulenwert { font-size: var(--rd-schrift-winzig); margin-top: var(--rd-abstand-0-5); }
.au-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-abstand-1-5); }
.au-legende-krank, .au-legende-kk, .au-legende-gesamt { display: inline-block; width: var(--rd-abstand-3); height: var(--rd-abstand-3); border-radius: var(--rd-rundung-mini); background: var(--rd-saeule-krank); }
.au-legende-kk { background: var(--rd-saeule-kindkrank); margin-left: var(--rd-abstand-2); }
.au-legende-gesamt { background: var(--rd-saeule-gesamt); margin-left: var(--rd-abstand-2); }
.au-hinweise { margin: 0 0 var(--rd-abstand-2); padding-left: var(--rd-abstand-5); }

@media (max-width: 640px) {
  .au-leiste { align-items: stretch; }
  .au-zeitraum { justify-content: space-between; width: 100%; }
}