/* =========================================================
   FACILITY HERO – FULLSCREEN / VIDEO HERO BLOCK (CLEAN VERSION)
   ========================================================= */

.facility-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* iOS fix */
  min-height: clamp(480px, 60vh, 720px);

  display: flex;
  align-items: flex-end;

  padding: clamp(2rem,4vw,4rem) 1.5rem 6rem;
  box-sizing: border-box;

  color: #fff;
  background-color: #000; /* fallback unter Video */
  overflow: hidden;
}

/* ======================
   VIDEO BACKGROUND
   ====================== */
.facility-hero > video,
.facility-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.8) saturate(1.1); /* hell & klar */
  z-index: 0;
}

/* ======================
   OVERLAY – deaktiviert (keine Maske!)
   ====================== */
.facility-hero::after {
  content: none !important;
}

/* ======================
   CONTENT PANEL
   ====================== */
.facility-hero-content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  color: #fff;
  text-shadow: 0 12px 40px rgba(0,0,0,0.8);

  /* Glass Card Look */
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.8),
    0 0 120px rgba(30,97,255,0.4);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  padding: 2rem 2.5rem;

  max-width: min(700px, 90vw);
  width: max-content;
  min-width: min(320px, 90vw);

  opacity: 0;
  transform: translateX(-40px);
  animation: heroFlyIn .8s cubic-bezier(.25,1,.5,1) forwards;
  animation-delay: .15s;
}

/* ======================
   HEADLINE + ROTATOR
   ====================== */
.facility-hero-headline {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2rem, 1.1vw + 1.6rem, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem 0;
  padding: 0;
  letter-spacing: -.02em;
}

.facility-hero-headline .headline-line1 {
  display: block;
  color: #fff;
}

/* Wrapper der rotierenden Zeilen */
.facility-hero-headline .headline-rotator {
  position: relative;
  display: block;
  min-height: calc(1.2em * 2);
  margin-top: .5em;
  font-weight: 700;
  color: #a9e1fe;
  text-shadow:
    0 0 24px rgba(169,225,254,.5),
    0 0 60px rgba(30,97,255,.4);
}

/* einzelne Varianten übereinander stapeln */
.facility-hero-headline .headline-variant {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  opacity: 0;
  line-height: 1.2;
  color: #a9e1fe;
  text-shadow:
    0 0 24px rgba(169,225,254,.5),
    0 0 60px rgba(30,97,255,.4);
  animation: headlineCycle 32s infinite;
  white-space: normal;
  word-break: break-word;
}

/* 4 Varianten => delays staffeln */
.facility-hero-headline .headline-variant:nth-child(1) { animation-delay: 0s;  }
.facility-hero-headline .headline-variant:nth-child(2) { animation-delay: 8s;  }
.facility-hero-headline .headline-variant:nth-child(3) { animation-delay:16s;  }
.facility-hero-headline .headline-variant:nth-child(4) { animation-delay:24s;  }

/* 32s total / 4 Headlines = 8s pro Headline sichtbar */
@keyframes headlineCycle {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: translateY(0);    }
  25%  { opacity: 1; transform: translateY(0);    }
  29%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ======================
   TAGLINE
   ====================== */
