/* Gemeinsame Landschafts-Heros der Uebersichtsseiten.
   Die Bilder sind dekorativ; Inhalt und Navigation bleiben davon unabhaengig. */
.landscape-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#eaf2f4;
}

.landscape-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.landscape-hero__media img{
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  object-fit:cover;
  object-position:var(--landscape-position,center);
  filter:saturate(1.04) contrast(1.015);
  transform:scale(1.025);
  animation:landscape-hero-drift 30s ease-in-out infinite alternate;
}

.landscape-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.landscape-hero > :not(.landscape-hero__media){
  position:relative;
  z-index:2;
}

/* Zentrierte Galerien: Die Landschaft bleibt an den Raendern deutlich
   sichtbar, waehrend die Mitte eine ruhige Leseflaeche bekommt. */
.vhero.landscape-hero,
.rhero.landscape-hero{
  min-height:430px;
  display:grid;
  place-items:center;
  padding:68px 0;
  border-bottom:1px solid rgba(181,198,213,.58);
}

.landscape-hero--center::after{
  background:
    radial-gradient(ellipse 58% 72% at 50% 48%,rgba(255,255,255,.93) 0%,rgba(255,255,255,.81) 39%,rgba(255,255,255,.31) 72%,rgba(255,255,255,.12) 100%),
    linear-gradient(180deg,rgba(245,250,252,.2),rgba(238,246,249,.45));
}

.landscape-hero--center .wrap{
  width:100%;
}

.landscape-hero--center h1{
  text-wrap:balance;
  text-shadow:0 1px 24px rgba(255,255,255,.72);
}

.landscape-hero--center p,
.landscape-hero--center .micro{
  text-shadow:0 1px 16px rgba(255,255,255,.9);
}

/* Branchen und Wissen liegen bereits in einem 1280-px-Container. Hier wird
   die Landschaft wie ein hochwertiges, grosszuegiges Hero-Panel inszeniert. */
.intro.landscape-hero{
  max-width:none;
  min-height:390px;
  display:flex;
  align-items:center;
  margin:22px 0 32px;
  padding:58px 56px;
  border:1px solid rgba(181,198,213,.62);
  border-radius:28px;
  box-shadow:0 28px 70px -46px rgba(15,35,65,.54);
}

.landscape-hero--left::after{
  background:
    linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 34%,rgba(255,255,255,.59) 58%,rgba(255,255,255,.11) 88%),
    linear-gradient(180deg,rgba(245,250,252,.12),rgba(235,244,246,.28));
}

.landscape-hero__copy{
  width:min(100%,760px);
}

.intro.landscape-hero h1{
  text-wrap:balance;
  text-shadow:0 1px 22px rgba(255,255,255,.76);
}

.intro.landscape-hero p{
  text-shadow:0 1px 14px rgba(255,255,255,.9);
}

.intro.landscape-hero .search{
  background:rgba(255,255,255,.86);
  border-color:rgba(181,198,213,.74);
  box-shadow:0 16px 34px -26px rgba(15,35,65,.45);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

@keyframes landscape-hero-drift{
  0%{transform:scale(1.025) translate3d(0,0,0)}
  100%{transform:scale(1.075) translate3d(-.55%,.35%,0)}
}

@media(max-width:760px){
  .vhero.landscape-hero,
  .rhero.landscape-hero{
    min-height:390px;
    padding:54px 0;
  }

  .intro.landscape-hero{
    min-height:410px;
    margin:16px 0 26px;
    padding:46px 30px;
    border-radius:22px;
  }

  .landscape-hero--left::after{
    background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.75) 70%,rgba(255,255,255,.32));
  }
}

@media(max-width:520px){
  .vhero.landscape-hero,
  .rhero.landscape-hero{
    min-height:360px;
    padding:44px 0;
  }

  .landscape-hero--center::after{
    background:rgba(255,255,255,.73);
  }

  .intro.landscape-hero{
    min-height:390px;
    padding:38px 22px;
    border-radius:18px;
  }

  .landscape-hero__media img{
    object-position:var(--landscape-mobile-position,var(--landscape-position,center));
  }
}

@media(prefers-reduced-motion:reduce){
  .landscape-hero__media img{
    animation:none;
    transform:scale(1.025);
  }
}