/* ============================================================
DERMATOLOGIE GENT — KIRBY 5 STYLESHEET
Fonts: Cormorant Garamond (serif display) + Jost (sans body)
Colors: beige/cream bg, goud accent, dark text
============================================================ */
/* ---- Reset & Variables ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--goud: #b8975a;
--goud-light: #c9a96e;
--cream: #fdf5f0;
--beige: #f5ede6;
--beige-dark: #edddd4;
--wit: #ffffff;
--text: #1a1a1a;
--text-light: #5a5a5a;
--text-muted: #9a9a9a;
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Jost', 'Helvetica Neue', sans-serif;
--max-width: 1440px;
--gutter: clamp(24px, 5vw, 80px);
--header-height: 160px;
}
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-weight: 300;
color: var(--text);
background: var(--wit);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
/* ============================================================
HEADER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--wit);
border-bottom: 1px solid rgba(184, 151, 90, 0.15);
transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06); }
/* Header krimpt subtiel bij het scrollen (desktop): beide rijen blijven,
logo + hoofdrij worden dunner. */
@media (min-width: 1201px) {
.header-main { transition: padding 0.3s ease; }
.logo img { transition: width 0.3s ease; }
.logo-script { transition: font-size 0.3s ease; }
.logo-caps { transition: font-size 0.3s ease, margin 0.3s ease; }
.site-header.is-scrolled .header-main { padding-top: 8px; padding-bottom: 8px; }
.site-header.is-scrolled .logo img { width: clamp(110px, 12vw, 150px); }
.site-header.is-scrolled .logo-script { font-size: clamp(26px, 3vw, 38px); }
.site-header.is-scrolled .logo-caps { font-size: clamp(8px, 0.8vw, 10px); }
}
/* Top nav bar */
.header-top {
display: flex;
justify-content: flex-end;
padding: 10px var(--gutter);
border-bottom: 1px solid rgba(184, 151, 90, 0.12);
}
.header-top-nav {
display: flex;
align-items: center;
gap: 32px;
}
.header-top-nav a {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
transition: color 0.2s;
}
.header-top-nav a:hover { color: var(--goud); }
/* Afspraak pill button */
.btn-afspraak {
background: var(--goud);
color: var(--wit) !important;
padding: 6px 20px;
border-radius: 30px;
font-size: 10px !important;
letter-spacing: 0.14em !important;
font-weight: 500 !important;
transition: background 0.2s !important;
}
.btn-afspraak:hover { background: var(--goud-light) !important; }
/* Main nav */
.header-main {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px var(--gutter);
}
/* Logo */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-script {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(32px, 4vw, 52px);
color: var(--goud);
letter-spacing: 0.02em;
}
.logo-caps {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(9px, 1vw, 12px);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text);
text-align: center;
margin-top: 2px;
}
.logo img { width: clamp(140px, 18vw, 220px); }
/* Main nav links */
.header-main-nav {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 44px);
}
.header-main-nav a {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
transition: color 0.2s;
position: relative;
}
.header-main-nav a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 1px;
background: var(--goud);
transition: width 0.3s;
}
.header-main-nav a:hover,
.header-main-nav a.is-active { color: var(--goud); }
.header-main-nav a:hover::after,
.header-main-nav a.is-active::after { width: 100%; }
/* ============================================================
HERO
============================================================ */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - var(--header-height));
background: var(--wit);
overflow: hidden;
max-width: 1800px;
margin: 0 auto;
}
.hero-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(48px, 8vw, 100px) var(--gutter) clamp(48px, 8vw, 80px);
}
.hero-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(36px, 5vw, 72px);
line-height: 1.15;
color: var(--text);
margin-bottom: 40px;
max-width: 540px;
}
.hero-text {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
max-width: 420px;
margin-bottom: 12px;
}
.hero-naam {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 40px;
}
/* Service links list */
.hero-diensten {
list-style: none;
border-top: 1px solid rgba(0,0,0,0.1);
margin-top: auto;
max-width: 420px;
}
.hero-diensten li {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.hero-diensten a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
transition: color 0.2s, padding-left 0.2s;
}
.hero-diensten a:hover {
color: var(--goud);
padding-left: 6px;
}
.hero-diensten .arrow {
font-size: 14px;
transition: transform 0.2s;
}
.hero-diensten a:hover .arrow { transform: translateX(4px); }
.hero-right {
background: var(--beige);
position: relative;
overflow: hidden;
}
.hero-right img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* ============================================================
UITGELICHT — vaste tekst links, foto-slider rechts
============================================================ */
.uitgelicht {
background: var(--wit);
padding: 0 0 clamp(32px, 4vw, 60px);
}
.uitgelicht-inner {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: var(--max-width);
margin: 0 auto;
margin-top: clamp(40px, 6vw, 80px);
}
/* Op de behandelingenpagina's is uitgelicht de EERSTE sectie: inhoud/foto
strak tegen de nav (zoals de homepage-hero), geen ruimte erboven.
De marge blijft enkel op de homepage (waar uitgelicht de 2e sectie is). */
.uitgelicht:first-child .uitgelicht-inner { margin-top: 0; }
/* Linkerkant: vaste tekst */
.uitgelicht-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.uitgelicht-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 24px;
}
.uitgelicht-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(28px, 4vw, 56px);
line-height: 1.15;
color: var(--text);
margin-bottom: 28px;
max-width: 480px;
}
.uitgelicht-tekst {
font-size: 16px;
line-height: 1.8;
color: var(--text-light);
max-width: 380px;
margin-bottom: 36px;
}
.btn-uitgelicht {
display: inline-flex;
align-items: center;
background: var(--goud);
color: var(--wit);
padding: 10px 28px;
border-radius: 30px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background 0.2s;
align-self: flex-start;
}
.btn-uitgelicht:hover { background: var(--goud-light); }
/* Meerdere uitgelicht-knoppen netjes onder elkaar */
.uitgelicht-knoppen {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
/* Rechterkant: foto slider */
.uitgelicht-slider-wrap {
overflow: hidden;
background: var(--beige);
--uitgelicht-max-hoogte: 620px;
max-height: var(--uitgelicht-max-hoogte);
}
.uitgelicht-slider-wrap .splide {
height: 100%;
}
.uitgelicht-slider-wrap .splide__track {
height: 100%;
}
.uitgelicht-slider-wrap .splide__list {
height: 100%;
}
.uitgelicht-foto-slide {
height: 100%;
}
.uitgelicht-foto-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* Paginatie puntjes op de foto */
.uitgelicht-slider-wrap .splide__pagination {
bottom: 20px;
gap: 8px;
}
.uitgelicht-slider-wrap .splide__pagination__page {
width: 6px;
height: 6px;
background: rgba(255,255,255,0.5);
border: none;
opacity: 1;
transition: background 0.2s, transform 0.2s;
}
.uitgelicht-slider-wrap .splide__pagination__page.is-active {
background: var(--wit);
transform: scale(1.3);
}
@media (max-width: 768px) {
.uitgelicht-inner { grid-template-columns: 1fr; }
.uitgelicht-slider-wrap { height: 280px; order: -1; } /* foto boven de tekst op mobiel */
}
/* ============================================================
BEHANDELINGEN SPOTLIGHT
============================================================ */
.behandelingen-spotlight {
padding: clamp(32px, 4vw, 60px) 0 clamp(80px, 10vw, 140px);
overflow: hidden;
background: var(--wit);
}
.section-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
padding: 0 var(--gutter);
margin-bottom: 32px;
display: block;
}
.behandelingen-slider .splide__track {
padding: 0 var(--gutter);
}
/* Card: vaste breedte zodat altijd 3 op rij passen */
.behandeling-card {
padding: 0 28px;
}
/* Paginatie bolletjes verborgen — pijltjes volstaan */
.behandelingen-spotlight .splide__pagination {
display: none;
}
.behandeling-foto {
aspect-ratio: 4/3;
overflow: hidden;
margin-bottom: 24px;
background: var(--beige);
}
.behandeling-foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.behandeling-card:hover .behandeling-foto img { transform: scale(1.03); }
.behandeling-naam {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 12px;
}
.behandeling-quote {
font-family: var(--font-display);
font-style: italic;
font-size: 15px;
color: var(--text-light);
margin-bottom: 16px;
line-height: 1.5;
}
.behandeling-tekst {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
margin-bottom: 24px;
}
.behandeling-ctas {
display: flex;
align-items: center;
gap: 24px;
}
.btn-behandeling {
display: inline-flex;
background: var(--goud);
color: var(--wit);
padding: 9px 22px;
border-radius: 30px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: background 0.2s;
}
.btn-behandeling:hover { background: var(--goud-light); }
.link-meer-info {
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s;
}
.link-meer-info:hover { color: var(--goud); }
/* ============================================================
OVER ONS SECTIE (homepage)
============================================================ */
.over-ons-home {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--beige);
min-height: 500px;
}
.over-ons-foto {
overflow: hidden;
}
.over-ons-foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.over-ons-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(48px, 7vw, 100px) var(--gutter);
}
.over-ons-tekst {
font-size: 16px;
line-height: 1.85;
color: var(--text-light);
margin-bottom: 36px;
max-width: 460px;
}
.over-ons-arts {
display: flex;
align-items: center;
gap: 20px;
}
.arts-portret {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--beige-dark);
}
.arts-portret img {
width: 100%;
height: 100%;
object-fit: cover;
}
.arts-info {
display: flex;
flex-direction: column;
gap: 3px;
}
.arts-info strong {
font-family: var(--font-display);
font-size: 18px;
font-weight: 400;
color: var(--text);
}
.arts-info span {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.02em;
}
/* ============================================================
USP TICKER BALK
============================================================ */
.usp-balk {
background: var(--beige);
border-top: 1px solid rgba(184, 151, 90, 0.2);
border-bottom: 1px solid rgba(184, 151, 90, 0.2);
padding: 18px 0;
overflow: hidden;
}
.usp-ticker {
display: flex;
white-space: nowrap;
animation: ticker 30s linear infinite;
}
.usp-item {
display: inline-block;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-light);
padding: 0 48px;
position: relative;
}
.usp-item::after {
content: '✓';
color: var(--goud);
margin-left: 48px;
font-size: 13px;
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================================
WERKWIJZE SECTIE
============================================================ */
.werkwijze {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--wit);
padding: clamp(60px, 8vw, 120px) 0;
}
.werkwijze-foto {
overflow: hidden;
max-height: 600px;
}
.werkwijze-foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.werkwijze-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: clamp(40px, 6vw, 80px);
}
.werkwijze-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.12;
color: var(--text);
margin-bottom: 18px;
max-width: 480px;
}
.werkwijze-tekst {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
max-width: 460px;
margin-bottom: 30px;
}
.werkwijze-tekst p { margin: 0 0 12px; }
.werkwijze-tekst p:last-child { margin-bottom: 0; }
.werkwijze-stappen {
list-style: none;
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 460px;
margin-bottom: 36px;
}
.werkwijze-stap {
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 13px;
}
.stap-check {
color: var(--goud);
font-size: 16px;
line-height: 1.6;
flex-shrink: 0;
}
.stap-tekst {
font-size: 16px;
color: var(--text);
line-height: 1.6;
}
.btn-afspraak-werkwijze {
display: inline-flex;
background: var(--goud);
color: var(--wit);
padding: 10px 28px;
border-radius: 30px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background 0.2s;
margin-top: 8px;
}
.btn-afspraak-werkwijze:hover { background: var(--goud-light); }
/* ============================================================
PROMO BANNER
============================================================ */
.promo-banner {
width: clamp(600px, 75%, 1100px);
margin: 0 auto clamp(60px, 8vw, 120px);
overflow: hidden;
}
.promo-banner img {
width: 100%;
height: auto;
opacity: 0.85;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--wit);
border-top: 1px solid rgba(0,0,0,0.08);
padding: clamp(40px, 6vw, 80px) var(--gutter) 0;
}
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
padding-bottom: clamp(40px, 5vw, 60px);
max-width: var(--max-width);
margin: 0 auto;
align-items: start;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-col a,
.footer-col p,
.footer-col span {
font-size: 14px;
color: var(--text-light);
line-height: 1.6;
margin: 0;
transition: color 0.2s;
}
.footer-contact-info > span {
display: block;
}
.footer-contact-info {
display: flex;
flex-direction: column;
}
/* Witregel tussen het adres-blok en het tel/email-blok */
.footer-contact-info .footer-tel {
margin-top: 1em;
}
.footer-col a:hover { color: var(--goud); }
/* Contact kolom */
.footer-contact-col {
align-items: flex-start;
}
.footer-contact-col .footer-adres {
white-space: pre-line;
}
.btn-afspraak-footer {
display: inline-flex;
background: var(--goud);
color: var(--wit) !important;
padding: 10px 24px;
border-radius: 30px;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
transition: background 0.2s;
margin-top: 8px;
transform: translateX(-24px);
}
.btn-afspraak-footer:hover { background: var(--goud-light); }
.footer-bottom {
border-top: 1px solid rgba(0,0,0,0.08);
padding: 20px 0;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
max-width: var(--max-width);
margin: 0 auto;
}
.footer-bottom a,
.footer-bottom span {
font-size: 13px;
color: var(--text-muted);
transition: color 0.2s;
}
.footer-bottom a:hover { color: var(--goud); }
/* Major Tom-credit rechts uitgelijnd in de onderbalk (nam de plaats over van
het verwijderde "C"-monogram). */
.footer-majortom {
margin-left: auto;
}
@media (max-width: 768px) {
.footer-inner {
grid-template-columns: 1fr;
gap: 32px;
}
/* Footer-navigatie weg op mobiel (te lang/onduidelijk); menu loopt via de
zwevende hamburger. Enkel contact + onderbalk blijven. */
.footer-nav-col { display: none; }
.btn-afspraak-footer {
transform: none;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 24px 0;
}
.footer-majortom {
margin-left: 0;
}
}
/* ============================================================
OVERFLOW FIXES — voorkom horizontale scroll op mobiel
============================================================ */
html, body {
overflow-x: clip; /* clip i.p.v. hidden: houdt overflow tegen maar breekt position:sticky niet */
max-width: 100%;
}
.splide__track {
overflow: hidden !important;
}
.usp-balk {
overflow: hidden;
max-width: 100vw;
}
.promo-banner {
max-width: 100%;
overflow: hidden;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
:root { --gutter: 24px; }
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero-right { height: 55vw; order: -1; } /* foto boven de tekst op mobiel */
.uitgelicht-slide { grid-template-columns: 1fr; }
.uitgelicht-foto { height: 280px; }
.over-ons-home { grid-template-columns: 1fr; }
.over-ons-foto { height: 280px; }
.werkwijze { grid-template-columns: 1fr; }
.werkwijze-foto { height: 280px; }
.behandeling-card { width: 300px !important; }
}
/* ============================================================
MOBIEL MENU
============================================================ */
/* Hamburger knop — alleen zichtbaar op mobiel */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 200;
}
.nav-toggle span {
display: block;
width: 24px;
height: 1.5px;
background: var(--text);
transition: transform 0.3s, opacity 0.3s;
transform-origin: center;
}
/* Kruis animatie als menu open is */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobiel menu overlay */
.mobile-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--wit);
z-index: 150;
padding: 80px var(--gutter) 24px;
overflow-y: auto;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.mobile-nav.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 0;
}
.mobile-nav-links a {
font-family: var(--font-display);
font-size: clamp(19px, 4.5vw, 25px);
font-weight: 300;
color: var(--text);
padding: 9px 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
transition: color 0.2s, padding-left 0.2s;
}
.mobile-nav-links a:hover {
color: var(--goud);
padding-left: 8px;
}
.mobile-nav-afspraak {
order: -1;
margin-bottom: 24px !important;
margin-top: 0 !important;
border-bottom: none !important;
display: inline-flex !important;
background: var(--goud);
color: var(--wit) !important;
padding: 12px 28px !important;
border-radius: 30px;
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.14em;
text-transform: uppercase;
width: fit-content;
}
/* Zwevende menuknop — subtiel rond knopje rechtsboven, verschijnt na het
eerste scherm (alleen mobiel). Opent hetzelfde #mobile-nav. */
.nav-floating {
display: none;
position: fixed;
top: 16px;
right: 16px;
z-index: 200;
width: 47px;
height: 47px;
border-radius: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: var(--wit);
border: 1px solid rgba(184, 151, 90, 0.25);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* Zelfde streepjes als de gewone header-burger (.nav-toggle span) zodat ze
even scherp/dun ogen. Geen transform op de knop → geen GPU-laag-blur. */
.nav-floating span {
display: block;
width: 24px;
height: 1px;
background: var(--text);
transition: transform 0.3s, opacity 0.3s;
transform-origin: center;
}
.nav-floating.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-floating.is-open span:nth-child(2) { opacity: 0; }
.nav-floating.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1200px) {
/* Onder 1200px wordt de volledige nav te breed -> de hamburger neemt over
(i.p.v. de logo te laten krimpen). Header wordt statisch + zwevende knop,
net zoals voorheen op mobiel. */
.site-header { position: static; }
.header-main { padding: 16px 24px; }
.header-top { display: none; }
.header-main-nav { display: none; }
.nav-toggle { display: flex; }
.mobile-nav { display: block; }
.nav-floating { display: flex; }
.nav-floating.is-shown,
.nav-floating.is-open {
opacity: 1;
pointer-events: all;
}
}
/* ============================================================
BEHANDELINGENPAGINA — lijst + tiles + detail
============================================================ */
/* Lijst sectie */
.behandelingen-overzicht {
padding: clamp(60px, 7vw, 100px) 0 0;
background: var(--wit);
}
.behandelingen-overzicht-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
}
.sectie-titel {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 32px;
}
.behandelingen-lijst {
list-style: none;
border-top: 1px solid rgba(0,0,0,0.08);
columns: 2;
column-gap: var(--gutter);
}
.behandelingen-lijst-item {
break-inside: avoid;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.behandelingen-lijst-item a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
gap: 12px;
transition: color 0.2s, padding-left 0.2s;
}
.behandelingen-lijst-item a:hover {
color: var(--goud);
padding-left: 6px;
}
.lijst-titel {
font-size: 16px;
font-weight: 400;
letter-spacing: 0.02em;
}
.lijst-subtitel {
font-size: 14px;
color: var(--text-muted);
margin-left: auto;
white-space: nowrap;
}
.lijst-arrow {
font-size: 14px;
color: var(--goud);
flex-shrink: 0;
}
/* Tiles sectie */
.behandelingen-tiles {
padding: clamp(60px, 7vw, 100px) 0;
background: var(--wit);
}
.behandelingen-tiles-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
}
.tiles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.tile-card {
background: var(--wit);
transition: transform 0.3s ease;
}
.tile-card:hover { transform: translateY(-4px); }
.tile-link { display: block; }
/* Volgorde: titel + subtitel (header) → foto → tekst + cta (content) */
.tile-header { padding: 0 4px; }
.tile-foto {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--beige);
margin: 14px 0 18px;
}
.tile-foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.tile-card:hover .tile-foto img { transform: scale(1.04); }
.tile-foto-placeholder {
width: 100%;
height: 100%;
background: var(--beige-dark);
}
.tile-content { padding: 0 4px; }
.tile-titel {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 6px;
}
.tile-subtitel {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 0;
}
.tile-omschrijving {
font-size: 16px;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 14px;
}
.tile-cta {
font-size: 13px;
font-weight: 500;
color: var(--goud);
letter-spacing: 0.06em;
}
/* Content blokken (layout builder) */
.content-blokken {
padding: clamp(60px, 7vw, 100px) 0;
background: var(--wit);
border-top: 1px solid rgba(0,0,0,0.06);
}
.content-blokken-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
flex-direction: column;
gap: 48px;
}
.layout-rij {
display: grid;
gap: 48px;
}
.layout-rij.layout-1col { grid-template-columns: 1fr; }
.layout-rij.layout-2col { grid-template-columns: 1fr 1fr; }
.layout-rij.layout-3col { grid-template-columns: 1fr 1fr 1fr; }
.layout-kolom { min-width: 0; }
.block-text {
font-size: 15px;
line-height: 1.8;
color: var(--text-light);
}
.block-text p { margin-bottom: 1em; }
.block-text p:last-child { margin-bottom: 0; }
.block-heading {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(24px, 3vw, 36px);
color: var(--text);
margin-top: 30px;
margin-bottom: 16px;
}
.block-image img {
width: 100%;
height: auto;
}
.block-image figcaption {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
}
.block-quote {
border-left: 3px solid var(--goud);
padding-left: 24px;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(18px, 2.5vw, 24px);
color: var(--text-light);
margin: 0;
}
/* Detail pagina */
.behandeling-detail { background: var(--wit); }
.detail-header {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
max-width: var(--max-width);
margin: 0 auto;
padding: clamp(48px, 6vw, 80px) var(--gutter);
gap: var(--gutter);
align-items: center;
}
.detail-breadcrumb {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.08em;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.detail-breadcrumb a:hover { color: var(--goud); }
.detail-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.15;
color: var(--text);
margin-bottom: 12px;
}
/* Optioneel bijvoegsel bij de titel: kleiner dan de titel, groter dan de
subtitel, zelfde kleur, strak onder de titel (als een regelafbreking). */
.detail-titel-extra {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(19px, 2.3vw, 27px);
line-height: 1.25;
color: var(--text);
margin-top: -6px;
margin-bottom: 16px;
}
.detail-subtitel {
font-size: 13px;
color: var(--text-muted);
letter-spacing: 0.06em;
margin-bottom: 20px;
}
.detail-intro {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
margin-bottom: 32px;
max-width: 480px;
}
.detail-header-foto {
overflow: hidden;
border-radius: 2px;
background: var(--beige);
aspect-ratio: 4/3;
}
.detail-header-foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-tekst {
background: var(--beige);
padding: clamp(48px, 6vw, 80px) 0;
}
.detail-tekst-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--gutter);
font-size: 16px;
line-height: 1.85;
color: var(--text-light);
}
.detail-tekst-inner p { margin-bottom: 1.2em; }
.detail-tekst-inner h2, .detail-tekst-inner h3 {
font-family: var(--font-display);
font-weight: 300;
color: var(--text);
margin: 1.5em 0 0.5em;
}
/* Hoofdtekst is nu een builder: tekst-blokken binnen de detailtekst behouden
de leesbare detail-typografie (16px/1.85) i.p.v. de compactere block-text. */
.detail-tekst-inner .block-text {
font-size: 16px;
line-height: 1.85;
}
/* Responsive */
@media (max-width: 1024px) {
.tiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
/* Lijst-overzicht weg op mobiel; de tiles eronder tonen dezelfde
behandelingen al. */
.behandelingen-overzicht { display: none; }
/* 1 kolom + fijn licht lijntje tussen elke behandeling */
.tiles-grid { grid-template-columns: 1fr; gap: 0; }
.tile-card { padding: 28px 0; border-top: 1px solid rgba(0,0,0,0.07); }
.tile-card:first-child { border-top: none; padding-top: 0; }
.detail-header { grid-template-columns: 1fr; }
.detail-header-foto { order: -1; }
.layout-rij.layout-2col,
.layout-rij.layout-3col { grid-template-columns: 1fr; }
}
/* CTA button blok */
.block-cta {
display: flex;
margin-top: 30px;
margin-bottom: 36px;
}
.block-cta a {
display: inline-flex;
align-items: center;
background: var(--goud);
color: var(--wit);
padding: 12px 32px;
border-radius: 30px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: background 0.2s;
}
.block-cta a:hover { background: var(--goud-light); }
.block-cta.align-center { justify-content: center; }
.block-cta.align-right { justify-content: flex-end; }
.block-cta.align-left { justify-content: flex-start; }
/* ============================================================
PRIVACYVERKLARING
============================================================ */
/* Hero met foto */
.privacy-hero-foto {
position: relative;
height: clamp(200px, 30vw, 400px);
overflow: hidden;
}
.privacy-hero-foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.6);
}
.privacy-hero-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: clamp(24px, 4vw, 60px) var(--gutter);
}
.privacy-hero-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(32px, 5vw, 64px);
color: var(--wit);
line-height: 1.1;
}
/* Hero zonder foto */
.privacy-hero-tekst {
padding: clamp(48px, 6vw, 80px) var(--gutter) 0;
max-width: var(--max-width);
margin: 0 auto;
}
.privacy-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(32px, 5vw, 64px);
color: var(--text);
line-height: 1.1;
}
/* Body */
.privacy-body {
padding: clamp(48px, 6vw, 80px) 0 clamp(60px, 8vw, 120px);
}
.privacy-body-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
}
.privacy-intro {
font-size: 16px;
line-height: 1.8;
color: var(--text-light);
max-width: 720px;
margin-bottom: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.content-blokken-privacy {
display: flex;
flex-direction: column;
gap: 48px;
}
/* =============================================================
HUIDSCAN PAGINA
============================================================= */
/* Hero */
.huidscan-hero {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
background: var(--beige);
overflow: hidden;
}
.huidscan-hero-foto {
position: absolute;
inset: 0;
}
.huidscan-hero-foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.huidscan-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(26,26,26,0.65) 40%, rgba(26,26,26,0.2) 100%);
}
.huidscan-hero-content {
position: relative;
z-index: 1;
max-width: var(--max-width);
margin: 0 auto;
padding: clamp(80px, 10vw, 140px) var(--gutter);
max-width: 680px;
padding-right: 0;
padding-left: var(--gutter);
}
.huidscan-hero-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--goud-light);
margin-bottom: 20px;
}
.huidscan-hero-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(32px, 5vw, 60px);
color: var(--wit);
line-height: 1.1;
margin-bottom: 24px;
}
.huidscan-hero-tekst {
font-size: 16px;
line-height: 1.8;
color: rgba(255,255,255,0.85);
max-width: 560px;
margin-bottom: 32px;
}
/* Intro */
.huidscan-intro {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.huidscan-intro-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.huidscan-intro-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(28px, 4vw, 48px);
color: var(--text);
line-height: 1.15;
grid-column: 1 / -1;
margin-bottom: 0;
}
.huidscan-intro-tekst {
font-size: 16px;
line-height: 1.8;
color: var(--text-light);
}
.huidscan-intro-foto img {
width: 100%;
height: 400px;
object-fit: cover;
}
/* Pakket / Prijs */
.huidscan-pakket {
background: var(--beige);
padding: clamp(60px, 8vw, 100px) var(--gutter);
text-align: center;
}
.huidscan-pakket-inner {
max-width: 640px;
margin: 0 auto;
}
.huidscan-pakket-prijs {
font-family: var(--font-display);
font-size: clamp(48px, 8vw, 96px);
font-weight: 300;
color: var(--goud);
line-height: 1;
margin-bottom: 12px;
}
.huidscan-pakket-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(24px, 3vw, 36px);
color: var(--text);
margin-bottom: 32px;
}
.huidscan-pakket-lijst {
list-style: none;
padding: 0;
margin: 0 0 40px;
text-align: left;
display: inline-block;
}
.huidscan-pakket-lijst li {
font-size: 15px;
color: var(--text-light);
line-height: 1.7;
padding: 8px 0 8px 28px;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.huidscan-pakket-lijst li::before {
content: '•';
position: absolute;
left: 0;
color: var(--goud);
font-size: 18px;
}
/* Technologie */
.huidscan-tech {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.huidscan-tech-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.huidscan-tech-tekst {
font-size: 16px;
line-height: 1.8;
color: var(--text-light);
max-width: 800px;
margin: 32px 0;
columns: 2;
column-gap: 48px;
}
.huidscan-tech-foto img {
width: 100%;
max-height: 480px;
object-fit: cover;
}
/* Voordelen grid */
.huidscan-voordelen {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--cream);
}
.huidscan-voordelen-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.huidscan-voordelen-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 3vw, 40px);
}
.huidscan-voordeel {
display: flex;
flex-direction: column;
}
.huidscan-voordeel-foto {
aspect-ratio: 3/2;
overflow: hidden;
margin-bottom: 20px;
}
.huidscan-voordeel-foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.huidscan-voordeel-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: 22px;
color: var(--text);
margin-bottom: 12px;
}
.huidscan-voordeel-tekst {
font-size: 14px;
line-height: 1.75;
color: var(--text-light);
}
@media (max-width: 900px) {
.huidscan-hero { min-height: 400px; }
.huidscan-intro-inner { grid-template-columns: 1fr; }
.huidscan-intro-titel { grid-column: 1; }
.huidscan-tech-tekst { columns: 1; }
.huidscan-voordelen-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.huidscan-voordelen-grid { grid-template-columns: 1fr; }
}
/* =============================================================
/* =============================================================
PAGINA HERO — gedeeld voor Over ons, Contact, Vacatures, Media
Zelfde structuur als .uitgelicht: tekst links, foto rechts
============================================================= */
.pagina-hero {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--wit);
max-width: 1800px;
margin: 0 auto;
}
.pagina-hero-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.pagina-hero-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 24px;
}
.pagina-hero-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(28px, 4vw, 56px);
line-height: 1.15;
color: var(--text);
margin-bottom: 28px;
max-width: 480px;
}
.pagina-hero-tekst {
font-size: 16px;
line-height: 1.8;
color: var(--text-light);
max-width: 380px;
margin-bottom: 36px;
}
.pagina-hero-foto {
background: var(--beige);
overflow: hidden;
--pagina-hero-max-hoogte: 620px;
max-height: var(--pagina-hero-max-hoogte);
}
.pagina-hero-foto img,
.pagina-hero-foto video,
.pagina-hero-foto iframe {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* Hero media: video / Vimeo positionering */
.pagina-hero-media {
position: relative;
}
.pagina-hero-media .pagina-hero-vimeo,
.pagina-hero-media .pagina-hero-vimeo-poster {
position: absolute;
inset: 0;
border: 0;
}
.pagina-hero-media .pagina-hero-vimeo {
z-index: 2;
}
.pagina-hero-media .pagina-hero-vimeo-poster {
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
@media (max-width: 768px) {
.pagina-hero { grid-template-columns: 1fr; }
.pagina-hero-foto { height: 280px; max-height: 280px; }
}
/* =============================================================
OVER ONS PAGINA — content secties
============================================================= */
/* Arts sectie */
.over-ons-arts-sectie {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.over-ons-arts-sectie:nth-of-type(even) {
background: var(--cream);
}
.over-ons-arts-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.over-ons-arts-sectie--omgekeerd .over-ons-arts-inner {
direction: rtl;
}
.over-ons-arts-sectie--omgekeerd .over-ons-arts-content {
direction: ltr;
}
.over-ons-arts-foto img {
width: 100%;
height: 520px;
object-fit: cover;
object-position: top center;
}
.over-ons-arts-naam {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(28px, 4vw, 44px);
color: var(--text);
margin-bottom: 8px;
}
.over-ons-arts-titel {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--goud);
margin-bottom: 24px;
}
.over-ons-arts-bio {
font-size: 16px;
line-height: 1.85;
color: var(--text-light);
}
/* USP balk (hergebruik van homepage stijl) */
.over-ons-usp-balk {
background: var(--beige-dark);
padding: 18px 0;
overflow: hidden;
}
/* Werkwijze */
.over-ons-werkwijze {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--beige);
}
.over-ons-werkwijze-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.over-ons-werkwijze-foto img {
width: 100%;
height: 480px;
object-fit: cover;
}
.over-ons-stappen {
list-style: none;
padding: 0;
margin: 32px 0 40px;
counter-reset: stap-counter;
}
.over-ons-stap {
counter-increment: stap-counter;
padding: 16px 0 16px 52px;
position: relative;
font-size: 16px;
line-height: 1.6;
color: var(--text-light);
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.over-ons-stap::before {
content: counter(stap-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 16px;
font-family: var(--font-display);
font-size: 22px;
font-weight: 300;
color: var(--goud);
}
/* =============================================================
TECHNOLOGIE & INFRASTRUCTUUR — over-ons pagina
============================================================= */
.over-ons-tech {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.over-ons-tech-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.over-ons-tech-titel {
text-align: center;
margin-bottom: clamp(40px, 6vw, 72px);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.over-ons-tech-rijen {
display: flex;
flex-direction: column;
gap: clamp(40px, 6vw, 72px);
}
.over-ons-tech-rij {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
.over-ons-tech-rij--omgekeerd .over-ons-tech-foto {
order: 2;
}
.over-ons-tech-foto img {
width: 100%;
height: clamp(280px, 36vw, 440px);
object-fit: cover;
object-position: center;
}
.over-ons-tech-tekst {
font-size: 16px;
line-height: 1.85;
color: var(--text-light);
}
@media (max-width: 900px) {
.over-ons-tech-rij { grid-template-columns: 1fr; gap: 24px; }
.over-ons-tech-rij--omgekeerd .over-ons-tech-foto { order: 0; }
.over-ons-tech-foto img { height: 240px; }
}
/* Team omgekeerd: foto rechts in plaats van links */
.over-ons-team--omgekeerd .over-ons-team-foto { order: 2; }
/* Team sectie */
.over-ons-team {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--cream);
}
.over-ons-team-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.over-ons-team-foto img {
width: 100%;
height: 420px;
object-fit: cover;
}
.over-ons-team-tekst {
font-size: 16px;
line-height: 1.85;
color: var(--text-light);
margin-top: 24px;
}
@media (max-width: 900px) {
.over-ons-arts-inner,
.over-ons-werkwijze-inner,
.over-ons-team-inner { grid-template-columns: 1fr; direction: ltr; }
.over-ons-arts-foto img,
.over-ons-team-foto img { height: 320px; }
.over-ons-werkwijze-foto img { height: 280px; }
}
/* =============================================================
CONTACT PAGINA
============================================================= */
.contact-sectie {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.contact-sectie-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.contact-blok-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(24px, 3vw, 36px);
color: var(--text);
margin-bottom: 32px;
}
.contact-blok-subtitel {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--goud);
margin: 32px 0 16px;
}
.contact-gegeven {
display: flex;
flex-direction: column;
padding: 14px 0;
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.contact-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.contact-waarde {
font-size: 15px;
color: var(--text);
line-height: 1.5;
text-decoration: none;
}
a.contact-waarde:hover { color: var(--goud); }
.contact-afspraak-btn {
margin-top: 32px;
display: inline-block;
}
.contact-map iframe {
width: 100%;
height: 460px;
border: none;
display: block;
}
@media (max-width: 900px) {
.contact-sectie-inner { grid-template-columns: 1fr; }
.contact-map iframe { height: 320px; }
}
/* =============================================================
VACATURES PAGINA
============================================================= */
.vacatures-intro {
padding: clamp(48px, 6vw, 72px) var(--gutter);
background: var(--cream);
}
.vacatures-intro-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.vacatures-intro-tekst {
font-size: 16px;
line-height: 1.85;
color: var(--text-light);
max-width: 760px;
}
.vacatures-lijst-sectie {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.vacatures-lijst-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.vacatures-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(24px, 3vw, 40px);
margin-top: 40px;
}
.vacature-card {
background: var(--wit);
border: 1px solid var(--goud);
padding: clamp(28px, 3vw, 40px);
}
.vacature-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(22px, 2.5vw, 30px);
color: var(--text);
margin-bottom: 8px;
}
.vacature-type {
display: inline-block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--goud);
margin-bottom: 16px;
}
.vacature-omschrijving {
font-size: 14px;
line-height: 1.75;
color: var(--text-light);
margin-bottom: 24px;
}
.vacatures-leeg {
padding: clamp(80px, 10vw, 140px) var(--gutter);
text-align: center;
background: var(--cream);
}
.vacatures-leeg-inner {
max-width: 560px;
margin: 0 auto;
}
.vacatures-leeg p {
font-size: 16px;
color: var(--text-light);
line-height: 1.75;
margin-bottom: 32px;
}
@media (max-width: 700px) {
.vacatures-grid { grid-template-columns: 1fr; }
}
/* =============================================================
MEDIA PAGINA
============================================================= */
.media-sectie-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: clamp(60px, 8vw, 100px) var(--gutter);
}
.media-persberichten { background: var(--wit); }
.media-fotos { background: var(--cream); }
.media-videos { background: var(--wit); }
.media-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 40px);
margin-top: 40px;
}
.media-item {
background: var(--beige);
padding: clamp(24px, 3vw, 32px);
}
.media-datum {
display: block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
}
.media-item-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(18px, 2vw, 24px);
color: var(--text);
margin-bottom: 12px;
line-height: 1.2;
}
.media-item-tekst {
font-size: 14px;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 20px;
}
.media-video-embed iframe {
width: 100%;
aspect-ratio: 16/9;
border: none;
margin-bottom: 16px;
}
.media-foto-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 40px;
}
.media-foto-item img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.media-foto-item figcaption {
font-size: 12px;
color: var(--text-muted);
padding: 8px 0;
}
@media (max-width: 900px) {
.media-grid { grid-template-columns: 1fr 1fr; }
.media-foto-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.media-grid { grid-template-columns: 1fr; }
.media-foto-grid { grid-template-columns: 1fr; }
}
/* =============================================================
VACATURE KAARTJES — extra stijlen
============================================================= */
.vacature-header {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(184, 151, 90, 0.25);
}
.vacature-korte-omschrijving {
font-size: 14px;
line-height: 1.75;
color: var(--text-light);
margin-bottom: 24px;
flex: 1;
}
.vacature-meer-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--goud);
transition: gap 0.2s;
margin-top: auto;
}
.vacature-meer-link:hover { gap: 10px; }
/* =============================================================
VACATURE DETAIL PAGINA
============================================================= */
.vacature-detail-header {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--wit);
}
.vacature-detail-header-inner {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.vacature-detail-breadcrumb { margin-bottom: 24px; }
.vacature-detail-breadcrumb a {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
transition: color 0.2s;
}
.vacature-detail-breadcrumb a:hover { color: var(--goud); }
.vacature-detail-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(32px, 5vw, 60px);
color: var(--text);
line-height: 1.1;
margin-bottom: 16px;
}
.vacature-detail-foto {
background: var(--beige);
overflow: hidden;
max-height: 620px;
}
.vacature-detail-foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.vacature-detail-body {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--cream);
}
.vacature-detail-body-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 320px;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
.vacature-detail-sectie {
background: var(--wit);
border-left: 2px solid var(--goud);
padding: clamp(24px, 3vw, 36px);
margin-bottom: 24px;
}
.vacature-sectie-titel {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--goud);
margin-bottom: 14px;
}
.vacature-tekst {
font-size: 16px;
line-height: 1.8;
color: var(--text-light);
}
.vacature-tekst ul, .vacature-tekst ol {
padding-left: 20px;
margin: 8px 0;
}
.vacature-tekst li { margin-bottom: 6px; }
.vacature-detail-sidebar-inner {
background: var(--wit);
border: 1px solid var(--goud);
padding: clamp(24px, 3vw, 36px);
position: sticky;
top: calc(var(--header-height) + 24px);
display: flex;
flex-direction: column;
gap: 16px;
}
.vacature-sidebar-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
.vacature-sidebar-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(20px, 2vw, 26px);
color: var(--text);
line-height: 1.2;
}
.vacature-cta-btn {
display: inline-flex;
justify-content: center;
text-align: center;
width: 100%;
}
.vacature-terug-link {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
transition: color 0.2s;
}
.vacature-terug-link:hover { color: var(--goud); }
@media (max-width: 900px) {
.vacature-detail-header { grid-template-columns: 1fr; }
.vacature-detail-foto { max-height: 320px; }
.vacature-detail-body-inner { grid-template-columns: 1fr; }
.vacature-detail-sidebar-inner { position: static; }
}
/* =============================================================
MEDIA ARTIKELS OVERZICHT
============================================================= */
.media-artikels-sectie {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.media-artikels-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.media-artikels-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 40px);
}
.media-artikel-card {
border: 1px solid var(--goud);
display: flex;
flex-direction: column;
}
.media-artikel-foto {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--beige);
}
.media-artikel-foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.media-artikel-foto-link:hover .media-artikel-foto img { transform: scale(1.03); }
.media-artikel-content {
padding: clamp(20px, 2.5vw, 32px);
display: flex;
flex-direction: column;
flex: 1;
}
.media-artikel-datum {
display: block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
}
.media-artikel-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(18px, 2vw, 24px);
color: var(--text);
line-height: 1.2;
margin-bottom: 8px;
}
.media-artikel-titel a { color: inherit; text-decoration: none; }
.media-artikel-titel a:hover { color: var(--goud); }
.media-artikel-bron {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--goud);
margin-bottom: 12px;
}
.media-artikel-intro {
font-size: 14px;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 20px;
flex: 1;
}
@media (max-width: 900px) { .media-artikels-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .media-artikels-grid { grid-template-columns: 1fr; } }
/* =============================================================
MEDIA DETAIL PAGINA
============================================================= */
.media-detail-bron {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--goud);
margin-bottom: 16px;
}
.media-detail-terug {
display: inline-block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 32px;
transition: color 0.2s;
}
.media-detail-terug:hover { color: var(--goud); }
.media-detail-body { background: var(--cream); }
/* Video blok */
.block-video { margin: 0; }
.block-video-embed {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--text);
}
.block-video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.block-video-caption {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
font-style: italic;
}
.block-video-link {
display: inline-block;
color: var(--goud);
font-size: 13px;
word-break: break-all;
}
/* =============================================================
BEHANDELING DETAIL — TAGS
============================================================= */
.detail-tags {
background: var(--cream);
padding: clamp(32px, 4vw, 48px) 0;
}
.detail-tags-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.detail-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-light);
background: var(--wit);
border: 1px solid var(--beige-dark);
padding: 8px 16px;
border-radius: 30px;
text-decoration: none;
transition: none;
}
.detail-tag--link {
border-color: var(--goud);
color: var(--goud);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.detail-tag--link:hover {
background: var(--goud);
color: var(--wit);
}
.detail-tag-arrow {
font-size: 12px;
transition: transform 0.2s;
}
.detail-tag--link:hover .detail-tag-arrow {
transform: translateX(3px);
}
/* Subtiele vorige/volgende-navigatie onderaan de detailpagina */
.detail-nav {
max-width: var(--max-width);
margin: 0 auto;
padding: clamp(24px, 3vw, 32px) var(--gutter) clamp(48px, 7vw, 80px);
}
.detail-nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: clamp(18px, 2.5vw, 28px);
}
.detail-nav-link {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 48%;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
.detail-nav-next { text-align: right; }
.detail-nav-link:hover { color: var(--goud); }
.detail-nav-titel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail-nav-arrow {
color: var(--goud);
font-size: 15px;
flex-shrink: 0;
transition: transform 0.2s;
}
.detail-nav-prev:hover .detail-nav-arrow { transform: translateX(-3px); }
.detail-nav-next:hover .detail-nav-arrow { transform: translateX(3px); }
@media (max-width: 768px) {
/* Onder elkaar op mobiel zodat de titels niet afgekapt worden */
.detail-nav-inner { flex-direction: column; align-items: stretch; gap: 14px; }
.detail-nav-link { max-width: 100%; width: 100%; }
.detail-nav-prev { justify-content: flex-start; }
.detail-nav-next { justify-content: flex-end; text-align: right; }
.detail-nav-titel { white-space: normal; }
}
/* Links in behandeling detail tekst */
.detail-tekst-inner a {
color: var(--text);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--goud);
text-underline-offset: 3px;
transition: color 0.2s;
}
/* CTA-knop binnen de detailtekst: knopstyling behouden (witte tekst, geen
onderlijning) i.p.v. de inline-linkstijl van .detail-tekst-inner a. */
.detail-tekst-inner .block-cta a,
.detail-tekst-inner .block-cta a:hover {
color: var(--wit);
text-decoration: none;
}
.detail-tekst-inner a:hover {
color: var(--goud);
}
/* =============================================================
MEDIA — CATEGORIE FILTER
============================================================= */
.media-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: clamp(32px, 4vw, 48px);
}
.media-filter-btn {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-light);
background: var(--wit);
border: 1px solid var(--beige-dark);
padding: 8px 20px;
border-radius: 30px;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.media-filter-btn:hover {
border-color: var(--goud);
color: var(--goud);
}
.media-filter-btn.is-active {
background: var(--goud);
border-color: var(--goud);
color: var(--wit);
}
/* Categorie labels op de kaartjes */
.media-artikel-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.media-artikel-cats {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.media-artikel-cat {
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--goud);
background: rgba(184, 151, 90, 0.1);
padding: 3px 10px;
border-radius: 20px;
}
/* Geen resultaten */
.media-geen-resultaten {
font-size: 15px;
color: var(--text-muted);
padding: clamp(40px, 6vw, 80px) 0;
text-align: center;
width: 100%;
}
/* =============================================================
WRITER FIELD OUTPUT — paragraph spacing
De CSS reset zet margin: 0 op alles. Writer-velden produceren
...
...
. Hier krijgen paragrafen onderlinge ruimte
binnen content-containers.
============================================================= */
.hero-text p + p,
.uitgelicht-tekst p + p,
.behandeling-tekst p + p,
.over-ons-tekst p + p,
.detail-intro p + p,
.privacy-intro p + p,
.huidscan-hero-tekst p + p,
.huidscan-intro-tekst p + p,
.huidscan-tech-tekst p + p,
.huidscan-voordeel-tekst + p,
.pagina-hero-tekst p + p,
.over-ons-arts-bio p + p,
.over-ons-team-tekst p + p,
.over-ons-tech-tekst p + p,
.vacature-tekst p + p,
.vacatures-intro-tekst p + p,
.block-text p + p,
.block-quote p + p,
.detail-tekst-inner p + p {
margin-top: 1em;
}
/* =============================================================
MENU LANDING PAGE — treatment list with prices
============================================================= */
/* WHY CHOOSE */
.menu-why {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--cream);
}
.menu-why-inner {
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.menu-why-titel {
margin-bottom: clamp(32px, 5vw, 56px);
}
.menu-why-lijst {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px 40px;
text-align: left;
max-width: 760px;
margin: 0 auto;
}
.menu-why-lijst li {
position: relative;
padding-left: 24px;
font-size: 16px;
line-height: 1.65;
color: var(--text-light);
}
.menu-why-lijst li::before {
content: "+";
position: absolute;
left: 0;
top: 0;
color: var(--goud);
font-weight: 400;
font-size: 18px;
line-height: 1.5;
}
/* CATEGORIES */
.menu-categories {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--wit);
}
.menu-categories-inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(56px, 8vw, 96px);
}
.menu-category-head {
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--lijn);
}
.menu-category-titel {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 36px);
font-weight: 400;
line-height: 1.15;
color: var(--text);
margin-bottom: 8px;
}
.menu-category-ondertitel {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
color: var(--text-muted);
margin-bottom: 12px;
}
.menu-category-intro {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
max-width: 760px;
}
.menu-category-intro p + p { margin-top: 1em; }
/* TREATMENTS */
.menu-treatments {
list-style: none;
display: flex;
flex-direction: column;
gap: 32px;
}
.menu-treatment {
/* no extra wrapping */
}
.menu-treatment-naam {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 8px;
}
.menu-treatment-omschrijving {
font-size: 16px;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 14px;
max-width: 760px;
}
.menu-treatment-prijzen {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
max-width: 560px;
}
.menu-treatment-prijzen li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px 24px;
font-size: 15px;
color: var(--goud);
line-height: 1.6;
}
.menu-treatment-prijs-label {
flex-shrink: 0;
}
.menu-treatment-prijs-waarde {
flex-shrink: 0;
font-weight: 400;
}
/* Per-treatment appointment link */
.menu-treatment-afspraak {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0.04em;
color: var(--goud);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.menu-treatment-afspraak::after {
content: "\2192";
}
.menu-treatment-afspraak:hover {
border-bottom-color: var(--goud);
}
/* Optional bullet list inside a treatment (e.g. Laser types) */
.menu-treatment-opties {
margin: 12px 0 16px;
}
.menu-treatment-opties-titel {
font-size: 15px;
color: var(--text);
margin-bottom: 8px;
}
.menu-treatment-opties-lijst {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 4px 24px;
max-width: 720px;
}
.menu-treatment-opties-lijst li {
position: relative;
padding-left: 20px;
font-size: 15px;
line-height: 1.65;
color: var(--text-light);
}
.menu-treatment-opties-lijst li::before {
content: "+";
position: absolute;
left: 0;
top: 0;
color: var(--goud);
}
/* CONSULTATION block */
.menu-consult {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--beige);
}
.menu-consult-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.menu-consult-titel {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 32px);
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 20px;
}
.menu-consult-tekst {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
margin-bottom: 20px;
}
.menu-consult-tekst p + p { margin-top: 1em; }
.menu-consult-prijs {
font-size: 18px;
color: var(--goud);
letter-spacing: 0.02em;
}
/* FOOTER CTA */
.menu-cta {
padding: clamp(60px, 8vw, 100px) var(--gutter);
background: var(--cream);
text-align: center;
}
.menu-cta-inner {
max-width: 640px;
margin: 0 auto;
}
.menu-cta-titel {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--goud);
margin-bottom: 24px;
}
.menu-cta-info {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
font-size: 17px;
color: var(--text);
}
.menu-cta-info a {
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
}
.menu-cta-info a:hover {
color: var(--goud);
}
@media (max-width: 768px) {
.menu-treatment-prijzen li { font-size: 14px; }
}
/* =============================================================
ACCESSIBILITY — skip link
============================================================= */
.skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
clip: auto;
background: var(--text);
color: var(--wit);
padding: 12px 20px;
text-decoration: none;
z-index: 9999;
font-size: 14px;
border-radius: 0 0 4px 0;
}
/* =============================================================
COOKIE BANNER
============================================================= */
.cookie-banner {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
z-index: 9000;
background: var(--wit);
border: 1px solid var(--lijn);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
padding: 20px 24px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.cookie-banner-inner {
display: flex;
flex-direction: column;
gap: 16px;
}
.cookie-banner-tekst {
font-size: 14px;
line-height: 1.6;
color: var(--text-light);
}
.cookie-banner-tekst a {
color: var(--goud);
text-decoration: underline;
}
.cookie-banner-knoppen {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.cookie-knop {
font-family: var(--font-body);
font-size: 13px;
letter-spacing: 0.04em;
padding: 10px 20px;
border: 1px solid var(--lijn);
background: var(--wit);
color: var(--text);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.cookie-knop--primair {
background: var(--goud);
color: var(--wit);
border-color: var(--goud);
}
.cookie-knop--primair:hover {
background: var(--text);
border-color: var(--text);
}
.cookie-knop--secundair:hover {
background: var(--cream);
}
@media (min-width: 600px) {
.cookie-banner-inner {
flex-direction: row;
align-items: center;
}
.cookie-banner-knoppen {
flex-shrink: 0;
}
}
/* =============================================================
404 ERROR PAGINA
============================================================= */
.error-pagina {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(60px, 10vw, 120px) var(--gutter);
background: var(--cream);
gap: clamp(40px, 6vw, 80px);
}
.error-pagina-content {
max-width: 520px;
text-align: center;
}
.error-pagina--met-foto {
justify-content: space-between;
max-width: var(--max-width);
margin: 0 auto;
}
.error-pagina--met-foto .error-pagina-content {
text-align: left;
flex: 1;
max-width: 520px;
}
.error-pagina-foto {
flex: 1;
max-width: 540px;
}
.error-pagina-foto img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.error-pagina-label {
font-family: var(--font-body);
font-size: 13px;
letter-spacing: 0.18em;
color: var(--goud);
text-transform: uppercase;
margin-bottom: 16px;
}
.error-pagina-titel {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 64px);
font-weight: 400;
margin-bottom: 20px;
color: var(--text);
line-height: 1.1;
}
.error-pagina-tekst {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
margin-bottom: 32px;
}
.error-pagina-tekst p + p { margin-top: 1em; }
@media (max-width: 768px) {
.error-pagina--met-foto {
flex-direction: column;
text-align: center;
}
.error-pagina--met-foto .error-pagina-content {
text-align: center;
}
.error-pagina-foto {
max-width: 320px;
}
}
/* =============================================================
RESPONSIVE IMAGES — element baseline
============================================================= */
picture {
display: contents;
}
/* =============================================================
TAAL-SWITCHER (NL · FR · EN) — meertalig
Geïsoleerd blok. Stemt af op de hoofdnav-typografie.
============================================================= */
/* ── Desktop: outline-pill in de hoofdnav (na Contact);
de andere talen verschijnen eronder bij hover/focus. ── */
.lang-switcher--dropdown { position: relative; display: inline-flex; }
.lang-switcher-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
background: transparent;
border: 1px solid rgba(184, 151, 90, 0.45);
border-radius: 30px;
padding: 6px 14px;
line-height: 1;
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.lang-switcher-toggle:hover { color: var(--goud); border-color: var(--goud); }
.lang-switcher-caret {
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
transition: transform 0.2s;
}
.lang-switcher--dropdown:hover .lang-switcher-caret,
.lang-switcher--dropdown:focus-within .lang-switcher-caret { transform: rotate(180deg); }
.lang-switcher-menu {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
display: flex;
flex-direction: column;
min-width: 100%;
background: var(--wit);
border: 1px solid rgba(184, 151, 90, 0.2);
border-radius: 14px;
padding: 4px 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
z-index: 200;
}
.lang-switcher--dropdown:hover .lang-switcher-menu,
.lang-switcher--dropdown:focus-within .lang-switcher-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.lang-switcher .lang-switcher-option {
display: block;
padding: 6px 18px;
text-align: center;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
transition: color 0.2s;
}
.lang-switcher .lang-switcher-option:hover { color: var(--goud); }
.lang-switcher a::after { content: none !important; } /* geen nav-underline in de switcher */
/* ── Mobiel: NL · FR · EN onderaan het uitklapmenu ── */
.lang-switcher--inline {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 28px;
}
.lang-switcher-link {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
border-bottom: none;
padding: 0;
transition: color 0.2s;
}
.lang-switcher-link:hover { color: var(--goud); }
.lang-switcher-link.is-active { color: var(--goud); font-weight: 600; }
.lang-switcher-sep { color: rgba(184, 151, 90, 0.4); font-size: 12px; user-select: none; }
/* override erf-scheidingslijn van .mobile-nav-links a (hogere specificiteit) */
.mobile-nav .lang-switcher-link { border-bottom: none; padding: 0; }
/* =============================================================
CADEAUBON-PILL — outline + cadeau-icoon, in een eigen rosé
accent dat elders op de site niet voorkomt.
============================================================= */
a.btn-cadeaubon {
--cadeau: #b5788a;
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cadeau);
background: transparent;
border: 1px solid var(--cadeau);
border-radius: 30px;
padding: 6px 16px;
line-height: 1;
white-space: nowrap;
transition: background 0.2s, color 0.2s;
}
a.btn-cadeaubon:hover { background: var(--cadeau); color: var(--wit); }
.btn-cadeaubon-icon { width: 14px; height: 14px; flex-shrink: 0; }
.btn-cadeaubon::after { content: none !important; } /* geen nav-underline */
/* Mobiel: gecentreerde pill onder de afspraak-knop, zonder erf-border */
.mobile-nav a.btn-cadeaubon {
order: -1; /* net onder de Afspraak-knop bovenaan */
align-self: flex-start;
width: fit-content;
margin: 0 0 24px;
padding: 12px 28px; /* zelfde formaat als de Afspraak-knop */
font-size: 11px;
letter-spacing: 0.14em;
border: 1px solid var(--cadeau);
}
/* In de footernavigatie: pill op contentbreedte (de kolom rekt kinderen anders
uit) + wat lucht boven de andere links. */
.footer-nav-col a.btn-cadeaubon {
align-self: flex-start;
margin-top: 6px;
}
/* =============================================================
SOCIAL-MEDIA-ICONEN (Instagram + Facebook)
============================================================= */
.socials { display: inline-flex; align-items: center; gap: 12px; }
.socials--top { margin-left: -8px; } /* iets dichter bij de tekstlinks */
a.social-link {
display: inline-flex;
align-items: center;
color: var(--text);
transition: color 0.2s;
}
a.social-link:hover { color: var(--goud); }
.social-link svg { width: 17px; height: 17px; }
.social-link::after { content: none !important; }
/* Footer-variant: onder de afspraak-knop in de contactkolom */
.socials--footer { margin-top: 18px; gap: 14px; }
.socials--footer .social-link { color: var(--text-light); }
.socials--footer .social-link:hover { color: var(--goud); }
.socials--footer .social-link svg { width: 20px; height: 20px; }
/* ============================================================
NIEUWSBRIEF / AANBEVELEN
============================================================ */
/* Hero zonder foto: gecentreerd, één kolom */
.pagina-hero--kort {
display: block;
text-align: center;
padding: clamp(64px, 8vw, 120px) 0 clamp(28px, 4vw, 48px);
}
.pagina-hero--kort .pagina-hero-content {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--gutter);
align-items: center; /* centreer de flex-items (label, titel, tekst) */
}
.pagina-hero--kort .pagina-hero-label { justify-content: center; }
.pagina-hero--kort .pagina-hero-titel { max-width: none; text-wrap: balance; } /* niet de 480px-beperking uit de 2-koloms hero */
.pagina-hero--kort .pagina-hero-tekst { max-width: 620px; text-wrap: pretty; }
.nb-sectie { padding: clamp(46px, 6vw, 84px) 0; }
.nb-sectie--inschrijven { background: var(--wit); }
.nb-sectie--delen { background: var(--beige); }
.nb-inner {
max-width: 860px;
margin: 0 auto;
padding: 0 var(--gutter);
text-align: center;
}
.nb-titel {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(26px, 3.4vw, 40px);
color: var(--text);
margin-bottom: 16px;
}
.nb-tekst {
font-size: 16px;
line-height: 1.75;
color: var(--text-light);
max-width: 640px; /* leesbaar houden binnen de bredere .nb-inner */
margin: 0 auto 32px;
}
.nb-tekst p { margin: 0; }
/* Inschrijfformulier */
/* Breder op groter scherm: voornaam + e-mail + knop op één rij, en de
consent-zin op één lijn. De compacte footer-variant houdt zijn eigen breedte. */
.nb-form { max-width: 800px; margin: 0 auto; }
.nb-velden { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.nb-input {
flex: 1 1 200px;
min-width: 0;
height: 52px;
padding: 0 22px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 30px;
background: var(--wit);
font-family: var(--font-body);
font-size: 14px;
color: var(--text);
transition: border-color 0.2s;
}
.nb-input:focus { outline: none; border-color: var(--goud); }
.nb-input::placeholder { color: var(--text-muted); }
/* Zelfde hoogte als het invoerveld (overschrijft de kleinere .btn-uitgelicht-pil
+ diens align-self). */
.nb-submit { flex: 0 0 auto; height: 52px; padding: 0 30px; align-self: auto; justify-content: center; border: none; cursor: pointer; }
.nb-submit:disabled { opacity: 0.6; cursor: default; }
.nb-consent {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 18px;
text-align: left;
font-size: 12px;
line-height: 1.55;
color: var(--text-muted);
}
.nb-consent input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--goud); }
/* Op de nieuwsbrief-pagina (volledige variant) de consent mee centreren zoals
titel/tekst; de compacte footer-variant blijft links uitgelijnd. */
.nb-form--full .nb-consent { justify-content: center; text-align: center; }
.nb-melding { margin-top: 16px; font-size: 13px; min-height: 1.1em; font-weight: 500; }
.nb-melding.is-success { color: #2e7d52; }
.nb-melding.is-error { color: #b5486a; }
/* Deelknoppen */
.deel-knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.deel-knop {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
border-radius: 30px;
border: 1px solid rgba(0, 0, 0, 0.15);
background: var(--wit);
color: var(--text);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.deel-knop svg { width: 17px; height: 17px; flex-shrink: 0; }
.deel-knop:hover,
.deel-knop.is-copied { border-color: var(--goud); color: var(--goud); }
@media (max-width: 600px) {
.nb-velden { flex-direction: column; }
/* flex: 0 0 auto — anders wordt de flex-basis (200px) in kolomrichting de
HOOGTE i.p.v. de breedte, waardoor de velden loodrecht uitrekken. */
.nb-input, .nb-submit { width: 100%; flex: 0 0 auto; }
}
/* Honeypot: onzichtbaar veld dat bots invullen (weggehouden buiten beeld i.p.v.
display:none, dat sommige bots overslaan). */
.nb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ── Footer-nieuwsbriefbalk ───────────────────────────────────────────────── */
.footer-nieuwsbrief {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: clamp(36px, 5vw, 60px) 0;
/* Ademruimte tussen de scheidingslijn en de footer-kolommen eronder
(footer-inner heeft zelf geen padding-top). */
margin-bottom: clamp(40px, 5vw, 64px);
}
.footer-nieuwsbrief-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
/* Boven uitlijnen: titel staat zo op dezelfde lijn als het invoerveld
(i.p.v. gecentreerd tegen het hogere formulier → dan zakt de titel weg). */
align-items: flex-start;
justify-content: space-between;
gap: 24px 64px;
flex-wrap: wrap;
}
.footer-nb-tekst {
display: flex;
flex-direction: column;
gap: 12px;
/* Groeit mee om de linkerkant te vullen; leesbare maximumbreedte. */
flex: 1 1 360px;
max-width: 600px;
}
.footer-nb-tekst strong {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(24px, 2.6vw, 32px);
color: var(--text);
line-height: 1.15;
}
.footer-nb-tekst span {
font-size: 15px;
color: var(--text-light);
line-height: 1.6;
}
/* Compacte variant (footer): links uitgelijnd, geen naam-veld. */
.nb-form--compact {
max-width: 440px;
margin: 0;
flex: 0 1 440px;
}
.nb-form--compact .nb-velden { justify-content: flex-start; }
.nb-form--compact .nb-consent { margin-top: 12px; font-size: 11px; }
@media (max-width: 768px) {
.footer-nieuwsbrief-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
/* flex resetten: in kolomrichting zou flex-basis anders de HOOGTE bepalen. */
.footer-nb-tekst { flex: 0 0 auto; max-width: none; }
.nb-form--compact { width: 100%; max-width: none; flex: none; }
}