/* Baustein zeitachse: Zeitachse als Gruppenzeilen einer Tabelle
   (Bedienkonzept A9). Ausrollen bis zur Begehung, Bauplan 3A. Besitzer:
   A1d. Leer angelegt von A0a. Die Grundvorlage bindet die Datei nach dem
   globalen Stylesheet ein. Nur Regeln fuer eigene, neue Klassen; Farben
   als Token mit Rueckfall; eine Regel fuer die Telefonbreite (560px).

   Die Tabelle ist eine gewoehnliche .liste mit der Klasse zeitachse; je
   Gruppe ein tbody, darin zuerst die Gruppenzeile (Makro
   zeitachse_gruppe), dann die Zeilen. Die Gruppenzeile ist ein th ueber
   alle Spalten: Titel, Zahl, Ampelpunkt, beim laufenden Monat die Marke
   "heute" in Navy (weisse Schrift, Kontrast ueber 9 zu 1). Kein Gold:
   Gold ist die Hauptaktion, und das Gold der Marke ist dasselbe wie der
   gelbe Ampelpunkt daneben ("wird faellig"); der Jahresplaner hat kein
   Gold (Bauplan 3.2, Bedienkonzept H). Keine Ockerschrift. */

/* --- Gruppenzeile -------------------------------------------------------- */

/* Gegen die globale Kopfzeile (.liste th: klein, grau, Kapitaelchen):
   eine Gruppe liest sich wie eine Zwischenueberschrift. */
.liste.zeitachse .zeitachse-titel {
  padding: 14px 12px 8px;
  background: var(--grau-hell, #f4f6f9);
  border-bottom: 1px solid var(--border, #e2e7ee);
  color: var(--navy, #1F4570);
  font-size: 0.95rem; font-weight: 700;
  text-transform: none; letter-spacing: normal; white-space: normal;
}
.zeitachse-gruppe .zeitachse-titel > * { vertical-align: middle; }
.zeitachse-name { margin-right: 4px; }
.zeitachse-trenner { color: var(--muted, #5f7183); margin: 0 2px; }
.zeitachse-heute {
  display: inline-block; padding: 1px 9px; margin-right: 6px;
  border-radius: 999px;
  background: var(--navy, #1F4570); color: #ffffff;
  font-size: 0.82rem; font-weight: 700;
}
.zeitachse-zahl {
  display: inline-block; min-width: 1.6em; padding: 1px 7px;
  border-radius: 999px; margin: 0 4px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e7ee);
  color: var(--navy, #1F4570);
  font-size: 0.82rem; font-weight: 700; text-align: center;
}
/* Der laufende Monat: links ein Navystrich, damit man ihn beim Scrollen
   wiederfindet. */
.zeitachse-gruppe-heute .zeitachse-titel {
  box-shadow: inset 4px 0 0 var(--navy, #1F4570);
}
/* Zwischen zwei Gruppen ein wenig Luft. */
.liste.zeitachse > tbody + tbody .zeitachse-titel { border-top: 10px solid var(--surface, #ffffff); }

/* --- Telefon: Spalten gestapelt (R-A17) ----------------------------------- */

@media (max-width: 560px) {
  /* Der Tabellenkopf bleibt fuer den Vorleser, sichtbar steht der
     Spaltenname an der Zelle (data-spalte). */
  .liste.zeitachse thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .liste.zeitachse, .liste.zeitachse > tbody { display: block; width: 100%; }
  .liste.zeitachse > tbody > tr { display: flex; flex-wrap: wrap;
    align-items: center; gap: 4px 10px; padding: 10px 4px;
    border-bottom: 1px solid var(--border, #e2e7ee); }
  .liste.zeitachse > tbody > tr > td { display: block; padding: 0;
    border-bottom: none; min-width: 0; overflow-wrap: anywhere; }
  /* Datum und Zustand nebeneinander, alles Weitere darunter ueber die
     volle Breite. */
  .liste.zeitachse > tbody > tr > td:nth-child(n+3) { flex: 1 1 100%; }
  .liste.zeitachse > tbody > tr > td[data-spalte]:nth-child(n+3)::before {
    content: attr(data-spalte) ": ";
    color: var(--muted, #5f7183); font-weight: 600;
  }
  .liste.zeitachse > tbody > tr.zeitachse-gruppe { display: block;
    padding: 0; border-bottom: none; }
  .liste.zeitachse .zeitachse-gruppe .zeitachse-titel { display: block;
    padding: 12px 8px 8px; }
}

/* --- Druck: die Gruppen bleiben, ohne Flaechen ----------------------------- */

@media print {
  .liste.zeitachse .zeitachse-titel { background: none; box-shadow: none;
    border-bottom: 1px solid #000; }
  .zeitachse-heute { background: none; border: 1px solid #000;
    color: #000; }
  .zeitachse-gruppe { break-after: avoid; }
}