/* Schriften lokal eingebunden (keine Verbindung zu Google, DSGVO-freundlich) */
@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #f4f4f4;
  --muted: #9a9a9a;
  --faint: #5c5c5c;
  --line: #262626;
  --glow-1: rgba(151, 71, 255, 0.55);
  --glow-2: rgba(98, 36, 214, 0.38);
  --display: 'Unbounded', 'Arial Black', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Coming-Soon-Seite */

.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.no-webgl #fog {
  display: none;
}

.no-webgl {
  background: radial-gradient(circle at 50% 45%, #1b1b1b 0%, #080808 35%, #000 70%);
}

/* feines Filmkorn über dem Hintergrund, unter dem Inhalt */
.home::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay; /* Korn nur auf den helleren Nebelstellen, Schwarz bleibt schwarz */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  /* Titel, Logo und Status bilden eine zentrierte Gruppe, Rechtliches sitzt unten */
  grid-template-rows: 1fr auto auto auto 1.4fr auto;
  padding: clamp(1.75rem, 6vh, 4rem) 16px clamp(1rem, 3vh, 1.75rem);
  text-align: center;
}

.page > header {
  grid-row: 2;
}

.title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 7.6vw, 5.25rem);
  line-height: 1;
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* gleicht das Tracking hinter dem letzten Buchstaben aus */
  color: #fff;
  text-shadow: 0 0 24px #000, 0 0 48px #000;
  animation: title-in 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 3D-Glanz: ein Licht folgt der Maus über den Schriftzug (main.js setzt --lx, --ly, --glare).
   In Ruhe (--glare: 0) ist die Schrift rein weiß wie ohne Effekt. Nur wo der Browser
   Text-Clipping und color-mix kann, sonst bleibt die normale weiße Schrift. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) and (color: color-mix(in srgb, red 50%, blue)) {
  .title {
    --lx: 50%;
    --ly: 30%;
    --glare: 0;
    color: transparent;
    text-shadow: none; /* läge sonst über der Füllung */
    background-image:
      /* schmaler Reflexstreifen wie auf Chrom, sitzt am Licht */
      linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) calc(var(--lx) - 7%),
        rgba(255, 255, 255, calc(var(--glare) * 0.95)) var(--lx),
        rgba(255, 255, 255, 0) calc(var(--lx) + 7%)
      ),
      /* leichte Schattierung nach unten gibt Tiefe */
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, calc(var(--glare) * 0.28)) 100%),
      /* Grundlicht: hell nahe am Licht, silbern weiter weg */
      radial-gradient(
        ellipse 55% 190% at var(--lx) var(--ly),
        #fff 0%,
        #fff 12%,
        color-mix(in srgb, #fff, #d4d4d4 calc(var(--glare) * 100%)) 38%,
        color-mix(in srgb, #fff, #aaaaaa calc(var(--glare) * 100%)) 72%,
        color-mix(in srgb, #fff, #8c8c8c calc(var(--glare) * 100%)) 100%
      );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.stage {
  grid-row: 3;
  position: relative;
  height: clamp(240px, 50svh, 520px);
}

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(140px, min(38vw, 34svh), 270px);
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 14px var(--glow-1)) drop-shadow(0 0 46px var(--glow-2));
  animation: logo-in 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* Lichtkante, die beim Woosh über die Logoform wandert (logo.js) */
.logo-shine {
  fill: #f7f0ff;
}

/* ASCII-Fassung des Logos für den Woosh-Übergang; Größe setzt logo.js */
.logo-ascii {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 8px var(--glow-1)) drop-shadow(0 0 30px var(--glow-2));
}

.foot {
  grid-row: 6;
  padding-top: 1.5rem;
}

.status {
  grid-row: 4;
  margin-top: clamp(0.25rem, 2vh, 1.25rem);
  font-size: clamp(0.8rem, 2.4vw, 0.95rem);
  letter-spacing: 0.55em;
  padding-left: 0.55em;
  color: var(--fg);
  text-shadow: 0 0 12px #000, 0 0 24px #000;
}

.cursor {
  display: inline-block;
  margin-left: -0.3em;
  animation: blink 1.1s steps(1) infinite;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}

.legal-nav a {
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
  color: var(--fg);
}

a:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 4px;
}

@keyframes title-in {
  from {
    opacity: 0;
    letter-spacing: 0.55em;
    padding-left: 0.55em;
    filter: blur(6px);
  }
}

@keyframes logo-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .title {
    letter-spacing: 0.2em;
    padding-left: 0.2em;
  }
  .status {
    letter-spacing: 0.4em;
    padding-left: 0.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title,
  .logo,
  .cursor {
    animation: none;
  }
}

/* ------------------------------------------------------------ Fehlerseiten (Plesk: error_docs/) */

.error-home {
  display: inline-block;
  border-radius: 50%;
}

.error-logo {
  display: block;
  width: clamp(56px, 9vw, 84px);
  height: auto;
  filter: drop-shadow(0 0 10px var(--glow-1)) drop-shadow(0 0 30px var(--glow-2));
  transition: transform 0.4s ease;
}

.error-home:hover .error-logo,
.error-home:focus-visible .error-logo {
  transform: scale(1.06);
}

.stage--error {
  height: auto;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(1.25rem, 3vh, 2rem);
  padding: clamp(1.5rem, 7vh, 4.5rem) 0;
}

.error-code {
  font-size: clamp(4.5rem, 22vw, 11rem);
  letter-spacing: 0.12em;
  padding-left: 0.12em;
}

.stage--error .status {
  grid-row: auto; /* steht hier im Block statt in der Seitenzeile 4 */
  margin-top: 0;
}

.back-link {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--fg);
  border-color: var(--fg);
}

/* ------------------------------------------------------------ Rechtstexte */

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 5rem) 16px 4rem;
  font-size: 0.9rem;
  color: #d6d6d6;
}

.legal-home {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  color: #fff;
  text-decoration: none;
  margin-bottom: clamp(2rem, 7vh, 4rem);
}

.legal h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 2rem;
}

.legal h2 {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.5rem 0 0.75rem;
}

.legal p,
.legal ul {
  margin-bottom: 1rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal a {
  text-underline-offset: 3px;
}

.legal .note {
  border-left: 2px solid var(--line);
  padding-left: 1rem;
  color: var(--muted);
}

.legal footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--faint);
}