/* ============================================================
   Styling für Blogindex und Artikel.
   Eigene Datei statt legal.css, weil dort die Klassen .legal
   heißen und Artikel andere Bausteine brauchen: Meta-Zeile,
   Zwischenrufe, Beispielkästen, Abbinder.
   Tokens gespiegelt aus index.html — bewusst nur die genutzten.
   ============================================================ */
:root {
  --night:      oklch(0.978 0.005 85);
  --bone:       oklch(0.925 0.015 80);
  --ink:        oklch(0.175 0.020 40);
  --ink-dim:    oklch(0.440 0.018 40);
  --signal:     oklch(0.585 0.215 33);
  --signal-ink: oklch(0.455 0.185 33);
  --paper:      oklch(0.185 0.020 40);
  --dim:        oklch(0.475 0.016 50);
  --rule:       oklch(0.865 0.012 72);
  --on-signal:  oklch(0.99 0 0);

  --sans: Archivo, Helvetica, Arial, sans-serif;
  --serif: Newsreader, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --gut: clamp(20px, 3vw, 48px);
  --col: 760px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--signal-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: var(--on-signal);
  padding: 14px 20px; font: 600 14px/1 var(--sans);
}
.skip:focus { left: 0; }

/* --- Kopf ------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--rule); background: var(--night); }
.site-head__inner {
  max-width: var(--col); margin-inline: auto; padding: 16px var(--gut);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.wordmark { display: flex; align-items: baseline; gap: 9px; color: var(--paper); }
.wordmark:hover { text-decoration: none; }
.wordmark span:first-child { font: 700 18px/1 var(--sans); letter-spacing: -.035em; }
.dot { width: 6px; height: 6px; background: var(--signal); border-radius: 50%; display: inline-block; }
.site-head a.back { margin-left: auto; font: 500 14px/1 var(--sans); color: var(--dim); }
.site-head a.back:hover { color: var(--signal-ink); }

/* --- Gemeinsames Grundgerüst ------------------------------- */
main {
  max-width: var(--col); margin-inline: auto;
  padding: clamp(44px, 6vw, 84px) var(--gut) clamp(56px, 8vw, 110px);
}
.eyebrow {
  font: 500 11px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--signal-ink); margin-bottom: 20px;
}

/* --- Blogindex --------------------------------------------- */
.index h1 {
  font: 700 clamp(34px, 5vw, 58px)/1.03 var(--sans);
  letter-spacing: -.045em; margin-bottom: 16px; text-wrap: balance;
}
.index__sub {
  font: 300 clamp(17px, 1.5vw, 21px)/1.55 var(--serif);
  color: var(--dim); max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px);
}
.posts { display: flex; flex-direction: column; }
.posts li { border-top: 1px solid var(--rule); }
.posts a { display: block; padding: clamp(24px, 3vw, 34px) 0; color: var(--paper); }
.posts a:hover { text-decoration: none; }
.posts a:hover h2 { color: var(--signal-ink); }
.posts h2 {
  font: 700 clamp(21px, 2.2vw, 28px)/1.2 var(--sans);
  letter-spacing: -.032em; margin-bottom: 10px; transition: color .18s;
}
.posts p { color: var(--dim); max-width: 66ch; }
.posts .meta {
  font: 500 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 12px;
}

/* --- Artikel ------------------------------------------------ */
.article h1 {
  font: 700 clamp(32px, 4.6vw, 55px)/1.05 var(--sans);
  letter-spacing: -.045em; margin-bottom: 18px; text-wrap: balance;
}
.article__lede {
  font: 300 clamp(18px, 1.7vw, 23px)/1.5 var(--serif);
  color: var(--ink-dim); max-width: 60ch;
}
.article__meta {
  font: 500 11px/1.8 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 14px 0; margin: clamp(30px, 4vw, 44px) 0;
  display: flex; gap: 20px; flex-wrap: wrap;
}
.article h2 {
  font: 700 clamp(23px, 2.3vw, 31px)/1.2 var(--sans);
  letter-spacing: -.035em; margin: clamp(38px, 4.5vw, 58px) 0 16px;
  text-wrap: balance;
}
.article h3 {
  font: 700 17px/1.35 var(--sans);
  letter-spacing: -.02em; margin: 30px 0 10px;
}
.article p { color: var(--ink-dim); max-width: 68ch; }
.article p + p { margin-top: 16px; }
.article strong { color: var(--paper); font-weight: 700; }

/* Marker absolut positioniert statt als Grid-Spalte: bei display:grid
   wird JEDES Kind des li zu einem Grid-Element. Ein <strong> am Anfang
   und der Text dahinter sind zwei Kinder — der Text landet dann in der
   schmalen Markerspalte und bricht nach jedem Wort um. */
.article ul.bullets { margin: 18px 0; display: flex; flex-direction: column; gap: 12px; }
.article ul.bullets li {
  position: relative; padding-left: 30px;
  color: var(--ink-dim); max-width: 68ch;
}
.article ul.bullets li::before {
  content: "·"; color: var(--signal-ink);
  position: absolute; left: 0; top: 0;
}

