/* =========================================================================
   BASE — Schriften, Reset, Element-Defaults, Typografie.
   Nutzt ausschließlich Tokens aus tokens.css.
   ========================================================================= */

/* ---------- Selbst gehostete Schriften ---------- */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/source-sans-3-700.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/hanken-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/hanken-grotesk-700.woff2") format("woff2");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anker-Ziele landen unter dem Sticky-Header, Titel bleibt voll sichtbar.
   Header-Höhe + etwas Luft. Gilt für jeden Sprung (#krankheitsbilder etc.). */
:where([id]) { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;

  /* Deutsche Komposita sind laenger als der Bildschirm: "Weiterbildungsassistent"
     schob sich auf 340px als EIN Wort ueber den Rand. hyphens braucht ein
     korrektes lang-Attribut (siehe spz_language_attributes in functions.php);
     overflow-wrap ist das Netz fuer Woerter, die auch die Trennung nicht rettet. */
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); color: var(--color-heading); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

/* Nur fuer Screenreader sichtbar (z.B. Abschnittsueberschrift, die visuell
   schon durch den Hero gesetzt ist). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Lesebreite nur für Fließtext und unklassierte (Prosa-)Listen — NICHT für
   Layout-Listen wie .cards/.locations/.feature-list. */
p, blockquote { max-width: var(--measure); }
main :where(ul, ol):not([class]) { max-width: var(--measure); }
a { color: var(--color-link); text-underline-offset: 0.15em; }
a:hover { color: var(--color-link-hover); }

strong { font-weight: var(--weight-semibold); }
small { font-size: var(--step--1); }

blockquote {
  font-size: var(--step-1);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-brand-strong);
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-5);
}
blockquote footer {
  font-style: normal;
  font-size: var(--step--1);
  color: var(--color-muted);
  margin-top: var(--space-3);
}

/* ---------- Fokus (Barrierefreiheit) ---------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Flow: gleichmäßiger Vertikalrhythmus ---------- */
.flow > * + * { margin-top: var(--flow); }