/* ═══════════════════════════════════════════════════════════════════════
   Lagebericht-Newsticker — Leiste (Startseite), Randnotiz (Artikelende),
   Archiv (/ticker/). Gerendert von scripts/build-ticker.mjs; hier nur Optik.
   Namespace .tl-*, Tokens --tl-* aus der Design-Spezifikation (docs/handoff-
   lagebericht-ticker.md). Keine Animation, kein Marquee, kein Auto-Rotate.
   ═══════════════════════════════════════════════════════════════════════ */

.tl-leiste, .tl-randnotiz, .tl-seite {
  /* Flächen & Text */
  --tl-bg-seite: #F3EDE4;
  --tl-bg-modul: #FBF8F3;
  --tl-text: #221E1A;
  --tl-text-2: #6E6357;
  --tl-text-3: #8A7A69;
  --tl-linie-innen: #EBE3D7;
  --tl-linie-aussen: #DED3C4;
  --tl-chip-bg: #F4EAE4;
  /* Kategorien: Punkt trägt die Sättigung, Label-Text die dunklere Variante
     (≥ 4,5:1 auf #FBF8F3). Die Farbe ist nie der einzige Träger — das Label
     steht immer als Text daneben. */
  --tl-seuchen: #A4462E;  --tl-seuchen-text: #8A3F28;
  --tl-recht: #B07C2B;    --tl-recht-text: #8A5F14;
  --tl-wiss: #5B7350;     --tl-wiss-text: #4A6141;
  --tl-sport: #4A6275;    --tl-sport-text: #3C5164;
  /* Ampel (nur Seuchen & Gesundheit) */
  --tl-akut: #C2402A;     --tl-akut-bg: #F6E3DC;
  --tl-beob: #C99B2E;     --tl-beob-bg: #F2EBD8;
  /* Schrift: die Site lädt keine Sans, daher derselbe System-Stack wie die
     CTA-Buttons „Neu bei uns im Loop" (styles.css, .loop-cta). */
  --tl-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tl-serif: var(--font-display, 'Fraunces', 'Source Serif 4', Georgia, serif);
  --tl-link: var(--tl-seuchen-text);
}

/* ───────────────────────── gemeinsame Bausteine ───────────────────────── */

.tl-punkt {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin-right: 7px;            /* Punkt ↔ Label */
  position: relative; top: -1px;
}

