/*
 * WENSKY Kaufobjekt Hero 1.5.3
 * CI source of truth: WENSKY Immobilien Suchprofil 1.0.4 + XD artboard "Verkaufen Hero".
 * Exact XD specs used here: Playfair 54/56, SEO copy Hanken Light 18/23,
 * property meta Hanken Light 20, buttons 165x41 with 14px Hanken Light.
 */
.wkh-layout,
.wkh-layout *{box-sizing:border-box}

.wkh-layout{
  --wensky-ink:#101010;
  --wensky-blue:#2c395e;
  --wensky-ice:#f2faff;
  --wensky-border:#101010;
  --wensky-font-sans:"Wensky Hanken","Hanken Grotesk",Arial,sans-serif;
  --wensky-font-serif:"Wensky Playfair","Playfair Display",Georgia,serif;
  position:relative;
  width:100%;
  max-width:1920px;
  margin:0 auto;
  overflow:clip;
  background:#fff;
  color:var(--wensky-ink);
  font-family:var(--wensky-font-sans)!important;
  font-size:14px;
  font-weight:300;
  line-height:1.35;
  isolation:isolate;
}

.wkh-layout--fullbleed{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw)
}

/* ---------- Oberer Bereich ---------- */
.wkh-layout__intro{
  display:grid;
  grid-template-columns:48.10% 51.90%;
  align-items:start;
  padding-top:clamp(96px,6.6vw,126px)
}

.wkh-layout__intro-copy{
  min-width:0;
  padding:clamp(22px,1.4vw,27px) clamp(38px,5.8vw,112px) 0 clamp(44px,7.55vw,145px)
}

/* CI: Playfair Display Regular / Wensky Playfair, 54 px, 1.04, +.02em */
.wkh-layout h1.wkh-layout__heading,
.wkh-layout .wkh-layout__heading,
.wkh-layout h2.wkh-layout__object-title,
.wkh-layout .wkh-layout__object-title,
.wkh-layout .wkh-layout__object-title a{
  margin:0!important;
  padding:0!important;
  color:var(--wensky-ink)!important;
  font-family:var(--wensky-font-serif)!important;
  font-size:54px!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
  line-height:1.04!important;
  text-transform:none!important;
  text-decoration:none!important;
  font-synthesis:none!important
}

.wkh-layout__heading{width:min(100%,726px)}

/* XD "Verkaufen Hero": SEO-Fließtext = Hanken Grotesk Light 18 px / 23 px. */
.wkh-layout .wkh-layout__seo-copy,
.wkh-layout .wkh-layout__seo-copy p{
  color:var(--wensky-ink)!important;
  font-family:var(--wensky-font-sans)!important;
  font-size:18px!important;
  font-style:normal!important;
  font-weight:300!important;
  letter-spacing:0!important;
  line-height:23px!important;
  text-transform:none!important;
  font-synthesis:none!important
}

.wkh-layout__seo-copy{
  width:min(100%,553px);
  margin-top:55px
}

.wkh-layout__seo-copy p{
  margin:0 0 20px!important;
  padding:0!important
}

.wkh-layout__seo-copy p:last-child{margin-bottom:0!important}

/*
 * CI button = Suchprofil choice button:
 * Hanken Light 14, 41 px high, square 1 px border.
 * For this CTA/link the selected-state blue is used on hover/focus/active,
 * exactly as requested for the Kaufkunden/Suchkunden interaction.
 */
.wkh-layout a.wkh-layout__button,
.wkh-layout .wkh-layout__button{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  width:165px!important;
  min-width:165px!important;
  max-width:165px!important;
  height:41px!important;
  min-height:41px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:55px 0 0!important;
  padding:0 16px!important;
  border:.8px solid var(--wensky-border)!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--wensky-ink)!important;
  cursor:pointer!important;
  font-family:var(--wensky-font-sans)!important;
  font-size:14px!important;
  font-style:normal!important;
  font-weight:300!important;
  letter-spacing:0!important;
  line-height:1!important;
  text-align:left!important;
  text-decoration:none!important;
  text-transform:none!important;
  white-space:nowrap!important;
  opacity:1!important;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease!important
}

.wkh-layout a.wkh-layout__button:hover,
.wkh-layout a.wkh-layout__button:focus,
.wkh-layout a.wkh-layout__button:active,
.wkh-layout .wkh-layout__button:hover,
.wkh-layout .wkh-layout__button:focus,
.wkh-layout .wkh-layout__button:active{
  border-color:var(--wensky-blue)!important;
  background:var(--wensky-blue)!important;
  color:var(--wensky-ice)!important;
  text-decoration:none!important;
  opacity:1!important
}

