/* ============================================================
   base.css — Reset, Typo, Layout-Primitives, Progressive Enhancement
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;            /* verhindert Seitwärts-Scroll, ohne sticky zu brechen */
  /* Scrollbalken-Platz IMMER reservieren: verhindert das kurze „Zusammenziehen"
     der Seite beim Seitenwechsel/Laden (Scrollbalken erscheint/verschwindet)
     sowie Layout-Sprünge bei geöffneten Modals/Consent-Sperre. */
  scrollbar-gutter: stable;
}
/* Lenis übernimmt das Scrollen, wenn aktiv */
html.lenis, html.lenis body { height: auto; }
html.has-lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
  overflow-wrap: break-word;   /* Sicherheit: lange Wörter brechen statt abzuschneiden */
}

/* --- Layout-Primitives --- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: clamp(3rem, 1.5rem + 6vw, 6rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--brand-600);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad-accent); border-radius: 2px; }
.section-title { font-size: var(--fs-h2); margin-top: .6rem; }
.section-lead { font-size: var(--fs-lead); color: var(--text-soft); max-width: 60ch; margin-top: 1rem; }
.text-soft { color: var(--text-soft); }

/* --- Grain / Noise (rein CSS, dezent) --- */
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Progressive Enhancement: Reveal-Startzustände nur mit JS --- */
.js [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1),
    clip-path .55s cubic-bezier(.22, .61, .36, 1);
}
.js [data-reveal="fade-up"] { transform: translate3d(0, 32px, 0); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="clip"] { clip-path: inset(0 0 100% 0); transform: translate3d(0, 24px, 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Clip-Reveal: nur diese Variante clippt (sonst würden hochhovernde Buttons oben abgeschnitten) */
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.js .reveal-line { overflow: hidden; }
.js .reveal-line > * { display: inline-block; }

/* Wort-/Zeilen-Split (text-reveal) — Padding gibt Ober-/Unterlängen
   (z. B. ä-Punkte, g) Platz, damit die overflow-Maske sie nicht abschneidet. */
.split-line { display: block; overflow: hidden; padding-block: 0.2em; margin-block: -0.2em; }
.split-word { display: inline-block; padding-inline: 0.04em; margin-inline: -0.04em; }
.js .reveal-line { padding-block: 0.2em; margin-block: -0.2em; }

.no-scroll { overflow: hidden; }

/* --- Reduced Motion: alles sofort, keine großen Bewegungen --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sichtbar nur für Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 200;
  background: var(--surface); color: var(--brand); padding: .7rem 1.1rem;
  border-radius: var(--r-sm); box-shadow: var(--sh-md); font-weight: 700;
}
.skip-link:focus { top: 1rem; }