/* ==========================================================================
   schweigertIT – article.css
   Lange Fließtexte: Writeups (writeups/*.html) und Advisories
   (advisories/*.html). Enthält zuerst die gemeinsame Prosa-Schicht und
   danach die advisory-spezifischen Bausteine.
   Setzt base.css voraus.

   Advisory-Besonderheiten werden über <article class="advisory"> aktiviert.
   ========================================================================== */

/* ==========================================================================
   Lesebreite
   ========================================================================== */
.measure { width: min(var(--measure), calc(100% - 3rem)); margin-inline: auto; }
@media (max-width: 560px) {
  .measure { width: calc(100% - 2.5rem); }
}

/* ==========================================================================
   Typografie (überschreibt die Startseiten-Maße aus base.css)
   ========================================================================== */
body { line-height: 1.7; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); letter-spacing: -0.015em; font-weight: 600; }
h2 { font-family: var(--font-mono); font-size: clamp(1.3rem, 2.8vw, 1.65rem); letter-spacing: -0.01em; }
h3 { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0; }

/* ==========================================================================
   Artikel-Kopf
   ========================================================================== */
.article-head { padding: clamp(2.75rem, 7vw, 4.75rem) 0 clamp(1.75rem, 4vw, 2.5rem); }
.series-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.series-label::before {
  content: "";
  width: 2rem; height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.article-head h1 { margin-bottom: 1.15rem; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
}
.article-meta .sep { color: var(--border-strong); }
.article-meta .tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}
.article-meta .tag.is-accent {
  color: var(--accent-strong);
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
}
.lead {
  margin-top: 1.6rem;
  font-size: clamp(1.06rem, 1.9vw, 1.18rem);
  line-height: 1.65;
  color: var(--text-muted);
}
.lead strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   Scope-Kasten
   ========================================================================== */
.scope {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 1.25rem 1.4rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.scope h2 {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.scope p { color: var(--text-muted); font-size: 0.95rem; }
.scope p + p { margin-top: 0.7rem; }
.scope strong { color: var(--text); }

/* ==========================================================================
   TL;DR – Kurzfassung ganz oben im Artikel
   ========================================================================== */
.tldr {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 1.15rem 0 1.3rem;
  border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--border);
  transition: var(--mode-transition);
}
.tldr h2 {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.85rem;
}
.tldr ul { list-style: none; display: grid; gap: 0.55rem; }
/* Kein Grid auf dem <li>: Text neben <strong> wäre sonst ein eigenes
   Grid-Item und würde in der schmalen ersten Spalte umbrechen. */
.tldr li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.tldr li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
}
.tldr li strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   Inhaltsverzeichnis
   ========================================================================== */
.toc {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 1.3rem 1.5rem 1.45rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.toc h2 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.85rem;
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: 0.45rem;
}
.toc li { counter-increment: toc; }
.toc a {
  display: inline-flex;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--accent);
  font-weight: 700;
}
.toc a:hover { color: var(--text); border-bottom-color: var(--accent-soft-border); }

/* ==========================================================================
   Artikel-Körper
   ========================================================================== */
.article-body { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem); }
.article-body section { padding-top: clamp(1.75rem, 4vw, 2.5rem); }
.article-body section + section {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--border);
}
.article-body h2 { margin-bottom: 0.9rem; scroll-margin-top: 6rem; }
.article-body h2::before {
  content: "## ";
  color: var(--accent);
  font-weight: 400;
}
.article-body h3 { margin: 1.9rem 0 0.6rem; color: var(--text); }
.article-body p { color: var(--text-muted); }
.article-body p + p { margin-top: 1rem; }
.article-body p strong { color: var(--text); font-weight: 600; }
.article-body a:not(.btn) {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft-border);
}
.article-body a:not(.btn):hover { border-bottom-color: var(--accent-strong); }

.article-body ul.bullets {
  margin: 1rem 0 0;
  padding-left: 1.15rem;
  color: var(--text-muted);
  display: grid;
  gap: 0.45rem;
}
.article-body ul.bullets li::marker { color: var(--accent); }

/* Folgt auf eine Aufzählung wieder Fließtext, braucht er denselben Abstand
   wie zwischen zwei Absätzen. */
.article-body ul.bullets + p,
.article-body ol.steplist + p,
.article-body ol.timeline + p,
.article-body ul.reflist + p { margin-top: 1rem; }

/* ---------- Platzhalter-Absätze ---------- */
.todo {
  margin-top: 1.15rem;
  padding: 0.85rem 1.05rem;
  font-style: italic;
  font-size: 0.94rem;
  color: var(--text-faint) !important;
  background: var(--tint);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

/* ---------- Inline-Code ---------- */
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}
p code, li code, td code, th code, dd code, figcaption code {
  padding: 0.1em 0.4em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--accent-strong);
  white-space: nowrap;
}

