/* SAM-PRO Business v37 */
/* Stabiler Hero/Header: feste Desktop-Komposition, damit Titel und Hero-Bild eine Einheit bleiben */

/*
  Idee:
  Auf Desktop-Breiten wird die Hero-Komposition nicht mehr prozentual gestaucht.
  Stattdessen bleibt ein fester Design-Rahmen zentriert. Bei kleineren Browserfenstern
  wird der äußere Bereich sauber beschnitten, ohne dass das Bild unter den Titel rutscht.
*/

.v7-hero{
  overflow: hidden !important;
  background: #f8f8f6 !important;
}

/* Feste Designbreite für die gesamte Hero-Komposition */
.v7-hero > .container{
  width: 1680px !important;
  max-width: none !important;
  min-width: 1680px !important;
  padding: 0 !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Keine variable Spaltenverformung mehr auf Desktop */
.v7-hero__grid{
  width: 1680px !important;
  max-width: none !important;
  min-width: 1680px !important;
  min-height: 520px !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #f8f8f6 url('../img/hero-v35.webp') no-repeat right center !important;
  background-size: auto 100% !important;
}

/* Hero-Bild nicht zusätzlich als separates Element anzeigen */
.v7-hero__image{
  display: none !important;
}

/* Textbereich bleibt fest an seiner Position und schiebt das Bild nicht mehr weg */
.v7-hero__copy{
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 690px !important;
  padding: 84px 20px 42px 82px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  z-index: 3 !important;
  background: transparent !important;
}

.v7-hero__copy h1{
  font-size: 30px !important;
  line-height: 1.2 !important;
  max-width: 560px !important;
  margin: 0 !important;
}

.v7-gold-line{
  width: 56px !important;
  height: 4px !important;
  margin: 16px 0 18px !important;
}

.v7-hero__copy p{
  max-width: 560px !important;
  font-size: 13.8px !important;
  line-height: 1.62 !important;
  margin: 0 !important;
}

.v7-actions{
  margin-top: 26px !important;
  gap: 14px !important;
}

/* Der Übergang liegt über dem Bild, aber nicht als blockartige weiße Fläche */
.v7-hero__grid::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 760px !important;
  background: linear-gradient(90deg,
    rgba(248,248,246,0.96) 0%,
    rgba(248,248,246,0.90) 39%,
    rgba(248,248,246,0.70) 64%,
    rgba(248,248,246,0.30) 84%,
    rgba(248,248,246,0.00) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.v7-hero__copy > *{
  position: relative !important;
  z-index: 2 !important;
}

/* Sehr große Monitore: Komposition bleibt zentriert und wirkt nicht auseinandergezogen */
@media (min-width: 1681px){
  .v7-hero > .container,
  .v7-hero__grid{
    width: 1680px !important;
    min-width: 1680px !important;
  }
}

/* Zwischenbreiten: feste Komposition bleibt erhalten, wird nur im sichtbaren Bereich beschnitten */
@media (max-width: 1679px) and (min-width: 981px){
  .v7-hero > .container{
    width: 1680px !important;
    min-width: 1680px !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .v7-hero__grid{
    width: 1680px !important;
    min-width: 1680px !important;
    min-height: 510px !important;
  }
}

/* Tablet / klein: ab hier bewusst in ein responsives Layout wechseln */
@media (max-width: 980px){
  .v7-hero > .container{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .v7-hero__grid{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 560px !important;
    background-size: cover !important;
    background-position: 62% center !important;
  }

  .v7-hero__copy{
    position: relative !important;
    width: min(100%, 680px) !important;
    padding: 34px 22px 22px !important;
  }

  .v7-hero__copy h1{
    font-size: 28px !important;
    max-width: 100% !important;
  }

  .v7-hero__grid::before{
    width: 100% !important;
    background: linear-gradient(180deg,
      rgba(248,248,246,.94) 0%,
      rgba(248,248,246,.86) 36%,
      rgba(248,248,246,.48) 68%,
      rgba(248,248,246,.08) 100%) !important;
  }

  .v7-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}