/* =============================================================================
   base.css — Reset, Grundtypografie, Fokus, Reveal-Basiszustände
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anker-Sprünge dürfen nicht unter dem fixierten Header landen */
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
  background-color: var(--c-bg);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Horizontales Scrollen ist auf dieser Seite immer ein Fehler */
  overflow-x: clip;
}

/* Wenn das Fullscreen-Menü offen ist, wird der Hintergrund festgestellt */
body[data-menu-open="true"] { overflow: hidden; }

img,
picture,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; cursor: pointer; }

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

a {
  color: inherit;
  text-decoration: none;
}

hr {
  border: 0;
  border-top: var(--b-hair);
}

/* ---------------------------------------------------------------------------
   Überschriften — die konkrete Größe setzt jeweils die Sektion.
   Hier nur die gemeinsame Charakteristik.
   ------------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { text-wrap: pretty; }

::selection {
  background-color: var(--c-accent);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Fokus — sichtbar, kontraststark, überall gleich. WCAG 2.2 (2.4.11/2.4.13).
   :focus-visible statt :focus, damit Mausklicks keinen Ring erzeugen.
   ------------------------------------------------------------------------ */
:focus { outline: none; }

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

/* Auf sehr dunklen Flächen zusätzlich ein dunkler Halo, damit der Ring
   niemals mit einem hellen Element verschmilzt. */
a:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 5px rgb(5 7 10 / 0.9);
}

/* ---------------------------------------------------------------------------
   Skip-Link
   ------------------------------------------------------------------------ */
.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skiplink);
  padding: var(--s-3) var(--s-5);
  background-color: var(--c-accent);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--e-out);
}

.skip-link:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   Nur für Screenreader
   ------------------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   REVEAL — Basiszustand für scroll-getriggerte Einblendungen.

   Wichtig für Zugänglichkeit und für den Fall "JS deaktiviert":
   Die Startopazität wird ausschließlich gesetzt, wenn <html> die Klasse
   `js` UND `motion` trägt. Ohne JS oder bei prefers-reduced-motion ist
   jeder Inhalt sofort und vollständig sichtbar.
   ------------------------------------------------------------------------ */
.js.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift, 18px), 0);
  transition:
    opacity   var(--d-reveal) var(--e-out) var(--reveal-delay, 0ms),
    transform var(--d-reveal) var(--e-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js.motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Zeilenweises Masken-Reveal (Hero, Sektionsüberschriften).
   Jede Zeile liegt in einem Overflow-Clip und fährt von unten ein. */
.line-mask { display: block; overflow: hidden; padding-block: 0.06em; }

/* Masken bewegen sich über ihren Innenteil — der Container selbst darf
   nicht zusätzlich verschoben werden, sonst summieren sich die Wege. */
.line-mask[data-reveal] { --reveal-shift: 0px; }

/* Staffelung über ein Datenattribut statt über style="".
   Grund: So kommt die Seite ohne 'unsafe-inline' in der style-src-Direktive
   der Content-Security-Policy aus. */
[data-delay="1"] { --reveal-delay: var(--delay-1); }
[data-delay="2"] { --reveal-delay: var(--delay-2); }
[data-delay="3"] { --reveal-delay: var(--delay-3); }
[data-delay="4"] { --reveal-delay: var(--delay-4); }
[data-delay="5"] { --reveal-delay: var(--delay-5); }
[data-delay="6"] { --reveal-delay: var(--delay-6); }
[data-delay="7"] { --reveal-delay: var(--delay-7); }
[data-delay="8"] { --reveal-delay: var(--delay-8); }

.line-mask > span {
  display: block;
  transform: translate3d(0, 105%, 0);
}

.js.motion .line-mask > span {
  transition: transform var(--d-cinema) var(--e-out) var(--reveal-delay, 0ms);
}

.js.motion .is-revealed .line-mask > span,
.js.motion .line-mask.is-revealed > span { transform: none; }

/* Ohne JS / ohne Motion: Zeilen stehen sofort an Ort und Stelle */
html:not(.js) .line-mask > span,
html:not(.motion) .line-mask > span { transform: none; }

/* ---------------------------------------------------------------------------
   Druckausgabe — die Seite muss auch auf Papier lesbar sein
   ------------------------------------------------------------------------ */
@media print {
  .gl-stage,
  .site-rail,
  .site-header,
  .hero__scroll-hint { display: none !important; }

  html, body { background: #fff; color: #000; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}