/* ═══════════════════════════════════════════════════════════════
   DarkNova [DNV] · Clan- und Rechtsseiten
   ---------------------------------------------------------------
   Aufbau nach dem Vorbild moderner Clan-Seiten: dunkler Grund mit
   feinem Raster und Sternenfeld, darüber große weiche Lichtkreise.
   Jeder Abschnitt beginnt mittig mit einer Plakette, darunter eine
   Überschrift, deren letztes Wort den Akzent trägt. Inhalte sitzen
   in Karten mit Symbolkästchen oben und einem Merkmal-Chip unten.

   Eine einzige Akzentfarbe trägt die Seite — Amethyst, die Farbe
   des Clans. Sie erscheint nur dort, wo sie etwas bedeutet:
   Plaketten, Symbole, Chips, das zweite Wort der Überschrift.

   Die Rechtsseiten ziehen ihr Aussehen komplett aus dieser Datei.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --grund: #0a0a10;
  --grund-tief: #07070c;
  /* Karten liegen als hauchdünner heller Schleier auf dem Grund,
     nicht als eigene Fläche — das hält die Tiefe zusammen. */
  --karte-grund: rgba(255, 255, 255, 0.022);
  --karte-grund-an: rgba(255, 255, 255, 0.04);
  --linie: rgba(255, 255, 255, 0.075);
  --linie-an: rgba(169, 126, 240, 0.35);

  --fg: #e8e6f2;
  --fg-hell: #ffffff;
  --leise: #8b87a3;
  --leise-tief: #6f6b86;

  --akzent: #a97ef0;
  --akzent-hell: #c9adf7;
  --akzent-tief: #7c4fd6;
  --akzent-schleier: rgba(169, 126, 240, 0.12);
  --akzent-rand: rgba(169, 126, 240, 0.28);

  --anzeige: 'Sora', system-ui, sans-serif;
  --text: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --breite: 74rem;
  --spalte: 62ch;

  --r-karte: 16px;
  --r-klein: 10px;
  --r-chip: 7px;
  --r-pille: 9999px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--fg);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--anzeige);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p {
  max-width: var(--spalte);
}

/* ── Der Hintergrund ─────────────────────────────────────────────
   Drei feste Ebenen hinter allem: Raster, Sternenfeld, Lichtkreise.
   Sie scrollen nicht mit — dadurch bleibt die Bewegung ruhig und
   der Browser muss nichts neu zeichnen. */

.himmel {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

#sternenfeld,
#blockfeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Die Würfel liegen vor den Sternen, aber hinter den Lichtwolken —
   so wirken sie als Schicht im Raum, nicht als Aufkleber. */
#blockfeld {
  z-index: 1;
}

.raster-schicht {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Zur Mitte hin sichtbar, zu den Rändern hin weg — sonst wirkt das
     Raster wie ein Gitter über der Seite statt wie Tiefe. */
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
}

.kern {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.kern--1 {
  top: -18rem;
  left: 50%;
  width: 52rem;
  height: 36rem;
  margin-left: -26rem;
  background: radial-gradient(circle, rgba(169, 126, 240, 0.34), transparent 68%);
  animation: atmen 13s ease-in-out infinite;
}

.kern--2 {
  bottom: -14rem;
  right: -12rem;
  width: 36rem;
  height: 36rem;
  background: radial-gradient(circle, rgba(124, 79, 214, 0.24), transparent 66%);
  animation: atmen 17s ease-in-out infinite reverse;
}

@keyframes atmen {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* ── Auftauchen beim Scrollen ────────────────────────────────────
   Gesteuert von js/nova.js. Der Ausgangszustand hängt an .js-an,
   damit ohne JavaScript alles schlicht sichtbar bleibt. */

.js-an .auf {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.js-an .auf.sichtbar {
  opacity: 1;
  transform: none;
}

/* ── Kopfnavigation ──────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem clamp(1rem, 3vw, 1.75rem);
  background: rgba(10, 10, 16, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linie);
}

.nav__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--fg-hell);
  white-space: nowrap;
}

.nav__marke span {
  color: var(--akzent);
}

/* Das Zeichen links: eine Nova als Marke, solange es kein Logo gibt.
   Drei Buchstaben wären in einem Kreis dieser Größe unleserlich. */
.nav__zeichen {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: var(--r-pille);
  background: linear-gradient(135deg, var(--akzent), var(--akzent-tief));
  box-shadow: 0 0 18px rgba(169, 126, 240, 0.45);
}

.nav__zeichen svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #150a20;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0 auto;
  font-size: 0.88rem;
}

.nav__links a {
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-klein);
  color: var(--leise);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.nav__links a:hover {
  color: var(--fg-hell);
  background: rgba(255, 255, 255, 0.05);
}

.nav__links a[aria-current] {
  color: var(--fg-hell);
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 62rem) {
  .nav__links {
    display: none;
  }
  .nav {
    justify-content: space-between;
  }
}

/* ── Knöpfe ──────────────────────────────────────────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-klein);
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.knopf--voll {
  background: linear-gradient(135deg, var(--akzent), var(--akzent-tief));
  color: #14091f;
  box-shadow: 0 0 26px rgba(169, 126, 240, 0.32);
}

.knopf--voll:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 38px rgba(169, 126, 240, 0.5);
}

.knopf--leer {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--linie);
  color: var(--fg);
}

.knopf--leer:hover {
  border-color: var(--akzent-rand);
  color: var(--akzent-hell);
}

.knopf--klein {
  padding: 0.5rem 0.95rem;
  font-size: 0.82rem;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.2rem;
}

/* ── Plakette ────────────────────────────────────────────────────
   Die kleine Kapsel über jeder Überschrift. Sie sagt, worum es im
   folgenden Abschnitt geht, bevor die Überschrift es ausspricht. */

.plakette {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-pille);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg);
}

