/*
  Changelog-Seite: dunkle Zeitleiste nach Holgers Vorlage.

  Bewusst eigenstaendig, ohne das Design-System der App: die Seite ist oeffentlich
  und soll fuer sich stehen. Die Farben orientieren sich am Vorlagenbild (dunkler
  Hintergrund, farbige Kategorie-Schilder).
*/

:root {
  --cl-bg:        #1b2230;
  --cl-bg-karte:  #212a3b;
  --cl-linie:     #33405a;
  --cl-text:      #e7ebf3;
  --cl-text-leise:#aab3c5;
  --cl-teal:      #22b8cf;
}

* { box-sizing: border-box; }

.cl-body {
  margin: 0;
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Kopfzeile ─────────────────────────────────────────────────────────────── */
.cl-top {
  border-bottom: 1px solid var(--cl-linie);
  padding: 20px 24px;
}
.cl-top__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cl-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2bc0d6, #2f7dea);
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
}
.cl-brand { font-weight: 700; font-size: 1.05rem; }
.cl-brandsub { color: var(--cl-text-leise); font-size: .9rem; }

/* ── Zeitleiste ────────────────────────────────────────────────────────────── */
.cl-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.cl-leer { color: var(--cl-text-leise); }

/* ── Filterleiste ──────────────────────────────────────────────────────────── */
.cl-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.cl-fbtn {
  font: inherit;
  font-size: .88rem;
  color: var(--cl-text-leise);
  background: transparent;
  border: 1px solid var(--cl-linie);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.cl-fbtn:hover { color: var(--cl-text); border-color: #4a5a7a; }
/* Der aktive Knopf traegt Farbe, die anderen nicht. Zwei hervorgehobene Knoepfe
   nebeneinander beantworten die Frage nicht mehr, welcher gerade gilt. */
.cl-fbtn.is-aktiv {
  color: var(--cl-teal);
  border-color: var(--cl-teal);
  background: rgba(34,184,207,.09);
}
.cl-gesamt {
  margin-left: auto;
  font-size: .85rem;
  color: var(--cl-text-leise);
}

/* ══════════════════════════════════════════════════════════════════════════
   DIE TAGE ALS EINE KARTE, NICHT ALS ZEITSTRAHL
   ══════════════════════════════════════════════════════════════════════════
   Der Zeitstrahl mit der senkrechten Linie und den grossen Datumszeilen war
   fuer wenige Eintraege gebaut. Bei 162 auf zehn Tagen zieht er die Seite
   auseinander: Jede zugeklappte Zeile beansprucht die Hoehe einer Ueberschrift,
   obwohl sie nur noch ein Verweis ist.

       Zugeklappt ist eine Zeile kein Titel mehr, sondern ein Eintrag
       in einem Inhaltsverzeichnis. Sie darf auch so aussehen.

   Jetzt eine Karte mit Haarlinien dazwischen, wie eine Liste. Der offene Tag
   hebt sich durch seinen Hintergrund ab, nicht durch Schriftgroesse. */
.cl-timeline {
  background: var(--cl-bg-karte);
  border: 1px solid var(--cl-linie);
  border-radius: 12px;
  overflow: hidden;
}

.cl-tag { margin: 0; }
.cl-tag + .cl-tag { border-top: 1px solid var(--cl-linie); }

/* ── Die Tageszeile ────────────────────────────────────────────────────────── */
.cl-tag__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;                 /* das Browser-Dreieck weg */
  transition: background .12s ease;
}
.cl-tag__kopf::-webkit-details-marker { display: none; }
.cl-tag__kopf:hover { background: rgba(255,255,255,.03); }

/* Der offene Tag hebt sich durch den Hintergrund ab, nicht durch Schriftgroesse.
   Vorher war jedes Datum so gross wie eine Ueberschrift, und zehn Ueberschriften
   untereinander ergeben keine Rangfolge, sondern Laerm. */
.cl-tag[open] > .cl-tag__kopf {
  background: rgba(34,184,207,.09);
  border-bottom: 1px solid var(--cl-linie);
}
.cl-tag[open] > .cl-tag__kopf .cl-datum { color: var(--cl-teal); }

/* Eigener Pfeil statt Browser-Dreieck: ein gedrehtes Quadrat sitzt in jeder
   Schriftart gleich. */
.cl-pfeil {
  width: 7px; height: 7px;
  border-right: 2px solid #7b8598;
  border-bottom: 2px solid #7b8598;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
  margin: 0 2px;
}
.cl-tag[open] > .cl-tag__kopf .cl-pfeil {
  transform: rotate(45deg);
  border-color: var(--cl-teal);
}

/* Das Wochentags-Schild. Kleiner als frueher: Es stand auf der Zeitstrahl-Linie
   und musste sie ueberdecken, diese Linie gibt es nicht mehr. */
.cl-weekday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--cl-teal);
  color: #06232a;
  font-size: .78rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.cl-datum {
  font-size: 1.05rem;
  font-weight: 600;
  color: #cdd5e5;
}

