/* =========================================================
   VIDEOS HERO CLEAN FINAL
   Ziel:
   - wie Projekte: Kicker oben, Linie nur unter VIDEOS
   - keine Linie unter "Video-Bereich"
   - Titel kleiner, sauber, mittig
   - Beschreibung nicht abgeschnitten
   - responsive
   ========================================================= */

html body .videos-modern-page{
  width:min(100% - 32px,1220px)!important;
  max-width:1220px!important;
  margin:0 auto!important;
  padding:0 0 62px!important;
  overflow-x:hidden!important;
}

html body .videos-hero-pro{
  width:100%!important;
  max-width:980px!important;
  margin:0 auto 42px!important;
  padding:54px 0 12px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  gap:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

html body .videos-hero-text{
  width:100%!important;
  max-width:980px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  overflow:visible!important;
}

/* rechte/alte Hero-Grafiken aus */
html body .video-hero-visual,
html body .video-hero-cta,
html body .video-stats-pro{
  display:none!important;
}

/* Nur diese eine Linie unter VIDEOS */
html body .video-kicker{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  width:auto!important;
  margin:0 auto 20px!important;
  padding:0!important;
  color:#22e6ff!important;
  font-size:.9rem!important;
  font-weight:950!important;
  letter-spacing:.42em!important;
  line-height:1!important;
  text-align:center!important;
  text-transform:uppercase!important;
  text-shadow:0 0 16px rgba(34,230,255,.42)!important;
}

html body .video-kicker::before{
  display:none!important;
  content:none!important;
}

html body .video-kicker::after{
  content:""!important;
  display:block!important;
  width:120px!important;
  height:2px!important;
  border-radius:999px!important;
  margin:0 auto!important;
  background:linear-gradient(90deg,transparent,#22e6ff,transparent)!important;
  box-shadow:0 0 14px rgba(34,230,255,.55)!important;
}

/* Alle falschen zusätzlichen Linien entfernen */
html body .videos-hero-pro::before,
html body .videos-hero-pro::after,
html body .videos-hero-text::before,
html body .videos-hero-text::after,
html body .videos-hero-pro h1::before,
html body .videos-hero-pro h1::after,
html body .video-lead::before,
html body .video-lead::after{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* Titel sauber wie Projekte, aber nicht zu groß */
html body .videos-hero-pro h1{
  display:block!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto 22px!important;
  padding:0!important;
  text-align:center!important;
  color:transparent!important;
  background:linear-gradient(90deg,#ffffff 0%,#ffffff 58%,#c9fbff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  font-size:clamp(3.4rem,5.2vw,5.1rem)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
  font-weight:950!important;
  text-shadow:none!important;
  animation:none!important;
  white-space:normal!important;
  overflow:visible!important;
}

html body .videos-hero-pro h1 span{
  display:inline!important;
  color:inherit!important;
  background:inherit!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

/* Beschreibung mittig und mit Abstand */
html body .video-lead{
  display:block!important;
  width:100%!important;
  max-width:900px!important;
  margin:0 auto!important;
  padding:0 10px!important;
  text-align:center!important;
  color:rgba(244,249,255,.94)!important;
  font-size:clamp(1rem,1.15vw,1.12rem)!important;
  line-height:1.7!important;
  white-space:normal!important;
  overflow:visible!important;
}

/* Tablet */
@media(max-width:900px){
  html body .videos-modern-page{
    width:min(100% - 24px,760px)!important;
  }

  html body .videos-hero-pro{
    padding:40px 0 10px!important;
    margin-bottom:34px!important;
  }

  html body .videos-hero-pro h1{
    max-width:100%!important;
    font-size:clamp(2.8rem,9vw,4.4rem)!important;
  }
}

/* Handy */
@media(max-width:520px){
  html body .videos-modern-page{
    width:calc(100% - 18px)!important;
  }

  html body .videos-hero-pro{
    padding:30px 0 8px!important;
    margin-bottom:28px!important;
  }

  html body .video-kicker{
    font-size:.78rem!important;
    letter-spacing:.32em!important;
    margin-bottom:16px!important;
  }

  html body .video-kicker::after{
    width:92px!important;
  }

  html body .videos-hero-pro h1{
    font-size:clamp(2.45rem,12vw,3.25rem)!important;
    line-height:1!important;
    letter-spacing:-.055em!important;
    margin-bottom:16px!important;
  }

  html body .video-lead{
    font-size:.94rem!important;
    line-height:1.55!important;
    padding:0 4px!important;
  }
}


/* Header brand color like footer */
.brand{
 color:#ffffff !important;
}
.brand .accent,
.brand-highlight,
.brand span:last-child{
 background:linear-gradient(135deg,#00e5ff,#2dd4ff) !important;
 -webkit-background-clip:text !important;
 -webkit-text-fill-color:transparent !important;
 color:transparent !important;
 font-weight:800 !important;
}