.facility-hero-tagline {
  font-size: clamp(1rem, 0.6vw + 0.8rem, 1.2rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 46ch;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1.5rem 0;
  text-wrap: balance;
}

/* ======================
   CTA BUTTON
   ====================== */
.cta-block {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.facility-hero-playbtn {
  background: #1e61ff;
  color: #fff;
  border: 1px solid rgba(30,97,255,0.4);
  border-radius: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(30,97,255,0.5);
  text-shadow: 0 0 16px rgba(30,97,255,.5);
  transition: all 0.25s ease;
}

.facility-hero-playbtn:hover {
  background: #4d8dff; /* dein Mid-Blau */
  color: #0f172a;
  box-shadow: 0 14px 48px rgba(169,225,254,0.6);
  border-color: rgba(169,225,254,0.7);
  text-shadow:
    0 0 24px rgba(169,225,254,.8),
    0 0 60px rgba(30,97,255,.8);
}

/* ======================
   ARROW (Scroll Down)
   ====================== */
.hero-arrow-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.cta-arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid rgba(169,225,254,0.4);
  background: rgba(15,23,42,0.4);
  box-shadow:
    0 10px 20px rgba(0,0,0,.5),
    0 0 20px rgba(30,97,255,.5);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  animation: arrowFloat 3s ease-in-out infinite;
}

@keyframes arrowFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ======================
   ENTRY ANIMATION
   ====================== */
@keyframes heroFlyIn {
  0% { opacity: 0; transform: translate(-40px, 20px) scale(0.98); }
  60% { opacity: 1; transform: translate(8px, -2px) scale(1.02); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width:768px) {
  .facility-hero {
    align-items: flex-end;
    padding: 2rem 1rem 6rem;
    min-height: 520px;
  }

  .facility-hero-content {
    max-width: 90vw;
    width: 90vw;
    padding: 1.5rem;
  }

  .facility-hero-headline {
    font-size: clamp(1.8rem, 2vw + 1.2rem, 2.2rem);
    line-height: 1.2;
  }

  .facility-hero-tagline {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 40ch;
  }

  .facility-hero-playbtn {
    font-size: 0.95rem;
    padding: 0.8rem 1.4rem;
  }

  .cta-arrow-wrapper {
    width: 56px;
    height: 56px;
  }
  .cta-arrow {
    width: 16px;
    height: 16px;
    border-bottom-width: 2px;
    border-right-width: 2px;
  }
}

/* =========================================================
   FACILITY HERO – MID GLOW MASK
   ========================================================= */

.facility-hero::after {
  content: "";
  position: absolute;
  inset: 0;

  /* kräftiger blauer Glow + balanced Dark Gradient */
  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(30,97,255,0.35) 0%,   /* stärkerer Glow */
      rgba(0,0,0,0) 60%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.35) 0%,       /* dunkler Start oben */
      rgba(0,0,0,0.7) 90%        /* weiche Abdunklung unten */
    );

  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 1;
}

/* FACILITY HERO ARROW – FINAL */
.hero-arrow-bottom { ... }
.cta-arrow-wrapper { ... }
.cta-arrow-wrapper.show-arrow { ... }
#cta-arrow { ... }
#cta-arrow.is-visible { ... }
#cta-arrow.is-hidden { ... }
@media (max-width:768px) { ... }

/* ARROW BUTTON (unten im Hero) */
.hero-arrow-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: auto; /* wichtig damit man klicken kann */
}

.cta-arrow-wrapper {
  display: none;                /* wird per JS auf flex gesetzt */
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);

  background: radial-gradient(
    circle at 30% 20%,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.3) 60%
  );

  /* altes blaues Zeugs löschen:
     box-shadow: none, kein neon */
  box-shadow:
    0 20px 40px rgba(0,0,0,0.8); /* nur weicher schwarzer Drop */
  
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  cursor: pointer;        /* jetzt klickbar */
  pointer-events: auto;   /* wirklich anklickbar */

  transition: box-shadow .25s ease, transform .25s ease;
}

/* beim ersten Render ist er display:none,
   JS hängt .show-arrow dran -> dann sichtbar */
.cta-arrow-wrapper.show-arrow {
  display: flex;
}

/* dezenter Hover */
.cta-arrow-wrapper:hover {
  transform: translateY(2px);
  box-shadow:
    0 16px 24px rgba(0,0,0,0.9);
}

/* das Lottie-SVG drin */
#cta-arrow {
  width: 36px;
  height: 36px;
  line-height: 0;
}

#cta-arrow.is-hidden {
  opacity: 0;
  transform: translateY(-6px) scale(.9);
  transition: opacity .4s ease, transform .4s ease;
}
#cta-arrow.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* =========================================================
   CTA-ARROW (größer, clean, klickbar + smooth pulse)
========================================================= */

.hero-arrow-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.cta-arrow-wrapper {
  display: none; /* wird per JS sichtbar */
  align-items: center;
  justify-content: center;

  width: 110px;   /* deutlich größer */
  height: 110px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);

  background: radial-gradient(
    circle at 50% 50%,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.3) 70%
  );

  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);

  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow .25s ease, transform .25s ease;
}

.cta-arrow-wrapper.show-arrow {
  display: flex;
}

