/* ------------------------------------------------------------------
   STARK · Artikel- und Listicle-Layout nach dem Blog von stark.digital
   ------------------------------------------------------------------
   Aufbau wie dort: schwarzer Artikelkopf, darunter eine helle Lesefläche
   mit sticky Inhaltsverzeichnis links und Fließtext rechts, danach wieder
   schwarz (CTA-Band und Footer).

   Die helle Fläche entsteht durch Token-Inversion auf .article-layout.
   Weil die Seiten durchgängig über Tokens gestylt sind, kippen alle
   Bausteine darin automatisch mit — auch das Per-Seiten-CSS der Artikel.
   ------------------------------------------------------------------ */

/* ── Artikelkopf (schwarz) ────────────────────────────────────────── */

.post-hero {
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.post-meta .date,
.post-meta .reading {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-dim);
}
.post-meta .author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg-dim);
}
.post-meta .author .av {
  width: 28px;
  height: 28px;
  background: var(--bg-3);
  border-radius: 9999px;
}

.post-hero h1 {
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  font-weight: var(--weight-display);
  max-width: 20ch;
  overflow-wrap: break-word;
}
.post-hero h1 .ac { color: var(--accent); }
.post-hero .lead {
  font-size: 20px;
  color: var(--fg-dim);
  max-width: 62ch;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
/* Die Sub-Headline sitzt zwischen H1 und Lead und bleibt ruhig */
.post-hero .hero-sub {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.19;
  letter-spacing: -0.02em;
  font-weight: var(--weight-body);
  color: var(--fg-dim);
  margin: -8px 0 20px;
  max-width: 34ch;
}

/* ── Lesefläche (hell) ────────────────────────────────────────────────
   Randlos über die volle Breite, ohne dafür Markup zu brauchen: negative
   Außenabstände ziehen den Block auf Viewport-Breite, das gleiche Maß als
   Innenabstand holt den Inhalt zurück ins 1280er-Raster.               */

.article-layout {
  /* helle Token-Ebene */
  --bg: #ffffff;
  --bg-1: #f7f7f7;
  --bg-2: #f2f2f2;
  --bg-3: #e5e5e5;
  --line: #e5e5e5;
  --line-2: #d2d2d2;
  --fg: #000000;
  --fg-2: #333333;
  --fg-dim: #575757;
  --fg-mute: #8a8a8a;
  --accent: #000000;
  --accent-rgb: 0, 0, 0;
  --accent-2: #575757;
  --prose-width: 68ch;

  background: var(--bg);
  color: var(--fg);

  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: clamp(48px, 6vw, 72px) clamp(72px, 9vw, 112px);

  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
/* erlaubt Grid-Kindern, schmaler als ihr Inhalt zu werden, damit breite
   Tabellen intern scrollen statt das Layout zu sprengen */
.article-layout > * { min-width: 0; }

/* Primär-Buttons kippen auf der hellen Fläche auf Schwarz */
.article-layout .btn-action {
  background: #000000;
  color: #ffffff;
}
.article-layout .btn-action:hover { background: #212121; }
.article-layout a.btn-action { color: #ffffff; }
.article-layout .btn-action::before { filter: invert(1); }

/* Glossar- und Kurzbeiträge haben kein Inhaltsverzeichnis: dort steht
   .article direkt in .wrap. Gleiche helle Lesefläche, randlos über ein
   Pseudo-Element, weil diese Seiten am Element ein inline margin:0 auto
   tragen, das negative Außenabstände überschreiben würde. */
.wrap > .article {
  --bg: #ffffff;
  --bg-1: #f7f7f7;
  --bg-2: #f2f2f2;
  --bg-3: #e5e5e5;
  --line: #e5e5e5;
  --line-2: #d2d2d2;
  --fg: #000000;
  --fg-2: #333333;
  --fg-dim: #575757;
  --fg-mute: #8a8a8a;
  --accent: #000000;
  --accent-rgb: 0, 0, 0;
  --accent-2: #575757;
  --prose-width: 68ch;

  color: var(--fg);
  position: relative;
  z-index: 0;
  padding-block: clamp(48px, 6vw, 72px) clamp(72px, 9vw, 112px);
  /* linksbündig unter der H1 statt mittig: die Seiten tragen inline ein
     margin:0 auto, das hier bewusst zurückgenommen wird */
  margin-inline: 0 !important;
}
.wrap > .article::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--bg);
  z-index: -1;
}
.wrap > .article .btn-action { background: #000000; color: #ffffff; }
.wrap > .article .btn-action:hover { background: #212121; }
.wrap > .article a.btn-action { color: #ffffff; }
.wrap > .article .btn-action::before { filter: invert(1); }

/* ── Inhaltsverzeichnis ─────────────────────────────────────────────
   Nummern kommen aus einem CSS-Counter, das Markup bleibt unverändert. */

.toc-side {
  position: sticky;
  top: 96px;
  border-left: 0;
  padding-left: 0;
}
.toc-side h4 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
.toc-side ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: toc;
  padding: 0;
  margin: 0;
}
.toc-side ul > li { counter-increment: toc; }
.toc-side ul > li > a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg-dim);
  padding-block: 12px;
  border-top: 1px solid var(--line);
  transition: color 0.18s ease;
}
.toc-side ul > li:last-child > a { border-bottom: 1px solid var(--line); }
.toc-side ul > li > a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-mute);
}
.toc-side ul > li > a:hover { color: var(--fg); }
.toc-side ul > li > a.active { color: var(--fg); }
.toc-side ul > li > a.active::before { color: var(--fg); }

