/* =========================================================================
   base.css — Reset, Grundtypografie, globale Zustaende.
   Enthaelt keine Farbwerte, nur Token-Referenzen.
   ========================================================================= */

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

html {
  /* DIE SEITE WIRD SEITLICH GEKLAMMERT, und zwar HIER an der Wurzel.

     Auf dem body allein reicht es nicht: hidden macht aus dem Kasten einen
     scrollbaren Behaelter, den Skripte trotzdem verschieben koennen, und
     clip auf dem body wird nicht bis zum Sichtfeld durchgereicht.
     Nachgemessen: window.scrollTo(300, 0) ergab beides Mal rund 60 px
     Versatz, obwohl kein Balken zu sehen war.

     Gebraucht wird das, weil Deko absichtlich aus dem Bild laeuft —
     Filzstifte links, Pflanze rechts. Ihr Ueberstand soll abgeschnitten
     werden, nicht die Seite breiter machen. */
  overflow-x: clip;

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

/* Der Hintergrund liegt in ZWEI festen Lagen hinter allem, nicht als
   background auf dem body selbst. Zwei Gruende:

   1. Nur so laesst sich das Raster einzeln ausblenden (mask), ohne den
      Verlauf mitzunehmen — auf einer Flaeche ginge beides nur zusammen.
   2. "fixed" heisst: der Hintergrund steht beim Scrollen still. Der Inhalt
      wandert darueber hinweg wie hinter einer Scheibe. Mit background-
      attachment am body waere derselbe Effekt teurer, weil der Browser bei
      jedem Bild neu zeichnet.

   z-index: -1 setzt beide hinter den normalen Fluss. Sie fangen keine
   Klicks (pointer-events) und stehen fuer Hilfsmittel nicht im Weg. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Die Schattierung bleibt mitgeheftet: Sie ist der Raum, in dem die Seite
   liegt, und der bewegt sich nicht. */
body::before { background-image: var(--grund-verlauf); }

/* Das Raster dagegen gehoert zum SEITENANFANG und scrollt mit ihm weg —
   deshalb absolute statt fixed und eine feste Hoehe statt inset: 0.
   Begruendung am Token in tokens.css. */
body::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--muster-hoehe);
  background-image: var(--muster-raster);
  -webkit-mask-image: var(--muster-blende);
  mask-image: var(--muster-blende);
}

/* AUF DER STARTSEITE NICHT. Das globale Raster misst "die halbe Seite" und
   laeuft vom Seitenanfang nach unten aus — richtig fuer eine Unterseite, die
   oben mit Titel und Reitern beginnt. Die Startseite faengt mit einem
   bildschirmfuellenden Film an, darunter liegt der Werdegang, darunter der
   naechste Film: Ein Raster ueber die halbe Seitenhoehe endete dort mitten
   im Nichts, und im Werdegang waere es am unteren Rand schon fast weg.

   Der Werdegang bringt deshalb sein eigenes mit (werdegang.css), und das
   blendet an BEIDEN Kanten — ein Bereich zwischen zwei Filmen hat zwei
   Kanten, nicht eine. */
body.startseite::after { display: none; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-familie);
  font-size: var(--schrift-m);
  line-height: var(--zeile-fliess);
  font-weight: var(--gewicht-normal);
  -webkit-font-smoothing: antialiased;
  /* Siehe html weiter oben — dort sitzt die Klammer, hier steht sie nur
     noch der Vollstaendigkeit halber. */
  overflow-x: clip;

  /* BEZUGSPUNKT FUER DAS RASTER. Ohne das haengt body::after am
     Ausgangs-Containerblock, und der ist so gross wie das FENSTER, nicht
     wie die Seite: --muster-hoehe: 50% ergab 540 px auf einer 1579 px
     hohen Seite — ein Drittel statt der Haelfte. Mit position: relative
     rechnet die Prozentangabe gegen die Seite, so wie gemeint. */
  position: relative;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button { font: inherit; color: inherit; }

/* --- Fokus: immer sichtbar, nie wegoptimiert --------------------------- */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}
:focus:not(:focus-visible) { outline: none; }

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

/* --- Sprungmarke (erstes fokussierbares Element der Seite) -------------- */
.sprungmarke {
  position: absolute;
  top: var(--raum-4);
  left: var(--raum-4);
  z-index: var(--ebene-oben);
  transform: translateY(-200%);
  padding: var(--raum-3) var(--raum-5);
  background: var(--grund);
  color: var(--text);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-mittel);
  text-decoration: none;
  font-weight: var(--gewicht-mittel);
}
.sprungmarke:focus { transform: translateY(0); }

/* --- Platzhalter: unuebersehbar, damit nichts versehentlich live geht --- */
.platzhalter {
  padding: 0 var(--raum-2);
  border-bottom: var(--rand-stark);
  color: var(--akzent-tief);
  font-style: italic;
  font-weight: var(--gewicht-mittel);
}

/* --- Bewegungsreduktion: global, nicht pro Komponente ------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: var(--dauer-aus) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dauer-aus) !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Auftritte — die Gegenbewegung
   -------------------------------------------------------------------------
   Steht hier und nicht in hero.css, weil beide Bereiche sie benutzen:
   die Kopfzeile und der Inhalt der Buehne.

   Bedienelemente kommen von OBEN herunter und setzen sich. Das Medium
   steigt gleichzeitig von UNTEN herauf und blendet dabei aus Weiss auf.
   Alles laeuft weitgehend parallel und langsam: eine Geste, keine
   Abfolge.

   Bei prefers-reduced-motion greift die Abschaltung weiter oben in dieser
   Datei: alles steht sofort an seinem Platz.
   ========================================================================= */

@keyframes von-oben {
  from { opacity: 0; transform: translateY(var(--weg-bedienelement)); }
  to   { opacity: 1; transform: none; }
}

/* Das Medium steigt von unten und blendet dabei aus Weiss auf. Die
   Buehne darunter ist weiss, die Deckkraft des Mediums IST damit die
   Ueberblendung — ein zweites Element braucht es dafuer nicht.
   Zur Skalierung siehe .hero__medium in hero.css. */
@keyframes aus-weiss-von-unten {
  from { opacity: 0;
         transform: translateY(var(--weg-medium)) scale(var(--medium-uebergroesse)); }
  to   { opacity: 1; transform: none; }
}