/* Home page: the sections below the four full-screen pictures (the 1-2-3 boxes, the three
   cards, the news) use more of the screen than the theme's 1280px column, with small side
   margins, so the boxes, cards and news rows are bigger. */
.page-template-startseite {
  --home-gutter: 32px;
}
/* style.css caps this section itself at 1280px too */
body.page-template-startseite section.img-text-col-3 {
  max-width: none;
}
body.page-template-startseite section.img-text-col-3 > article,
body.page-template-startseite section.img-teaser-col-3 > article,
body.page-template-startseite .news-split__inner {
  width: calc(100% - 2 * var(--home-gutter));
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
/* The three cards (Karriere, Standorte, Presse): the pictures as they are. The theme
   multiplied them with a blue-grey layer at 90%, which made them very dark. A soft shade
   stays behind the white titles only, so they read on bright pictures too. */
body.page-template-startseite section.img-teaser-col-3 article .layer-color {
  opacity: 1;
  background-color: transparent;
  background-blend-mode: normal;
}
body.page-template-startseite section.img-teaser-col-3 .teaser-headline {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}
@media (max-width: 1280px) {
  .page-template-startseite {
    --home-gutter: 24px;
  }
}
@media (max-width: 767px) {
  .page-template-startseite {
    --home-gutter: 16px;
  }
}
/* The three cards (Karriere, Standorte, Presse) without any animation: they no longer slide
   in on scroll (no "staggered" class, so custom.js leaves them alone), and nothing moves or
   fades on hover. Their look stays as before. */
body.page-template-startseite section.img-teaser-col-3,
body.page-template-startseite section.img-teaser-col-3 * {
  transition: none !important;
  animation: none !important;
}
@media (min-width: 768px) {
  /* style.css gave the cards this through .staggered */
  body.page-template-startseite .img-teaser-col-3 .col-4.wi-teaser-card {
    overflow: hidden;
  }
  /* style.css slid the arrow in on hover */
  body.page-template-startseite .img-teaser-col-3 .teaser-headline:hover svg {
    margin-left: -20px;
  }
}