.toc-side .cta-mini {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.toc-side .cta-mini::before { content: none; }
.toc-side .cta-mini .btn {
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-buttons);
  padding: 14px 20px;
  font-size: 16px;
  background: #000000 !important;
  color: #ffffff !important;
  border: 0 !important;
  font-weight: var(--weight-body);
  letter-spacing: -0.01em;
  transition: background 0.18s ease;
}
.toc-side .cta-mini .btn::before { filter: invert(1); }
.toc-side .cta-mini .btn:hover { background: #212121 !important; transform: none; }

/* ── Fließtext ────────────────────────────────────────────────────────
   Zeilenlänge auf 68ch begrenzt wie in der Referenz; breite Bausteine
   (Tool-Karten, Tabellen) nutzen die volle Spalte.                     */

.article { max-width: 100%; }

.article > p,
.article > ul,
.article > ol,
.article > blockquote {
  max-width: var(--prose-width);
}

.article > p {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.65;
  margin-bottom: 24px;
}
.article > p strong { color: var(--fg); font-weight: var(--weight-emphasis); }
.article > p a,
.article li a {
  color: var(--fg);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
}
.article > p a:hover,
.article li a:hover { border-color: var(--fg); }

.article h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: var(--weight-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 56px 0 20px;
  scroll-margin-top: 96px;
  max-width: 24ch;
  color: var(--fg);
}
.article h2 .ac { color: var(--fg); }
.article h3 {
  font-size: 24px;
  font-weight: var(--weight-heading);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 40px 0 12px;
  scroll-margin-top: 96px;
  color: var(--fg);
}
.article > :first-child { margin-top: 0; }

/* Listen im Fließtext: Strich statt Punkt, Zahlen in Mono */
.article > ul,
.article > ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 0;
  margin-bottom: 24px;
  list-style: none;
  counter-reset: artikel-ol;
  color: var(--fg-2);
}
.article > ul > li,
.article > ol > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.65;
}
.article > ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--fg);
}
.article > ol > li {
  counter-increment: artikel-ol;
  padding-left: 32px;
}
.article > ol > li::before {
  content: counter(artikel-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-mute);
}
.article li strong { color: var(--fg); font-weight: var(--weight-emphasis); }

/* Verschachtelte Listen behalten die Standard-Aufzählung */
.article li ul,
.article li ol { padding-left: 20px; margin-top: 12px; list-style: revert; }
.article li li { padding-left: 0; }
.article li li::before { content: none; }

/* ── TL;DR ───────────────────────────────────────────────────────────*/
.tldr {
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-cards);
  padding: 32px;
  margin-bottom: 48px;
  max-width: var(--prose-width);
}
.tldr .label { margin-bottom: 12px; color: var(--fg-dim); }
.tldr h3 { font-size: 20px; font-weight: var(--weight-heading); margin: 0 0 16px; }
.tldr ul { padding-left: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tldr li {
  font-size: 16px;
  color: var(--fg-2);
  margin-bottom: 0;
  line-height: 1.5;
  position: relative;
  padding-left: 20px;
}
.tldr li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--fg);
}
.tldr li b { color: var(--fg); font-weight: var(--weight-emphasis); }
.tldr li a {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid rgba(var(--accent-rgb),.35);
  text-decoration: none;
  white-space: nowrap;
}
.tldr li a:hover { border-bottom-color: var(--accent); }

