/* =========================================================
   STARTSEITE VIDEOSEKTION – nur diese Klassen
   Fix: Mobile-Overflow rechts + Text immer sichtbar
   + Tablet-Fluid-Layout (sieht auch bei Zwischenbreiten gut aus)
   ========================================================= */

/* Wrapper */
.startscreen-video {
  position: relative;
  width: 100vw;        /* wichtig: echte Viewport-Breite */
  max-width: 100vw;    /* härter als 100% gegen Overflow */
  height: 100vh;       /* Fallback */
  height: 100svh;      /* iOS stabil */
  height: 100dvh;      /* moderne Browser */
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #000;
}

/* Video: an Kanten pinnen -> kein Subpixel-Überhang */
.startscreen-video-media {
  position: absolute;
  inset: 0;            /* top/right/bottom/left = 0 */

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;
  z-index: 1;

  /* verhindert “Zittern” und Mini-Overflows auf Mobile */
  transform: translateZ(0);
  will-change: transform;
}

/* Text Overlay */
.startscreen-video-text {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 1.5rem;
  text-align: center;

  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 6vw, 4.2rem);
  letter-spacing: 0.04em;
  line-height: 1.12;

  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  pointer-events: none;

  /* Animation + Fallback */
  opacity: 1; /* Fallback: Text ist IMMER sichtbar */
  animation: startscreenFadeSlide 1.4s ease-out forwards;
  animation-delay: 0.9s;
}

@keyframes startscreenFadeSlide {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Barrierefrei */
@media (prefers-reduced-motion: reduce) {
  .startscreen-video-text {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* =========================================================
   TABLET (zwischen Desktop & Mobile):
   - fließende Höhe, damit es bei Tablet & Zwischenbreiten gut aussieht
   - nicht so riesig wie 100vh, nicht so klein wie 50vh
   ========================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
  .startscreen-video {
    /* Fluid: min 55vh, ideal über Breite, max 80vh */
    height: clamp(55vh, 60vw, 80vh);
    height: clamp(55svh, 60vw, 80svh);
    height: clamp(55dvh, 60vw, 80dvh);
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .startscreen-video-media {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .startscreen-video-text {
    font-size: clamp(1.7rem, 4.5vw, 3.2rem);
    padding: 0 1.2rem;
    letter-spacing: 0.03em;
    line-height: 1.12;
  }
}

/* Tablet quer / Landscape: etwas weniger hoch, wirkt sonst schnell „zu groß“ */
@media (max-width: 1024px) and (orientation: landscape) {
  .startscreen-video {
    height: clamp(45vh, 45vw, 65vh);
    height: clamp(45svh, 45vw, 65svh);
    height: clamp(45dvh, 45vw, 65dvh);
  }

  .startscreen-video-text {
    font-size: clamp(1.5rem, 3.8vw, 2.6rem);
  }
}

/* Mobile: Video nur halb so hoch (50% der Viewport-Höhe) */
@media (max-width: 768px) {
  .startscreen-video {
    height: 50vh;   /* Fallback */
    height: 50svh;  /* iOS stabil */
    height: 50dvh;  /* moderne Browser */
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .startscreen-video-media {
    position: absolute;
    inset: 0;
    width: 100vw;   /* volle Breite */
    height: 100%;   /* passt sich an 50vh Wrapper an */
    object-fit: cover;
    object-position: center;
  }

  .startscreen-video-text {
    font-size: clamp(1.4rem, 7vw, 2.2rem);
    padding: 0 1rem;
  }
}