/* Maße stammen aus der 1672 × 941 Vorlage; --px ist ein Vorlagen-Pixel,
   skaliert auf die aktuelle Viewport-Größe (16:9-Bühne). */
:root {
  --px: calc(min(100vw, 100vh * 1672 / 941) / 1672);
  --red: #ff2b2b;
  --red-soft: #ff5656;
  --red-line: rgba(255, 52, 52, 0.75);
  --ink: #f3eded;
  --muted: #cdc4c4;
  --bg: #0a0406;
}

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

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg) url("assets/hero-desktop.webp") center center / cover no-repeat;
}

.embers,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.embers {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Dunkelt die Mitte hinter dem Countdown ab, wie in der Vorlage */
.vignette {
  z-index: 0;
  background:
    radial-gradient(ellipse 38% 30% at 50% 72%, rgba(8, 2, 4, 0.72), rgba(8, 2, 4, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(5, 1, 3, 0.35) 100%);
}

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

.content {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(50% - 78 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  margin: 0;
  line-height: 0;
}

.logo img {
  display: block;
  width: calc(735 * var(--px));
  height: auto;
  filter: drop-shadow(0 0 calc(18 * var(--px)) rgba(255, 30, 30, 0.35));
}

.tagline {
  margin: calc(-4 * var(--px)) 0 0;
  font-size: calc(19 * var(--px));
  font-weight: 400;
  letter-spacing: 0.72em;
  margin-right: -0.72em; /* gleicht das Spacing nach dem letzten Buchstaben aus */
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 calc(10 * var(--px)) rgba(0, 0, 0, 0.9);
}

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

.countdown {
  display: flex;
  align-items: center;
  margin-top: calc(26 * var(--px));
}

.countdown__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(153 * var(--px));
  height: calc(95 * var(--px));
  border: calc(1.3 * var(--px)) solid rgba(255, 50, 50, 0.6);
  border-radius: calc(4 * var(--px));
  background: linear-gradient(to bottom, rgba(26, 8, 10, 0.82), rgba(10, 3, 5, 0.88));
  box-shadow:
    0 0 calc(16 * var(--px)) rgba(255, 20, 20, 0.28),
    inset 0 0 calc(18 * var(--px)) rgba(255, 30, 30, 0.12);
}

.countdown__value {
  font-size: calc(45 * var(--px));
  font-weight: 500;
  line-height: 1;
  color: var(--red-soft);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 calc(14 * var(--px)) rgba(255, 40, 40, 0.55);
}

.countdown__label {
  margin-top: calc(12 * var(--px));
  font-size: calc(13 * var(--px));
  font-weight: 500;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.countdown__line {
  position: relative;
  width: calc(42 * var(--px));
  height: calc(1.3 * var(--px));
  background: var(--red-line);
  box-shadow: 0 0 calc(6 * var(--px)) rgba(255, 30, 30, 0.6);
}

.countdown__line--left,
.countdown__line--right {
  width: calc(118 * var(--px));
}

.countdown__line--left {
  background: linear-gradient(to right, rgba(255, 52, 52, 0), var(--red-line));
}

.countdown__line--right {
  background: linear-gradient(to left, rgba(255, 52, 52, 0), var(--red-line));
}

.countdown__line--diamond {
  width: calc(58 * var(--px));
}

.countdown__line--diamond i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(9 * var(--px));
  height: calc(9 * var(--px));
  border: calc(1.3 * var(--px)) solid var(--red);
  background: #1a0608;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 calc(6 * var(--px)) rgba(255, 30, 30, 0.8);
}

/* ---------- Text & Button ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--px));
  margin: calc(27 * var(--px)) 0 0;
  font-size: calc(14 * var(--px));
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink);
}

.kicker span {
  margin-right: -0.38em;
}

.kicker::before,
.kicker::after {
  content: "";
  width: calc(52 * var(--px));
  height: calc(1 * var(--px));
  background: rgba(255, 70, 70, 0.6);
}

.text {
  margin: calc(15 * var(--px)) 0 0;
  font-size: calc(16.5 * var(--px));
  font-weight: 400;
  line-height: 1.58;
  color: var(--muted);
  text-shadow: 0 0 calc(8 * var(--px)) rgba(0, 0, 0, 0.9);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--px));
  width: calc(312 * var(--px));
  height: calc(60 * var(--px));
  margin-top: calc(23 * var(--px));
  border: calc(2 * var(--px)) solid #e3201f;
  border-radius: calc(3 * var(--px));
  background: linear-gradient(to bottom, rgba(90, 6, 8, 0.55), rgba(40, 2, 4, 0.7));
  box-shadow:
    0 0 calc(20 * var(--px)) rgba(255, 20, 20, 0.45),
    inset 0 0 calc(16 * var(--px)) rgba(255, 30, 30, 0.25);
  color: #fff;
  font-size: calc(17 * var(--px));
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow 0.25s, background 0.25s, transform 0.25s;
}

.cta:hover,
.cta:focus-visible {
  background: linear-gradient(to bottom, rgba(150, 10, 12, 0.6), rgba(70, 4, 6, 0.75));
  box-shadow:
    0 0 calc(32 * var(--px)) rgba(255, 30, 30, 0.7),
    inset 0 0 calc(20 * var(--px)) rgba(255, 50, 50, 0.35);
  transform: translateY(-1px);
  outline: none;
}

.cta__icon {
  width: calc(30 * var(--px));
  height: calc(30 * var(--px));
}

/* ---------- Footer ---------- */

.footer {
  position: absolute;
  z-index: 2;
  left: calc(90 * var(--px));
  right: calc(90 * var(--px));
  bottom: calc(44 * var(--px));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.socials {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--px));
}

.socials a {
  display: flex;
  color: #f2eeee;
  transition: color 0.2s, filter 0.2s;
}

.socials a:hover,
.socials a:focus-visible {
  color: var(--red-soft);
  filter: drop-shadow(0 0 6px rgba(255, 40, 40, 0.8));
  outline: none;
}

.socials svg {
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  fill: currentColor;
}

.follow {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  margin: 0;
  font-size: calc(10 * var(--px));
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #d9d1d1;
}

.follow::after {
  content: "";
  width: calc(26 * var(--px));
  height: calc(1 * var(--px));
  background: rgba(255, 255, 255, 0.55);
}

/* ---------- Hochformat / Smartphone ---------- */

@media (max-aspect-ratio: 1/1) {
  :root {
    /* Im Hochformat orientieren wir uns an einer ~941 px breiten Bühne */
    --px: calc(min(100vw, 100vh * 941 / 1672) / 760);
  }

  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-image: url("assets/hero-mobile.webp");
    background-position: center top;
  }

  .vignette {
    background:
      radial-gradient(ellipse 70% 32% at 50% 64%, rgba(8, 2, 4, 0.6), rgba(8, 2, 4, 0) 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(5, 1, 3, 0.55) 100%);
  }

  .content {
    position: relative;
    top: auto;
    padding: 46vh 16px 0;
  }

  .logo img {
    width: min(calc(700 * var(--px)), 92vw);
  }

  .tagline {
    font-size: calc(20 * var(--px));
    letter-spacing: 0.5em;
    margin-right: -0.5em;
  }

  .countdown__box {
    width: calc(150 * var(--px));
    height: calc(100 * var(--px));
  }

  .countdown__line {
    width: calc(16 * var(--px));
  }

  .countdown__line--diamond {
    width: calc(28 * var(--px));
  }

  .countdown__line--left,
  .countdown__line--right {
    width: calc(30 * var(--px));
  }

  .countdown__label {
    font-size: calc(14 * var(--px));
    letter-spacing: 0.16em;
    margin-right: -0.16em;
  }

  .kicker {
    font-size: calc(17 * var(--px));
    letter-spacing: 0.3em;
  }

  .text {
    font-size: calc(21 * var(--px));
    max-width: 34em;
  }

  .text br {
    display: none;
  }

  .cta {
    width: calc(400 * var(--px));
    height: calc(72 * var(--px));
    font-size: calc(21 * var(--px));
  }

  .cta__icon {
    width: calc(34 * var(--px));
    height: calc(34 * var(--px));
  }

  .footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex-direction: column;
    gap: calc(16 * var(--px));
    padding: calc(40 * var(--px)) 16px calc(36 * var(--px));
  }

  .socials {
    gap: calc(40 * var(--px));
  }

  .socials svg {
    width: calc(34 * var(--px));
    height: calc(34 * var(--px));
  }

  .follow {
    font-size: calc(13 * var(--px));
  }

  .follow::before {
    content: "";
    width: calc(26 * var(--px));
    height: calc(1 * var(--px));
    background: rgba(255, 255, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .embers {
    display: none;
  }

  .cta {
    transition: none;
  }
}