/* ── Tool-Karte ──────────────────────────────────────────────────────*/
.tool-card {
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-cards);
  padding: 32px;
  margin-bottom: 16px;
  position: relative;
  scroll-margin-top: 96px;
  transition: background 0.2s ease;
}
.tool-card:hover { border-color: transparent; }
.tool-card.top {
  background: var(--bg-2);
  border-top: 3px solid var(--fg);
  border-radius: 0 0 var(--radius-cards) var(--radius-cards);
}
.tool-card .top-badge {
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-tags);
}

.tool-head {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-2);
}
.tool-head .logo-box {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-nested);
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: var(--weight-heading);
  color: var(--fg);
  overflow: hidden;
  flex-shrink: 0;
}
.tool-head .logo-box:has(img) { background: #fff; border-color: var(--line); }
.tool-head .logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 9px; display: block; }
.tool-head .info .rank {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-dim);
  margin-bottom: 6px;
}
.tool-head .info h3 {
  font-size: 24px;
  font-weight: var(--weight-heading);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.tool-head .info .price {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--fg-dim);
}
.tool-head .info .price em { color: var(--fg); font-style: normal; }

.tool-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.tool-cta .score {
  font-size: 32px;
  font-weight: var(--weight-display);
  color: var(--fg);
  letter-spacing: -0.03em;
  line-height: 1;
}
.tool-cta .score-l {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-dim);
}

.tool-body p {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: var(--prose-width);
}
.tool-body p strong { color: var(--fg); font-weight: var(--weight-emphasis); }

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.pros, .cons {
  background: var(--bg);
  border-radius: var(--radius-nested);
  padding: 24px;
  border: 0;
}
.pros h4, .cons h4 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.pros h4 { color: var(--fg); }
.cons h4 { color: var(--fg-mute); }
.pros ul, .cons ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pros li, .cons li {
  font-size: 14px;
  color: var(--fg-2);
  padding-left: 20px;
  position: relative;
  margin-bottom: 0;
  line-height: 1.5;
}
.pros li::before { content: "+"; position: absolute; left: 0; color: var(--fg); font-family: var(--font-mono); font-size: 12px; }
.cons li::before { content: "−"; position: absolute; left: 0; color: var(--fg-mute); font-family: var(--font-mono); font-size: 12px; }

/* ── Affiliate-Zeile am Kartenfuß ────────────────────────────────────*/
.aff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  margin-top: 24px;
  flex-wrap: wrap;
}
.aff-row .specs {
  display: flex;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  flex-wrap: wrap;
}
.aff-row .specs b {
  color: var(--fg);
  font-family: var(--font-brand);
  font-weight: var(--weight-emphasis);
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
  display: block;
  margin-top: 4px;
}
.aff-row a.btn { white-space: nowrap; }

/* ── Zwischen-CTA ────────────────────────────────────────────────────*/
.inline-cta {
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-cards);
  padding: 32px;
  margin: 48px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.inline-cta h3 { font-size: 24px; font-weight: var(--weight-heading); letter-spacing: -0.02em; margin-bottom: 6px; }
.inline-cta p { font-size: 16px; color: var(--fg-dim); margin: 0; }

/* ── Vergleichstabelle ───────────────────────────────────────────────*/
.compare-table {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: auto;
  margin: 40px 0;
}
.compare-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.compare-table th, .compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  background: transparent;
  border-bottom: 1px solid var(--line-2);
}
.compare-table td { color: var(--fg-2); }
.compare-table td:first-child { color: var(--fg); font-weight: var(--weight-emphasis); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table .yes { color: var(--fg); }
.compare-table .no { color: var(--fg-mute); }
.compare-table .price { font-family: var(--font-mono); font-size: 13px; color: var(--fg); }
.compare-table .aff {
  background: var(--fg);
  color: var(--bg);
  padding: 6px 10px;
  border-radius: var(--radius-tags);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  display: inline-block;
  white-space: nowrap;
}
.compare-table .aff:hover { background: var(--fg-dim); }

/* ── Empfehlungskarte ────────────────────────────────────────────────*/
.rec-card {
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-cards);
  padding: 32px;
  margin-bottom: 12px;
}
.rec-card .meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--fg-dim);
  font-size: 11px;
  margin-bottom: 12px;
}
.rec-card h3 { font-size: 24px; font-weight: var(--weight-heading); letter-spacing: -0.02em; margin-bottom: 12px; }
.rec-card p { font-size: 16px; color: var(--fg-2); line-height: 1.65; margin-bottom: 24px; max-width: var(--prose-width); }
.rec-card .picks { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Autor + verwandte Beiträge ──────────────────────────────────────*/
.author-card {
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-cards);
  padding: 32px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  margin: 56px 0;
  max-width: var(--prose-width);
}
.author-card .av {
  width: 64px;
  height: 64px;
  background: var(--bg-3);
  border-radius: var(--radius-nested);
}
.author-card .name { font-size: 20px; font-weight: var(--weight-heading); letter-spacing: -0.02em; margin-bottom: 6px; }
.author-card .role {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-dim);
  margin-bottom: 16px;
}
.author-card p { font-size: 16px; color: var(--fg-2); line-height: 1.5; margin: 0; }

