/* Pretext-Magazin — Lab-Seite im dripback.de-Look (dark).
   Marken-Farbtoken aus web/assets/tokens.css importiert (Single Source of Truth,
   kein Hex-Drift); Fonts selbst gehostet über /assets/fonts.css (Newsreader/Geist).
   Abstände auf 4/8. */
@import url('/assets/tokens.css');

:root {
  /* --- Fonts (Familien wie styles.css) --- */
  --font-sans:  'Geist', -apple-system, system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;

  /* --- Abstände 4/8 --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 40px; --s-7: 64px;

  /* --- Satz --- */
  --measure: 68ch;          /* Kopf/Fuß: einspaltiges Lesemaß */
  --measure-flow: 88ch;     /* Fließtext (2 Spalten): weiter, damit je Spalte 45–75 Zeichen fallen */
  --col-gap: 44px;
  --body-size: clamp(16px, 1.05vw, 18px);
  --body-lh: 1.7;

  /* --- SVG-Illustration --- */
  --paper: var(--t-elev);
  --line:  #2A2A30;
  --accent: var(--t-accent);
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--font-serif);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.skip-link {
  position: absolute; left: var(--s-3); top: -48px;
  background: var(--t-accent-interactive); color: var(--t-fg-on-accent);
  padding: var(--s-2) var(--s-3); border-radius: 8px; z-index: 10;
  font-family: var(--font-sans); font-size: 14px; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-3); }

.mag {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) var(--s-3) var(--s-7);
}

/* --- Kopf --- */
.mag__head { max-width: var(--measure); margin: 0 auto var(--s-6); }
.mag__kicker {
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--t-accent); margin: 0 0 var(--s-3);
}
.mag__title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 var(--s-4);
}
.mag__standfirst {
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5;
  color: var(--t-ink-2); margin: 0 0 var(--s-3);
}
.mag__byline {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--t-ink-3); margin: 0;
}

/* --- Fließtext: Basis = normaler zweispaltiger DOM-Fluss (No-JS-Fallback) --- */
.mag__flow {
  max-width: var(--measure-flow);
  margin: 0 auto;
  columns: 2;
  column-gap: var(--col-gap);
  column-fill: balance;
}
.mag__flow > p { margin: 0 0 var(--s-3); text-wrap: pretty; }

/* JS-verbessert: exakte, per Pretext gemessene Spaltenhöhe (kein Rebalance-Ruckeln) */
.mag__flow[data-enhanced="true"] { column-fill: auto; }

/* Initiale */
.mag__flow > p:first-of-type::first-letter {
  font-family: var(--font-serif); font-weight: 600;
  float: left; font-size: 3.4em; line-height: .82;
  padding: 6px 10px 0 0; color: var(--t-accent);
}

/* --- Bild mit Textumfluss --- */
.mag__figure {
  float: right;
  width: min(46%, 280px);
  margin: 4px 0 var(--s-3) var(--s-4);
  shape-outside: inset(0 0 0 var(--s-4));
}
.mag__art {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper);
}
.mag__caption {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.45;
  color: var(--t-ink-3); margin: var(--s-2) 0 0;
}

/* --- Fuß: eine primäre Aktion --- */
.mag__foot {
  max-width: var(--measure); margin: var(--s-7) auto 0;
  padding-top: var(--s-4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  justify-content: space-between;
}
.mag__note {
  font-family: var(--font-sans); font-size: 13px; color: var(--t-ink-3); margin: 0;
}
.mag__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-4);
  background: var(--t-accent-interactive); color: var(--t-fg-on-accent);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  text-decoration: none; border-radius: 8px;
  transition: background .15s ease;
}
.mag__cta:focus-visible {
  outline: 2px solid var(--t-accent); outline-offset: 3px;
}
@media (hover: hover) {
  .mag__cta:hover { background: var(--t-accent-hover); }
}

/* --- Mobil: eine Spalte, 16px Rand, kein Querscroll --- */
@media (max-width: 640px) {
  .mag__flow { columns: 1; }
  .mag__figure { float: none; width: 100%; margin: 0 0 var(--s-4); shape-outside: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}