/* =================================================================
   Coming Soon — Radsportmarke
   Sauberes CSS mit CSS-Variablen (Theme-gesteuert) + responsivem Layout.
   Farb-/Typo-/Abstands-Werte 1:1 aus dem Design-Handoff.
   ================================================================= */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* Sicherheitsnetz gegen horizontales Scrollen */
}

/* ---------- Theme-Tokens ----------
   Standard = Hell. [data-theme="dark"] überschreibt die Info-Spalte + Root.
   Das linke Medien-Panel bleibt bewusst immer dunkel. */
:root,
[data-theme="light"] {
  --bg:    #f2efe8;
  --ink:   #17140e;
  --sub:   #736c5e;
  --faint: #a29b8b;
  --hair:  rgba(23, 20, 14, 0.14);
  --hair2: rgba(23, 20, 14, 0.30);
  --accent:#8f4a34;
}

[data-theme="dark"] {
  --bg:    #121110;
  --ink:   #f0ece3;
  --sub:   #918b7d;
  --faint: #665f52;
  --hair:  rgba(240, 236, 227, 0.16);
  --hair2: rgba(240, 236, 227, 0.32);
  --accent:#cf8a5f;
}

/* ---------- Seiten-Layout: zwei Spalten ---------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
}

/* =================================================================
   LINKS: Medien-Panel
   ================================================================= */
.media {
  position: relative;
  overflow: hidden;
  background: #0f0d0b;         /* konstante dunkle Basis */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Echtes Video (später): füllt das Panel vollflächig */
.video,
.video-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Video-Platzhalter (CSS-animiert) ---- */
.vp-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #2a2118 0%, #171310 55%, #0c0a08 100%);
}
.vp-glow {
  position: absolute;
  border-radius: 50%;
}
.vp-glow--1 {
  left: -12%; top: -14%; width: 78%; height: 78%;
  background: radial-gradient(circle, rgba(206,124,58,0.60), rgba(206,124,58,0) 62%);
  filter: blur(44px);
  animation: drift1 24s ease-in-out infinite;
}
.vp-glow--2 {
  right: -16%; bottom: -16%; width: 82%; height: 82%;
  background: radial-gradient(circle, rgba(120,146,168,0.42), rgba(120,146,168,0) 60%);
  filter: blur(52px);
  animation: drift2 30s ease-in-out infinite;
}
.vp-glow--3 {
  left: 22%; top: 8%; width: 46%; height: 64%;
  background: radial-gradient(circle, rgba(233,196,150,0.30), rgba(233,196,150,0) 65%);
  filter: blur(38px);
  animation: drift2 21s ease-in-out infinite;
}
.vp-sweep {
  position: absolute;
  top: -20%; bottom: -20%; left: 0;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,244,230,0.5), transparent);
  animation: sweepLight 9s ease-in-out infinite;
}
.vp-grain {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* Scrim über dem Video für Lesbarkeit */
.scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.05) 32%,
    rgba(0,0,0,0.10) 60%,
    rgba(0,0,0,0.40) 100%);
}

/* ---- Marken-Block: Logo + Claim, oben links im Eck ---- */
.brand-block {
  position: absolute;
  left: 52px; top: 44px;
  z-index: 4;
}

/* ---- Wortmarke (STAEZE-Logo, weiß) ---- */
.wordmark {
  width: 168px;                /* Breite des Logos */
  animation: logoFloat 7s ease-in-out infinite;
  /* dezenter Schatten für Lesbarkeit über hellen Bildstellen */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45));
}
.wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Claim (dicht unter dem Logo) ---- */
.claim {
  margin: 8px 0 0;
  max-width: 420px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.15;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  animation: riseIn 1s ease 0.12s both;
}

/* =================================================================
   RECHTS: Info-Spalte
   ================================================================= */
.info {
  padding: 64px 64px 56px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
}

.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }

.hair {
  border: 0;
  height: 1px;
  background: var(--hair);
  margin: 20px 0;
}
.hair--social { margin: 22px 0 16px; }

