/* Basis: Reset, Grundflaeche, Fokus, Skip-Link, Bewegungs-Not-Aus, Utilities. */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Sprungziele duerfen nicht unter dem klebenden Kopf verschwinden (WCAG 2.4.11). */
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-weight: 400;
  /* 16px Basis wie im Claude-Design (dort ohne Angabe); alle Grade der
     Typo-Tabelle sind rem-basiert und beziehen sich darauf. */
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: hidden wuerde position: sticky im Kopf aushebeln. */
  overflow-x: clip;
}

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--volt); text-decoration: none; }
address { font-style: normal; }
table { border-collapse: collapse; }

::selection { background: var(--volt); color: var(--obsidian); }

/* Ein Fokusring fuer alles Bedienbare, 3px Volt mit 2px Abstand. */
:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip-Link: unsichtbar, bis er Fokus bekommt. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  padding: 12px 16px;
  background: var(--volt);
  color: var(--obsidian);
  font-weight: 600;
}
.skip:focus-visible { left: 8px; top: 8px; }

/* Utilities */
.container {
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}
.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;
}
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--volt);
}
.eyebrow--mist { color: var(--mist); }
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.96;
}
.volt { color: var(--volt); }
/* Alle Fliesstexte mit ausgeglichenem Umbruch, wie im Claude-Design vorgegeben. */
p, li, dd, dt, figcaption, blockquote, .pretty { text-wrap: pretty; }

/* Reveal: wartende Elemente sind unsichtbar, bis das JS sie freigibt.
   Ohne JS (Klasse kein-js) und bei reduzierter Bewegung ist alles sofort da. */
[data-auf="wartet"] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity var(--t-auf) ease-out,
    transform var(--t-auf) ease-out,
    filter var(--t-auf) ease-out;
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-auf="da"] {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--t-auf) ease-out,
    transform var(--t-auf) ease-out,
    filter var(--t-auf) ease-out;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.kein-js [data-auf] { opacity: 1; transform: none; filter: none; transition: none; }

/* Not-Aus fuer jede Bewegung. Transitionen auf 0s, nicht 0.01ms: mit 0.01ms
   transitioniert jedes Element (transition-property: all) auch die geerbte
   visibility der Schublade, sie bleibt einen Frame lang "hidden", der Fokus kann
   nicht hinein und Escape trifft ins Leere. Gemessen am 04.09.2026. Kein Skript
   wartet hier auf transitionend, 0s ist deshalb sicher. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  [data-auf] { opacity: 1; transform: none; filter: none; }
  [data-parallax] { transform: none !important; }
}