/* ============================================================
   base.css — Fonts, Grundtypografie, Container, Utilities
   ============================================================ */

/* ---- Fonts: self-hosted WOFF2 (SIL OFL 1.1), kein CDN ---- */
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/barlow-condensed-700-italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---- Grundlagen ---- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-klein) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--nacht);
  background: var(--papier);
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-display); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { max-width: 68ch; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.55; }
.meta { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.02em; color: var(--grau); }

/* Slogan-Register: Barlow Cond Bold Italic Versalien (max. 1× pro Seite) */
.slogan {
  font-family: var(--font-display);
  font-weight: 700; font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rot);
}

a:not([class]) {
  color: var(--rot-tief);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-ui) var(--ease-out);
}
a:not([class]):hover { text-decoration-thickness: 2.5px; }

:focus-visible { outline: 3px solid var(--nacht); outline-offset: 2px; border-radius: var(--radius-s); }
.bg-dunkel :focus-visible { outline-color: var(--blau); }

::selection { background: var(--rot); color: var(--weiss); }

/* ---- Container ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Utilities ---- */
[hidden] { display: none !important; } /* hidden gewinnt immer gegen Komponenten-display */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--nacht); color: var(--weiss);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-s);
  z-index: 200; transition: top var(--t-ui) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

.bg-dunkel { background: var(--nacht); color: var(--licht); }
.bg-dunkel p { color: var(--licht); }
.bg-flaeche { background: var(--flaeche); }

/* Typografische Marken-Momente */
.punkt { color: var(--rot); }                 /* rote Satzpunkte in Display-Zeilen */
.bg-dunkel .punkt { color: var(--blau); }     /* auf dunklen Flächen: Datenblau */
.statement {
  font-size: var(--fs-statement);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.statement-klein {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.3;
}

/* Eyebrow-Kicker mit rotem Puls-Strich */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-kicker); font-weight: 600;
}
.section-kopf .eyebrow { margin-bottom: var(--s-3); color: var(--grau); }
.bg-dunkel .section-kopf .eyebrow { color: var(--nebel); }
.section-kopf-text { margin-top: var(--s-3); color: var(--grau); }
.bg-dunkel .section-kopf-text { color: var(--nebel); }

/* Abstands-Helfer (ersetzen Inline-Styles; Werte nur aus der Skala) */
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.eyebrow::before {
  content: ""; width: 18px; height: 2px; flex-shrink: 0;
  background: var(--rot); border-radius: 1px;
}

.zahlen { font-variant-numeric: tabular-nums; }

.text-zentriert { text-align: center; }

/* Platzhalter-Markierung (Prinzip: sichtbar offen statt plausibel gefüllt) */
.platzhalter {
  display: inline-block;
  background: repeating-linear-gradient(-45deg, #FFF3F3, #FFF3F3 8px, #FFE9E9 8px, #FFE9E9 16px);
  border: 1px dashed var(--rot-tief);
  color: var(--rot-tief);
  font-size: var(--fs-meta);
  padding: 2px 8px;
  border-radius: var(--radius-s);
}