/* ============================================================ V6 · CENTRALE PAGE-CSS · CMS-veld: "Theme CSS" (pagina) Lichte, self-contained pagina-opmaak; alles gescoped op .dspg. De globale header + het in-page menu staan in header-v6.css. ============================================================ */ .dspg{ --color-ink:#3D282D; --color-sand:#FBF7F3; --color-accent:#f1b434; --color-link:#416e86; --color-sage:#ebedea; --font-sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-serif:Georgia, "Times New Roman", Times, serif; --inset:clamp(20px,4vw,60px); --maxw:1520px; /* max. contentbreedte */ font-family:var(--font-sans); color:var(--color-ink); /* pagina start sand en verloopt naar wit */ background:linear-gradient(180deg,#FBF7F3 0%,#FBF7F3 28%,#ffffff 70%); overflow-x:clip; } .dspg *{box-sizing:border-box} .dspg img{max-width:100%;display:block} /* metric-matched Georgia-fallback: zelfde optische grootte als Minion (x-hoogte) */ @font-face{font-family:"Georgia-min";src:local("Georgia");size-adjust:90%} .dspg--v6{--font-minion-pro-semibold:var(--font-serif)} /* V1 (home zonder minio): titels in Georgia op Minion-grootte */ .dspg--v6:not(.dspg--minio){--font-serif:"Georgia-min","Times New Roman",Times,serif} /* V2: Minion, met de metric-matched Georgia als echte fallback (Source Serif 4 = preview stand-in) */ .dspg--minio{--font-serif:"minion-pro-display","minion-pro","Georgia-min","Times New Roman",Times,serif} /* --- container + verticale ritmiek (110px tussen secties, 86px boven de eerste) --- */ .dspg-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--inset)} .dspg-wrap>section,.dspg-wrap>aside{margin-top:0;margin-bottom:110px} .dspg-wrap>:first-child{margin-top:86px} /* mobiel: in-page menu (de balk met pijltjes) direct onder de header, dus bóven de hero. Op desktop blijft de dsov-bar in de DOM-volgorde (onder de hero). */ @media(max-width:1024px){ .dspg{display:flex;flex-direction:column} .dspg>*{min-width:0} /* flex-kinderen mogen krimpen, anders overflow rechts */ .dspg>.ds-inpage{order:-1} } /* --- typografie --- */ .dspg-h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:.1px;margin:0 0 24px} /* 0-specifieke fallback voor losse paragrafen; component-regels winnen altijd */ :where(.dspg p){line-height:1.65;color:#4a3f40} /* --- CTA-knoppen --- */ .dspg .ds-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:var(--font-sans);font-weight:600;font-size:1rem;letter-spacing:.2px;padding:14px 22px;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,color .18s} .dspg .ds-cta::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-top:-1px;flex-shrink:0} .dspg .ds-cta-gids,.dspg .ds-cta-showroom{background:var(--color-link);color:#fff;border-color:var(--color-link)} .dspg .ds-cta-gids:hover,.dspg .ds-cta-showroom:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)} .dspg .ds-cta-thuis{background:transparent;color:var(--color-link);border-color:var(--color-link)} .dspg .ds-cta-thuis:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)} /* ============================================================ HERO (pt-overview-gedrag) ============================================================ */ .dspg-hero{position:relative;background:transparent} .dspg-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* DESKTOP: header (los) + hero vullen samen het scherm; kaart rechts, verticaal gecentreerd */ .dspg-hero-inner{position:relative;z-index:3;max-width:1520px;margin:0 auto;padding:24px var(--inset);display:flex;align-items:center;justify-content:flex-end;min-height:calc(100vh - var(--dshx-h,107px));box-sizing:border-box} /* --- CTA-kaart --- */ .dspg-card{flex:0 0 auto;width:480px;max-width:100%;margin-right:50px;background:#fff;border-radius:6px;padding:24px 28px 22px;box-shadow:0 24px 56px rgba(0,0,0,.30)} .dspg-card h1,.dspg-card h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 18px} .dspg-card-bullets{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px} .dspg-card-bullets li{position:relative;padding-left:26px;color:var(--color-ink);font-size:15px;line-height:1.4} .dspg-card-bullets li::before{content:"";position:absolute;left:2px;top:3px;width:7px;height:12px;border-right:2.5px solid var(--color-accent);border-bottom:2.5px solid var(--color-accent);transform:rotate(45deg)} .dspg-card-formtitle{font-family:var(--font-sans);font-weight:400;font-size:22px;line-height:1.25;color:var(--color-ink);margin:10px 0 12px} .dspg-card-form{display:flex;flex-direction:column;gap:10px;margin-bottom:4px} .dspg-card-form input{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #d4d4d4;border-radius:6px;font-family:var(--font-sans);font-size:14px;color:var(--color-ink);background:rgba(251,247,243,.5)} .dspg-card-form input::placeholder{color:#9e9e9e} .dspg-card-form input:focus{outline:none;border-color:var(--color-link);box-shadow:0 0 0 2px rgba(65,110,134,.15)} .dspg-card-row{display:flex;gap:10px} .dspg .dspg-card{min-width:0} .dspg .dspg-card-form input,.dspg .dspg-card-form select{min-width:0} .dspg .dspg-card-form .dspg-card-in-aanhef{flex:0 0 auto;width:36%;min-width:104px} .dspg .dspg-card-form .dspg-card-in-aanhef + input{flex:1 1 0;min-width:0} .dspg-card-in-nr{max-width:96px} .dspg-card-in-pc{max-width:120px} .dspg-card-btn{width:100%;margin-top:4px} .dspg-link-alt{position:relative;display:inline-block;margin-top:12px;margin-left:16px;font-family:var(--font-sans);font-weight:400;font-size:14px;color:var(--color-link);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} .dspg-link-alt::before{content:"";position:absolute;left:-16px;top:50%;width:7px;height:7px;border-right:1.25px solid currentColor;border-top:1.25px solid currentColor;transform:translateY(-50%) rotate(45deg)} .dspg-link-alt:hover{color:#254151} /* --- gids-kaart: mockup naast lopende tekst --- */ .dspg .dspg-card-bulletrow{display:flex;align-items:center;gap:18px;margin:-8px 0 10px} .dspg .dspg-card-bulletrow .dspg-card-bullettext{margin:0;flex:1 1 auto;font-family:var(--font-sans);font-size:15px;line-height:1.55;color:var(--color-ink)} .dspg .dspg-card-mock{flex:0 0 auto;width:170px;height:auto} /* --- gids-kaart: in-kaart bedankt na verzenden (JS zet .is-done op de kaart) --- */ .dspg .dspg-card-thanks{display:none;text-align:center;padding:8px 0} .dspg .dspg-card.is-done .dspg-card-live{display:none} .dspg .dspg-card.is-done .dspg-card-thanks{display:block} .dspg .dspg-card-thanks-icon{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--color-sand);color:var(--color-accent);margin:0 0 16px} .dspg .dspg-card-thanks-icon svg{width:32px;height:32px;display:block} .dspg--v6 .dspg-card-thanks h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,3.4vw,30px);line-height:1.2;color:var(--color-ink);margin:0 0 10px} .dspg .dspg-card-thanks p{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--color-ink);margin:0} .dspg .dspg-card-thanks p.dspg-card-thanks-visit{margin-top:14px} .dspg .dspg-card-thanks-visit a{color:var(--color-link);text-decoration:none;font-weight:600} .dspg .dspg-card-thanks-visit a:hover{text-decoration:underline} /* mobiel: tekst boven, mockup eronder; titel 20% kleiner (alleen seniorenbed) */ @media(max-width:767px){ .dspg .dspg-card-bulletrow{flex-direction:column;align-items:center;gap:12px} .dspg .dspg-card-mock{width:60%;align-self:center} .dspg--v6[data-nav="/seniorenbed/"] .dspg-card h1,.dspg--v6[data-nav="/slaapkamer/"] .dspg-card h1{font-size:clamp(28px,8vw,35px);text-align:center} .dspg--v6[data-nav="/seniorenbed/"] .dspg-card h1 br,.dspg--v6[data-nav="/slaapkamer/"] .dspg-card h1 br{display:none} .dspg[data-nav="/seniorenbed/"] .dspg-card-bullettext,.dspg[data-nav="/slaapkamer/"] .dspg-card-bullettext{text-align:center} /* 16px voorkomt de automatische inzoom van iOS bij focus */ .dspg .dspg-card-form input,.dspg .dspg-card-form select{font-size:16px} } /* --- reviews-badge (desktop: linksonder in de hero) --- */ .dspg-reviews{position:absolute;left:var(--inset);bottom:28px;z-index:5;display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:7px 8px 7px 16px;box-shadow:0 8px 24px rgba(0,0,0,.20);text-decoration:none} .dspg-reviews:hover{box-shadow:0 10px 28px rgba(0,0,0,.26)} .dspg-reviews-count{font-size:14px;font-weight:600;color:var(--color-ink)} .dspg-reviews-stars{color:var(--color-accent);font-size:14px;letter-spacing:1px} .dspg-reviews-score{background:#eef2f4;color:var(--color-ink);font-weight:700;font-size:13px;padding:4px 9px;border-radius:999px} /* --- desktop: kaart-marge per schermbreedte --- */ @media(min-width:1251px) and (max-width:1400px){ .dspg-card{margin-right:90px} } @media(min-width:1025px) and (max-width:1250px){ .dspg-hero-inner{align-items:flex-end;padding-bottom:28px} .dspg-card{margin-right:0} } /* --- tablet + mobiel: hero gestapeld (foto boven, kaart eronder) --- */ @media(max-width:1024px){ .dspg-hero{display:flex;flex-direction:column} .dspg-hero-bg{position:static;width:100%;height:420px;object-fit:cover;object-position:center -75px} .dspg-hero-inner{position:static;min-height:0;margin-top:-210px;padding:0 var(--inset) 48px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:26px} .dspg-card{width:100%;max-width:none;margin:0} } /* --- tablet (767-1024): grote foto, kaart + reviews als rij onderaan --- */ @media(min-width:767px) and (max-width:1024px){ .dspg-hero-bg{height:640px;object-position:center} .dspg-hero-inner{position:absolute;left:0;right:0;bottom:28px;top:auto;margin:0;padding:0 var(--inset);flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;z-index:5} .dspg-card{width:480px;max-width:calc(100vw - 2*var(--inset));margin:0} .dspg-reviews{position:static;order:-1;align-self:flex-end;width:auto;margin:0} } /* --- mobiel (<=767): reviews als volle-breedte blok pal onder de kaart --- */ @media(max-width:767px){ .dspg-hero-inner{gap:14px} .dspg-reviews{position:static;box-sizing:border-box;width:100%;justify-content:center;margin:0;padding:13px 16px;background:#fff;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.12)} } /* ============================================================ PITCH ("Het beste bed, voor ú gemaakt") ============================================================ */ .dspg-pitch{display:grid;grid-template-columns:1fr 560px;gap:72px;align-items:center} .dspg-pitch-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.5px;color:var(--color-ink);margin:0 0 30px} /* home: pitch-titel op leadin-h2-formaat */ .dspg-pitch--home .dspg-pitch-title{font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;letter-spacing:0;margin-bottom:24px} .dspg-pitch-block{margin-top:26px} .dspg-pitch-block:first-of-type{margin-top:0} .dspg-pitch-block h3{font-family:var(--font-sans);font-weight:700;font-size:1.06rem;letter-spacing:.1px;color:var(--color-ink);margin:0 0 8px} .dspg-pitch-block p{font-family:var(--font-sans);font-size:1rem;line-height:1.65;color:var(--color-ink);margin:0} .dspg-pitch-block .ds-cta{margin-top:20px;width:auto} .dspg-pitch-media{border-radius:6px;overflow:hidden;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:end} .dspg-pitch-media img{width:100%;height:100%;object-fit:cover;object-position:100% 50%;display:block} /* pitch met foto links (en linkerdeel van de foto in beeld) */ .dspg-pitch--mediaL{grid-template-columns:560px 1fr} .dspg-pitch--mediaL .dspg-pitch-media{order:-1;justify-self:start} .dspg-pitch--mediaL .dspg-pitch-media img{object-position:30% 50%} @media(min-width:1201px){.dspg-pitch{padding-left:clamp(48px,6vw,130px);padding-right:clamp(48px,6vw,130px)}} @media(max-width:1024px){ .dspg-pitch{grid-template-columns:1fr;gap:28px} .dspg-pitch-media{order:-1;max-width:none;aspect-ratio:3/2} } @media(max-width:600px){.dspg-pitch-media img[src*="ruime-slaapkamer-penthouse-embrace"]{object-position:30% 50%;transform:scale(1.2)}} @media(min-width:1025px){.dspg-pitch-media img[src*="ruime-slaapkamer-penthouse-embrace"]{object-position:30% 50%;transform:scale(1.4);transform-origin:left center}} /* ============================================================ BEDTYPE-NAVIGATIEKAARTEN ============================================================ */ .dspg-catnav{display:grid;gap:20px} .dspg-catnav--2{grid-template-columns:repeat(2,1fr)} .dspg-catnav--3{grid-template-columns:repeat(3,1fr);margin-top:20px} .dspg-catnav--4{grid-template-columns:repeat(4,1fr);margin-top:20px} .dspg-catcard{position:relative;display:block;border-radius:6px;overflow:hidden;aspect-ratio:1/1;text-decoration:none} .dspg-catnav--2 .dspg-catcard{aspect-ratio:4/3} .dspg-catcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-catcard:hover img{transform:scale(1.04)} .dspg-catcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 100%)} .dspg-catcard-label{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 26px 20px;display:flex;flex-direction:column;align-items:flex-start} .dspg-catcard-label-text{position:relative;display:inline-flex;align-items:center;gap:11px;padding-bottom:13px;color:#fff;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.5rem);text-shadow:0 1px 10px rgba(0,0,0,.45)} .dspg-catcard-label-text::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--color-accent);transition:width .25s ease} .dspg-catcard:hover .dspg-catcard-label-text::after{width:60px} .dspg-catcard-arrow{width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex-shrink:0;position:relative;top:2px} .dspg-catcard-sub{margin-top:9px;font-family:var(--font-sans);font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.86);text-shadow:0 1px 8px rgba(0,0,0,.45)} /* fototegels: blokkeer externe CMS-thema hover/focus-achtergrond (witte hover-bug). Geldt voor alle fototegels op alle pages. */ .dspg-catcard:hover,.dspg-catcard:focus,.dspg-catcard:focus-visible,.dspg-catcard:active, .dspg-advies-feature:hover,.dspg-advies-feature:focus,.dspg-advies-feature:focus-visible,.dspg-advies-feature:active, .dspg-bed-card--photo:hover,.dspg-bed-card--photo:focus,.dspg-bed-card--photo:focus-visible,.dspg-bed-card--photo:active, .dspg-klant-card--photo:hover,.dspg-klant-card--photo:focus,.dspg-klant-card--photo:focus-visible,.dspg-klant-card--photo:active, .dspg-catcard:hover *,.dspg-advies-feature:hover *,.dspg-bed-card--photo:hover *,.dspg-klant-card--photo:hover *{background-color:transparent!important} @media(max-width:767px){.dspg-catnav--4 .dspg-catcard-sub{display:none}} @media(max-width:1024px){ .dspg-catnav{gap:14px} .dspg-catnav--2,.dspg-catnav--3,.dspg-catnav--4{grid-template-columns:repeat(2,1fr)} .dspg-catnav--3,.dspg-catnav--4{margin-top:14px} .dspg-catcard{aspect-ratio:4/3} } @media(max-width:560px){ .dspg-catnav--2,.dspg-catnav--3,.dspg-catnav--4{grid-template-columns:1fr} } /* ============================================================ SPOTLIGHT (uitgelicht model, met fotogalerij) ============================================================ */ .dspg-spotlight{display:grid;grid-template-columns:3fr 2fr;gap:56px;align-items:center} .dspg-spotlight-media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3;min-width:0} .dspg-spotgallery-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease} .dspg-spotgallery::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5));pointer-events:none;z-index:1} .dspg-spotgallery::before{content:"";position:absolute;left:0;right:0;top:0;height:96px;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none;z-index:1} .dspg-spotgallery-caption{position:absolute;left:0;top:0;z-index:2;padding:16px 20px;color:#fff;font-family:var(--font-sans);font-weight:500;font-size:.98rem} .dspg-spotgallery-nav{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:8px} .dspg-spotgallery-btn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--color-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease} .dspg-spotgallery-btn:hover{background:#fff} .dspg-spotgallery-chev{width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:-2px} .dspg-spotgallery-chev--prev{transform:rotate(-135deg);margin-left:2px} .dspg-spotgallery-slides{display:none} .dspg-spotlight-text{display:flex;flex-direction:column;justify-content:center} .dspg-spotlight-text h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.12;letter-spacing:-.3px;color:var(--color-ink);margin:0 0 16px} .dspg-spotlight-text>p{font-family:var(--font-sans);font-size:1rem;line-height:1.65;color:var(--color-ink);margin:0 0 18px} .dspg-spotlight-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px} .dspg-spotlight-ctas .ds-cta{width:auto} @media(max-width:900px){ .dspg-spotlight{grid-template-columns:1fr;gap:28px} .dspg-spotlight-media{min-height:300px} } /* ============================================================ SLAAPADVIES (feature-fotokaart + accordion) ============================================================ */ .dspg-advies{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:stretch} .dspg-advies-feature{position:relative;display:block;border-radius:6px;overflow:hidden;aspect-ratio:4/3;align-self:start;text-decoration:none} .dspg-advies-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-advies-feature:hover img{transform:scale(1.03)} .dspg-advies-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)} .dspg-advies-feature-overlay{position:absolute;left:0;right:0;top:0;z-index:1;padding:clamp(28px,3vw,40px)} .dspg-advies-feature-overlay h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:#fff;margin:0 0 10px} .dspg-advies-feature-overlay p{font-family:var(--font-sans);font-size:1rem;line-height:1.5;color:#fff;margin:0} .dspg-advies-feature-link{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px clamp(28px,3vw,40px) 20px} .dspg-advies-feature-link-text{position:relative;display:inline-flex;align-items:center;gap:11px;padding-bottom:13px;color:#fff;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.5rem);text-shadow:0 1px 10px rgba(0,0,0,.45)} .dspg-advies-feature-link-text::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--color-accent);transition:width .25s ease} .dspg-advies-feature:hover .dspg-advies-feature-link-text::after{width:60px} .dspg-advies-arrow{width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex-shrink:0;position:relative;top:2px} .dspg-advies-list{display:flex;flex-direction:column;gap:12px;order:-1} .dspg-advies-tab{background:#fff;border:1px solid rgba(61,40,45,.12);border-radius:6px;overflow:hidden;display:flex;flex-direction:column} .dspg-advies-tab[open]{flex:1} .dspg-advies-tab[open]:nth-of-type(1){background:#f2e9e9} .dspg-advies-tab[open]:nth-of-type(2){background:#e7d7d7} .dspg-advies-tab[open]:nth-of-type(3){background:#d4bdc0} .dspg-advies-tab[open]:nth-of-type(4){background:#a67f81} .dspg-advies-tab[open]:nth-of-type(5){background:#6d5253} .dspg-advies-tab[open]:nth-of-type(4) summary,.dspg-advies-tab[open]:nth-of-type(4) .dspg-advies-tab-body,.dspg-advies-tab[open]:nth-of-type(5) summary,.dspg-advies-tab[open]:nth-of-type(5) .dspg-advies-tab-body{color:#fff} .dspg-advies-tab[open]:nth-of-type(4) .dspg-faq-icon::before,.dspg-advies-tab[open]:nth-of-type(4) .dspg-faq-icon::after,.dspg-advies-tab[open]:nth-of-type(5) .dspg-faq-icon::before,.dspg-advies-tab[open]:nth-of-type(5) .dspg-faq-icon::after{background:#fff} .dspg-advies-tab summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;color:var(--color-ink);font-family:var(--font-sans);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.5rem)} .dspg-advies-tab summary::-webkit-details-marker{display:none} .dspg-advies-tab-body{padding:0 20px 20px;font-family:var(--font-sans);font-size:.98rem;line-height:1.6;color:var(--color-ink)} .dspg-advies-tab-body p{margin:0;color:inherit} .dspg-advies-tab-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:inherit;font-family:var(--font-sans);font-weight:600;font-size:1rem;text-decoration:none} .dspg-advies-tab-link:hover{text-decoration:underline;text-underline-offset:.2em} .dspg-advies-tab-link::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex-shrink:0} .dspg-advies-tab[open] .dspg-faq-icon::after{transform:rotate(90deg)} .dspg-faq-icon{width:22px;height:22px;flex-shrink:0;position:relative} .dspg-faq-icon::before,.dspg-faq-icon::after{content:"";position:absolute;background:var(--color-ink);transition:transform .2s} .dspg-faq-icon::before{top:10px;left:5px;width:12px;height:2px} .dspg-faq-icon::after{top:5px;left:10px;width:2px;height:12px} @media(min-width:861px) and (max-width:1200px){ .dspg-advies{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .dspg-advies-feature{aspect-ratio:3/4} } @media(max-width:860px){ .dspg-advies{grid-template-columns:1fr;gap:10px} .dspg-advies-list{order:0;gap:6px} .dspg-advies-feature{aspect-ratio:1/1} .dspg-advies-tab[open]{flex:none} } /* ============================================================ LEADIN (foto + tekst; --photoL / --photoR / aspect) ============================================================ */ .dspg-leadin{display:grid;grid-template-columns:1fr 600px;gap:72px;align-items:center} .dspg-leadin-text h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 16px} .dspg-leadin-text p{font-family:var(--font-sans);font-size:1rem;line-height:1.7;color:var(--color-ink);margin:0} .dspg-leadin-text .ds-cta{margin-top:26px} .dspg-leadin-media{border-radius:6px;overflow:hidden;aspect-ratio:1/1;width:100%;max-width:600px;justify-self:end} .dspg-leadin-media img{width:100%;height:100%;object-fit:cover;display:block} .dspg-leadin--photoR .dspg-leadin-media,.dspg-leadin--photoL .dspg-leadin-media{max-width:none;justify-self:stretch} .dspg-leadin--ar1200 .dspg-leadin-media{aspect-ratio:1200/650} .dspg-leadin--ar32 .dspg-leadin-media{aspect-ratio:3/2} .dspg-leadin--photoR{grid-template-columns:2fr 3fr} .dspg-leadin--photoL{grid-template-columns:3fr 2fr} .dspg-leadin--photoL .dspg-leadin-media{order:-1} .dspg-leadin--mediaL{grid-template-columns:600px 1fr} .dspg-leadin--mediaL .dspg-leadin-media{order:-1;justify-self:start} .dspg-leadin-sub{font-family:var(--font-sans);font-weight:700;font-size:1.05rem;letter-spacing:.1px;color:var(--color-ink);margin:22px 0 8px} .dspg-leadin-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .dspg-leadin-ctas .ds-cta{margin-top:0} .dspg-leadin--inset .dspg-leadin-text h2{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.12;letter-spacing:-.3px} @media(min-width:1201px){.dspg-leadin--inset{padding-left:clamp(48px,6vw,130px);padding-right:clamp(48px,6vw,130px)}} /* anker-navigatie: secties netjes onder de sticky in-page balk laten landen */ html{scroll-behavior:smooth} .dspg [id]{scroll-margin-top:80px} @media(max-width:1023px){ .dspg-leadin{grid-template-columns:1fr;gap:26px} .dspg-leadin-media{order:-1} /* "Wat doet het geluid met u?": op mobiel 3:2 i.p.v. vierkant */ #hoe-het-werkt .dspg-leadin-media{aspect-ratio:3/2} } /* ============================================================ SHOWROOM (zandblok, sticky foto links + tekst rechts) ============================================================ */ .dspg-showroom{display:grid;grid-template-columns:520px 1fr;gap:56px;align-items:start;background:var(--color-sand);padding:48px 48px 44px;border-radius:6px} .dspg-showroom-mediawrap{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px} .dspg-showroom-media{position:relative;padding-top:75%;overflow:hidden;border-radius:6px;background:var(--color-sage)} .dspg-showroom-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .dspg-showroom-text{padding-top:6px} .dspg-showroom-text h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 16px} .dspg-showroom-body{font-family:var(--font-sans);font-size:1rem;line-height:1.7;color:var(--color-ink);margin:0 0 18px} .dspg-showroom-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .dspg-showroom-ctas .ds-cta{margin:0;width:auto} @media(max-width:1023px){ .dspg-showroom{grid-template-columns:1fr;gap:24px;padding:30px 24px} .dspg-showroom-mediawrap{position:static;top:auto} .dspg-showroom-media{padding-top:66.667%} } /* ============================================================ GIDS ("Hulp nodig met kiezen?" · sage-blok, mockup links + tekst rechts) ============================================================ */ .dspg-gids{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;background:var(--color-sage);padding:48px 56px;border-radius:6px} .dspg-gids-media{display:flex;justify-content:center} .dspg-gids-media img{max-width:520px;width:100%;height:auto;display:block;background:transparent} .dspg-gids-text h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 16px} .dspg-gids-text>p{font-family:var(--font-sans);font-size:.95rem;line-height:1.6;color:var(--color-ink);margin:0 0 16px} .dspg-gids-list{list-style:none;padding:0;margin:0 0 22px} .dspg-gids-list li{position:relative;padding:9px 0 9px 30px;font-family:var(--font-sans);font-size:.95rem;line-height:1.45;color:var(--color-ink);border-bottom:1px solid rgba(61,40,45,.12)} .dspg-gids-list li:last-child{border-bottom:0} .dspg-gids-list li::before{content:"";position:absolute;left:4px;top:14px;width:14px;height:7px;border-left:1.5px solid var(--color-accent);border-bottom:1.5px solid var(--color-accent);transform:rotate(-45deg)} @media(max-width:1023px){ .dspg-gids{grid-template-columns:1fr;gap:30px;padding:40px 24px} .dspg-gids-media img{max-width:340px} } /* ============================================================ STIJLEN-GRID ("Ontdek slaapkamers per stijl") ============================================================ */ .dspg-styles-head{text-align:center;margin:0 0 28px} .dspg-styles-head h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0} .dspg-styles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .dspg-style{position:relative;display:block;border-radius:6px;overflow:hidden;aspect-ratio:3/4;text-decoration:none;min-width:0} .dspg-style img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .dspg-style:hover img{transform:scale(1.05)} .dspg-style::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.62) 100%)} .dspg-style span{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px 18px;color:#fff;font-family:var(--font-serif);font-weight:400;font-size:1.15rem} .dspg-styles-cta{text-align:center;margin-top:32px} @media(max-width:860px){.dspg-styles-grid{grid-template-columns:1fr 1fr}} /* ============================================================ SECTIE-KOP (gecentreerd, herbruikbaar) ============================================================ */ .dspg-section-head{text-align:center;margin:0 auto 20px;max-width:780px;padding:0 24px} @media(max-width:600px){.dspg--v6 .dspg-section-head{text-align:left;padding-left:0;padding-right:0}} .dspg-section-head h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 16px} /* Homepage hub - dubbele-doelgroep intro */ .dspg-home-intro{text-align:center;max-width:860px;margin:0 auto} .dspg-home-intro .dspg-kicker{margin:0 0 14px} .dspg-home-intro h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.5px;color:var(--color-ink);margin:0 0 18px} .dspg-home-lead{font-family:var(--font-sans);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.65;color:#4a3a3d;max-width:700px;margin:0 auto 20px} .dspg-home-rating{font-family:var(--font-sans);font-size:.92rem;color:var(--color-ink);margin:0;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center} .dspg-home-rating .dspg-home-stars{color:var(--color-accent);letter-spacing:2px} .dspg-home-rating .dspg-home-sep{color:rgba(61,40,45,.3)} /* premium beeldhero (homepage) */ .dspg-home-hero{position:relative;min-height:calc(100vh - var(--dshx-h,107px));min-height:calc(100dvh - var(--dshx-h,107px));display:flex;align-items:flex-end;overflow:hidden;background:var(--color-sage)} .dspg-home-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .dspg-home-hero::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.45)} .dspg-home-hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--inset) clamp(40px,6vw,76px)} .dspg-home-hero-eyebrow{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.9);margin:0 0 18px} .dspg-home-hero h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.6rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.5px;color:#fff;margin:0 0 18px;max-width:20ch} .dspg-home-hero-lead{font-family:var(--font-sans);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;color:rgba(255,255,255,.94);max-width:620px;margin:0 0 22px} .dspg-home-hero .dspg-home-rating{color:#fff;justify-content:flex-start} .dspg-home-hero .dspg-home-rating .dspg-home-sep{color:rgba(255,255,255,.45)} .dspg-home-hero-sub{font-family:var(--font-sans);font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.4;color:rgba(255,255,255,.94);margin:0 0 26px} /* V2 (Minion) hero-typografie volgens De Suite spec */ .dspg--v6 .dspg-home-hero h1{font-family:var(--font-minion-pro-semibold);font-weight:400;font-size:53px;letter-spacing:0.15em;text-transform:uppercase;max-width:none;white-space:normal} @media(max-width:600px){.dspg--v6 .dspg-home-hero h1.dspg-h1-sm{font-size:clamp(40px,10vw,53px);letter-spacing:0.06em}} .dspg--v6 .dspg-home-hero-sub{font-family:var(--font-minion-pro-semibold);font-weight:200;font-size:clamp(35px,4.5vw,38px);line-height:43px;letter-spacing:0} @media(max-width:900px){.dspg--v6 .dspg-home-hero h1{white-space:normal}.dspg--v6 .dspg-home-hero-sub{font-size:clamp(22px,5vw,30px);line-height:1.3}} @media(max-width:600px){.dspg--v6 .dspg-home-hero-sub{display:none}.dspg--v6 .dspg-home-hero-ctas{margin-top:30px}} @media(max-width:600px){.dspg--v6 .dspg-catcard-label{padding-left:17px}.dspg--v6 .dspg-advies-feature-overlay{padding-left:19px}.dspg--v6 .dspg-advies-feature-link{padding-left:19px}} /* overige titels: ontwerp van de subtekst (Minion light), kleur ink */ .dspg--v6 .dspg-pitch-title, .dspg--v6 .dspg-section-head h2, .dspg--v6 .dspg-leadin-text h2, .dspg--v6 .dspg-gids-text h2, .dspg--v6 .dspg-showroom-text h2, .dspg--v6 .dspg-advies-feature-overlay h2{font-family:var(--font-minion-pro-semibold);font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-advies-feature-overlay h2{color:#fff} .dspg--v6 .dspg-spotlight-text h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-card h1, .dspg--v6 .dspg-card h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink)} .dspg--v6 .dspg-pitch--intro .dspg-pitch-title{font-size:clamp(40px,6vw,56px);margin-bottom:24px} .dspg--v6 .dspg-leadin--intro .dspg-leadin-text h2{font-size:clamp(40px,6vw,56px);margin-bottom:24px} /* FPS / overige sectietypes: blueprint-titels */ .dspg--v6 .dspg-faqform-faq h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-fps-prog-card h3, .dspg--v6 .dspg-fps-video h3, .dspg--v6 .dspg-fps-note-text h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-faq-trigger h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.35;letter-spacing:0;color:var(--color-ink);margin:0} .dspg--v6 .dspg-fps-cases-lead{font-size:17px;line-height:1.6} /* tegel-titels + "Naar slaapadvies": subtekst-ontwerp maar kleiner, in wit */ .dspg--v6 .dspg-tile-title{font-weight:400;font-size:clamp(28px,3.4vw,33px);letter-spacing:0} /* slaapadvies accordion-titels: subtekst-ontwerp kleiner, in ink */ .dspg--v6 .dspg-advies-tab summary{font-family:var(--font-minion-pro-semibold);font-weight:400;font-size:clamp(24px,2.6vw,28px);letter-spacing:0} /* V2 (Minion): titels in Cond Caption Medium; h1 + hero-sub blijven op Display */ .dspg--minio .dspg-pitch-title, .dspg--minio .dspg-section-head h2, .dspg--minio .dspg-leadin-text h2, .dspg--minio .dspg-gids-text h2, .dspg--minio .dspg-showroom-text h2, .dspg--minio .dspg-advies-feature-overlay h2, .dspg--minio .dspg-tile-title, .dspg--minio .dspg-advies-tab summary, .dspg--minio .dspg-sticky-label strong{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif} /* V2 body-schaal: lopende tekst 17px, opsomming 17px, ondersteunend 14px (knoppen blijven 16px) */ .dspg--v6 .dspg-pitch-block p, .dspg--v6 .dspg-leadin-text p, .dspg--v6 .dspg-gids-text p, .dspg--v6 .dspg-showroom-body, .dspg--v6 .dspg-advies-feature-overlay p, .dspg--v6 .dspg-advies-tab-body{font-size:17px;line-height:1.6} .dspg--v6 .dspg-advies-tab[open] summary{padding-bottom:10px} .dspg--v6 .dspg-gids-list{font-size:17px;line-height:1.55} .dspg--v6 .dspg-catcard-sub{font-size:14px} /* V2 UI-tekst eenheid: eyebrow 17, badge 14, sticky 14, 'lees meer' 17 */ .dspg--v6 .dspg-home-hero-eyebrow{font-size:17px} .dspg--v6 .dspg-reviews-count, .dspg--v6 .dspg-reviews-score{font-size:14px} .dspg--v6 .dspg-sticky-label{font-size:17px} .dspg--v6 .dspg-sticky-label strong{font-family:var(--font-minion-pro-semibold);font-weight:400;font-size:clamp(24px,2.6vw,28px);letter-spacing:0;color:var(--color-ink)} .dspg--v6 .dspg-sticky-phone, .dspg--v6 .dspg-sticky-secondary, .dspg--v6 .dspg-sticky-primary{font-size:16px} .dspg--v6 .dspg-advies-tab-link{font-size:17px} .dspg-home-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin:clamp(60px,8vw,104px) 0 26px} .dspg-home-hero-ctas .ds-cta-thuis{color:#fff;border-color:rgba(255,255,255,.7);border-width:2px} .dspg-home-hero-ctas .ds-cta-thuis:hover{background:#fff;color:var(--color-ink);border-color:#fff} .dspg-home-hero-ctas .ds-cta-gids:hover{background:#fff;color:var(--color-ink);border-color:#fff} .dspg-home-hero .dspg-reviews{position:static;left:auto;bottom:auto;box-shadow:0 8px 24px rgba(0,0,0,.28)} @media(max-width:767px){.dspg-home-hero .dspg-reviews{width:auto;border-radius:999px;padding:7px 8px 7px 16px}} /* gecentreerde hero-variant (V1) */ .dspg-home-hero--center{align-items:center;text-align:center} .dspg-home-hero--center .dspg-home-hero-inner{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)} .dspg-home-hero--center h1,.dspg-home-hero--center .dspg-home-hero-sub{margin-left:auto;margin-right:auto} .dspg-home-hero--center .dspg-home-hero-ctas{justify-content:center} .dspg-home-hero-scroll{position:absolute;left:50%;bottom:clamp(18px,3vh,30px);transform:translateX(-50%);z-index:3;display:inline-flex;flex-direction:column;align-items:center;gap:9px;color:#fff;text-decoration:none;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.45)} .dspg-home-hero-scroll:hover{opacity:.82} @media(max-width:767px){[data-nav="/over-ons/"] .dspg-home-hero-scroll{display:none}} .dspg-home-hero-chev{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:dspg-hero-bob 1.8s ease-in-out infinite} @keyframes dspg-hero-bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}} @media(prefers-reduced-motion:reduce){.dspg-home-hero-chev{animation:none}} /* wisselende hero-foto's met cirkel-timer rechtsonder */ .dspg-home-hero[data-hfade] .dspg-home-hero-bg{opacity:0;transition:opacity .9s ease} .dspg-home-hero[data-hfade] .dspg-home-hero-bg.is-active{opacity:1} .dspg-home-hero-timer{position:absolute;right:var(--inset);bottom:22px;z-index:4;width:38px;height:38px;transform:rotate(-90deg)} .dspg-hht-track{fill:none;stroke:rgba(255,255,255,.32);stroke-width:2.5} .dspg-hht-fill{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round} @media(max-width:767px){.dspg-home-hero{min-height:calc(100vh - var(--dshx-h,107px));min-height:calc(100dvh - var(--dshx-h,107px))}.dspg-home-hero-inner{padding-bottom:32px}} @media(max-width:600px){.dspg-home-hero-bg:first-of-type{object-position:35% center}} /* SEO-intro tekstblok (subcat-LP) - editorial 2-koloms */ .dspg-seo-intro{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,5vw,72px);align-items:start} .dspg-seo-intro-eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:#8a7b7d;margin:0 0 12px} .dspg-seo-intro-head h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.12;letter-spacing:-.2px;color:var(--color-ink);margin:0} .dspg-seo-intro-body p{font-family:var(--font-sans);font-size:1.02rem;line-height:1.75;color:#4a3a3d;margin:0 0 16px;max-width:64ch} .dspg-seo-intro-body p:last-child{margin-bottom:0} .dspg-seo-intro-body p a{color:var(--color-link)} .dspg-seo-more{display:none} @media(max-width:860px){ .dspg-seo-intro{grid-template-columns:1fr;gap:14px} .dspg-seo-intro-body{position:relative;overflow:hidden;max-height:7.5em;transition:max-height .35s ease} .dspg-seo-intro-body p{font-size:.98rem} .dspg-seo-intro-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(180deg,rgba(251,247,243,0),var(--color-sand));pointer-events:none} .dspg-seo-intro-body.is-expanded{max-height:200em} .dspg-seo-intro-body.is-expanded::after{opacity:0} .dspg-seo-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:.92rem;font-weight:600;color:var(--color-link)} } /* ============================================================ ACCESSOIRES-CAROUSEL ("Mooie en handige accessoires") Native scroll-snap, geen JS. Horizontaal scrollen/swipen. ============================================================ */ .dspg-strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%;scrollbar-width:none;-ms-overflow-style:none;cursor:grab} .dspg-strip::-webkit-scrollbar{display:none} .dspg-strip.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none} .dspg-strip img{-webkit-user-drag:none;user-drag:none} .dspg-strip figure{flex:0 0 300px;margin:0;scroll-snap-align:start;min-width:0} .dspg-strip-img{border-radius:6px;overflow:hidden;aspect-ratio:4/5;margin:0 0 10px} .dspg-strip-img img{width:100%;height:100%;object-fit:cover;display:block} .dspg-strip-img img.dspg-shift-r{object-position:34% center} .dspg-strip figcaption{font-family:var(--font-sans);font-size:.88rem;color:#5a4549} /* ============================================================ AFWERKING ("De slaapkamer compleet inrichten") ============================================================ */ .dspg-finish{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .dspg-finish-media{aspect-ratio:4/3;border-radius:6px;overflow:hidden;margin:0 0 14px} .dspg-finish-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-finish-item:hover .dspg-finish-media img{transform:scale(1.04)} .dspg-finish-item h3{font-family:var(--font-serif);font-weight:400;font-size:1.3rem;line-height:1.2;color:var(--color-ink);margin:0 0 8px} .dspg-finish-item p{font-family:var(--font-sans);font-size:.95rem;line-height:1.6;color:#5a4549;margin:0 0 10px} .dspg-mag-link{font-family:var(--font-sans);font-size:.95rem;font-weight:600;color:var(--color-link);text-decoration:none} .dspg-mag-link:hover{color:var(--color-ink)} @media(max-width:760px){.dspg-finish{grid-template-columns:1fr;gap:24px}} /* ============================================================ PROCES-BAND (full-bleed donkere band met stappen) Generiek: herbruikbaar voor "Zo ontstaat uw slaapkamer" / "...uw bed". ============================================================ */ .dspg-proces{margin:0 calc(50% - 50vw);padding:clamp(64px,7vw,100px) 0;background:var(--color-ink)} .dspg-proces-in{max-width:1200px;margin:0 auto;padding:0 clamp(16px,2vw,32px)} .dspg-proces-head{max-width:680px;margin:0 auto 52px;text-align:center} .dspg-proces-head h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.12;letter-spacing:-.3px;color:#fff;margin:0} .dspg-proces-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,28px)} .dspg-proces-step{display:flex;flex-direction:column} .dspg-proces-photo{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5;margin:0 0 22px;min-width:0} .dspg-proces-photo img{width:100%;height:100%;object-fit:cover;display:block} .dspg-proces-num{position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--color-accent);color:var(--color-ink);font-family:var(--font-sans);font-weight:600;font-size:1.15rem;line-height:1;display:grid;place-items:center} .dspg-proces-step h3{font-family:var(--font-sans);font-weight:700;font-size:1.05rem;color:#fff;margin:0 0 8px;letter-spacing:.1px} .dspg-proces-step p{font-family:var(--font-sans);font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.72);margin:0} .dspg-proces-cta{text-align:center;margin:52px 0 0} .dspg-proces-cta .ds-cta-thuis{color:#fff;border-color:rgba(255,255,255,.6)} .dspg-proces-cta .ds-cta-thuis:hover{background:#fff;color:var(--color-ink);border-color:#fff} @media(max-width:860px){.dspg-proces-steps{grid-template-columns:1fr 1fr;gap:26px}} @media(max-width:520px){.dspg-proces-steps{grid-template-columns:1fr}.dspg-proces-photo{aspect-ratio:3/2}} /* per-foto object-positie (alleen ≥861px) */ @media(min-width:861px){ .dspg-proces-photo img.dspg-op-36{object-position:36% center} .dspg-proces-photo img.dspg-op-73{object-position:73% center} .dspg-proces-photo img.dspg-op-78{object-position:78% center} } /* ============================================================ LOOKBOOK-TEASER ("Liever gewoon door foto's bladeren?") ============================================================ */ .dspg-lookbook{text-align:center} .dspg-lookbook-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 32px} .dspg-lookbook-thumbs a{display:block;border-radius:6px;overflow:hidden;aspect-ratio:4/3;min-width:0} .dspg-lookbook-thumbs img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-lookbook-thumbs a:hover img{transform:scale(1.05)} .dspg-lookbook h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;color:var(--color-ink);margin:0 0 14px} @media(max-width:680px){.dspg-lookbook-thumbs{grid-template-columns:1fr 1fr}} /* ============================================================ FAQ + FORMULIER Form-attributen (name/action/method/types/required) exact = CMS-koppeling. ============================================================ */ .dspg-faqform{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .dspg-faqform-faq h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 16px} .dspg-faq-list{margin-top:24px} .dspg-faq-item{border-bottom:1px solid rgba(61,40,45,.12)} .dspg-faq-item:first-child{border-top:1px solid rgba(61,40,45,.12)} .dspg-faq-trigger{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;background:none;border:0;padding:18px 0;cursor:pointer;text-align:left;list-style:none} .dspg-faq-trigger::-webkit-details-marker{display:none} .dspg-faq-trigger h3{font-family:var(--font-sans);font-weight:400;font-size:1.18rem;line-height:1.35;color:var(--color-ink);margin:0} .dspg-faq-item[open] .dspg-faq-icon::after{transform:rotate(90deg)} .dspg-faq-panel{padding:0 0 18px;font-family:var(--font-sans);font-size:.95rem;line-height:1.65;color:var(--color-ink)} .dspg-faq-panel p{margin:0;color:inherit} /* formulier-styling op de originele V6 ds-form-klassen (form-HTML = exact FPS V2) */ .dspg .ds-form{background:var(--color-sand);padding:36px 32px;border-radius:6px} .dspg .ds-form h2{font-family:var(--font-serif);font-weight:500;font-size:1.5rem;line-height:1.2;letter-spacing:-.2px;color:var(--color-ink);margin:0 0 12px} .dspg .ds-form-lead{font-family:var(--font-sans);font-size:.95rem;color:#5a4549;line-height:1.55;margin:0 0 22px} .dspg .ds-form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .dspg .ds-form-field label{font-family:var(--font-sans);font-size:.82rem;color:#5a4549;letter-spacing:.2px} .dspg .ds-form-field input,.dspg .ds-form-field textarea{font-family:var(--font-sans);font-size:.95rem;color:var(--color-ink);padding:11px 14px;border:1px solid rgba(61,40,45,.2);border-radius:2px;background:#fff;transition:border-color .15s} .dspg .ds-form-field input:focus,.dspg .ds-form-field textarea:focus{outline:0;border-color:var(--color-ink)} .dspg .ds-form textarea{resize:vertical;min-height:80px} @media(max-width:1023px){.dspg-faqform{grid-template-columns:1fr;gap:28px}} /* FAQ zonder form ernaast: één kolom, gecentreerd (bijv. seniorenbed) */ .dspg-faqform--solo{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto} .dspg--v6 .dspg-faqform--solo .dspg-faqform-faq h2{text-align:center} /* ============================================================ STICKY FOOTER (opmaak centraal; inhoud per pagina) Verschijnt na X% scrollen (data-show-after), JS in pagina-v6.js. ============================================================ */ .dspg-sticky{position:fixed;bottom:0;left:0;right:0;z-index:200;background:#fff;border-top:3px solid var(--color-accent);box-shadow:0 -10px 30px rgba(61,40,45,.14);transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1)} .dspg-sticky.is-visible{transform:translateY(0)} .dspg-sticky-inner{max-width:1520px;margin:0 auto;padding:22px var(--inset);display:flex;align-items:center;gap:14px;flex-wrap:wrap} .dspg-sticky-label{flex:1 1 auto;margin:0;font-family:var(--font-sans);font-size:13px;font-weight:500;line-height:1.4;color:rgba(61,40,45,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dspg-sticky-label strong{display:block;font-family:var(--font-serif);font-weight:500;font-size:21px;color:var(--color-ink);margin-bottom:2px} .dspg-sticky-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0} .dspg-sticky-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:6px;background:var(--color-link);color:#fff;font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:.01em;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px rgba(65,110,134,.25);transition:background .18s,transform .12s,box-shadow .18s} .dspg-sticky-primary:hover{background:var(--color-ink);box-shadow:0 4px 14px rgba(61,40,45,.30);transform:translateY(-1px)} .dspg-sticky-primary-icon{display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;flex-shrink:0} .dspg-sticky-secondary{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:6px;border:1px solid var(--color-link);color:var(--color-link);font-family:var(--font-sans);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:border-color .18s,background .18s,color .18s} .dspg-sticky-secondary:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)} .dspg-sticky-phone{display:inline-flex;align-items:center;gap:6px;padding:11px 14px;border-radius:6px;color:var(--color-link);font-family:var(--font-sans);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .18s} .dspg-sticky-phone:hover{color:var(--color-ink)} .dspg-sticky-phone::before{content:"";display:inline-block;width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23416e86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.55 10.59a19.79 19.79 0 01-3.07-8.67A2 2 0 012.48 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain} @media(max-width:640px){ .dspg-sticky{border-top-width:2px} .dspg-sticky-inner{padding:22px clamp(16px,6vw,50px);gap:0} .dspg-sticky-label,.dspg-sticky-phone,.dspg-sticky-secondary{display:none} .dspg-sticky-actions{width:100%;gap:0} .dspg-sticky-primary{width:100%;justify-content:center;padding:15px 18px;font-size:16px;font-weight:700} .dspg-sticky-primary-icon{width:20px;height:20px} } /* ============================================================ FPS-SPECIFIEKE SECTIES Praktijkcases-band · 12 programma-kaarten · note · video's · klant-features ============================================================ */ /* --- praktijkcases-band (full-bleed, zand) --- */ .dspg-fps-cases{margin:0 calc(50% - 50vw);padding:clamp(56px,6vw,88px) 0;background:var(--color-sand)} .dspg-fps-cases-in{max-width:1100px;margin:0 auto;padding:0 clamp(16px,2vw,32px)} .dspg-fps-cases .dspg-section-head{margin-bottom:12px} .dspg-fps-cases-lead{max-width:760px;margin:0 auto 36px;text-align:center;font-family:var(--font-sans);font-size:1.05rem;line-height:1.65;color:#5a4549} .dspg-fps-cases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dspg-fps-case{background:#fff;border:1px solid rgba(61,40,45,.08);border-radius:8px;padding:22px 20px;text-align:center} .dspg-fps-case h3{font-family:var(--font-sans);font-weight:700;font-size:1rem;color:var(--color-ink);margin:0 0 8px} .dspg-fps-case p{font-family:var(--font-sans);font-size:.88rem;line-height:1.5;color:#6b5b52;margin:0} /* --- FPS V2 · "Voor wie is FPS?" kaartgrid --- */ .dspg-fps-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .dspg-fps-who-item{background:#fff;border:1px solid rgba(61,40,45,.1);border-radius:10px;padding:clamp(20px,2.4vw,26px)} .dspg-fps-who-ico{display:block;width:26px;height:26px;color:var(--color-accent);margin:0 0 12px} .dspg-fps-who-ico svg{width:100%;height:100%;display:block} .dspg--v6 .dspg-fps-who-item h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:1.25rem;line-height:1.2;color:var(--color-ink);margin:0 0 6px} .dspg-fps-who-item p{font-family:var(--font-sans);font-size:.98rem;line-height:1.55;color:#5a4549;margin:0} @media(max-width:860px){.dspg-fps-who-grid{grid-template-columns:1fr 1fr}} @media(max-width:540px){.dspg-fps-who-grid{grid-template-columns:1fr}} /* --- FPS V2 · "De voordelen van FPS" sand-band --- */ .dspg-fps-benefits{margin:0 calc(50% - 50vw);padding:clamp(48px,6vw,80px) 0;background:var(--color-sand)} .dspg-fps-benefits-head{max-width:820px;margin:0 auto clamp(22px,3vw,34px);padding:0 clamp(16px,2vw,32px);text-align:center} .dspg--v6 .dspg-fps-benefits-head h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(30px,4.5vw,38px);line-height:1.15;color:var(--color-ink);margin:0} .dspg-fps-benefits-in{max-width:1000px;margin:0 auto;padding:0 clamp(16px,2vw,32px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)} .dspg-fps-benefit{text-align:center} .dspg-fps-benefit-ico{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--color-accent);margin:0 0 14px} .dspg-fps-benefit-ico svg{width:24px;height:24px;display:block} .dspg--v6 .dspg-fps-benefit h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:1.35rem;line-height:1.2;color:var(--color-ink);margin:0 0 6px} .dspg-fps-benefit p{font-family:var(--font-sans);font-size:1rem;line-height:1.55;color:#5a4549;margin:0 auto;max-width:26ch} @media(max-width:680px){.dspg-fps-benefits-in{grid-template-columns:1fr;gap:26px}} /* --- 12 programma's: 3 gekleurde kaarten --- */ .dspg-fps-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)} .dspg-fps-prog-card{position:relative;background:var(--tint,#fff);border:1px solid rgba(61,40,45,.10);border-top:6px solid var(--c,#9a8a73);border-radius:10px;padding:26px 24px;display:flex;flex-direction:column} .dspg-fps-prog-card.is-groen{--c:#5e8c61;--tint:#f1f5f1} .dspg-fps-prog-card.is-blauw{--c:#3f6f86;--tint:#eef3f6} .dspg-fps-prog-card.is-rood{--c:#b0473f;--tint:#f8efee} .dspg-fps-prog-tag{font-family:var(--font-sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin:0 0 10px} .dspg-fps-prog-card h3{font-family:var(--font-serif);font-weight:400;font-size:1.35rem;color:var(--color-ink);margin:0 0 10px} .dspg-fps-prog-card>p{font-family:var(--font-sans);font-size:.96rem;line-height:1.6;color:#5a4549;margin:0 0 16px} .dspg-fps-prog-icon{position:absolute;top:22px;right:22px;width:26px;height:26px;color:var(--c);opacity:.55} .dspg-fps-prog-icon svg{width:100%;height:100%;display:block} .dspg-fps-prog-list{list-style:none;padding:0;margin:auto 0 0;font-family:var(--font-sans);font-size:.9rem;line-height:1.45;color:var(--color-ink)} .dspg-fps-prog-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid rgba(61,40,45,.08)} .dspg-fps-prog-list li:first-child{border-top:0} .dspg-prog-name{font-family:var(--font-sans);color:var(--color-ink);flex:1 1 auto} .dspg-prog-name small{display:block;font-size:.78rem;color:#9a8a73;margin-top:2px;font-weight:400} .dspg-prog-stars{margin-left:6px;font-size:.72rem;letter-spacing:1.5px;white-space:nowrap;vertical-align:1px} .dspg-star-o{color:var(--color-link)} .dspg-star-a{color:var(--color-accent)} .dspg-prog-time{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:.84rem;color:#8a7b73;white-space:nowrap} .dspg-prog-time::before{content:"";width:13px;height:13px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7b73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E") no-repeat center/contain} /* --- "goed om te weten"-note --- */ .dspg-fps-note-in{position:relative;max-width:820px;margin:0 auto;background:#fff;border:1px solid rgba(61,40,45,.12);border-left:4px solid var(--color-accent);border-radius:10px;padding:clamp(20px,3vw,30px) clamp(22px,3vw,32px)} .dspg-fps-note-text h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.6rem);color:var(--color-ink);margin:0 0 8px;padding-right:32px} .dspg-fps-note-text p{font-family:var(--font-sans);font-size:.98rem;line-height:1.6;color:#5a4549;margin:0} .dspg-fps-note-icon{position:absolute;top:22px;right:22px;width:24px;height:24px;color:var(--color-accent)} .dspg-fps-note-icon svg{width:100%;height:100%;display:block} /* --- klantervaringen: video-grid (16:9) --- */ .dspg-fps-videos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3vw,44px)} .dspg-fps-video{display:flex;flex-direction:column} .dspg-fps-embed{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;margin:0 0 18px} .dspg-fps-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .dspg-fps-video h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.16;color:var(--color-ink);margin:0 0 10px} .dspg-fps-video p{font-family:var(--font-sans);font-size:.98rem;line-height:1.6;color:#5a4549;margin:0} /* --- klant in beeld: quote-feature (Luc / Marja & Robert) --- */ .dspg-fps-luc{margin:0 calc(50% - 50vw);padding:clamp(52px,6vw,88px) 0;background:var(--color-sand)} .dspg-fps-luc-in{max-width:1100px;margin:0 auto;padding:0 clamp(16px,2vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center} .dspg-fps-luc-media{border-radius:10px;overflow:hidden;aspect-ratio:3/2} .dspg-fps-luc-media img{width:100%;height:100%;object-fit:cover;display:block} .dspg-fps-luc-quote{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.3;letter-spacing:-.2px;color:var(--color-ink);margin:0 0 20px;padding:0;border:0} .dspg-fps-luc-body>p{font-family:var(--font-sans);font-size:1rem;line-height:1.65;color:#5a4549;margin:0 0 12px} .dspg-fps-luc-name{font-family:var(--font-sans);font-weight:700;font-size:.95rem;color:var(--color-ink);margin:4px 0 0} /* feature (Marja & Robert): zelfde quote-grid als Luc, maar GEEN zandband en in de normale paginaflow */ .dspg-fps-feature .dspg-fps-luc-in{padding-left:0;padding-right:0} .dspg-fps-luc-link{display:inline-block;margin-top:14px} @media(min-width:821px){.dspg-fps-luc-media{aspect-ratio:1/1}.dspg-fps-luc .dspg-fps-luc-media img{object-position:70% center}} @media(max-width:820px){.dspg-fps-luc-in{grid-template-columns:1fr}.dspg-fps-luc-media{order:-1}.dspg-fps-prog{grid-template-columns:1fr}} @media(max-width:760px){.dspg-fps-videos{grid-template-columns:1fr;gap:30px}.dspg-fps-cases-grid{grid-template-columns:1fr 1fr}} /* ============================================================ SUB-HERO (subcategorie: lagere hero, kaart LINKS, kruimelpad) ============================================================ */ /* DESKTOP: foto = vaste band bovenin; kaart LINKS, boven-uitgelijnd, zodat de kaart net over de onderrand van de foto op de paginabodem zakt (bron pt-sub). Reviews rechtsonder binnen de fotoband. */ @media(min-width:1025px){ .dspg-hero--sub .dspg-hero-bg{inset:auto;top:0;left:0;width:100%;height:540px} .dspg-hero--sub .dspg-hero-inner{justify-content:flex-start;align-items:flex-start;min-height:540px;padding-top:76px;padding-bottom:48px} .dspg-hero--sub .dspg-card{margin-right:0;margin-left:0} .dspg-hero--sub .dspg-reviews{left:auto;right:var(--inset);bottom:auto;top:540px;transform:translateY(calc(-100% - 20px))} } /* TABLET: kaart links, reviews rechts (basis-tabletregel zet reviews op order:-1 = omgewisseld) */ @media(min-width:767px) and (max-width:1024px){ /* hogere fotoband zodat de kaart lager kan zakken en er ruimte onder het kruimelpad komt */ .dspg-hero--sub .dspg-hero-bg{height:685px} .dspg-hero--sub .dspg-reviews{order:0} } /* Calendly-versie (huisbezoek): CTA-blok is hoger (widget) → op tablet net als mobiel (gestapeld) */ @media(min-width:767px) and (max-width:1024px){ .dspg--cal .dspg-hero--sub .dspg-hero-bg{position:static;height:420px;object-position:center -75px} .dspg--cal .dspg-hero--sub .dspg-hero-inner{position:static;min-height:0;margin:-210px 0 0;padding:0 var(--inset) 48px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:26px} .dspg--cal .dspg-hero--sub .dspg-card{width:100%;max-width:none;margin:0} .dspg--cal .dspg-hero--sub .dspg-reviews{position:static;order:0;box-sizing:border-box;width:100%;justify-content:center;margin:0;padding:13px 16px;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.12);left:auto;right:auto;top:auto;bottom:auto;transform:none} } .dspg-hero-bg--flip{transform:scaleX(-1)} /* hero-foto op grotere desktopschermen wat naar onderen tonen (lager crop) */ @media(min-width:1251px){.dspg-hero--sub .dspg-hero-bg.dspg-hero-bg--down{object-position:center 20%}} /* contactpagina: hero-foto op desktop lager getoond + CTA-blok 100px lager */ @media(min-width:1025px){ .dspg-hero--contact .dspg-hero-bg{object-position:center 22%} .dspg-hero--contact .dspg-card{margin-top:100px} } .dspg-crumb{position:absolute;top:0;left:0;right:0;z-index:4} .dspg-crumb-in{max-width:1520px;margin:0 auto;padding:16px var(--inset) 0;font-family:var(--font-sans);font-size:15px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dspg-crumb a,.dspg-crumb .dspg-crumb-current{color:#fff;text-decoration:none} .dspg-crumb a:hover{text-decoration:underline} .dspg-crumb-sep{margin:0 8px;color:rgba(255,255,255,.6)} .dspg-crumb-current{color:rgba(255,255,255,.92)} /* mobiel: hero-kruimelpad mag doorlopen naar een 2e regel (crumb is absoluut, duwt niets naar onderen) */ @media(max-width:1024px){.dspg-crumb-in{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}} /* ============================================================ MAGAZINE (subcat "Slaapkamer-inspiratie") ============================================================ */ .dspg-mag-stack .dspg-mag-more,.dspg-mag-stack .dspg-mag-mood,.dspg-mag-stack .dspg-mag-klant{margin-bottom:110px} .dspg-mag-intro{max-width:780px;margin:80px auto 36px;text-align:center;padding:0 24px} .dspg-mag-intro h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.06;letter-spacing:-.5px;color:var(--color-ink);margin:0 0 20px} .dspg-mag-album-link{margin:0} /* grid + laad-meer (hergebruikt .dspg-catcard) */ .dspg-mag-allgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .dspg-more-hidden{display:none} .dspg-mag-more{text-align:center;margin-top:44px} @media(max-width:980px){.dspg-mag-allgrid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.dspg-mag-allgrid{grid-template-columns:1fr}} /* moodboard: proces + resultaat + materialen-tegels */ .dspg-mag-mood-board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dspg-mag-mood-room{position:relative;display:block;text-decoration:none;grid-column:span 2;grid-row:span 2;border-radius:6px;overflow:hidden} .dspg-mag-mood-room img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-mag-mood-room.is-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,0) 52%,rgba(0,0,0,.52) 100%)} .dspg-mag-mood-room.is-result::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%)} .dspg-mag-mood-roomlabel{position:absolute;left:0;bottom:0;z-index:1;padding:16px 20px;color:#fff;font-family:var(--font-sans);font-weight:700;font-size:.72rem;letter-spacing:2px;text-transform:uppercase} .dspg-mag-mood-room-link{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px clamp(22px,2.4vw,34px) 20px;transition:background .25s ease} .dspg-mag-mood-room-linktext{position:relative;display:inline-flex;align-items:center;gap:11px;padding-bottom:13px;color:#fff;font-family:var(--font-sans);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.35rem);transition:color .25s ease} .dspg-mag-mood-room-linktext::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--color-accent);transition:width .25s ease} .dspg-mag-mood-room.is-feature:hover img{transform:scale(1.03)} .dspg-mag-mood-room.is-feature:hover .dspg-mag-mood-room-linktext::after{width:60px} .dspg-mag-mood-room-cap{position:absolute;left:0;right:0;top:0;z-index:1;padding:clamp(22px,2.4vw,34px)} .dspg-mag-mood-room-cap h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.18;color:#fff;margin:0 0 10px} .dspg-mag-mood-room-cap p{font-family:var(--font-sans);font-size:.98rem;line-height:1.5;color:#fff;margin:0} .dspg-mag-mood-tile-img{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden} .dspg-mag-mood-tile-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-mag-mood-tile:hover .dspg-mag-mood-tile-img img{transform:scale(1.05)} .dspg-mag-mood-tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 13px 11px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.66) 100%)} .dspg-mag-mood-tile-cap b{display:block;font-family:var(--font-sans);font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:2px} .dspg-mag-mood-tile-cap i{display:block;font-style:normal;font-family:var(--font-sans);font-size:.86rem;line-height:1.28;color:#fff} @media(max-width:860px){.dspg-mag-mood-board{grid-template-columns:repeat(2,1fr)}.dspg-mag-mood-room{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}} @media(max-width:520px){.dspg-mag-mood-board{grid-template-columns:1fr 1fr}} /* klant in beeld (full-bleed foto + overlay) */ .dspg-mag-klant{position:relative;margin:0 calc(50% - 50vw) 110px;overflow:hidden} .dspg-mag-klant>img{width:100%;height:min(80vh,720px);object-fit:cover;display:block} .dspg-mag-klant::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 36%,rgba(0,0,0,.74) 100%)} .dspg-mag-klant-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;max-width:1520px;margin:0 auto;padding:0 clamp(24px,5vw,80px) 48px;color:#fff} .dspg-mag-klant-cap .dspg-mag-tag{color:rgba(255,255,255,.85)} .dspg-mag-klant-q{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.3;color:#fff;margin:0 0 12px;max-width:780px} .dspg-mag-klant-by{font-family:var(--font-sans);font-size:.85rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.85)} .dspg-mag-klant-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:#fff;font-family:var(--font-sans);font-weight:600;font-size:1rem;text-decoration:none;border-bottom:2px solid var(--color-accent);padding-bottom:3px} .dspg-mag-klant-link:hover{color:var(--color-accent)} .dspg-mag-tag{display:block;font-family:var(--font-sans);font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:#9a8a73;margin:0 0 10px} /* afsluitblok */ .dspg-mag-close{text-align:center;margin:0 auto 30px;max-width:700px;padding:0 24px} .dspg-mag-close h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;margin:0 0 24px;color:var(--color-ink)} .dspg-mag-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .dspg-mag-ctas .ds-cta{margin:0} /* ============================================================ LOOKBOOK (subcat: masonry-grid + CTA-band) ============================================================ */ /* vlakke kruimelbalk (geen herofoto): zand met donkere tekst */ .dspg-crumb--flat{position:static;background:var(--color-sand)} .dspg-crumb--flat .dspg-crumb-in{padding:14px var(--inset)} .dspg-crumb--flat a,.dspg-crumb--flat .dspg-crumb-current{color:var(--color-ink)} .dspg-crumb--flat .dspg-crumb-sep{color:rgba(61,40,45,.4)} /* mobiel: lange kruimelnaam mag over 2 regels binnen een gereserveerde hoogte, zodat de galerij eronder niet naar beneden schuift (zoals bron pt-pdphov) */ @media(max-width:1024px){ .dspg-crumb--flat .dspg-crumb-in{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;min-height:54px;padding:10px var(--inset) 4px;box-sizing:border-box} } .dspg-mag-intro--flat{margin-top:32px} /* masonry-grid (CSS columns) */ .dspg-lookbook-grid{columns:4;column-gap:14px} .dspg-lookbook-grid a{position:relative;display:block;margin:0 0 14px;border-radius:6px;overflow:hidden;break-inside:avoid;text-decoration:none} .dspg-lookbook-grid a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-lookbook-grid a.lb-p{aspect-ratio:3/4} .dspg-lookbook-grid a.lb-t{aspect-ratio:2/3} .dspg-lookbook-grid a.lb-l{aspect-ratio:4/3} .dspg-lookbook-grid a.lb-s{aspect-ratio:1/1} .dspg-lookbook-grid a:hover img{transform:scale(1.05)} .dspg-lookbook-grid a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.62) 100%);pointer-events:none} .dspg-lookbook-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 14px;color:#fff;font-family:var(--font-sans);font-size:.85rem;line-height:1.3} @media(max-width:1100px){.dspg-lookbook-grid{columns:3}} @media(max-width:760px){.dspg-lookbook-grid{columns:2;column-gap:10px}} /* afsluitende CTA-band: achtergrondfoto + brochure-kaart rechts */ .dspg-lookbook-cta{position:relative;margin:110px calc(50% - 50vw) 0;min-height:min(80vh,680px);display:flex;align-items:center;overflow:hidden} /* generieke .dspg-wrap>section-regel zet margin-top:0; hier de standaard stack-ruimte terugzetten */ .dspg-wrap>.dspg-lookbook-cta{margin-top:110px} .dspg-lookbook-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dspg-lookbook-cta::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)} .dspg-lookbook-cta-in{position:relative;z-index:1;max-width:1520px;width:100%;margin:0 auto;padding:40px clamp(24px,5vw,80px);display:flex;justify-content:flex-end} @media(max-width:860px){.dspg-lookbook-cta{min-height:0}.dspg-lookbook-cta-in{justify-content:center;padding:64px clamp(16px,4vw,28px)}} /* ============================================================ SENIORENBED-LP componenten (LP6) ============================================================ */ .dspg-brk{display:none} @media(min-width:1025px){.dspg-brk{display:inline}} .dspg-kicker{font-family:var(--font-sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8a7b7d;margin:0 0 18px} /* "Van alle gemakken voorzien" · 3 overlay-kaarten */ .dspg-gemakken{margin:60px 0 100px} .dspg-gemakken-head{text-align:center;margin:0 auto 20px;max-width:780px;padding:0 24px} .dspg-gemakken-head h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 16px} .dspg-gemakken-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .dspg-gemakken-card{display:flex;flex-direction:column;background:var(--color-sand);border-radius:6px;overflow:hidden} .dspg-gemakken-card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--color-sage)} .dspg-gemakken-card-media img{width:100%;height:100%;object-fit:cover;display:block} .dspg-gemakken-card-media img.dspg-obj-r{object-position:75% center} .dspg-gemakken-card-body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column;background:var(--color-sand)} .dspg-gemakken--whitebody .dspg-gemakken-card-body{background:#fff} .dspg-gemakken-card-overlay{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 20px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.58) 100%);text-shadow:0 1px 10px rgba(0,0,0,.5)} .dspg-gemakken-card-overlay h3{position:relative;display:inline-block;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.2;color:#fff;margin:0;padding-bottom:13px;text-align:left} .dspg-gemakken-card-overlay h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--color-accent)} .dspg-gemakken-list{list-style:none;padding:0;margin:0} .dspg-gemakken-list li{position:relative;padding:6px 0 6px 26px;font-family:var(--font-sans);font-size:.92rem;color:var(--color-ink);line-height:1.5} .dspg-gemakken-list li::before{content:"";position:absolute;left:2px;top:11px;width:11px;height:6px;border-left:1.5px solid var(--color-accent);border-bottom:1.5px solid var(--color-accent);transform:rotate(-45deg)} /* filter + bedmodellen-grid */ .dspg-bedsection{position:relative} .dspg-wrap>.dspg-bedsection,.dspg-wrap>.dspg-faqform{margin-bottom:110px} .dspg-filter{position:sticky;top:0;z-index:50;background:var(--color-sand);display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 calc(50% - 50vw) 25px;padding:20px 24px;border-top:1px solid rgba(61,40,45,.12);border-bottom:1px solid rgba(61,40,45,.12)} .dspg-filter-label{font-family:var(--font-sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8a7b7d;margin:0 12px 0 0;font-weight:500} .dspg-filter-btn{background:transparent;border:1px solid rgba(61,40,45,.2);padding:8px 16px;border-radius:50px;cursor:pointer;font-family:var(--font-sans);font-size:.88rem;color:var(--color-ink);transition:border-color .15s,background .15s,color .15s} .dspg-filter-btn:hover{border-color:var(--color-ink);background:#fcfaf6} .dspg-filter-btn.is-active{background:var(--color-ink);border-color:var(--color-ink);color:#fff} /* CTA-duo (advies + gids), direct onder het filter op subcat-LP's */ .dspg-cta-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:2px 0 38px} .dspg-cta-card{display:flex;align-items:stretch;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(61,40,45,.08);border-radius:8px;overflow:hidden;transition:box-shadow .18s ease,transform .12s ease} .dspg-cta-card:hover{box-shadow:0 14px 34px rgba(61,40,45,.13);transform:translateY(-2px)} .dspg-cta-card-media{flex:0 0 40%;align-self:stretch;overflow:hidden;background:#f1e7e2} .dspg-cta-card-media img{width:100%;height:100%;object-fit:cover;display:block} .dspg-cta-card-media--gids{background:#fff;display:flex;align-items:center;justify-content:center} .dspg-cta-card-media--gids img{width:auto;height:auto;max-width:100%;max-height:86%;object-fit:contain;padding:14px} .dspg-cta-card-body{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 26px;min-width:0} .dspg-cta-card-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.18;color:var(--color-ink)} .dspg-cta-card-desc{font-family:var(--font-sans);font-size:.9rem;line-height:1.5;color:#5a4549} .dspg-cta-card-link{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-top:4px;font-family:var(--font-sans);font-weight:600;font-size:.85rem;color:var(--color-ink);padding-bottom:9px} .dspg-cta-card-link::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--color-accent);transition:width .25s ease} .dspg-cta-card:hover .dspg-cta-card-link::after{width:56px} .dspg-cta-card-link .dspg-catcard-arrow{top:0} @media(max-width:767px){.dspg-cta-duo{grid-template-columns:1fr;gap:14px;margin-bottom:28px}} .dspg-bedgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:90px;grid-auto-flow:dense} .dspg-bed-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(61,40,45,.10);border-radius:6px;overflow:hidden} .dspg-bed-card-media{aspect-ratio:4/3;overflow:hidden;background:var(--color-sand)} .dspg-bed-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .dspg-bed-card:hover .dspg-bed-card-media img{transform:scale(1.03)} .dspg-bed-card-body{padding:20px 22px 26px} .dspg-bed-card-kicker{font-family:var(--font-sans);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#8a7b7d;margin:0 0 8px;font-weight:500} .dspg-bed-card h3{font-family:var(--font-serif);font-weight:500;font-size:1.2rem;line-height:1.2;color:var(--color-ink);margin:0 0 10px} .dspg-bed-card-pitch{font-family:var(--font-sans);font-size:.9rem;color:#5a4549;line-height:1.55;margin:0 0 12px} .dspg-bed-card-link{font-family:var(--font-sans);font-size:.85rem;color:var(--color-link);font-weight:600} .dspg-bed-card[hidden]{display:none} /* --- Foto-variant bed-card (volledige foto, info als overlay, knop in beddentegel-stijl) --- */ /* vierkant via spacer (ipv aspect-ratio) zodat de tegel kan meeschalen met een hoge info-spread in dezelfde rij */ .dspg-bed-card--photo{position:relative;display:block;border:0;border-radius:8px;overflow:hidden;background:var(--color-sand);align-self:stretch} .dspg-bed-card--photo::before{content:"";display:block;padding-top:100%} .dspg-bed-card--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-bed-card--photo:hover img{transform:scale(1.04)} .dspg-bed-card--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.5) 100%)} .dspg-bed-card-photo-content{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 24px 22px;display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 1px 10px rgba(0,0,0,.5)} .dspg-bed-card-photo-content h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.15;color:#fff;margin:0 0 4px} .dspg-bed-card-photo-meta{font-family:var(--font-sans);font-size:.88rem;font-weight:400;line-height:1.4;color:rgba(255,255,255,.92);margin:0 0 12px} .dspg-bed-card-photo-meta b{font-weight:600} .dspg-bed-card-photo-btn{position:relative;display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-sans);font-weight:600;font-size:.9rem;padding-bottom:10px} .dspg-bed-card-photo-btn::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--color-accent);transition:width .25s ease} .dspg-bed-card--photo:hover .dspg-bed-card-photo-btn::after{width:58px} .dspg-bed-card-photo-btn .dspg-catcard-arrow{top:0} /* categorie-tegel (homepage): chevron achter de titel + geel accent-streepje, geen knop */ .dspg-bed-card-photo-content h3 .dspg-catcard-arrow{display:inline-block;vertical-align:middle;margin-left:9px;top:-2px} .dspg-bed-card--cat .dspg-bed-card-photo-content h3{position:relative;display:inline-block;padding-bottom:13px} .dspg-bed-card--cat .dspg-bed-card-photo-content h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--color-accent);transition:width .25s ease} .dspg-bed-card--cat:hover .dspg-bed-card-photo-content h3::after{width:60px} /* info-spreads (span 2, sand/sage, omkeerbaar) */ .dspg-info-spread{grid-column:span 2;display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:stretch;padding:36px 40px;border-radius:6px} .dspg-info-spread--sand{background:var(--color-sand)} .dspg-info-spread--sage{background:var(--color-sage)} .dspg-info-spread--rev{grid-template-columns:1.1fr 1fr} .dspg-info-spread--rev .dspg-info-spread-media{order:2} .dspg-info-spread-media{position:relative;overflow:hidden;border-radius:6px;min-height:380px} .dspg-info-spread-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .dspg-info-spread-text{display:flex;flex-direction:column;justify-content:center} .dspg-info-spread-text h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,1.8rem);line-height:1.15;letter-spacing:-.2px;color:var(--color-ink);margin:0 0 14px} .dspg-info-spread-text p{font-family:var(--font-sans);font-size:.95rem;line-height:1.65;color:var(--color-ink);margin:0 0 12px} .dspg-info-spread-text ul{list-style:none;padding:0;margin:6px 0 0} .dspg-info-spread-text li{position:relative;padding:11px 0 11px 26px;font-family:var(--font-sans);font-size:.92rem;color:var(--color-ink);line-height:1.5;border-bottom:1px solid rgba(61,40,45,.1)} .dspg-info-spread-text li:last-child{border-bottom:0} .dspg-info-spread-text li::before{content:"";position:absolute;left:2px;top:18px;width:11px;height:6px;border-left:1.5px solid var(--color-accent);border-bottom:1.5px solid var(--color-accent);transform:rotate(-45deg)} .dspg-info-spread[hidden]{display:none} /* klant-card */ .dspg-klant-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(61,40,45,.10);border-radius:6px;overflow:hidden} .dspg-klant-card[hidden]{display:none} .dspg-klant-card-media{aspect-ratio:4/3;overflow:hidden;background:var(--color-sand)} .dspg-klant-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .dspg-klant-card:hover .dspg-klant-card-media img{transform:scale(1.03)} .dspg-klant-card-body{padding:20px 22px 26px} .dspg-klant-card h3{font-family:var(--font-serif);font-weight:500;font-size:1.2rem;line-height:1.25;color:var(--color-ink);margin:0 0 10px} .dspg-klant-card-quote{font-family:var(--font-serif);font-style:italic;font-size:.92rem;line-height:1.5;color:#5a4549;margin:0 0 12px} .dspg-klant-card-link{font-family:var(--font-sans);font-size:.85rem;color:var(--color-link);font-weight:600} /* --- Foto-variant klant-card (duidelijk anders dan product: badge + italic quote als blikvanger) --- */ .dspg-klant-card--photo{position:relative;display:block;border:0;border-radius:8px;overflow:hidden;background:var(--color-sand);align-self:stretch} .dspg-klant-card--photo::before{content:"";display:block;padding-top:100%} .dspg-klant-card--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-klant-card--photo:hover img{transform:scale(1.04)} .dspg-klant-card--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,40,45,0) 48%,rgba(61,40,45,.64) 100%)} .dspg-klant-card-photo-content{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 24px 22px;display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 1px 10px rgba(0,0,0,.45)} .dspg-klant-card-photo-quote{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.34;color:#fff;margin:0 0 11px} .dspg-klant-card-photo-name{font-family:var(--font-sans);font-size:.84rem;font-weight:500;color:rgba(255,255,255,.82);margin:0 0 13px} .dspg-klant-card-photo-link{display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:var(--font-sans);font-weight:600;font-size:.88rem} .dspg-klant-card-photo-link .dspg-catcard-arrow{top:0} .dspg-klant-card--photo:hover .dspg-klant-card-photo-link{text-decoration:underline} /* --- Foto-variant info-spread (foto hoogte-vullend aan een zijde, tekst ernaast, sage) --- */ .dspg-info-spread--photo{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;padding:0;border-radius:8px;overflow:hidden;background:var(--color-sage);min-height:430px} .dspg-info-spread--photo .dspg-info-spread-media{position:relative;border-radius:0;min-height:100%} .dspg-info-spread--photo .dspg-info-spread-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .dspg-info-spread--photo .dspg-info-spread-text{padding:40px 46px;display:flex;flex-direction:column;justify-content:center} @media(max-width:1024px){ .dspg-info-spread.dspg-info-spread--photo{grid-template-columns:1fr;min-height:0;padding:0;gap:0} .dspg-info-spread--photo .dspg-info-spread-media{min-height:0;padding-top:66%} .dspg-info-spread--photo .dspg-info-spread-text{padding:28px 24px} } /* bedrijfsvideo-link + modal */ .dspg-craft-video-link{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;text-decoration:none;font-family:var(--font-sans);font-size:.92rem;color:var(--color-link);font-weight:500;letter-spacing:.2px;transition:color .15s} .dspg-craft-video-link:hover{color:#254151} .dspg-craft-video-link svg{width:14px;height:14px;fill:currentColor} .dspg-video-modal{width:90vw;max-width:980px;padding:0;border:0;border-radius:2px;background:transparent} .dspg-video-modal:not([open]){display:none} .dspg-video-modal::backdrop{background:rgba(0,0,0,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .dspg-video-modal-inner{aspect-ratio:1.85/1;line-height:0;border-radius:2px;overflow:hidden;background:#000} .dspg-video-modal-inner iframe{width:100%;height:100%;border:0;display:block} .dspg-video-modal-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:0;color:#fff;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center} .dspg-video-modal-close:hover{background:rgba(0,0,0,.8)} /* advies-regel (editorial) */ .dspg-advice-line{max-width:760px;margin:0 auto 80px;padding:18px 24px;text-align:center;font-family:var(--font-sans);font-size:.95rem;line-height:1.6;color:#5a4549;border-top:1px solid rgba(61,40,45,.12);border-bottom:1px solid rgba(61,40,45,.12)} .dspg-advice-line .dspg-kicker{display:inline-block;margin:0 12px 0 0;vertical-align:middle} .dspg-advice-line a{color:var(--color-link);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(65,110,134,.4)} .dspg-advice-line a:hover{border-color:var(--color-link)} /* seniorenbed responsive */ @media(max-width:1024px){ .dspg-gemakken{margin-bottom:70px} .dspg-gemakken-grid{grid-template-columns:1fr;gap:24px} .dspg-gemakken-card-media{aspect-ratio:3/2} .dspg-gemakken-head{margin-bottom:15px} .dspg-bedgrid{grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:60px} .dspg-info-spread{grid-column:span 2;grid-template-columns:1fr;gap:24px;padding:30px 24px;align-items:stretch} .dspg-info-spread--rev .dspg-info-spread-media{order:0} .dspg-info-spread-media{padding-top:75%;min-height:0} .dspg-filter{padding:16px;margin:0 calc(50% - 50vw) 18px} .dspg-advice-line{margin-bottom:60px;padding:14px 16px} } @media(max-width:620px){ .dspg-bedgrid{grid-template-columns:1fr} .dspg-info-spread{grid-column:span 1} } /* ============================================================ PDP (productdetail-concept) ============================================================ */ .dspg-pdp-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,30%,390px);gap:36px;align-items:start;margin-bottom:80px} .dspg-pdp-aside{position:sticky;top:24px;align-self:start} /* galerij */ .dspg-pdp-gallery{display:flex;flex-direction:column;gap:22px;min-width:0} .dspg-pdp-gallery-main{aspect-ratio:3/2;background:var(--color-sand);overflow:hidden;border-radius:6px;position:relative;cursor:pointer} .dspg-pdp-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s} .dspg-pdp-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(247,237,234,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s,background .15s;z-index:2} .dspg-pdp-gallery-main:hover .dspg-pdp-gallery-nav{opacity:1} .dspg-pdp-gallery-nav:hover{background:#fff} .dspg-pdp-gallery-nav svg{width:18px;height:18px;stroke:var(--color-ink);stroke-width:1.5;fill:none} .dspg-pdp-gallery-nav--prev{left:16px} .dspg-pdp-gallery-nav--next{right:16px} .dspg-pdp-gallery-count{position:absolute;right:16px;bottom:16px;font-family:var(--font-sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--color-ink);background:rgba(247,237,234,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 10px;border-radius:2px} .dspg-pdp-gallery-count span{color:#8a7b7d} .dspg-pdp-gallery-dots{display:flex;gap:12px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none} .dspg-pdp-gallery-dots::-webkit-scrollbar{display:none} .dspg-pdp-gallery-dots button{flex:0 0 auto;width:110px;aspect-ratio:3/2;padding:0;background:var(--color-sand);border:0;border-bottom:2px solid transparent;border-radius:6px;cursor:pointer;overflow:hidden;opacity:.5;transition:opacity .15s,border-color .15s} .dspg-pdp-gallery-dots button:hover{opacity:.85} .dspg-pdp-gallery-dots button.is-active{opacity:1;border-bottom-color:var(--color-ink)} .dspg-pdp-gallery-dots img{width:100%;height:100%;object-fit:cover;display:block} /* aside (titel, prijs, CTA's) */ .dspg-pdp-aside .dspg-kicker{margin-bottom:8px} .dspg-pdp-aside h1{font-family:var(--font-serif);font-weight:500;font-size:2.7rem;line-height:1.05;letter-spacing:-.5px;color:var(--color-ink);margin:0 0 14px} .dspg-pdp-aside-body{font-family:var(--font-sans);font-size:1rem;line-height:1.75;color:var(--color-ink);margin:0 0 22px;text-align:left} .dspg-pdp-aside-body p{margin:0 0 12px} .dspg-pdp-aside-fine{font-size:.92rem;font-style:normal} .dspg-link{color:var(--color-link);text-decoration:underline;text-underline-offset:2px} .dspg-link:hover{color:#254151} .dspg-pdp-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:14px} .dspg-pdp-actions .ds-cta{width:100%} .dspg-pdp .ds-cta::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-top:-1px;flex-shrink:0} .dspg-pdp-aside-tel{font-family:var(--font-sans);font-size:.88rem;color:#5a4549;text-align:center;margin:4px 0 0;letter-spacing:.2px} .dspg-pdp-aside-tel a{color:var(--color-link);text-decoration:none;font-weight:500} /* gids-tegel in aside (mock) */ .dspg-pdp-gids-tile{font-family:var(--font-sans);font-style:italic;color:var(--color-ink);font-size:.95rem;line-height:1.5;padding:14px 16px;margin:0 0 24px;background:#fff;border:1px solid rgba(61,40,45,.12);border-radius:6px;box-shadow:0 2px 6px rgba(61,40,45,.08);text-align:center;position:relative;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .12s} .dspg-pdp-gids-tile:hover{border-color:rgba(61,40,45,.22);box-shadow:0 6px 16px rgba(61,40,45,.12);transform:translateY(-1px)} .dspg-pdp-gids-tile a{color:var(--color-link);font-style:italic;text-decoration:underline;text-underline-offset:2px} .dspg-pdp-gids-tile-text a::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0} .dspg-pdp-gids-tile-mock{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px} .dspg-pdp-gids-tile-img{flex:0 0 auto;width:96px;height:auto;display:block;border-radius:2px;background:transparent} .dspg-pdp-gids-tile-text{margin:0;font-family:var(--font-sans);font-style:italic;color:var(--color-ink);font-size:.92rem;line-height:1.5} /* pull quote */ .dspg-pdp-quote{max-width:880px;margin:0 auto 90px;padding:46px 24px 0;text-align:center} .dspg-pdp-quote p{font-family:var(--font-serif);font-style:italic;font-size:1.5rem;line-height:1.55;color:var(--color-ink);margin:0} .dspg-pdp-quote p::before{content:"\201C";display:block;font-size:7rem;line-height:.5;color:var(--color-accent);margin-bottom:-30px} .dspg-pdp-quote cite{display:block;font-family:var(--font-sans);font-size:.85rem;letter-spacing:2px;text-transform:uppercase;color:#8a7b7d;margin-top:18px;font-style:normal;font-weight:500;line-height:1.6} .dspg-pdp-quote cite a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(138,123,125,.5);text-decoration-thickness:.5px} .dspg-pdp-quote cite a:hover{text-decoration-color:#8a7b7d} /* vakmanschap (foto + bedrijfsvideo) */ .dspg-pdp-craft{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;margin-bottom:90px} .dspg-pdp-craft-media{display:flex;flex-direction:column;gap:14px} .dspg-pdp-craft-media img{width:100%;height:auto;display:block;border-radius:6px;aspect-ratio:1/1;object-fit:cover;object-position:100% 50%} .dspg-pdp-craft-text{order:-1} .dspg-pdp-craft-text h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.2;color:var(--color-ink);margin:0 0 16px} .dspg-pdp-craft-text p{font-family:var(--font-sans);font-size:1rem;line-height:1.75;color:var(--color-ink);margin:0 0 12px} /* terug-link */ .dspg-wrap.dspg-pdp>.dspg-gids{margin-bottom:55px} .dspg-pdp-back-wrap{display:flex;justify-content:center;margin:0 0 80px} .dspg-pdp-back-cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:transparent;color:var(--color-link);border:1px solid var(--color-link);font-family:var(--font-sans);font-size:.98rem;font-weight:600;letter-spacing:.2px;padding:13px 24px;border-radius:6px;transition:background .18s,color .18s,border-color .18s} .dspg-pdp-back-cta:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)} .dspg-pdp-back-cta::before{content:"\2039";font-size:1.2rem;line-height:1;margin-top:-2px;font-weight:400} /* desktop ≥1201px: grote inset op craft + gids. craft via padding (geen achtergrond), gids via margin (gekleurd blok). */ @media(min-width:1201px){ .dspg-pdp-craft{padding-left:clamp(48px,6vw,130px);padding-right:clamp(48px,6vw,130px)} .dspg-pdp .dspg-gids{margin-left:clamp(48px,6vw,130px);margin-right:clamp(48px,6vw,130px)} } /* PDP: galerij op desktop op dezelfde hoogte als het CTA-blok van de sub-hero (kruimelbalk ~49px + 28px ≈ 76px, gelijk aan .dspg-hero--sub padding-top) */ @media(min-width:1025px){ .dspg-wrap.dspg-pdp>.dspg-pdp-hero{margin-top:28px} } /* mobiel: krappe afstand kruimelpad → galerij */ @media(max-width:1024px){ .dspg-wrap.dspg-pdp>.dspg-pdp-hero{margin-top:14px} } /* PDP responsive */ @media(min-width:1024px) and (max-width:1259px){ .dspg-pdp-hero{grid-template-columns:minmax(0,1fr) clamp(340px,calc(470px - 8.3vw),390px);gap:44px} } @media(max-width:1023px){ .dspg-pdp-hero{grid-template-columns:minmax(0,1fr);gap:40px;margin-bottom:60px} .dspg-pdp-aside{position:static} .dspg-pdp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} .dspg-pdp-aside h1{font-size:2.1rem} .dspg-pdp-gallery-main{aspect-ratio:4/3} .dspg-pdp-gallery-dots button{width:96px;aspect-ratio:4/3} .dspg-pdp-gallery-nav{width:38px;height:38px;opacity:1} .dspg-pdp-gallery-count{font-size:10px;padding:5px 8px} .dspg-pdp-craft{grid-template-columns:1fr;gap:28px} .dspg-pdp-craft-media img{aspect-ratio:3/2} } /* ============================================================ ADVIES-ARTIKEL (seniorenbed-advies; lange-leesopmaak) Gescoped op .dspg-advies, ds-klassen behouden uit het artikel. ============================================================ */ .dspg-advies{background:#fdfaf6} .dspg-advies *{box-sizing:border-box} /* V6-standaard frame: één container op 1520 met de meest gebruikte inset */ .dspg-advies .ds-wrap{max-width:var(--maxw);margin:0 auto;padding:24px var(--inset)} .dspg-advies .ds-topbar{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(61,40,45,.15);padding-bottom:18px;margin-bottom:36px} .dspg-advies .ds-topbar-edition{font-family:var(--font-sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8a7b7d} .dspg-advies .ds-topbar-issue{font-family:var(--font-serif);font-style:italic;color:var(--color-ink);font-size:.95rem} .dspg-advies .ds-topbar-crumb a{color:inherit;text-decoration:none;transition:color .15s} .dspg-advies .ds-topbar-crumb a:hover{color:var(--color-ink)} .dspg-advies .ds-topbar-crumb-sep{margin:0 7px;color:rgba(61,40,45,.35)} .dspg-advies .ds-topbar-crumb-current{color:var(--color-ink)} @media(max-width:767px){.dspg-advies .ds-topbar{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:10px;margin-bottom:18px}.dspg-advies .ds-topbar-issue{display:none}} /* section + spacers */ .dspg-advies .ds-section{width:100%;max-width:none;margin:0;padding:0} .dspg-advies .ds-spacer-medium{padding-top:60px} .dspg-advies .ds-spacer-small{padding-top:24px} /* tekst + titels */ .dspg-advies .ds-text{margin:0;font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} .dspg-advies .ds-intro-text{margin:0;font-family:var(--font-sans);font-weight:400;font-size:clamp(17px,2vw,19px);line-height:clamp(26px,2.6vw,30px);letter-spacing:.2px;color:var(--color-ink)} .dspg-advies .ds-title-1{margin:0 0 6px;font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,3vw,36px);line-height:clamp(32px,3.4vw,40px);letter-spacing:.2px;color:var(--color-ink)} .dspg-advies .ds-title-2{margin:0 0 6px;font-family:var(--font-serif);font-weight:400;font-size:clamp(22px,2.7vw,28px);line-height:1.15;letter-spacing:.1px;color:var(--color-ink)} .dspg-advies .ds-title-1-color{color:var(--color-ink)} .dspg-advies .ds-title-2 + .ds-text{margin-top:8px} /* tekstlinks */ .dspg-advies .ds-link-text,.dspg-advies .ds-link-text-chevron{font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-link);text-decoration:none} .dspg-advies .ds-link-text:hover,.dspg-advies .ds-link-text-chevron span:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} .dspg-advies .ds-link-text-chevron{position:relative;display:inline-block;padding-left:16px;vertical-align:middle} .dspg-advies .ds-link-text-chevron::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-right:1.25px solid currentColor;border-top:1.25px solid currentColor;transform:rotate(45deg)} /* buttons */ .dspg-advies .ds-button-filled,.dspg-advies .ds-button-outlined{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:fit-content;padding:14px 22px;border:1px solid transparent;border-radius:6px;font-family:var(--font-sans);font-weight:600;font-size:1rem;line-height:20px;letter-spacing:.2px;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s} .dspg-advies .ds-button-filled{background:var(--color-link);border-color:var(--color-link);color:#fff} .dspg-advies .ds-button-filled:hover{background:var(--color-ink);border-color:var(--color-ink);color:#fff} .dspg-advies .ds-button-outlined{background:transparent;color:var(--color-link);border-color:var(--color-link)} .dspg-advies .ds-button-outlined:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink)} .dspg-advies .ds-button-chevron{width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex-shrink:0} .dspg-advies .ds-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px} .dspg-advies .ds-links>*{margin:0!important} .dspg-advies .ds-buttons{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin-top:17px} .dspg-advies .ds-buttons>*{margin:0} /* hero-foto + meta */ .dspg-advies .ds-hero-image-wrapper{width:100%;overflow:hidden;border-radius:6px;margin-top:17px} .dspg-advies .ds-hero-image{display:block;width:100%;height:clamp(190px,19vw,260px);object-fit:cover;object-position:center center} .dspg-advies .ds-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 34px;margin-top:8px;margin-bottom:32px} .dspg-advies .ds-meta-item{display:flex;align-items:center;gap:10px;min-width:0} .dspg-advies .ds-meta-item .ds-text{font-size:clamp(13px,1.8vw,15px);line-height:22px;color:rgba(61,40,45,.62)} .dspg-advies .ds-meta-icon{width:22px;height:22px;flex-shrink:0;color:rgba(61,40,45,.42)} /* intro */ .dspg-advies .ds-intro{max-width:75%} /* in-page ankermenu */ .dspg-advies .ds-advies-inpage-menu-section{position:relative;overflow:visible} .dspg-advies .ds-advies-inpage-menu-section::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(61,40,45,.18);pointer-events:none} .dspg-advies .ds-advies-inpage-menu-wrap{margin-bottom:48px} .dspg-advies .ds-advies-inpage-menu{position:relative;display:flex;align-items:flex-end;gap:18px;width:100%;margin-top:17px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;touch-action:pan-x} .dspg-advies .ds-advies-inpage-menu::-webkit-scrollbar{display:none} .dspg-advies .ds-advies-inpage-menu-item{display:flex;align-items:stretch;flex:0 0 auto;position:relative;z-index:1;margin-bottom:-1px;border-bottom:1px solid transparent;color:var(--color-ink);text-decoration:none;white-space:nowrap;transition:border-color .2s} .dspg-advies .ds-advies-inpage-menu-item span{display:flex;align-items:center;padding:12px 10px;transition:background-color .2s,color .2s} .dspg-advies .ds-advies-inpage-menu-item:hover{border-bottom:2px solid var(--color-link)} .dspg-advies .ds-advies-inpage-menu-item:hover span{background:var(--color-sand)} .dspg-advies .ds-advies-inpage-menu-item-active{border-bottom:2px solid var(--color-link)} .dspg-advies .ds-advies-inpage-menu-item-active span{font-family:var(--font-sans);font-weight:700;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} /* opsomming */ .dspg-advies .ds-opsomming{display:flex;flex-direction:column;gap:10px;margin-top:12px} .dspg-advies .ds-opsomming-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} .dspg-advies .ds-opsomming-item{display:flex;align-items:flex-start;gap:14px;font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} .dspg-advies .ds-opsomming-item::before{content:"";flex-shrink:0;width:5px;height:5px;margin-top:9px;border-radius:50%;background:currentColor} /* content + media (tekst links, beeld rechts) */ .dspg-advies .ds-content-media{display:flex;flex-direction:column} .dspg-advies .ds-content-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(17px,2vw,26px);align-items:start} .dspg-advies .ds-content-media-left{display:flex;flex-direction:column;min-width:0} .dspg-advies .ds-content-media-text,.dspg-advies .ds-content-media-visual{min-width:0} .dspg-advies .ds-content-media-visual{width:100%} .dspg-advies .ds-content-media-image{display:block;width:100%;overflow:hidden;border-radius:6px;aspect-ratio:16/9;object-fit:cover} .dspg-advies .ds-content-media-video-wrapper{display:block;width:100%;overflow:hidden;border-radius:6px;position:relative;padding-top:56.25%} .dspg-advies .ds-content-media-video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;border-radius:6px} /* artikel-cta */ .dspg-advies .ds-artikel-cta{margin-top:clamp(40px,6vw,64px);padding:clamp(28px,4vw,48px);background:var(--color-sand);border-radius:6px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center} .dspg-advies .ds-artikel-cta-text{margin:0;font-family:var(--font-serif);font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:var(--color-ink)} /* advies responsive */ @media(max-width:767px){ .dspg-advies .ds-hero-image{height:clamp(190px,44vw,260px)} .dspg-advies .ds-meta{gap:2px 20px} .dspg-advies .ds-intro{max-width:100%} .dspg-advies .ds-content-media-grid{display:flex;flex-direction:column;gap:12px} .dspg-advies .ds-content-media-left{display:contents} .dspg-advies .ds-content-media-grid>:is(.ds-title-1,.ds-title-2){order:1;margin-bottom:0} .dspg-advies .ds-content-media-visual{order:2;width:100%} .dspg-advies .ds-content-media-text{order:3;width:100%} .dspg-advies .ds-artikel-cta{grid-template-columns:1fr;gap:20px} } /* ============================================================ FOOTER ============================================================ */ .dspg-footer{padding:40px var(--inset);border-top:1px solid rgba(61,40,45,.12);text-align:center;color:#6b5b5d;font-size:14px;line-height:1.6} .dspg-footer img{height:30px;margin:0 auto 12px;opacity:.85} /* ============================================================ ADVIES-ARTIKEL (editorial long-read) ------------------------------------------------------------ Pagina-specifieke opmaak voor het advies-artikel-type: tekst-hero, sticky inhoudsopgave met scroll-spy, smalle leeskolom, "in het kort"-blok, checklist, inline beeld/video, pull-quote, spec-lijst, sand-callout, sage CTA-band, FAQ-wrapper (hergebruikt dspg-faq-*) en "verder lezen". Gescoped op .dspg-art — raakt andere paginatypes niet. Hoort bij payloads: payloads/seniorenbed/pagina-advies-*.html ============================================================ */ /* hero */ .dspg-art .dsart-hero{max-width:820px;margin:0 auto;padding:60px var(--inset) 0;text-align:center} .dspg-art .dsart-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:1.06;letter-spacing:-.5px;color:var(--color-ink);margin:0 0 22px} .dspg-art .dsart-standfirst{font-family:var(--font-sans);font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.6;color:#4a3f40;margin:0 0 26px} .dspg-art .dsart-meta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;font-family:var(--font-sans);font-size:.9rem;color:#8a7b7d} .dspg-art .dsart-meta strong{color:var(--color-ink);font-weight:600} .dspg-art .dsart-dot{width:4px;height:4px;border-radius:50%;background:#cbbfc1} .dspg-art .dsart-herofig{max-width:1180px;margin:42px auto 0;padding:0 var(--inset)} .dspg-art .dsart-herofig-in{border-radius:8px;overflow:hidden;aspect-ratio:16/7} .dspg-art .dsart-herofig img{width:100%;height:100%;object-fit:cover;display:block} /* body: sticky TOC + leeskolom */ .dspg-art .dsart-body{display:grid;grid-template-columns:230px minmax(0,720px);gap:64px;justify-content:center;max-width:1100px;margin:56px auto 0;padding:0 var(--inset)} .dspg-art .dsart-toc{position:sticky;top:96px;align-self:start} .dspg-art .dsart-toc-title{font-family:var(--font-sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8a7b7d;margin:0 0 14px} .dspg-art .dsart-toc ol{list-style:none;margin:0;padding:0} .dspg-art .dsart-toc a{display:block;padding:8px 0 8px 16px;border-left:2px solid rgba(61,40,45,.14);color:#6a5b5d;text-decoration:none;font-family:var(--font-sans);font-size:.92rem;line-height:1.35;transition:color .15s,border-color .15s} .dspg-art .dsart-toc a:hover{color:var(--color-ink)} .dspg-art .dsart-toc a.is-active{color:var(--color-ink);border-color:var(--color-accent);font-weight:600} /* leeskolom-typografie */ .dspg-art .dsart-article{min-width:0} .dspg-art .dsart-article h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.15;letter-spacing:-.2px;color:var(--color-ink);margin:50px 0 16px;scroll-margin-top:96px} .dspg-art .dsart-article>section:first-of-type h2,.dspg-art .dsart-article>h2:first-child{margin-top:0} .dspg-art .dsart-article p{font-family:var(--font-sans);font-size:1.06rem;line-height:1.75;color:#3f3537;margin:0 0 18px} .dspg-art .dsart-article p a{color:var(--color-link);text-decoration:underline;text-underline-offset:.18em} /* "in het kort" */ .dspg-art .dsart-tldr{background:#fff;border-radius:8px;padding:24px 26px;margin:0 0 44px} .dspg-art .dsart-tldr h2{font-family:var(--font-serif);font-weight:500;font-size:1.3rem;margin:0 0 12px} .dspg-art .dsart-tldr ul{list-style:none;margin:0;padding:0} .dspg-art .dsart-tldr li{position:relative;padding:8px 0 8px 28px;font-family:var(--font-sans);font-size:1rem;line-height:1.5;color:var(--color-ink)} .dspg-art .dsart-tldr li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;border-left:1.7px solid var(--color-accent);border-bottom:1.7px solid var(--color-accent);transform:rotate(-45deg)} /* checklist (platte tekst) */ .dspg-art .dsart-checklist{list-style:none;padding:0;margin:4px 0 22px} .dspg-art .dsart-checklist li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid rgba(61,40,45,.1);font-family:var(--font-sans);font-size:1rem;line-height:1.4;color:var(--color-ink)} .dspg-art .dsart-checklist li:last-child{border-bottom:0} .dspg-art .dsart-checklist li::before{content:"";position:absolute;left:3px;top:17px;width:12px;height:7px;border-left:1.7px solid var(--color-accent);border-bottom:1.7px solid var(--color-accent);transform:rotate(-45deg)} /* inline beeld */ .dspg-art .dsart-fig{margin:6px 0 30px} .dspg-art .dsart-fig-in{border-radius:8px;overflow:hidden} .dspg-art .dsart-fig img{width:100%;display:block} .dspg-art .dsart-fig--32 .dsart-fig-in{aspect-ratio:3/2} .dspg-art .dsart-fig--32 img{height:100%;object-fit:cover} .dspg-art .dsart-fig figcaption{font-family:var(--font-sans);font-size:.85rem;color:#8a7b7d;padding:10px 2px 0;margin:0} /* pull-quote */ .dspg-art .dsart-pull{margin:36px 0;padding:4px 0 4px 26px;border-left:3px solid var(--color-accent);font-family:var(--font-serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.32;color:var(--color-ink)} /* video */ .dspg-art .dsart-video{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;margin:6px 0 12px} .dspg-art .dsart-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .dspg-art .dsart-vcap{font-family:var(--font-sans);font-size:.92rem;color:#6a5b5d;margin:0 0 30px} /* spec-lijst */ .dspg-art .dsart-specs{list-style:none;margin:6px 0 18px;padding:0} .dspg-art .dsart-specs li{position:relative;padding:12px 2px 12px 22px;border-bottom:1px solid rgba(61,40,45,.12);font-family:var(--font-sans);font-size:1rem;color:var(--color-ink)} .dspg-art .dsart-specs li:last-child{border-bottom:0} .dspg-art .dsart-specs li::before{content:"";position:absolute;left:2px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--color-accent)} /* callout (sand) */ .dspg-art .dsart-callout{background:var(--color-sand);border-radius:8px;padding:20px 22px;margin:24px 0 0;font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:#4a3f40} .dspg-art .dsart-callout strong{color:var(--color-ink)} /* inline CTA-band (sage) */ .dspg-art .dsart-ctaband{background:var(--color-sage);border-radius:10px;padding:34px 36px;margin:48px 0;text-align:center} .dspg-art .dsart-ctaband h2{font-family:var(--font-serif);font-weight:400;color:var(--color-ink);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;margin:0 0 10px} .dspg-art .dsart-ctaband p{font-family:var(--font-sans);color:#4a3f40;margin:0 0 20px;font-size:1rem} /* FAQ (hergebruikt dspg-faq-* opmaak; alleen wrapper) */ .dspg-art .dsart-faq{margin:50px 0 0} .dspg-art .dsart-faq>h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,1.95rem);color:var(--color-ink);margin:0 0 8px} /* verder lezen */ .dspg-art .dsart-related{max-width:1100px;margin:60px auto 0;padding:0 var(--inset)} .dspg-art .dsart-related h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);color:var(--color-ink);margin:0 0 18px;text-align:center} .dspg-art .dsart-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px} .dspg-art .dsart-related-grid a{display:flex;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid rgba(61,40,45,.12);font-family:var(--font-sans);font-size:1rem;color:var(--color-ink);text-decoration:none;transition:color .15s} .dspg-art .dsart-related-grid a::after{content:"";margin-left:auto;width:8px;height:8px;border-top:2px solid var(--color-link);border-right:2px solid var(--color-link);transform:rotate(45deg);flex-shrink:0} .dspg-art .dsart-related-grid a:last-child{border-bottom:0} .dspg-art .dsart-related-grid a:hover{color:var(--color-link)} @media(max-width:980px){ .dspg-art .dsart-body{grid-template-columns:1fr;gap:0} .dspg-art .dsart-toc{position:static;margin:0 0 34px;background:var(--color-sand);border-radius:8px;padding:18px 20px} .dspg-art .dsart-toc a{border-left-color:rgba(61,40,45,.18)} .dspg-art .dsart-related-grid{grid-template-columns:1fr;gap:0} } @media(max-width:760px){ .dspg-art .dsart-herofig-in{aspect-ratio:3/2} } /* ------------------------------------------------------------ ADVIES-HUB (overzichtspagina met artikelkaarten) Hoort bij payload: payloads/seniorenbed/pagina-advies-hub.html ------------------------------------------------------------ */ .dspg-art .dsart-hub{max-width:1180px;margin:48px auto 0;padding:0 var(--inset)} .dspg-art .dsart-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .dspg-art .dsart-hub-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(61,40,45,.1);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--color-ink);transition:box-shadow .2s,transform .2s} .dspg-art .dsart-hub-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.10);transform:translateY(-2px)} .dspg-art .dsart-hub-media{aspect-ratio:3/2;overflow:hidden} .dspg-art .dsart-hub-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .dspg-art .dsart-hub-card:hover .dsart-hub-media img{transform:scale(1.03)} .dspg-art .dsart-hub-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .dspg-art .dsart-hub-body h2{font-family:var(--font-serif);font-weight:500;font-size:1.25rem;line-height:1.22;letter-spacing:-.2px;color:var(--color-ink);margin:0 0 10px} .dspg-art .dsart-hub-desc{font-family:var(--font-sans);font-size:.96rem;line-height:1.6;color:#5a4549;margin:0 0 18px} .dspg-art .dsart-hub-link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-sans);font-weight:600;font-size:.95rem;color:var(--color-link)} .dspg-art .dsart-hub-link::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex-shrink:0} .dspg-art .dsart-hub-card:hover .dsart-hub-link{text-decoration:underline;text-underline-offset:.2em} @media(max-width:980px){.dspg-art .dsart-hub-grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.dspg-art .dsart-hub-grid{grid-template-columns:1fr}} .dspg.dspg--v6 .ds-form h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} /* Slaapkamer / overige sectietypes: blueprint-titels */ .dspg--v6 .dspg-styles-head h2, .dspg--v6 .dspg-lookbook h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-proces-head h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:#fff;margin:0} .dspg--v6 .dspg-finish-item h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-proces-step h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.15;letter-spacing:0;color:#fff;margin:0 0 10px} .dspg--v6 .dspg-style span{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);letter-spacing:0} .dspg-style:hover,.dspg-style:focus,.dspg-style:focus-visible,.dspg-style:active,.dspg-style:hover *{background-color:transparent!important} .dspg-mag-mood-room:hover,.dspg-mag-mood-room:focus,.dspg-mag-mood-room:focus-visible,.dspg-mag-mood-room:active,.dspg-mag-mood-room:hover *{background-color:transparent!important} .dspg--v6 .dspg-mag-mood-room-cap,.dspg--v6 .dspg-mag-mood-room-link{padding-left:26px} @media(max-width:600px){.dspg--v6 .dspg-mag-mood-room-cap,.dspg--v6 .dspg-mag-mood-room-link{padding-left:17px}.dspg-mag-mood-room.is-feature{aspect-ratio:1/1}} .dspg--v6 .dspg-mag-intro h1{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(40px,6vw,56px);line-height:1.1;letter-spacing:0;color:var(--color-ink);margin:0 0 20px} .dspg--v6 .dspg-mag-mood-room-cap h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:#fff;margin:0 0 10px} .dspg--v6 .dspg-mag-close h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 24px} /* Seniorenbed / overige sectietypes: blueprint-titels */ .dspg--v6 .dspg-gemakken-head h2, .dspg--v6 .dspg-info-spread-text h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-bed-card-photo-content h3, .dspg--v6 .dspg-gemakken-card-overlay h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(28px,3.4vw,33px);line-height:1.15;letter-spacing:0;color:#fff} .dspg--v6 .dspg-seo-intro-head h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-cta-card-title{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.15;letter-spacing:0;color:var(--color-ink)} .dspg--v6 .dspg-pdp-craft-text h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 10px} .dspg--v6 .dspg-pdp-aside h1{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.1;letter-spacing:0;color:var(--color-ink);margin:0 0 14px} .dspg--v6 .dspg-pdp-quote p{font-size:clamp(28px,3.5vw,40px);line-height:1.3} @media(max-width:600px){.dspg--v6 .dspg-pdp-quote p{font-size:35px}} /* ============================================================ FORMULIER-CONVERSIEPAGINA'S (brochure, brochure-2, huisbezoek) Bouwt voort op .dspg .ds-form en .dspg-faqform. Voegt alleen toe wat deze pagina's extra nodig hebben: paginatitel, tweekoloms veld-rij, select, privacyregel, brochure-layout (solo + split). ============================================================ */ /* kale conversiepagina (.dspg-bare): geen zichtbaar menu of footer. Volledig op de brochure-aanvraag gericht. :has() schakelt de globale header (sibling vóór de payload) en een eventuele footer uit. */ body:has(.dspg-bare) .dshx-head, body:has(.dspg-bare) .dspg-footer, body:has(.dspg-bare) > footer, body:has(.dspg-bare) footer{display:none!important} /* geen header = geen header-offset: de 86px first-child marge eraf */ body:has(.dspg-bare) .dspg-wrap>:first-child{margin-top:0} body:has(.dspg-bare) .dspg-wrap{padding-top:clamp(32px,5vw,56px)} /* paginatitel (zelfde Cond Caption-stijl als sectietitels) */ .dspg--v6 .dspg-faqform-faq h1, .dspg--v6 .dspg-brochure-head h1{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,44px);line-height:1.12;letter-spacing:0;color:var(--color-ink);margin:0 0 14px} /* intro-tekst en foto in de toelichting-/kop-kolom */ .dspg .dspg-form-intro{font-family:var(--font-sans);font-size:1.04rem;line-height:1.6;color:#5a4549;margin:0;max-width:640px} .dspg .dspg-form-intro strong{font-weight:600;color:var(--color-ink)} .dspg .dspg-form-photo{display:block;width:100%;height:auto;border-radius:6px;margin-top:24px} /* tweekoloms veld-rij (V5: gap 14/22, velden zonder eigen marge) */ .dspg .ds-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-bottom:14px} .dspg .ds-form-row .ds-form-field{margin-bottom:0} /* select: zelfde input-look met caret-chevron (zoals V5) */ .dspg .ds-form-field select{font-family:var(--font-sans);font-size:.95rem;color:var(--color-ink);padding:11px 38px 11px 14px;border:1px solid rgba(61,40,45,.2);border-radius:2px;background-color:#fff;transition:border-color .15s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 13px center} .dspg .ds-form-field select:focus{outline:0;border-color:var(--color-ink)} .dspg .ds-form-optional{color:#8a7b7d;font-weight:400} /* brochureformulier: transparant, geen kaart (zoals V5) */ .dspg .ds-brochure-form{background:transparent;padding:0;border-radius:0} .dspg .ds-brochure-submit{width:auto;margin-top:22px;padding-left:34px;padding-right:30px} /* privacyregel met check-in-cirkel icoon (zoals V5) */ .dspg .ds-form-privacy{display:flex;align-items:flex-start;gap:9px;font-family:var(--font-sans);font-size:.86rem;line-height:1.5;color:#5a4549;margin:18px 0 0} .dspg .ds-form-privacy-icon{flex:0 0 18px;width:18px;height:18px;margin-top:1px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain} /* brochure enkel-koloms: ruim, links uitgelijnd (V5: 860px) */ .dspg .dspg-brochure-wrap{max-width:860px;margin:0 auto;padding:8px 0 40px} .dspg .dspg-brochure-wrap .dspg-brochure-head{margin:0 0 26px} /* brochure split: formulier links, aside rechts (V5-verhoudingen) */ .dspg .dspg-brochure-split{display:grid;grid-template-columns:1.26fr .76fr;gap:80px;align-items:start;padding:8px 0 40px} .dspg .dspg-brochure-split .dspg-brochure-head{margin:0 0 24px} /* desktop: kaal rechterblok zonder achtergrond, mockup 25% kleiner */ .dspg .dspg-brochure-aside{background:transparent;border-radius:0;overflow:visible} .dspg .dspg-brochure-aside img{display:block;width:75%;height:auto} .dspg .dspg-brochure-aside-body{padding:22px 0 0} .dspg .dspg-brochure-aside-body h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.15;color:var(--color-ink);margin:0 0 16px} @media(max-width:1250px){.dspg .dspg-brochure-split{grid-template-columns:1fr;gap:30px} /* onder 1250px: geen extra ruimte boven de titel */ body:has(.dspg-bare) .dspg-wrap{padding-top:16px} /* mobiel: blok stapelt onder het formulier, dan wél als panel */ .dspg .dspg-brochure-aside{background:var(--color-sand);border-radius:4px;overflow:hidden} .dspg .dspg-brochure-aside img{width:100%;padding:32px;box-sizing:border-box} .dspg .dspg-brochure-aside-body{padding:24px 28px 28px}} /* tablet (787-1250px): mockup en opsomming naast elkaar in het panel */ @media(min-width:787px) and (max-width:1250px){ .dspg .dspg-brochure-aside{display:grid;grid-template-columns:0.8fr 1.2fr;align-items:stretch} .dspg .dspg-brochure-aside img{width:100%;height:100%;object-fit:contain} .dspg .dspg-brochure-aside-body{padding:24px 28px;align-self:center}} @media(max-width:600px){.dspg .ds-form-row{grid-template-columns:1fr;gap:0}.dspg .ds-form-row .ds-form-field{margin-bottom:14px}.dspg .ds-form-row.ds-form-row-pc{grid-template-columns:2fr 1fr;gap:14px}.dspg .ds-form-row.ds-form-row-pc .ds-form-field{margin-bottom:0}} /* ============================================================ AFSPRAAK-PAGINA (showroom): afspraak-blok met 3 CSS-only tabs, showroom-locaties, liever-thuis-blok. ============================================================ */ /* afspraak-blok in de hero-kaart */ .dspg .dspg-appt-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .dspg .dspg-appt h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,38px);line-height:1.15;letter-spacing:0;color:var(--color-ink);margin:0 0 16px} .dspg .dspg-appt-sub{font-family:var(--font-sans);font-size:14px;color:#5a4549;margin:0 0 16px} .dspg .dspg-appt-sub a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px} .dspg .dspg-appt-tablist{display:flex;gap:5px;margin-bottom:16px;background:var(--color-sand);padding:4px;border-radius:8px} .dspg .dspg-appt-tab{flex:1 1 0;text-align:center;font-family:var(--font-sans);font-size:13px;font-weight:600;color:#5a4549;padding:9px 4px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap} .dspg .dspg-appt-tab:hover{color:var(--color-ink)} .dspg .dspg-appt-panel{display:none} /* titel volgt de gekozen tab */ .dspg .dspg-appt-title{display:none} .dspg #appt-showroom:checked ~ .dspg-appt-title--showroom, .dspg #appt-thuis:checked ~ .dspg-appt-title--thuis, .dspg #appt-tel:checked ~ .dspg-appt-title--tel{display:block} .dspg #appt-showroom:checked ~ .dspg-appt-tablist label[for="appt-showroom"], .dspg #appt-thuis:checked ~ .dspg-appt-tablist label[for="appt-thuis"], .dspg #appt-tel:checked ~ .dspg-appt-tablist label[for="appt-tel"]{background:#fff;color:var(--color-ink);box-shadow:0 1px 3px rgba(61,40,45,.12)} .dspg #appt-showroom:checked ~ .dspg-appt-panels #form-showroom, .dspg #appt-thuis:checked ~ .dspg-appt-panels #form-thuis, .dspg #appt-tel:checked ~ .dspg-appt-panels #form-tel{display:flex} /* velden in CTA-blok-stijl: select past zich aan de card-form inputs aan, met placeholder-grijs */ .dspg .dspg-card-form select{width:100%;box-sizing:border-box;padding:11px 32px 11px 13px;border:1px solid #d4d4d4;border-radius:6px;font-family:var(--font-sans);font-size:14px;color:var(--color-ink);background-color:rgba(251,247,243,.5);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center} .dspg .dspg-card-form select:focus{outline:none;border-color:var(--color-link);box-shadow:0 0 0 2px rgba(65,110,134,.15)} .dspg .dspg-card-form select:invalid{color:#9e9e9e} .dspg .dspg-card-form input[type=date]{color:var(--color-ink)} /* textarea in card-form-stijl (huisbezoek-bericht) */ .dspg .dspg-card-form textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #d4d4d4;border-radius:6px;font-family:var(--font-sans);font-size:14px;color:var(--color-ink);background:rgba(251,247,243,.5);resize:vertical;min-height:64px} .dspg .dspg-card-form textarea::placeholder{color:#9e9e9e} .dspg .dspg-card-form textarea:focus{outline:none;border-color:var(--color-link);box-shadow:0 0 0 2px rgba(65,110,134,.15)} /* notitie onder de afspraak-knop */ .dspg .dspg-appt-note{font-family:var(--font-sans);font-size:12.5px;line-height:1.5;color:#8a7b7d;margin:2px 0 0;text-align:center} /* "Kom eens kijken" in groot intro-titelformaat (alleen op de afspraakpagina) */ .dspg .dspg-craft--big .dspg-pdp-craft-text h2{font-size:clamp(40px,6vw,56px);line-height:1.05} /* desktop: tekst 2/5, video 3/5 */ @media(min-width:1024px){.dspg .dspg-craft--big{grid-template-columns:2fr 3fr}} /* direct getoonde video (16:9) in de showroom-sectie */ .dspg .dspg-video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000} .dspg .dspg-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* proces-stappen: 3-koloms variant + lichte kop-tekst op de donkere band */ .dspg .dspg-proces-steps--3{grid-template-columns:repeat(3,1fr);max-width:940px;margin:0 auto} .dspg .dspg-proces-head .dspg-kicker{color:rgba(255,255,255,.6)} .dspg .dspg-proces-head p{font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:rgba(255,255,255,.72);margin:14px 0 0} @media(max-width:860px){.dspg .dspg-proces-steps--3{grid-template-columns:1fr 1fr}} @media(max-width:520px){.dspg .dspg-proces-steps--3{grid-template-columns:1fr}} /* lichte variant: sage achtergrond, ink tekst, vierkante foto's */ .dspg .dspg-proces--sage{background:var(--color-sage)} .dspg .dspg-proces--sage .dspg-proces-head h2{color:var(--color-ink)} .dspg .dspg-proces--sage .dspg-proces-head .dspg-kicker{color:#8a7b7d} .dspg .dspg-proces--sage .dspg-proces-head p{color:var(--color-ink)} .dspg .dspg-proces--sage .dspg-proces-step h3{color:var(--color-ink)} .dspg .dspg-proces--sage .dspg-proces-step p{color:#5a4549} .dspg .dspg-proces--sage .dspg-proces-photo{aspect-ratio:1/1} /* mobiel: standaard kleinere inset op de afspraak-kaart */ @media(max-width:767px){.dspg-card.dspg-card--appt{padding:16px 14px}} /* afspraak-hero op mobiel/tablet net als de bedden-hero: foto als band boven, kaart stroomt eronder (geen absolute plaatsing; werkt met de hoge afspraak-kaart) */ @media(max-width:1024px){ .dspg-hero--appt .dspg-hero-bg{position:static;width:100%;height:420px;object-fit:cover;object-position:center -75px} .dspg-hero--appt .dspg-hero-inner{position:static;min-height:0;margin:-210px 0 0;padding:0 var(--inset) 48px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:26px} } /* tablet (767-1024): afspraak-hero net als bedden — grote foto, kaart + reviews als rij onderaan (gelijke bodem), foto loopt door achter het blok */ @media(min-width:767px) and (max-width:1024px){ .dspg-hero--appt .dspg-hero-bg{position:static;height:640px;object-position:center} .dspg-hero--appt .dspg-hero-inner{position:absolute;left:0;right:0;bottom:28px;top:auto;margin:0;padding:0 var(--inset);flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;z-index:5} .dspg-hero--appt .dspg-card{width:480px;max-width:calc(100vw - 2*var(--inset));margin:0} .dspg-hero--appt .dspg-reviews{position:static;order:0;align-self:flex-end;width:auto;margin:0;left:auto;right:auto} } /* Calendly-versie: CTA-blok is hoger (widget) → op tablet net als mobiel (gestapeld) */ @media(min-width:767px) and (max-width:1024px){ .dspg--cal .dspg-hero--appt .dspg-hero-bg{position:static;height:420px;object-position:center -75px} .dspg--cal .dspg-hero--appt .dspg-hero-inner{position:static;min-height:0;margin:-210px 0 0;padding:0 var(--inset) 48px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:26px} .dspg--cal .dspg-hero--appt .dspg-card{width:100%;max-width:none;margin:0} .dspg--cal .dspg-hero--appt .dspg-reviews{position:static;order:0;box-sizing:border-box;width:100%;justify-content:center;margin:0;padding:13px 16px;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.12);left:auto;right:auto} } /* desktop: CTA-blok links (gespiegeld t.o.v. bedden), reviews rechts */ @media(min-width:1025px){ .dspg-hero--appt .dspg-hero-inner{justify-content:flex-start} .dspg-hero--appt .dspg-card{margin-left:50px;margin-right:0} .dspg-hero--appt .dspg-reviews{left:auto;right:var(--inset)} } @media(min-width:1251px) and (max-width:1400px){.dspg-hero--appt .dspg-card{margin-left:90px}} /* alleen huisbezoek-pagina: CTA-blok op desktop rechts, reviews links */ @media(min-width:1025px){ .dspg-hero--huisbezoek .dspg-hero-inner{justify-content:flex-end} .dspg-hero--huisbezoek .dspg-reviews{right:auto;left:var(--inset)} } /* compacte velden binnen de kaart */ .dspg .dspg-appt .ds-form-field{margin-bottom:12px;gap:5px} .dspg .dspg-appt .ds-form-field label{font-size:.78rem} .dspg .dspg-appt .ds-form-field input,.dspg .dspg-appt .ds-form-field select{padding:9px 12px;font-size:.9rem} .dspg .dspg-appt .ds-form-field select{padding-right:34px} .dspg .dspg-appt .ds-form-row{gap:12px;margin-bottom:12px} .dspg .dspg-appt .ds-cta{width:100%;margin-top:6px} /* locatie-keuze: label + pills als één groep (rustige onderlinge afstand) */ .dspg .dspg-appt-loclabel{display:block;font-family:var(--font-sans);font-size:.78rem;color:#5a4549;letter-spacing:.2px;margin-bottom:7px} .dspg .dspg-appt-loc{display:flex;gap:8px;margin:0} .dspg .dspg-appt-loc input{position:absolute;opacity:0;pointer-events:none} .dspg .dspg-appt-loc label{flex:1 1 0;text-align:center;font-family:var(--font-sans);font-size:.85rem;font-weight:600;color:#5a4549;padding:10px;border:1px solid rgba(61,40,45,.2);border-radius:6px;cursor:pointer;transition:.15s} .dspg .dspg-appt-loc input:checked + label{border-color:var(--color-link);background:rgba(65,110,134,.08);color:var(--color-ink)} .dspg .dspg-appt-priv{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;font-family:var(--font-sans);font-size:.76rem;line-height:1.5;color:#5a4549} .dspg .dspg-appt-priv svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px;color:var(--color-link)} /* showroom-locaties: 2 kaarten */ .dspg-loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px} .dspg-loc-card{background:#fff;border:1px solid rgba(61,40,45,.12);border-radius:8px;overflow:hidden;display:flex;flex-direction:column} .dspg-loc-card-img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block} .dspg-loc-card-body{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1} .dspg-loc-card-body h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(24px,2.6vw,28px);line-height:1.15;color:var(--color-ink);margin:0 0 8px} .dspg-loc-card-body address{font-style:normal;font-family:var(--font-sans);font-size:15px;line-height:1.6;color:#5a4549;margin:0 0 10px} .dspg-loc-card-body address a{color:var(--color-link);text-decoration:none} /* prominente telefoonregel (contactpagina) */ .dspg-loc-card-body .dspg-loc-phone{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-sans);font-weight:600;font-size:1.25rem;color:var(--color-link);text-decoration:none;margin:0 0 12px} .dspg-loc-card-body .dspg-loc-phone svg{width:18px;height:18px;fill:currentColor} .dspg-loc-card-body .dspg-loc-phone:hover{text-decoration:underline} .dspg-loc-card-body address a:hover{text-decoration:underline} .dspg-loc-card-body .dspg-loc-hours{font-family:var(--font-sans);font-size:13px;line-height:1.55;color:#8a7b7d;margin:0 0 16px} .dspg-loc-card-body .dspg-loc-body{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--color-ink);margin:0 0 18px} /* badges in de locatiekaart: highlight (accent-dot) + producttags (outline) */ .dspg-loc-card-body .dspg-loc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .dspg-loc-card-body .dspg-loc-tags-label{font-family:var(--font-sans);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:#8a7b7d;margin:2px 0 8px} .dspg-loc-tag{display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:.82rem;color:var(--color-ink);border:1px solid rgba(61,40,45,.18);border-radius:50px;padding:6px 13px} .dspg-loc-tag--feat{gap:8px;background:var(--color-sand);border-color:rgba(61,40,45,.12)} .dspg-loc-tag--feat::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--color-accent)} .dspg-loc-route{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--color-link);text-decoration:none;transition:color .15s} .dspg-loc-route::after{content:"";width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)} .dspg-loc-route:hover{color:#254151} .dspg-loc-card-body .ds-cta{align-self:flex-start;margin-top:auto} /* ============================================================ OVER ONS · SHOWROOM-KAARTEN — creatieve variant (.dspg-loc-grid--feature) Foto met overlay (plaatsnaam + badges op de foto, à la slaapadvies-tegel), daaronder adres, groot telefoonnummer en route plannen. Alleen waar de grid de modifier --feature heeft (over-ons); elders blijft de standaardkaart. ============================================================ */ .dspg-loc-grid--feature{align-items:start} .dspg-loc-grid--feature .dspg-loc-card{border-radius:12px;border:none} .dspg-loc-grid--feature .dspg-loc-feature{position:relative;aspect-ratio:4/3;overflow:hidden} .dspg-loc-grid--feature .dspg-loc-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .dspg-loc-grid--feature .dspg-loc-card:hover .dspg-loc-feature img{transform:scale(1.03)} .dspg-loc-grid--feature .dspg-loc-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,0) 62%)} .dspg-loc-grid--feature .dspg-loc-feature-top{position:absolute;left:0;right:0;top:0;z-index:1;padding:clamp(18px,3vw,26px)} .dspg-loc-grid--feature .dspg-loc-feature-top h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(30px,4.6vw,40px);line-height:1.05;color:#fff;margin:0;text-shadow:0 1px 12px rgba(0,0,0,.45)} .dspg-loc-grid--feature .dspg-loc-feature-top p{margin:10px 0 0;font-family:var(--font-sans);font-size:17px;line-height:1.45;color:#fff;max-width:34ch;text-shadow:0 1px 10px rgba(0,0,0,.5)} /* blok onder de foto: heldere infolijst (icoontjes) + aanbod-tags + route-knop */ .dspg-loc-grid--feature .dspg-loc-card-body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(20px,3vw,26px);flex:none;background:var(--color-sand)} .dspg-loc-grid--feature .dspg-loc-meta{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:12px} .dspg-loc-grid--feature .dspg-loc-meta-item{display:flex;align-items:flex-start;gap:11px;font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--color-ink)} .dspg-loc-grid--feature .dspg-loc-meta-addr{font-weight:700} .dspg-loc-grid--feature .dspg-loc-meta-addr + .dspg-loc-meta-item{margin-top:-7px} .dspg-loc-grid--feature .dspg-loc-ico{flex:0 0 auto;width:18px;height:18px;margin-top:3px;color:var(--color-accent)} .dspg-loc-grid--feature .dspg-loc-meta-phone{align-items:center} .dspg-loc-grid--feature .dspg-loc-meta-phone .dspg-loc-ico{color:var(--color-link)} .dspg-loc-grid--feature .dspg-loc-meta-phone a{font-family:var(--font-sans);font-weight:600;font-size:1.3rem;color:var(--color-link);text-decoration:none} .dspg-loc-grid--feature .dspg-loc-meta-phone a:hover{text-decoration:underline} .dspg-loc-grid--feature .dspg-loc-card-body .ds-cta{margin-top:22px;width:auto} /* intro-tekst onder de sectietitel "Onze showrooms" */ .dspg .dspg-section-head p{font-family:var(--font-sans);font-size:1rem;line-height:1.7;color:var(--color-ink);margin:0} /* kernpunten als badges i.p.v. lange alinea */ .dspg .dspg-loc-badges{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0;max-width:760px} .dspg .dspg-loc-badge{display:inline-flex;align-items:center;gap:9px;background:var(--color-sand);border:1px solid rgba(61,40,45,.14);border-radius:50px;padding:9px 18px;font-family:var(--font-sans);font-size:.9rem;color:var(--color-ink)} .dspg .dspg-loc-badge::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--color-accent)} @media(max-width:760px){.dspg-loc-grid{grid-template-columns:1fr;gap:22px}} /* V2: tabs als filter-badges (zelfde stijl als de stijlfilters op seniorenbed) */ .dspg .dspg-appt--badges .dspg-appt-tablist{background:transparent;padding:0;gap:8px;flex-wrap:wrap;margin-bottom:16px} .dspg .dspg-appt--badges .dspg-appt-tab{flex:0 0 auto;background:transparent;border:1px solid rgba(61,40,45,.2);border-radius:50px;padding:8px 16px;font-weight:400;color:var(--color-ink);box-shadow:none} .dspg .dspg-appt--badges .dspg-appt-tab:hover{border-color:var(--color-ink);background:#fcfaf6} .dspg .dspg-appt--badges #appt-showroom:checked ~ .dspg-appt-tablist label[for="appt-showroom"], .dspg .dspg-appt--badges #appt-thuis:checked ~ .dspg-appt-tablist label[for="appt-thuis"], .dspg .dspg-appt--badges #appt-tel:checked ~ .dspg-appt-tablist label[for="appt-tel"]{background:var(--color-ink);border-color:var(--color-ink);color:#fff;box-shadow:none} /* ============================================================ OVER ONS · AMBACHT-MOZAÏEK (adviseren · ontwerpen · maken) Masonry via CSS-columns: respecteert staand/liggend, geen JS. ============================================================ */ .dspg-ambacht{margin:6px 0 90px} .dspg-ambacht-head{max-width:820px;margin:0 auto 20px} .dspg-ambacht-head .dspg-kicker{text-align:center} .dspg-ambacht-head h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,40px);line-height:1.12;color:var(--color-ink);text-align:center;margin:0 0 16px} .dspg-ambacht-head p{font-family:var(--font-sans);font-size:1.07rem;line-height:1.66;color:var(--color-ink);text-align:center;margin:0} .dspg-ambacht-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-rows:clamp(260px,30vw,440px)} .dspg-ambacht-tile--wide{grid-column:span 2} .dspg-ambacht-tile{margin:0;position:relative;overflow:hidden;border-radius:8px;background:#ece7e1} .dspg-ambacht-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .dspg-ambacht-tile video{width:100%;height:100%;object-fit:cover;display:block} .dspg-ambacht-tile:hover img{transform:scale(1.045)} .dspg-ambacht-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(34,22,26,.62),rgba(34,22,26,0) 46%);pointer-events:none} .dspg-ambacht-label{position:absolute;left:18px;bottom:14px;z-index:2;color:#fff;font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:1.45rem;letter-spacing:.2px;text-shadow:0 1px 10px rgba(0,0,0,.4)} .dspg-ambacht-foot{margin:clamp(26px,3vw,40px) auto 0;text-align:center} .dspg-ambacht-foot p{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.3;color:var(--color-ink);margin:0} @media(max-width:900px){.dspg-ambacht-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}.dspg-ambacht-tile{aspect-ratio:4/5}.dspg-ambacht-tile--wide{grid-column:auto}} .dspg-ambacht-more-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .dspg-ambacht-more-btn{display:none} @media(max-width:560px){.dspg-ambacht-grid{display:none}.dspg-wrap>.dspg-ambacht{margin-bottom:20px}.dspg-ambacht-head{margin-bottom:9px}} @media(max-width:600px){.dspg--v6 .dspg-ambacht-head{text-align:left}.dspg--v6 .dspg-ambacht-head h2{text-align:left}} /* ============================================================ OVER ONS · AMBACHT V2 · horizontale atelier-filmstrip Portretkaarten met onderschrift + stapnummer, scroll-snap. ============================================================ */ .dspg-ambacht2{margin:0 0 90px} .dspg-ambacht2-head{max-width:820px;margin:0 auto clamp(22px,3vw,38px);text-align:center} .dspg-ambacht2-head .dspg-kicker{text-align:center} .dspg-ambacht2-head h2{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:clamp(35px,4.5vw,40px);line-height:1.12;color:var(--color-ink);text-align:center;margin:0} .dspg-ambacht2-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 0 16px;scrollbar-width:thin;scrollbar-color:rgba(61,40,45,.3) transparent} .dspg-ambacht2-track::-webkit-scrollbar{height:6px} .dspg-ambacht2-track::-webkit-scrollbar-thumb{background:rgba(61,40,45,.25);border-radius:999px} .dspg-ambacht2-card{flex:0 0 clamp(228px,24vw,300px);scroll-snap-align:start} .dspg-ambacht2-img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:8px;background:#ece7e1} .dspg-ambacht2-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .dspg-ambacht2-card:hover .dspg-ambacht2-img img{transform:scale(1.05)} .dspg-ambacht2-step{font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);margin:15px 0 5px} .dspg-ambacht2-card h3{font-family:"minion-pro","Georgia-min","Times New Roman",Times,serif;font-weight:400;font-size:1.42rem;line-height:1.1;color:var(--color-ink);margin:0 0 5px} .dspg-ambacht2-card p{font-family:var(--font-sans);font-size:.95rem;line-height:1.45;color:#6b5b5d;margin:0} @media(max-width:560px){.dspg-ambacht2-card{flex-basis:78vw}} /* ============================================================ OVER ONS · AMBACHT — mobiele variant: 2-etages mozaïek-carrousel Alle desktop-tegels (foto's + 2 video's) in een horizontale swipe-strip, twee etages hoog. Afwisselend hoog (over beide etages), gestapeld laag en breed-liggend. Alleen op mobiel; desktop = het mozaïek hierboven. Vervangt de oude auto-marquee. Kolomtypes: .dspg-car-col (tall=1 tegel / stack=2 tegels), .dspg-car-col--wide (brede tegel boven + .dspg-car-row2 eronder). ============================================================ */ .dspg-ambacht-car{display:none} @media(max-width:560px){ .dspg-ambacht-car{display:flex;gap:8px;height:clamp(488px,130vw,715px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(50% - 50vw) 46px;padding:0 16px 4px} .dspg-ambacht-car::-webkit-scrollbar{display:none} .dspg-car-col{flex:0 0 55.44vw;display:flex;flex-direction:column;gap:8px;height:100%;scroll-snap-align:start} .dspg-car-col--wide{flex-basis:calc(110.88vw + 8px)} .dspg-car-col--xl{flex-basis:66.53vw} .dspg-car-row2{flex:1 1 0;min-height:0;display:flex;gap:8px} .dspg-car-cell{position:relative;flex:1 1 0;min-height:0;min-width:0;margin:0;overflow:hidden;border-radius:8px;background:#ece7e1} .dspg-car-cell img,.dspg-car-cell video{width:100%;height:100%;object-fit:cover;display:block} .dspg-car-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(34,22,26,.6),rgba(34,22,26,0) 52%);pointer-events:none} .dspg-ambacht-car .dspg-ambacht-label{left:12px;bottom:9px;font-size:1.02rem} } /* === VERSIE 2026-06-04-v2 — utility classes + flip-cards + font-weight fix === */ /* =============================== FONTS – MINION PRO =============================== */ @font-face { font-family: "Minion Pro"; src: url("../fonts/MinionPro-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } /* =============================== DESIGN TOKENS =============================== */ :root { --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-minion-pro-medium: "Minion Pro", serif; --color-ink: #3D282D; --color-link: #416e86; --color-link-hover: #254151; --color-sage-light: #ebedea; --color-sand: #F7F3EE; --color-accent: #f1b434; --page-inset: 16px; --content-width: 1290px; } /* SECTION SPACING */ .seniorenbed-section{width:100%;max-width:calc(var(--content-width) + (var(--page-inset) * 2));margin-inline:auto;padding-inline:var(--page-inset)} .seniorenbed-spacer-medium{padding-top:60px} /* RESET */ *{box-sizing:border-box} /* BASE TEXT */ .seniorenbed-text{margin:0;font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} .seniorenbed-intro-text{margin:0;font-family:var(--font-sans);font-weight:400;font-size:clamp(17px,2vw,19px);line-height:clamp(26px,2.6vw,30px);letter-spacing:.2px;color:var(--color-ink)} /* TITLES */ .seniorenbed-title-1{margin:0 0 6px;font-family:var(--font-minion-pro-medium);font-weight:600;font-size:clamp(28px,3vw,36px);line-height:clamp(32px,3.4vw,40px);letter-spacing:.2px;color:var(--color-ink)} .seniorenbed-title-2{margin:0 0 6px;font-family:var(--font-minion-pro-medium);font-weight:600;font-size:clamp(22px,2.7vw,28px);line-height:1.15;letter-spacing:.1px;color:var(--color-ink)} .seniorenbed-title-3{display:block;margin:0;font-family:var(--font-minion-pro-medium);font-weight:600;font-size:clamp(18px,2.1vw,22px);line-height:1.35;color:var(--color-ink)} .seniorenbed-title-text{margin:0;font-family:var(--font-sans);font-weight:700;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} .seniorenbed-title-1-color,.seniorenbed-title-2-color,.seniorenbed-title-text-color{color:var(--color-link)} /* RHYTHM */ :is(.seniorenbed-text,.seniorenbed-intro-text,.seniorenbed-links,.seniorenbed-buttons,.seniorenbed-opsomming)+:is(.seniorenbed-text,.seniorenbed-intro-text,.seniorenbed-title-text,.seniorenbed-title-2,.seniorenbed-title-1),.seniorenbed-opsomming+.seniorenbed-title-text{margin-top:17px} /* Spacing voor alinea na een grid, carousel, of showroom-locations block — conventionele adjacent-sibling aanpak, geen utility-class nodig op de

. */ .seniorenbed-categorie-grid + .seniorenbed-text, .v31-carousel-outer + .seniorenbed-text, .seniorenbed-productpage-v3-showroom-locations + .seniorenbed-text { margin-top: 17px; } /* Spacing rond intro-tekst van 'Andere seniorenbedden' carousel */ .seniorenbed-text + .seniorenbed-productpage-v3-bedden-carousel-outer { margin-top: 24px; } .seniorenbed-title-2 + .seniorenbed-text { margin-top: 8px; } .seniorenbed-title-text+.seniorenbed-text{margin-top:4px} /* TEXT LINKS */ .seniorenbed-link-text,.seniorenbed-link-text-chevron{font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-link);text-decoration:none} .seniorenbed-link-text:hover,.seniorenbed-link-text-chevron span:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} .seniorenbed-link-text:hover,.seniorenbed-link-text-chevron span:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} /* LINK WITH CHEVRON */ .seniorenbed-link-text-chevron{position:relative;display:inline-block;padding-left:16px;vertical-align:middle;font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-link);text-decoration:none} .seniorenbed-link-text-chevron::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-right:1.25px solid currentColor;border-top:1.25px solid currentColor;transform:rotate(45deg)} .seniorenbed-link-text-chevron::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-right:1.25px solid currentColor;border-top:1.25px solid currentColor;transform:rotate(45deg)} /* BUTTONS */ .seniorenbed-button-filled,.seniorenbed-button-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:fit-content;padding:8px 14px;border:1px solid transparent;border-radius:12px;font-family:var(--font-sans);font-weight:600;font-size:clamp(14px,1.8vw,15px);line-height:20px;letter-spacing:.1px;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease} .seniorenbed-button-filled{background:var(--color-link);border-color:var(--color-link);color:#fff} .seniorenbed-button-filled:hover{background:var(--color-link-hover);border-color:var(--color-link-hover)} .seniorenbed-button-outline{background:transparent;border-color:rgba(65,110,134,.45);color:var(--color-link)} .seniorenbed-button-outline:hover{border-color:var(--color-link);background:rgba(65,110,134,.04)} .seniorenbed-button-chevron{width:7px;height:7px;border-right:1.25px solid currentColor;border-top:1.25px solid currentColor;transform:rotate(45deg);flex-shrink:0} /* LINK GROUP */ .seniorenbed-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px} .seniorenbed-links>*{margin:0!important} /* BUTTON GROUP */ .seniorenbed-buttons{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin-top:17px} .seniorenbed-buttons>*{margin:0} .seniorenbed-filter-buttons{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .seniorenbed-filter-buttons::-webkit-scrollbar{display:none} .seniorenbed-filter-button{flex:0 0 auto;appearance:none;min-height:42px;padding:10px 16px;border:1px solid rgba(61,40,45,.16);border-radius:999px;background:#fff;font-family:var(--font-sans);font-weight:700;font-size:13px;line-height:18px;letter-spacing:.8px;color:var(--color-ink);cursor:pointer} .seniorenbed-filter-button.is-active{background:var(--color-sage-light);border-color:rgba(61,40,45,.42);box-shadow:inset 0 0 0 1px rgba(61,40,45,.42)} /* =============================== COMPONENTEN =============================== */ /* BREADCRUMB */ .seniorenbed-breadcrumb{display:block;padding-top:17px;margin-bottom:17px;font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:20px;letter-spacing:.2px} .seniorenbed-breadcrumb-link{color:var(--color-link);text-decoration:none;transition:color .2s ease,opacity .2s ease} .seniorenbed-breadcrumb-link:hover{text-decoration:underline;text-underline-offset:.18em} .seniorenbed-breadcrumb-separator,.seniorenbed-breadcrumb-current{color:rgba(61,40,45,.62)} /* HERO IMAGE */ .seniorenbed-hero-image-wrapper{width:100%;overflow:hidden;border-radius:6px;margin-top:17px} .seniorenbed-hero-image{display:block;width:100%;height:clamp(190px,19vw,260px);object-fit:cover;object-position:center center} /* META */ .seniorenbed-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 34px;margin-top:8px;margin-bottom:32px} .seniorenbed-meta-item{display:flex;align-items:center;gap:10px;min-width:0} .seniorenbed-meta-item .seniorenbed-text{font-size:clamp(13px,1.8vw,15px);line-height:22px;color:rgba(61,40,45,.62)} .seniorenbed-meta-icon{width:22px;height:22px;flex-shrink:0;color:rgba(61,40,45,.42)} /* MOBILE */ @media (max-width:767px){.seniorenbed-hero-image{height:clamp(190px,44vw,260px);object-position:center center}.seniorenbed-meta{gap:2px 20px}} /* INTRO */ .seniorenbed-intro{max-width:900px} /* INPAGE MENU */ .seniorenbed-product-sticky-menu-section{position:sticky;top:0;z-index:10;background:#fff;overflow:visible} .seniorenbed-product-sticky-menu-section::after{content:"";position:absolute;left:var(--page-inset);right:var(--page-inset);bottom:0;height:1px;background:rgba(61,40,45,.18);pointer-events:none} .seniorenbed-product-sticky-menu{margin-bottom:48px} .seniorenbed-inpage-menu{position:relative;display:flex;align-items:flex-end;gap:18px;width:100%;margin-top:17px;overflow-x:auto;overflow-y:visible;border-bottom:0;scrollbar-width:none} .seniorenbed-inpage-menu::-webkit-scrollbar{display:none} .seniorenbed-inpage-menu-item{display:flex;align-items:stretch;flex:0 0 auto;position:relative;z-index:1;margin-bottom:-1px;border-bottom:1px solid transparent;color:var(--color-ink);text-decoration:none;white-space:nowrap;transition:border-color .2s ease} .seniorenbed-inpage-menu-item span{display:flex;align-items:center;padding:12px 10px;transition:background-color .2s ease,color .2s ease} .seniorenbed-inpage-menu-item:hover{border-bottom:2px solid #416e86} .seniorenbed-inpage-menu-item:hover span{background:var(--color-sand)} .seniorenbed-inpage-menu-item-active{border-bottom:2px solid var(--color-link)} .seniorenbed-inpage-menu-item-active span{font-family:var(--font-sans);font-weight:700;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} @media (max-width:768px){.seniorenbed-product-sticky-menu-section{display:none}} /* ADVIES INPAGE MENU */ .seniorenbed-advies-inpage-menu-section{position:relative;overflow:visible} .seniorenbed-advies-inpage-menu-section::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:100%;max-width:var(--content-width);bottom:0;height:1px;background:rgba(61,40,45,.18);pointer-events:none} .seniorenbed-advies-inpage-menu-wrap{margin-bottom:48px} .seniorenbed-advies-inpage-menu{position:relative;display:flex;align-items:flex-end;gap:18px;width:100%;margin-top:17px;overflow-x:auto;overflow-y:visible;border-bottom:0;scrollbar-width:none;touch-action:pan-x} .seniorenbed-advies-inpage-menu::-webkit-scrollbar{display:none} .seniorenbed-advies-inpage-menu-item{display:flex;align-items:stretch;flex:0 0 auto;position:relative;z-index:1;margin-bottom:-1px;border-bottom:1px solid transparent;color:var(--color-ink);text-decoration:none;white-space:nowrap;transition:border-color .2s ease} .seniorenbed-advies-inpage-menu-item span{display:flex;align-items:center;padding:12px 10px;transition:background-color .2s ease,color .2s ease} .seniorenbed-advies-inpage-menu-item:hover{border-bottom:2px solid #416e86} .seniorenbed-advies-inpage-menu-item:hover span{background:var(--color-sand)} .seniorenbed-advies-inpage-menu-item-active{border-bottom:2px solid var(--color-link)} .seniorenbed-advies-inpage-menu-item-active span{font-family:var(--font-sans);font-weight:700;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} /* PLUS + MIN */ /* OPSOMMING */ .seniorenbed-opsomming{display:flex;flex-direction:column;gap:10px;margin-top:12px} .seniorenbed-opsomming-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} .seniorenbed-opsomming-item{display:flex;align-items:flex-start;gap:14px;font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,2vw,17px);line-height:24px;letter-spacing:.2px;color:var(--color-ink)} .seniorenbed-opsomming-item::before{content:"";flex-shrink:0;width:5px;height:5px;margin-top:9px;border-radius:50%;background:currentColor;opacity:1} /* CONTENT + MEDIA */ .seniorenbed-content-media{display:flex;flex-direction:column} .seniorenbed-content-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(17px,2vw,26px);align-items:start} /* Linker wrapper: titel + tekst gestapeld */ .seniorenbed-content-media-left{display:flex;flex-direction:column;min-width:0} .seniorenbed-content-media-text,.seniorenbed-content-media-visual{min-width:0} .seniorenbed-content-media-visual{width:100%} /* IMAGE + VIDEO */ .seniorenbed-content-media-image{display:block;width:100%;overflow:hidden;border-radius:6px;aspect-ratio:16/9} .seniorenbed-content-media-video-wrapper{display:block;width:100%;overflow:hidden;border-radius:6px} /* IMAGE */ .seniorenbed-content-media-image{object-fit:cover} /* VIDEO — hoogte via padding-hack i.p.v. aspect-ratio, zodat de videobox ook op oudere iOS (< Safari 15) niet inklapt (16/9 default; -3-2 override hieronder) */ .seniorenbed-content-media-video-wrapper{position:relative;padding-top:56.25%} .seniorenbed-content-media-video{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border:0} /* MOBILE: titel→visual→tekst */ @media (max-width:767px){.seniorenbed-content-media-grid{display:flex;flex-direction:column;gap:12px}.seniorenbed-content-media-left{display:contents}.seniorenbed-content-media-grid>:is(.seniorenbed-title-1,.seniorenbed-title-2){order:1;margin-bottom:0}.seniorenbed-content-media-visual{order:2;width:100%}.seniorenbed-content-media-text{order:3;width:100%}} /* VIDEO WRAPPER */ .seniorenbed-content-media-video-wrapper-3-2{padding-top:66.667%} .seniorenbed-content-media-video{object-fit:cover;border-radius:6px} /* KEUZEBLOKKEN */ .seniorenbed-keuzeblokken{display:flex;flex-direction:column} .seniorenbed-keuzeblokken-grid{display:grid;grid-template-columns:repeat(var(--seniorenbed-keuzeblokken-columns,3),minmax(0,1fr));gap:clamp(17px,2vw,26px)} .seniorenbed-keuzeblokken-grid--3{--seniorenbed-keuzeblokken-columns:3} .seniorenbed-keuzeblok{display:flex;flex-direction:column;min-width:0} .seniorenbed-keuzeblok>.seniorenbed-title-2{min-height:56px;margin:0 0 8px;display:flex;align-items:flex-end} .seniorenbed-keuzeblok-media{margin-top:0} .seniorenbed-keuzeblok-image,.seniorenbed-keuzeblok-video-wrapper{display:block;width:100%;overflow:hidden;border-radius:6px;aspect-ratio:16/9} .seniorenbed-keuzeblok-image{object-fit:cover} .seniorenbed-keuzeblok-content{display:flex;flex-direction:column;margin-top:17px} @media (max-width:767px){.seniorenbed-keuzeblokken-grid{grid-template-columns:1fr;gap:24px}.seniorenbed-keuzeblok>.seniorenbed-title-2{min-height:auto;display:block}} /* KEUZEKAARTEN */ /* VARIANTEN */ /* KEUZEKAART */ /* MEDIA */ /* CONTENT */ .seniorenbed-keuzekaart-content .seniorenbed-plus-min,.seniorenbed-keuzekaart-content .seniorenbed-opsomming{margin-top:0} /* MOBILE */ /* ADVIES */ .seniorenbed-advies{display:grid;grid-template-columns:32% minmax(0,1fr);align-items:center;overflow:hidden;border-radius:6px;background:var(--color-sage-light)} .seniorenbed-advies-media{min-width:0;padding:30px 0 30px 30px} .seniorenbed-advies-image{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center bottom;border-radius:6px} .seniorenbed-advies-content{display:flex;flex-direction:column;padding:clamp(34px,5vw,54px)} @media (max-width:1100px) and (min-width:1001px){.seniorenbed-advies-image{aspect-ratio:1/1}} @media (max-width:1000px) and (min-width:768px){.seniorenbed-advies-image{aspect-ratio:4/5}} @media (max-width:767px){.seniorenbed-advies{grid-template-columns:1fr}.seniorenbed-advies-media{padding:18px 18px 0}.seniorenbed-advies-image{aspect-ratio:3/2;object-fit:cover}.seniorenbed-advies-content{padding:24px}} /* LP HERO */ .seniorenbed-lp-hero-card-content .seniorenbed-title-text{margin:0} .seniorenbed-lp-hero-card-content .seniorenbed-text{margin-top:0} @media (max-width:767px){.seniorenbed-lp-hero-card,.seniorenbed-lp-hero-card-media{background:transparent}.seniorenbed-lp-hero-top{display:block;margin-bottom:0}.seniorenbed-lp-hero-grid{gap:20px}.seniorenbed-lp-hero-tiles{display:flex;flex-direction:column;gap:0;border-radius:0;overflow:visible;background:transparent}.seniorenbed-lp-hero-card{display:grid;grid-template-columns:clamp(108px,34vw,132px) minmax(0,1fr);gap:clamp(2px,3vw,16px);align-items:start;min-height:0;border-radius:0;overflow:visible;background:transparent}.seniorenbed-lp-hero-card+.seniorenbed-lp-hero-card{position:relative;padding-top:12px}.seniorenbed-lp-hero-card+.seniorenbed-lp-hero-card::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:1px;background:rgba(61,40,45,.14);transform:translateX(-50%)}.seniorenbed-lp-hero-card:last-child{position:relative;padding-bottom:12px}.seniorenbed-lp-hero-card:last-child::after{content:"";position:absolute;bottom:0;left:50%;width:100vw;height:1px;background:rgba(61,40,45,.14);transform:translateX(-50%)}.seniorenbed-lp-hero-card-media{padding:0}.seniorenbed-lp-hero-card-image{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px}.seniorenbed-lp-hero-card-content{display:flex;flex-direction:column;justify-content:flex-start;align-self:start;padding:0}.seniorenbed-lp-hero-card-content .seniorenbed-title-text{margin:0}.seniorenbed-lp-hero-card-divider{display:none}.seniorenbed-lp-hero-card-content .seniorenbed-text{margin-top:0}.seniorenbed-lp-hero-card-footer{display:none}.seniorenbed-lp-hero-card:first-child{padding-bottom:12px}} /* CAROUSEL */ .seniorenbed-carousel{display:flex;flex-direction:column} .seniorenbed-carousel-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .seniorenbed-carousel-viewport::-webkit-scrollbar{display:none} .seniorenbed-carousel-track{display:flex;gap:clamp(17px,2vw,26px);align-items:stretch;padding-bottom:2px} .seniorenbed-carousel-card{display:flex;flex:0 0 clamp(280px,28vw,390px);flex-direction:column;min-height:100%;overflow:hidden;border-radius:6px;background:var(--color-sand)} .seniorenbed-carousel-card-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#fff} .seniorenbed-carousel-card-content{display:flex;flex-direction:column;padding:24px} .seniorenbed-carousel-card-content .seniorenbed-title-text{margin:0} .seniorenbed-carousel-card-divider{width:100%;height:1px;margin:14px 0 17px;background:rgba(61,40,45,.16)} .seniorenbed-carousel-card-content .seniorenbed-text{margin-top:0} @media (max-width:767px){.seniorenbed-carousel-track{gap:17px}.seniorenbed-carousel-card{flex-basis:clamp(260px,78vw,340px)}.seniorenbed-carousel-card-content{padding:20px}} /* USP DIVIDER */ .seniorenbed-usp-divider{position:relative;display:flex;align-items:center;justify-content:center;gap:34px;margin-top:60px;margin-bottom:60px} .seniorenbed-usp-divider::before,.seniorenbed-usp-divider::after{content:"";flex:1;height:1px;background:rgba(61,40,45,.12)} .seniorenbed-usp-divider-item{display:flex;align-items:flex-start;gap:6px;min-width:0} .seniorenbed-usp-divider-item .seniorenbed-text{font-size:15px;line-height:22px;white-space:nowrap} .seniorenbed-usp-divider-check{position:relative;flex-shrink:0;width:18px;height:18px;margin-top:2px} .seniorenbed-usp-divider-check::before{content:"";position:absolute;left:2px;top:0;width:7px;height:13px;border-right:2.2px solid #f1b434;border-bottom:2.2px solid #f1b434;transform:rotate(40deg);opacity:.95} @media (max-width:1000px){.seniorenbed-usp-divider{position:relative;justify-content:center;gap:0;padding:15px 0;margin-top:30px;margin-bottom:30px}.seniorenbed-usp-divider::before,.seniorenbed-usp-divider::after{position:absolute;left:0;right:0;width:auto;height:1px;flex:none;background:rgba(61,40,45,.12);transform:none}.seniorenbed-usp-divider::before{top:0}.seniorenbed-usp-divider::after{bottom:0}.seniorenbed-usp-divider-item{display:none}.seniorenbed-usp-divider-item:first-child{display:flex}.seniorenbed-usp-divider-item .seniorenbed-text{white-space:normal;font-size:14px;line-height:21px}} /* UITGELICHT */ .seniorenbed-uitgelicht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(17px,2vw,26px);align-items:start;padding:clamp(26px,4vw,42px);border-radius:6px;background:var(--color-sage-light)} .seniorenbed-uitgelicht-content,.seniorenbed-uitgelicht-media{min-width:0} .seniorenbed-uitgelicht-image{display:block;width:100%;border-radius:6px;aspect-ratio:16/10;object-fit:cover} @media (max-width:767px){.seniorenbed-uitgelicht{display:flex;flex-direction:column;gap:20px;padding:24px}.seniorenbed-uitgelicht-media{order:1;width:100%}.seniorenbed-uitgelicht-content{order:2;width:100%}} /* =============================== CATEGORIE & FILTER =============================== */ /* 0.V2 LP Hero V2 */ .seniorenbed-lp-hero-v2{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:var(--color-sand,#f7edea);overflow-x:hidden} .seniorenbed-lp-hero-v2-inner{padding-top:0;padding-bottom:0} .seniorenbed-lp-hero-v2-item-content .seniorenbed-text{margin:3px 0 0;font-size:16px;line-height:1.42;max-width:34ch;color:rgba(61,40,45,.72)} .seniorenbed-lp-hero-v2-banner-image{display:block;width:calc(100% + (50vw - 50%));max-width:none;height:100%;min-height:100%;object-fit:cover} @media (max-width:767px){.seniorenbed-lp-hero-v2{padding-bottom:17px}.seniorenbed-lp-hero-v2-grid{display:block!important}.seniorenbed-lp-hero-v2 .seniorenbed-lp-hero-v2-banner{display:none!important}.seniorenbed-lp-hero-v2-content{padding-bottom:0}.seniorenbed-lp-hero-v2-subtitle{margin-bottom:16px;font-size:16px}.seniorenbed-lp-hero-v2-item{grid-template-columns:116px minmax(0,1fr) 34px;gap:14px;padding:14px 0}.seniorenbed-lp-hero-v2-item-content .seniorenbed-text{font-size:15px}} @media (max-width:599px){.seniorenbed-lp-hero-v2{padding-bottom:12px}.seniorenbed-lp-hero-v2-item{grid-template-columns:112px minmax(0,1fr)}.seniorenbed-lp-hero-v2-arrow{display:none}} /* 1. Categorie grid */ .seniorenbed-categorie-grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(17px,2vw,26px);align-items:stretch} @media (max-width:1180px){.seniorenbed-categorie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:767px){.seniorenbed-categorie-grid{grid-template-columns:1fr;gap:24px}} /* 2. Categorie tekst (met uitklap tab) */ @media (max-width:767px){.seniorenbed-categorie-text{margin-bottom:20px}.seniorenbed-categorie-text-preview{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:24px;max-height:48px;position:relative}.seniorenbed-categorie-text-more{display:block;position:absolute;right:0;bottom:0;z-index:2;border:0;padding-left:10px;background:#fff;font-family:var(--font-sans);font-weight:400;font-size:15px;line-height:24px;letter-spacing:.2px;color:var(--color-link);cursor:pointer}.seniorenbed-categorie-text-more:before{content:"...";position:absolute;left:-14px;top:0;color:var(--color-ink);background:#fff;padding-left:6px}.seniorenbed-categorie-text-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(100%);transition:transform .24s ease;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 -12px 30px rgba(61,40,45,.14)}.seniorenbed-categorie-text-sheet.is-active{transform:translateY(0)}.seniorenbed-categorie-text-sheet-inner{position:relative;padding:22px 32px 28px}.seniorenbed-categorie-text-sheet-inner .seniorenbed-text{margin-top:12px}.seniorenbed-categorie-text-close{position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;background:transparent;font-family:var(--font-sans);font-size:28px;line-height:32px;color:var(--color-ink);cursor:pointer}body.seniorenbed-sheet-open{overflow:hidden;touch-action:none}.seniorenbed-categorie-text-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;z-index:40}.seniorenbed-categorie-text-overlay.is-active{opacity:1;visibility:visible}} /* 3. Productkaart basis */ .seniorenbed-categorie-card{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;border-radius:6px;background:var(--color-sand)} .seniorenbed-categorie-card[hidden]{display:none!important} .seniorenbed-categorie-card-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none} /* 3.V2 Productkaart basis */ .seniorenbed-categorie-card-v2{background:#fff;border:1px solid rgba(61,40,45,.08);border-radius:8px;overflow:hidden;box-shadow:0 18px 44px rgba(61,40,45,.10);transition:border-color .22s ease,box-shadow .22s ease} .seniorenbed-categorie-card-v2[hidden]{display:none!important} @media (hover:hover){.seniorenbed-categorie-card-v2:hover{border-color:rgba(61,40,45,.08);box-shadow:0 18px 44px rgba(61,40,45,.10)}} /* 4. Productkaart media en badges */ .seniorenbed-categorie-card-image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .22s ease} /* 4.V2 Productkaart media, badges en kleuren */ .seniorenbed-categorie-card-v2-media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#f7f3ed} .seniorenbed-categorie-card-v2 .seniorenbed-categorie-card-image{display:block;width:100%;height:100%;object-fit:cover;transition:none} .seniorenbed-categorie-card-v2-label{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;min-height:30px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.90);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(61,40,45,.13);font-family:var(--font-sans);font-weight:700;font-size:12px;line-height:1;letter-spacing:1px;text-transform:uppercase;color:var(--color-ink)} .seniorenbed-categorie-card-v2-colors{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px} .seniorenbed-categorie-card-v2-color{width:22px;height:22px;border-radius:999px;border:1px solid rgba(255,255,255,.92);box-shadow:0 3px 10px rgba(61,40,45,.22)} .seniorenbed-categorie-card-v2-color--light{background:#d8cabb} .seniorenbed-categorie-card-v2-color--brown{background:#7a523d} .seniorenbed-categorie-card-v2-color--dark{background:#3d3733} .seniorenbed-categorie-card-v2-color-more{margin-left:3px;font-family:var(--font-sans);font-size:19px;line-height:1;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(61,40,45,.35)} @media (max-width:767px){.seniorenbed-categorie-card-v2-label{top:12px;left:12px;min-height:26px;padding:6px 11px;font-size:10px}.seniorenbed-categorie-card-v2-color{width:18px;height:18px}.seniorenbed-categorie-card-v2-color-more{font-size:14px}} /* 5. Productkaart inhoud */ .seniorenbed-categorie-card-content{display:flex;flex:1;flex-direction:column;padding:24px} @media (max-width:767px){.seniorenbed-categorie-card-content{padding:20px}} /* 5.V2 Productkaart inhoud en titel */ .seniorenbed-categorie-card-v2-content{display:flex;flex-direction:column;flex:1;padding:18px 26px} .seniorenbed-categorie-card-v2-title-row{position:relative;padding-bottom:13px;margin-bottom:0} .seniorenbed-categorie-card-v2-title-row::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:3px;border-radius:999px;background:var(--color-accent)} .seniorenbed-categorie-card-v2-title-link{color:inherit;text-decoration:none} .seniorenbed-categorie-card-v2 .seniorenbed-title-text{margin-bottom:0;line-height:1.08;letter-spacing:.1px} @media (max-width:767px){.seniorenbed-categorie-card-v2-content{padding:18px}} /* 6. Productkaart prijs en levertijd */ /* 6.V2 Productkaart rating en intro */ .seniorenbed-categorie-card-v2-rating{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px} .seniorenbed-categorie-card-v2-rating-context{font-family:var(--font-sans);font-size:16px;line-height:1;color:rgba(61,40,45,.76)} .seniorenbed-categorie-card-v2-rating-score{font-family:var(--font-sans);font-weight:800;font-size:18px;line-height:1;color:var(--color-accent)} .seniorenbed-categorie-card-v2-rating-link{padding:0;border:0;background:transparent;font-family:var(--font-sans);font-size:16px;line-height:1;color:var(--color-accent);cursor:pointer;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--color-accent)} .seniorenbed-categorie-card-v2-rating-link:hover{text-decoration-style:solid} .seniorenbed-categorie-card-v2-intro{margin-top:14px;margin-bottom:18px;display:block;font-family:var(--font-sans);font-size:16px;line-height:25px;color:rgba(61,40,45,.78)} .seniorenbed-categorie-card-v2-intro strong{margin-right:8px;color:var(--color-ink);font-weight:700} .seniorenbed-categorie-card-v2-price-block{display:block;margin:0 0 12px;padding:0} .seniorenbed-categorie-card-v2-price-text{margin:0;font-family:var(--font-sans);font-size:16px;line-height:25px;color:rgba(61,40,45,.82)} .seniorenbed-categorie-card-v2-price-text strong{font-weight:400;color:rgba(61,40,45,.82)} @media (max-width:767px){.seniorenbed-categorie-card-v2-rating{gap:5px}.seniorenbed-categorie-card-v2-rating-context,.seniorenbed-categorie-card-v2-rating-link{font-size:14px}.seniorenbed-categorie-card-v2-rating-score{font-size:16px}.seniorenbed-categorie-card-v2-intro{font-size:14px;line-height:24px}.seniorenbed-categorie-card-v2-price-text{font-size:14px;line-height:22px}} /* 7. Productkaart opsomming */ .seniorenbed-categorie-card-opsomming .seniorenbed-opsomming-list{gap:7px} .seniorenbed-categorie-card-opsomming .seniorenbed-opsomming-item{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:14px;line-height:20px} .seniorenbed-categorie-card-opsomming .seniorenbed-opsomming-item:before{content:"✓";width:auto;height:auto;margin-top:0;border-radius:0;background:transparent;font-family:var(--font-sans);font-weight:700;font-size:14px;line-height:20px;color:var(--color-ink);opacity:.65} /* 7.V2 Productkaart info-links */ .seniorenbed-categorie-card-v2-info-link{margin:0;padding:0;border:0;background:transparent;display:inline-block;white-space:nowrap;vertical-align:baseline;color:rgba(61,40,45,.74);text-decoration:none} .seniorenbed-categorie-card-v2 .seniorenbed-specificaties-info-link::before{content:none!important;display:none!important} .seniorenbed-categorie-card-v2 .seniorenbed-categorie-card-v2-intro .seniorenbed-categorie-card-v2-info-link:not(:last-of-type)::after{content:" | ";display:inline-block;margin:0 0;color:rgba(61,40,45,.45);text-decoration:none} .seniorenbed-categorie-card-v2-info-link,.seniorenbed-categorie-card-v2-info-link:hover,.seniorenbed-categorie-card-v2-info-link span,.seniorenbed-categorie-card-v2-info-link:hover span{text-decoration:none!important} .seniorenbed-categorie-card-v2-info-link span{text-decoration:none;border-bottom:1px dotted rgba(61,40,45,.55);padding-bottom:1px;line-height:1} .seniorenbed-categorie-card-v2-info-link:hover span{border-bottom-style:solid} @media (max-width:767px){.seniorenbed-categorie-card-v2 .seniorenbed-categorie-card-v2-intro .seniorenbed-categorie-card-v2-info-link:not(:last-of-type)::after{margin:0 5px}.seniorenbed-categorie-card-v2-divider{margin:0 5px}} .seniorenbed-categorie-card-v2-showroom-link,.seniorenbed-categorie-card-v2-showroom-link:hover,.seniorenbed-categorie-card-v2-showroom-link:focus,.seniorenbed-categorie-card-v2-showroom-link span,.seniorenbed-categorie-card-v2-showroom-link:hover span,.seniorenbed-categorie-card-v2-showroom-link:focus span{color:var(--color-link)!important;text-decoration:none!important} .seniorenbed-categorie-card-v2-showroom-link span{border-bottom:1px dotted rgba(65,110,134,.55);border-bottom:1px dotted color-mix(in srgb,var(--color-link) 55%,transparent);padding-bottom:1px;line-height:1} .seniorenbed-categorie-card-v2-showroom-link:hover span,.seniorenbed-categorie-card-v2-showroom-link:focus span{border-bottom-style:solid} /* 8. Productkaart footer en pijl */ /* 8.V2 Productkaart prijs en onderste rij */ .seniorenbed-categorie-card-v2-price{display:block;margin-top:0;padding-top:14px;padding-bottom:0;border-top:1px solid rgba(241,180,52,.5);border-top:1px solid color-mix(in srgb,var(--color-accent) 50%,transparent);border-bottom:0} .seniorenbed-categorie-card-v2-price p{margin:0;font-family:var(--font-sans);font-size:16px;line-height:25px;color:rgba(61,40,45,.82)} .seniorenbed-categorie-card-v2-price strong{font-weight:400;color:rgba(61,40,45,.82)} .seniorenbed-categorie-card-v2-price-value{font-weight:800;color:var(--color-ink)} .seniorenbed-categorie-card-v2-showroom .seniorenbed-categorie-card-v2-info-link{margin-left:0} .seniorenbed-categorie-card-v2-showroom{margin:10px 0 0;font-family:var(--font-sans);font-size:16px;line-height:25px;font-weight:400;color:rgba(61,40,45,.78)} .seniorenbed-categorie-card-v2-bottom{display:block;margin-top:auto;padding-top:14px} .seniorenbed-categorie-card-v2-bottom .seniorenbed-button-filled{width:100%;justify-content:center} @media (max-width:767px){.seniorenbed-categorie-card-v2-price p,.seniorenbed-categorie-card-v2-showroom{font-size:14px;line-height:22px}} /* 9. Productkaart hover */ @media (hover:hover){.seniorenbed-categorie-card:hover .seniorenbed-categorie-card-image{transform:scale(1.025)}.seniorenbed-categorie-card:hover .seniorenbed-lp-hero-card-arrow{transform:translateX(3px);border-color:rgba(61,40,45,.38);color:var(--color-ink)}} /* 9.V2 Productkaart pijl */ .seniorenbed-categorie-card-v2-arrow .seniorenbed-button-chevron{width:9px;height:9px;margin:0;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)} @media (max-width:767px){.seniorenbed-categorie-card-v2-arrow{width:34px;min-width:34px;height:34px}.seniorenbed-categorie-card-v2-arrow .seniorenbed-button-chevron{width:8px;height:8px}} /* 10. Gidskaart / brochurekaart */ /* Guide-card altijd zichtbaar — overrulet [hidden] dat de filter-IIFE zet vóór re-render. Veilig: deze card hoort bij elke filter (data-category bevat alle waarden). */ .seniorenbed-categorie-card--guide[hidden]{display:flex !important} .seniorenbed-categorie-card--guide{background:var(--color-sage-light)} /* CTA-wrapper: gids + advies blokjes als losse grid-row, BUITEN filter-scope (geen seniorenbed-categorie-card class) zodat de filter-IIFE 'm nooit hidden zet. Door DOM-positie + appendChild-shuffle van cards komt 'ie automatisch bovenaan. */ .v4pc-cta-wrapper{grid-column:1 / -1;display:block;width:100%} .seniorenbed-categorie-card--guide .seniorenbed-categorie-card-link{padding:30px 28px 32px} .seniorenbed-categorie-card--guide .seniorenbed-categorie-card-content{flex:0 0 auto;padding:0} .seniorenbed-categorie-guide-title{margin-top:4px;margin-bottom:0;color:var(--color-ink)} .seniorenbed-categorie-guide-media{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 0 16px} .seniorenbed-categorie-guide-image{display:block;width:min(100%,280px);height:auto;object-fit:contain;margin-inline:auto} .seniorenbed-categorie-guide-footer{display:flex;justify-content:flex-start;margin-top:auto} @media (max-width:767px){.seniorenbed-categorie-card--guide{margin-left:calc(-1 * var(--page-inset));margin-right:calc(-1 * var(--page-inset));border-radius:0;padding-top:20px;padding-bottom:20px}.seniorenbed-categorie-card--guide .seniorenbed-categorie-card-link{padding:0 var(--page-inset);display:grid;grid-template-columns:minmax(0,1fr) 42%;grid-template-rows:auto auto;column-gap:16px;align-items:center}.seniorenbed-categorie-card--guide .seniorenbed-categorie-card-content{grid-column:1;width:95%;grid-row:1;position:relative;z-index:1;padding-left:10px}.seniorenbed-categorie-guide-media{grid-column:2;grid-row:1/3;padding-left:10px;align-self:center;justify-content:flex-end;overflow:visible;position:relative;z-index:10}.seniorenbed-categorie-guide-image{width:clamp(120%,calc(120% + ((600px - 100vw) * .5)),220%);max-width:none;margin-inline:0;transform:translateX(-12%);position:relative;z-index:11}html.js .seniorenbed-categorie-guide-image{transform:translateX(28%);opacity:0;transition:transform .75s ease,opacity .75s ease}html.js .seniorenbed-categorie-card--guide.is-visible .seniorenbed-categorie-guide-image{transform:translateX(-12%);opacity:1}.seniorenbed-categorie-guide-footer{grid-column:1;grid-row:2;padding-left:10px;margin-top:12px;align-self:start;position:relative;z-index:1}} /* 11. Categorie top: titel, teller en sortering */ .seniorenbed-categorie-products{padding-top:18px} .seniorenbed-categorie-products-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:24px} .seniorenbed-categorie-products-count{margin-top:8px;color:rgba(61,40,45,.62)} .seniorenbed-categorie-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;position:relative;z-index:80} .seniorenbed-categorie-sort{position:relative;z-index:300} .seniorenbed-categorie-sort:after{content:none!important;display:none!important} .seniorenbed-categorie-sort select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important} .seniorenbed-categorie-sort-button{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:10px 16px;border:1px solid rgba(61,40,45,.16);border-radius:999px;background:#fff;font-family:var(--font-sans);font-weight:700;font-size:13px;line-height:18px;letter-spacing:.8px;color:var(--color-ink);cursor:pointer} .seniorenbed-categorie-sort-icon{width:18px;height:18px;color:#0B7C95;flex-shrink:0} .seniorenbed-categorie-sort-menu{position:absolute;top:0;right:0;min-width:240px;padding:0;border:1px solid rgba(61,40,45,.16);border-radius:18px;background:#fff;box-shadow:0 18px 40px rgba(61,40,45,.14);overflow:hidden;z-index:400} .seniorenbed-categorie-sort-menu button{display:block;width:100%;margin:0;padding:6px 16px;border:0;border-radius:0;background:#fff;line-height:20px;text-align:left;cursor:pointer} .seniorenbed-categorie-sort-menu button:hover{background:#fff} .seniorenbed-categorie-sort-menu button.seniorenbed-text{margin:10px;padding:4px 16px;line-height:20px} .seniorenbed-categorie-products-top h2{margin-top:12px} @media (max-width:767px){.seniorenbed-categorie-products{padding-top:12px}.seniorenbed-categorie-products-top{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title title" "count actions";gap:0 16px;align-items:center}.seniorenbed-categorie-products-top>div:first-child{display:contents}.seniorenbed-categorie-products-top h2{grid-area:title;margin:0!important}.seniorenbed-categorie-products-top h2.seniorenbed-title-2{margin-top:24px!important;margin-bottom:-2px!important}.seniorenbed-categorie-products-count{grid-area:count;display:block;margin:0 0 -8px 0;white-space:nowrap}.seniorenbed-categorie-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;margin-left:auto;margin-bottom:-8px}} /* 12. Categorie filterbalk */ .seniorenbed-categorie-filterbar{position:sticky;top:0;z-index:20;margin-inline:calc(-1 * var(--page-inset));padding-inline:var(--page-inset);background:#fff;border:0} .seniorenbed-categorie-filterbar:before,.seniorenbed-categorie-filterbar:after{content:"";position:absolute;left:50%;width:100vw;height:1px;background:rgba(61,40,45,.12);transform:translateX(-50%);pointer-events:none} .seniorenbed-categorie-filterbar:before{top:0} .seniorenbed-categorie-filterbar:after{bottom:0} .seniorenbed-categorie-filterbar-inner{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;min-height:78px} .seniorenbed-categorie-filterbar-label,.seniorenbed-categorie-filterbar-help{white-space:nowrap} .seniorenbed-categorie-filterbar.is-stuck:before{opacity:0} @media (max-width:1000px){.seniorenbed-categorie-filterbar-inner{grid-template-columns:auto 1fr;gap:14px;align-items:center;min-height:64px;padding-block:12px}.seniorenbed-categorie-filterbar-help{display:none}} /* 13. Categorie filter chips: verplaatst naar typologie als .seniorenbed-filter-buttons */ /* 14. Categorie paginering */ .seniorenbed-categorie-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:42px} .seniorenbed-categorie-pagination-pages{display:flex;align-items:center;gap:10px} .seniorenbed-categorie-pagination-button,.seniorenbed-categorie-pagination-page{appearance:none;border:1px solid rgba(61,40,45,.16);background:#fff;color:var(--color-ink);min-width:46px;height:46px;padding-inline:18px;border-radius:999px;font-family:var(--font-sans);font-weight:700;font-size:13px;line-height:18px;letter-spacing:.8px;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease} .seniorenbed-categorie-pagination-page{padding-inline:0} .seniorenbed-categorie-pagination-page.is-active{background:var(--color-sage-light);border-color:rgba(61,40,45,.42);box-shadow:inset 0 0 0 1px rgba(61,40,45,.42)} .seniorenbed-categorie-pagination-button:disabled{opacity:.38;cursor:default;pointer-events:none} @media (hover:hover){.seniorenbed-categorie-pagination-button:hover:not(:disabled),.seniorenbed-categorie-pagination-page:hover:not(.is-active){transform:translateY(-1px);border-color:rgba(61,40,45,.34)}} @media (max-width:767px){.seniorenbed-categorie-pagination{gap:10px;margin-top:30px;flex-wrap:wrap}.seniorenbed-categorie-pagination-button,.seniorenbed-categorie-pagination-page{min-width:42px;height:42px;font-size:12px;letter-spacing:.6px}} /* 15.V2 Review Sidepanel */ .seniorenbed-categorie-review-panel{position:fixed;inset:0 0 0 auto;width:min(560px,calc(100vw - 18px));height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:30px 28px;border:0;border-left:1px solid rgba(61,40,45,.12);background:#fff;color:var(--color-ink);box-shadow:-18px 0 48px rgba(61,40,45,.15)} /* FALLBACK: op browsers zonder native Popover API (o.a. iOS < 17.4) wordt het popover-attribuut genegeerd en zou dit fixed paneel direct open over de pagina renderen zonder dat je het kunt sluiten. Daarom hier verbergen. - @supports vangt iOS 16.4-17.3 zonder flash; - .no-popover (gezet via JS) vangt ook nog oudere browsers (iOS < 16.4). */ @supports not selector(:popover-open){ .seniorenbed-categorie-review-panel[popover]{display:none!important} } html.no-popover .seniorenbed-categorie-review-panel[popover]{display:none!important} @media (max-width:767px){.seniorenbed-categorie-review-panel{width:calc(100vw - 10px);padding:26px 21px}} .seniorenbed-categorie-review-panel::backdrop{background:rgba(0,0,0,.5)} body.seniorenbed-sheet-open{overflow:hidden;touch-action:none} .seniorenbed-categorie-review-panel-rating{margin-bottom:20px} .seniorenbed-categorie-review-panel-score{display:block;font-family:var(--font-sans);font-weight:700;font-size:36px;line-height:1;color:var(--color-ink)} .seniorenbed-categorie-review-panel-stars{display:block;margin-top:9px;font-size:15px;line-height:1;letter-spacing:1px;color:var(--color-accent);white-space:nowrap} .seniorenbed-categorie-review-panel-meta{margin-top:9px;font-family:var(--font-sans);font-size:13px;line-height:21px;color:rgba(61,40,45,.62)} .seniorenbed-categorie-review-panel .seniorenbed-text{margin:0;color:rgba(61,40,45,.74)} .seniorenbed-categorie-review-list{display:flex;flex-direction:column;gap:14px;margin-top:20px} @media (max-width:767px){.seniorenbed-categorie-review-list{gap:12px}} .seniorenbed-categorie-review-list blockquote{margin:0;padding:17px 17px 16px;border-radius:14px;background:#fff;border:1px solid rgba(61,40,45,.10);box-shadow:0 8px 22px rgba(61,40,45,.055)} @media (max-width:767px){.seniorenbed-categorie-review-list blockquote{padding:16px;border-radius:12px}} .seniorenbed-categorie-review-author{display:flex;align-items:center;gap:12px;margin-bottom:12px} @media (max-width:767px){.seniorenbed-categorie-review-author{gap:10px;margin-bottom:10px}} .seniorenbed-categorie-review-author img{width:42px;height:42px;flex:0 0 42px;border-radius:999px;object-fit:cover;background:var(--color-sand)} @media (max-width:767px){.seniorenbed-categorie-review-author img{width:36px;height:36px;flex-basis:36px}} .seniorenbed-categorie-review-author div{min-width:0} .seniorenbed-categorie-review-author cite{display:inline;margin:0;font-style:normal;color:var(--color-ink)} .seniorenbed-categorie-review-author span{display:inline-block;margin-left:8px;font-family:var(--font-sans);font-size:13px;line-height:1;letter-spacing:.5px;color:var(--color-accent);white-space:nowrap} @media (max-width:767px){.seniorenbed-categorie-review-author span{display:block;margin-left:0;margin-top:5px;font-size:12px}} .seniorenbed-categorie-review-list h4{margin:0 0 7px;color:var(--color-ink)} .seniorenbed-categorie-review-list p{margin:0;font-family:var(--font-sans);font-size:14px;line-height:23px;color:rgba(61,40,45,.78)} @media (max-width:767px){.seniorenbed-categorie-review-panel{inset:0 auto 0 0;width:87.5vw;max-width:none;height:100vh;height:100dvh;padding:26px 21px;overflow-y:auto;overscroll-behavior:contain;box-shadow:18px 0 48px rgba(61,40,45,.15);border-left:0;border-right:1px solid rgba(61,40,45,.12)}.seniorenbed-categorie-review-panel::backdrop{background:rgba(0,0,0,.5)}} .seniorenbed-categorie-review-list cite{font-style:normal} .seniorenbed-categorie-review-panel .seniorenbed-specificaties-popover-actions{margin-top:22px} /* =============================== HERO PRODUCT PAGINA =============================== */ /* 1. Grid */ /* 2. Gallerij */ .seniorenbed-product-gallery{min-width:0} .seniorenbed-product-gallery-main{position:relative;overflow:hidden;border-radius:6px;background:var(--color-sand)} .seniorenbed-product-gallery-main img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover} .seniorenbed-product-gallery-arrow{position:absolute;top:50%;z-index:3;width:42px;height:42px;border:1px solid rgba(61,40,45,.14);border-radius:999px;background:rgba(255,255,255,.92);cursor:pointer;transform:translateY(-50%);transition:background-color .18s ease,border-color .18s ease} .seniorenbed-product-gallery-arrow:hover{background:#fff;border-color:var(--color-link)} .seniorenbed-product-gallery-arrow[hidden]{display:none!important} .seniorenbed-product-gallery-arrow-prev{left:14px} .seniorenbed-product-gallery-arrow-next{right:14px} .seniorenbed-product-gallery-arrow::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-top:1.8px solid var(--color-link);border-right:1.8px solid var(--color-link)} .seniorenbed-product-gallery-arrow-prev::before{transform:translate(-35%,-50%) rotate(-135deg)} .seniorenbed-product-gallery-arrow-next::before{transform:translate(-65%,-50%) rotate(45deg)} .seniorenbed-product-gallery-main{touch-action:pan-y} .seniorenbed-product-gallery-main-image{-webkit-user-drag:none;user-select:none} .seniorenbed-product-thumbs{display:flex;gap:12px;margin-top:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .seniorenbed-product-thumbs::-webkit-scrollbar{display:none} .seniorenbed-product-thumb{position:relative;flex:0 0 150px;appearance:none;padding:0;border:0;border-radius:4px;background:transparent;overflow:hidden;cursor:pointer} .seniorenbed-product-thumb img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px} .seniorenbed-product-thumb.is-active::after{content:"";position:absolute;inset:0;border:3px solid var(--color-link);border-radius:4px;pointer-events:none} .seniorenbed-product-thumb:hover::after{content:"";position:absolute;inset:0;border:3px solid rgba(65,110,134,.65);border-radius:4px;pointer-events:none} .seniorenbed-product-thumb.is-active:hover::after{border-color:var(--color-link)} .seniorenbed-product-thumb:focus-visible{outline:2px solid var(--color-link);outline-offset:3px} @media (max-width:767px){.seniorenbed-product-gallery-arrow{width:38px;height:38px}.seniorenbed-product-gallery-arrow-prev{left:10px}.seniorenbed-product-gallery-arrow-next{right:10px}.seniorenbed-product-thumb{flex-basis:112px}} /* 3. Summary */ .seniorenbed-product-hero-title-desktop .seniorenbed-title-1,.seniorenbed-product-hero-title-mobile .seniorenbed-title-1{margin-bottom:0} @media (max-width:900px){.seniorenbed-product-hero-title-mobile{display:block;margin-bottom:10px}.seniorenbed-product-hero-title-mobile .seniorenbed-title-1{margin-bottom:0}.seniorenbed-product-hero-title-mobile .seniorenbed-product-property{margin-top:0;margin-bottom:0}} /* 4. Prijs */ /* 5. Showroom uitklap */ /* 6. Cta's */ .seniorenbed-product-cta{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:22px} .seniorenbed-product-cta .seniorenbed-button-filled,.seniorenbed-product-cta .seniorenbed-button-outline{flex:1 1 180px} /* 7. Brochure features */ /* 8. Usp's uitklapblokken */ /* 9. Mobible */ @media (max-width:767px){.seniorenbed-product-thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.seniorenbed-product-thumbs::-webkit-scrollbar{display:none}.seniorenbed-product-thumb{flex:0 0 78px}.seniorenbed-product-cta{flex-direction:column}.seniorenbed-product-cta .seniorenbed-button-filled,.seniorenbed-product-cta .seniorenbed-button-outline{width:100%}} @media (max-width:767px){.seniorenbed-product-cta{flex-direction:column;align-items:stretch}.seniorenbed-product-cta .seniorenbed-button-filled,.seniorenbed-product-cta .seniorenbed-button-outline{flex:none;width:100%}} /* =============================== SPECIFICATIES PRODUCT PAGINA =============================== */ /* 1. Layout */ .seniorenbed-specificaties-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(360px,1fr);gap:clamp(24px,4vw,56px);align-items:start} .seniorenbed-specificaties{display:flex;flex-direction:column;min-width:0;max-width:920px} .seniorenbed-specificaties-head{margin-bottom:24px} /* 2. Contactformulier */ .seniorenbed-product-question{position:sticky;top:120px;padding:24px;border:1px solid rgba(61,40,45,.12);border-radius:6px;background:var(--color-sage-light)} .seniorenbed-product-question-form{display:flex;flex-direction:column;gap:14px;margin-top:18px} .seniorenbed-product-question-form label{display:flex;flex-direction:column;gap:6px} .seniorenbed-product-question-form label span{font-family:var(--font-sans);font-size:14px;line-height:20px;color:rgba(61,40,45,.72)} .seniorenbed-product-question-form input,.seniorenbed-product-question-form textarea{width:100%;border:1px solid rgba(61,40,45,.18);border-radius:6px;background:#fff;padding:11px 12px;font-family:var(--font-sans);font-size:15px;line-height:22px;color:var(--color-ink);transition:border-color .2s ease,box-shadow .2s ease} .seniorenbed-product-question-form textarea{min-height:120px;resize:vertical} .seniorenbed-product-question-form input::placeholder,.seniorenbed-product-question-form textarea::placeholder{color:rgba(61,40,45,.46)} .seniorenbed-product-question-form input:focus,.seniorenbed-product-question-form textarea:focus{outline:none;border-color:var(--color-link);box-shadow:0 0 0 1px var(--color-link)} .seniorenbed-product-question-form .seniorenbed-button-filled{width:100%;justify-content:center} .seniorenbed-product-question-note{margin:0;font-family:var(--font-sans);font-size:13px;line-height:19px;color:rgba(61,40,45,.62)} /* 3. Zoekveld */ .seniorenbed-specificaties-search{position:relative;display:block;max-width:460px;margin-top:17px} .seniorenbed-specificaties-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .seniorenbed-specificaties-search-input{width:100%;min-height:46px;padding:0 46px 0 14px;border:1px solid rgba(61,40,45,.22);border-radius:6px;background:#fff;font-family:var(--font-sans);font-size:15px;line-height:22px;color:var(--color-ink);transition:border-color .2s ease,box-shadow .2s ease} .seniorenbed-specificaties-search-input::placeholder{color:rgba(61,40,45,.48)} .seniorenbed-specificaties-search-input:focus{outline:none;border-color:var(--color-link);box-shadow:0 0 0 1px var(--color-link)} .seniorenbed-specificaties-search-icon{position:absolute;right:16px;top:50%;width:15px;height:15px;border:2px solid var(--color-link);border-radius:50%;transform:translateY(-50%);pointer-events:none} .seniorenbed-specificaties-search-icon::after{content:"";position:absolute;right:-6px;bottom:-5px;width:7px;height:2px;border-radius:999px;background:var(--color-link);transform:rotate(45deg)} /* 4. Hidden */ .seniorenbed-specificaties-row[hidden],.seniorenbed-specificaties-category[hidden],.seniorenbed-specificaties-extra[hidden],.seniorenbed-specificaties-no-results[hidden],.seniorenbed-specificaties-toggle[hidden]{display:none!important} /* 5. Tabel */ .seniorenbed-specificaties-table{display:flex;flex-direction:column} .seniorenbed-specificaties-category{margin-top:32px} .seniorenbed-specificaties-category:first-child{margin-top:0} .seniorenbed-specificaties-category+.seniorenbed-specificaties-row{margin-top:8px} .seniorenbed-specificaties-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(360px,1fr);gap:24px;padding:12px 0;border-bottom:1px solid rgba(61,40,45,.12)} .seniorenbed-specificaties-label,.seniorenbed-specificaties-value{font-family:var(--font-sans);font-size:15px;line-height:22px;letter-spacing:.2px;font-weight:400} .seniorenbed-specificaties-label{color:rgba(61,40,45,.58)} .seniorenbed-specificaties-value{color:var(--color-ink);font-weight:500} /* 6. Button */ .seniorenbed-specificaties-toggle{margin-top:24px;align-self:flex-start} /* 7. No results */ .seniorenbed-specificaties-no-results{margin-top:17px;color:rgba(61,40,45,.68)} /* 8. Mobible */ @media (max-width:900px){.seniorenbed-specificaties-layout{grid-template-columns:1fr}.seniorenbed-product-question{position:static}} @media (max-width:767px){.seniorenbed-specificaties{max-width:none}.seniorenbed-specificaties-search{max-width:none}.seniorenbed-specificaties-search-input{font-size:16px}.seniorenbed-specificaties-category{margin-top:18px}.seniorenbed-specificaties-category+.seniorenbed-specificaties-row{margin-top:4px}.seniorenbed-specificaties-row{grid-template-columns:minmax(0,46%) minmax(0,54%);gap:12px;padding:4px 0;border-bottom:0}.seniorenbed-specificaties-label,.seniorenbed-specificaties-value{font-size:14px;line-height:20px}.seniorenbed-specificaties-label{color:rgba(61,40,45,.62)}.seniorenbed-product-question{padding:20px}.seniorenbed-product-question-form input,.seniorenbed-product-question-form textarea{font-size:16px}} /* 9. Pop-up link */ .seniorenbed-specificaties-info-link{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:left;cursor:pointer} .seniorenbed-specificaties-info-link span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(61,40,45,.24);transition:text-decoration-color .2s ease} .seniorenbed-specificaties-info-link:hover span{text-decoration-color:var(--color-link)} .seniorenbed-specificaties-info-link::before{content:"i";display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;border-radius:999px;background:rgba(65,110,134,.12);color:var(--color-link);font-size:10px;line-height:1;font-weight:700;transform:translateY(-.5px);transition:background-color .2s ease,transform .2s ease} .seniorenbed-specificaties-info-link:hover::before{background:rgba(65,110,134,.2);transform:translateY(-.5px) scale(1.05)} /* 10. Pop-up */ .seniorenbed-popover-open{overflow:hidden;height:100%;touch-action:none} .seniorenbed-specificaties-popover{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0;border:1px solid rgba(61,40,45,.16);border-radius:8px;background:#fff;color:var(--color-ink);box-shadow:0 18px 50px rgba(61,40,45,.18)} .seniorenbed-specificaties-popover::backdrop{background:rgba(0,0,0,.7)} .seniorenbed-specificaties-popover h3{margin:0 40px 8px 0} .seniorenbed-specificaties-popover p{margin:0} .seniorenbed-specificaties-popover-media{position:relative;overflow:hidden} .seniorenbed-specificaties-popover-carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 20px 0 0} .seniorenbed-specificaties-popover-carousel::-webkit-scrollbar{display:none} .seniorenbed-specificaties-popover-carousel .seniorenbed-specificaties-popover-image{display:block;flex:0 0 86%;width:86%;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;margin:0;border-radius:0} .seniorenbed-specificaties-popover-single{overflow:hidden} .seniorenbed-specificaties-popover-single .seniorenbed-specificaties-popover-image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:0} .seniorenbed-specificaties-popover-content{padding:24px 28px 28px} .seniorenbed-specificaties-popover-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} .seniorenbed-specificaties-popover-close{position:sticky;top:18px;z-index:20;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:18px 18px -56px auto;padding:0;border:0;border-radius:999px;background:rgba(61,40,45,.58);color:#fff;font-size:28px;line-height:1;cursor:pointer;box-shadow:none;appearance:none} .seniorenbed-specificaties-popover-close:hover{background:rgba(61,40,45,.58)} .seniorenbed-specificaties-popover-handle{display:none} @media (max-width:767px){.seniorenbed-specificaties-popover{position:fixed;inset:auto 0 0 0;transform:translateY(100%);width:100%;max-width:none;height:67vh;height:67dvh;min-height:42dvh;max-height:calc(100dvh - 12px);padding:0;border:0;border-radius:30px 30px 0 0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;box-shadow:0 -12px 30px rgba(61,40,45,.14);transition:transform .24s ease;cursor:grab}.seniorenbed-specificaties-popover:popover-open{transform:translateY(0)}.seniorenbed-specificaties-popover.is-dragging{transition:none;user-select:none;cursor:grabbing}.seniorenbed-specificaties-popover-handle{display:block;position:sticky;top:10px;z-index:8;width:54px;height:5px;margin:10px auto 8px;border-radius:999px;background:rgba(61,40,45,.32);pointer-events:none}.seniorenbed-specificaties-popover-media{position:relative;margin-top:-23px;overflow:hidden}.seniorenbed-specificaties-popover-content{padding:24px 28px 36px}.seniorenbed-specificaties-popover-actions{flex-direction:column;align-items:flex-start}.seniorenbed-specificaties-popover::after{content:"";position:sticky;left:0;right:0;bottom:0;display:block;height:44px;margin-top:-44px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 82%)}} /* =============================== OVERIG PRODUCT PAGINA =============================== */ /* 1. Meer weten */ .seniorenbed-meer-weten-card-content .seniorenbed-title-text{margin:0} .seniorenbed-meer-weten-card-content .seniorenbed-text{margin-top:0} .seniorenbed-meer-weten-card-content .seniorenbed-text+.seniorenbed-text{margin-top:8px} @media (max-width:767px){.seniorenbed-meer-weten{padding:20px}.seniorenbed-meer-weten-locations{grid-template-columns:1fr}.seniorenbed-meer-weten-buttons{flex-direction:column}.seniorenbed-meer-weten-buttons .seniorenbed-button-filled,.seniorenbed-meer-weten-buttons .seniorenbed-button-outline{width:100%}.seniorenbed-meer-weten-card-content{padding:20px}} /* 2. Vergelijkebare bedden */ .seniorenbed-vergelijkbare-bedden-card-content .seniorenbed-title-text{margin:0} /* =============================== ADVIES HUB & ARTIKEL — LP CTA =============================== */ .seniorenbed-advies-cta{margin-top:clamp(40px,6vw,64px);padding:clamp(28px,4vw,48px);background:var(--color-sand);border-radius:6px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center} .seniorenbed-advies-cta-text{margin:0;font-family:var(--font-minion-pro-medium);font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:var(--color-ink)} @media (max-width:767px){.seniorenbed-advies-cta{grid-template-columns:1fr;gap:20px}} /* =============================== PRODUCTKAARTEN — PRIJZEN VERBERGEN Alleen V3 verbergt prijzen (via inline style op die pagina). V4 toont prijzen — regel hieronder verwijderd. =============================== */ /* =============================================================== ── CLAUDE TOEVOEGING ── Gecentraliseerde stijlen (eerder inline per pagina) Toegevoegd: mei 2026 =============================================================== */ /* ================================ LANDINGSPAGINA — VERTROUWENSBLOK LP V3. Hernoemd: v4-vertrouwen* → seniorenbed-vertrouwen* ================================ */ .seniorenbed-vertrouwen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(17px, 2vw, 26px); align-items: center; padding: clamp(30px, 4vw, 54px); border-radius: 6px; background: var(--color-sand); } .seniorenbed-vertrouwen-quote { position: relative; min-width: 0; padding-left: 28px; } .seniorenbed-vertrouwen-quote::before { content: "\201C"; position: absolute; left: 0; top: -8px; font-family: var(--font-minion-pro-medium); font-size: 64px; line-height: 1; color: var(--color-accent); pointer-events: none; } .seniorenbed-vertrouwen-blockquote { margin: 0; font-family: var(--font-minion-pro-medium); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; color: var(--color-ink); font-style: normal; } .seniorenbed-vertrouwen-cite { display: block; margin-top: 16px; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: rgba(61, 40, 45, 0.62); font-style: normal; } .seniorenbed-vertrouwen-media { min-width: 0; } .seniorenbed-vertrouwen-image { display: block; width: 100%; border-radius: 6px; aspect-ratio: 3/2; object-fit: cover; } @media (max-width: 767px) { .seniorenbed-vertrouwen { grid-template-columns: 1fr; gap: 20px; padding: 24px; } .seniorenbed-vertrouwen-media { order: -1; } } /* ================================ LP V4 SPECIFIEK Scoped op .v4-hero of prefix v4pc- — nooit impact op V3. ================================ */ .v4pc-trust-inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 56px); align-items: center; } .v4pc-trust-quote { margin: 0; font-family: var(--font-minion-pro-medium); font-size: clamp(19px, 2.2vw, 26px); line-height: 1.55; color: var(--color-ink); font-style: normal; } .v4pc-trust-cite { display: block; margin-top: 14px; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: rgba(61, 40, 45, 0.62); font-style: normal; } .v4pc-trust-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; min-width: 190px; } @media (max-width: 900px) { .v4pc-trust-inner { grid-template-columns: 1fr; } .v4pc-trust-actions { flex-direction: row; flex-wrap: wrap; } } /* Hero banner positie (V4 2-items variant) */ .v4-hero .seniorenbed-lp-hero-v2-banner-image { position: absolute; top: 0; left: 0; bottom: 0; width: calc(100% + (50vw - 50%)); height: 100%; min-height: 0; max-height: none; } /* V4 mobiel: hero block, banner verbergen */ /* ================================ ADVIES HUB — ARTIKELKAARTEN sh-* = seniorenbed hub ================================ */ .sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: 32px; } .sh-card { display: flex; flex-direction: column; background: var(--color-sage-light); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--color-ink); transition: box-shadow .18s; } .sh-card:hover { box-shadow: 0 4px 20px rgba(61,40,45,.10); } .sh-card-image { display: block; width: 100%; aspect-ratio: 16/7; object-fit: cover; } .sh-card-body { padding: clamp(20px, 2.5vw, 28px); flex: 1; display: flex; flex-direction: column; gap: 10px; } .sh-card-desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: rgba(61,40,45,.65); margin: 0; flex: 1; } .sh-card:hover .sh-card-link { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767px) { .sh-grid { grid-template-columns: 1fr; } } /* ================================ PRODUCTPAGINA — sp-* STIJLEN Prefix: sp- (seniorenbed product) ================================ */ .seniorenbed-productpage-v3-gids-note { margin: 10px 0 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: rgba(61, 40, 45, 0.62); } .sp-functie .seniorenbed-title-3 { margin-bottom: 14px; } .seniorenbed-productpage-v3-showroom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: start; padding: clamp(28px, 4vw, 52px); background: var(--color-sand); border-radius: 6px; } .seniorenbed-productpage-v3-showroom-image { display: block; width: 100%; border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; } .seniorenbed-productpage-v3-showroom-locations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; } .seniorenbed-productpage-v3-showroom-location { background: #fff; border-radius: 4px; padding: 16px; } @media (max-width: 767px) { .seniorenbed-productpage-v3-showroom { grid-template-columns: 1fr; padding: 24px; } .seniorenbed-productpage-v3-showroom-locations { grid-template-columns: 1fr; } .seniorenbed-productpage-v3-showroom-media { order: -1; } } /* ================================ STICKY FOOTER — GEDEELD Hernoemd: v5-sticky-footer* (LP's) en sp-sticky-footer* (productpagina) → seniorenbed-sticky-footer* Actief op LP V3, LP V4, product V2. Hub & advies: via CMS fragment. ================================ */ .seniorenbed-sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: #fff; border-top: 3px solid var(--color-accent); box-shadow: 0 -10px 30px rgba(61,40,45,.14); transform: translateY(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); } .seniorenbed-sticky-footer.is-visible { transform: translateY(0); } .seniorenbed-sticky-footer-inner { max-width: var(--content-width); margin: 0 auto; padding: 22px var(--page-inset); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .seniorenbed-sticky-footer-label { flex: 1 1 auto; margin: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1.4; color: rgba(61,40,45,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seniorenbed-sticky-footer-label strong { display: block; font-family: var(--font-minion-pro-medium); font-weight: 500; font-size: 17px; color: var(--color-ink); margin-bottom: 2px; } .seniorenbed-sticky-footer-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .seniorenbed-sticky-footer-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 4px; background: var(--color-link); color: #fff; font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(65,110,134,.25); transition: background .18s, transform .12s, box-shadow .18s; } .seniorenbed-sticky-footer-btn-primary:hover { background: var(--color-link-hover); box-shadow: 0 4px 14px rgba(65,110,134,.35); transform: translateY(-1px); } .seniorenbed-sticky-footer-btn-primary-icon { display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; flex-shrink: 0; } .seniorenbed-sticky-footer-btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 4px; border: 1px solid rgba(61,40,45,.25); color: var(--color-ink); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .18s, background .18s; } .seniorenbed-sticky-footer-btn-secondary:hover { border-color: var(--color-ink); background: rgba(61,40,45,.04); } .seniorenbed-sticky-footer-btn-phone { display: inline-flex; align-items: center; gap: 6px; padding: 11px 14px; border-radius: 4px; color: var(--color-link); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .18s; } .seniorenbed-sticky-footer-btn-phone:hover { color: var(--color-link-hover); } .seniorenbed-sticky-footer-btn-phone::before { content: ""; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23416e86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.55 10.59a19.79 19.79 0 01-3.07-8.67A2 2 0 012.48 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } /* ================================================ STICKY FOOTER — MOBIEL Op mobiel ALLEEN één grote brochure-aanvragen CTA. Phone, afspraak en label-tekst worden verborgen. ================================================ */ @media (max-width: 640px) { .seniorenbed-sticky-footer { border-top-width: 2px; } .seniorenbed-sticky-footer-inner { /* Inset schaalt mee met schermbreedte: - 320px scherm ≈ 19px inset - 450px scherm ≈ 27px inset - 640px scherm ≈ 38px inset (cap op 50px) */ padding: 22px clamp(16px, 6vw, 50px); gap: 0; } .seniorenbed-sticky-footer-label, .seniorenbed-sticky-footer-btn-phone, .seniorenbed-sticky-footer-btn-secondary { display: none; } .seniorenbed-sticky-footer-actions { width: 100%; gap: 0; } .seniorenbed-sticky-footer-btn-primary { width: 100%; justify-content: center; padding: 15px 18px; font-size: 16px; font-weight: 700; } .seniorenbed-sticky-footer-btn-primary-icon { width: 20px; height: 20px; } } /* ============================================= PRODUCT PAGINA V3 — seniorenbed-productpage-v3- Template voor alle individuele productpagina's. Gebaseerd op: seniorenbed product pagina V3.html Herbruikbaar door HTML te kopiëren en klassen te hernoemen (klassen staan hier centraal). ============================================= */ /* --- HERO: 2-koloms grid (galerij + aside) --- */ .seniorenbed-productpage-v3-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: start; } .seniorenbed-productpage-v3-title-mobile { display: block; margin-bottom: 16px; } .seniorenbed-productpage-v3-title-desktop { display: none; } @media (min-width: 768px) { .seniorenbed-productpage-v3-title-mobile { display: none; } .seniorenbed-productpage-v3-title-desktop { display: block; } } /* --- ASIDE --- */ .seniorenbed-productpage-v3-aside { display: flex; flex-direction: column; position: sticky; top: 24px; } .seniorenbed-productpage-v3-tagline { margin: 5px 0 18px; font-family: var(--font-sans); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.4; color: rgba(61,40,45,.65); } .seniorenbed-productpage-v3-divider { width: 100%; height: 1px; background: rgba(61,40,45,.10); margin: 18px 0; } /* Reviews trigger (aside) */ .seniorenbed-productpage-v3-stars { color: var(--color-accent); letter-spacing: 1px; font-size: 13px; } .seniorenbed-productpage-v3-score { font-weight: 700; font-size: 15px; color: var(--color-ink); } /* --- ASIDE USPs --- */ /* --- SECTIE DIVIDER (logo tussen secties) --- */ .seniorenbed-productpage-v3-section-divider { display: flex; align-items: center; gap: 18px; margin: 44px 0; } .seniorenbed-productpage-v3-section-divider-line { flex: 1; height: 1px; background: rgba(61,40,45,.13); } .seniorenbed-productpage-v3-section-divider-mark { width: 30px; height: 30px; opacity: .28; display: block; flex-shrink: 0; } /* --- VAKMANSCHAP / FAMILIEBEDRIJF SECTIE --- */ .seniorenbed-productpage-v3-vakmanschap { background: var(--color-sage-light); border-radius: 6px; padding: clamp(28px, 3.5vw, 40px); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); } .seniorenbed-productpage-v3-vakmanschap-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 40px); align-items: center; } .seniorenbed-productpage-v3-vakmanschap-intro { display: flex; flex-direction: column; } .seniorenbed-productpage-v3-vakmanschap-intro .seniorenbed-title-2 { margin-bottom: 8px; } .seniorenbed-productpage-v3-vakmanschap-image { position: relative; display: block; width: 100%; border-radius: 4px; overflow: hidden; } /* 3:2-hoogte via padding-hack i.p.v. aspect-ratio, zodat de fotobox ook op oudere iOS (< Safari 15, zonder aspect-ratio-support) niet inklapt. */ .seniorenbed-productpage-v3-vakmanschap-image::before { content: ""; display: block; padding-top: 66.667%; } .seniorenbed-productpage-v3-vakmanschap-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .seniorenbed-productpage-v3-vakmanschap-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); padding-top: clamp(20px, 2.5vw, 28px); border-top: 1px solid rgba(61,40,45,.14); } .seniorenbed-productpage-v3-vakmanschap-feature { display: flex; flex-direction: column; gap: 6px; } /* --- WIJSHEID: sticky tekst links, video rechts --- */ .seniorenbed-productpage-v3-wijsheid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 52px); align-items: start; } .seniorenbed-productpage-v3-wijsheid-left { position: sticky; top: 24px; display: flex; flex-direction: column; } .seniorenbed-productpage-v3-wijsheid-left .seniorenbed-title-2 { margin-bottom: 10px; } .seniorenbed-productpage-v3-wijsheid-right { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); } .seniorenbed-productpage-v3-wijsheid-contact { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(61,40,45,.12); } /* --- ANDERE BEDDEN: desktop = 3-koloms grid, mobiel = scroll-carousel --- */ .seniorenbed-productpage-v3-bedden-carousel-outer { overflow: hidden; } .seniorenbed-productpage-v3-bedden-carousel-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); } .seniorenbed-productpage-v3-bedden-carousel-track::-webkit-scrollbar { display: none; } .seniorenbed-productpage-v3-bedden-carousel-track:active { cursor: grabbing; } .seniorenbed-productpage-v3-bedden-carousel-track .seniorenbed-categorie-card-v2 { height: auto; min-height: 0; box-shadow: 0 2px 8px rgba(61,40,45,.06); } /* --- MOBILE: product pagina V3 --- */ @media (max-width: 767px) { .seniorenbed-productpage-v3-hero { display: block; } .seniorenbed-productpage-v3-aside { position: static; margin-top: 24px; } .seniorenbed-productpage-v3-wijsheid { display: flex; flex-direction: column; gap: 12px; } .seniorenbed-productpage-v3-wijsheid-left { position: static; display: contents; } .seniorenbed-productpage-v3-wijsheid-left .seniorenbed-title-2 { order: 1; margin-bottom: 0; } .seniorenbed-productpage-v3-wijsheid-right { order: 2; width: 100%; } .seniorenbed-productpage-v3-wijsheid-left .seniorenbed-text, .seniorenbed-productpage-v3-wijsheid-left .seniorenbed-links { order: 3; margin-top: 0 !important; } .seniorenbed-productpage-v3-wijsheid-contact { display: none; } .seniorenbed-productpage-v3-vakmanschap-header { grid-template-columns: 1fr; } .seniorenbed-productpage-v3-vakmanschap-image { order: -1; } .seniorenbed-productpage-v3-vakmanschap-features { grid-template-columns: 1fr; gap: 28px; } .seniorenbed-productpage-v3-bedden-carousel-outer { margin-right: calc(-1 * var(--page-inset)); } .seniorenbed-productpage-v3-bedden-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-right: var(--page-inset); cursor: grab; } .seniorenbed-productpage-v3-bedden-carousel-track .seniorenbed-categorie-card-v2 { flex: 0 0 clamp(260px, 80vw, 330px); scroll-snap-align: start; } } /* ============================================= EINDE PRODUCT PAGINA V3 ============================================= */ /* ================================ CARD MODIFIER: --geen-prijs Verbergt prijs-block in V2 categorie cards. Gebruik:

================================ */ .seniorenbed-categorie-card-v2--geen-prijs .seniorenbed-categorie-card-v2-price-block { display: none; } /* ================================ STATUS BANNER — gele waarschuwingsbalk bovenaan een PDP Gebruik via YAML: `status_label: "..."`. Template rendert dan bovenaan. Bedoeld voor concept-PDPs die nog niet voor live-gang klaar zijn. ================================ */ .seniorenbed-status-banner { background: var(--color-accent); color: var(--color-ink); font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.4; text-align: center; padding: 12px 20px; letter-spacing: .2px; } /* ================================ BUTTON RESET — voor button-as-inline-link Past op

Gids aanvragen

Bedankt! Uw gids is onderweg