/* ==========================================================================
   Grundlagen: Reset, Schriften, Typografie, Raster, Zugaenglichkeit
   ========================================================================== */

/* ---------- Schriften, lokal ausgeliefert ----------
   Zwei variable Dateien statt sieben Kopien. Die alte Fassung lieferte
   fuenfmal dieselbe Inter-Datei unter verschiedenen Namen aus, das waren
   rund 215 kB unnoetige Uebertragung pro Erstaufruf. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2-variations'),
       url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations'),
       url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
::selection { background: var(--red-500); color: #fff; }

/* ---------- Fokus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--red-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; top: -100px; left: var(--pad-x); z-index: 1200;
  background: var(--red-500); color: #fff; padding: .75rem 1.25rem;
  border-radius: var(--radius); font-size: .875rem; font-weight: 600;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: 1rem; }

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

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  /* Lange deutsche Komposita duerfen auf schmalen Geraeten notfalls umbrechen. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tighter); line-height: 1.02; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--text); }
/* Es wird bewusst keine kursive Schnitt-Datei ausgeliefert. Ohne diese Regel
   wuerde der Browser eine schiefgestellte Faelschung zeichnen. */
em, i, cite, address { font-style: normal; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 400;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--red-400);
}
.eyebrow::before {
  content: ''; width: 1.75rem; height: 1px; background: currentColor; opacity: .55;
}
.eyebrow--plain::before { display: none; }
.eyebrow--dim { color: var(--text-mute); }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--text-dim); font-weight: 300; }
.muted { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.mono { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em; }
.accent { color: var(--red-400); }

.chrome-text {
  background: var(--chrome-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Raster ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.section {
  position: relative; padding-block: var(--section-y);
  /* Die dekorativen Lichtflecken sind breiter als der Bildschirm und wuerden
     sonst das Dokument seitlich aufziehen. clip statt hidden, damit kein
     zusaetzlicher Scrollbereich entsteht. */
  overflow-x: clip;
}
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section > .wrap { position: relative; z-index: var(--z-content); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head > * + * { margin-top: 1.125rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

.grid { display: grid; gap: var(--gap-3); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.stack > * + * { margin-top: var(--gap-2); }
.stack-lg > * + * { margin-top: var(--gap-3); }

@media (max-width: 62rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Flaechen und Trenner ---------- */
.band { background: var(--ink-850); }
.band--deep { background: var(--ink-800); }
.hairline { height: 1px; background: var(--line); border: 0; }

.mesh {
  position: absolute; inset: 0; z-index: var(--z-scene); pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%);
  opacity: .7;
}
.glow-red {
  position: absolute; z-index: var(--z-scene); pointer-events: none;
  width: 46rem; height: 46rem; border-radius: 50%;
  background: radial-gradient(circle, var(--red-glow) 0%, transparent 62%);
  filter: blur(30px); opacity: .5;
}

/* ---------- Bilder ---------- */
.figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--ink-700); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--4x3 { aspect-ratio: 4 / 3; }
.figure--3x4 { aspect-ratio: 3 / 4; }
.figure--3x2 { aspect-ratio: 3 / 2; }
.figure--16x9 { aspect-ratio: 16 / 9; }
/* Ein Tagesfoto in voller Saettigung sprengt die dunkle Anmutung. Leicht
   zurueckgenommen fuegt es sich ein, beim Darueberfahren kommt es zurueck. */
.figure--photo img {
  filter: saturate(.78) contrast(1.05) brightness(.9);
  transition: filter .8s var(--ease-out), transform 1.2s var(--ease-out);
}
.figure--photo:hover img { filter: none; transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) { .figure--photo:hover img { transform: none; } }

.figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(225,27,34,.10) 0%, transparent 45%, rgba(6,7,10,.55) 100%);
}

/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}