.tl-kat {
  font-family: var(--tl-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.tl-kat--seuchen      { color: var(--tl-seuchen-text); }
.tl-kat--recht        { color: var(--tl-recht-text); }
.tl-kat--wissenschaft { color: var(--tl-wiss-text); }
.tl-kat--sport        { color: var(--tl-sport-text); }
.tl-kat--seuchen      .tl-punkt { background: var(--tl-seuchen); }
.tl-kat--recht        .tl-punkt { background: var(--tl-recht); }
.tl-kat--wissenschaft .tl-punkt { background: var(--tl-wiss); }
.tl-kat--sport        .tl-punkt { background: var(--tl-sport); }

.tl-ampel {
  display: inline-block;
  font-family: var(--tl-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  line-height: 1.3;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 10px;
  white-space: nowrap;
}
.tl-ampel .tl-punkt { width: 6px; height: 6px; margin-right: 6px; }
/* Akut: Text dunkler als der Punkt (#C2402A wäre 4,2:1 auf #F6E3DC, gemessen). */
.tl-ampel--akut       { color: #9E2E1B; background: var(--tl-akut-bg); }
/* Beobachten: Text dunkler als der Punkt (#C99B2E wäre 2,4:1 auf #F2EBD8). */
.tl-ampel--beobachten { color: #7A5A0F; background: var(--tl-beob-bg); }
.tl-ampel--beobachten .tl-punkt { background: var(--tl-beob); }
.tl-ampel--akut .tl-punkt { background: var(--tl-akut); }

.tl-datum {
  font-family: var(--tl-sans);
  font-size: 12.5px; font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--tl-text-2);      /* nicht text-3: 3,9:1 auf dem Modul, gemessen */
  white-space: nowrap;
}

.tl-meldung__fuss {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;                /* Quelle ↔ Chip */
  margin-top: 10px;
  font-family: var(--tl-sans);
  font-size: 12px; line-height: 1.4;
  color: var(--tl-text-2);
}
.tl-quelle {
  color: var(--tl-text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tl-quelle:hover { border-bottom-color: currentColor; }
.tl-quelle__pfeil { font-size: 11px; }
.tl-verweis {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--tl-chip-bg);
  color: var(--tl-link);
  text-decoration: none;
  white-space: nowrap;
}
.tl-verweis:hover { text-decoration: underline; text-underline-offset: 2px; }

.tl-leiste a:focus-visible, .tl-randnotiz a:focus-visible, .tl-seite a:focus-visible {
  outline: 2px solid var(--tl-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ───────────────────────── 01 Startseiten-Leiste ───────────────────────── */

.tl-leiste {
  position: relative;           /* Anker für .tl-alle (Desktop) */
  margin-top: 28px;             /* Buttonreihe ↔ Leiste */
  padding: 22px 28px 24px;      /* Leiste innen */
  background: var(--tl-bg-modul);
  color: var(--tl-text);
  border: 1px solid var(--tl-linie-aussen);
  border-top: 3px solid var(--tl-text);   /* die schwarze Oberlinie */
}
.tl-leiste--leer { border-top-color: var(--tl-linie-aussen); }

.tl-leiste__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 16px;         /* Kopfzeile ↔ Meldungen */
  border-bottom: 1px solid var(--tl-linie-innen);
  margin-bottom: 18px;
}
.tl-leiste__titel {
  margin: 0;
  font-family: var(--tl-serif);
  font-size: 17px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0;
  color: var(--tl-text);
}
.tl-stand {
  font-family: var(--tl-sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tl-text-2);
}
/* Steht im Markup nach der Liste (mobil: darunter); auf dem Desktop absolut
   oben rechts in der Kopfzeile, Unterkante auf der Grundlinie des Titels. */
.tl-alle {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--tl-sans);
  font-size: 14px; font-weight: 500;
  color: var(--tl-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tl-alle:hover { text-decoration-thickness: 2px; }

.tl-leiste__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;                    /* Leiste-Spalten */
}
.tl-leiste .tl-meldung {
  padding-right: 24px;
  border-right: 1px solid var(--tl-linie-innen);
  min-width: 0;
}
.tl-leiste .tl-meldung:last-child { border-right: 0; padding-right: 0; }

.tl-leiste .tl-meldung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.tl-leiste .tl-meldung__kopf .tl-ampel { margin-left: 0; flex-basis: 100%; width: max-content; }
.tl-leiste .tl-meldung__text {
  margin: 9px 0 0;              /* Zeilen innerhalb einer Meldung */
  font-family: var(--tl-sans);
  font-size: 15.5px; font-weight: 500; line-height: 1.45;
  color: var(--tl-text);
  overflow-wrap: anywhere;
}
.tl-leiste .tl-meldung__text .tl-datum { font-size: inherit; font-weight: 400; }
.tl-text--kurz { display: none; }

/* Leerzustand */
.tl-leer__titel {
  margin: 0;
  font-family: var(--tl-serif);
  font-size: 20px; font-weight: 400; line-height: 1.35;
  color: var(--tl-text);
}
.tl-leer__titel .tl-punkt { width: 8px; height: 8px; background: var(--tl-text-3); margin-right: 12px; }
.tl-leer__text {
  margin: 8px 0 0 20px;
  font-family: var(--tl-sans);
  font-size: 14px; line-height: 1.5;
  color: var(--tl-text-2);
  max-width: 70ch;
}

/* Mobil: gestapelte Liste mit 1px-Trennlinien, Kurztext statt Langtext */
@media (max-width: 899px) {
  .tl-leiste { margin-top: 20px; padding: 18px 20px 20px; }
  .tl-leiste__liste { grid-template-columns: 1fr; gap: 0; }
  .tl-leiste .tl-meldung {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--tl-linie-innen);
  }
  .tl-leiste .tl-meldung:first-child { padding-top: 0; }
  .tl-leiste .tl-meldung:last-child { border-bottom: 0; padding-bottom: 0; }
  .tl-leiste .tl-meldung__kopf .tl-ampel { flex-basis: auto; margin-left: 10px; }
  .tl-text--lang:has(+ .tl-text--kurz) { display: none; }
  .tl-text--kurz { display: inline; }
  .tl-stand__zeit { display: none; }
  .tl-alle {
    position: static;
    display: inline-block;
    margin-top: 6px;
    padding-block: 12px;        /* Klickfläche ≥ 44 px */
    text-underline-offset: 3px;
  }
}

/* ───────────────────────── 02 Randnotiz am Artikelende ───────────────────────── */

.tl-randnotiz {
  max-width: 860px;             /* = .article-body */
  margin: 0 auto;
  padding: 0 var(--pad-x, 20px) 56px;
  color: var(--tl-text);
}
.tl-randnotiz__titel {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--tl-text);    /* Randnotiz: 2px Linie + 20px */
  font-family: var(--tl-serif);
  font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--tl-text);
}
.tl-randnotiz__sub {
  margin: 4px 0 0;
  padding-left: 22px;
  font-family: var(--tl-sans);
  font-size: 12px; line-height: 1.4;
  color: var(--tl-text-2);
}
.tl-randnotiz__liste {
  list-style: none; margin: 12px 0 0; padding: 0 0 0 22px;
}
.tl-randnotiz .tl-meldung {
  padding: 18px 0;
  border-bottom: 1px solid var(--tl-linie-innen);
}
.tl-randnotiz .tl-meldung:first-child { padding-top: 6px; }
.tl-randnotiz .tl-meldung__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
.tl-randnotiz .tl-meldung__kopf .tl-datum { margin-left: auto; }
.tl-randnotiz .tl-meldung__text {
  margin: 8px 0 0;
  font-family: var(--tl-sans);
  font-size: 14px; font-weight: 400; line-height: 1.5;
  color: var(--tl-text);
  overflow-wrap: anywhere;
}
.tl-randnotiz__alle {
  display: inline-block;
  margin-left: 22px;
  padding-block: 12px;          /* Klickfläche ≥ 44 px */
  font-family: var(--tl-sans);
  font-size: 13px; font-weight: 500;
  color: var(--tl-link);
  text-decoration: none;
}
.tl-randnotiz__alle:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ───────────────────────── 03 Archiv /ticker/ ───────────────────────── */

/* Die geteilte .helfer-nav färbt Marke und Links über --ink/--accent, die
   .cream-theme auf DUNKEL umstellt — dunkle Schrift auf Navy (Lighthouse:
   color-contrast, Bestand auch auf /helfer/ und /pferdekauf/). Hier lokal
   auf die hellen :root-Werte zurückgesetzt; der Grünton ist heller als
   --accent, weil #0DB87A auf dem Navy nur 4,4:1 misst. */
.tl-seite .helfer-nav__brand { color: #F2FBF3; }
.tl-seite .helfer-nav__brand em,
.tl-seite .helfer-nav__link--active,
.tl-seite .helfer-nav__link:hover { color: #5EE5A8; }
.tl-seite .helfer-nav__link { color: #DCEAE0; }

.tl-seite {
  background: var(--tl-bg-seite);
  color: var(--tl-text);
}
.tl-archiv {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px var(--pad-x, 20px) 72px;
}
.tl-archiv__kopf { max-width: 720px; }
.tl-archiv__titel {
  margin: 0;
  font-family: var(--tl-serif);
  font-size: clamp(30px, 4vw, 40px); font-weight: 400; line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tl-text);
}
.tl-archiv__lede {
  margin: 12px 0 0;
  font-family: var(--tl-sans);
  font-size: 15px; line-height: 1.5;
  color: var(--tl-text-2);
  max-width: 60ch;
}
.tl-archiv__kopf .tl-stand { display: block; margin-top: 10px; }

.tl-filter {
  display: flex; flex-wrap: wrap; gap: 8px;   /* Filter-Chips */
  margin: 28px 0 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tl-linie-aussen);
}
.tl-chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--tl-linie-aussen);
  border-radius: 999px;
  background: var(--tl-bg-modul);
  color: var(--tl-text);
  font-family: var(--tl-sans);
  font-size: 13px; font-weight: 500; line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.tl-chip:hover { border-color: var(--tl-text-3); }
.tl-chip__n {
  margin-left: 3px;              /* plus Leerzeichen im Markup, Vorlesetext: Alle 7 */
  font-variant-numeric: tabular-nums;
  color: var(--tl-text-2);
}
.tl-chip--aktiv {
  background: var(--tl-text);
  border-color: var(--tl-text);
  color: var(--tl-bg-modul);
}
.tl-chip--aktiv .tl-chip__n { color: #CFC5B8; }
.tl-chip--seuchen      .tl-punkt { background: var(--tl-seuchen); }
.tl-chip--recht        .tl-punkt { background: var(--tl-recht); }
.tl-chip--wissenschaft .tl-punkt { background: var(--tl-wiss); }
.tl-chip--sport        .tl-punkt { background: var(--tl-sport); }

.tl-archiv__wochen { margin-top: 8px; }
.tl-woche {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);   /* Archiv: KW-Spalte */
  gap: 32px;
  padding-top: 22px;            /* Wochengruppe ↔ Gruppe */
  margin-bottom: 22px;
}
.tl-woche__marke {
  margin: 18px 0 0;
  font-family: var(--tl-serif);
  font-size: 20px; font-weight: 400; line-height: 1.2;
  color: var(--tl-text);
}
.tl-woche__spanne {
  display: block;
  margin-top: 4px;
  font-family: var(--tl-sans);
  font-size: 12.5px; font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--tl-text-2);
}
.tl-woche__liste { list-style: none; margin: 0; padding: 0; }
.tl-woche .tl-meldung {
  padding: 18px 0;
  border-top: 1px solid var(--tl-linie-innen);
}
.tl-woche .tl-meldung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tl-woche .tl-meldung__kopf .tl-datum { margin-left: auto; }
.tl-woche .tl-meldung__text {
  margin: 8px 0 0;
  font-family: var(--tl-sans);
  font-size: 17px; font-weight: 400; line-height: 1.5;
  color: var(--tl-text);
  max-width: 68ch;
  overflow-wrap: anywhere;
}
.tl-archiv__leer {
  margin: 32px 0 0;
  font-family: var(--tl-sans);
  font-size: 15px; line-height: 1.5;
  color: var(--tl-text-2);
  max-width: 60ch;
}
.tl-archiv__fuss {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px var(--pad-x, 20px) 48px;
  border-top: 1px solid var(--tl-linie-aussen);
  font-family: var(--tl-sans);
  font-size: 13px; line-height: 1.5;
  color: var(--tl-text-2);
}
.tl-archiv__fuss p { margin: 0 0 6px; }
.tl-archiv__fuss a { color: var(--tl-text); text-decoration: underline; text-underline-offset: 3px; }   /* Lighthouse link-in-text-block: nicht nur Farbe */
.tl-archiv__hinweis { color: var(--tl-text-2); }

@media (max-width: 759px) {
  .tl-archiv { padding-top: 32px; }
  .tl-woche { grid-template-columns: 1fr; gap: 0; }
  .tl-woche__marke { margin-top: 0; padding-bottom: 8px; }
  .tl-chip { padding-block: 12px; min-height: 44px; }   /* Klickfläche ≥ 44 px (gemessen: 43 ohne min-height) */
  .tl-woche .tl-meldung__text { font-size: 16px; }
}