/* ============================================================
   CORE BASE — Reset, Typografie, Layout-Primitive
   Nutzt ausschließlich Tokens aus tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p  { max-width: var(--w-prose); }

a { color: inherit; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--c-brand); color: var(--c-brand-ink); }

/* ---------- CONTAINER-PRIMITIVE ---------- */
.container       { width: min(100% - 2 * var(--gutter), var(--w-content)); margin-inline: auto; }
.container-wide  { width: min(100% - 2 * var(--gutter), var(--w-wide));    margin-inline: auto; }
.container-prose { width: min(100% - 2 * var(--gutter), var(--w-prose));   margin-inline: auto; }
.full-bleed      { width: 100%; }

/* ---------- SEKTIONEN ---------- */
.section        { padding-block: var(--section-pad); }
.section-stage  { padding-block: var(--section-pad-stage); }
.section-dark   { background: var(--c-bg-dark); color: var(--c-ink-invert); }
.section-alt    { background: var(--c-bg-alt); }
.section-brand  { background: var(--c-brand); color: var(--c-brand-ink); }

/* Kicker: kleine Overline über Headlines */
.kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-brand);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-sm);
}
.kicker::before {
  content: "";
  width: 2.2em; height: 1px;
  background: currentColor;
}
.section-dark .kicker, .section-brand .kicker { color: var(--c-accent); }

/* ---------- GRID ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}
.grid > * { grid-column: span 12; }
@media (min-width: 768px) {
  .col-6  { grid-column: span 6; }
  .col-4  { grid-column: span 4; }
  .col-8  { grid-column: span 8; }
  .col-5  { grid-column: span 5; }
  .col-7  { grid-column: span 7; }
  .col-3  { grid-column: span 3; }
}

/* Asymmetrisches Editorial-Split (Text | Medien) */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); }
  .split.split-reverse > :first-child { order: 2; }
  .split.split-reverse { grid-template-columns: 7fr 5fr; }
}

/* ---------- MEDIEN ---------- */
.media { overflow: clip; border-radius: var(--radius-md); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
/* <picture> darf die Größenkette Figur → Bild nicht unterbrechen */
.media picture, .parallax-media picture { display: contents; }
.media-hero     { aspect-ratio: var(--ratio-hero); }
.media-card     { aspect-ratio: var(--ratio-card); }
.media-portrait { aspect-ratio: var(--ratio-portrait); }
.media-wide     { aspect-ratio: var(--ratio-wide); border-radius: 0; }

/* ---------- UTILITIES ---------- */
.text-center { text-align: center; }
.measure { max-width: var(--w-prose); }
.muted { color: var(--c-ink-soft); }
.section-dark .muted, .section-brand .muted { color: color-mix(in srgb, currentColor 70%, transparent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100%; left: var(--gutter);
  background: var(--c-ink); color: var(--c-bg);
  padding: 0.6em 1.2em; z-index: calc(var(--z-nav) + 1);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 0; }