/* Eingangsbild über die volle Fensterbreite und -höhe, auch über der Seitenleiste.
   Die Sektion liegt dafür ausserhalb von .site-layout, direkt unter dem Header. */
.home .photo-hero{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  aspect-ratio:auto;
  height:calc(100vh - 70px);
  height:calc(100svh - 70px);
  min-height:520px;
}
.home .photo-hero img{object-position:center 32%}
/* Bei voller Höhe darf der Verlauf das Bild nicht mehr fast ganz zudecken. */
.home .photo-hero::after{
  background:linear-gradient(0deg,
    rgba(10,10,11,.98) 0%,
    rgba(10,10,11,.70) 26%,
    rgba(10,10,11,.14) 58%,
    rgba(10,10,11,0) 84%) !important;
}
.home .hero-content{
  max-width:1700px;
  margin:0 auto;
  padding:0 3.5% 56px;
}
.home .hero-content h1{font-size:clamp(36px,4.6vw,68px);max-width:24ch;text-transform:none;margin-bottom:38px}
.home .hero-content .hero-text-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  width:min(1100px,100%);
  margin:0 auto;
  padding-top:0;
  text-align:center;
}
.home .hero-content .hero-promise{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:.45em;
  max-width:none;
  margin:0 auto;
  color:#f4f3ef;
  font-size:clamp(18px,1.55vw,23px);
  font-weight:600;
  line-height:1.45;
  text-align:center;
}
.home .hero-content .hero-detail{
  max-width:780px;
  margin:0 auto;
  color:#d8d7d3;
  font-size:clamp(15px,1.16vw,18px);
  line-height:1.55;
  text-align:center;
}
@media(max-width:800px){
  .home .photo-hero{
    height:calc(100vh - 62px);
    height:calc(100svh - 62px);
    min-height:460px;
  }
  .home .hero-content{padding:0 24px 36px}
  .home .hero-content .hero-text-grid{gap:16px;max-width:650px;padding-top:0}
  .home .hero-content .hero-promise,.home .hero-content .hero-detail{text-align:center}
  .home .hero-content .hero-promise{white-space:normal}
}

@media(max-width:600px){
  .home .photo-hero{min-height:calc(100svh - 62px);height:auto;padding-top:0}
  .home .photo-hero img{object-position:center 27%}
  .home .hero-content{padding:54vh 20px 28px}
  .home .hero-content h1{font-size:clamp(32px,9.5vw,44px);line-height:1.05;max-width:14ch;margin-bottom:22px}
  .home .hero-content p{font-size:15px;line-height:1.5;margin-bottom:18px}
  .home .hero-content .hero-promise{font-size:18px;margin-bottom:12px}
  .home .hero-content .hero-detail{font-size:15px;margin-bottom:0}
  .home .bar-inline-2{align-items:stretch;gap:14px;margin-top:14px}
  .home .bar-inline-2 .nl-form{width:100%}
  .home .bar-inline-2 .nl-form input{width:auto;flex:1;min-width:0}
  .home .bar-inline-2 .nl-form button.submit{width:58px;flex:0 0 58px}
  .home .bar-label{margin-top:0;font-size:10px}
}


@media(max-width:600px){
  .home .photo-hero{display:block;min-height:0;height:auto;padding:0;background:#0a0a0a;overflow:hidden}
  .home .photo-hero picture{display:block;position:relative;width:100%;aspect-ratio:2.04/1;overflow:hidden}
  .home .photo-hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(100%)}
  .home .photo-hero::after{display:none}
  .home .hero-content{position:relative;padding:30px 20px 34px;background:#0a0a0a}
}