/* ============================================================
   SportOrbit – Countdown-Seite

   Eigenständige, rein statische Seite. Kein Build, kein Backend.
   Die Farben sind 1:1 aus dem Hauptprojekt übernommen
   (Website/src/styles/tokens.css) – bitte dort und hier gleich halten.
   ============================================================ */

:root {
  /* --- Übernommen aus tokens.css --- */
  --bg-base:        #141721;
  --bg-surface:     #181e2a;
  --bg-card:        #1a2232;

  --brand:          #2B60DE;
  --accent:         #FF5500;
  --accent-hover:   #FF7733;

  --text-primary:   #d8dee6;
  --text-secondary: #a8bcd0;
  --text-muted:     #8192a6;

  --border:          #1e2840;
  --border-hairline: rgba(255, 255, 255, 0.06);

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius-md: 6px;
  --radius-lg: 10px;
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;

  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-base);
  /* Zwei weiche Lichtquellen: Marken-Blau oben, Orange unten rechts */
  background-image:
    radial-gradient(115vmin 85vmin at 50% 34%, rgba(43, 96, 222, 0.20), transparent 70%),
    radial-gradient(80vmin 60vmin at 82% 92%, rgba(255, 85, 0, 0.10), transparent 70%);
  background-attachment: fixed;
}

/* Vignette – zieht den Blick zur Mitte */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(120vmin 100vmin at 50% 45%, transparent 45%, rgba(10, 12, 18, 0.55) 100%);
}

/* --- Sternenfeld ----------------------------------------- */

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Globus ---------------------------------------------- */

/*
  Der Globus liegt jetzt IM Inhalt, mittig hinter dem Zaehlwerk - nicht mehr
  fix im Viewport. Vorher richtete er sich an der Fensterhoehe aus, das Logo
  aber am Inhalt; ab 768px Breite lag die Wortmarke deshalb auf der Kugel.
  Die Groesse ist zusaetzlich gedeckelt, damit die Kugel auch auf niedrigen
  Fenstern unter dem Logo bleibt (gemessen, siehe unten).
*/
.countdown-stage {
  position: relative;
}

.globe-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: min(60vmin, 480px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.5;
  animation: globe-breathe 11s ease-in-out infinite;
}

/* Ziffern vor der Kugel */
.countdown {
  position: relative;
  z-index: 1;
}

.globe-stage svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes globe-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.028); }
}

/* --- Inhalt ---------------------------------------------- */

.page {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  padding: 48px 20px;
  text-align: center;
  animation: rise-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.logo {
  width: min(340px, 72vw);
  height: auto;
  /* Der groessere Abstand nach unten haelt die Wortmarke frei vom Globus -
     zusammen mit der gedeckelten Kugelgroesse bleibt selbst der weiche
     Atmosphaeren-Rand darunter (nachgemessen ueber neun Fenstergroessen). */
  margin: 0 auto 56px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.55));
}

/* Wortmarke in der Display-Schrift der Hauptseite */
.logo text {
  font-family: var(--font-display);
  font-weight: 900;
}

.eyebrow {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 26px rgba(255, 85, 0, 0.35);
}

/* --- Countdown ------------------------------------------- */

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1.4vw, 14px);
  margin-bottom: 34px;
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(68px, 17vw, 150px);
  padding: clamp(10px, 2.2vw, 20px) 6px;

  background: linear-gradient(180deg, rgba(26, 34, 50, 0.86), rgba(20, 23, 33, 0.80));
  border: 1px solid var(--border);
  border-top: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.40),
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Orangefarbene Akzentkante am oberen Rand jeder Kachel */
.tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
}

.value {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 9vw, 5.4rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: #f2f6fb;
  text-shadow: 0 0 30px rgba(43, 96, 222, 0.45);
}

