/* WGRCMS-Step-0042 Hero Cleanup / No Cartoon */
:root{
  --wgr-blue:#015da8;
  --wgr-dark:#09233b;
  --wgr-box:1180px;
}

/* gesamte vorherige Bastelgrafik neutralisieren */
.hero-safe-house,
.hero-safe-side,
.hero-safe-tree,
.hero-safe-hill,
.hero-safe-visual:before,
.hero-safe-visual:after,
.hero-mockup-visual:before,
.hero-mockup-visual:after,
.hero-mockup-visual .sun,
.hero-mockup-visual .hill,
.hero-mockup-visual .house-side,
.hero-mockup-visual .house-main,
.hero-mockup-visual .tree,
.wgr-hero-roof,
.house-scene,
.roof,
.building,
.green{
  display:none!important;
  content:none!important;
}

/* Hero seriös und ruhig */
.hero{
  min-height:680px!important;
  background:
    linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.90) 55%,rgba(255,255,255,.20) 100%),
    linear-gradient(135deg,#f8fcff 0%,#e8f3f8 42%,#dcebc8 100%)!important;
}

.hero-content{
  width:45%!important;
  max-width:540px!important;
  padding-top:88px!important;
}

.hero h1{
  font-size:56px!important;
  line-height:1.08!important;
}

/* Bildfläche wie Website-Mockup, aber ohne Comic */
.hero-visual{
  position:absolute!important;
  right:max(34px,calc((100% - var(--wgr-box))/2))!important;
  top:118px!important;
  width:590px!important;
  height:360px!important;
  border-radius:0 0 0 42px!important;
  overflow:hidden!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),
    linear-gradient(135deg,#d7ebf6 0%,#c5ddea 48%,#d9e9c5 100%)!important;
  box-shadow:0 24px 70px rgba(9,35,59,.18)!important;
}

/* wenn ein echtes Bild gesetzt ist */
.hero-photo{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

/* neutraler Foto-Platzhalter */
.hero-safe-visual,
.hero-mockup-visual{
  width:100%!important;
  height:100%!important;
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0)),
    linear-gradient(135deg,#d7ebf6 0%,#c5ddea 48%,#d9e9c5 100%)!important;
}

/* dezente Landschafts-/Gebäude-Anmutung ohne Kinderzeichnung */
.hero-safe-visual .wgr-photo-fallback,
.hero-mockup-visual .wgr-photo-fallback{
  display:block!important;
}

.hero-safe-visual::selection,
.hero-mockup-visual::selection{
  background:transparent!important;
}

/* Soft hills */
.hero-safe-visual .photo-hill,
.hero-mockup-visual .photo-hill{
  position:absolute!important;
  left:-8%!important;
  right:-8%!important;
  bottom:-20%!important;
  height:48%!important;
  border-radius:50% 50% 0 0!important;
  background:linear-gradient(180deg,#c5d979,#92bd57)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.26)!important;
}

/* blurred building silhouettes */
.hero-safe-visual .photo-building,
.hero-mockup-visual .photo-building{
  position:absolute!important;
  left:17%!important;
  bottom:21%!important;
  width:60%!important;
  height:34%!important;
  border-radius:6px 6px 0 0!important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.70) 0 10%,
      rgba(1,93,168,.10) 10% 12%,
      rgba(255,255,255,.70) 12% 22%,
      rgba(1,93,168,.10) 22% 24%,
      rgba(255,255,255,.70) 24% 34%,
      rgba(1,93,168,.10) 34% 36%,
      rgba(255,255,255,.70) 36% 46%,
      rgba(1,93,168,.10) 46% 48%,
      rgba(255,255,255,.70) 48% 58%,
      rgba(1,93,168,.10) 58% 60%,
      rgba(255,255,255,.70) 60% 70%,
      rgba(1,93,168,.10) 70% 72%,
      rgba(255,255,255,.70) 72% 82%,
      rgba(1,93,168,.10) 82% 84%,
      rgba(255,255,255,.70) 84% 100%
    ),
    rgba(235,226,200,.92)!important;
  box-shadow:0 18px 40px rgba(9,35,59,.12)!important;
  filter:saturate(.95)!important;
}

.hero-safe-visual .photo-building::before,
.hero-mockup-visual .photo-building::before{
  content:""!important;
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:-42%!important;
  height:44%!important;
  background:rgba(181,80,46,.88)!important;
  transform:skewX(-18deg)!important;
  border-radius:3px!important;
}

/* light vignette */
.hero-visual::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(1,93,168,.10)),
    radial-gradient(circle at 85% 18%,rgba(255,255,255,.50),rgba(255,255,255,0) 30%)!important;
  pointer-events:none!important;
}

/* Cards nicht in Button/Text schieben */
.quick-wrap{
  margin-top:-44px!important;
}

/* wenn alte Card-Position zu aggressiv ist */
.hero + .quick-wrap{
  position:relative!important;
  z-index:5!important;
}

/* mobile */
@media(max-width:980px){
  .hero{
    min-height:auto!important;
    padding-bottom:105px!important;
  }

  .hero-content{
    width:100%!important;
    max-width:none!important;
    padding-top:0!important;
  }

  .hero h1{
    font-size:42px!important;
  }

  .hero-visual{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    height:300px!important;
    margin-top:32px!important;
    border-radius:18px!important;
  }

  .quick-wrap{
    margin-top:-58px!important;
  }
}