/* ---------- Code-Blöcke: bleiben in BEIDEN Modi dunkel ---------- */
.codeblock {
  margin: 1.4rem 0 0;
  background: var(--terminal-bg);
  border: 1px solid var(--code-bar-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.codeblock figcaption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  background: var(--code-bar-bg);
  border-bottom: 1px solid var(--code-bar-border);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  color: var(--code-bar-text);
}
.codeblock figcaption::before {
  content: "";
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: rgba(240, 77, 90, 0.55);
  flex-shrink: 0;
}
.codeblock pre {
  margin: 0;
  padding: 1rem 1.15rem 1.1rem;
  overflow-x: auto;
}
.codeblock pre code {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--terminal-text);
  white-space: pre;
  background: none;
  border: 0;
  padding: 0;
}

/* ---------- Hinweis-Kästen ---------- */
.callout {
  margin: 1.5rem 0 0;
  padding: 1.05rem 1.25rem 1.15rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}
.callout > p { font-size: 0.96rem; }
.callout .callout-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.callout .callout-title svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.callout-info { border-left-color: #4f7fbd; }
.callout-info .callout-title { color: #4472a8; }
:root[data-mode="red"] .callout-info .callout-title { color: #7fa7d8; }
.callout-warn { border-left-color: var(--accent); background: var(--accent-soft); }
.callout-warn .callout-title { color: var(--accent-strong); }

/* ---------- Blockquote ---------- */
blockquote {
  margin: 1.5rem 0 0;
  padding: 0.35rem 0 0.35rem 1.25rem;
  border-left: 3px solid var(--accent-soft-border);
  color: var(--text-muted);
  font-size: 1.02rem;
  font-style: italic;
}
blockquote footer {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-style: normal;
  color: var(--text-faint);
}
blockquote footer::before { content: "— "; }

/* ---------- Nummerierte Schritt-Liste ---------- */
ol.steplist {
  list-style: none;
  counter-reset: step;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.85rem;
}
ol.steplist > li {
  counter-increment: step;
  position: relative;
  padding: 0.95rem 1.15rem 1rem 3.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.97rem;
}
ol.steplist > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 1.05rem;
  top: 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}
ol.steplist > li strong { color: var(--text); display: block; margin-bottom: 0.15rem; font-size: 0.98rem; }

/* ---------- Bild-Platzhalter (reines CSS, keine Datei) ---------- */
.shot {
  margin: 1.6rem 0 0;
}
.shot .shot-frame {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  min-height: 13rem;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, var(--tint) 0 10px, transparent 10px 20px),
    var(--surface);
}
.shot .shot-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft);
  color: var(--accent);
}
.shot .shot-icon svg { width: 1.3rem; height: 1.3rem; }
.shot .shot-hint {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.shot figcaption {
  margin-top: 0.7rem;
  font-size: 0.86rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
  line-height: 1.6;
}
.shot figcaption b { color: var(--text-muted); font-weight: 600; }

/* ---------- Tabelle ---------- */
.table-wrap {
  margin: 1.6rem 0 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
caption {
  caption-side: bottom;
  padding: 0.7rem 1.1rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-faint);
  text-align: left;
}
thead th {
  text-align: left;
  padding: 0.7rem 1.1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
tbody td {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody th {
  text-align: left;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
tbody tr:last-child th { border-bottom: 0; }

/* ==========================================================================
   Abschluss-Kasten: „Weiter in der Reihe“ / „Verantwortungsvolle Offenlegung“
   ========================================================================== */
.series-next,
.disclosure-box {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: clamp(1.6rem, 4vw, 2.2rem) clamp(1.4rem, 4vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.series-next .series-label,
.disclosure-box .series-label { margin-bottom: 0.8rem; }
.series-next h2,
.disclosure-box h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  margin-bottom: 0.6rem;
}
.series-next p,
.disclosure-box p { color: var(--text-muted); font-size: 0.96rem; }
.disclosure-box p + p { margin-top: 0.8rem; }
.series-next .next-links,
.disclosure-box .next-links {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Buttons im Artikelkontext: kompakter und in Monospace */
.next-links .btn {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  padding: 0.7rem 1.25rem;
  gap: 0.5rem;
}

/* ==========================================================================
   ==  A D V I S O R Y  ======================================================
   Nur aktiv innerhalb von <article class="advisory">.
   ========================================================================== */

/* ---------- Advisory-Kopf ---------- */
.advisory-id {
  font-family: var(--font-mono);
  font-size: clamp(2.1rem, 6.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.75rem;
  word-break: break-word;
}
.advisory-id::before {
  content: "> ";
  color: var(--accent);
  font-weight: 400;
}
.advisory .article-head h1 {
  font-size: clamp(1.45rem, 3.4vw, 2.05rem);
  color: var(--text);
  margin-bottom: 1.15rem;
}

/* Abschnittsnummern statt „## “ vor den Überschriften */
.advisory .article-body h2::before { content: none; }
.advisory .article-body h2 .sec-num {
  color: var(--accent);
  font-weight: 400;
  margin-right: 0.5rem;
}

/* Nummerierung im Inhaltsverzeichnis: 1. 2. 3. */
.advisory .toc a::before { content: counter(toc) "."; }

/* Platzhalter-Absätze werden im Advisory zusätzlich beschriftet */
.advisory .todo::before {
  content: "Platzhalter";
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

/* ---------- Status-Banner (oben, deutlich sichtbar) ---------- */
.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: clamp(1.75rem, 4vw, 2.4rem) 0 0;
  padding: 1.05rem 1.25rem 1.15rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.status-banner svg {
  width: 1.35rem; height: 1.35rem;
  flex-shrink: 0;
  margin-top: 0.18rem;
  color: var(--accent-strong);
}
.status-banner .status-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.35rem;
}
.status-banner p { color: var(--text); font-size: 0.98rem; }
.status-banner p + p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.92rem; }

/* ---------- Schwärzung (Redaction) ---------- */
.redacted {
  display: inline-block;
  height: 0.95em;
  min-width: 6ch;
  vertical-align: -0.12em;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, var(--border-strong) 0 6px, var(--border) 6px 12px);
}
.redacted-note {
  display: inline-block;
  margin-left: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  vertical-align: 0.05em;
}

/* ---------- Metadaten-Tabelle ---------- */
.meta-table {
  margin: clamp(1.75rem, 4vw, 2.4rem) 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.meta-table .meta-table-head {
  padding: 0.6rem 1.15rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.meta-table dl { display: block; }
.meta-table .meta-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 0 1.25rem;
  padding: 0.6rem 1.15rem;
  border-bottom: 1px solid var(--border);
}
.meta-table .meta-row:last-child { border-bottom: 0; }
.meta-table .meta-row:nth-child(even) { background: var(--tint); }
.meta-table dt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  align-self: center;
}
.meta-table dd {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text);
  word-break: break-word;
  align-self: center;
}
.meta-table dd.is-muted,
.meta-table dd .is-muted { color: var(--text-muted); }
.meta-table .meta-cve { color: var(--accent-strong); font-weight: 700; letter-spacing: 0.04em; }
@media (max-width: 620px) {
  .meta-table .meta-row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.7rem 1rem; }
}

/* Status-Pille in der Metadaten-Tabelle */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.1rem 0.65rem;
  border: 1px solid var(--accent-soft-border);
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-strong);
}
.status-pill::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.status-pill.is-open {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border);
}
.status-pill.is-open::before { background: var(--text-faint); }

