/* ============================================================
   digitalantrieb / 02 - BASE
   Reset, Typografie-Grundlage, Fokus, Reduced Motion.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;              /* Lenis uebernimmt */
  background: var(--ink);
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lead-body);
  color: var(--on-stage);
  background: var(--stage);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: clip;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

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

/* --- Fokus: immer sichtbar, nie hinter dem Custom Cursor ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
  border-radius: var(--r-1);
}

/* Skip-Link, damit die Experience nicht zur Tastaturfalle wird */
.skip {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: calc(var(--z-loader) + 1);
  background: var(--signal);
  color: #fff;
  padding: 0.85rem 1.5rem;
  font: 600 var(--t-sm)/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform var(--d-l3) var(--e-out);
}
.skip:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }

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

/* ============================================================
   TYPOGRAFIE
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-xl);
  text-transform: uppercase;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.display--mega {
  font-size: var(--t-mega);
  letter-spacing: var(--track-mega);
  font-stretch: 118%;
}
.display--xxl { font-size: var(--t-xxl); }
.display--xl  { font-size: var(--t-xl); }
.display--lg  { font-size: var(--t-lg); letter-spacing: var(--track-lg); line-height: var(--lead-snug); }

/* Ein Wort als grafisches Element: Kontur statt Flaeche.
   Die Strichfarbe darf nicht currentColor sein: das loest gegen
   die eigene color auf, und die ist hier transparent. */
.hollow {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--on-stage);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px black) {
  .hollow { color: inherit; opacity: 0.35; }
}

.lede {
  font-size: var(--t-md);
  line-height: 1.42;
  letter-spacing: -0.012em;
  max-width: 34ch;
  text-wrap: pretty;
}

.body {
  max-width: 58ch;
  color: var(--on-stage-2);
  text-wrap: pretty;
}
.body + .body { margin-top: 1.1em; }

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--on-stage-2);
}

.index {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BILD-SYSTEM
   Alle Fotos laufen durch eine Gradierung, damit auch
   Platzhalter wie eine bewusste Bildstrecke wirken.
   data-grade="off" schaltet die Gradierung fuer finale Assets ab.
   ============================================================ */

.media {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  isolation: isolate;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter 1.1s var(--e-out), transform 1.2s var(--e-out);
}

/* Die Gradierung laeuft ueber eine Filterkette, nicht ueber
   mix-blend-mode. Bilder werden auf dieser Seite skaliert und
   verschoben; eine Transformation hebt das Element auf eine
   eigene Compositing-Ebene, und dort kann ein Blend gegen einen
   leeren Hintergrund rechnen und das Bild verschlucken.
   Ein Filter hat dieses Problem nicht. */
.media--duo img {
  filter: grayscale(1) contrast(1.06) sepia(0.62) hue-rotate(184deg) saturate(2.4) brightness(1.05);
}
.media--signal img {
  filter: grayscale(1) contrast(1.06) sepia(0.5) hue-rotate(338deg) saturate(1.7) brightness(1.02);
}
.media--neutral img { filter: grayscale(1) contrast(1.04) brightness(1.04); }

.media[data-grade="off"] img { filter: none; }

/* Faellt eine Bildquelle aus, traegt der Rahmen eine
   Markenflaeche. Die Komposition bleibt dadurch stehen. */
.media.is-empty { background: var(--drive); }
.media.is-empty img { display: none; }
.media.is-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 16px,
    color-mix(in srgb, #fff 14%, transparent) 16px 17px
  );
}

/* Farbe kehrt bei echter Aufmerksamkeit zurueck */
@media (hover: hover) and (pointer: fine) {
  a:hover .media img,
  .media--live:hover img { filter: grayscale(0) contrast(1.02); }
}

.media--fill { position: absolute; inset: 0; }

/* Seitenverhaeltnisse: bewusst ungewoehnlich, nie 16:9 ueberall */
.ar-portrait { aspect-ratio: 3 / 4.4; }
.ar-tall     { aspect-ratio: 2 / 3.2; }
.ar-square   { aspect-ratio: 1 / 1; }
.ar-wide     { aspect-ratio: 16 / 9; }
.ar-band     { aspect-ratio: 21 / 8; }

/* ============================================================
   REDUCED MOTION
   Die Seite bleibt vollstaendig. Nur die Bewegung geht.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }
  .media img { transition: none; }
}

html[data-motion="off"] [data-reveal],
html[data-motion="off"] [data-reveal-lines] > * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Ohne Bewegung darf kein Ausgangszustand stehen bleiben:
   keine halb geoeffneten Masken, keine Ueberzeichnung. */
html[data-motion="off"] .claim__media { clip-path: none; }
html[data-motion="off"] .claim__media img,
html[data-motion="off"] .hero__media img { transform: none; }