/* Tokens aus docs/Guidelines_august2026/design-system.md v2.0 */
:root {
  --bg-light: #f8fbfb;
  --bg-dark: #2a2d2e;
  --bg-dark-soft: #3a3d3e;
  --text-primary: #1a1a1a;
  --text-secondary: #6b6b65;
  --text-on-dark: #f8fbfb;
  --teal-500: #37e5c0;
  --teal-100: #c6f7ea;
  --border-light: #e8e8e8;

  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-light);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
  position: relative;
}

/* Layer: Grain, einmal gerastert, statisch */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 2;
}

/* Layer: Glows. Teal ist Fläche, nie Text (design-system §1.2) */
.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(clamp(40px, 8vw, 90px));
  pointer-events: none;
  z-index: 0;
}

.glow--warm {
  width: clamp(300px, 45vw, 640px);
  height: clamp(300px, 45vw, 640px);
  background: #ffffff;
  opacity: 0.8;
  top: 12%;
  left: 18%;
}

.glow--teal {
  width: clamp(220px, 34vw, 480px);
  height: clamp(220px, 34vw, 480px);
  background: var(--teal-500);
  opacity: 0.14;
  bottom: 8%;
  right: 14%;
}

/* Inhalt: komplett zentriert gestapelt (Entscheidung #141) */
.stage {
  position: relative;
  z-index: 3;
  flex: 1;
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.25rem, 3.5vh, 2rem);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2.5rem);
}

.logo {
  width: clamp(220px, 42vw, 380px);
  height: auto;
}

.logo path,
.logo rect {
  fill: var(--text-primary);
}

.headline {
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 4.25rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.lead {
  font-weight: 400;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  max-width: 34rem;
  text-wrap: balance;
}

/* CTA-Pill: dunkle Fläche, helle Schrift; Interaktionsfarbe ist Dunkelgrau */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.pill:hover {
  background: var(--bg-dark-soft);
}

.pill:focus-visible {
  outline: 2px solid #16a98a; /* teal-700: Focus-Ring */
  outline-offset: 3px;
}

.pill__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Breite fixieren, damit der Scramble-Effekt das Layout nicht bewegt */
  font-variant-ligatures: none;
}

.footer {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 1.25rem;
  text-align: center;
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .pill {
    transition: none;
  }
}