.spacer { flex: 1; }

/* Labels (klein, gesperrt, versal) */
.label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--faint);
}
.edition {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sub);
}

/* Sprache + Theme nebeneinander (rechts in der Kopfzeile) */
.controls { display: flex; align-items: center; gap: 16px; }

/* Theme-Umschalter */
.theme-switch { display: flex; border: 1px solid var(--hair2); }
.seg {
  border: none;
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 13px;
  background: transparent;
  color: var(--sub);
}
.seg.is-active { background: var(--ink); color: var(--bg); }

/* Sprach-Umschalter */
.lang-switch { display: flex; align-items: center; gap: 8px; }
.lang {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--sub);
  font-weight: 400;
}
.lang.is-active { color: var(--ink); font-weight: 600; }
.lang-sep { color: var(--faint); }

/* Launch-Block */
.launch-date {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--ink);
  line-height: 1;
}
.countdown {
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.progress {
  position: relative;
  height: 1px;
  background: var(--hair);
  margin-top: 20px;
}
.progress-fill {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 0%;
  background: var(--accent);
  transition: width 0.6s ease;
}

/* E-Mail-Formular */
.email-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}
.email-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  padding: 9px 2px;
}
.email-input::placeholder { color: var(--faint); }
.email-submit {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 2px;
  white-space: nowrap;
}
.email-done {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 9px;
}
.email-done-title { margin: 0; font-size: 16px; color: var(--ink); }
.email-done-sub   { margin: 3px 0 0; font-size: 12px; color: var(--sub); }

/* Social-Links */
.social { display: flex; gap: 20px; }
.social-link {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sub);
  text-decoration: none;
}
.social-link:hover { color: var(--ink); }

/* =================================================================
   Responsiv
   ================================================================= */

/* Ab ~1024px stapeln: Medien oben, Info unten */
@media (max-width: 1024px) {
  /* minmax(0,1fr): Spalte darf unter die Inhaltsbreite schrumpfen,
     sonst zwingt z. B. "September 2026" (44px) die Spalte breiter
     als den Bildschirm. */
  .page { grid-template-columns: minmax(0, 1fr); }

  .media {
    height: 60vh;
    min-height: 420px;
  }
  .info { padding: 32px; }
}

/* Tablet / kleineres Panel */
@media (max-width: 768px) {
  .brand-block { left: 40px; top: 40px; }
}

/* Handy */
@media (max-width: 560px) {
  .brand-block { left: 32px; top: 32px; }
  .wordmark { width: 140px; }
  .claim { font-size: 19px; }

  /* Kopfzeile darf umbrechen, damit nichts aus dem Bild läuft */
  .row--between { flex-wrap: wrap; gap: 12px; }
  .edition { flex: 1 1 100%; }

  /* E-Mail-Zeile: Button darf unter das Feld rutschen */
  .email-form { flex-wrap: wrap; }
  .email-input { flex: 1 1 100%; }
  .email-submit { margin-left: auto; padding: 6px 0 8px; }
}

/* =================================================================
   Animationen
   ================================================================= */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drift1 {
  0%   { transform: translate(-6%,-4%) scale(1.15); }
  50%  { transform: translate(8%,6%)   scale(1.30); }
  100% { transform: translate(-6%,-4%) scale(1.15); }
}
@keyframes drift2 {
  0%   { transform: translate(6%,8%)   scale(1.25); }
  50%  { transform: translate(-8%,-6%) scale(1.10); }
  100% { transform: translate(6%,8%)   scale(1.25); }
}
@keyframes sweepLight {
  0%   { transform: translateX(-70%) skewX(-14deg); opacity: 0; }
  42%  { opacity: 0.42; }
  80%  { opacity: 0; }
  100% { transform: translateX(210%) skewX(-14deg); opacity: 0; }
}
@keyframes logoFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .vp-glow,
  .vp-sweep,
  .wordmark,
  .claim {
    animation: none !important;
  }
  .progress-fill { transition: none; }
}