toevoegen */
.wpcf7-form br { display: none; } /* CF7 kan
toevoegen */
.wpcf7-form-control-wrap { display: block; width: 100%; margin: 0; }
/* Inputs / selects / textareas — exact zelfde styling als pdh-form */
.wpcf7-form input.wpcf7-form-control[type="text"],
.wpcf7-form input.wpcf7-form-control[type="email"],
.wpcf7-form input.wpcf7-form-control[type="tel"],
.wpcf7-form input.wpcf7-form-control[type="url"],
.wpcf7-form input.wpcf7-form-control[type="number"],
.wpcf7-form input.wpcf7-form-control[type="date"],
.wpcf7-form select.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
display: block; width: 100%; max-width: 100%;
box-sizing: border-box;
height: 3rem; min-height: 3rem;
padding: 0 1.1rem;
border: 1px solid #e8ddd6;
border-radius: 0.6rem;
background: #fff;
font-family: 'Lato', sans-serif;
font-size: 0.95rem;
color: #3d2b22;
line-height: 1.4;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form select.wpcf7-form-control {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
cursor: pointer;
}
.wpcf7-form textarea.wpcf7-form-control {
height: auto; min-height: 7rem;
padding: 0.85rem 1rem;
line-height: 1.6;
white-space: normal; overflow: auto; resize: vertical;
}
.wpcf7-form .wpcf7-form-control:focus {
outline: none;
border-color: #bd7858;
box-shadow: 0 0 0 3px rgba(196, 137, 110, 0.18);
}
/* Acceptance (consent vinkje) — match .pdh-checkbox */
.pdh-cf7-consent { margin: 0; }
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-form-control-wrap[data-name="consent"] {
display: block;
width: 100%;
}
.wpcf7-form .wpcf7-list-item {
display: flex; align-items: flex-start;
gap: 0.75rem; margin: 0;
font-size: 0.92rem; line-height: 1.5; color: #3d2b22;
cursor: pointer; padding: 0.5rem 0;
}
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
width: 18px !important; height: 18px !important;
min-width: 18px;
margin: 0.15rem 0 0;
accent-color: #bd7858;
flex-shrink: 0;
cursor: pointer;
}
.wpcf7-form .wpcf7-list-item-label { flex: 1; min-width: 0; word-wrap: break-word; }
/* Submit-knop — krijgt al pdh-btn classes via shortcode */
.pdh-cf7-submit {
margin: 0.5rem 0 0;
display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
}
.wpcf7-form .wpcf7-submit { /* .pdh-btn class regelt alle styling */ }
/* Validatie en response */
.wpcf7-not-valid-tip {
color: #b54a2e !important;
font-size: 0.82rem;
margin-top: 0.35rem;
line-height: 1.4;
}
.wpcf7-form-control.wpcf7-not-valid {
border-color: #b54a2e !important;
}
.wpcf7-response-output {
margin: 1rem 0 0 !important;
padding: 0.85rem 1rem !important;
border: 1px solid #e8ddd6 !important;
border-radius: 0.6rem !important;
font-size: 0.9rem;
line-height: 1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border-color: rgba(181, 74, 46, 0.4) !important;
background: rgba(181, 74, 46, 0.05) !important;
color: #b54a2e;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: rgba(45, 122, 77, 0.4) !important;
background: rgba(45, 122, 77, 0.05) !important;
color: #2d7a4d;
}
.wpcf7-spinner {
background-color: #bd7858 !important;
width: 16px !important; height: 16px !important;
margin: 0 0 0 0.75rem !important;
}
/* Verberg CF7's standaard success-melding (onze JS redirect naar /bedankt/ doet de rest) */
.wpcf7 form.sent .wpcf7-response-output {
display: none !important;
}
/* ─────────────────────────────────────────────────────────
BOOKING WIZARD — 4 stappen met progress-stepper
───────────────────────────────────────────────────────── */
.pdh-booking {
max-width: 1600px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--pdh-linen);
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 30px 60px -40px rgba(61, 43, 34, 0.18);
}
/* Stepper — wit, géén scheidingslijn eronder (het ontwerp heeft die niet;
alleen de connector-lijntjes tússen de stappen, via ::after). */
.pdh-stepper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 1.85rem 2rem 2rem;
background: #fff;
position: relative;
}
.pdh-stepper__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
color: var(--pdh-cocoa);
transition: color .3s ease;
}
.pdh-stepper__item::after {
content: "";
position: absolute;
left: 60%; right: -40%;
top: 18px;
height: 2px;
background: var(--pdh-linen);
z-index: 0;
}
.pdh-stepper__item:last-child::after { display: none; }
.pdh-stepper__item.is-done::after,
.pdh-stepper__item.is-active::after { background: var(--pdh-peach); }
.pdh-stepper__circle {
width: 36px; height: 36px;
border-radius: 999px;
background: #fff;
border: 2px solid var(--pdh-linen);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--pdh-font-serif);
font-size: 1rem;
color: var(--pdh-cocoa);
font-weight: 500;
position: relative; z-index: 1;
transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.pdh-stepper__item.is-active .pdh-stepper__circle {
background: var(--pdh-bark);
border-color: var(--pdh-bark);
color: var(--pdh-cream);
transform: scale(1.05);
}
.pdh-stepper__item.is-done .pdh-stepper__circle {
background: var(--pdh-peach);
border-color: var(--pdh-peach);
color: #fff;
}
.pdh-stepper__item.is-active { color: var(--pdh-bark); }
.pdh-stepper__item.is-done { color: var(--pdh-peach); }
.pdh-stepper__label {
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
}
@media (max-width: 600px) {
.pdh-stepper { padding: 1rem 0.75rem 0.85rem; }
.pdh-stepper__circle { width: 30px; height: 30px; font-size: 0.85rem; }
.pdh-stepper__label { font-size: 0.65rem; letter-spacing: 0.08em; }
.pdh-stepper__item::after { top: 15px; }
}
/* Step body — extra top-padding zodat er ademruimte is na de stepper-streep */
.pdh-booking__body { padding: 2.25rem 1.75rem 1.75rem; background: #fff; }
@media (min-width: 768px) { .pdh-booking__body { padding: 2.75rem 2.5rem 2.25rem; } }
@media (min-width: 1100px) { .pdh-booking__body { padding: 3rem 3.5rem 2.5rem; } }
.pdh-booking__step { display: none; animation: pdhFadeIn .35s ease; background: #fff; }
.pdh-booking__step.is-current { display: block; }
/* Wizard formulier: ruimte tussen velden. `gap` werkt niet op een block-form,
dus expliciete verticale margins tussen de rijen en de losse velden. */
.pdh-booking .pdh-form { max-width: none; }
.pdh-booking .pdh-form-row { gap: 1.5rem; margin-bottom: 1.75rem; }
.pdh-booking .pdh-form-row:last-of-type { margin-bottom: 0; }
.pdh-booking .pdh-form > label:not(.pdh-checkbox) { display: block; margin-top: 1.75rem; margin-bottom: 0; }
@media (max-width: 720px) {
.pdh-booking .pdh-form-row { grid-template-columns: 1fr; gap: 1.25rem; }
}
.pdh-booking .pdh-form .pdh-checkbox { padding: 0.85rem 0 0.5rem; margin: 0; }
.pdh-booking__step h3 {
margin: 0 0 0.5rem;
font-family: var(--pdh-font-serif);
font-size: 1.5rem;
color: var(--pdh-bark);
font-weight: 400;
}
.pdh-booking__lead {
color: var(--pdh-cocoa);
margin: 0 0 1.5rem;
font-size: 0.95rem;
}
.pdh-booking__chosen {
background: var(--pdh-shell);
padding: 0.85rem 1.1rem;
border-radius: 0.6rem;
color: var(--pdh-bark);
margin-bottom: 1.5rem;
font-size: 0.95rem;
border-left: 3px solid var(--pdh-peach);
}
.pdh-booking__nav {
margin-top: 2rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
/* Back-knop = ghost-knop met dezelfde box als .pdh-btn → gelijke hoogte als de
submit-knop. Ontwerp: bordered, afgerond, transparant. */
.pdh-booking__back {
display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
padding: 0.85rem 1.6rem;
border: 1px solid rgba(59, 42, 30, 0.28);
border-radius: 9999px;
background: transparent;
color: var(--pdh-bark);
font-family: 'Lato', system-ui, sans-serif;
font-size: 0.95rem; font-weight: 500; line-height: 1.4;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pdh-booking__back:hover { background: #f5ede4; color: var(--pdh-bark); border-color: rgba(59, 42, 30, 0.4); }
@keyframes pdhFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Calendar inside wizard — witte achtergrond voor zuivere look + volledige breedte */
/* Kalender — géén kader/achtergrond (ontwerp: bare grid), gecentreerd op 780px. */
.pdh-cal {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
width: 100%;
max-width: 780px;
margin: 0 auto;
box-sizing: border-box;
}
.pdh-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.pdh-cal__head button {
background: #fff; border: 1px solid var(--pdh-linen); border-radius: 999px;
/* max(44px, ...) houdt het raakvlak op de norm; de rem-maat schaalt mee
met de vloeiende basis-fontgrootte en zakte anders naar 35px. */
width: max(44px, 2.4rem); height: max(44px, 2.4rem); cursor: pointer; color: var(--pdh-bark);
transition: background .2s ease, border-color .2s ease;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.pdh-cal__head button:disabled { opacity: .35; cursor: not-allowed; }
.pdh-cal__head button:hover:not(:disabled) { background: var(--pdh-bark); color: var(--pdh-cream); border-color: var(--pdh-bark); }
.pdh-cal__title { font-family: var(--pdh-font-serif); font-size: 1.35rem; color: var(--pdh-bark); }
.pdh-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pdh-cal__weekday { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; color: var(--pdh-cocoa); padding: .5rem 0; }
.pdh-cal__day {
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: .65rem;
font-size: 1rem;
cursor: default;
transition: all .2s ease;
position: relative;
/* Niet-beschikbaar: gedempt, doorgekruist gevoel */
color: rgba(128, 96, 77, 0.35);
background: transparent;
text-decoration: line-through;
text-decoration-color: rgba(128, 96, 77, 0.2);
}
.pdh-cal__day.is-available {
background: #fff;
color: var(--pdh-bark);
cursor: pointer;
border-color: var(--pdh-peach);
font-weight: 600;
text-decoration: none;
box-shadow: 0 1px 0 rgba(196, 137, 110, 0.15);
}
.pdh-cal__day.is-available::after {
content: "";
position: absolute;
bottom: 6px;
left: 50%; transform: translateX(-50%);
width: 4px; height: 4px;
border-radius: 999px;
background: var(--pdh-peach);
}
.pdh-cal__day.is-available:hover {
background: var(--pdh-sand);
border-color: var(--pdh-bark);
transform: translateY(-1px);
}
.pdh-cal__day.is-selected,
.pdh-cal__day.is-available.is-selected {
background: var(--pdh-bark) !important;
color: var(--pdh-cream) !important;
border-color: var(--pdh-bark) !important;
box-shadow: 0 6px 14px -8px rgba(61,43,34,0.5);
text-decoration: none;
}
.pdh-cal__day.is-selected::after { background: var(--pdh-cream); }
.pdh-cal__day.is-empty { visibility: hidden; }
/* Legenda onder kalender — leg uit wat de stippen betekenen */
.pdh-cal__legend {
display: flex; flex-wrap: wrap; gap: 1rem;
margin-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--pdh-linen);
font-size: max(13px, 0.82rem); color: var(--pdh-cocoa);
}
.pdh-cal__legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.pdh-cal__legend-dot {
display: inline-block; width: 0.65rem; height: 0.65rem;
border-radius: 999px; background: var(--pdh-peach);
}
.pdh-cal__legend-dot--unavailable { background: rgba(128, 96, 77, 0.25); }
/* Time slots — gecentreerd (flex wrap, justify-center), zoals het ontwerp */
.pdh-slots__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
max-width: 780px;
margin: 0 auto;
}
/* Stap-3 formulier ook op 780px gecentreerd (ontwerp: .bform max-width:780px) */
form.pdh-booking__step { max-width: 780px; margin-left: auto; margin-right: auto; }
.pdh-slot-btn {
background: #fff;
border: 1px solid var(--pdh-linen);
border-radius: 0.75rem;
min-width: 120px;
text-align: center;
padding: 0.85rem 1rem;
cursor: pointer;
font-size: 1rem;
color: var(--pdh-bark);
font-family: var(--pdh-font-sans);
font-weight: 500;
transition: all .2s ease;
}
.pdh-slot-btn:hover {
border-color: var(--pdh-peach);
transform: translateY(-1px);
box-shadow: 0 4px 10px -6px rgba(196,137,110,0.5);
}
.pdh-slot-btn.is-selected {
background: var(--pdh-bark);
color: var(--pdh-cream);
border-color: var(--pdh-bark);
}
/* Thanks step */
.pdh-booking__thanks-icon {
width: 64px; height: 64px;
border-radius: 999px;
background: var(--pdh-peach);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 2rem;
margin-bottom: 1rem;
}
.pdh-booking__summary {
background: var(--pdh-shell);
padding: 1rem 1.25rem;
border-radius: 0.75rem;
margin-top: 1rem;
color: var(--pdh-bark);
font-family: var(--pdh-font-serif);
font-size: 1.15rem;
}
.pdh-footer {
background: var(--pdh-shell); padding: 4rem 2rem 2rem;
color: var(--pdh-cocoa); font-family: var(--pdh-font-sans);
}
.pdh-footer__cta { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
.pdh-footer__cta h2 { font-family: var(--pdh-font-serif); font-size: 2.25rem; color: var(--pdh-bark); margin: 0 0 1rem; }
.pdh-footer__cols {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem; max-width: 1100px; margin: 0 auto;
}
.pdh-footer__cols h4 { font-family: var(--pdh-font-serif); color: var(--pdh-bark); margin: 0 0 1rem; }
.pdh-footer__cols a { color: var(--pdh-bark); text-decoration: none; }
.pdh-footer__cols a:hover { color: var(--pdh-peach); }
.pdh-footer__cols ul { list-style: none; padding: 0; margin: 0; }
.pdh-footer__cols ul li { margin-bottom: .5rem; }
.pdh-footer__legal {
margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--pdh-linen);
text-align: center; font-size: .85rem;
}
.pdh-contact-details > div { margin-bottom: 1.25rem; }
.pdh-contact-details strong { color: var(--pdh-bark); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
.pdh-contact-details a { color: var(--pdh-peach); }
.pdh-legal h2 { font-family: var(--pdh-font-serif); margin-top: 2rem; color: var(--pdh-bark); }
.pdh-legal p { color: var(--pdh-cocoa); }
/* ═════════════════════════════════════════════════════════════════════
VUE-DESIGN PARITY LAYER
Brengt de WordPress-plugin in lijn met de Vue (Statamic) site:
gelijke spacing, gelijke typografie-schaal, gelijke blokken/varianten.
Deze sectie staat onderaan en wint via de cascade van eerdere regels.
═════════════════════════════════════════════════════════════════════ */
/* — Tokens (semantische aliases bovenop de bestaande --pdh-* tokens) — */
:root {
--pdh-bg: #fdfaf7;
--pdh-bg-soft: #f9f5f2;
--pdh-bg-warm: #f5ede4;
--pdh-surface: #ffffff;
--pdh-ink: #3d2b22;
--pdh-muted: #75543f;
--pdh-accent: #bd7858;
--pdh-accent-soft: #cf9e8c;
--pdh-line: #e8ddd6;
--pdh-radius-md: 0.75rem;
--pdh-radius-lg: 1.25rem;
--pdh-radius-xl: 2rem;
--pdh-radius-pill: 9999px;
--pdh-shadow-soft: 0 1px 2px rgba(61, 43, 34, 0.04), 0 8px 24px -12px rgba(61, 43, 34, 0.10);
--pdh-shadow-card: 0 1px 2px rgba(61, 43, 34, 0.05), 0 20px 40px -24px rgba(61, 43, 34, 0.18);
--pdh-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* — Container: 80rem (1280px), matcht Elementor section content_width.
Genoeg ruimte voor rij-layouts maar smal genoeg voor leesbare prose. — */
.pdh-container,
.pdh-cta-wrap {
width: 100%;
max-width: 80rem;
margin-inline: auto;
padding-inline: 1.25rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
.pdh-container,
.pdh-cta-wrap { padding-inline: 2rem; }
}
@media (min-width: 1280px) {
.pdh-container,
.pdh-cta-wrap { padding-inline: 3rem; }
}
/* — Section rhythm: matcht Vue .section / .section-tight — */
.pdh-section { padding-top: 5rem; padding-bottom: 5rem; }
.pdh-section-tight { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) {
.pdh-section { padding-top: 7rem; padding-bottom: 7rem; }
.pdh-section-tight { padding-top: 5rem; padding-bottom: 5rem; }
}
@media (min-width: 1280px) {
.pdh-section { padding-top: 9rem; padding-bottom: 9rem; }
}
/* ═══════════ HERO — arch-wrap + floating badge + arrow-link ═══════════ */
.pdh-hero__inner {
/* 7/5 ratio matchend Vue grid (lg:col-span-7 / lg:col-span-5) */
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 2.5rem;
align-items: center;
}
@media (min-width: 1024px) { .pdh-hero__inner { gap: 3.5rem; } }
@media (max-width: 900px) { .pdh-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; } }
.pdh-hero__sub {
margin-top: 1.75rem;
margin-bottom: 0;
font-size: 1.125rem;
line-height: 1.7;
max-width: 36rem;
}
.pdh-hero__buttons {
margin-top: 2.5rem;
gap: 1rem 1.25rem;
}
/* Visual wrap — anker voor floating badge */
.pdh-hero__visual { width: 100%; }
.pdh-hero__arch-wrap {
position: relative;
width: 100%;
max-width: 28rem;
margin: 0 auto;
}
.pdh-hero .pdh-arch { margin: 0 auto; }
/* Floating badge — exact pendant van de Vue hero badge (links onder de boog) */
.pdh-hero__badge {
position: absolute;
bottom: -1.5rem;
left: -1.5rem;
display: flex;
align-items: flex-start;
gap: 0.85rem;
max-width: 14rem;
padding: 1rem 1.1rem;
background: var(--pdh-cream, #fdfaf7);
border: 1px solid var(--pdh-line);
border-radius: 1rem;
box-shadow: 0 20px 40px -24px rgba(61, 43, 34, 0.25);
z-index: 3;
}
@media (min-width: 768px) {
.pdh-hero__badge { left: -2.5rem; padding: 1.15rem 1.25rem; }
}
@media (max-width: 600px) {
.pdh-hero__badge { left: 0.75rem; bottom: -1rem; max-width: 13rem; padding: 0.85rem 1rem; }
}
.pdh-hero__badge-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: var(--pdh-bg-warm);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--pdh-peach);
}
.pdh-hero__badge-icon svg { width: 1rem; height: 1rem; }
.pdh-hero__badge-body { min-width: 0; }
.pdh-hero__badge-title {
font-family: var(--pdh-font-serif);
font-weight: 500;
font-size: 1.05rem;
line-height: 1.2;
color: var(--pdh-bark);
}
.pdh-hero__badge-text {
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1.4;
color: rgba(128, 96, 77, 0.9);
}
/* ═══════════ ARROW-LINK — subtiele tekst-link met onderstreping en pijl ═══════════ */
.pdh-arrow-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--pdh-bark) !important;
font-family: var(--pdh-font-sans);
font-size: 0.95rem;
font-weight: 500;
text-decoration: none !important;
border: 0 !important;
padding-bottom: 2px;
border-bottom: 1px solid rgba(61, 43, 34, 0.3) !important;
transition: color .25s var(--pdh-ease-soft), border-color .25s var(--pdh-ease-soft);
line-height: 1.3;
}
.pdh-arrow-link:hover {
color: var(--pdh-peach) !important;
border-bottom-color: var(--pdh-peach) !important;
}
.pdh-arrow-link__arrow {
display: inline-block;
transition: transform .3s var(--pdh-ease-soft);
}
.pdh-arrow-link:hover .pdh-arrow-link__arrow { transform: translateX(4px); }
/* ═══════════ BUTTON-VARIANT — accent (peach vulling, voor donkere CTA) ═══════════ */
.pdh-btn--accent,
a.pdh-btn--accent,
.elementor-button.pdh-style-accent {
background-color: var(--pdh-peach) !important;
color: #ffffff !important;
border-color: var(--pdh-peach) !important;
}
.pdh-btn--accent:hover,
a.pdh-btn--accent:hover,
.elementor-button.pdh-style-accent:hover {
background-color: #b3795f !important; /* peach × bark mix */
border-color: #b3795f !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 8px 18px -10px rgba(61, 43, 34, 0.4);
}
/* ═══════════ SECTION-HEADING — split-prose met linker rand (matcht Vue intro) ═══════════ */
.pdh-section-heading--split-prose {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 2.5rem;
align-items: start;
}
@media (min-width: 1024px) { .pdh-section-heading--split-prose { gap: 4rem; } }
@media (max-width: 900px) { .pdh-section-heading--split-prose { grid-template-columns: 1fr; gap: 1.5rem; } }
.pdh-section-heading--split-prose .pdh-section-heading__col--prose {
padding-left: 2rem;
border-left: 1px solid var(--pdh-line);
}
@media (max-width: 900px) {
.pdh-section-heading--split-prose .pdh-section-heading__col--prose {
padding-left: 0;
border-left: 0;
padding-top: 1rem;
}
}
.pdh-section-heading--split-prose .pdh-section-heading__intro {
font-size: 1.05rem;
line-height: 1.85;
color: rgba(61, 43, 34, 0.86);
max-width: none;
}
/* Vergroot hoofdtitel naar Vue serif-h1 (clamp 2.25 → 3.75rem) — visueel ruimer */
.pdh-section-heading__title {
font-size: clamp(2rem, 3.6vw + 1rem, 3.25rem) !important;
line-height: 1.1 !important;
}
.pdh-section-heading--centered .pdh-section-heading__title {
font-size: clamp(1.85rem, 3vw + 0.8rem, 2.85rem) !important;
}
/* Eyebrow gap fix — match Vue eyebrow met streep + tekst */
.pdh-section-heading__eyebrow,
.pdh-cta__eyebrow,
.pdh-404__eyebrow {
color: var(--pdh-cocoa);
}
.pdh-section-heading__eyebrow::before,
.pdh-cta__eyebrow::before,
.pdh-404__eyebrow::before { width: 1.75rem; }
/* ═══════════ CTA-BLOK — full-width met 2-koloms grid, tone-varianten ═══════════ */
.pdh-cta-wrap {
/* container met 72rem max — matcht Vue container-prose */
margin-block: 0;
}
.pdh-cta {
position: relative;
overflow: hidden;
border-radius: 2rem;
padding: 4rem 2rem;
margin: 0;
max-width: none;
text-align: left;
background: var(--pdh-bg-warm);
}
@media (min-width: 768px) {
.pdh-cta {
border-radius: 3rem;
padding: 5rem 4rem;
}
}
@media (min-width: 1024px) {
.pdh-cta { padding: 5rem 5rem; }
}
.pdh-cta--cream { background: var(--pdh-bg-soft); }
.pdh-cta--sand { background: var(--pdh-bg-warm); }
.pdh-cta--bark { background: var(--pdh-bark); color: var(--pdh-cream); }
.pdh-cta--bark .pdh-cta__heading,
.pdh-cta--bark .pdh-cta__text,
.pdh-cta--bark .pdh-cta__eyebrow { color: var(--pdh-cream) !important; }
.pdh-cta--bark .pdh-cta__heading em { color: var(--pdh-peach); }
.pdh-cta--bark .pdh-cta__text { color: rgba(253, 250, 247, 0.8) !important; }
/* Decoratieve blob op de CTA — alleen zichtbaar bij sand/cream */
.pdh-cta__blob {
position: absolute;
top: -80px;
right: -80px;
width: 360px;
height: 360px;
border-radius: 50%;
background: var(--pdh-accent-soft);
opacity: 0.4;
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.pdh-cta--bark .pdh-cta__blob { background: var(--pdh-peach); opacity: 0.25; }
/* 2-koloms grid binnen de CTA */
.pdh-cta__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 768px) {
.pdh-cta__grid {
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
gap: 2.5rem;
}
}
.pdh-cta__copy { min-width: 0; }
.pdh-cta__eyebrow {
margin-bottom: 1.25rem;
justify-content: flex-start;
}
.pdh-cta__heading {
font-size: clamp(2rem, 3.2vw + 0.8rem, 3rem) !important;
line-height: 1.1 !important;
margin: 0 !important;
max-width: 32rem;
}
.pdh-cta__text {
margin-top: 1.5rem !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 30rem;
font-size: 1.125rem;
line-height: 1.7;
}
.pdh-cta__action {
display: flex;
justify-content: flex-start;
}
@media (min-width: 768px) {
.pdh-cta__action { justify-content: flex-end; }
}
/* ═══════════ QUOTE-BLOK — ruimere padding, grotere quote-mark, peach lijn ═══════════ */
.pdh-quote-block {
max-width: none;
padding: 4rem 2rem;
border-radius: 2rem;
}
@media (min-width: 768px) {
.pdh-quote-block {
padding: 6rem 5rem;
border-radius: 3rem;
}
}
.pdh-quote-block__mark {
top: -1.5rem;
left: 2rem;
font-size: clamp(6rem, 12vw, 11rem);
line-height: 1;
color: rgba(196, 137, 110, 0.7);
}
@media (min-width: 768px) {
.pdh-quote-block__mark { top: -1.5rem; left: 4rem; }
}
.pdh-quote-block blockquote p {
font-size: clamp(1.25rem, 1.8vw + 0.6rem, 2rem);
line-height: 1.35;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
/* ═══════════ REVIEWS — SVG-sterren, ruimere card-padding ═══════════ */
.pdh-stars {
display: inline-flex;
align-items: center;
gap: 0.125rem;
color: var(--pdh-peach);
margin-bottom: 1rem;
letter-spacing: 0;
}
.pdh-stars__star { width: 1rem; height: 1rem; display: inline-block; }
.pdh-review-card { padding: 2rem; }
.pdh-review-card__quote {
font-size: 1.1rem;
line-height: 1.55;
}
.pdh-review-card__caption { margin-top: 1.5rem; padding-top: 1rem; }
/* ═══════════ AANBOD-CARD — desktop padding bump naar 2rem (matcht Vue md:p-8) ═══════════ */
@media (min-width: 768px) {
.pdh-aanbod-card:not(.pdh-aanbod-grid--list .pdh-aanbod-card) { padding: 2rem; }
}
.pdh-aanbod-grid { gap: 1.5rem; }
@media (min-width: 768px) {
.pdh-aanbod-grid--grid { gap: 1.75rem; }
}
/* ═══════════ HERO — wat ademruimte tussen subtitel en knoppen ═══════════ */
.pdh-hero__headline {
margin-bottom: 0 !important;
}
.pdh-hero__copy > * + * { margin-top: 0; } /* reset cascade impact */
/* ═══════════ ALGEMENE PROSE — gelijk aan Vue .prose-warm voor losse content ═══════════ */
.pdh-prose-warm {
color: rgba(61, 43, 34, 0.86);
font-size: 1.05rem;
line-height: 1.85;
}
.pdh-prose-warm p { margin-block: 1rem; }
.pdh-prose-warm h2,
.pdh-prose-warm h3 {
font-family: var(--pdh-font-serif);
color: var(--pdh-bark);
font-weight: 400;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.pdh-prose-warm h3 { font-weight: 500; margin-top: 2rem; margin-bottom: 0.75rem; }
.pdh-prose-warm ul { list-style: none; padding: 0; margin-block: 1.25rem; }
.pdh-prose-warm ul li {
position: relative;
padding-left: 1.5rem;
margin-block: 0.4rem;
}
.pdh-prose-warm ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.7rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: var(--pdh-peach);
}
.pdh-prose-warm blockquote {
border-left: 2px solid var(--pdh-peach);
padding-left: 1.5rem;
font-family: var(--pdh-font-serif);
font-style: italic;
color: var(--pdh-bark);
font-size: 1.2rem;
line-height: 1.5;
margin-block: 2rem;
}
/* ═════════════════════════════════════════════════════════════════════
POLISH-LAYER (footer, intro, aanbod single, contact, booking, map)
═════════════════════════════════════════════════════════════════════ */
/* ── Footer: rustiger ritme, duidelijke verhoudingen tussen kolommen,
h4-labels, hr-lijn en legal-strip. Logische ademruimte. ────── */
.pdh-footer {
background: var(--pdh-shell);
padding: 0;
margin-top: 4rem;
}
@media (min-width: 768px) { .pdh-footer { margin-top: 6rem; } }
.pdh-footer__divider { display: none !important; }
.pdh-footer__main {
max-width: 72rem;
margin: 0 auto;
padding: 3.5rem 1.25rem 2.5rem !important;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem !important;
text-align: center;
align-items: start;
}
@media (min-width: 768px) {
.pdh-footer__main {
padding: 4.5rem 2rem 2.5rem !important;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem !important;
text-align: left;
}
}
@media (min-width: 1024px) {
.pdh-footer__main {
padding: 5rem 3rem 3rem !important;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
gap: 3.5rem !important;
}
}
.pdh-footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.pdh-footer__brand > * { margin: 0; }
.pdh-footer__tagline {
font-size: 0.78rem !important;
text-transform: uppercase;
letter-spacing: 0.2em !important;
color: var(--pdh-cocoa) !important;
margin: 0 !important;
}
.pdh-footer__bio {
font-size: 0.92rem !important;
line-height: 1.7 !important;
color: var(--pdh-cocoa) !important;
max-width: 24rem;
margin: 0 !important;
}
.pdh-footer__col h4 {
font-family: var(--pdh-font-sans) !important;
font-weight: 600 !important;
font-size: 0.72rem !important;
text-transform: uppercase;
letter-spacing: 0.24em !important;
color: var(--pdh-cocoa) !important;
margin: 0 0 1.25rem !important;
}
.pdh-footer__col ul { gap: 0.6rem !important; }
.pdh-footer__col a { font-size: 0.92rem; transition: color .2s ease; }
.pdh-footer__col dl { gap: 0.65rem !important; font-size: 0.92rem; }
.pdh-footer__col dd { line-height: 1.6; }
/* Social-rij ONDER het e-mailadres, exact zoals gevraagd */
.pdh-footer__social-row {
display: flex;
gap: 0.5rem;
align-items: center;
margin: 0.25rem 0 0.5rem !important;
padding: 0;
}
@media (max-width: 767px) { .pdh-footer__social-row { justify-content: center; } }
.pdh-footer__social-row .pdh-social-btn {
width: 2.2rem; height: 2.2rem;
}
/* hr-lijn: ruime ademruimte boven en onder de legal-strip */
.pdh-footer__hr {
height: 1px;
background: rgba(232, 221, 214, 0.85);
max-width: 72rem;
margin: 0 auto !important;
border: 0;
display: block;
}
.pdh-footer__legal {
max-width: 72rem;
margin: 0 auto !important;
padding: 1.5rem 1.25rem 1.75rem !important;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1.5rem;
font-size: 0.78rem;
color: var(--pdh-cocoa);
}
@media (min-width: 768px) {
.pdh-footer__legal { padding: 1.75rem 2rem 2rem !important; }
}
@media (min-width: 1024px) {
.pdh-footer__legal { padding: 1.75rem 3rem 2rem !important; }
}
@media (max-width: 700px) {
.pdh-footer__legal {
flex-direction: column;
text-align: center;
}
}
/* ── Intro-blok op de homepagina: warmer canvas, ademruimte, duidelijke
relatie tussen titel en prose. ─────────────────────────────── */
.pdh-intro-block {
position: relative;
padding: 4rem 1.5rem;
border-radius: 2rem;
background: var(--pdh-bg-soft);
overflow: hidden;
}
@media (min-width: 768px) {
.pdh-intro-block { padding: 5.5rem 4rem; border-radius: 3rem; }
}
.pdh-intro-block::after {
content: "";
position: absolute;
bottom: -120px;
left: -120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: var(--pdh-sand);
opacity: 0.55;
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.pdh-intro-block > * { position: relative; z-index: 1; }
/* ── Aanbod single: nettere rhytme, gecentreerde sticky-sidebar look,
duidelijke section-grenzen. ────────────────────────────────── */
.pdh-back-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--pdh-cocoa);
margin-bottom: 1.25rem;
}
.pdh-back-link::before {
content: "";
width: 1.5rem;
height: 1px;
background: var(--pdh-peach);
display: inline-block;
}
.pdh-aanbod-single__tagline {
font-family: var(--pdh-font-serif);
font-style: italic;
color: var(--pdh-peach);
font-size: 1.35rem !important;
line-height: 1.45 !important;
margin: 0.5rem 0 1.5rem !important;
}
.pdh-aanbod-single__summary {
color: var(--pdh-muted);
font-size: 1.125rem !important;
line-height: 1.7 !important;
max-width: 36rem;
margin: 0 0 2rem !important;
}
/* Aanbod-sidebar: lichte shell-achtergrond, ruime padding, sticky op desktop */
.pdh-aanbod-sidebar {
background: var(--pdh-bg-soft);
border: 1px solid var(--pdh-line);
border-radius: 1.5rem;
padding: 2rem !important;
}
@media (min-width: 1024px) {
.pdh-aanbod-sidebar {
position: sticky;
top: 112px; /* slanke header (~92px) + ademruimte */
}
}
.pdh-aanbod-sidebar__row {
padding: 1rem 0 !important;
border-bottom: 1px solid var(--pdh-line);
}
.pdh-aanbod-sidebar__row:last-child { border-bottom: none; padding-bottom: 0 !important; }
.pdh-aanbod-sidebar__row:first-child { padding-top: 0.25rem !important; }
.pdh-aanbod-sidebar__label {
font-size: 0.7rem !important;
letter-spacing: 0.22em !important;
}
.pdh-aanbod-sidebar__value {
font-size: 1.6rem !important;
color: var(--pdh-bark);
}
.pdh-aanbod-sidebar__text {
font-size: 0.95rem !important;
line-height: 1.65 !important;
color: var(--pdh-bark);
}
/* Features (check-lijst) — rustiger ritme, peach-stip in plaats van check-emoji */
.pdh-features {
grid-template-columns: 1fr !important;
gap: 0 !important;
max-width: 38rem;
}
@media (min-width: 768px) {
.pdh-features { grid-template-columns: repeat(2, 1fr) !important; gap: 0 2.5rem !important; }
}
.pdh-features__item {
padding: 0.85rem 0 !important;
gap: 0.85rem !important;
line-height: 1.65 !important;
border-bottom: 1px solid var(--pdh-line) !important;
}
.pdh-features__check {
width: 1.5rem !important;
height: 1.5rem !important;
background: var(--pdh-sand) !important;
color: var(--pdh-peach) !important;
font-size: 0.85rem !important;
flex-shrink: 0;
margin-top: 0.25rem;
}
/* ── Contact: meeting-options krijgen meer ademruimte ──────────── */
.pdh-meeting-options {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.pdh-meeting-options { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
.pdh-meeting-card {
background: var(--pdh-surface);
border: 1px solid var(--pdh-line);
border-radius: 1.25rem;
padding: 1.75rem;
transition: transform .35s var(--pdh-ease-soft), box-shadow .35s var(--pdh-ease-soft), border-color .35s var(--pdh-ease-soft);
}
.pdh-meeting-card:hover {
transform: translateY(-2px);
border-color: var(--pdh-accent-soft);
box-shadow: var(--pdh-shadow-card);
}
.pdh-meeting-card h3 {
margin: 0 0 0.5rem !important;
font-family: var(--pdh-font-serif);
font-weight: 500;
font-size: 1.35rem;
color: var(--pdh-bark);
}
.pdh-meeting-card p {
margin: 0;
color: var(--pdh-muted);
font-size: 0.95rem;
line-height: 1.7;
}
/* Contact details (e-mail / telefoon / locatie) — leesbaarder spacing */
.pdh-contact-details > div {
margin: 0 0 1.25rem !important;
line-height: 1.65;
}
.pdh-contact-details strong {
display: block;
font-size: 0.72rem !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
color: var(--pdh-cocoa);
margin-bottom: 0.35rem;
font-weight: 600;
}
.pdh-contact-details a {
color: var(--pdh-bark);
border-bottom: 1px solid rgba(196, 137, 110, 0.4);
transition: color .2s ease, border-color .2s ease;
}
.pdh-contact-details a:hover {
color: var(--pdh-peach);
border-bottom-color: var(--pdh-peach);
}
/* ── Google Maps embed ─────────────────────────────────────────── */
.pdh-map {
width: 100%;
margin: 0;
overflow: hidden;
background: var(--pdh-bg-soft);
}
.pdh-map.pdh-map--rounded {
border-radius: 1.25rem;
border: 1px solid var(--pdh-line);
}
.pdh-map iframe {
width: 100% !important;
display: block;
border: 0;
}
/* ── Booking wizard polish ─────────────────────────────────────── */
.pdh-booking {
max-width: 1100px !important; /* afspraak-redesign: brede kaart (ontwerp ~1060px) */
margin: 0 auto;
border-radius: 1.75rem !important;
box-shadow: 0 30px 60px -40px rgba(61, 43, 34, 0.18);
}
@media (max-width: 600px) {
.pdh-booking { border-radius: 1.25rem !important; }
}
.pdh-stepper {
padding: 2rem 2rem 2.5rem !important;
}
@media (max-width: 600px) {
.pdh-stepper { padding: 1.25rem 0.75rem 1.5rem !important; }
}
.pdh-booking__body {
padding: 2.5rem 1.75rem !important;
}
@media (min-width: 768px) {
.pdh-booking__body { padding: 3rem 2.5rem !important; }
}
@media (min-width: 1100px) {
.pdh-booking__body { padding: 3.5rem 3.5rem !important; }
}
.pdh-booking__step h3 {
font-size: 1.65rem !important;
margin-bottom: 0.75rem !important;
}
.pdh-booking__lead {
margin-bottom: 1.75rem !important;
line-height: 1.65;
}
.pdh-booking__chosen {
padding: 1rem 1.25rem !important;
border-radius: 0.75rem !important;
background: var(--pdh-bg-warm) !important;
border-left-width: 3px !important;
}
/* Calendar — bare grid zonder kader/padding (ontwerp), gecentreerd op 780px. */
.pdh-cal { padding: 0 !important; border: none !important; background: transparent !important; border-radius: 0 !important; max-width: 780px; margin: 0 auto; }
.pdh-cal__title {
font-size: 1.4rem !important;
letter-spacing: -0.005em;
}
.pdh-cal__grid { gap: 6px !important; }
.pdh-cal__day {
font-size: 0.95rem;
border-radius: 0.75rem !important;
}
.pdh-cal__day.is-available:hover {
background: var(--pdh-bg-warm);
border-color: var(--pdh-peach);
color: var(--pdh-bark);
}
.pdh-cal__day.is-selected {
background: var(--pdh-bark);
color: var(--pdh-cream);
border-color: var(--pdh-bark);
}
/* Slots: nettere grid, betere wrap op mobiel */
.pdh-slots__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
gap: 0.75rem !important;
margin-top: 0.5rem;
}
@media (max-width: 600px) {
/* minmax(0,1fr) + min-width:0: anders dwingt de min-width van de knop
(120px) elke kolom naar 120px en loopt de rij buiten het scherm. */
.pdh-slots__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem !important; }
.pdh-slot-btn { min-width: 0 !important; }
}
.pdh-slot-btn {
padding: 0.85rem 0.75rem !important;
border-radius: 0.75rem !important;
border: 1px solid var(--pdh-line) !important;
background: var(--pdh-surface) !important;
color: var(--pdh-bark) !important;
font-family: var(--pdh-font-sans) !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pdh-slot-btn:hover {
background: var(--pdh-bg-warm) !important;
border-color: var(--pdh-peach) !important;
}
.pdh-slot-btn.is-selected {
background: var(--pdh-bark) !important;
border-color: var(--pdh-bark) !important;
color: var(--pdh-cream) !important;
}
/* Booking forms: clean labels */
.pdh-booking .pdh-form label {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--pdh-bark);
line-height: 1.4;
}
.pdh-booking .pdh-form input:not([type="checkbox"]),
.pdh-booking .pdh-form select,
.pdh-booking .pdh-form textarea {
margin-top: 0.4rem;
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid var(--pdh-line);
border-radius: 0.65rem;
background: var(--pdh-surface);
color: var(--pdh-bark);
font-family: var(--pdh-font-sans);
font-size: 0.95rem;
line-height: 1.5;
transition: border-color .2s ease, box-shadow .2s ease;
}
.pdh-booking .pdh-form input:focus,
.pdh-booking .pdh-form select:focus,
.pdh-booking .pdh-form textarea:focus {
outline: 0;
border-color: var(--pdh-peach);
box-shadow: 0 0 0 3px rgba(196, 137, 110, 0.18);
}
.pdh-booking__thanks-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
border-radius: 999px;
background: var(--pdh-bg-warm);
color: var(--pdh-peach);
font-size: 1.85rem;
margin: 0 auto 1.5rem;
box-shadow: 0 20px 40px -24px rgba(196, 137, 110, 0.5);
}
/* ── Algemene responsive polish: lange tekst niet uit container ── */
@media (max-width: 600px) {
.pdh-cta { padding: 2.5rem 1.5rem !important; }
.pdh-cta__heading { font-size: clamp(1.65rem, 6vw, 2.2rem) !important; }
.pdh-cta__text { font-size: 1rem !important; }
.pdh-cta__action .pdh-btn { width: 100%; justify-content: center; }
.pdh-section-heading__title { font-size: clamp(1.75rem, 6vw, 2.4rem) !important; }
.pdh-aanbod-sidebar { padding: 1.5rem !important; }
.pdh-aanbod-sidebar__value { font-size: 1.35rem !important; }
.pdh-back-link { font-size: 0.7rem; }
}
/* ── Geen rare line-height clip op headings (Astra/Elementor combineren soms) ── */
.pdh-section-heading h1, .pdh-section-heading h2, .pdh-section-heading h3,
.pdh-hero__headline, .pdh-cta__heading {
padding-bottom: 0.05em;
}
/* ═════════════════════════════════════════════════════════════════════
FRONTEND RESPONSIVE FINISH — alle paginas correct op telefoon/tablet
═════════════════════════════════════════════════════════════════════ */
/* Algemeen: alleen breken bij echt te lange woorden, NOOIT mid-woord met streepje.
Geen hyphens: auto (gaf lelijke "afge-" / "ou-" breaks) en geen overflow-wrap: anywhere
(sloopt natuurlijke regelvallen). overflow-wrap: break-word breekt alleen als een
woord echt niet past in de container. */
.pdh-hero__headline,
.pdh-section-heading__title,
.pdh-cta__heading,
.pdh-aanbod-card__title,
.pdh-aanbod-row__title,
.pdh-aanbod-single__tagline {
word-break: normal;
overflow-wrap: break-word;
hyphens: manual;
}
/* Container: nooit breder dan viewport, geen onverwachte horizontale scroll */
img, iframe, video, embed, object { max-width: 100%; }
/* CTA blok: blijft 1-col tot 1024px zodat de knop genoeg ruimte heeft */
@media (max-width: 1023px) {
.pdh-cta__grid {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
.pdh-cta__action { justify-content: flex-start !important; }
}
/* CTA tablet: iets compactere padding (was 5rem, gaf hoge blokken op 800px) */
@media (min-width: 768px) and (max-width: 1023px) {
.pdh-cta { padding: 3.5rem 2.5rem !important; }
}
/* Intro-block op tablet: minder padding zodat verhoudingen kloppen */
@media (min-width: 768px) and (max-width: 1023px) {
.pdh-intro-block { padding: 4rem 2.5rem; }
}
/* Hero: extra ademruimte voor kleine telefoons, badge nooit off-screen */
@media (max-width: 480px) {
.pdh-hero__inner { gap: 1.5rem !important; }
.pdh-hero__headline { font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important; }
.pdh-hero__sub { font-size: 1rem; margin-top: 1.25rem; }
.pdh-hero__buttons { margin-top: 1.75rem; gap: 0.75rem !important; }
.pdh-hero__buttons .pdh-btn { width: 100%; justify-content: center; }
.pdh-hero__buttons .pdh-arrow-link { width: 100%; justify-content: center; }
.pdh-hero__arch-wrap { max-width: 20rem; }
.pdh-hero__badge {
position: relative;
bottom: auto; left: auto;
margin: -1rem auto 0;
max-width: none;
}
}
/* Hero badge: nooit links uit beeld als de breedte ergens tussen 480-600 zit */
@media (min-width: 481px) and (max-width: 600px) {
.pdh-hero__badge { left: 1rem !important; bottom: -1rem !important; max-width: 13rem; }
}
/* Section-heading split: keep tablet readable */
@media (min-width: 768px) and (max-width: 1023px) {
.pdh-section-heading--split,
.pdh-section-heading--split-prose { gap: 2rem; }
.pdh-section-heading--split-prose .pdh-section-heading__col--prose {
padding-left: 1.5rem;
}
}
/* Aanbod grid: betere wrap op tablet (768-1024) */
@media (min-width: 768px) and (max-width: 1023px) {
.pdh-aanbod-grid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.pdh-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Aanbod-row mobiel: foot-padding iets minder */
@media (max-width: 480px) {
.pdh-aanbod-row__body { padding: 1.25rem 1.25rem 0.5rem; gap: 0.4rem; }
.pdh-aanbod-row__foot { padding: 0.85rem 1.25rem 1rem; }
.pdh-aanbod-row__title { font-size: 1.2rem !important; }
.pdh-aanbod-row__tagline { font-size: 0.95rem; }
}
/* Aanbod single: tagline-typo iets kleiner op telefoon */
@media (max-width: 600px) {
.pdh-aanbod-single__tagline { font-size: 1.1rem !important; line-height: 1.4 !important; }
.pdh-aanbod-single__summary { font-size: 1rem !important; }
.pdh-features { grid-template-columns: 1fr !important; }
}
/* Over-pagina: nummermarkers (01/02) op telefoon iets kleiner */
@media (max-width: 600px) {
.elementor-widget-text-editor [style*="2.25rem"][style*="font-style:italic"] {
font-size: 1.65rem !important;
}
}
/* Meeting-options: zorg dat de cards niet vastlopen onder 600px */
@media (max-width: 600px) {
.pdh-meeting-card { padding: 1.5rem 1.25rem; }
.pdh-meeting-card h3 { font-size: 1.2rem; }
}
/* Quote-blok extra kleine telefoon: maxwidth voor lange citaten */
@media (max-width: 380px) {
.pdh-quote-block { padding: 1.85rem 1.1rem 1.65rem !important; }
.pdh-quote-block blockquote p { font-size: 0.95rem !important; line-height: 1.55 !important; }
.pdh-quote-block__mark { font-size: 4rem !important; left: 0.7rem !important; top: -0.5rem !important; }
}
/* Footer: tussen 768-1023 (3-koloms) krijgt brand-kolom volle breedte zodat
het er niet té krap uit ziet (de Bedrijfsgegevens-kolom is anders gedrukt). */
@media (min-width: 768px) and (max-width: 1023px) {
.pdh-footer__main {
grid-template-columns: 1fr 1fr !important;
}
.pdh-footer__brand { grid-column: 1 / -1; }
.pdh-footer__col--wide { grid-column: 1 / -1; }
}
/* Header drawer op kleine telefoons: items minder hoog zodat alles past zonder scroll */
@media (max-width: 480px) {
.pdh-drawer__list a { padding: 0.85rem 0; font-size: 1.3rem; }
.pdh-header__drawer { padding: 1.5rem 1.25rem; }
}
/* Forms (contact/booking) op telefoon: ruimere tap-targets, geen iOS zoom (font-size >= 16px) */
@media (max-width: 600px) {
.pdh-form input[type="text"],
.pdh-form input[type="email"],
.pdh-form input[type="tel"],
.pdh-form input[type="url"],
.pdh-form input[type="number"],
.pdh-form input[type="search"],
.pdh-form input[type="date"],
.pdh-form input[type="time"],
.pdh-form input:not([type]),
.pdh-form select,
.pdh-form textarea,
.pdh-booking .pdh-form input,
.pdh-booking .pdh-form select,
.pdh-booking .pdh-form textarea {
font-size: 16px !important; /* voorkomt iOS auto-zoom in formvelden */
}
}
/* Booking stepper op kleine telefoons: labels iets kleiner zodat ze niet wrappen */
@media (max-width: 380px) {
.pdh-stepper { padding: 1rem 0.5rem 1.25rem !important; }
.pdh-stepper__circle { width: 28px; height: 28px; font-size: 0.8rem; }
.pdh-stepper__label { font-size: 0.6rem; letter-spacing: 0.06em; line-height: 1.1; }
}
/* Bedankt-pagina: thanks-icon op mobiel iets kleiner */
@media (max-width: 480px) {
.pdh-thanks-icon { width: 64px; height: 64px; }
.pdh-thanks-icon svg { width: 28px; height: 28px; }
}
/* 404 op mobiel: kleinere title-marge */
@media (max-width: 480px) {
.pdh-404 { padding: 6rem 1rem 3rem; }
.pdh-404__title { font-size: clamp(1.85rem, 7vw, 2.5rem) !important; }
}
/* Section-heading op tablet/mobiel: titel iets compacter zodat hij niet 4 regels wordt */
@media (max-width: 900px) {
.pdh-section-heading__title { font-size: clamp(1.85rem, 5vw + 0.5rem, 2.5rem) !important; }
}
/* Pagina-hero (over/voor-ouders/voor-professionals/contact/afspraak/bedankt):
kleinere headline op mobiel, gegarandeerd niet uit container. */
@media (max-width: 480px) {
.elementor-widget-heading h1 {
font-size: clamp(1.85rem, 6.5vw + 0.5rem, 2.5rem) !important;
line-height: 1.1 !important;
word-break: normal;
overflow-wrap: break-word;
hyphens: manual;
}
}
/* Algemene veiligheid: voorkom horizontaal scrollen door padded sections.
Combineert met de bestaande overflow-x: clip op body. */
.elementor-section, .elementor-container { max-width: 100%; }
/* ═════════════════════════════════════════════════════════════════════
POLISH LAYER 2: info-strip, reviews compact, mobile, calendar, selects
═════════════════════════════════════════════════════════════════════ */
/* ── Info-strip op aanbod single (Prijs / Duur / Voor wie) ─────── */
.pdh-info-strip {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 0 0 1.75rem;
}
@media (min-width: 640px) {
.pdh-info-strip {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
}
@media (min-width: 900px) {
.pdh-info-strip {
grid-template-columns: 1fr 1fr 2fr;
gap: 1.5rem;
}
}
.pdh-info-strip__item {
background: var(--pdh-bg-soft);
border: 1px solid var(--pdh-line);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.pdh-info-strip__item--wide { /* "Voor wie" mag breder */ }
@media (min-width: 900px) {
.pdh-info-strip__item--wide { grid-column: span 1; }
}
.pdh-info-strip__label {
font-family: var(--pdh-font-sans);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--pdh-cocoa);
font-weight: 500;
}
.pdh-info-strip__value {
font-family: var(--pdh-font-serif);
font-size: 1.6rem;
line-height: 1.2;
color: var(--pdh-bark);
}
.pdh-info-strip__text {
margin: 0;
color: var(--pdh-bark);
font-size: 0.95rem;
line-height: 1.65;
}
@media (max-width: 600px) {
.pdh-info-strip__item { padding: 1rem 1.25rem; }
.pdh-info-strip__value { font-size: 1.35rem; }
}
/* ── Reviews compacter: kleinere padding, kleinere quote, dichtere grid ── */
.pdh-review-card { padding: 1.5rem !important; }
@media (min-width: 768px) { .pdh-review-card { padding: 1.75rem !important; } }
.pdh-review-card__quote {
font-size: 1rem !important;
line-height: 1.55 !important;
}
.pdh-review-card__caption { margin-top: 1.25rem !important; padding-top: 0.85rem !important; }
.pdh-stars { margin-bottom: 0.85rem !important; }
.pdh-stars__star { width: 0.85rem !important; height: 0.85rem !important; }
.pdh-reviews-grid { gap: 1.25rem !important; }
@media (min-width: 1024px) { .pdh-reviews-grid { gap: 1.5rem !important; } }
/* Reviews op desktop ook compacter qua sectie-padding zodat het geen halve
pagina vult, voornamelijk op de home. */
.pdh-reviews-grid + * { margin-top: 1rem; }
/* ── Booking-wizard select-velden: tekst werd verticaal afgeknipt ───
Oorzaak: select met line-height < height of padding te smal voor option-tekst.
Oplossing: appearance:none + ruime line-height + custom chevron. */
.pdh-booking .pdh-form select,
.pdh-form select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 0.9rem center !important;
background-size: 12px 9px !important;
padding: 0.85rem 2.6rem 0.85rem 1rem !important;
line-height: 1.45 !important;
height: auto !important;
min-height: 2.85rem !important;
text-overflow: ellipsis;
white-space: normal;
background-color: var(--pdh-surface) !important;
}
.pdh-booking .pdh-form select { min-height: 3rem !important; }
/* Native option-elementen netjes (limited control, maar bij sommige browsers helpt) */
.pdh-form option { color: #3d2b22; padding: 0.5rem; }
/* ── CTA mobile: FULL-BLEED — edge-to-edge over de hele paginabreedte. ─── */
@media (max-width: 600px) {
.pdh-cta-wrap { padding-inline: 0 !important; max-width: none; }
.pdh-cta {
border-radius: 0 !important;
padding: 2.25rem 1.5rem !important;
}
.pdh-cta__grid { gap: 1.25rem !important; }
.pdh-cta__heading {
font-size: clamp(1.5rem, 5.5vw + 0.5rem, 2rem) !important;
line-height: 1.15 !important;
}
.pdh-cta__text {
font-size: 0.98rem !important;
line-height: 1.6 !important;
}
.pdh-cta__eyebrow { margin-bottom: 0.85rem !important; }
.pdh-cta__blob { width: 220px !important; height: 220px !important; }
.pdh-cta__action { width: 100%; }
.pdh-cta__action .pdh-btn { width: 100% !important; justify-content: center !important; padding: 0.95rem 1.4rem !important; }
}
/* Algemene "primary action" knop op telefoon ook breder en lekker
tapbaar in CTA-context (zoals plan-een-gesprek-in onder aanbod). */
@media (max-width: 600px) {
.pdh-btn.pdh-btn--primary,
.pdh-btn.pdh-btn--accent {
padding: 0.95rem 1.4rem !important;
font-size: 0.98rem !important;
}
}
/* ── Aanbod-cards op telefoon: ruimere padding, betere contrast ─── */
@media (max-width: 600px) {
.pdh-aanbod-grid { gap: 1rem !important; }
.pdh-aanbod-card {
padding: 1.75rem 1.5rem !important;
border-radius: 1rem !important;
}
.pdh-aanbod-card__title { font-size: 1.25rem !important; line-height: 1.3 !important; }
.pdh-aanbod-card__tagline { font-size: 0.95rem; }
.pdh-aanbod-card__summary { font-size: 0.92rem; line-height: 1.6; }
.pdh-aanbod-card__foot { margin-top: 1.25rem; padding-top: 0.9rem; }
/* Op telefoon krijgen aanbod-cards geen min-height clamps meer — alle ruimte ademt */
.pdh-aanbod-grid:not(.pdh-aanbod-grid--list) .pdh-aanbod-card__title,
.pdh-aanbod-grid:not(.pdh-aanbod-grid--list) .pdh-aanbod-card__tagline,
.pdh-aanbod-grid:not(.pdh-aanbod-grid--list) .pdh-aanbod-card__summary {
min-height: 0 !important;
-webkit-line-clamp: unset !important;
display: block;
overflow: visible;
}
}
/* ── Booking wizard op telefoon: compact maar contained binnen z'n sectie ── */
@media (max-width: 600px) {
.pdh-booking {
border-radius: 1rem !important;
max-width: none !important;
width: 100% !important;
box-shadow: none !important;
}
.pdh-booking__body { padding: 1.5rem 1rem !important; }
.pdh-stepper { padding: 1.25rem 1rem 1.5rem !important; }
.pdh-cal {
padding: 0.85rem !important;
border-radius: 0.85rem !important;
}
.pdh-cal__grid { gap: 4px !important; }
.pdh-cal__day {
font-size: 0.85rem !important;
border-radius: 0.5rem !important;
}
.pdh-cal__weekday {
font-size: 0.62rem !important;
letter-spacing: 0.08em !important;
padding: 0.35rem 0 !important;
}
.pdh-cal__title { font-size: 1.15rem !important; }
/* 44x44 raakvlak: dit zijn de maandpijlen van de kalender, op telefoon
de enige manier om naar een volgende maand te bladeren. */
.pdh-cal__head button {
width: 44px !important;
height: 44px !important;
font-size: 1rem !important;
}
.pdh-cal__legend { font-size: max(13px, 0.78rem); gap: 0.85rem; }
}
@media (max-width: 380px) {
.pdh-booking__body { padding: 1.25rem 0.75rem !important; }
.pdh-cal { padding: 0.6rem !important; }
.pdh-cal__grid { gap: 3px !important; }
.pdh-cal__day { font-size: 0.78rem !important; }
}
/* Legenda voor de kalender (Beschikbaar / Geen vrije momenten) */
.pdh-cal__legend {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid var(--pdh-line);
font-size: max(13px, 0.82rem);
color: var(--pdh-cocoa);
}
.pdh-cal__legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.pdh-cal__legend-dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 0.25rem;
background: #fff;
border: 1px solid var(--pdh-peach);
}
.pdh-cal__legend-dot--unavailable {
background: transparent;
border-color: rgba(128, 96, 77, 0.25);
}
/* ── Booking forms op telefoon ook breder en luchtiger ─── */
@media (max-width: 600px) {
.pdh-booking .pdh-form { gap: 1rem !important; }
.pdh-booking .pdh-form-row { gap: 1rem !important; }
.pdh-booking__nav {
flex-direction: column-reverse;
align-items: stretch;
gap: 0.75rem;
padding-top: 1.25rem;
}
.pdh-booking__nav .pdh-btn { width: 100%; justify-content: center; }
.pdh-booking__back { align-self: center; }
.pdh-booking__chosen { font-size: 0.92rem; padding: 0.85rem 1rem !important; }
.pdh-booking__step h3 { font-size: 1.4rem !important; }
}
/* ── Bedankt-pagina: spinner verstoppen die zo nu en dan blijft staan ─── */
.pdh-form-feedback:empty { display: none; } /* geen lege feedback-strip */
.wpcf7-spinner { display: none !important; } /* CF7 spinner is vervangen door onze JS */
/* ── Submit-spinner op knoppen: tijdens fetch verschijnt een ronddraaiend
cirkeltje in de knop, tekst wordt verborgen zodat de breedte niet
springt. Werkt op de booking submit en het contactformulier. ──── */
.pdh-btn[data-busy],
button[data-busy] {
position: relative;
color: transparent !important;
pointer-events: none;
cursor: wait;
}
.pdh-btn[data-busy] .pdh-btn__arrow,
button[data-busy] .pdh-btn__arrow,
.pdh-btn[data-busy] svg,
button[data-busy] svg { visibility: hidden; }
.pdh-btn[data-busy]::after,
button[data-busy]::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
border: 2px solid rgba(253, 250, 247, 0.35);
border-top-color: var(--pdh-cream, #fdfaf7);
animation: pdh-spin 0.7s linear infinite;
}
/* Variant: ghost-knoppen krijgen donkere spinner ipv cream */
.pdh-btn--ghost[data-busy]::after,
.pdh-btn--outline[data-busy]::after {
border-color: rgba(61, 43, 34, 0.2);
border-top-color: var(--pdh-bark, #3d2b22);
}
@keyframes pdh-spin {
to { transform: rotate(360deg); }
}
/* ── Praktische fact-row op aanbod single — editorial rij, geen cards. ──
Op desktop 3 kolommen met hairline-dividers, op mobiel onder elkaar.
Eerste kolom (Prijs) krijgt accent-styling, laatste ("Voor wie") wordt
breder voor de lange beschrijving. */
.pdh-facts {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0 0 2rem;
border-top: 1px solid var(--pdh-line);
}
@media (min-width: 640px) {
.pdh-facts {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border-top: 1px solid var(--pdh-line);
border-bottom: 1px solid var(--pdh-line);
}
}
@media (min-width: 900px) {
.pdh-facts {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.5fr);
}
}
.pdh-facts__cell {
padding: 1.5rem 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
border-bottom: 1px solid var(--pdh-line);
}
@media (min-width: 640px) {
.pdh-facts__cell {
padding: 1.5rem 1.75rem;
border-bottom: 0;
border-right: 1px solid var(--pdh-line);
min-width: 0;
}
.pdh-facts__cell:first-child { padding-left: 0; }
.pdh-facts__cell:last-child { border-right: 0; padding-right: 0; }
}
@media (max-width: 639px) {
.pdh-facts__cell:last-child { border-bottom: 0; }
}
.pdh-facts__label {
font-family: var(--pdh-font-sans);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--pdh-cocoa);
font-weight: 500;
}
.pdh-facts__value {
font-family: var(--pdh-font-serif);
font-size: 1.85rem;
line-height: 1.15;
color: var(--pdh-bark);
font-weight: 400;
}
.pdh-facts__value--accent {
color: var(--pdh-peach);
}
.pdh-facts__text {
margin: 0;
color: var(--pdh-bark);
font-size: 0.98rem;
line-height: 1.7;
max-width: 38rem;
}
@media (max-width: 600px) {
.pdh-facts__value { font-size: 1.5rem; }
}
/* Aanbod-single intro krijgt prose-styling */
.pdh-aanbod-single__intro {
font-size: 1.05rem;
line-height: 1.85;
color: rgba(61, 43, 34, 0.86);
max-width: 48rem;
}
.pdh-aanbod-single__intro p { margin: 0 0 1rem; }
.pdh-aanbod-single__intro p:last-child { margin-bottom: 0; }
.pdh-aanbod-single__intro strong { color: var(--pdh-bark); font-weight: 600; }
/* Voorheen had ik hier `overflow: visible !important` op alle elementor-secties
op mobiel staan om een 100vw-breakout op de booking-wizard te laten werken.
Dat sloopte de layout op alle andere pagina's. Weggehaald.
Mobile vangnet: een Elementor-sectie zonder padding op telefoon laat content
tegen de schermrand plakken (Astra-overrides hadden de wrapper-padding 0
gezet). Hieronder afdwingen dat ALLE PDH-secties een minimum 16px zijwaartse
padding krijgen op telefoon. Eigen padding_mobile in de builder wint hier
alsnog over via een hogere specificiteit (Elementor zet inline styles). */
@media (max-width: 600px) {
.elementor-section > .elementor-container {
padding-left: 4px;
padding-right: 4px;
}
/* NIET voor de redesign-secties. Die zijn full-bleed en regelen hun eigen
zijmarges via .oa-page .wrap. Deze 4px liet op telefoon een streepje
paginakleur zien langs elke sectie met een eigen achtergrond -- goed
zichtbaar bij de tint-secties op Voor professionals (Scholing op maat,
Voor wie) en bij de quote-band op de homepage. */
.elementor-section > .elementor-container:has(.oa-page) {
padding-left: 0;
padding-right: 0;
}
/* Zorg dat de body altijd minstens 4px aan de rand heeft, voor visuele rust. */
body.elementor-page #content,
body #content { padding-inline: 0 !important; }
}
/* ── Contact persoonlijk-blokje: warme begroeting met portret ─────────── */
.pdh-contact-personal { max-width: 32rem; }
.pdh-contact-personal .pdh-section-heading__eyebrow { margin-bottom: 1rem; }
.pdh-contact-personal .pdh-section-heading__title {
margin: 0 0 0.5rem !important;
font-size: clamp(1.85rem, 3vw + 0.5rem, 2.5rem) !important;
line-height: 1.15 !important;
}
.pdh-contact-personal__tagline {
margin: 0.5rem 0 1.25rem !important;
font-family: var(--pdh-font-serif);
font-style: italic;
color: var(--pdh-peach);
font-size: 1.25rem;
line-height: 1.4;
}
.pdh-contact-personal__body {
margin: 0 !important;
color: var(--pdh-cocoa);
font-size: 1.05rem;
line-height: 1.75;
}
@media (max-width: 900px) {
.pdh-contact-personal { max-width: none; text-align: left; }
}
@media (max-width: 600px) {
.pdh-contact-personal__tagline { font-size: 1.1rem; }
.pdh-contact-personal__body { font-size: 1rem; line-height: 1.65; }
}
/* ═════════════════════════════════════════════════════════════════════
KLANTFEEDBACK JUNI 2026 — overrides
(onderaan zodat ze de eerdere regels netjes overschrijven)
═════════════════════════════════════════════════════════════════════ */
/* 1. Alle eyebrows / kleine labels (bv. "Aanbod", "Wat anderen zeggen",
"Contact", pagina-hero labels) volledig verbergen — klantfeedback. */
.pdh-eyebrow,
.pdh-section-heading__eyebrow,
.pdh-cta__eyebrow,
.pdh-404__eyebrow,
.pdh-eyebrow-widget {
display: none !important;
}
/* 2. "Spelen met de boogvorm" — op de overige pagina's (voor ouders /
voor professionals) komt de boog niet identiek terug, maar als variaties:
een zachtere boog, een boog onderaan en een blad-vorm. De klassieke boog
blijft op home + over mij. Makkelijk aan te passen zodra de echte foto's er zijn. */
.pdh-shape img {
width: 100% !important;
max-width: 28rem !important;
aspect-ratio: 4 / 5 !important;
object-fit: cover !important;
box-shadow: 0 30px 80px -40px rgba(61, 43, 34, 0.35);
transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pdh-shape.elementor-widget-image .elementor-widget-container { display: flex; justify-content: center; }
.pdh-shape:hover img { transform: scale(1.03); }
/* duidelijke boog bovenaan */
.pdh-shape--soft img { border-radius: 50% 50% 1.5rem 1.5rem / 38% 38% 1.5rem 1.5rem !important; }
/* boog onderaan (gespiegeld) */
.pdh-shape--arch-bottom img { border-radius: 1.5rem 1.5rem 50% 50% / 1.5rem 1.5rem 38% 38% !important; }
/* boog aan de zijkant (links rond) */
.pdh-shape--leaf img { border-radius: 48% 1.5rem 1.5rem 48% / 60% 1.5rem 1.5rem 60% !important; }
/* Vangnet: pagina's die nog niet opnieuw geïmporteerd zijn dragen nog de oude
class (pdh-rounded-img). Geef die óók meteen een boog, zodat het verschil
direct zichtbaar is — ook zonder force-import. */
.pdh-rounded-img img {
width: 100% !important;
max-width: 28rem !important;
aspect-ratio: 4 / 5 !important;
object-fit: cover !important;
border-radius: 50% 50% 1.5rem 1.5rem / 38% 38% 1.5rem 1.5rem !important;
box-shadow: 0 30px 80px -40px rgba(61, 43, 34, 0.35);
margin: 0 auto;
}
.pdh-rounded-img.elementor-widget-image .elementor-widget-container { display: flex; justify-content: center; }
@media (max-width: 768px) {
.pdh-shape img { max-width: 18rem; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.pdh-shape img { transition: none !important; }
.pdh-shape:hover img { transform: none !important; }
}
/* 3. Smallere footer met minder informatie: alleen merk + contact.
Pagina's-/Aanbod-kolommen en adres zijn verwijderd. */
.pdh-footer--compact .pdh-footer__main {
max-width: 60rem;
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
padding-top: 2.5rem;
padding-bottom: 1rem;
}
@media (min-width: 768px) {
.pdh-footer--compact .pdh-footer__main {
grid-template-columns: 1.4fr 1fr;
align-items: center;
text-align: left;
gap: 2.5rem;
padding: 2.5rem 3rem 1rem;
}
}
.pdh-footer--compact .pdh-footer__brand { grid-column: auto; }
.pdh-footer--compact .pdh-footer__col--contact {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
@media (min-width: 768px) {
.pdh-footer--compact .pdh-footer__col--contact { align-items: flex-end; }
}
.pdh-footer__email {
font-size: 1rem;
color: #3d2b22;
text-decoration: none;
transition: color .2s ease;
}
.pdh-footer__email:hover { color: #bd7858; }
.pdh-footer__phone {
font-size: 0.92rem;
color: rgba(61, 43, 34, 0.85);
text-decoration: none;
}
.pdh-footer--compact .pdh-footer__social { margin-top: 0.35rem; }
.pdh-footer--compact .pdh-footer__hr,
.pdh-footer--compact .pdh-footer__legal { max-width: 60rem; }
/* 4. Contact: e-mailregel onder de "Plan een startsessie"-knop. */
.pdh-contact-mail { margin-top: 1rem; font-size: 1rem; color: #75543f; }
.pdh-contact-mail a { color: #bd7858; text-decoration: none; }
.pdh-contact-mail a:hover { text-decoration: underline; }
/* Aanbod-kaart zonder prijs (bv. homepagina): "Lees meer" netjes links,
geen leeg vak waar de prijs stond. */
.pdh-aanbod-card__foot--noprice { justify-content: flex-start !important; }
/* =====================================================================
HEADER & FOOTER — VARIANT B "Warm & geborgen"
1-op-1 overgenomen uit het aangeleverde ontwerp (header + footer + mobiel).
De globale resets/body/.demo uit dat ontwerp zijn bewust NIET overgenomen;
alleen de .dh-* onderdelen, zodat de rest van de site onaangetast blijft.
Token-namen zijn met --dh- geprefixt om botsingen te voorkomen.
===================================================================== */
:root{
--paper: #FFFCF7;
--cream: #F8F1E7;
--cream-2: #F1E7D9;
--espresso: #3B2A1E;
--espresso-2: #2C1F16;
--ink: #4A3D33;
--muted: #9A8B7C;
--clay: #BC6B49;
--blush: #D2A488;
--blush-soft: #E7CDBC;
--dh-serif: "Cormorant Garamond", Georgia, serif;
--dh-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
--dh-maxw: 1320px;
}
/* scoped basis (vervangt de globale resets uit het ontwerp) */
.dh-header, .dh-menu, .dh-footer{ font-family:var(--dh-sans); color:var(--ink); }
.dh-header a, .dh-menu a, .dh-footer a{ text-decoration:none !important; }
.dh-header img, .dh-menu img, .dh-footer img{ display:block; }
.dh-burger{ font-family:inherit; cursor:pointer; }
/* ============================================================
HEADER — zwevend afgerond "capsule"-menu (sticky)
============================================================ */
.dh-header{
position:sticky; top:0; z-index:50;
padding:22px clamp(24px,4vw,40px);
background:transparent; /* transparante header (ontwerp): zwevende pill over de pagina */
}
body.admin-bar .dh-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .dh-header{ top:46px; } }
@media (max-width:600px){ body.admin-bar .dh-header{ top:0; } }
.dh-bar{
max-width:var(--dh-maxw); margin:0 auto;
display:flex; align-items:center; justify-content:space-between; gap:24px;
background:var(--paper); border-radius:60px;
padding:11px 16px 11px 30px;
box-shadow:0 18px 44px -28px rgba(59,42,30,.5),
0 1px 0 rgba(255,255,255,.6) inset;
}
.dh-logo{ flex:0 0 auto; }
.dh-logo img{ height:var(--pdh-header-logo-h, 72px); width:auto; } /* logohoogte, instelbaar via Customizer */
.dh-nav{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; }
.dh-nav a{
font-size:14.5px; letter-spacing:.2px; color:var(--ink);
padding:10px 15px; border-radius:30px; white-space:nowrap;
transition:background .2s ease, color .2s ease;
}
.dh-nav a:hover{ background:var(--cream); color:var(--espresso); }
.dh-nav a.is-active{ background:var(--blush-soft); color:var(--espresso); }
/* primaire knop */
.dh-cta{
display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
background:var(--espresso); color:#F7EFE6 !important; /* off-white tekst, leesbaar op de donkere knop */
font-size:14.5px; font-weight:500; letter-spacing:.3px;
padding:14px 24px; border:none; border-radius:40px;
transition:background .22s ease, transform .22s ease;
}
.dh-cta:hover{ background:var(--clay); transform:translateY(-1px); color:#fff !important; }
.dh-cta .arrow{ width:16px; height:16px; transition:transform .22s ease; }
.dh-cta:hover .arrow{ transform:translateX(3px); }
/* mobiele schakelaar — standaard verborgen */
.dh-burger{
display:none; width:46px; height:46px; border:none; background:transparent;
flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.dh-burger span{ display:block; width:24px; height:1.8px; border-radius:2px; background:var(--espresso); transition:.25s ease; }
/* ============================================================
FOOTER — diepe, warme espresso-footer
============================================================ */
.dh-footer{ background:var(--espresso-2); color:var(--blush-soft); }
/* Zachte boog-overgang: los element direct boven .dh-footer.
color = footerkleur, zodat de boog naadloos op de footer aansluit. */
.dh-arc{
display:block;
width:100%;
height:clamp(70px, 8vw, 120px);
color:var(--espresso-2); /* = footer-achtergrondkleur */
margin-bottom:-1px; /* naadloze aansluiting, geen haarlijn */
}
/* Footer-boog houdt de pagina-kleur (transparant → body-cream-2), net als op
alle andere pagina's. Alleen de 404 vormt een uitzondering: daar eindigt de
gradient-sectie zélf in peach, dus dáár krijgt de boog die kleur. */
body.pdh-arc-peach .dh-arc{ background:#E6C7AF; }
.dh-footer__inner{
max-width:var(--dh-maxw); margin:0 auto;
padding:24px clamp(24px,4vw,40px) 30px;
}
.dh-footer__top{
display:grid; grid-template-columns:1fr auto 1fr; gap:56px; align-items:center;
}
/* Footer-logo gecentreerd in de middelste kolom, op gelijke hoogte met de
statement (links) en de mail (rechts). Hoogte instelbaar via Customizer. */
.dh-footer__logocenter{ text-align:center; }
.dh-footer__brand-logo{ display:inline-block; }
.dh-footer__brand-logo img{ height:var(--pdh-footer-logo-h, 84px); width:auto; margin:0 auto; }
.dh-footer__stmt{
font-family:var(--dh-serif); font-weight:500; font-size:36px; line-height:1.16;
color:#F4E7DB; max-width:14ch; letter-spacing:-.3px; margin:0;
}
.dh-footer__stmt em{ font-style:italic; color:var(--blush); }
.dh-footer__contact{ text-align:right; min-width:240px; }
.dh-footer__label{
font-size:12px; letter-spacing:2px; text-transform:uppercase;
color:rgba(231,205,188,.55); margin-bottom:12px;
}
.dh-footer__mail{
font-family:var(--dh-serif); font-size:26px; color:#F4E7DB;
display:inline-block; margin-bottom:26px;
}
.dh-footer__mail:hover{ color:var(--blush); }
.dh-soc{ display:flex; gap:12px; justify-content:flex-end; }
.dh-soc a{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:50%;
border:1px solid rgba(231,205,188,.28); color:var(--blush-soft);
transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.dh-soc a:hover{ background:var(--blush); color:var(--espresso-2); border-color:var(--blush); transform:translateY(-2px); }
.dh-soc svg{ width:18px; height:18px; }
.dh-footer__bottom{
display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
margin-top:54px; padding-top:26px;
border-top:1px solid rgba(231,205,188,.16);
font-size:13.5px; color:rgba(231,205,188,.6);
}
.dh-footer__bottom a{ color:var(--blush-soft); }
.dh-footer__bottom a:hover{ color:#fff; }
.dh-footer__links{ display:flex; gap:28px; align-items:center; }
.dh-footer__links a{ display:inline-flex; align-items:center; min-height:44px; }
.dh-footer__links .oa{ color:var(--blush); font-weight:500; }
/* ============================================================
MOBIEL (<= 900px)
============================================================ */
@media (max-width: 1080px){
/* Nav met 6 items + CTA wordt te breed onder ~1080px -> hamburger eerder tonen. */
.dh-bar{ padding:10px 12px 10px 20px; }
.dh-logo img{ height:calc(var(--pdh-header-logo-h, 72px) * 0.8); }
/* Logo in het schermvullende menu groter dan in de balk: daar is de ruimte. */
.dh-menu__top .dh-logo img{ height:calc(var(--pdh-header-logo-h, 72px) * 1.15); }
.dh-nav, .dh-header .dh-cta{ display:none; } /* desktop-nav verbergen */
.dh-burger{ display:flex; }
/* schermvullend menu-overlay */
.dh-menu{
position:fixed; inset:0; z-index:60;
background:var(--espresso-2); color:#F4E7DB;
display:flex; flex-direction:column;
opacity:0; pointer-events:none; transform:translateY(-10px);
transition:opacity .28s ease, transform .28s ease;
}
body.menu-open .dh-menu{ opacity:1; pointer-events:auto; transform:none; }
/* Scroll-lock die ook op iOS werkt: Safari negeert overflow:hidden op body
voor touch-scrollen, position:fixed niet. De JS zet body.style.top op de
scrollpositie en herstelt die bij sluiten. */
body.menu-open{ overflow:hidden; position:fixed; width:100%; left:0; right:0; }
/* Geen scroll-chaining vanuit het menu naar de pagina erachter (Safari 16+). */
.dh-menu{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.dh-menu__top{ position:relative; display:flex; align-items:center; justify-content:center; padding:24px clamp(24px,4vw,40px); }
.dh-menu__top .dh-burger{ display:flex; position:absolute; right:clamp(12px,4vw,32px); top:50%; transform:translateY(-50%); }
.dh-menu__top .dh-burger span{ background:var(--blush-soft); }
.dh-menu{ overflow-y:auto; }
/* Menu-items als echte rijen: volle breedte, haarlijn ertussen, chevron rechts.
Losse gecentreerde woorden lazen niet als aantikbare menu-items. */
.dh-menu__links{ display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:0; padding:14px clamp(20px,6vw,40px) 0; }
.dh-menu__links a{
display:flex; align-items:center; justify-content:space-between; gap:16px;
font-family:var(--dh-serif); font-size:clamp(19px,5vw,24px); font-weight:500; color:#F4E7DB;
padding:13px 2px; min-height:52px;
border-bottom:1px solid rgba(244,231,219,.14);
transition:color .18s ease;
}
.dh-menu__links a::after{
content:""; width:9px; height:9px; flex:0 0 auto;
border-top:1.5px solid rgba(244,231,219,.42); border-right:1.5px solid rgba(244,231,219,.42);
transform:rotate(45deg); transition:border-color .18s ease;
}
.dh-menu__links a:last-child{ border-bottom:none; }
.dh-menu__links a:active{ color:var(--blush); }
.dh-menu__links a.is-active{ color:var(--blush); }
.dh-menu__links a.is-active::after{ border-color:var(--blush); }
/* CTA direct onder de items. Met margin-top:auto stond hij tegen de onderrand
geplakt: op een telefoon van 844px gaf dat ~180px lege ruimte ertussen. */
.dh-menu__foot{ margin-top:26px; padding:0 clamp(20px,6vw,40px) max(28px, env(safe-area-inset-bottom)); }
.dh-menu__foot .dh-cta{ width:100%; justify-content:center; min-height:52px; }
/* Astra's scroll-to-top (#ast-scroll-top, z-index 99) zweeft boven het
schermvullende menu (z-index 60). Verbergen zolang het menu open is;
!important omdat Astra display via een inline style zet. */
body.menu-open #ast-scroll-top{ display:none !important; }
/* burger -> kruis wanneer open */
body.menu-open .dh-menu__top .b1{ transform:translateY(6.8px) rotate(45deg); }
body.menu-open .dh-menu__top .b2{ opacity:0; }
body.menu-open .dh-menu__top .b3{ transform:translateY(-6.8px) rotate(-45deg); }
/* ---- FOOTER GECENTREERD OP MOBIEL ---- */
.dh-footer__inner{ padding:40px clamp(24px,4vw,40px) 24px; }
.dh-footer__top{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:22px; }
.dh-footer__logocenter{ order:-1; } /* logo bovenaan op mobiel */
.dh-footer__brand{ display:flex; flex-direction:column; align-items:center; }
.dh-footer__stmt{ max-width:18ch; }
.dh-footer__contact{ text-align:center; min-width:0; }
.dh-soc{ justify-content:center; }
.dh-soc{ justify-content:center; }
.dh-footer__bottom{
flex-direction:column; text-align:center; gap:8px;
margin-top:26px;
}
/* Juridische links naast elkaar (wrappend). Gestapeld, met het raakvlak van
44px per link, werd de footer 859px hoog op een scherm van 844px. */
.dh-footer__links{ flex-direction:row; flex-wrap:wrap; justify-content:center; column-gap:20px; row-gap:0; }
}
/* Op telefoon twee regels juridische links, en nooit een afbreking binnen een
link. Een vast 2x2-raster paste met "Klachtenregeling & Meldcode" pas vanaf
390px; daaronder brak die link en "Algemene voorwaarden" over twee regels. */
@media (max-width: 560px){
.dh-footer__links{ display:flex; flex-wrap:wrap; justify-content:center; column-gap:20px; row-gap:0; }
.dh-footer__links a{ white-space:nowrap; }
}
@media (max-width: 359px){
.dh-footer__links{ column-gap:14px; }
.dh-footer__links a{ font-size:13px; }
}
/* niet-mobiele weergave: overlay nooit tonen */
@media (min-width: 1081px){
.dh-menu{ display:none; }
}
/* =====================================================================
REDESIGN-PAGINA'S — Over mij & Aanbod
CSS 1-op-1 overgenomen uit de aangeleverde HTML-ontwerpen, gescopet onder
.oa-page / .oa-over / .oa-aanbod zodat de rest van de site onaangetast blijft.
Kleur-tokens (--paper/--clay/--sand/...) staan al in het Variant B-blok;
hier alleen --sand toevoegen. Serif/sans/maxw = --dh-serif/--dh-sans/--dh-maxw.
===================================================================== */
:root{ --sand:#EBDCCB; }
/* Alléén de redesign-pagina's (Over mij / Aanbod / Contact) krijgen de exacte
ontwerp-achtergrond #F1E7D9 (--cream-2), incl. de headerstrip; de rest van de
site behoudt #fdfaf7. Body-class wordt via PHP toegevoegd. */
body.pdh-bg-cream2{ background:#F1E7D9 !important; }
/* header blijft transparant (zwevende pill) op alle pagina's */
.oa-page{ font-family:var(--dh-sans); color:var(--ink); }
.oa-page em{ font-style:italic; }
.oa-page a{ color:inherit; text-decoration:none !important; }
.oa-page .btn, .oa-page .offer__link, .oa-page .dh-cta{ text-decoration:none !important; }
.oa-page img{ display:block; }
.oa-page .wrap{ max-width:var(--dh-maxw); margin:0 auto; padding-left:clamp(24px,5vw,56px); padding-right:clamp(24px,5vw,56px); }
/* Reset thema-defaults (Astra) op redesign-markup: blockquote krijgt anders een
border-left/padding ("quote-lijn aan de zijkant") en figure een margin. De losse
HTML-ontwerpen draaiden zonder thema, dus die extra's horen er niet. Specifieke
regels (bv. .oa-over .hero__quote, .oa-home .review__quote) winnen op specificiteit. */
.oa-page figure{ margin:0; }
.oa-page figcaption{ margin:0; }
.oa-page blockquote{ margin:0; padding:0; border:0; background:none; quotes:none; }
.oa-page blockquote::before, .oa-page blockquote::after{ content:none; }
/* ---------- arch-foto (merksignatuur) ---------- */
.oa-page .arch{ position:relative; overflow:hidden; border-radius:clamp(120px,17vw,210px) clamp(120px,17vw,210px) 16px 16px; background:var(--blush-soft); }
.oa-page .arch img{ width:100%; height:100%; object-fit:cover; }
.oa-page .arch--portret{ aspect-ratio:4/5; }
/* ====================== OVER MIJ ====================== */
.oa-over .hero{ position:relative; overflow:hidden; background:linear-gradient(178deg, var(--cream-2) 0%, #F2E1CE 34%, #EFD9C4 70%, #E6C7AF 100%); padding:clamp(40px,6vw,84px) 0 clamp(72px,9vw,132px); }
.oa-over .hero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--paper); display:block; }
/* width:100% is nodig omdat .wrap `margin:0 auto` heeft en de hero een
flex-kolom is: zonder expliciete breedte krimpt de grid naar zijn
max-content (sinds het portret een max-width heeft) en schuift de tekst
uit de lijn met de header en de rest van de pagina. */
.oa-over .hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,80px); align-items:center; width:100%; }
.oa-over .hero__name{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(44px,6.4vw,84px); line-height:1.0; letter-spacing:-1px; color:var(--espresso); margin:18px 0 0; text-wrap:balance; }
.oa-over .hero__name em{ color:var(--clay); }
.oa-over .hero__intro{ font-size:clamp(17px,1.5vw,20px); line-height:1.7; color:var(--ink); max-width:46ch; margin:26px 0 0; }
.oa-over .hero__quote{ font-family:var(--dh-serif); font-style:italic; font-size:clamp(20px,2vw,26px); line-height:1.45; color:var(--clay); margin:30px 0 0; padding-left:22px; border-left:2px solid var(--blush); max-width:34ch; }
.oa-over .hero__visual{ position:relative; }
/* Portret begrenzen op laptopformaat. Zonder deze cap groeit het 4/5-portret
mee met de kolom (541px breed = 677px hoog op 1366) en werd de hero 902px
hoog op een scherm van 768px: naam en foto vielen dan half onder de vouw
(klantfeedback aug. 2026). margin-left:auto houdt de foto tegen de
rechterrand van de wrap, zoals in het ontwerp. */
.oa-over .hero__visual{ max-width:440px; margin-left:auto; }
.oa-over .hero__visual .arch{ position:relative; z-index:1; }
.oa-over .hero__visual::before{ content:""; position:absolute; right:-26px; top:-26px; width:62%; height:62%; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(210,164,136,.5), rgba(210,164,136,0) 70%); z-index:0; }
.oa-over .feature{ padding:clamp(44px,6vw,90px) 0; }
.oa-over .feature__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; }
.oa-over .feature--flip .feature__media{ order:2; }
.oa-over .feature__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(30px,3.4vw,46px); line-height:1.08; letter-spacing:-.4px; color:var(--espresso); margin:14px 0 0; }
.oa-over .feature__body{ margin-top:22px; }
.oa-over .feature__body p{ font-size:16.5px; line-height:1.78; color:var(--ink); margin:0 0 16px; max-width:50ch; }
.oa-over .feature__body p:last-child{ margin-bottom:0; }
.oa-over .feature__body em{ color:var(--clay); }
.oa-over .feature__media .arch{ max-width:480px; }
.oa-over .feature--flip .feature__media .arch{ margin-left:auto; }
.oa-over .tint{ background:var(--paper); }
.oa-over .band{ background:var(--sand); }
.oa-over .band__inner{ max-width:980px; margin:0 auto; padding:clamp(56px,7vw,104px) clamp(24px,4vw,40px); text-align:center; }
.oa-over .band__mark{ font-family:var(--dh-serif); font-size:90px; line-height:.4; color:var(--blush); display:block; height:46px; }
.oa-over .band__quote{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(26px,3.4vw,46px); line-height:1.28; letter-spacing:-.4px; color:var(--espresso); margin:0; text-wrap:balance; }
.oa-over .band__quote em{ font-style:italic; color:var(--clay); }
.oa-over .band__by{ margin-top:26px; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.oa-over .band__role{ margin-top:7px; font-family:var(--dh-serif); font-style:italic; font-size:15px; letter-spacing:.2px; text-transform:none; color:var(--clay); }
/* ====================== AANBOD ====================== */
.oa-aanbod .hero{ position:relative; overflow:hidden; background:linear-gradient(178deg, var(--cream-2) 0%, #F2E1CE 34%, #EFD9C4 70%, #E6C7AF 100%); padding:clamp(44px,6vw,86px) 0 clamp(72px,9vw,132px); text-align:center; }
.oa-aanbod .hero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--cream-2); display:block; }
.oa-aanbod .hero__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(46px,7vw,92px); line-height:1; letter-spacing:-1px; color:var(--espresso); margin:0; }
.oa-aanbod .hero__title em{ color:var(--clay); }
.oa-aanbod .hero__lead{ max-width:46ch; margin:24px auto 0; font-size:clamp(17px,1.5vw,20px); line-height:1.7; color:var(--ink); }
.oa-aanbod .offers{ padding:clamp(34px,4vw,56px) 0 clamp(20px,3vw,40px); }
/* Flex i.p.v. grid: een onvolledige laatste rij (bv. 2 kaarten onder 3) centreert
dan netjes onder de rij erboven; de vaste width houdt alle kaarten even breed. */
.oa-aanbod .offer-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.oa-aanbod .offer-grid .offer{ width:calc((100% - 44px)/3); }
@media (max-width:1120px){
.oa-aanbod .offer-grid .offer{ width:calc((100% - 22px)/2); }
}
.oa-aanbod .offer{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid rgba(59,42,30,.09); border-radius:22px; padding:32px 32px 26px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.oa-aanbod .offer:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -34px rgba(59,42,30,.5); border-color:rgba(188,107,73,.4); }
.oa-aanbod .offer__title{ font-family:var(--dh-serif); font-weight:600; font-size:27px; line-height:1.15; color:var(--espresso); margin:0; letter-spacing:-.3px; min-height:2.3em; }
.oa-aanbod .offer__tagline{ font-family:var(--dh-serif); font-style:italic; font-size:18px; line-height:1.4; color:var(--clay); margin:12px 0 0; min-height:2.8em; }
.oa-aanbod .offer__summary{ font-size:15px; line-height:1.7; color:var(--ink); margin:16px 0 0; min-height:5.1em; }
.oa-aanbod .offer__meta{ display:flex; align-items:center; gap:9px; margin-top:18px; font-size:13.5px; color:var(--muted); }
.oa-aanbod .offer__meta::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blush); flex:0 0 auto; }
.oa-aanbod .offer__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:auto; padding-top:20px; border-top:1px solid rgba(59,42,30,.1); }
.oa-aanbod .offer__price{ font-family:var(--dh-serif); font-weight:600; font-size:26px; color:var(--espresso); }
.oa-aanbod .offer__link{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--espresso); }
.oa-aanbod .offer__arrow{ transition:transform .22s; }
.oa-aanbod .offer:hover .offer__arrow{ transform:translateX(4px); }
.oa-aanbod .offer:hover .offer__link{ color:var(--clay); }
.oa-aanbod .offer__cover{ position:absolute; inset:0; z-index:1; }
/* Hele kaart klikbaar: content ligt visueel bovenop, maar laat kliks doorvallen
naar de cover-link eronder (er zitten geen losse links in de content). */
.oa-aanbod .offer > :not(.offer__cover){ position:relative; z-index:2; pointer-events:none; }
.oa-aanbod .offer__foot .offer__link{ position:relative; z-index:3; }
.oa-aanbod .note__inner{ max-width:46rem; margin:0 auto; text-align:center; padding:clamp(40px,5vw,72px) clamp(24px,4vw,40px) clamp(20px,3vw,40px); }
.oa-aanbod .note__inner h3, .oa-aanbod .note__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(26px,3vw,38px); color:var(--espresso); margin:0 0 18px; letter-spacing:-.3px; }
.oa-aanbod .note__inner p{ font-size:15.5px; line-height:1.75; color:var(--ink); margin:0 0 15px; }
.oa-aanbod .note__inner p:last-child{ margin-bottom:0; }
.oa-aanbod .note__inner em{ color:var(--muted); font-size:14.5px; }
/* "Mogelijkheid tot vervolg" losmaken van de juridische/algemene noot eronder. */
.oa-aanbod .note__block{ margin-bottom:0; }
.oa-aanbod .note__legal{ margin-top:clamp(30px,4vw,48px); padding-top:clamp(22px,3vw,32px); border-top:1px solid rgba(59,42,30,.12); }
.oa-aanbod .note__legal p:last-child{ margin-bottom:0; }
/* ---------- CTA (gedeeld) ---------- */
.oa-page .cta-wrap{ padding:clamp(40px,5vw,80px) 0 clamp(40px,5vw,80px); }
.oa-page .cta{ position:relative; overflow:hidden; background:var(--sand); border-radius:30px; padding:clamp(40px,5vw,68px) clamp(28px,5vw,72px); }
.oa-page .cta__blob{ position:absolute; right:-70px; top:-70px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at 32% 32%, rgba(210,164,136,.5), rgba(210,164,136,0) 70%); }
.oa-page .cta__grid{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:46px; flex-wrap:wrap; }
.oa-page .cta__copy{ flex:1 1 480px; }
.oa-page .cta__heading{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(28px,3.1vw,42px); line-height:1.16; letter-spacing:-.4px; color:var(--espresso); margin:0; max-width:20ch; }
.oa-page .cta__text{ font-size:16px; line-height:1.7; color:var(--ink); margin:14px 0 0; max-width:52ch; }
.oa-page .btn{ display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:500; padding:16px 28px; border:none; border-radius:40px; white-space:nowrap; cursor:pointer; transition:background .22s, transform .22s; }
.oa-page .btn--primary{ background:var(--espresso); color:#F7EFE6; }
.oa-page .btn--primary:hover{ background:var(--clay); transform:translateY(-1px); color:#F7EFE6; }
.oa-page .btn--ghost{ background:transparent; color:var(--espresso); border:1.5px solid rgba(59,42,30,.28); }
.oa-page .btn--ghost:hover{ background:var(--espresso); color:#F7EFE6; }
.oa-page .btn .arrow{ width:16px; height:16px; transition:transform .22s; }
.oa-page .btn:hover .arrow{ transform:translateX(3px); }
/* Tekst-pijl (→) in ghost-knoppen/arrowlinks op tekst-hoogte uitlijnen: de globale
line-height:1.7 maakt de tekstregel hoog t.o.v. het vaste 16px pijl-vakje, waardoor
de → te hoog/laag staat. SVG-pijlen houden hun 16px; tekst-pijlen worden natuurlijk. */
.oa-page .btn, .oa-page .arrowlink{ line-height:1; }
.oa-page .btn span.arrow, .oa-page .arrowlink span.arrow{
width:auto; height:auto; display:inline-flex; align-items:center; line-height:1;
}
/* ---------- zachte reveal ---------- */
@media (prefers-reduced-motion: no-preference){
/* Geen opacity:0 als basis: de onzichtbare startstaat zit in de keyframes
(fill-mode both). Speelt de animatie om wat voor reden ook niet af, dan is
de content gewoon zichtbaar in plaats van voorgoed verborgen. */
.oa-page .reveal{ animation:oaRise .7s cubic-bezier(.2,.7,.2,1) both; }
.oa-page .reveal.d1{ animation-delay:.07s; } .oa-page .reveal.d2{ animation-delay:.14s; }
@keyframes oaRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
}
/* ---------- mobiel ---------- */
@media (max-width:1000px){
.oa-over .hero__grid{ grid-template-columns:1fr; gap:40px; }
.oa-over .hero__visual{ max-width:460px; margin-left:0; }
.oa-over .feature__grid{ grid-template-columns:1fr; gap:34px; }
.oa-over .feature--flip .feature__media{ order:0; }
.oa-over .feature__media .arch, .oa-over .feature--flip .feature__media .arch{ max-width:440px; margin:0 auto; }
}
@media (max-width:900px){
/* CTA al vanaf 900px: kolom + gecentreerd, compacte gap, knop volle breedte.
flex:0 0 auto reset de flex-grow van de copy -> geen gat tussen tekst en knop. */
.oa-page .cta__grid{ flex-direction:column; align-items:center; text-align:center; gap:16px; }
.oa-page .cta__copy{ flex:0 0 auto; }
.oa-page .cta__heading{ margin:0 auto; }
.oa-page .cta__text{ margin:10px auto 0; }
.oa-page .cta__action{ width:100%; }
.oa-page .cta__action .btn{ width:100%; justify-content:center; }
}
@media (max-width:600px){
.oa-aanbod .offer-grid .offer{ width:100%; }
.oa-aanbod .offer{ text-align:center; align-items:center; }
.oa-aanbod .offer__title, .oa-aanbod .offer__tagline, .oa-aanbod .offer__summary{ min-height:0; }
.oa-aanbod .offer__meta{ justify-content:center; }
.oa-aanbod .offer__foot{ flex-direction:column; align-items:center; gap:12px; }
/* Telefoon: hero- en feature-tekst centreren, alinea's met margin:auto.
De hero-quote verliest hier zijn linker-accentlijn (border/padding weg). */
.oa-over .hero__copy{ text-align:center; }
.oa-over .hero__intro{ margin-left:auto; margin-right:auto; }
.oa-over .hero__quote{ border-left:none; padding-left:0; text-align:center; margin-left:auto; margin-right:auto; }
.oa-over .feature__copy{ text-align:center; }
.oa-over .feature__copy .feature__body p{ margin-left:auto; margin-right:auto; }
.oa-page .flist li{ justify-content:center; }
}
/* ====================== CONTACT ====================== */
.oa-contact .hero{ position:relative; overflow:hidden; background:linear-gradient(178deg, var(--cream-2) 0%, #F2E1CE 34%, #EFD9C4 70%, #E6C7AF 100%); padding:clamp(44px,6vw,86px) 0 clamp(72px,9vw,132px); text-align:center; }
.oa-contact .hero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--cream-2); display:block; }
.oa-contact .hero__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(46px,7vw,92px); line-height:1; letter-spacing:-1px; color:var(--espresso); margin:0; }
.oa-contact .hero__title em{ color:var(--clay); }
.oa-contact .hero__lead{ max-width:48ch; margin:24px auto 0; font-size:clamp(17px,1.5vw,20px); line-height:1.7; color:var(--ink); }
.oa-contact .hero__actions{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:34px; }
.oa-contact .hero__mail{ font-size:15.5px; color:var(--muted); }
.oa-contact .hero__mail a{ color:var(--clay); border-bottom:1px solid rgba(188,107,73,.4); padding-bottom:1px; }
.oa-contact .hero__mail a:hover{ color:var(--espresso); }
.oa-contact .ways{ padding:clamp(40px,5vw,72px) 0 clamp(20px,3vw,40px); text-align:center; }
.oa-contact .ways__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(30px,3.4vw,46px); line-height:1.1; letter-spacing:-.4px; color:var(--espresso); margin:0; }
.oa-contact .ways__intro{ max-width:46ch; margin:16px auto 0; font-size:16.5px; line-height:1.7; color:var(--ink); }
.oa-contact .ways__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:clamp(34px,4vw,52px) auto 0; text-align:left; }
.oa-contact .way{ background:var(--paper); border:1px solid rgba(59,42,30,.09); border-radius:22px; padding:34px 30px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.oa-contact .way:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -34px rgba(59,42,30,.5); border-color:rgba(188,107,73,.4); }
.oa-contact .way__ic{ width:54px; height:54px; border-radius:50%; background:var(--blush-soft); display:flex; align-items:center; justify-content:center; color:var(--espresso); margin-bottom:22px; }
.oa-contact .way__ic svg{ width:25px; height:25px; }
.oa-contact .way__title{ font-family:var(--dh-serif); font-weight:600; font-size:24px; color:var(--espresso); margin:0 0 10px; letter-spacing:-.3px; }
.oa-contact .way__text{ font-size:15px; line-height:1.7; color:var(--ink); margin:0; }
.oa-contact .contact{ padding:clamp(40px,5vw,80px) 0 clamp(30px,4vw,60px); }
/* Transparant (= pagina-kleur), net als de andere content-secties. Een eigen
kleur hier botst met de transparante footer-boog en geeft een kleurbalk. */
.oa-contact .contact{ background:transparent; }
.oa-contact .contact__form{ background:var(--paper); border:1px solid rgba(59,42,30,.08); border-radius:22px; padding:clamp(26px,3.2vw,42px); }
.oa-contact .contact__grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(34px,5vw,72px); align-items:start; }
.oa-contact .block__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(26px,3vw,38px); color:var(--espresso); margin:0 0 26px; letter-spacing:-.3px; }
.oa-contact .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.oa-contact .field{ display:flex; flex-direction:column; gap:8px; }
.oa-contact .field__label{ font-size:13.5px; color:var(--espresso); font-weight:500; }
.oa-contact .field__hint{ color:var(--muted); font-weight:400; }
/* font-size minimaal 16px: iOS Safari zoomt de viewport in zodra een veld met
kleinere tekst focus krijgt, en zoomt daarna niet terug. */
.oa-contact .field input, .oa-contact .field select, .oa-contact .field textarea{ font-family:var(--dh-sans); font-size:max(16px, 1rem); color:var(--ink); background:var(--paper); border:1px solid rgba(59,42,30,.16); border-radius:12px; padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .2s; }
.oa-contact .field input:focus, .oa-contact .field select:focus, .oa-contact .field textarea:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(188,107,73,.14); }
/* Onderwerp-select: zonder appearance:none kapt WP/Astra de optie-tekst verticaal
af ("half onderbroken"). Native pijl uitzetten, eigen chevron + ruime hoogte. */
.oa-contact .field select{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 0.95rem center; background-size:12px 9px;
padding:13px 2.6rem 13px 15px; line-height:1.5; height:auto; min-height:48px;
text-overflow:ellipsis; white-space:nowrap;
}
/* Naam / E-mail / Telefoon exact even hoog als de Onderwerp-select
(zelfde line-height + min-height; padding/border/breedte zijn al gelijk). */
.oa-contact .field input{ min-height:48px; line-height:1.5; }
.oa-contact .field textarea{ resize:vertical; min-height:130px; }
/* Verplicht vinkje: het hele label is klikbaar (raakvlak >= 44px) en het
vinkje zelf haalt de WCAG-minimumdoelgrootte van 24px. */
.oa-contact .consent{ display:flex; align-items:center; gap:12px; margin:6px 0 22px; padding:10px 0; font-size:14.5px; color:var(--ink); cursor:pointer; min-height:44px; }
.oa-contact .consent input{ width:24px; height:24px; margin-top:0; accent-color:var(--clay); flex:0 0 auto; }
.oa-contact .aside{ background:var(--paper); border:1px solid rgba(59,42,30,.09); border-radius:22px; padding:clamp(26px,3vw,38px); }
.oa-contact .aside__title{ font-family:var(--dh-serif); font-weight:600; font-size:24px; color:var(--espresso); margin:0 0 14px; }
.oa-contact .aside p{ font-size:15.5px; line-height:1.7; color:var(--ink); margin:0 0 14px; }
.oa-contact .aside__addr{ font-family:var(--dh-serif); font-style:italic; font-size:19px; color:var(--clay); margin:0 0 22px; }
.oa-contact .map{ width:100%; height:300px; border:0; border-radius:14px; display:block; background:#EFE3D4; }
.oa-contact .aside__divider{ height:1px; background:rgba(59,42,30,.12); margin:24px 0; }
.oa-contact .aside__fine{ font-size:13.5px; line-height:1.7; color:var(--muted); margin:0; }
@media (max-width:1000px){ .oa-contact .contact__grid{ grid-template-columns:1fr; gap:38px; } }
@media (max-width:900px){ .oa-contact .ways__grid{ grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; } }
@media (max-width:600px){
.oa-contact .form-row{ grid-template-columns:1fr; gap:18px; }
.oa-contact .way{ text-align:center; }
.oa-contact .way__ic{ margin-left:auto; margin-right:auto; }
.oa-contact .block__title{ text-align:center; }
.oa-contact .contact__form form{ text-align:left; }
.oa-contact .aside{ text-align:center; }
.oa-contact .consent{ justify-content:center; text-align:left; }
.oa-contact .contact__form .btn{ width:100%; justify-content:center; }
}
/* ====================== VOOR PROFESSIONALS ====================== */
/* foto-figuren (afwisselende vormen) */
.oa-feat .fig{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--blush-soft); }
.oa-feat .fig img{ width:100%; height:100%; object-fit:cover; }
.oa-feat .fig--soft{ border-radius:30px; }
.oa-feat .fig--leaf{ border-radius:150px 30px 150px 30px; }
.oa-feat .fig--arch{ border-radius:clamp(120px,16vw,200px) clamp(120px,16vw,200px) 18px 18px; }
.oa-feat .fig--arch-bottom{ border-radius:18px 18px clamp(120px,16vw,200px) clamp(120px,16vw,200px); }
.oa-feat .hero{ position:relative; overflow:hidden; background:linear-gradient(178deg, var(--cream-2) 0%, #F2E1CE 34%, #EFD9C4 70%, #E6C7AF 100%); padding:clamp(44px,6vw,86px) 0 clamp(72px,9vw,132px); text-align:center; }
.oa-feat .hero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--paper); display:block; }
.oa-feat .hero__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(42px,6.4vw,84px); line-height:1.02; letter-spacing:-1px; color:var(--espresso); margin:0; }
.oa-feat .hero__title em{ color:var(--clay); }
.oa-feat .hero__lead{ max-width:52ch; margin:24px auto 0; font-size:clamp(17px,1.5vw,20px); line-height:1.7; color:var(--ink); }
.oa-feat .feature{ padding:clamp(40px,5vw,80px) 0; }
.oa-feat .feature.tint{ background:var(--paper); }
.oa-feat .feature__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; }
.oa-feat .feature__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(30px,3.4vw,46px); line-height:1.08; letter-spacing:-.4px; color:var(--espresso); margin:0; }
.oa-feat .feature__body{ margin-top:18px; }
.oa-feat .feature__body p{ font-size:16.5px; line-height:1.78; color:var(--ink); margin:0 0 16px; max-width:52ch; }
.oa-feat .feature__body p:last-child{ margin-bottom:0; }
.oa-feat .feature__media .fig{ max-width:430px; margin:0 auto; }
.oa-feat .flist{ list-style:none; margin:24px 0 0; padding:0; }
.oa-feat .flist li{ display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid rgba(59,42,30,.1); font-size:15.5px; line-height:1.6; color:var(--ink); }
.oa-feat .flist li:last-child{ border-bottom:none; }
.oa-feat .flist li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--clay); margin-top:7px; flex:0 0 auto; }
/* Featureblok ZONDER foto (Voor professionals -> "Voor wie", klantverzoek
aug. 2026). Zonder media zou de tekst in de linkerhelft blijven hangen met
een gat rechts; daarom hier één gecentreerde kolom met leesbreedte, en de
lijst in twee kolommen zodat het blok niet als smalle sliert oogt. */
.oa-feat .feature--noimg .feature__grid{ grid-template-columns:1fr; max-width:820px; margin:0 auto; text-align:center; }
.oa-feat .feature--noimg .feature__body p{ margin-left:auto; margin-right:auto; }
.oa-feat .feature--noimg .flist{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,4vw,56px); text-align:left; margin-top:28px; }
.oa-feat .feature--noimg .flist li:nth-last-child(2){ border-bottom:none; }
@media (max-width:700px){
.oa-feat .feature--noimg .flist{ grid-template-columns:1fr; }
.oa-feat .feature--noimg .flist li:nth-last-child(2){ border-bottom:1px solid rgba(59,42,30,.1); }
.oa-feat .feature--noimg .flist li:last-child{ border-bottom:none; }
}
.oa-feat .price-note{ padding:clamp(8px,2vw,24px) 0 clamp(20px,3vw,36px); }
.oa-feat .price-note p{ text-align:center; font-family:var(--dh-serif); font-style:italic; font-size:clamp(20px,2.2vw,26px); color:var(--clay); margin:0; }
.oa-feat .cta-wrap{ padding:clamp(30px,4vw,56px) 0 clamp(40px,5vw,80px); }
@media (max-width:1000px){
.oa-feat .feature__grid{ grid-template-columns:1fr; gap:32px; }
.oa-feat .feature__media{ order:2; }
.oa-feat .feature__media .fig{ max-width:420px; margin:0 auto; }
}
@media (max-width:600px){
.oa-feat .feature__copy{ text-align:center; }
.oa-feat .feature__body p{ margin-left:auto; margin-right:auto; }
.oa-feat .flist li{ justify-content:center; text-align:left; }
.oa-feat .cta{ padding:34px 22px; }
.oa-feat .cta__grid{ align-items:center; text-align:center; gap:20px; }
.oa-feat .cta__heading{ margin-left:auto; margin-right:auto; }
.oa-feat .cta__text{ margin-left:auto; margin-right:auto; }
}
/* ===================== COOKIEBANNER (globaal) ===================== */
/* padding-bottom houdt rekening met de home-indicator op iPhones; env() geeft
alleen een waarde als de viewport-meta viewport-fit=cover bevat (zie
PDH_Header_Footer::viewport_fit). */
.ckbanner{ position:fixed; left:0; right:0; bottom:0; z-index:80; padding:0 clamp(12px,3vw,28px) max(clamp(12px,3vw,28px), env(safe-area-inset-bottom)); display:flex; justify-content:center; transform:translateY(140%); transition:transform .5s cubic-bezier(.16,.84,.44,1); }
.ckbanner.is-open{ transform:none; }
.ckbanner__inner{ max-width:1180px; width:100%; background:var(--espresso-2); color:var(--blush-soft); border-radius:22px; padding:clamp(22px,3vw,34px); box-shadow:0 30px 70px -30px rgba(0,0,0,.6); display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.ckbanner__txt{ flex:1 1 360px; }
/* color + weight met !important: de globale `body h3{color:#3d2b22;font-weight:400 !important}`
maakt deze kop anders donker (onleesbaar op de espresso-banner) en te dun. */
.ckbanner__txt h3{ font-family:var(--dh-serif) !important; font-weight:600 !important; font-size:24px; color:#F4E7DB !important; margin:0 0 8px; }
.ckbanner__txt p{ font-size:14.5px; line-height:1.65; color:rgba(231,205,188,.85); margin:0; }
.ckbanner__txt a{ color:var(--blush); border-bottom:1px solid rgba(210,164,136,.5); text-decoration:none; }
.ckbanner__btns{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ckbtn{ font-family:var(--dh-sans); font-size:14.5px; font-weight:500; padding:13px 24px; min-height:44px; border-radius:40px; border:none; white-space:nowrap; cursor:pointer; transition:.2s; }
.ckbtn--accept{ background:var(--blush); color:var(--espresso-2); }
.ckbtn--accept:hover{ background:#E7CDBC; }
.ckbtn--ghost{ background:transparent; color:var(--blush-soft); border:1px solid rgba(231,205,188,.4); }
.ckbtn--ghost:hover{ background:rgba(231,205,188,.12); }
@media (max-width:560px){ .ckbanner__btns{ width:100%; } .ckbanner__btns .ckbtn{ flex:1 1 auto; text-align:center; } }
/* =====================================================================
HOME — redesign (cosy hero + intro + quote-band + aanbod + reviews + CTA)
1-op-1 uit het ontwerp, gescopet onder .oa-home.
===================================================================== */
:root{ --peach:#F4E3D2; }
.oa-home .hero{ position:relative; overflow:hidden; background:linear-gradient(178deg, var(--cream-2) 0%, #F2E1CE 30%, #EFD9C4 62%, #E6C7AF 100%); }
.oa-home .hero::before{ content:""; position:absolute; left:-140px; bottom:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,252,247,.5), rgba(255,252,247,0) 70%); pointer-events:none; }
/* Padding bewust asymmetrischer (boven minder, onder meer): de hero-content
zit iets bóven het optische midden, in lijn met de binnenpagina's. */
.oa-home .hero__grid{ position:relative; display:grid; grid-template-columns:1fr clamp(290px,28vw,350px); gap:clamp(40px,5vw,84px); align-items:center; padding:clamp(26px,4vw,56px) clamp(24px,5vw,56px) clamp(96px,11vw,172px); min-height:clamp(400px,52vh,560px); min-height:clamp(400px,52svh,560px); }
.oa-home .hero__copy{ align-self:center; }
.oa-home .hero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--cream); display:block; }
.oa-home .hero__headline{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(38px,4.8vw,62px); line-height:1.05; letter-spacing:-.6px; color:var(--espresso); margin:0; }
.oa-home .hero__headline em{ color:var(--clay); }
.oa-home .hero__sub{ font-size:clamp(16px,1.35vw,18.5px); line-height:1.75; color:var(--ink); max-width:42ch; margin:22px 0 0; }
.oa-home .hero__buttons{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:30px; }
.oa-home .hero__photo{ position:relative; align-self:stretch; width:100%; min-height:clamp(360px,34vw,460px); border-radius:clamp(120px,16vw,200px) clamp(120px,16vw,200px) 18px 18px; overflow:hidden; box-shadow:0 40px 80px -42px rgba(59,42,30,.6); }
.oa-home .hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
/* padding-block geeft deze tekstlink een raakvlak van 44px op telefoon; hij
staat naast een echte knop en heeft dezelfde functie. */
.oa-home .arrowlink{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--espresso); padding-block:15px; }
.oa-home .arrowlink:hover{ color:var(--clay); }
.oa-home .arrowlink .arrow{ transition:transform .22s; }
.oa-home .arrowlink:hover .arrow{ transform:translateX(3px); }
.oa-home .intro{ background:var(--cream); }
/* Zijpadding expliciet meegeven: de shorthand "X 0" zette links/rechts op 0 en
overschreef de padding van .wrap. Daardoor stond "Ik kijk naar het geheel"
56px verder naar links dan de hero-kop en de sectiekoppen eronder
(klantfeedback sept. 2026). Nu lijnt de kop uit met de rest van de pagina. */
.oa-home .intro__grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,5vw,76px); align-items:start; padding:clamp(52px,6.5vw,104px) clamp(24px,5vw,56px); }
.oa-home .intro__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(32px,4vw,54px); line-height:1.06; letter-spacing:-.5px; color:var(--espresso); margin:0; }
.oa-home .intro__title em{ color:var(--clay); }
.oa-home .intro__prose p{ font-size:clamp(16px,1.25vw,18px); line-height:1.85; color:var(--ink); margin:0 0 18px; }
.oa-home .intro__prose p:last-child{ margin-bottom:0; }
.oa-home .quote{ position:relative; background:var(--espresso-2); overflow:hidden; }
.oa-home .quote__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; z-index:0; }
.oa-home .quote::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(44,31,22,.5), rgba(44,31,22,.66)); z-index:1; }
.oa-home .quote__inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; padding:clamp(64px,8vw,124px) clamp(24px,4vw,40px); text-align:center; }
.oa-home .quote__mark{ display:block; font-family:var(--dh-serif); font-style:italic; font-weight:600; font-size:clamp(56px,7vw,92px); line-height:1; color:var(--blush); opacity:.85; margin:0 0 4px; }
.oa-home .quote__text{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(24px,3vw,40px); line-height:1.3; color:#F6EADF; margin:0; }
.oa-home .quote__by{ margin-top:38px; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--blush-soft); }
.oa-home .quote__role{ margin-top:7px; font-family:var(--dh-serif); font-style:italic; font-size:15px; letter-spacing:.2px; text-transform:none; color:var(--blush); }
.oa-home .sec{ padding:clamp(52px,6.5vw,100px) 0 clamp(22px,3vw,40px); }
.oa-home .sechead{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,5vw,72px); align-items:end; }
.oa-home .sechead--center{ display:block; text-align:center; max-width:40ch; margin:0 auto; }
.oa-home .sechead__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(30px,3.6vw,48px); line-height:1.08; letter-spacing:-.4px; color:var(--espresso); margin:0; }
.oa-home .sechead__intro{ font-size:16.5px; line-height:1.7; color:var(--ink); margin:0; max-width:46ch; }
.oa-home .offer-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; margin-top:clamp(30px,4vw,46px); }
.oa-home .offer{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid rgba(59,42,30,.08); border-radius:26px; padding:32px 30px 26px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.oa-home .offer::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--blush),var(--clay)); opacity:0; transition:opacity .25s ease; }
.oa-home .offer:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -36px rgba(59,42,30,.5); border-color:rgba(188,107,73,.35); }
.oa-home .offer:hover::before{ opacity:1; }
.oa-home .offer__cover{ position:absolute; inset:0; z-index:1; }
/* Hele kaart klikbaar: content laat kliks doorvallen naar de cover-link. */
.oa-home .offer > :not(.offer__cover){ position:relative; z-index:2; pointer-events:none; }
.oa-home .offer__title{ font-family:var(--dh-serif); font-weight:600; font-size:25px; line-height:1.14; color:var(--espresso); margin:0; letter-spacing:-.3px; min-height:2.2em; }
.oa-home .offer__tagline{ font-family:var(--dh-serif); font-style:italic; font-size:17px; line-height:1.4; color:var(--clay); margin:10px 0 0; min-height:2.6em; }
.oa-home .offer__summary{ font-size:14.5px; line-height:1.7; color:var(--ink); margin:14px 0 0; }
.oa-home .offer__foot{ display:flex; align-items:center; margin-top:auto; padding-top:20px; }
.oa-home .offer__link{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--espresso); }
.oa-home .offer__arrow{ transition:transform .22s; }
.oa-home .offer:hover .offer__arrow{ transform:translateX(4px); }
.oa-home .offer:hover .offer__link{ color:var(--clay); }
.oa-home .sec__action{ display:flex; justify-content:center; margin-top:clamp(30px,4vw,46px); }
.oa-home .reviews{ background:var(--peach); }
.oa-home .review{ background:var(--paper); border:1px solid rgba(59,42,30,.07); border-radius:26px; padding:32px 30px; display:flex; flex-direction:column; box-shadow:0 24px 48px -40px rgba(59,42,30,.5); }
.oa-home .stars{ display:flex; gap:4px; color:var(--clay); margin-bottom:16px; }
.oa-home .stars svg{ width:18px; height:18px; }
.oa-home .review__quote{ font-size:16px; line-height:1.7; color:var(--ink); margin:0 0 22px; }
.oa-home .review__author{ font-family:var(--dh-serif); font-weight:600; font-size:18px; color:var(--espresso); }
.oa-home .review__source{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.oa-home .marquee{ position:relative; margin-top:clamp(30px,4vw,46px); overflow:hidden; }
.oa-home .marquee__track{ display:flex; align-items:stretch; gap:22px; width:max-content; animation:oaMarquee 44s linear infinite; }
.oa-home .marquee:hover .marquee__track{ animation-play-state:paused; }
.oa-home .marquee .review{ flex:0 0 360px; width:360px; }
@keyframes oaMarquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 11px)); } }
.oa-home .cta-wrap{ padding:clamp(52px,6.5vw,100px) 0 clamp(40px,5vw,80px); }
.oa-home .cta__copy{ flex:1 1 540px; }
.oa-home .cta__heading{ max-width:24ch; }
html.reveal-on .oa-home .r{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1); }
html.reveal-on .oa-home .r.r--in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.reveal-on .oa-home .r{ opacity:1 !important; transform:none !important; } .oa-home .marquee__track{ animation:none; } }
@media (max-width:1000px){
.oa-home .hero__grid{ grid-template-columns:1fr; gap:30px; text-align:center; padding:clamp(28px,6vw,48px) clamp(24px,5vw,56px) clamp(74px,18vw,104px); min-height:0; }
.oa-home .hero__sub{ margin-left:auto; margin-right:auto; }
.oa-home .hero__buttons{ justify-content:center; }
.oa-home .hero__photo{ max-width:300px; width:100%; margin:0 auto; justify-self:center; height:auto; aspect-ratio:4/5; min-height:0; order:-1; }
.oa-home .intro__grid{ grid-template-columns:1fr; gap:22px; text-align:center; }
.oa-home .intro__prose p{ margin-left:auto; margin-right:auto; }
.oa-home .sechead{ grid-template-columns:1fr; gap:16px; text-align:center; }
.oa-home .sechead__intro{ margin-left:auto; margin-right:auto; }
}
@media (max-width:900px){
.oa-home .cta__grid{ flex-direction:column; align-items:center; text-align:center; gap:16px; }
.oa-home .cta__copy{ flex:0 0 auto; }
.oa-home .cta__heading{ margin:0 auto; }
.oa-home .cta__action{ width:100%; }
.oa-home .cta__action .btn{ width:100%; justify-content:center; }
}
@media (max-width:600px){
.oa-home .hero__headline{ font-size:clamp(30px,7.6vw,40px); }
.oa-home .hero__sub{ font-size:16px; }
/* Op telefoon de handmatige regelafbreking loslaten en titels mooi laten
balanceren, zodat koppen niet raar afbreken of tegen de rand vallen. */
.oa-home .intro__title br, .oa-home .sechead__title br{ display:none; }
.oa-home .intro__title, .oa-home .sechead__title, .oa-home .quote__text{ text-wrap:balance; }
.pdh-partners__title{ text-wrap:balance; }
.oa-home .offer-grid{ grid-template-columns:1fr; }
.oa-home .offer{ text-align:center; align-items:center; }
.oa-home .offer__title, .oa-home .offer__tagline{ min-height:0; }
.oa-home .offer__foot{ justify-content:center; }
.oa-home .review{ text-align:center; align-items:center; }
.oa-home .stars{ justify-content:center; }
.oa-home .marquee .review{ flex-basis:300px; width:300px; }
}
/* =====================================================================
404 — redesign
===================================================================== */
.oa-404 .e404{ position:relative; overflow:hidden; background:linear-gradient(178deg,var(--cream-2) 0%, #F2E1CE 32%, #EFD9C4 66%, #E6C7AF 100%); }
.oa-404 .e404::before{ content:""; position:absolute; right:-140px; top:-150px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,252,247,.5), rgba(255,252,247,0) 70%); pointer-events:none; }
.oa-404 .e404__inner{ position:relative; max-width:760px; margin:0 auto; text-align:center; padding:clamp(56px,9vw,128px) clamp(24px,4vw,40px) clamp(96px,12vw,168px); }
.oa-404 .e404__num{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(96px,20vw,220px); line-height:.9; color:var(--blush); opacity:.55; letter-spacing:-2px; margin:0; }
.oa-404 .e404__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(34px,5vw,60px); line-height:1.06; letter-spacing:-.5px; color:var(--espresso); margin:14px 0 0; }
.oa-404 .e404__lede{ font-size:clamp(16px,1.5vw,19px); line-height:1.75; color:var(--ink); max-width:48ch; margin:20px auto 0; }
.oa-404 .e404__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.oa-404 .e404__links{ display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:center; margin-top:40px; }
.oa-404 .e404__links a{ font-size:14px; color:var(--espresso); background:var(--paper); border:1px solid rgba(59,42,30,.1); padding:9px 18px; border-radius:30px; transition:background .2s, color .2s, border-color .2s; }
.oa-404 .e404__links a:hover{ background:var(--clay); color:#F7EFE6; border-color:var(--clay); }
@media (max-width:600px){ .oa-404 .e404__actions .btn{ width:100%; justify-content:center; } }
/* =====================================================================
JURIDISCHE PAGINA'S (AV / Privacy / Cookiebeleid) — redesign
===================================================================== */
.oa-legal .lhero{ position:relative; overflow:hidden; background:linear-gradient(178deg,var(--cream-2) 0%, #F2E1CE 36%, #EFD9C4 72%, #E6C7AF 100%); padding-bottom:clamp(74px,9vw,128px); }
.oa-legal .lhero__inner{ position:relative; max-width:var(--dh-maxw); margin:0 auto; padding:clamp(40px,5vw,76px) clamp(24px,4vw,40px) 0; text-align:center; }
.oa-legal .lhero__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(44px,6.4vw,84px); line-height:1.0; letter-spacing:-.8px; color:var(--espresso); margin:0; }
.oa-legal .lhero__title em{ color:var(--clay); }
.oa-legal .lhero__meta{ margin-top:22px; font-size:14.5px; color:var(--ink); display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; }
.oa-legal .lhero__meta b{ font-weight:500; color:var(--espresso); }
.oa-legal .lhero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--cream-2); display:block; }
/* Doc transparant (= pagina-kleur), zodat hero-boog → doc → footer-boog één
doorlopende pagina-kleur is en er geen kleurbalk bij de footer ontstaat. */
.oa-legal .doc{ background:transparent; }
.oa-legal .doc__inner{ max-width:1180px; margin:0 auto; padding:clamp(40px,5vw,72px) clamp(24px,4vw,40px) clamp(48px,6vw,88px); }
.oa-legal .lead{ font-size:clamp(17px,1.5vw,20px); line-height:1.7; color:var(--ink); margin:0 0 18px; max-width:80ch; }
.oa-legal .sec{ margin:0 0 clamp(30px,3.6vw,50px); padding-top:clamp(30px,3.6vw,50px); border-top:1px solid rgba(59,42,30,.1); scroll-margin-top:120px; }
.oa-legal .sec:first-child{ border-top:none; padding-top:0; }
.oa-legal .sec__h{ display:flex; gap:14px; align-items:baseline; font-family:var(--dh-serif); font-weight:600; font-size:clamp(24px,2.4vw,32px); color:var(--espresso); letter-spacing:-.3px; margin:0 0 16px; }
.oa-legal .sec__n{ flex:0 0 auto; font-size:.74em; color:var(--clay); font-variant-numeric:tabular-nums; }
/* Leesbreedte begrenzen: zonder cap liep een regel op een breed scherm op tot
~133 tekens (comfortabel is 45-80). */
.oa-legal .doc p{ font-size:16.5px; line-height:1.8; color:var(--ink); margin:0 0 14px; max-width:72ch; }
.oa-legal .doc p:last-child{ margin-bottom:0; }
.oa-legal .doc strong{ color:var(--espresso); font-weight:500; }
.oa-legal .doc h4{ font-family:var(--dh-sans); font-weight:500; font-size:16.5px; color:var(--espresso); margin:20px 0 8px; }
.oa-legal .doc ul, .oa-legal .doc ol.alpha{ margin:0 0 14px; padding-left:22px; }
.oa-legal .doc li{ font-size:16px; line-height:1.75; color:var(--ink); margin:0 0 8px; max-width:70ch; }
.oa-legal .doc ul li::marker{ color:var(--clay); }
.oa-legal .callout{ margin:14px 0; }
.oa-legal .callout p{ margin:0 0 14px; font-size:16.5px; }
.oa-legal .doc a.inl{ color:var(--clay); border-bottom:1px solid rgba(188,107,73,.4); }
.oa-legal .doc a.inl:hover{ color:var(--espresso); }
.oa-legal address.contact-block{ font-style:normal; font-size:16px; line-height:1.8; color:var(--ink); }
/* cookie-instellingen (cookiebeleid) */
.oa-legal .ckcard{ background:var(--cream); border:1px solid rgba(59,42,30,.1); border-radius:18px; padding:8px 24px; margin:8px 0 4px; }
.oa-legal .ckrow{ display:flex; align-items:flex-start; gap:20px; padding:22px 0; border-bottom:1px solid rgba(59,42,30,.1); }
.oa-legal .ckrow:last-child{ border-bottom:none; }
.oa-legal .ckrow__txt{ flex:1 1 auto; }
.oa-legal .ckrow__txt h4{ margin:0 0 4px; font-size:17px; }
.oa-legal .ckrow__txt p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.6; }
.oa-legal .switch{ position:relative; flex:0 0 auto; width:52px; height:30px; }
.oa-legal .switch input{ opacity:0; width:0; height:0; position:absolute; }
.oa-legal .switch__slider{ position:absolute; inset:0; background:rgba(59,42,30,.2); border-radius:30px; transition:.25s; cursor:pointer; }
.oa-legal .switch__slider::before{ content:""; position:absolute; height:24px; width:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.oa-legal .switch input:checked + .switch__slider{ background:var(--clay); }
.oa-legal .switch input:checked + .switch__slider::before{ transform:translateX(22px); }
.oa-legal .switch input:disabled + .switch__slider{ background:var(--blush); cursor:not-allowed; opacity:.8; }
.oa-legal .ckactions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.oa-legal .ckstatus{ margin-top:14px; min-height:1.2em; font-style:italic; font-family:var(--dh-serif); font-size:17px; color:var(--clay); }
.oa-legal .btn{ display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:500; padding:15px 26px; border-radius:40px; white-space:nowrap; border:none; cursor:pointer; transition:background .22s, transform .22s, color .22s; }
.oa-legal .btn--primary{ background:var(--espresso); color:#F7EFE6; }
.oa-legal .btn--primary:hover{ background:var(--clay); transform:translateY(-1px); }
.oa-legal .btn .arrow{ width:16px; height:16px; transition:transform .22s; }
.oa-legal .btn--primary:hover .arrow{ transform:translateX(3px); }
/* =====================================================================
AFSPRAAK — redesign hero (gradient + boog); de wizard eronder is het
echte, werkende boekingssysteem (geharmoniseerd met het ontwerp).
===================================================================== */
.oa-afspraak .afhero{ position:relative; overflow:hidden; text-align:center; background:linear-gradient(178deg,var(--cream-2) 0%, #F2E1CE 34%, #EFD9C4 70%, #E6C7AF 100%); padding-bottom:clamp(74px,9vw,132px); }
.oa-afspraak .afhero__inner{ position:relative; max-width:760px; margin:0 auto; padding:clamp(44px,6vw,84px) clamp(24px,4vw,40px) 0; }
.oa-afspraak .afhero__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(42px,6vw,76px); line-height:1.02; letter-spacing:-.8px; color:var(--espresso); margin:0; }
.oa-afspraak .afhero__title em{ color:var(--clay); }
.oa-afspraak .afhero__lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.75; color:var(--ink); max-width:52ch; margin:22px auto 0; }
.oa-afspraak .afhero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--cream-2); display:block; }
/* booking-kaart geharmoniseerd met het ontwerp (paper, rond, schaduw) */
/* Booking-kaart volledig wit (kaart + stepper + body) — de paper-kaart (#FFFCF7)
schemerde anders als cream strook door onder de witte stappen. */
body.pdh-bg-cream2 .pdh-booking{ background:#fff; border:1px solid rgba(59,42,30,.09); box-shadow:0 30px 60px -44px rgba(59,42,30,.5); }
body.pdh-bg-cream2 .pdh-stepper,
body.pdh-bg-cream2 .pdh-booking__body,
body.pdh-bg-cream2 .pdh-booking__step{ background:#fff; }
/* Booking staat buiten .oa-page, dus de globale `body h3{font-weight:400 !important}`
maakt de stap-koppen te dun. Ontwerp (.step h3 / .step__lead / .chosen) wil
weight 600 én gecentreerde koppen, lead en gekozen-datum. */
.pdh-booking__step h3{ font-weight:600 !important; text-align:center; }
.pdh-booking__lead, .pdh-booking__chosen{ text-align:center; }
/* =====================================================================
AANBOD-DETAIL (dienst) — redesign template, vult zich met backend-velden
===================================================================== */
.oa-dienst .hero{ position:relative; overflow:hidden; background:linear-gradient(178deg,var(--cream-2) 0%, #F2E1CE 34%, #EFD9C4 70%, #E6C7AF 100%); padding-bottom:clamp(74px,9vw,132px); }
.oa-dienst .hero__inner{ position:relative; max-width:var(--dh-maxw); margin:0 auto; padding:clamp(34px,4vw,56px) clamp(24px,4vw,40px) 0; }
/* padding-block: dit is een navigatielink (terug naar het aanbod), geen inline
tekstlink, dus die hoort een raakvlak van 44px te hebben op telefoon. */
.oa-dienst .hero__back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--clay); padding-block:10px; margin-bottom:12px; }
.oa-dienst .hero__back:hover{ color:var(--espresso); }
.oa-dienst .hero__title{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(42px,6vw,76px); line-height:1.02; letter-spacing:-.8px; color:var(--espresso); margin:0; max-width:18ch; }
.oa-dienst .hero__lead{ max-width:60ch; margin:20px 0 0; font-family:var(--dh-serif); font-style:italic; font-size:clamp(19px,1.8vw,24px); line-height:1.6; color:var(--clay); }
.oa-dienst .hero__arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(46px,6vw,96px); color:var(--cream-2); display:block; }
.oa-dienst .detail{ padding:clamp(36px,5vw,72px) 0 clamp(20px,3vw,40px); }
.oa-dienst .detail__grid{ display:grid; grid-template-columns:1fr clamp(300px,32%,380px); gap:clamp(36px,5vw,72px); align-items:start; }
.oa-dienst .prose p{ font-size:clamp(16px,1.2vw,17.5px); line-height:1.85; color:var(--ink); margin:0 0 18px; }
.oa-dienst .prose p:last-child{ margin-bottom:0; }
.oa-dienst .prose em{ color:var(--clay); }
.oa-dienst .detail__block{ margin-top:clamp(36px,4vw,52px); }
.oa-dienst .detail__h{ font-family:var(--dh-serif); font-weight:600; font-size:clamp(24px,2.6vw,32px); color:var(--espresso); margin:0 0 20px; letter-spacing:-.3px; }
.oa-dienst .flist{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.oa-dienst .flist li{ position:relative; padding-left:34px; font-size:16px; line-height:1.6; color:var(--ink); }
.oa-dienst .flist li::before{ content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%; background:var(--blush-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233B2A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; }
.oa-dienst .infocard{ position:sticky; top:104px; background:var(--paper); border:1px solid rgba(59,42,30,.1); border-radius:24px; padding:clamp(26px,3vw,34px); box-shadow:0 30px 60px -44px rgba(59,42,30,.5); }
.oa-dienst .infocard__price{ font-family:var(--dh-serif); font-weight:600; font-size:clamp(36px,4vw,52px); line-height:1; color:var(--espresso); }
.oa-dienst .infocard__price small{ display:block; font-family:var(--dh-sans); font-weight:400; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.oa-dienst .infocard__meta{ list-style:none; margin:22px 0 26px; padding:22px 0 0; border-top:1px solid rgba(59,42,30,.1); display:grid; gap:14px; }
.oa-dienst .infocard__meta li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.oa-dienst .infocard__meta svg{ width:19px; height:19px; color:var(--clay); flex:0 0 auto; margin-top:1px; }
.oa-dienst .infocard__note{ font-size:12.5px; line-height:1.6; color:var(--muted); margin:16px 0 0; text-align:center; }
.oa-dienst .btn--block{ width:100%; justify-content:center; }
.oa-dienst .who{ background:var(--cream); }
.oa-dienst .who__inner{ max-width:var(--dh-maxw); margin:0 auto; padding:clamp(44px,5vw,80px) clamp(24px,4vw,40px); display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(28px,5vw,72px); align-items:start; }
.oa-dienst .who__h{ font-family:var(--dh-serif); font-weight:500; font-size:clamp(28px,3.2vw,42px); color:var(--espresso); margin:0; letter-spacing:-.3px; }
.oa-dienst .who__inner p{ font-size:clamp(16px,1.2vw,17.5px); line-height:1.85; color:var(--ink); margin:0; }
.oa-dienst .cta-wrap{ padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,80px); }
.oa-dienst .cta__copy{ flex:1 1 480px; }
.oa-dienst .cta__heading{ max-width:22ch; }
html.reveal-on .oa-dienst .r{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1); }
html.reveal-on .oa-dienst .r.r--in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.reveal-on .oa-dienst .r{ opacity:1 !important; transform:none !important; } }
@media (max-width:920px){
.oa-dienst .detail__grid{ grid-template-columns:1fr; gap:34px; }
.oa-dienst .infocard{ position:static; }
.oa-dienst .who__inner{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:900px){
/* De flex-basis van 480px (regel hierboven wint van de generieke .oa-page
mobiele reset) werd in de kolom-layout een hóógte van 480px: enorm gat
tussen CTA-tekst en knop op telefoon. */
.oa-dienst .cta__copy{ flex:0 0 auto; }
}
/* =====================================================================
EXACTE ONTWERP-KLEUREN op de redesign-pagina's.
De site forceert globaal #3d2b22 op koppen (!important) en Lato/#3d2b22 op
body-tekst; dat overschrijft de ontwerp-kleuren. Hier zetten we per .oa-page
de exacte tokens terug (--ink voor tekst, --espresso voor koppen).
===================================================================== */
.oa-page, .oa-page p, .oa-page li, .oa-page address, .oa-page .lead { color: var(--ink); }
.oa-page h1, .oa-page h2, .oa-page h3, .oa-page h4, .oa-page h5 { color: var(--espresso) !important; }
/* De site forceert óók font-weight:400 !important op alle koppen, waardoor de
redesign-koppen (Cormorant 500/600) te dun renderen → "afmetingen kloppen niet".
Hier zetten we de ontwerp-gewichten terug. */
.oa-page h1, .oa-page h2, .oa-page h3, .oa-page h4, .oa-page h5, .oa-page h6 { font-weight: 500 !important; }
.oa-page .offer__title { font-weight: 600 !important; }
/* accenten in clay waar het ontwerp dat vraagt (winnen via eigen specificiteit) */
.oa-page em, .oa-page .hero__lead, .oa-page .sec__n, .oa-page .offer__tagline,
.oa-page .arrowlink, .oa-page .hero__back, .oa-page .ckstatus { color: var(--clay); }
/* Voorkom een dunne (subpixel) haarlijn tussen de hero-gradient/boog en de
eropvolgende sectie. De volgende sectie 1px laten overlappen dekt die af. */
.oa-feat .hero + .feature,
.oa-over .hero + .feature { margin-top: -1px; }
/* ============================================================
SAMENWERKENDE PARTIJEN — doorlopende logo-strook (marquee)
Widget: pdh-partners. Naadloze loop door de set 2x te renderen
en de track -50% te verschuiven (marge per item, geen flex-gap,
zodat -50% exact één set verschuift).
============================================================ */
/* Zelfde verticale ritmiek als .oa-home .sec, zodat de ruimte boven/onder
consistent is met de andere secties (CTA komt zo niet ver weg te staan). */
.pdh-partners{ --pdh-partners-h:56px; --pdh-partners-gap:64px; padding:clamp(52px,6.5vw,100px) 0 clamp(22px,3vw,40px); text-align:center; }
.pdh-partners__title{ font-family:var(--dh-serif,"Cormorant Garamond",serif); font-weight:500; font-size:clamp(30px,3.6vw,48px); line-height:1.08; letter-spacing:-.4px; text-transform:none; color:var(--espresso,#3B2A1E); margin:0 0 clamp(28px,3.8vw,46px); }
.pdh-partners__viewport{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.pdh-partners__track{ display:flex; align-items:center; width:max-content; animation:pdhPartners 40s linear infinite; }
.pdh-partners:hover .pdh-partners__track{ animation-play-state:paused; }
.pdh-partners__item{ flex:0 0 auto; margin-right:var(--pdh-partners-gap,64px); display:flex; align-items:center; }
.pdh-partners__item img{ height:var(--pdh-partners-h,56px); width:auto; display:block; }
.pdh-partners__item a{ display:flex; align-items:center; }
.pdh-partners.is-grayscale .pdh-partners__item img{ filter:grayscale(1); opacity:.62; transition:filter .3s ease, opacity .3s ease; }
.pdh-partners.is-grayscale .pdh-partners__item:hover img{ filter:none; opacity:1; }
@keyframes pdhPartners{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Bewerkbaar tekstblok (o.a. Huisregels) — nette, leesbare opmaak. */
.pdh-editable-doc h2{ font-family:var(--dh-serif,"Cormorant Garamond",serif); font-weight:500; color:var(--espresso,#3B2A1E); font-size:clamp(22px,2.4vw,30px); margin:1.6em 0 .5em; }
.pdh-editable-doc h3{ font-family:var(--dh-serif,"Cormorant Garamond",serif); font-weight:500; color:var(--espresso,#3B2A1E); font-size:clamp(18px,1.8vw,22px); margin:1.4em 0 .4em; }
.pdh-editable-doc p,
.pdh-editable-doc li{ color:var(--ink,#5a4a3f); line-height:1.8; }
.pdh-editable-doc ul,
.pdh-editable-doc ol{ padding-left:1.2em; margin:0 0 1.1em; }
.pdh-editable-doc li{ margin:.3em 0; }
@media (prefers-reduced-motion: reduce){
.pdh-partners__viewport{ -webkit-mask-image:none; mask-image:none; }
.pdh-partners__track{ animation:none; flex-wrap:wrap; justify-content:center; gap:clamp(28px,4vw,56px); width:auto; }
.pdh-partners__item{ margin-right:0; }
}
/* ══════ Uniforme hero's op binnenpagina's ══════
Alle binnenpagina's krijgen dezelfde hero-hoogte met de tekst verticaal
gecentreerd tussen header en boog. Home houdt zijn eigen grote hero met
foto; Over mij doet mee met de centrering maar houdt zijn editoriale
opbouw (naam + portret). */
/* Eén maat voor alle binnenpagina's. De tekst staat wiskundig in het midden
van het zichtbare vlak tussen header en boog: flex-centrering binnen een
vaste min-height, waarbij padding-bottom = padding-top + booghoogte zodat
de boog niet meetelt in de centrering. */
.oa-feat .hero, .oa-aanbod .hero, .oa-contact .hero, .oa-dienst .hero,
.oa-afspraak .afhero, .oa-legal .lhero, .oa-over .hero{
display:flex; flex-direction:column; justify-content:center;
min-height:clamp(360px,36vw,520px);
/* Bewust asymmetrisch: de tekst zit iets bóven het optische midden
(boven minder padding dan onder-minus-boog) — dat oogt rustiger. */
padding-top:clamp(28px,3.5vw,52px);
padding-bottom:calc(clamp(56px,7vw,108px) + clamp(46px,6vw,96px));
}
/* De inners hadden een eigen top-padding als afstandhouder; binnen de
flex-centrering zou die de tekst weer omlaag duwen. */
.oa-legal .lhero__inner, .oa-afspraak .afhero__inner, .oa-dienst .hero__inner{ padding-top:0; }
@media (max-width:600px){
/* Compactere hero's op telefoon — gecentreerd blijft, hoogte schaalt terug. */
.oa-feat .hero, .oa-aanbod .hero, .oa-contact .hero, .oa-dienst .hero,
.oa-afspraak .afhero, .oa-legal .lhero{ min-height:260px; }
.oa-over .hero{ min-height:0; }
/* Geen handmatige regelafbrekingen op telefoon: laat titels natuurlijk en
gebalanceerd vallen in plaats van op rare plekken te breken. */
.oa-over .hero__name br{ display:none; }
.oa-over .hero__name,
.oa-feat .hero__title, .oa-aanbod .hero__title, .oa-contact .hero__title,
.oa-afspraak .afhero__title, .oa-legal .lhero__title,
.oa-feat .feature__title, .oa-over .feature__title{ text-wrap:balance; }
/* Tekst verder van de schermrand: ondergrens zijmarges 24 → 28px. */
.oa-page .wrap,
.oa-home .quote__inner,
.oa-over .band__inner,
.oa-aanbod .note__inner,
.oa-404 .e404__inner,
.oa-legal .lhero__inner, .oa-legal .doc__inner,
.oa-afspraak .afhero__inner,
.dh-footer__inner{ padding-left:28px; padding-right:28px; }
}
/* Elementor geeft zijn widgets standaard de typografie uit de "kit" mee
(Roboto). Dat gebeurt via variabelen, dus we zetten die binnen onze secties
op onze eigen fonts. Zo hoeven we nergens met !important te vechten en
blijven onze eigen regels (zoals .hero__name met de serif) gewoon leidend. */
.oa-el {
--e-global-typography-primary-font-family: var(--dh-sans);
--e-global-typography-secondary-font-family: var(--dh-sans);
--e-global-typography-text-font-family: var(--dh-sans);
--e-global-typography-accent-font-family: var(--dh-sans);
}
/* Koppen en tekstblokken erven de opmaak van de klasse die eromheen staat,
zodat .hero__name, .feature__title enzovoort blijven werken zoals voorheen. */
/* De kop binnen een widget moet exact de opmaak van het blok eromheen volgen.
Elders in dit bestand staan nog regels uit een eerdere opzet die met
!important op .elementor-widget-heading h1/h2/h3 mikken (lettertype, kleur en
op mobiel zelfs de lettergrootte). Die zijn hier ongewenst, dus deze shim
moet ze kunnen overrulen; vandaar het !important. De opmaak zelf blijft
gewoon uit de klasse op het blok komen. */
/* Koppen en alinea's krijgen hun klasse op de tag zelf (zie PDH_Blocks), dus
daar is geen correctie nodig: de opmaakregels grijpen op precies hetzelfde
element aan als in de handgeschreven versie.
Het wikkelblok van Elementor mag wel niets van zichzelf doorgeven. Elementor
zet er standaard de typografie van zijn eigen "kit" op (onder meer een andere
regelafstand), en omdat het blok in de erfelijke lijn zit, zakt dat door naar
de tekst erbinnen. Alles op inherit dus. */
.oa-el .elementor-widget-text-editor,
.oa-el .elementor-widget-html {
font: inherit;
letter-spacing: inherit;
color: inherit;
text-align: inherit;
}
/* Afbeeldingen: Elementor zet ze inline-block, onze boogvormen verwachten block. */
.oa-el .elementor-widget-image img,
.oa-el .arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oa-el .elementor-widget-image { line-height: 0; }
.oa-el figure.wp-caption { margin: 0; }
/* === ELEMENTOR-COMPATIBILITEIT =============================================
Structuurregels: de wrappers die Elementor om elk element zet tellen binnen
.oa-el niet mee in de opmaak, zodat de DOM voor de CSS gelijk blijft aan de
handgeschreven versie.
========================================================================= */
.oa-el .elementor-container,
.oa-el .elementor-widget-wrap,
.oa-el .elementor-widget-container,
.oa-el .oa-pass,
.oa-el.elementor-section > .elementor-container { display: contents !important; }
/* Kolommen krijgen van Elementor een breedte in procenten; binnen onze grids
bepaalt de grid-track de breedte. Elementor's stylesheet laadt na de onze,
vandaar !important. Twee uitzonderingen: op .cta__action en .hero__photo zet
het ontwerp zelf een breedte, en die moet blijven staan. */
.oa-el .elementor-column { width: auto !important; }
/* Twee blokken krijgen op telefoon van het ontwerp bewust de volle breedte.
Omdat de regel hierboven met !important moet werken, herhalen we die twee
hier op dezelfde breakpoint als het ontwerp (max-width: 600px). */
@media (max-width: 600px) {
.oa-el .elementor-column.cta__action,
.oa-el .elementor-column.hero__photo { width: 100% !important; }
}
/* Elementor maakt van elke kolom een flexrij. Onze blokken zijn gewone
blokken waarin de inhoud onder elkaar staat. */
.oa-el .elementor-column:not(.oa-pass) { display: block; }
/* Elementor zet standaard ruimte tussen widgets via deze variabelen. Die zetten
we op nul; de ruimte komt uit onze eigen opmaak en uit de standaarden van het
thema die verderop op de wikkelblokken staan. Niet met een margin-regel doen:
die zou juist die standaarden blokkeren. */
.oa-el .elementor-element {
--widgets-spacing: 0px 0px;
--widgets-spacing-y: 0px;
--widgets-spacing-x: 0px;
}
/* ============================================================
AFSPRAAK WIJZIGEN OF ANNULEREN (link uit de bevestigingsmail)
Hergebruikt de agenda- en tijdknoppen van het boekingsformulier.
============================================================ */
/* Het thema zet de inhoud in een flex-container; zonder volle breedte krimpt
de wrapper tot de kaart en staat die links in beeld. */
.pdh-beheer-pagina { flex: 1 1 100%; width: 100%; max-width: 100%; }
.pdh-beheer { box-sizing: border-box; width: 100%; padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 104px); }
.pdh-beheer__kaart { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid rgba(59, 42, 30, .1); border-radius: 22px; padding: clamp(26px, 4vw, 44px); box-shadow: 0 18px 40px -28px rgba(61, 43, 34, .35); }
.pdh-beheer__eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--clay, #bd7858); }
.pdh-beheer__titel { margin: 0 0 18px; font-family: var(--dh-serif, 'Cormorant Garamond', Georgia, serif); font-weight: 500; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; color: var(--espresso, #3d2b22); }
.pdh-beheer p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--ink, #5a4436); }
.pdh-beheer__afspraak { display: flex; flex-direction: column; gap: 2px; margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; background: var(--cream-2, #f5ede4); }
.pdh-beheer__afspraak span { font-size: 13px; color: var(--ink, #75543f); }
.pdh-beheer__afspraak strong { font-weight: 500; font-size: 18px; color: var(--espresso, #3d2b22); }
.pdh-beheer__afspraak--nieuw { background: #efe3d3; border: 1px solid rgba(189, 120, 88, .35); }
.pdh-beheer__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 6px; }
.pdh-beheer__knoppen .pdh-btn { cursor: pointer; }
.pdh-beheer__terug { color: var(--espresso, #3d2b22); text-decoration: underline !important; text-underline-offset: 3px; font-size: 15px; }
.pdh-beheer__melding { padding: 12px 16px; border-radius: 12px; background: #f6e3dc; color: #7a3b25 !important; }
.pdh-beheer__contact { margin-top: 18px !important; font-size: 15px !important; }
.pdh-beheer__contact a, .pdh-booking__note a, .pdh-booking__step[data-step="4"] a { color: var(--clay, #bd7858); text-decoration: underline; text-underline-offset: 3px; }
.pdh-beheer__cal { margin: 8px 0 14px; }
.pdh-beheer__cal a.pdh-cal__day { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.pdh-beheer__pijl { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(59, 42, 30, .2); color: var(--espresso, #3d2b22); text-decoration: none; font-size: 18px; }
.pdh-beheer__pijl.is-uit { opacity: .3; }
.pdh-beheer__gekozen { font-size: 15px !important; margin: 6px 0 10px !important; }
.pdh-beheer__tijden .pdh-slots__list { display: flex; flex-wrap: wrap; gap: 10px; }
.pdh-beheer__tijden a.pdh-slot-btn { text-decoration: none; }
.pdh-booking__note { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: #75543f; text-align: center; }