/**
 * Steuerlupe — Artikel-Komponenten CSS
 * Ersetzt Inline-Styles in artikel-blog.js durch wiederverwendbare Klassen.
 * Erstellt: 2026-04-05 (Phase 1 Standardisierung)
 *
 * CSS-Variablen: Aus catalog.html übernommen (Single Source of Truth)
 * Mapping: 910 Inline-Styles → 38 Klassen
 */

/* ── CUSTOM PROPERTIES ──
   Aliasieren die Seiten-Variablen (--blue, --navy, ...) mit Fallback-Werten.
   Funktioniert in artikel.html (--blue definiert) UND standalone. */
:root {
  --sl-blue:      var(--blue,      #0097b2);
  --sl-blue-light:var(--blue-light,#00b8d9);
  --sl-blue-dark: var(--blue-dark, #007a91);
  --sl-blue-bg:   var(--blue-bg,   rgba(0,151,178,.04));
  --sl-navy:      var(--navy,      #0f172a);
  --sl-navy-light:var(--navy-light,#1e293b);
  --sl-navy-mid:  #1e3a5f;     /* Tabellen-Trennlinie — kein Seiten-Pendant */
  --sl-ink:       var(--ink,       #0f172a);
  --sl-ink-sec:   var(--ink-sec,   #475569);
  --sl-ink-muted: var(--ink-muted, #94a3b8);
  --sl-bg:        var(--bg,        #fafbfc);
  --sl-white:     var(--white,     #ffffff);
  --sl-border:    var(--border,    #e2e8f0);
  --sl-red:       var(--red,       #dc2626);
  --sl-green:     var(--green,     #16a34a);
  --sl-amber:     var(--amber,     #d97706);
  --sl-text-light:#e2e8f0;
  --sl-text-sub:  #cbd5e1;
  --sl-text-64:   #64748b;
  --sl-radius:    var(--radius,    8px);
}

/* ══════════════════════════════════════════════════
   1. FARBKLASSEN (483+23+39+... Vorkommen)
   ══════════════════════════════════════════════════ */

/* color:var(--blue) — 483x — Links und Hervorhebungen */
.sl-link { color: var(--sl-blue); }

/* color:#0097b2 — 10x */
.sl-text-blue { color: var(--sl-blue); }

/* color:#00b8d9 — selten */
.sl-text-blue-light { color: var(--sl-blue-light); }

/* color:#d97706 — 23x */
.sl-text-amber { color: var(--sl-amber); }

/* color:#16a34a — 15x */
.sl-text-green { color: var(--sl-green); }

/* color:#94a3b8 — 13x */
.sl-text-muted { color: var(--sl-ink-muted); }

/* color:#e2e8f0 — 39x (Helltext auf Navy) */
.sl-text-light { color: var(--sl-text-light); }

/* color:#e2e8f0;font-weight:600 — 8x */
.sl-text-light-bold { color: var(--sl-text-light); font-weight: 600; }

/* color:#cbd5e1;font-size:12px — 15x */
.sl-text-sub { color: var(--sl-text-sub); font-size: 12px; }

/* font-weight:700;color:var(--blue) — 7x */
.sl-text-bold-blue { font-weight: 700; color: var(--sl-blue); }

/* ══════════════════════════════════════════════════
   2. TABELLEN (44+31+15+8+... Vorkommen)
   ══════════════════════════════════════════════════ */

/* width:100%;border-collapse:collapse;font-size:13px;margin:12px 0 — 8x */
.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}

/* Tabellen-Header links: text-align:left;padding:8px;color:var(--blue);font-size:11px;text-transform:uppercase — 9x */
.sl-table-header {
  text-align: left;
  padding: 8px;
  color: var(--sl-blue);
  font-size: 11px;
  text-transform: uppercase;
}

/* Tabellen-Header rechts — 6x */
.sl-table-header-right {
  text-align: right;
  padding: 8px;
  color: var(--sl-blue);
  font-size: 11px;
  text-transform: uppercase;
}

/* padding:8px;border-bottom:1px solid #1e3a5f — 44x */
.sl-table-cell {
  padding: 8px;
  border-bottom: 1px solid var(--sl-navy-mid);
}

/* text-align:center;padding:8px;border-bottom:1px solid #1e3a5f — 31x */
.sl-table-cell-center {
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid var(--sl-navy-mid);
}

/* text-align:right;padding:8px;border-bottom:1px solid #1e3a5f — 15x */
.sl-table-cell-right {
  text-align: right;
  padding: 8px;
  border-bottom: 1px solid var(--sl-navy-mid);
}

/* padding:10px;color:#64748b — 8x */
.sl-table-cell-p10 {
  padding: 10px;
  color: var(--sl-text-64);
}

/* padding:8px 14px;border:1px solid #ddd — 7x */
.sl-table-cell-border {
  padding: 8px 14px;
  border: 1px solid #ddd;
}

/* padding:8px 14px;text-align:center;border:1px solid #ddd;color:#16a34a;font-weight:700 — 7x */
.sl-table-cell-green {
  padding: 8px 14px;
  text-align: center;
  border: 1px solid #ddd;
  color: var(--sl-green);
  font-weight: 700;
}

/* padding:8px 14px;text-align:center;border:1px solid #ddd;color:#dc2626;font-weight:700 — 6x */
.sl-table-cell-red {
  padding: 8px 14px;
  text-align: center;
  border: 1px solid #ddd;
  color: var(--sl-red);
  font-weight: 700;
}

/* border-bottom:2px solid var(--blue) — 8x */
.sl-border-bottom-blue { border-bottom: 2px solid var(--sl-blue); }

/* ══════════════════════════════════════════════════
   3. KAPITELNAVIGATION / MEDIA-PLAYER (25+22 Vorkommen)
   ══════════════════════════════════════════════════ */

/* display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--navy);border-radius:8px;cursor:pointer;transition:background .2s — 25x */
.sl-chapter-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--sl-navy);
  border-radius: var(--sl-radius);
  cursor: pointer;
  transition: background .2s;
}
.sl-chapter-btn:hover { background: var(--sl-navy-light); }

/* display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--navy);border-radius:8px;cursor:pointer — 22x (ohne transition) */
.sl-chapter-btn-sm {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--sl-navy);
  border-radius: var(--sl-radius);
  cursor: pointer;
}
.sl-chapter-btn-sm:hover { background: var(--sl-navy-light); }

/* color:var(--blue);font-size:12px;font-weight:700;min-width:48px — 25x */
.sl-chapter-time {
  color: var(--sl-blue);
  font-size: 12px;
  font-weight: 700;
  min-width: 48px;
}

/* color:var(--blue);font-size:12px;font-weight:700;min-width:42px — 22x */
.sl-chapter-time-sm {
  color: var(--sl-blue);
  font-size: 12px;
  font-weight: 700;
  min-width: 42px;
}

/* color:var(--blue);font-size:13px;font-weight:700 — 15x */
.sl-time-lg {
  color: var(--sl-blue);
  font-size: 13px;
  font-weight: 700;
}

/* color:#fff;font-size:14px;font-weight:600 — 25x */
.sl-chapter-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* color:#fff;font-size:13px;font-weight:600 — 22x */
.sl-chapter-title-sm {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* font-size:14px;color:#e2e8f0;font-weight:600 — 8x */
.sl-chapter-title-lg {
  font-size: 14px;
  color: var(--sl-text-light);
  font-weight: 600;
}

/* color:#64748b;font-size:12px;margin-top:2px — 25x */
.sl-chapter-sub {
  color: var(--sl-text-64);
  font-size: 12px;
  margin-top: 2px;
}

/* color:#64748b;font-size:11px — 22x */
.sl-chapter-sub-sm {
  color: var(--sl-text-64);
  font-size: 11px;
}

/* color:#64748b;font-size:12px;margin-top:8px — 9x */
.sl-chapter-sub-mt8 {
  color: var(--sl-text-64);
  font-size: 12px;
  margin-top: 8px;
}

/* color:#00b8d9;font-size:12px;font-weight:600;text-decoration:none — 10x */
.sl-chapter-link {
  color: var(--sl-blue-light);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.sl-chapter-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════
   4. CONTENT-BLÖCKE (9+8+... Vorkommen)
   ══════════════════════════════════════════════════ */

/* background:var(--navy);padding:20px;border-radius:12px;margin:16px 0 — 9x */
.sl-media-container {
  background: var(--sl-navy);
  padding: 20px;
  border-radius: 12px;
  margin: 16px 0;
}

/* padding:10px 14px;border-left:3px solid #0097b2;margin-bottom:6px;cursor:pointer;background:rgba(0,151,178,.07);border-radius:0 8px 8px 0;transition:background .2s — 8x */
.sl-parl-box {
  padding: 10px 14px;
  border-left: 3px solid var(--sl-blue);
  margin-bottom: 6px;
  cursor: pointer;
  background: rgba(0,151,178,.07);
  border-radius: 0 var(--sl-radius) var(--sl-radius) 0;
  transition: background .2s;
}
.sl-parl-box:hover { background: rgba(0,151,178,.14); }

/* font-size:11px;color:#0097b2;font-weight:700 — 8x */
.sl-tag-blue {
  font-size: 11px;
  color: var(--sl-blue);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════
   5. HILFKLASSEN (15+11+... Vorkommen)
   ══════════════════════════════════════════════════ */

/* margin-bottom:14px — 15x */
.sl-mb-14 { margin-bottom: 14px; }

/* width:100% — 7x */
.sl-w-full { width: 100%; }

/* font-size:12px;color:#64748b — 11x */
.sl-text-12 {
  font-size: 12px;
  color: var(--sl-text-64);
}

/* font-size:12px;color:#94a3b8;margin:8px 0 16px;line-height:1.8 — 7x */
.sl-text-meta {
  font-size: 12px;
  color: var(--sl-ink-muted);
  margin: 8px 0 16px;
  line-height: 1.8;
}

/* color:#94a3b8;margin-top:6px — 7x */
.sl-text-muted-mt6 {
  color: var(--sl-ink-muted);
  margin-top: 6px;
}

/* ══════════════════════════════════════════════════
   6. LAYOUT-ELEMENTE
   ══════════════════════════════════════════════════ */

/* Verwandte Artikel / Related-Section */
.sl-related {
  margin-top: 32px;
  border-top: 1px solid var(--sl-border);
  padding-top: 24px;
}

/* Budget-Zeile: display:flex;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,.05);border-radius:6px */
.sl-budget-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════
   7. DREHTÜR-TRACKER (.sl-drehtuer)
   Trigger: ≥2 Stationen Staat↔NGO-Wechsel
   ══════════════════════════════════════════════════ */

.sl-drehtuer { margin: 20px 0; }

.sl-drehtuer-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--sl-ink-muted);
  margin-bottom: 6px;
}

.sl-drehtuer-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sl-ink);
  margin-bottom: 14px;
}

.sl-drehtuer-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 0 12px;
}

.sl-drehtuer-station {
  text-align: center;
  min-width: 130px;
  padding: 12px 14px;
  border-radius: var(--sl-radius);
  background: var(--sl-white);
  border: 2px solid var(--sl-border);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sl-drehtuer-station:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.sl-drehtuer-station[data-type="staat"] { border-color: var(--sl-navy); }
.sl-drehtuer-station[data-type="staat"] .sl-dt-type {
  color: var(--sl-navy);
  background: rgba(15,23,42,.07);
}
.sl-drehtuer-station[data-type="ngo"] { border-color: var(--sl-blue); }
.sl-drehtuer-station[data-type="ngo"] .sl-dt-type {
  color: var(--sl-blue);
  background: var(--sl-blue-bg);
}
.sl-drehtuer-station[data-type="wirtschaft"] { border-color: var(--sl-amber); }
.sl-drehtuer-station[data-type="wirtschaft"] .sl-dt-type {
  color: var(--sl-amber);
  background: rgba(217,119,6,.06);
}

.sl-dt-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}
.sl-dt-role  { font-size: 13px; font-weight: 700; color: var(--sl-ink); margin-bottom: 2px; }
.sl-dt-org   { font-size: 11px; color: var(--sl-ink-muted); margin-bottom: 6px; }
.sl-dt-year  { font-size: 10px; font-weight: 700; color: var(--sl-blue); }

.sl-drehtuer-arrow {
  font-size: 18px;
  color: var(--sl-ink-muted);
  padding: 0 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

@media (max-width: 600px) {
  .sl-drehtuer-track { flex-direction: column; align-items: flex-start; }
  .sl-drehtuer-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* ══════════════════════════════════════════════════
   8. TIMELINE (.sl-timeline)
   Trigger: ≥3 datierte Ereignisse
   CSS-only, ::before Pseudo-Linie
   ══════════════════════════════════════════════════ */

.sl-timeline {
  position: relative;
  padding-left: 32px;
  margin: 16px 0;
}
.sl-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sl-border);
}

.sl-timeline-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 16px;
}
.sl-timeline-item:last-child { margin-bottom: 0; }

.sl-timeline-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sl-white);
  border: 2px solid var(--sl-border);
  transition: transform .2s, background .2s;
}
.sl-timeline-item:hover::before { transform: scale(1.3); }

.sl-timeline-item[data-color="green"]::before  { border-color: var(--sl-green);  background: rgba(22,163,74,.1); }
.sl-timeline-item[data-color="green"]:hover::before  { background: var(--sl-green); }
.sl-timeline-item[data-color="red"]::before    { border-color: var(--sl-red);    background: rgba(220,38,38,.1); }
.sl-timeline-item[data-color="red"]:hover::before    { background: var(--sl-red); }
.sl-timeline-item[data-color="amber"]::before  { border-color: var(--sl-amber);  background: rgba(217,119,6,.1); }
.sl-timeline-item[data-color="amber"]:hover::before  { background: var(--sl-amber); }
.sl-timeline-item[data-color="blue"]::before   { border-color: var(--sl-blue);   background: rgba(0,151,178,.1); }
.sl-timeline-item[data-color="blue"]:hover::before   { background: var(--sl-blue); }

.sl-tl-year { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.sl-timeline-item[data-color="green"] .sl-tl-year  { color: var(--sl-green); }
.sl-timeline-item[data-color="red"]   .sl-tl-year  { color: var(--sl-red); }
.sl-timeline-item[data-color="amber"] .sl-tl-year  { color: var(--sl-amber); }
.sl-timeline-item[data-color="blue"]  .sl-tl-year  { color: var(--sl-blue); }

.sl-tl-text { font-size: 13px; color: var(--sl-ink-sec); line-height: 1.6; }