/* Verwandte Beiträge als Linien-Karten, wie die Artikelliste bei stark.digital */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
.related-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  padding: 24px 0;
  transition: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.related-card:hover { border-color: var(--fg); transform: none; }
.related-card .tag-ghost { margin-bottom: 8px; align-self: flex-start; }
.related-card h4 {
  font-size: 20px;
  font-weight: var(--weight-heading);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 4px;
  transition: color 0.18s ease;
}
.related-card p { font-size: 14px; color: var(--fg-dim); line-height: 1.5; }

/* ── FAQ ─────────────────────────────────────────────────────────────*/
.faq {
  margin: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  max-width: var(--prose-width);
}
.faq details {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
}
.faq details:last-child { border-bottom: 0; }
.faq details:hover { background: transparent; }
.faq details[open] { background: transparent; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-size: 20px;
  font-weight: var(--weight-heading);
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.35;
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: center;
  gap: 18px;
  transition: none;
}
.faq summary:hover { padding-left: 0; color: var(--fg-dim); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--line-2);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease, border-color 0.2s, color 0.2s;
  justify-self: end;
}
.faq summary:hover::after { border-color: var(--fg); color: var(--fg); }
.faq details[open] summary::after {
  transform: rotate(45deg);
  border-color: var(--fg);
  background-color: transparent;
  color: var(--fg);
}
.faq details[open] summary { padding-left: 0; color: var(--fg); }
.faq .faq-a {
  padding: 0 0 24px;
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.65;
  max-width: var(--prose-width);
}
.faq .faq-a p { margin-bottom: 16px; }
.faq .faq-a p:last-child { margin-bottom: 0; }
.faq .faq-a a { color: var(--fg); border-bottom: 1px solid var(--line-2); }
.faq .faq-a a:hover { border-color: var(--fg); }
.faq .faq-a strong, .faq .faq-a b { color: var(--fg); font-weight: var(--weight-emphasis); }

/* ── Code ────────────────────────────────────────────────────────────*/
.article pre {
  background: var(--color-obsidian, #000);
  border: 0;
  border-radius: var(--radius-nested);
  padding: 24px;
  overflow-x: auto;
  margin: 24px 0;
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.6;
  color: #ffffff;
  max-width: var(--prose-width);
}
.article pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.article code, .faq-a code, .def-box code {
  background: var(--bg-2);
  border: 0;
  border-radius: 4px;
  padding: 2px 5px;
  font-family: var(--font-code);
  font-size: 0.88em;
  color: var(--fg);
}
.code-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  margin: 32px 0 -8px;
}

/* ── Schrittliste ────────────────────────────────────────────────────*/
.step-list { counter-reset: step; list-style: none; padding: 0; margin: 32px 0; max-width: var(--prose-width); }
.step-list > li {
  position: relative;
  padding-left: 48px;
  margin-bottom: 24px;
  min-height: 32px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
}
.step-list > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--fg-dim);
  border-radius: var(--radius-buttons);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* ── Glossar ─────────────────────────────────────────────────────────*/
.glossary-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  margin-bottom: 24px;
}
.glossary-meta .chip {
  background: var(--bg-3);
  border: 0;
  border-radius: var(--radius-tags);
  padding: 6px 10px;
  color: var(--fg-dim);
  line-height: 1;
}
/* Definitionskasten sitzt wie das Ergebnis-Panel der Referenz auf einer Kante */
.def-box {
  background: var(--bg-2);
  border: 0;
  border-left: 3px solid var(--fg);
  border-radius: 0 var(--radius-panels) var(--radius-panels) 0;
  padding: 32px;
  margin-bottom: 48px;
  max-width: var(--prose-width);
}
.def-box .label { margin-bottom: 12px; color: var(--fg-dim); }
.def-box p { font-size: 20px; color: var(--fg); line-height: 1.5; letter-spacing: -0.01em; margin: 0; }
.def-box p strong { color: var(--fg); font-weight: var(--weight-emphasis); }

/* ── Bilder ──────────────────────────────────────────────────────────*/
.article figure { margin: 40px 0; }
.article figure img { width: 100%; border-radius: var(--radius-cards); border: 0; display: block; }
.article figure figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  margin-top: 12px;
  text-align: left;
}