/* Wird bei jedem Wertwechsel per JS neu gesetzt und startet die Animation neu */
.value.tick {
  animation: tick 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tick {
  0%   { transform: translateY(46%); opacity: 0; filter: blur(3px); }
  55%  { color: var(--accent-hover); }
  100% { transform: none; opacity: 1; filter: none; }
}

.label {
  font-size: clamp(0.6rem, 1.5vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sep {
  align-self: flex-start;
  margin-top: clamp(12px, 3vw, 30px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
  animation: sep-pulse 2s ease-in-out infinite;
}

@keyframes sep-pulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.6; }
}

/* --- Fußzeilen-Texte -------------------------------------- */

.launch-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 18px;
  padding: 9px 18px;

  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--text-secondary);

  background: rgba(24, 30, 42, 0.6);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.launch-date strong {
  color: var(--text-primary);
  font-weight: 600;
}

.launch-date .tz {
  color: var(--text-muted);
}

.launch-date .dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.55);
  animation: dot-pulse 2.4s ease-out infinite;
}

@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 85, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 85, 0, 0); }
}

.tagline {
  margin: 0;
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* --- Sprachumschalter ------------------------------------- */

/*
  Auswahlliste statt Knopfreihe: acht Sprachen als Knoepfe passen bei 390px
  nicht nebeneinander, die Liste bleibt dagegen unabhaengig von der Anzahl
  gleich breit. Ohne JavaScript ist sie leer (countdown.js baut die Optionen),
  deshalb startet sie verborgen; countdown.js setzt .is-ready.
*/
.lang-switch {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3;

  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;

  color: var(--text-muted);
  background: rgba(24, 30, 42, 0.6);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lang-switch.is-ready { display: inline-flex; }

.lang-switch__icon { flex: 0 0 auto; opacity: 0.8; }

.lang-select {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 3px 18px 3px 2px;

  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;

  color: var(--text-primary);
  background: transparent;
  /* Eigener Pfeil, damit die Liste in beiden Systemen gleich aussieht */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 7px top 52%, right 3px top 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.lang-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Die aufgeklappte Liste erbt die Systemfarben - dunkle Optionen auf hellem
   Grund waeren sonst je nach Betriebssystem unlesbar. */
.lang-select option {
  color: #101520;
  background: #f2f5f9;
}

/* --- Instagram-Link --------------------------------------- */

.social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 7px 15px;

  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-decoration: none;

  background: rgba(24, 30, 42, 0.5);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.social:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(26, 34, 50, 0.75);
}

.social:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.social svg {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* --- Impressum-Link --------------------------------------- */

/*
  Pflichtangabe, deshalb dauerhaft sichtbar - aber bewusst zurueckhaltend:
  klein, gedaempft, unten in der Ecke statt mittig im Inhalt.
  Farbe ist --text-muted und NICHT weiter abgedunkelt oder mit opacity
  gedaempft: gemessen liegt der Kontrast damit bei 5,2:1 gegen den
  Seitengrund, also ueber der AA-Schwelle von 4,5:1. "Unauffaellig" darf
  nicht "unlesbar" heissen.
*/
.impressum-link {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 3;

  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.impressum-link:hover {
  color: var(--text-secondary);
  border-bottom-color: var(--text-muted);
}

.impressum-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Impressum-Seite -------------------------------------- */

/* Eigene Seite, gleiche Farben und Schriften wie der Countdown. body zentriert
   den Inhalt bereits, hier wird nur die Textspalte begrenzt und links
   ausgerichtet - zentrierter Fließtext wäre schlecht lesbar. */
.legal {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  text-align: left;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.legal .legal__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 34px;
}

.legal h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 30px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-hairline);
}

.legal p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.legal a { color: #7aa7ff; }

.legal__zurueck {
  display: inline-block;
  margin-top: 34px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
}
.legal__zurueck:hover { color: var(--text-primary); }

/* Zustand nach Ablauf des Countdowns – von countdown.js gesetzt */
.page.is-live .eyebrow {
  color: var(--accent-hover);
}

/* --- Barrierefreiheit ------------------------------------- */

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

/* --- Kleine Bildschirme ----------------------------------- */

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

  .countdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 340px;
    margin-inline: auto;
  }

  .tile { width: 100%; }

  .lang-switch {
    top: 12px;
    right: 12px;
  }

  .impressum-link {
    right: 12px;
    bottom: 10px;
  }
}

/* --- Reduzierte Bewegung ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .globe-stage,
  .sep,
  .launch-date .dot,
  .page {
    animation: none !important;
  }

  .value.tick { animation: none !important; }
}