.article ol.steps { margin: 18px 0; display: flex; flex-direction: column; gap: 16px; counter-reset: s; }
.article ol.steps li {
  position: relative; padding-left: 44px;
  color: var(--ink-dim); max-width: 68ch; counter-increment: s;
}
.article ol.steps li::before {
  content: counter(s, decimal-leading-zero);
  font: 500 11px/1.7 var(--mono); color: var(--signal-ink); letter-spacing: .08em;
  position: absolute; left: 0; top: 4px;
}

/* Zwischenruf: der eine Satz, der haengenbleiben soll */
.article .shout {
  font: 300 clamp(21px, 2.3vw, 29px)/1.35 var(--serif);
  color: var(--paper); border-left: 3px solid var(--signal);
  padding: 4px 0 4px 24px; margin: clamp(32px, 4vw, 46px) 0;
  max-width: 56ch; text-wrap: balance;
}
.article .shout em { font-style: italic; color: var(--signal-ink); }

/* Beispielkasten: vorher/nachher */
.article .example {
  background: var(--bone); border-left: 3px solid var(--signal);
  padding: 22px 26px; margin: 24px 0;
}
.article .example p { color: var(--ink-dim); }
.article .example .label {
  font: 500 10px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--signal-ink); margin-bottom: 10px;
}
.article .example .quote {
  font: 400 17px/1.55 var(--serif); color: var(--ink); max-width: none;
}

/* Lesefortschritt (Modul 6: Gamification). Rein per CSS über die
   Scroll-Timeline — kein Skript, damit die CSP unverändert streng bleibt.
   Browser ohne Unterstützung zeigen einfach keinen Balken. */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50;
  background: var(--signal); transform-origin: 0 50%; transform: scaleX(0);
  animation: growProgress linear both;
  animation-timeline: scroll(root block);
}
@keyframes growProgress { to { transform: scaleX(1); } }

/* Subheadline über der H1 (Modul 6) */
.article__sub {
  font: 700 clamp(15px, 1.5vw, 19px)/1.3 var(--sans);
  letter-spacing: -.01em; color: var(--signal-ink); margin-bottom: 10px;
}

/* Teaser: fett, damit er sich abhebt (Modul 6) */
.article__lede strong { color: var(--paper); font-weight: 500; }

/* Inhaltsverzeichnis (Modul 8, Punkt 3) */
.toc {
  background: var(--bone); padding: 22px 26px; margin: 0 0 clamp(30px, 4vw, 44px);
}
.toc p {
  font: 500 10px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--signal-ink); margin-bottom: 14px;
}
.toc ol { display: flex; flex-direction: column; gap: 9px; counter-reset: t; }
.toc li { counter-increment: t; display: grid; grid-template-columns: 26px 1fr; }
.toc li::before {
  content: counter(t, decimal-leading-zero);
  font: 500 10px/1.7 var(--mono); color: var(--dim);
}
.toc a { color: var(--ink); font-weight: 500; }

/* Zitat mit Autorität (Modul 6) */
.article figure.quote-block {
  margin: clamp(34px, 4.5vw, 50px) 0; padding-left: 24px;
  border-left: 3px solid var(--signal);
}
.article figure.quote-block blockquote {
  font: 300 clamp(20px, 2.2vw, 27px)/1.35 var(--serif);
  color: var(--paper); max-width: 52ch; text-wrap: balance;
}
.article figure.quote-block figcaption {
  font: 500 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-top: 14px;
}

/* Zwischen-CTA (Modul 6: in langen Formaten mehrfach anbieten) */
.article .cta-inline {
  background: var(--bone); border-left: 3px solid var(--signal);
  padding: 20px 26px; margin: clamp(32px, 4vw, 46px) 0;
}
.article .cta-inline p { color: var(--ink-dim); max-width: none; }

/* Weiterführende Links (Modul 6: tiefer in den Kaninchenbau) */
.article .more { margin-top: 30px; }
.article .more p {
  font: 500 10px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--signal-ink); margin-bottom: 12px;
}
.article .more li { margin-top: 8px; }

/* Postskriptum (Modul 6) */
.article .ps {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.article .ps p { font-size: 16px; }

/* Abbinder */
.article .cta {
  border-top: 1px solid var(--rule);
  margin-top: clamp(46px, 6vw, 72px); padding-top: clamp(30px, 4vw, 44px);
}
.article .cta h2 { margin-top: 0; }
.btn {
  display: inline-block; margin-top: 22px;
  background: var(--signal); color: var(--on-signal);
  font: 700 14px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  padding: 18px 28px;
}
.btn:hover { text-decoration: none; background: var(--signal-ink); }

/* --- Fuss ---------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--rule);
  max-width: var(--col); margin-inline: auto;
  padding: 28px var(--gut) clamp(30px, 4vw, 56px);
  display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline;
}
.site-foot a, .site-foot p { font: 500 15px/1.5 var(--sans); color: var(--dim); }
.site-foot nav { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}