.wkh-layout a.wkh-layout__button:focus-visible,
.wkh-layout .wkh-layout__button:focus-visible{
  border-color:var(--wensky-blue)!important;
  background:var(--wensky-blue)!important;
  color:var(--wensky-ice)!important;
  outline:3px solid #6b87ce!important;
  outline-offset:3px!important
}

.wkh-layout__editorial-media{
  width:100%;
  aspect-ratio:979.3184 / 699.4001;
  margin:0;
  overflow:hidden;
  background:#eee
}

.wkh-layout__editorial-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center
}

/* ---------- Ausgewähltes Objekt ---------- */
.wkh-layout__featured{
  display:grid;
  grid-template-columns:50% 50%;
  align-items:stretch;
  margin-top:clamp(58px,4.8vw,92px)
}

.wkh-layout__object-media{
  display:block;
  width:100%;
  min-width:0;
  aspect-ratio:951.2443 / 1070.5933;
  overflow:hidden;
  background:#eee;
  color:inherit;
  text-decoration:none!important
}

.wkh-layout__object-image,
.wkh-layout__object-placeholder{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center
}

.wkh-layout__object-copy{
  display:flex;
  min-width:0;
  align-items:center;
  padding:0 clamp(44px,7vw,134px) 4% clamp(80px,12.2vw,234px)
}

.wkh-layout__object-inner{width:min(100%,726px)}

.wkh-layout__object-title a:hover,
.wkh-layout__object-title a:focus-visible{opacity:.65!important}

/* XD object data: 4.190.000€—366qm—1741qm = Hanken Light 20 px. */
.wkh-layout .wkh-layout__meta,
.wkh-layout .wkh-layout__meta span{
  color:var(--wensky-ink)!important;
  font-family:var(--wensky-font-sans)!important;
  font-size:20px!important;
  font-style:normal!important;
  font-weight:300!important;
  letter-spacing:0!important;
  line-height:1.25!important;
  text-transform:none!important;
  font-synthesis:none!important
}

.wkh-layout__meta{
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:0;
  margin:8px 0 0!important;
  padding:0!important
}

.wkh-layout__dash{margin:0!important}
.wkh-layout__button--object{margin-top:55px!important}

.wkh-admin-note{
  padding:14px 16px;
  border:1px solid #dcdcde;
  background:#fff;
  color:#1d2327;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

@media (max-width:1100px){
  .wkh-layout__intro-copy{padding-left:32px;padding-right:32px}
  .wkh-layout h1.wkh-layout__heading,
  .wkh-layout .wkh-layout__heading,
  .wkh-layout h2.wkh-layout__object-title,
  .wkh-layout .wkh-layout__object-title,
  .wkh-layout .wkh-layout__object-title a{font-size:46px!important}
  .wkh-layout__object-copy{padding-left:clamp(62px,9vw,116px);padding-right:38px}
}

@media (max-width:820px){
  .wkh-layout,
  .wkh-layout--fullbleed{width:100%;max-width:100%;margin-left:0;margin-right:0}
  .wkh-layout__intro{display:flex;flex-direction:column;padding-top:0}
  .wkh-layout__intro-copy{order:1;width:100%;padding:52px 32px 70px}
  .wkh-layout__editorial-media{order:0;aspect-ratio:4/3}
  .wkh-layout h1.wkh-layout__heading,
  .wkh-layout .wkh-layout__heading,
  .wkh-layout h2.wkh-layout__object-title,
  .wkh-layout .wkh-layout__object-title,
  .wkh-layout .wkh-layout__object-title a{font-size:clamp(38px,10vw,50px)!important;line-height:1.02!important}
  .wkh-layout__seo-copy{margin-top:42px}
  .wkh-layout .wkh-layout__seo-copy,
  .wkh-layout .wkh-layout__seo-copy p{font-size:18px!important;line-height:1.35!important}
  .wkh-layout a.wkh-layout__button,
  .wkh-layout .wkh-layout__button{margin-top:42px!important}
  .wkh-layout__featured{grid-template-columns:1fr;margin-top:70px}
  .wkh-layout__object-media{aspect-ratio:4/5}
  .wkh-layout__object-copy{padding:52px 32px 72px}
  .wkh-layout__button--object{margin-top:42px!important}
}

@media (max-width:420px){
  .wkh-layout__intro-copy,
  .wkh-layout__object-copy{padding-left:24px;padding-right:24px}
  .wkh-layout .wkh-layout__seo-copy,
  .wkh-layout .wkh-layout__seo-copy p{font-size:17px!important}
  .wkh-layout .wkh-layout__meta,
  .wkh-layout .wkh-layout__meta span{font-size:18px!important}
}
