/*
 * PROJECT SOUNDTRACK – Patch 24.3
 * Startseiten-Hero links ausrichten
 *
 * Ursache:
 * .hero-content besitzt gleichzeitig die Klasse .container und max-width:820px.
 * Weil .container margin:auto verwendet, wurde der komplette Inhaltsblock
 * mittig zentriert. Jetzt bleibt der Container seitenbreit und nur der
 * eigentliche Text wird begrenzt.
 */

body.ps-home-page .hero{
  background-image:
    linear-gradient(
      90deg,
      rgba(5,5,5,.97) 0%,
      rgba(5,5,5,.90) 25%,
      rgba(5,5,5,.72) 44%,
      rgba(5,5,5,.24) 70%,
      rgba(5,5,5,.03) 100%
    ),
    url('../images/hero-project.webp');
  background-position:center right;
}

body.ps-home-page .hero-content{
  width:min(var(--max),96vw);
  max-width:var(--max);
  margin-inline:auto;
  padding-top:60px;
  padding-bottom:80px;
}

body.ps-home-page .hero-content>h1{
  max-width:900px;
}

body.ps-home-page .hero-content>p{
  max-width:720px;
}

body.ps-home-page .hero-content>.actions{
  max-width:900px;
}

/* Auf sehr großen Bildschirmen bleibt die Headline links an derselben
   Inhaltsachse wie Logo, Abschnitte und Footer statt in die Bildmitte zu rutschen. */
@media(min-width:1501px){
  body.ps-home-page .hero-content{
    padding-left:0;
    padding-right:0;
  }
}

@media(max-width:1100px){
  body.ps-home-page .hero-content>h1{
    max-width:760px;
  }

  body.ps-home-page .hero{
    background-position:62% center;
  }
}

@media(max-width:760px){
  body.ps-home-page .hero{
    background-image:
      linear-gradient(
        180deg,
        rgba(5,5,5,.35) 0%,
        rgba(5,5,5,.58) 40%,
        rgba(5,5,5,.96) 82%,
        #050505 100%
      ),
      url('../images/hero-project.webp');
    background-position:68% center;
  }

  body.ps-home-page .hero-content{
    width:90vw;
    padding-top:76px;
    padding-bottom:112px;
  }

  body.ps-home-page .hero-content>h1,
  body.ps-home-page .hero-content>p,
  body.ps-home-page .hero-content>.actions{
    max-width:none;
  }
}