/* HABL Privatvermögen – Editorial Experience 2026
   Presentation layer only. Form/backend selectors and scripts remain unchanged. */
:root{--wine:#681f35;--wine2:#4b1628;--gold:#a98959}
body{-webkit-font-smoothing:antialiased}
.hero{background:linear-gradient(112deg,#f7f2eb 0%,#f7f2eb 57%,#e9ded3 100%);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(#a98959,#681f35);opacity:.65}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(54px,6.6vw,100px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.hero .eyebrow{letter-spacing:.23em}
.hero-lead{font-size:clamp(18px,1.65vw,22px);line-height:1.65}
.hero-visual img{border-radius:2px;box-shadow:0 32px 80px rgba(55,32,27,.17)}
.hero-note{border-radius:2px}
.editorial-bridge{background:#29201e;color:#fff9f1;padding:clamp(72px,9vw,130px) 0}
.editorial-bridge-grid{display:grid;grid-template-columns:minmax(170px,.34fr) 1fr;gap:clamp(25px,6vw,100px)}
.editorial-bridge .eyebrow{color:#d6b887;padding-top:12px}
.editorial-statement{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,4.3vw,66px);line-height:1.13;letter-spacing:-.035em;max-width:930px;margin-bottom:25px;text-wrap:balance}
.editorial-statement em{font-style:normal;color:#e3c8a6}
.editorial-support{font-size:clamp(17px,1.6vw,20px);line-height:1.7;max-width:730px;color:#e2d8ce}
.proof{border-bottom:1px solid var(--line)}
.proof-grid>div{transition:transform .25s ease}
@media(hover:hover){.proof-grid>div:hover{transform:translateY(-3px)}}
.recognition h2,.neutrality h2,.final-cta h2{text-wrap:balance}
.thoughts blockquote{letter-spacing:-.025em}
.btn,.header-cta{border-radius:2px;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.btn:focus-visible,.header-cta:focus-visible,.text-cta:focus-visible,.js-open-funnel:focus-visible{outline:3px solid #b39462;outline-offset:4px}
.iv-arrow{width:19px;height:19px;vertical-align:middle;display:inline-block}
@media(max-width:800px){.editorial-bridge-grid{grid-template-columns:1fr;gap:15px}.hero:before{width:3px}.hero h1{font-size:clamp(44px,11vw,74px)}.editorial-bridge{padding:76px 0}.editorial-statement{font-size:clamp(33px,8vw,51px)}}
@media(prefers-reduced-motion:reduce){.proof-grid>div,.btn,.header-cta{transition:none!important;transform:none!important}}

/* Premium hero 2026-10-14 – presentation only; existing funnel selectors intact */
.hero.hero-villa{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(750px,calc(100svh - 76px));padding:clamp(75px,8vw,125px) 0 85px;background:#f7f2eb;overflow:hidden}
.hero.hero-villa::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:url("assets/images/villa-hero.webp") right center/cover no-repeat}
.hero.hero-villa::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,#f7f2eb 0%,rgba(247,242,235,.98) 18%,rgba(247,242,235,.91) 33%,rgba(247,242,235,.57) 48%,rgba(247,242,235,.09) 71%,rgba(247,242,235,0) 100%)}
.hero.hero-villa .hero-grid{display:block;width:min(1390px,calc(100% - 88px))}
.hero.hero-villa .hero-copy{max-width:690px;position:relative;z-index:2}
.hero.hero-villa .hero-copy h1{font-size:clamp(61px,6.7vw,105px);line-height:.96;letter-spacing:-.05em;margin:0 0 26px;overflow-wrap:normal;text-wrap:initial}
.hero.hero-villa .hero-copy h1 span{color:#681f35}
.hero.hero-villa .hero-lead{max-width:535px;font-size:clamp(18px,1.65vw,23px);line-height:1.5;color:#514b46;margin:0}
.hero.hero-villa .hero-actions{margin-top:28px}
.hero.hero-villa .hero-actions .btn{display:inline-flex;gap:19px;min-height:62px;padding:15px 27px;border-radius:3px}
.hero-assurances{display:flex;flex-wrap:wrap;gap:12px 23px;margin-top:29px;font-size:13px;color:#665f57}
.hero-assurances span{display:inline-flex;align-items:center;gap:9px}
.hero-assurances span:before{content:"";width:15px;height:15px;flex:none;border:1px solid #a98959;border-radius:50%;background:radial-gradient(circle at center,#a98959 0 2px,transparent 2.5px)}
@media(max-width:800px){
.hero.hero-villa{min-height:0;padding:65px 0 260px;align-items:flex-start}
.hero.hero-villa::before{background-size:auto 67%;background-position:67% bottom}
.hero.hero-villa::after{background:linear-gradient(180deg,#f7f2eb 0%,rgba(247,242,235,.99) 31%,rgba(247,242,235,.94) 49%,rgba(247,242,235,.52) 66%,rgba(247,242,235,.06) 100%)}
.hero.hero-villa .hero-grid{width:min(100% - 40px,620px)}
.hero.hero-villa .hero-copy h1{font-size:clamp(51px,10.4vw,78px);line-height:1.02;margin-bottom:18px}
.hero.hero-villa .hero-lead{font-size:18px;line-height:1.5;max-width:440px}
.hero.hero-villa .hero-actions{margin-top:23px}
.hero.hero-villa .hero-actions .btn{min-height:56px;padding:13px 18px;font-size:15px}
.hero-assurances{margin-top:23px;gap:8px 15px;font-size:12px}
}
@media(max-width:420px){.hero.hero-villa{padding-top:43px;padding-bottom:215px}.hero.hero-villa .hero-copy h1{font-size:clamp(46px,11.8vw,58px)}.hero-assurances span:last-child{display:none}}

/* Ensure foreground controls remain above the decorative hero layers. */
.hero.hero-villa .hero-grid{position:relative;z-index:2}

/* FIX 2: Paint hero image as actual element background, avoiding pseudo-element stacking in Safari/file previews. */
.hero.hero-villa{background-color:#f7f2eb;background-image:linear-gradient(90deg,#f7f2eb 0%,rgba(247,242,235,.98) 17%,rgba(247,242,235,.89) 33%,rgba(247,242,235,.48) 53%,rgba(247,242,235,0) 77%),url("assets/images/villa-hero.webp");background-position:center,right center;background-size:cover,cover;background-repeat:no-repeat}
.hero.hero-villa::before,.hero.hero-villa::after{content:none!important;display:none!important}
@media(max-width:800px){.hero.hero-villa{background-image:linear-gradient(180deg,#f7f2eb 0%,rgba(247,242,235,.98) 30%,rgba(247,242,235,.87) 49%,rgba(247,242,235,.18) 78%,rgba(247,242,235,0) 100%),url("assets/images/villa-hero.webp");background-position:center,center bottom;background-size:cover,auto 75%}}

/* Mobile UX refinement 2026-10-14: presentation only, no form or script changes. */
@media (max-width:800px){
  .hero.hero-villa{
    background-color:#f7f2eb;
    background-image:linear-gradient(to bottom,#f7f2eb 0%,rgba(247,242,235,.98) 12%,rgba(247,242,235,.70) 32%,rgba(247,242,235,0) 57%),url("assets/images/villa-hero.webp");
    background-position:center bottom, 65% bottom;
    background-size:100% 340px,auto 340px;
    background-repeat:no-repeat;
    padding-bottom:340px;
  }
  .hero.hero-villa .hero-copy{background:transparent}
  .hero-assurances{color:#504840;font-size:12px;gap:10px 16px;line-height:1.5;margin-top:22px;position:relative;z-index:3}
  .hero-assurances span{white-space:nowrap}
  .header-cta{white-space:nowrap;max-width:none;line-height:1.2}
  .header-cta .header-cta-full{display:none}
  .header-cta .header-cta-short{display:inline}
}
@media (max-width:420px){
  .hero.hero-villa{padding-top:43px;padding-bottom:290px;background-size:100% 290px,auto 290px;background-position:center bottom, 65% bottom}
  .hero-assurances span:last-child{display:inline-flex}
  .hero-assurances{gap:8px 13px;font-size:11.5px}
  .header-cta{padding:11px 13px;font-size:12px}
}
@media (min-width:801px){.header-cta .header-cta-short{display:none}}