.cl-anzahl {
  margin-left: auto;
  font-size: .85rem;
  color: var(--cl-text-leise);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 2px 11px;
  min-width: 34px;
  text-align: center;
}
.cl-heute {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cl-teal);
  border: 1px solid var(--cl-teal);
  border-radius: 999px;
  padding: 1px 9px;
}

/* ── Eintraege ─────────────────────────────────────────────────────────────── */
.cl-liste { list-style: none; margin: 0; padding: 14px 18px; }
/* ══════════════════════════════════════════════════════════════════════════
   DAS HIDDEN-ATTRIBUT MUSS GEWINNEN
   ══════════════════════════════════════════════════════════════════════════
   Der Filter setzt li.hidden, und trotzdem blieb jede Zeile stehen. Holger
   hat es sofort gesehen: "ich druecke auf neu, ich sehe alle Eintraege".

   Der Grund steht eine Zeile tiefer. "hidden" wirkt ueber die eingebaute
   Regel [hidden] { display: none } des Browsers, und die ist nur eine
   Vorgabe. Ein eigenes "display: flex" schlaegt sie, weil eigene Regeln
   immer vor den eingebauten kommen.

       Ein Schalter, den eine andere Regel ueberstimmt, ist kein Schalter.
       Er sieht nur so aus.

   Das JavaScript war richtig, das CSS hat es zurueckgenommen. Deshalb liess
   sich der Fehler auch nicht in der Konsole sehen: Es gab keinen. */
[hidden] { display: none !important; }

.cl-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 7px 0;
}
.cl-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  color: #fff;
}
.cl-badge--neu       { background: #35a56b; }
.cl-badge--update    { background: #e0a52c; color: #2a2103; }
.cl-badge--fix       { background: #2f7dea; }
.cl-badge--aenderung { background: #64748b; }

/* ── Titel sichtbar, Begruendung auf Klick ─────────────────────────────────── */
.cl-mehr { flex: 1 1 auto; min-width: 0; }

.cl-titel {
  color: var(--cl-text);
  cursor: pointer;
  list-style: none;
  padding: 1px 0;
  display: block;
}
.cl-titel::-webkit-details-marker { display: none; }
.cl-titel:hover { color: #fff; }

/* Das Dreieck steht HINTER dem Titel, nicht davor: Vorne wuerde es die
   Titelspalte einruecken, und dann fluchten die Zeilen nicht mehr, bei denen
   es gar keinen weiteren Text gibt. */
.cl-mehr .cl-titel::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px;
  vertical-align: 2px;
  border-right: 2px solid #7b8598;
  border-bottom: 2px solid #7b8598;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.cl-mehr[open] .cl-titel::after { transform: rotate(45deg); }
.cl-mehr[open] .cl-titel { color: var(--cl-teal); }

/* Der lange Text. Etwas leiser als der Titel: Er ist die Begruendung, nicht
   die Nachricht. */
.cl-detail {
  margin: 6px 0 2px;
  color: var(--cl-text-leise);
  font-size: .95rem;
  line-height: 1.65;
}

/* Eintraege ohne weiteren Text sollen genauso sitzen wie die anderen, nur
   ohne Dreieck und ohne Zeigefinger. */
.cl-titel--nur { cursor: default; flex: 1 1 auto; min-width: 0; }

.cl-text { color: var(--cl-text); padding-top: 1px; }

/* ── Schmale Bildschirme ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .cl-datum { font-size: .95rem; }
  .cl-tag__kopf { padding: 12px 14px; }
  .cl-liste { padding: 12px 14px; }
  .cl-eintrag { flex-wrap: wrap; gap: 6px 12px; }
  .cl-badge { min-width: 84px; }
}

/* ── Fußzeile (rechtlicher Hinweis) ────────────────────────────────────────── */
.cl-fuss {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 20px 20px 40px;
  border-top: 1px solid var(--cl-linie);
  text-align: center;
}
.cl-fuss__text {
  max-width: 760px;
  margin: 0 auto;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--cl-text-leise);
}
.cl-fuss__jahr {
  margin: 10px 0 0;
  font-size: .82rem;
  color: var(--cl-text-leise);
}
.cl-fuss a { color: var(--cl-text); text-decoration: underline; }