/* ── Callout & Disclaimer ────────────────────────────────────────────*/
.callout {
  background: var(--bg-2);
  border: 0;
  border-left: 2px solid var(--fg);
  border-radius: 0 var(--radius-nested) var(--radius-nested) 0;
  padding: 24px 28px;
  margin: 32px 0;
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.65;
  max-width: var(--prose-width);
}
.callout b { color: var(--fg); font-weight: var(--weight-emphasis); }

.affiliate-disclaimer {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 20px 0 0;
  margin: 40px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  line-height: 1.6;
  max-width: var(--prose-width);
}
.affiliate-disclaimer b { color: var(--fg-dim); font-weight: 400; }

/* ── Responsive ──────────────────────────────────────────────────────*/
@media (max-width: 1080px) {
  .article-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .related { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
}

@media (max-width: 880px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc-side {
    position: static;
    border-left: 0;
    padding-left: 0;
    border-top: 0;
    padding-top: 0;
  }
  .tool-head { grid-template-columns: 52px 1fr; gap: 14px; }
  .tool-head .tool-cta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .tool-grid, .related { grid-template-columns: 1fr; }
  .aff-row { flex-direction: column; align-items: stretch; }
  .aff-row .specs { gap: 24px; }
  .inline-cta { grid-template-columns: 1fr; }
  .author-card { grid-template-columns: 1fr; }
  .tool-card { padding: 24px 20px; }

  /* TOC-CTA auf Mobile als schmale, gut tippbare Sticky-Leiste am unteren Rand */
  .toc-side .cta-mini {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    margin: 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg);
    box-shadow: none;
  }
  .toc-side .cta-mini::before { display: none; }
  .toc-side .cta-mini .btn { width: 100%; padding: 14px 18px; font-size: 16px; }
  /* WhatsApp-Bubble über die Sticky-Leiste heben; das ProvenExpert-Seal (unten links,
     z-index 9999) würde die volle CTA-Leiste überlappen -> auf Mobile in Artikeln
     ausgeblendet (auf Desktop und allen anderen Seiten bleibt es sichtbar).
     Artikelende per padding-bottom freihalten. */
  .wa-bubble { bottom: 80px !important; }
  .pe-pro-seal { display: none !important; }
  .article-layout { padding-bottom: 84px; }
}

/* --- Befristete Partner-Aktion (Quelle: src/data/aktionen.js) -------------
   Monochrom wie der Rest der Seite, nur der Kicker setzt den Akzent. Der Block
   entfernt sich nach Ablauf selbst (data-aktion-ende + Inline-Script). */
.aktion-note {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 32px 0;
}
/* Zwei Klassen tief, damit .tool-body p (Tool-Karten) den Kicker nicht ueberschreibt. */
.aktion-note .aktion-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.aktion-note .aktion-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.aktion-note p:not(.aktion-kicker) {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0;
}
.aktion-note p b { color: var(--fg); font-weight: 500; }
.aktion-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
}
.aktion-note--kompakt { padding: 16px 18px; margin: 20px 0; border-radius: 12px; }
.aktion-note--kompakt .aktion-kicker { margin-bottom: 8px; }
.aktion-note--kompakt p:not(.aktion-kicker) { font-size: 14px; }

/* Kurzurteil - Centerpiece oben in Tool-Reviews */
.verdict { scroll-margin-top: 96px; }
.verdict .verdict-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.verdict .verdict-head h3 { margin: 0 0 16px; }
.verdict-score { flex-shrink: 0; text-align: right; line-height: 1; }
.verdict-score .score {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.verdict-score .score-l {
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 10px;
  color: var(--fg-dim);
  margin-top: 6px;
}
.verdict li a { white-space: normal; }
.verdict > .btn { margin-top: 20px; }
@media (max-width: 600px) {
  .verdict .verdict-head { flex-direction: column; gap: 4px; margin-bottom: 18px; }
  .verdict-score { text-align: left; }
  .verdict-score .score { font-size: 28px; }
}

/* Mobile: Inhaltsverzeichnis als kompakte Chip-Reihe.
   Grund: die gestapelte Liste schob das Kurzurteil ~270px nach unten (Visual Semantics: Centerpiece nach oben). */
@media (max-width: 880px) {
  .toc-side { border-top: 0; padding-top: 0; }
  .toc-side h4 { margin-bottom: 10px; }
  .toc-side ul {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .toc-side ul::-webkit-scrollbar { display: none; }
  .toc-side li { flex: 0 0 auto; }
  .toc-side ul a {
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
  }
  .toc-side ul a.active { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent); }
}