/* WGRCMS-Step-0041 Hero Real Estate Polish */
:root{
  --wgr-blue:#015da8;
  --wgr-dark:#09233b;
  --wgr-box:1180px;
}

/* Hero wieder weg vom Cartoon-Look */
.hero{
  min-height:690px!important;
  background:
    linear-gradient(90deg,#fff 0%,#fff 33%,rgba(255,255,255,.92) 52%,rgba(255,255,255,.28) 100%),
    linear-gradient(135deg,#f6fbff 0%,#e8f3f8 38%,#dcebc8 100%)!important;
  position:relative!important;
}

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

.hero h1{
  font-size:58px!important;
  line-height:1.08!important;
  letter-spacing:.01em!important;
}

/* Rechts: echte Foto-Bühne statt Comic */
.hero-visual{
  position:absolute!important;
  right:max(34px,calc((100% - var(--wgr-box))/2))!important;
  top:92px!important;
  width:585px!important;
  height:425px!important;
  border-radius:0 0 0 44px!important;
  overflow:hidden!important;
  background:#d7eaf5!important;
  box-shadow:0 28px 80px rgba(9,35,59,.20)!important;
  z-index:1!important;
}

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

/* Fallback: kein Cartoon mehr, sondern ruhige Bild-Anmutung */
.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,.20),rgba(255,255,255,0)),
    linear-gradient(135deg,#dcecf5 0%,#c7dce8 48%,#d8e9c5 100%)!important;
}

/* Alte Comic-Elemente verstecken */
.hero-safe-house,
.hero-safe-side,
.hero-safe-tree,
.hero-safe-hill,
.hero-mockup-visual .house-main,
.hero-mockup-visual .house-side,
.hero-mockup-visual .tree,
.hero-mockup-visual .hill,
.hero-mockup-visual .sun{
  display:none!important;
}

/* Fallback-Bildfläche: abstrakte Wohnanlage, seriöser */
.hero-safe-visual:before,
.hero-mockup-visual:before{
  content:""!important;
  position:absolute!important;
  left:58px!important;
  right:58px!important;
  bottom:96px!important;
  height:168px!important;
  border-radius:6px 6px 0 0!important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.85) 0 9%,
      rgba(1,93,168,.16) 9% 10%,
      rgba(255,255,255,.85) 10% 19%,
      rgba(1,93,168,.16) 19% 20%,
      rgba(255,255,255,.85) 20% 29%,
      rgba(1,93,168,.16) 29% 30%,
      rgba(255,255,255,.85) 30% 39%,
      rgba(1,93,168,.16) 39% 40%,
      rgba(255,255,255,.85) 40% 49%,
      rgba(1,93,168,.16) 49% 50%,
      rgba(255,255,255,.85) 50% 59%,
      rgba(1,93,168,.16) 59% 60%,
      rgba(255,255,255,.85) 60% 69%,
      rgba(1,93,168,.16) 69% 70%,
      rgba(255,255,255,.85) 70% 79%,
      rgba(1,93,168,.16) 79% 80%,
      rgba(255,255,255,.85) 80% 89%,
      rgba(1,93,168,.16) 89% 90%,
      rgba(255,255,255,.85) 90% 100%
    ),
    #eadfbe!important;
  box-shadow:0 20px 42px rgba(9,35,59,.14)!important;
}

.hero-safe-visual:after,
.hero-mockup-visual:after{
  content:""!important;
  position:absolute!important;
  left:-60px!important;
  right:-60px!important;
  bottom:-48px!important;
  height:188px!important;
  border-radius:50% 50% 0 0!important;
  background:linear-gradient(180deg,#b9cf65,#86b95a)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28)!important;
}

.hero-visual .wgr-hero-roof{
  position:absolute!important;
  left:88px!important;
  right:88px!important;
  top:126px!important;
  height:72px!important;
  background:#b94f2d!important;
  transform:skewX(-20deg)!important;
  border-radius:3px!important;
  z-index:3!important;
}

/* Overlay auf echter/fallback Bildfläche */
.hero-visual:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(1,93,168,.12)),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.50),rgba(255,255,255,0) 30%)!important;
  pointer-events:none!important;
}

/* Quickcards etwas tiefer und professioneller */
.quick-wrap{
  margin-top:-58px!important;
}

.quick-grid{
  border-radius:12px!important;
  box-shadow:0 20px 55px rgba(9,35,59,.14)!important;
}

/* Hero Text zu großem Bild ausbalancieren */
.hero-text{
  max-width:500px!important;
  font-size:17px!important;
}

.hero-actions{
  margin-top:32px!important;
}

/* Original-Mockup: Karten nicht in Text reinquetschen */
@media(min-width:981px){
  .quick-wrap{
    transform:translateY(0)!important;
  }
}

/* mobile */
@media(max-width:980px){
  .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:320px!important;
    margin-top:34px!important;
    border-radius:18px!important;
  }
}