/* ===== Vollbild-Hintergrund ===== */
html, body { height: 100%; margin: 0; padding: 0; }
.grid-container { position: relative; min-height: 100vh; }

#bg-video{
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  z-index: -1; pointer-events: none;
}

/* ===== Begrüßungstext: rechte Bildschirmhälfte, vertikal zentriert ===== */
/* KEIN body.home nötig – wirkt sofort */
.grid-main{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 42vw;                 /* Breite des Textblocks in der rechten Hälfte */
  padding-right: 4vw;          /* Randabstand rechts */
  padding-left: 4vw;           /* Abstand zur Mitte */
  box-sizing: border-box;
  z-index: 1;
}

/* H1 immer weiß, egal was globales style.css macht */
#intro-line{
  color:#fff !important;
  text-align: left;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.35;
  text-shadow: 0 6px 22px rgba(0,0,0,.6);
  margin: 0;
}

/* Mobile: mittig anzeigen */
@media (max-width: 980px){
  .grid-main{
    position: relative;
    top: auto; right: auto; transform: none;
    width: 100%;
    padding: 0 4vw;
    margin: 18vh auto 0;       /* optische Luft unter dem Header */
  }
  #intro-line{ text-align: center; }
}

/* farbige Wörter – keine erzwungenen Umbrüche */
.typo-word{ display:inline; white-space:nowrap; }

/* optionaler kleiner Fade-In des ganzen Texts */
#intro-line{ opacity:0; animation: heroFade .6s ease .2s forwards; }
@keyframes heroFade{ to { opacity:1; } }