@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-variable.woff2") format("woff2");
}

:root {
  --color-primary-50: #fff1ec;
  --color-primary-200: #ffd1c2;
  --color-primary-400: #ff754a;
  --color-primary-500: #f54f1b;
  --color-primary-600: #d93c0b;
  --color-secondary: #1e223d;
  --brand-primary: #f54f1b;
  --brand-secondary: #1e223d;
  --brand-secondary-hover: #14172b;
  --brand-on-primary: #ffffff;
  --brand-on-secondary: #ffffff;
}

html[data-color-theme] .btn-primary,
html[data-color-theme] .btn-secondary {
  border-color: transparent;
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

.prelaunch-header-logo {
  width: 132px;
}

@media (min-width: 640px) {
  .prelaunch-header-logo {
    width: 158px;
  }
}

/* Mittelgroßer Hero-Einleitungstext zwischen Standard (16 px) und text-lg (18 px) */
.hero-intro-copy {
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (hover: hover) {
  html[data-color-theme] .btn-primary:hover,
  html[data-color-theme] .btn-secondary:hover,
  html[data-color-theme] .btn-white:hover {
    border-color: var(--brand-secondary-hover);
    background-color: var(--brand-secondary);
    color: var(--brand-on-secondary);
  }

  html[data-color-theme] .btn-primary:hover::before,
  html[data-color-theme] .btn-secondary:hover::before,
  html[data-color-theme] .btn-white:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
  }
}

/* Schwebende Seitennavigation */
.back-to-top {
  position: fixed;
  right: 0.25rem;
  bottom: calc(4.5rem + 5px);
  z-index: 9999;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(25px);
  color: var(--color-secondary, #1a1a1c);
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.back-to-top svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 220ms ease;
}

.back-to-top:focus-visible {
  outline: 3px solid var(--brand-primary-light, #ffb8a1);
  outline-offset: 3px;
}

html.dark .back-to-top {
  border-color: var(--color-stroke-7, #2a333e);
  background: var(--color-background-7, #161a20);
  color: var(--color-accent, #ffffff);
}

@media (hover: hover) {
  .back-to-top.is-visible:hover {
    border-color: transparent;
    background: var(--brand-primary, #f54f1b);
    color: var(--brand-on-primary, #ffffff);
    box-shadow: none;
  }

  html.dark .back-to-top.is-visible:hover {
    border-color: var(--color-stroke-7, #2a333e);
    background: var(--color-background-7, #161a20);
    color: var(--color-accent, #ffffff);
  }

  .back-to-top:hover svg {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top svg {
    transition: none;
  }
}

/* Zentrierter Bildausschnitt beim Verbreitern des mittleren Hero-Bildes */
.hero-feature-image {
  height: 380px;
}

/* Pixel-Icons in den USP-Cards: leicht größer als zuvor und sauber auf der Textlinie. */
.usp-card-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  vertical-align: baseline;
  transform: translateY(-1px);
}

/* Warmes Lifestyle-Motiv im Dark-Mode ruhiger in die Karte einbetten. */
.usp-card-lifestyle-image {
  transition: filter 240ms ease;
}

html.dark .usp-card-lifestyle-image {
  filter: brightness(0.84) saturate(0.9);
}

/* Statische USP-Cards der eigenständigen Prelaunch-Seite. */
.usp-card {
  color: inherit;
}

.faq-inline-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.faq-inline-link:hover,
.faq-inline-link:focus-visible {
  color: var(--brand-primary, #f54f1b);
}

/* Prelaunch-Countdown im Stil der bestehenden, abgerundeten Venue25-Flächen. */
.launch-countdown-badge {
  text-transform: none;
}

.launch-countdown-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgb(245 79 27 / 14%), transparent 32%),
    radial-gradient(circle at 92% 88%, rgb(245 79 27 / 10%), transparent 34%),
    var(--color-background-3, #f6f7f9);
}

.launch-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.launch-countdown-unit {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 8.5rem;
  padding: 1rem 0.5rem;
  border: 1px solid rgb(30 34 61 / 10%);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 12px 32px rgb(30 34 61 / 6%);
  backdrop-filter: blur(16px);
}

.launch-countdown-unit strong {
  color: var(--brand-secondary, #1e223d);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.launch-countdown-unit span {
  color: rgb(30 34 61 / 60%);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

html.dark .launch-countdown-card {
  background:
    radial-gradient(circle at 8% 12%, rgb(245 79 27 / 18%), transparent 32%),
    radial-gradient(circle at 92% 88%, rgb(245 79 27 / 12%), transparent 34%),
    var(--color-background-7, #161a20);
}

html.dark .launch-countdown-unit {
  border-color: rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 6%);
  box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
}

html.dark .launch-countdown-unit strong {
  color: var(--color-accent, #ffffff);
}

html.dark .launch-countdown-unit span {
  color: rgb(255 255 255 / 60%);
}

@media (max-width: 639px) {
  .launch-countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .launch-countdown-unit {
    min-height: 7.25rem;
  }
}