/* Synchronisationstest main · 24.08.2026 23:13 · ohne Layoutwirkung */

/* ========================================================================== 
   SKYTIME – GESTALTERISCHE VERFEINERUNGEN

   Diese Datei enthält bewusst nur kleine, klar abgegrenzte Anpassungen:
   1. Aktuelles Skytime-Logo aus /assets/branding
   2. Einstiegsbereich: Text weiter links + weicher Wolkenschatten
   3. Große Desktopansichten: kontrollierte Hero-Achse als Vergleichstest
   4. Gemeinsame Interaktionen für Navigation und Footer
   ========================================================================== */


/* ========================================================================== 
   1. LOGO
   ========================================================================== */

.logo .logo-branding {
  display: block;
  width: 166px;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 3px 10px rgb(0 0 0 / 35%));
}


/* ========================================================================== 
   2. EINSTIEGSBEREICH / POSITION UND TEXTKONTRAST
   ========================================================================== */

.hero-copy {
  isolation: isolate;
  width: min(790px, calc(100vw - 96px));
  margin-left: max(clamp(36px, 4vw, 72px), calc((100vw - 1956px) / 2));
  margin-right: 0;
}

.hero-copy::before {
  content: "";
  position: absolute;
  top: 145px;
  left: -70px;
  z-index: -1;
  width: 760px;
  height: 565px;
  background:
    radial-gradient(
      ellipse at 29% 53%,
      rgb(6 22 39 / 72%) 0%,
      rgb(8 27 48 / 52%) 35%,
      rgb(11 34 58 / 24%) 55%,
      transparent 73%
    );
  filter: blur(17px);
  pointer-events: none;
}

.hero p {
  text-shadow:
    0 1px 2px #061827,
    0 5px 20px rgb(4 18 32 / 82%),
    0 0 1px #000;
}


/* ========================================================================== 
   3. GROSSE DESKTOPANSICHTEN – VERGLEICHSTEST
   ========================================================================== */

@media (min-width: 1500px) {
  .hero > .hero-copy,
  .page-hero-flight .page-hero-copy,
  .page-hero-gift .page-hero-copy {
    margin-left: max(
      clamp(96px, calc((100vw - 1728px) / 2), 180px),
      calc((100vw - 2800px) / 2)
    );
  }
}


/* ========================================================================== 
   4. MITTLERE BILDSCHIRME / TABLET
   ========================================================================== */

@media (max-width: 1200px) {
  .hero-copy {
    width: min(760px, calc(100vw - 64px));
    margin-left: clamp(28px, 3.5vw, 48px);
  }
}

@media (max-width: 1000px) {
  .logo .logo-branding {
    width: 150px;
  }

  .hero-copy {
    width: min(720px, calc(100vw - 48px));
    margin-left: 24px;
  }

  .hero-copy::before {
    top: 112px;
    left: -45px;
    width: 700px;
    height: 600px;
    background:
      radial-gradient(
        ellipse at 29% 52%,
        rgb(6 22 39 / 77%) 0%,
        rgb(8 27 48 / 57%) 38%,
        rgb(11 34 58 / 28%) 59%,
        transparent 77%
      );
  }
}


/* ========================================================================== 
   5. SMARTPHONE
   ========================================================================== */

@media (max-width: 620px) {
  .logo .logo-branding {
    width: 128px;
  }

  .hero-copy {
    width: calc(100vw - 32px);
    margin-left: 16px;
  }

  .hero-copy::before {
    top: 82px;
    left: -24px;
    width: calc(100% + 48px);
    height: 575px;
    background:
      radial-gradient(
        ellipse at 35% 47%,
        rgb(6 22 39 / 82%) 0%,
        rgb(8 27 48 / 63%) 43%,
        rgb(11 34 58 / 32%) 65%,
        transparent 83%
      );
    filter: blur(13px);
  }
}


/* ========================================================================== 
   6. UNTERSEITEN – BROWSER-NORMALISIERUNG
   ========================================================================== */

.voucher-card-image {
  margin: 0;
}


/* ========================================================================== 
   7. GEMEINSAME INTERAKTIONEN / FOOTER
   ========================================================================== */

.menu > div > a,
.menu > .book,
.menu > .skytime-cart-icon-link,
.mega a,
.foot a {
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.menu > div > a:hover,
.menu > div > a:focus-visible,
.menu > div:hover > a,
.menu > div:focus-within > a,
.menu > .book:hover,
.menu > .book:focus-visible,
.menu > .skytime-cart-icon-link:hover,
.menu > .skytime-cart-icon-link:focus-visible,
.mega a:hover,
.mega a:focus-visible,
.foot a:hover,
.foot a:focus-visible {
  color: var(--warm) !important;
  text-shadow:
    0 0 8px rgb(240 199 111 / 48%),
    0 0 18px rgb(240 199 111 / 24%);
}

.mega a:hover span,
.mega a:focus-visible span {
  color: #f6dfaa;
}

.menu .current-link,
.foot .footer-current {
  color: var(--warm);
  text-shadow: 0 0 12px rgb(240 199 111 / 26%);
}

.footer-brand a {
  display: inline-flex;
  align-items: center;
}

.footer-brand img {
  display: block;
  width: 142px;
  height: auto;
  filter: drop-shadow(0 3px 9px rgb(0 0 0 / 28%));
  transition: transform 180ms ease, filter 180ms ease;
}

.footer-brand a:hover img,
.footer-brand a:focus-visible img {
  transform: translateY(-2px);
  filter:
    drop-shadow(0 3px 9px rgb(0 0 0 / 28%))
    drop-shadow(0 0 9px rgb(240 199 111 / 36%));
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.footer-links span {
  color: rgb(213 224 235 / 44%);
}

@media (max-width: 620px) {
  .footer-brand img {
    width: 126px;
  }

  .footer-links {
    gap: 7px;
  }
}


/* ========================================================================== 
   8. ERLEBNIS-MENÜ – TEMPORÄR FÜR LIVE-REVISION 0

   Der Bereich "Erlebnisse" mit "Flugerlebnisse" und "Bewertungen" bleibt
   im HTML erhalten, wird aber bis zur eigenen Entwicklung dieses Bereichs
   bewusst nicht ausgeliefert. Dadurch lässt sich der Punkt später ohne
   Strukturverlust wieder aktivieren.
   ========================================================================== */

#main-menu .mega:not(.compact) > section:nth-child(2) {
  display: none;
}

#main-menu .mega:not(.compact) {
  grid-template-columns: repeat(2, 1fr);
  width: 500px;
}