/*
 * Die Verfügbarkeitsseite.
 *
 * Nur das, was `shared.css` und `forms.css` noch nicht können. Die Farben sind
 * bewusst zurückhaltend: ein Monat unter der Zusage soll auffallen, aber diese
 * Seite ist kein Alarmbrett — sie ist ein Beleg.
 */

/* ── Der laufende Monat ─────────────────────────────────────────────────── */

.st-now {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--bg-sand);
}
.st-now b { display: block; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.st-now p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--dim); }

.st-dot {
  flex: none; width: 10px; height: 10px; margin-top: 7px;
  border-radius: 50%; background: var(--dim-2);
}
.st-now[data-tone="ok"] .st-dot { background: #17803D; }
.st-now[data-tone="bad"] .st-dot { background: #B42318; }
.st-now[data-tone="bad"] { border-color: rgba(180, 35, 24, .3); background: rgba(180, 35, 24, .05); }

/* ── Die Monatsliste ────────────────────────────────────────────────────── */

.st-months { display: grid; gap: 2px; }

.st-month {
  display: grid; align-items: center; gap: 16px;
  /* Der Balken bekommt eine Obergrenze. Über die volle Breite eines 2000er
     Schirms gezogen sieht auch ein Ausfall aus wie eine grüne Linie. */
  grid-template-columns: 150px minmax(80px, 320px) 84px minmax(0, 1fr);
  padding: 13px 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.st-month:last-child { border-bottom: 0; }

.st-month-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.st-month-val { font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2); }
.st-month-note { font-size: 12px; line-height: 1.45; color: var(--dim); text-align: right; }

.st-month[data-tone="bad"] .st-month-val { color: #B42318; font-weight: 600; }
.st-month[data-tone="idle"] .st-month-val { color: var(--dim-2); }

/*
 * Der Balken zeigt 98 bis 100 Prozent, nicht 0 bis 100. Auf der vollen Skala
 * sind 98,5 und 100 optisch derselbe Balken — und genau dazwischen liegt der
 * Unterschied zwischen eingehalten und gerissen.
 */
.st-bar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.st-bar span { display: block; height: 100%; background: var(--dim-2); }
.st-month[data-tone="ok"] .st-bar span { background: #17803D; }
.st-month[data-tone="bad"] .st-bar span { background: #B42318; }

/* ── Wartungsfenster ────────────────────────────────────────────────────── */

.st-windows { display: grid; gap: 2px; }
.st-window {
  display: grid; gap: 3px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.st-window:last-child { border-bottom: 0; }
.st-window b { font-size: 13.5px; color: var(--ink); }
.st-window span { font-size: 12.5px; color: var(--dim); }
.st-window-told { color: var(--dim-2) !important; font-size: 11.5px !important; }

.st-empty { margin: 0; padding: 16px 4px; font-size: 13px; color: var(--dim); }

/* ── Wie gemessen wird ──────────────────────────────────────────────────── */

.st-how { margin: 0; display: grid; gap: 2px; }
.st-how > div {
  display: grid; gap: 16px;
  grid-template-columns: 200px minmax(0, 1fr);
  padding: 15px 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.st-how > div:last-child { border-bottom: 0; }
.st-how dt { font-size: 13px; font-weight: 600; color: var(--ink); }
.st-how dd { margin: 0; max-width: 68ch; font-size: 13.5px; line-height: 1.65; color: var(--dim); }
.st-how dd a { color: var(--ink); }

@media (max-width: 760px) {
  /* Auf schmalen Schirmen fällt jede Zeile auseinander, statt sich zu quetschen —
     eine Prozentzahl in einer 40-Pixel-Spalte ist keine Prozentzahl mehr. */
  .st-month {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  .st-bar { grid-column: 1 / -1; order: 3; }
  .st-month-note { grid-column: 1 / -1; order: 4; text-align: left; }
  .st-how > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}