/* Nexus 41 — Tokens aus projectfiles/design-system-tokens.json
   Ein Theme: dark. Neben Schwarz und Weiss nur die fuenf Stufen des Aurora-Verlaufs. */

:root {
  /* Farbe */
  --ground-black:     #000000;
  --ink-white:        #ffffff;
  --rule-white:       #ffffff66;
  --aurora-green:     #59b745;
  --aurora-green-deep:#377443;
  --aurora-lime:      #93d33e;
  --aurora-yellow:    #dde428;
  --aurora-cyan:      #58b4eb;
  --aurora-blue:      #0073df;
  --on-aurora:        var(--ground-black);
  --on-aurora-blue:   var(--ink-white);

  /* Typografie */
  --font-display: "Helvetica Now Display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Helvetica Now Text", "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Abstaende */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-none: 0;

  /* Innenrand digitaler Flaechen */
  --pad: var(--space-4);
}

@media (min-width: 768px)  { :root { --pad: var(--space-12); } }
@media (min-width: 1200px) { :root { --pad: var(--space-16); } }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground-black);
  color: var(--ink-white);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* ----------------------------------------------------------------
   KeyVisual — die Flaeche selbst, nicht ein Hintergrund darunter.
   Oben ground-black, der Verlauf setzt ab stage-aurora-top (55%) ein
   und laeuft nach unten aus dem Format. Hellster Punkt (aurora-yellow)
   bei rund 65 Prozent der Breite.
   ---------------------------------------------------------------- */

.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--pad) var(--pad) var(--space-4);
  border-radius: var(--radius-none);
  background:
    linear-gradient(180deg, var(--ground-black) 34%, rgb(0 0 0 / 0) 66%),
    radial-gradient(95% 78% at 8% 112%,  var(--aurora-green)  0%, rgb(0 0 0 / 0) 78%),
    radial-gradient(72% 66% at 38% 104%, var(--aurora-lime)   0%, rgb(0 0 0 / 0) 74%),
    radial-gradient(56% 58% at 65% 96%,  var(--aurora-yellow) 0%, rgb(0 0 0 / 0) 70%),
    radial-gradient(60% 62% at 86% 102%, var(--aurora-cyan)   0%, rgb(0 0 0 / 0) 72%),
    radial-gradient(56% 68% at 104% 98%, var(--aurora-blue)   0%, rgb(0 0 0 / 0) 72%),
    var(--ground-black);
}

/* ---------- Lockup ---------- */
/* Die Datei traegt ihre Farbe selbst und wird nicht per CSS eingefaerbt.
   Mindesthoehe 26 px, Schutzraum 1/2 H wird hier im Layout gesetzt. */

.lockup a {
  display: inline-block;
  text-decoration: none;
}

.mark {
  height: clamp(26px, 2.48vw, 32px);
  width: auto;
}

/* ---------- Aussage ---------- */
/* Eine Aussage pro Flaeche, linksbuendig, Umbruch von Hand,
   vollstaendig im schwarzen Bereich ueber dem Verlauf. */

.statement {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 50%;
}

.claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 7.4vw, 6rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ink-white);
  max-width: 13em;
}

.subclaim {
  margin: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.4vw, 2rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink-white);
}

/* ---------- Fusszeile ---------- */
/* Steht auf dem Verlauf im Bereich Gruen — dort schreibt das System
   on-aurora (schwarz) vor. */

.foot {
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-16);
}

.copyright {
  margin: 0;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.3;
  color: var(--on-aurora);
}


/* ---------- Sprungmarke ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-white);
  color: var(--ground-black);
  border-radius: var(--radius-none);
  font-family: var(--font-text);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { left: var(--pad); top: var(--pad); }

:where(a):focus-visible {
  outline: 2px solid var(--ink-white);
  outline-offset: 4px;
}

/* Flache Fenster: eine Display-Stufe zurueck, damit die Aussage nicht in den
   Schutzraum des Lockups laeuft. */

@media (max-height: 700px) {
  .claim    { font-size: clamp(2rem, 5.2vw, 3.5rem); }
  .subclaim { font-size: clamp(1.125rem, 1.8vw, 1.5rem); margin-top: var(--space-4); }
}

/* ---------- Kleine Schirme ---------- */

@media (max-width: 560px) {
  .claim { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}