/* ============================================================
   BASE — Fonts (self-hosted), Reset, Layout-/Sektions-System,
   Typografie, A11y, Reveal-Gerüst. Referenziert NUR Tokens.
   ============================================================ */

/* ---------- FONTS (self-hosted, DSGVO: keine externen Requests) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-v22-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-v22-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- RESET ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip; /* Sicherheitsnetz gegen H-Scroll (clip statt hidden: erhält sticky) */
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select { font: inherit; }

ul[class], ol[class] { list-style: none; padding: 0; }

/* Anker landen unter dem sticky Header — Quelle: --header-h */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-2)); }

/* ---------- A11Y ---------- */
::selection { background: var(--green-200); color: var(--green-900); }

/* ---------- MARKEN-DETAILS (Mikrointeraktionen-Katalog) ---------- */
/* Schlanke Marken-Scrollbar (Standard-Syntax + WebKit-Fallback) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--green-500) transparent;
}
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--green-500);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* 2px-Scroll-Fortschritts-Haarlinie — CSS Scroll-Timeline, kein JS.
   Ohne Browser-Support unsichtbar; bewegt sich nur mit dem Scrollen
   (Position-Feedback, kein Autonomie-Motion → reduced-motion-tauglich). */
@supports (animation-timeline: scroll()) {
  body::before {
    content: "";
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow); /* leise Licht-Signatur */
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 90; /* über Header (50), unter Skip-Link (100) */
    pointer-events: none;
    animation: scroll-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes scroll-progress { to { transform: scaleX(1); } }
}

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

/* Skip-Link-Ziel: programmatisch fokussierbar, aber ohne Seiten-umspannenden Ring */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--primary);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-1); }

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

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--maxw-wide); }

/* Sektions-System: Abstand NUR über --section-y (CLAUDE.md-Regel) */
.sec {
  background: var(--surface);
  color: var(--text-primary);
}
.sec__inner { padding-block: var(--section-y); }
.sec--elevated { --surface: var(--bg-elevated); }

/* ---------- TYPOGRAFIE ---------- */
/* Display-Familie: EINE Sammelregel — neue Headline-Klassen HIER eintragen */
h1, h2, h3, h4,
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.display, h1 { font-size: var(--fs-display); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }

/* Eyebrow = Kategorie-Lead-in, IN die Headline integriert (Kundenwunsch 09.07.2026):
   KEIN Strich, kein separates Marker-Element — der Label hängt als kleiner,
   hochgestellter Vorspann dicht über der Headline und liest sich als deren
   Kategorie-Präfix. Abgrenzung rein über Größe/Gewicht/Farbe/Tracking: die
   Headlines sind via .caps ebenfalls uppercase, daher tragen der grüne
   --eyebrow-ink (statt --text-primary) + das weite Tracking die Unterscheidung.
   Reveal passiert mit dem Sektionskopf (.reveal) als Einheit — kein eigener
   Marker mehr, der einzeln einzeichnet. */
.eyebrow {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  margin-block-end: 0.4em;   /* schmiegt sich an die Headline (war --space-2) */
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.small { font-size: var(--fs-small); }
.muted { color: var(--text-muted); }

/* Fließtext: ch-Begrenzung — --maxw ist nur der Layout-Cap */
.prose { max-width: 65ch; }
.prose p + p { margin-block-start: var(--space-2); }
.prose .lead + p { margin-block-start: var(--space-3); }

a { color: var(--link); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

hr {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: var(--space-4);
}

/* ---------- REVEAL-GERÜST (JS setzt html.js + .is-in; ohne JS alles sichtbar) ----------
   Bewegungssprache (Katalog): Fade + Rise + Blur-Fokus (6px→0). Endzustand
   EXPLIZIT filter:none — sonst bleibt ein Dauer-Layer (bricht sticky).
   Varianten: data-reveal="left|right|zoom" (Einflug/Aufziehen statt Rise). */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease),
    filter var(--dur-reveal) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
html.js .reveal[data-reveal="left"] { transform: translateX(-40px); }
html.js .reveal[data-reveal="right"] { transform: translateX(40px); }
html.js .reveal[data-reveal="zoom"] { transform: scale(0.94); }
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- REDUCED MOTION (nicht verhandelbar) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}