.plakette svg {
  width: 0.95rem;
  height: 0.95rem;
  stroke: var(--akzent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* ── Kopfbereich ─────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 9vw, 6rem) 1.5rem 3.5rem;
}

.innen {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
}

.hero__titel {
  font-size: clamp(2.6rem, 7.5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 1.5rem 0 0;
}

.hero__titel span {
  display: block;
  background: linear-gradient(97deg, var(--akzent) 15%, var(--akzent-hell) 55%, #f0e6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 38px rgba(169, 126, 240, 0.4));
}

.hero__text {
  font-size: clamp(1rem, 1.9vw, 1.14rem);
  color: var(--leise);
  margin: 1.5rem auto 0;
  max-width: 52ch;
}

/* ── Zahlenreihe ─────────────────────────────────────────────── */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem 1rem;
  margin: 3.5rem auto 0;
  max-width: 52rem;
}

.zahl {
  text-align: center;
}

.zahl__wert {
  display: block;
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--akzent);
}

.zahl__label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--leise-tief);
}

/* ── Abschnitte ──────────────────────────────────────────────── */

.band {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 1.5rem;
}

/* Der weiche Lichtkreis hinter einem Abschnitt. Er sitzt hinter dem
   Inhalt und gibt der Fläche Tiefe, ohne selbst aufzufallen. */
.band__schein {
  position: absolute;
  top: 10%;
  left: 50%;
  width: min(46rem, 92%);
  height: 30rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 126, 240, 0.09), transparent 68%);
  pointer-events: none;
}

.band > .innen {
  position: relative;
  z-index: 1;
}

.kopf {
  text-align: center;
  margin-bottom: 3.25rem;
}

.kopf h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  margin: 1.1rem 0 0;
}

/* Das letzte Wort trägt die Akzentfarbe — es sagt, worum es geht. */
.kopf h2 em {
  font-style: normal;
  color: var(--akzent);
}

.kopf p {
  margin: 1rem auto 0;
  max-width: 54ch;
  color: var(--leise);
}

/* ── Karten ──────────────────────────────────────────────────── */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}

.raster--zwei {
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

.karte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--karte-grund);
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

/* Der Schein folgt dem Zeiger; ohne Zeiger sitzt er oben mittig. */
.karte::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(169, 126, 240, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.karte:hover,
.karte:focus-within {
  border-color: var(--linie-an);
  background: var(--karte-grund-an);
  transform: translateY(-2px);
}

.karte:hover::before,
.karte:focus-within::before {
  opacity: 1;
}

.karte > * {
  position: relative;
}

.karte__symbol {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--akzent-rand);
  border-radius: var(--r-klein);
  background: var(--akzent-schleier);
}

.karte__symbol svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--akzent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.karte h3 {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: var(--fg-hell);
}

.karte p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--leise);
}

/* Der Chip unten schließt die Karte ab und trägt die harte Angabe:
   Status, Anzahl, Zuständigkeit. */
.karte__chip {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--akzent-rand);
  border-radius: var(--r-chip);
  background: var(--akzent-schleier);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--akzent-hell);
  white-space: nowrap;
}

/* ── Liste ───────────────────────────────────────────────────── */

.liste {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 40rem;
  display: grid;
  gap: 0.6rem;
}

.liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  background: var(--karte-grund);
  text-align: left;
}

.liste li::before {
  content: '';
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.62rem;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 10px var(--akzent);
}

/* ── Fußzeile ────────────────────────────────────────────────── */

footer {
  position: relative;
  border-top: 1px solid var(--linie);
  background: var(--grund-tief);
  padding: 3.5rem 1.5rem 2rem;
}

.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  max-width: var(--breite);
  margin: 0 auto;
}

footer h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise-tief);
  margin: 0 0 0.9rem;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer li {
  margin-bottom: 0.5rem;
}

footer a {
  color: var(--leise);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.18s ease;
}

footer a:hover {
  color: var(--akzent-hell);
}

.fuss__unten {
  max-width: var(--breite);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--leise-tief);
}

/* ── Rechtstexte ─────────────────────────────────────────────────
   Ruhiger als der Rest: eine Spalte, kein Leuchten. Wer hier landet,
   sucht eine Auskunft und keine Atmosphäre. */

.recht {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem 5rem;
}

.recht h1 {
  font-size: clamp(2rem, 5.5vw, 3rem);
  margin-bottom: 1rem;
}

.recht .kicker,
.kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 0.75rem;
}

.recht h2 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}

.recht dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0;
  padding: 1.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--karte-grund);
  font-family: var(--mono);
  font-size: 0.84rem;
}

.recht dt {
  color: var(--leise);
}

.recht dd {
  margin: 0;
}

.recht ul {
  max-width: var(--spalte);
  padding-left: 1.1rem;
}

.recht li {
  margin-bottom: 0.45rem;
}

.recht a {
  color: var(--akzent-hell);
  text-underline-offset: 0.2em;
}

.recht a:hover {
  color: var(--akzent);
}

.hinweis {
  margin-top: 3rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--r-klein);
  background: var(--karte-grund);
  font-size: 0.9rem;
  color: var(--leise);
}

/* ── Barrierefreiheit ────────────────────────────────────────── */

a:focus-visible,
.knopf:focus-visible,
button:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 3px;
}

.ueberspringen {
  position: absolute;
  left: -9999px;
}

.ueberspringen:focus {
  left: 1rem;
  top: 1rem;
  z-index: 60;
  background: var(--akzent);
  color: #14091f;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-klein);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .kern {
    animation: none;
  }
  .js-an .auf {
    opacity: 1;
    transform: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}