/* ---------- Zurückhaltungs-Hinweis je Abschnitt ---------- */
.withheld {
  margin-top: 1.15rem;
  padding: 0.9rem 1.1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.withheld .withheld-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.45rem;
}
.withheld .withheld-title svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.withheld p { font-size: 0.95rem; color: var(--text-muted) !important; }

/* ---------- Disclosure-Timeline (vertikale Zeitleiste, reines CSS) ---------- */
.timeline {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0 0 0 1.6rem;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--accent-soft-border), var(--border) 70%, transparent);
}
.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.15rem 1.25rem;
  padding: 0.75rem 0 0.85rem;
  border-bottom: 1px solid var(--border);
}
.timeline > li:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 1.15rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-soft-border);
}
.timeline .tl-date {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  align-self: center;
}
.timeline .tl-event {
  font-size: 0.97rem;
  color: var(--text);
  align-self: center;
}
.timeline .tl-event small {
  display: block;
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
/* offene / ausstehende Punkte */
.timeline > li.is-pending::before {
  background: var(--bg);
  border: 2px solid var(--border-strong);
  box-shadow: none;
}
.timeline > li.is-pending .tl-event { color: var(--text-muted); }
.timeline > li.is-pending .tl-date { color: var(--text-faint); font-style: italic; }
.tl-pending-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.02rem 0.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  vertical-align: 0.12em;
}
@media (max-width: 620px) {
  .timeline > li { grid-template-columns: 1fr; }
}

/* ---------- Referenzliste ---------- */
ul.reflist {
  list-style: none;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 0.55rem;
}
ul.reflist li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.15rem 1rem;
  padding: 0.6rem 0.9rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  color: var(--text-muted);
}
ul.reflist li > span:first-child {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 620px) {
  ul.reflist li { grid-template-columns: 1fr; }
}