/* Alleen de vergelijkingsbalk en de alternatieve heroes. */
.hero-picker{background:#f1f0f9;border-bottom:1px solid #f1f0f9;color:#303354;padding:12px 24px;font:14px/1.4 Roboto,Arial,sans-serif}.hero-picker-inner{max-width:1170px;margin:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}.hero-picker label{font-weight:700}.hero-picker select{font:inherit;color:inherit;background:white;border:1px solid #f1f0f9;border-radius:6px;padding:11px;min-width:240px;max-width:100%;min-height:44px}.hero-picker a{display:inline-grid;place-items:center;width:44px;height:44px;background:#fff;border:1px solid #f1f0f9;border-radius:6px;font-size:20px}.hero-picker .picker-note{margin-left:auto;color:#6663b1;font-size:12px}.hero-picker .picker-count{font-size:12px;letter-spacing:1px}.modern-hero{--accent:#6663b1;position:relative;color:#303354;background:#f1f0f9;isolation:isolate;overflow:hidden}.modern-hero .mh-shell{max-width:1170px;width:calc(100% - 48px);margin:auto;min-height:680px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:72px 0}.mh-kicker{display:flex;align-items:center;gap:10px;font:600 12px/1.5 Roboto,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent);margin-bottom:25px}.mh-kicker:before{content:'';width:8px;height:8px;border-radius:50%;background:#6663b1}.modern-hero h1{font:400 clamp(42px,4vw,58px)/1.12 Prata,Georgia,serif;letter-spacing:-1.8px;margin:0 0 25px}.modern-hero h1 em{font-style:normal;color:var(--accent)}.mh-intro{font-size:18px;line-height:1.75;color:#6663b1;max-width:490px}.mh-actions{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}.modern-hero .button{background:#303354;border-color:#303354;border-radius:7px;padding:18px 24px;text-transform:none;font-size:15px;min-height:54px;gap:25px}.modern-hero .button:after{content:'↗';font-size:20px;line-height:1}.modern-hero .button:hover{background:#6663b1;border-color:#6663b1}.mh-link{font-size:14px;font-weight:600;border-bottom:1px solid currentColor;padding:8px 0}.mh-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;font-size:12px;color:#6663b1}.mh-trust span:before{content:'✓';color:#6663b1;margin-right:7px}.mh-photo{position:relative;min-width:0}.mh-photo>img{width:100%;height:470px;object-fit:cover;border-radius:20px}.mh-caption{position:absolute;left:24px;bottom:24px;background:white;padding:19px 24px;border-radius:10px;box-shadow:0 12px 30px #30335412;font-size:13px;line-height:1.7}.mh-caption strong{display:block;font-size:18px}.mh-caption i{font-style:normal;color:#6663b1}.mh-mini{font-size:12px;color:#6663b1;margin-top:18px}.mh-rule{height:1px;background:#d7dfdc;margin:28px 0}.mh-price{font:400 48px/1 Prata,serif;letter-spacing:-2px}.mh-price small{font:400 13px/1.5 Roboto,sans-serif;letter-spacing:0}.mh-photo-label{position:absolute;top:25px;left:25px;background:#fff;padding:8px 14px;border-radius:100px;font-size:12px}.mh-number{font:400 100px/1 Prata,serif;color:#6663b1}.mh-label{font-size:12px;text-transform:uppercase;letter-spacing:2px}.mh-split-note{display:flex;justify-content:space-between;align-items:center;gap:20px}.mh-checks{padding:0;list-style:none;font-size:16px;line-height:2.4;margin-top:22px}.mh-checks li:before{content:'✓';margin-right:12px;color:#6663b1}
/* 01 — rustige tweedeling */
.variant-1 .mh-photo{padding:0 0 25px 25px}.variant-1 .mh-photo:before{content:'';position:absolute;inset:35px 25px 0 0;background:#f1f0f9;z-index:-1;border-radius:20px}.variant-1 .mh-photo>img{object-position:60% center}.variant-1 .mh-caption{left:0;bottom:0}
/* 02 — donker panorama */
.variant-2{background:#303354;color:white}.variant-2 .mh-shell{position:relative;display:block;min-height:710px;padding-top:105px;padding-bottom:105px}.variant-2 .mh-copy{width:57%;position:relative;z-index:1}.variant-2 .mh-background{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}.variant-2:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#303354fa 5%,#303354d9 42%,#30335415 100%)}.variant-2 h1{font-size:66px}.variant-2 h1 em,.variant-2 .mh-kicker{color:#6663b1}.variant-2 .mh-intro,.variant-2 .mh-trust{color:#d4d9df}.variant-2 .button{background:#6663b1;border-color:#6663b1;color:#303354}.variant-2 .mh-trust span:before{color:#6663b1}
/* 03 — redactioneel, met veel wit */
.variant-3{background:#fff}.variant-3 .mh-shell{display:block;padding-top:65px;padding-bottom:45px}.variant-3 .mh-copy{display:grid;grid-template-columns:1.25fr 1fr;gap:90px;align-items:center}.variant-3 h1{font-size:62px}.variant-3 .mh-photo{margin-top:35px}.variant-3 .mh-photo>img{height:265px;border-radius:10px;object-position:center 55%}.variant-3 .mh-kicker{grid-column:1/-1;margin-bottom:-65px}.variant-3 .mh-copy h1{padding-top:45px}.variant-3 .mh-actions{margin-top:22px}.variant-3 .mh-trust{margin-top:20px}
/* 04 — mintgroen, centraal */
.variant-4{background:#f1f0f9}.variant-4 .mh-shell{display:block;text-align:center;max-width:1000px;padding-top:65px}.variant-4 .mh-kicker,.variant-4 .mh-actions,.variant-4 .mh-trust{justify-content:center}.variant-4 h1{max-width:800px;margin:0 auto 22px;font-size:60px}.variant-4 .mh-intro{margin:auto;max-width:620px}.variant-4 .mh-photo{margin:45px auto 0;max-width:840px}.variant-4 .mh-photo>img{height:240px;border-radius:150px 150px 18px 18px;object-position:center 60%}.variant-4 .mh-caption{left:auto;right:-25px;bottom:25px;text-align:left}
/* 05 — bento met drie informatieblokken */
.variant-5{background:#fff}.variant-5 .mh-shell{grid-template-columns:1.1fr 1fr;gap:55px}.mh-bento{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mh-bento .mh-photo{grid-column:1/-1}.mh-bento .mh-photo>img{height:300px}.mh-tile{background:#f1f0f9;border-radius:18px;padding:28px 22px;min-height:165px}.mh-tile.dark{background:#303354;color:#fff}.mh-tile .mh-label{display:block;letter-spacing:1px;margin-bottom:20px}.mh-tile p{font-size:12px;margin-top:12px;opacity:.8}.mh-tile .mh-number{font-size:46px}.variant-5 h1{font-family:Roboto,Arial,sans-serif;font-weight:600;font-size:66px;letter-spacing:-2.8px}
/* 06 — architecturale boog */
.variant-6{background:#f3f0ea}.variant-6 .mh-shell{grid-template-columns:1fr 1.05fr;gap:100px}.variant-6 .mh-photo{grid-column:1;grid-row:1}.variant-6 .mh-copy{grid-column:2;grid-row:1}.variant-6 .mh-photo>img{height:520px;border-radius:240px 240px 12px 12px}.variant-6 .mh-caption{left:-20px;bottom:30px}.variant-6 h1 em{color:#6663b1}.variant-6 .mh-kicker{color:#6663b1}
/* 07 — typografie, geen foto */
.variant-7{background:#303354;color:white}.variant-7 .mh-shell{grid-template-columns:1.4fr 1fr;gap:100px}.variant-7 h1{font:600 78px/1.05 Roboto,sans-serif;letter-spacing:-3px}.variant-7 h1 em{color:#6663b1}.variant-7 .mh-intro,.variant-7 .mh-trust{color:#c6ccda}.variant-7 .mh-kicker{color:#6663b1}.variant-7 .button{background:#6663b1;border-color:#6663b1;color:#303354}.mh-address{position:relative;background:#fff;color:#303354;border-radius:16px;padding:36px;transform:rotate(3deg);box-shadow:18px 18px 0 #6663b1;min-height:340px}.mh-address .mh-address-logo{font-size:24px;font-weight:600}.mh-address .mh-address-logo em{font-style:normal;color:#6663b1}.mh-address .mh-address-line{margin-top:35px;border-top:1px solid #e4e8e6;padding-top:25px}.mh-address .mh-address-line strong{display:block;font-family:Prata,serif;font-size:28px;margin-bottom:9px}.mh-address .mh-stamp{display:inline-block;background:#f1f0f9;color:#6663b1;padding:7px 12px;border-radius:5px;margin-top:26px;font-size:12px}
/* 08 — prijs als helder vertrekpunt */
.variant-8{background:#f1f0f9}.variant-8 .mh-shell{grid-template-columns:1.2fr 1fr;gap:95px}.mh-offer{background:#fff;border:1px solid #f1f0f9;padding:36px;border-radius:18px;box-shadow:0 18px 60px #30335408}.mh-offer .mh-price{font-size:68px;margin:24px 0}.mh-offer .mh-label{color:#6663b1}.mh-offer .button{width:100%;justify-content:space-between}.mh-offer .mh-mini{text-align:center}.variant-8 .mh-photo{margin-top:32px}.variant-8 .mh-photo>img{height:140px;border-radius:10px;object-position:center 65%}.variant-8 .mh-copy h1{font-size:59px}
/* 09 — asymmetrisch beeld met mint paneel */
.variant-9{background:#f1f0f9}.variant-9 .mh-shell{min-height:710px;grid-template-columns:1fr 1fr;position:relative}.variant-9 .mh-copy{padding:35px 0}.variant-9 .mh-photo{position:absolute;left:55%;width:calc(45% + (100vw - 100%)/2);top:0;bottom:0}.variant-9 .mh-photo>img{height:100%;border-radius:140px 0 0 0;object-position:60% center}.variant-9 h1{font-size:62px}.variant-9 .mh-caption{bottom:40px;left:35px}
/* 10 — compacte hero met stappenstrook */
.variant-10{background:#fff}.variant-10 .mh-shell{padding:60px 0 35px;min-height:540px}.variant-10 h1{font-family:Roboto,sans-serif;font-weight:600;font-size:62px;letter-spacing:-2px}.variant-10 .mh-photo>img{height:370px;border-radius:12px}.mh-route{max-width:1170px;width:calc(100% - 48px);margin:0 auto 45px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dde5e1;padding-top:27px;gap:35px}.mh-route article{display:flex;gap:15px;align-items:flex-start}.mh-route b{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:#f1f0f9;color:#6663b1;font-size:12px}.mh-route strong{font-size:14px;display:block}.mh-route p{font-size:12px;color:#6663b1;margin-top:4px}
@media(min-width:801px) and (max-width:1150px){.modern-hero .mh-shell{gap:40px}.modern-hero h1{font-size:48px}.variant-3 .mh-copy{gap:40px}.mh-offer{padding:25px}.variant-7 h1{font-size:62px}.mh-trust{gap:12px}.variant-9 .mh-copy{padding-right:25px}}
@media(max-width:800px){.hero-picker{padding:10px 16px}.hero-picker-inner{gap:8px}.hero-picker label{width:100%;font-size:12px}.hero-picker select{flex:1;min-width:0;width:180px}.hero-picker .picker-note{display:none}.hero-picker .picker-count{display:none}.modern-hero .mh-shell{width:calc(100% - 36px);min-height:0;grid-template-columns:1fr;gap:32px;padding:40px 0}.modern-hero h1,.variant-2 h1,.variant-3 h1,.variant-4 h1,.variant-5 h1,.variant-6 h1,.variant-7 h1,.variant-8 .mh-copy h1,.variant-9 h1,.variant-10 h1{font-size:clamp(36px,9.2vw,52px);letter-spacing:-1.3px}.mh-kicker{font-size:10px;margin-bottom:18px;letter-spacing:1.2px}.mh-intro{font-size:16px}.mh-actions{gap:18px;margin-top:24px}.modern-hero .button{min-height:50px;padding:15px 20px}.mh-trust{font-size:11px;gap:10px 16px;margin-top:24px}.mh-photo>img{height:300px}.mh-caption{padding:14px 18px;left:16px;bottom:16px}.mh-caption strong{font-size:16px}.variant-1 .mh-photo{padding:0 0 18px 18px}.variant-2 .mh-shell{padding:55px 0;min-height:600px}.variant-2 .mh-copy{width:100%}.variant-2:after{background:linear-gradient(90deg,#303354ed,#303354ad)}.variant-2 .mh-background{object-position:62% center}.variant-3 .mh-copy{display:block}.variant-3 .mh-kicker{margin-bottom:18px}.variant-3 .mh-copy h1{padding:0}.variant-3 .mh-photo{margin-top:30px}.variant-3 .mh-photo>img{height:230px}.variant-4 .mh-shell{text-align:left}.variant-4 .mh-kicker,.variant-4 .mh-actions,.variant-4 .mh-trust{justify-content:flex-start}.variant-4 .mh-photo{margin-top:30px}.variant-4 .mh-photo>img{height:230px;border-radius:90px 90px 14px 14px}.variant-4 .mh-caption{right:0;bottom:12px;font-size:11px}.mh-bento{gap:12px}.mh-bento .mh-photo>img{height:230px}.mh-tile{padding:20px 16px;min-height:155px}.mh-tile .mh-price{font-size:38px}.mh-tile .mh-number{font-size:40px}.mh-tile .mh-label{font-size:10px}.variant-6 .mh-copy{grid-column:auto;grid-row:1}.variant-6 .mh-photo{grid-column:auto;grid-row:2;padding:0 18px}.variant-6 .mh-photo>img{height:350px}.variant-6 .mh-caption{left:0;bottom:20px}.variant-7 .mh-shell{gap:42px;padding-bottom:60px}.mh-address{margin:0 20px 0 5px;padding:25px;min-height:290px;box-shadow:12px 12px 0 #6663b1}.mh-address .mh-address-line strong{font-size:25px}.mh-offer{padding:25px}.mh-offer .mh-price{font-size:58px}.variant-8 .mh-photo{margin-top:22px}.variant-9 .mh-photo{position:relative;left:auto;top:auto;bottom:auto;width:100%}.variant-9 .mh-photo>img{height:300px;border-radius:80px 0 0 0}.variant-9 .mh-copy{padding:0}.variant-9 .mh-caption{left:15px;bottom:15px}.variant-10 .mh-photo>img{height:260px}.mh-route{width:calc(100% - 36px);grid-template-columns:1fr;gap:20px}.mh-checks{font-size:14px}}
@media(prefers-reduced-motion:reduce){.modern-hero *{scroll-behavior:auto}}
@media(max-width:380px){.mh-tile .mh-price{font-size:30px;letter-spacing:-1px;white-space:nowrap}.mh-offer .mh-price{font-size:48px}.mh-offer .mh-price small{display:block;margin-top:10px}.mh-address .mh-address-line strong{font-size:23px}.mh-address{padding:22px}}
