/* Grundstil: Reset, Typografie, Layout-Helfer, Fokus, Glass-Rückfall */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-top) + var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-heading); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
p { margin: 0; text-wrap: pretty; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text-hover); }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ember-200); color: var(--navy-900); }

/* Tastatur-Fokus: überall sichtbar */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 3px; border-radius: var(--radius-xs); }

/* Überschriften-Skala (px-Werte aus den Tokens sind die Maxima, mobil skaliert clamp) */
h1, .t-h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, var(--fs-h1)); line-height: var(--lh-snug); letter-spacing: var(--ls-display); }
h2, .t-h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, var(--fs-h2)); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
h3, .t-h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, var(--fs-h3)); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
h4, .t-h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em; font-weight: var(--fw-semibold); }
.t-display, .t-display-xl, .t-h1, .t-h2, .t-h3 { font-weight: var(--fw-heading); }
.t-display { font-size: clamp(2.75rem, 1.6rem + 5.2vw, var(--fs-display)); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-display-xl { font-size: clamp(3rem, 1.5rem + 6.6vw, var(--fs-display-xl)); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-lead { font-size: clamp(1.0625rem, 1rem + .3vw, var(--fs-lead)); line-height: var(--lh-relaxed); }
.t-small { font-size: var(--fs-small); }
.t-caption { font-size: var(--fs-caption); }
.t-mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-muted); }

/* Layout */
.container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) / 2); }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.grid { display: grid; gap: var(--grid-gap, var(--space-6)); }

/* Icons (SVG-Sprite) */
.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; }

/* Hilfsklassen */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: 1000;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  background: var(--navy-900); color: var(--text-on-inverse); font-weight: var(--fw-semibold);
  transform: translateY(-200%); transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: none; color: var(--text-on-inverse); }

/* Glass-Rückfall für Browser ohne backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface-glass: rgba(255, 255, 255, .94); --surface-glass-strong: rgba(255, 255, 255, .98); --surface-header: rgba(255, 255, 255, .96); --surface-header-solid: rgba(255, 255, 255, .98); }
}

/* Druckansicht: nur der Inhalt, schwarz auf weiß (Rechtstexte werden oft gedruckt oder als PDF gespeichert) */
@media print {
  .site-header, .mobile-menu, .site-footer, .skip-link, .toast-region, .prose__toc { display: none !important; }
  html { scroll-padding-top: 0; }
  body { display: block; min-height: 0; }
  main { padding-top: 0 !important; }
  body, body * { background: transparent !important; color: CanvasText !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .section { padding-block: 0; }
  .prose { max-width: none; font-size: 11pt; line-height: 1.5; }
  .prose a { text-decoration: underline; }
  .card--tint, .facts { border: 1px solid CanvasText; }
  .prose h2, .prose h3 { break-after: avoid; }
}