/* dezente Bewegung + Puls-Effekt */
.cta-arrow-wrapper:hover {
  transform: translateY(4px) scale(1.04);
  box-shadow: 0 18px 30px rgba(0,0,0,0.9);
  animation: pulseArrow 1.6s ease-in-out infinite;
}

/* Lottie Container */
#cta-arrow {
  width: 56px;  /* größerer sichtbarer Pfeil */
  height: 56px;
  line-height: 0;
}

#cta-arrow.is-hidden {
  opacity: 0;
  transform: translateY(-6px) scale(.9);
  transition: opacity .4s ease, transform .4s ease;
}

#cta-arrow.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* sanftes Pulsieren beim Hover */
@keyframes pulseArrow {
  0% { transform: translateY(4px) scale(1.04); }
  50% { transform: translateY(2px) scale(1.08); }
  100% { transform: translateY(4px) scale(1.04); }
}
/* =========================================================
   CTA-ARROW (großer Kreis, clean + sanftes Pulsieren)
========================================================= */

.hero-arrow-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.cta-arrow-wrapper {
  display: none; /* wird per JS sichtbar */
  align-items: center;
  justify-content: center;

  width: 110px;
  height: 110px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);

  background: radial-gradient(
    circle at 50% 50%,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.3) 70%
  );

  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);

  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s ease, box-shadow .25s ease;
}

.cta-arrow-wrapper.show-arrow {
  display: flex;
}

/* sanftes Pulsieren des KREISES beim Hover */
.cta-arrow-wrapper:hover {
  animation: pulseCircle 2s ease-in-out infinite;
  transform: scale(1.04);
  box-shadow: 0 22px 44px rgba(0,0,0,0.9);
}

/* größerer Lottie-Pfeil in der Mitte */
#cta-arrow {
  width: 56px;
  height: 56px;
  line-height: 0;
}

#cta-arrow.is-hidden {
  opacity: 0;
  transform: translateY(-6px) scale(.9);
  transition: opacity .4s ease, transform .4s ease;
}

#cta-arrow.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Animation fürs Pulsieren */
@keyframes pulseCircle {
  0%   { transform: scale(1.04); box-shadow: 0 20px 40px rgba(0,0,0,0.8); }
  50%  { transform: scale(1.08); box-shadow: 0 24px 50px rgba(0,0,0,0.9); }
  100% { transform: scale(1.04); box-shadow: 0 20px 40px rgba(0,0,0,0.8); }
}/* =========================================================
   CTA-ARROW (clean, kleiner Kreis + Pulse & Click Effekt)
========================================================= */

.hero-arrow-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
}

.cta-arrow-wrapper {
  display: none; /* per JS sichtbar */
  align-items: center;
  justify-content: center;

  width: 80px;   /* kleinerer Kreis */
  height: 80px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);

  background: radial-gradient(
    circle at 50% 50%,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.3) 70%
  );

  box-shadow: 0 16px 32px rgba(0,0,0,0.75);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);

  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s ease, box-shadow .25s ease;
}

.cta-arrow-wrapper.show-arrow {
  display: flex;
}

/* sanftes Pulsieren des Kreises beim Hover */
.cta-arrow-wrapper:hover {
  animation: pulseCircle 2s ease-in-out infinite;
  transform: scale(1.04);
  box-shadow: 0 20px 36px rgba(0,0,0,0.85);
}

/* Klick-Effekt */
.cta-arrow-wrapper:active {
  transform: scale(0.94);
  box-shadow: 0 12px 24px rgba(0,0,0,0.7);
  animation: none;
}

/* Pfeil in der Mitte */
#cta-arrow {
  width: 42px;
  height: 42px;
  line-height: 0;
}

#cta-arrow.is-hidden {
  opacity: 0;
  transform: translateY(-6px) scale(.9);
  transition: opacity .4s ease, transform .4s ease;
}

#cta-arrow.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Pulse Animation */
@keyframes pulseCircle {
  0%   { transform: scale(1.04); box-shadow: 0 16px 32px rgba(0,0,0,0.75); }
  50%  { transform: scale(1.08); box-shadow: 0 20px 40px rgba(0,0,0,0.85); }
  100% { transform: scale(1.04); box-shadow: 0 16px 32px rgba(0,0,0,0.75); }
}