:root {
color-scheme: light;
--navy: #0a2c52;
--navy-diep: #061f3b;
--petrol: #1b8b8e;
--petrol-inkt: #11686b;
--petrol-hover: #0c5558;
--petrol-zacht: #e3f1f1;
--wit: #ffffff;
--vlak: #f1f4f7;
--lijn: #dbe2e9;
--tekst: #16263b;
--tekst-zacht: #4a5a6d;
--invul: #8a5a00;
--invul-bg: #fff4d6;
--fout: #b42318;
--fout-bg: #fdecea;
--goed: #11686b;
--font-kop: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-tekst: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--max: 1180px;
--rond: 14px;
--rond-klein: 8px;
--balk-h: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
margin: 0;
background: var(--wit);
color: var(--tekst);
font-family: var(--font-tekst);
font-size: 1.0625rem;
line-height: 1.65;
text-rendering: optimizeLegibility;
padding-bottom: var(--balk-h);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol-inkt); text-underline-offset: 3px; }
a:hover { color: var(--petrol-hover); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-kop); color: var(--navy); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.35rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.005em; }
p { margin: 0; }
.tekst-breed > * + * { margin-top: 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.overslaan { position: absolute; left: 12px; top: -60px; background: var(--navy); color: var(--wit); padding: 10px 16px; border-radius: var(--rond-klein); z-index: 100; font-weight: 600; }
.overslaan:focus { top: 12px; color: var(--wit); }
.binnen {
max-width: var(--max);
margin-inline: auto;
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.sectie { padding-block: clamp(56px, 7vw, 104px); }
.sectie--vlak { background: var(--vlak); }
.sectie--navy { background: var(--navy); color: #dbe6f1; }
.sectie--navy h2, .sectie--navy h3 { color: var(--wit); }
.label {
display: inline-block;
font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--petrol-inkt);
margin-bottom: 14px;
}
.sectie--navy .label { color: #7fd0d2; }
.inleiding { color: var(--tekst-zacht); font-size: 1.125rem; max-width: 62ch; }
.sectie-kop { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 720px; }
.sectie-kop .label { margin-bottom: 0; }
.sectie--navy .inleiding { color: #c5d4e3; }
.knop {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 50px; padding: 12px 22px;
border-radius: 999px; border: 2px solid transparent;
font: 600 1rem/1.2 var(--font-tekst); text-decoration: none; cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knop svg { width: 20px; height: 20px; flex: none; }
.knop--primair { background: var(--petrol-inkt); color: var(--wit); }
.knop--primair:hover { background: var(--petrol-hover); color: var(--wit); }
.knop--rand { border-color: var(--navy); color: var(--navy); background: transparent; }
.knop--rand:hover { background: var(--navy); color: var(--wit); }
.knop--licht { background: var(--wit); color: var(--navy); }
.knop--licht:hover { background: var(--petrol-zacht); color: var(--navy); }
.knop--rand-licht { border-color: rgba(255,255,255,.55); color: var(--wit); }
.knop--rand-licht:hover { background: rgba(255,255,255,.1); color: var(--wit); border-color: var(--wit); }
.knop--uit { background: var(--vlak); color: var(--tekst-zacht); border: 2px dashed var(--lijn); cursor: not-allowed; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.invul {
display: inline; background: var(--invul-bg); color: var(--invul);
border: 1.5px dashed #d9a520; border-radius: 6px; padding: 1px 7px;
font-size: .9em; font-weight: 600; font-style: normal;
}
.conceptbalk {
background: var(--invul-bg); color: #5c3c00; border-bottom: 1px solid #f0d58a;
font-size: .9rem; padding-block: 9px;
}
.conceptbalk p { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.conceptbalk strong { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.kop {
position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
background: rgba(255,255,255,.97);
border-bottom: 1px solid var(--lijn);
}
.kop__rij { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.kop__logo { display: block; flex: none; text-decoration: none; }
.kop__logo img { width: 220px; height: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a {
display: block; padding: 10px 12px; border-radius: var(--rond-klein);
color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .97rem;
}
.nav a:hover { color: var(--petrol-inkt); background: var(--vlak); }
.nav a[aria-current="page"] { color: var(--petrol-inkt); box-shadow: inset 0 -2px 0 var(--petrol); border-radius: 0; }
.kop__cta { flex: none; }
.menuknop {
display: none; margin-left: auto; align-items: center; gap: 8px;
background: none; border: 1.5px solid var(--lijn); border-radius: var(--rond-klein);
min-height: 44px; padding: 8px 14px; font: 600 .95rem var(--font-tekst); color: var(--navy); cursor: pointer;
}
.menuknop svg { width: 20px; height: 20px; }
@media (max-width: 1100px) {
.nav a { padding: 10px 8px; font-size: .93rem; }
.kop__logo img { width: 190px; }
}
@media (max-width: 980px) {
.kop__rij { min-height: 68px; gap: 12px; }
.kop__logo img { width: 180px; }
.menuknop { display: inline-flex; }
.kop__cta { display: none; }
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--wit); border-bottom: 1px solid var(--lijn); box-shadow: 0 16px 30px -18px rgba(10,44,82,.35); }
.nav.open { display: block; }
.nav ul { flex-direction: column; gap: 0; padding: 8px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px)); }
.nav a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--vlak); border-radius: 0; }
.nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--petrol); padding-left: 12px; }
.nav__cta { display: block !important; margin-top: 14px; }
.nav__cta a { border-bottom: 0; padding: 12px 22px; color: var(--wit); }
}
.nav__cta { display: none !important; }
@media (max-width: 380px) { .kop__logo img { width: 156px; } }
.hero { padding-block: clamp(36px, 6vw, 84px) clamp(48px, 6vw, 88px); }
.hero__raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__tekst { display: grid; gap: 22px; min-width: 0; }
.hero__tekst .inleiding { font-size: 1.2rem; }
.hero__beeld { position: relative; min-width: 0; }
.hero__beeld .foto { aspect-ratio: 5 / 4; border-radius: 22px 22px 22px 96px; }
.hero__lijn {
display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 8px 0 0; list-style: none;
color: var(--tekst-zacht); font-weight: 600; font-size: .98rem;
}
.hero__lijn li { display: inline-flex; align-items: center; gap: 8px; }
.hero__lijn svg { width: 18px; height: 18px; color: var(--petrol); flex: none; }
@media (max-width: 860px) {
.hero__raster { grid-template-columns: 1fr; }
.hero__beeld { order: -1; }
.hero__beeld .foto { aspect-ratio: 16 / 10; border-radius: 18px 18px 18px 60px; }
}
.paginakop { background: var(--vlak); padding-block: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--lijn); }
.paginakop .binnen { display: grid; gap: 16px; }
.paginakop .label { margin-bottom: 0; }
.kruimel { font-size: .9rem; color: var(--tekst-zacht); }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.kruimel li + li::before { content: "/"; margin-right: 6px; color: var(--lijn); }
.kruimel a { color: var(--tekst-zacht); }
.foto {
position: relative; overflow: hidden; margin: 0;
background:
radial-gradient(120% 90% at 85% 15%, rgba(27,139,142,.55), transparent 60%),
linear-gradient(160deg, #123b66, var(--navy-diep));
border-radius: var(--rond);
max-width: 100%;
}
.foto img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.foto img.mislukt { display: none; }
.foto__leeg {
position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 600; letter-spacing: .04em; padding: 16px;
}
.foto__leeg > div { display: grid; justify-items: center; gap: 10px; }
.foto__leeg svg { width: clamp(56px, 22%, 110px); height: auto; opacity: .35; color: #fff; }
.foto img.mislukt ~ figcaption { display: none; }
.foto figcaption {
position: absolute; z-index: 2; right: 10px; bottom: 10px;
background: rgba(6,31,59,.72); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .03em;
padding: 3px 9px; border-radius: 999px;
}
.diensten-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dienstkaart {
display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px;
background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond);
padding: 28px 26px 24px; text-decoration: none; color: var(--tekst);
transition: border-color .15s ease, box-shadow .15s ease;
}
.dienstkaart:hover { border-color: var(--petrol); box-shadow: 0 10px 28px -20px rgba(10,44,82,.5); color: var(--tekst); }
.dienstkaart--vraag { background: var(--navy); border-color: var(--navy); color: #d6e2ee; grid-template-rows: auto 1fr auto; }
.dienstkaart.dienstkaart--vraag h3 { color: var(--wit); }
.dienstkaart.dienstkaart--vraag p { color: #c5d4e3; }
.dienstkaart.dienstkaart--vraag .dienstkaart__meer { color: #7fd0d2; }
.dienstkaart--vraag:hover { border-color: var(--petrol); color: #d6e2ee; }
.dienstkaart__icoon { width: 48px; height: 48px; border-radius: 12px; background: var(--petrol-zacht); color: var(--petrol-inkt); display: grid; place-items: center; }
.dienstkaart__icoon svg { width: 26px; height: 26px; }
.dienstkaart p { color: var(--tekst-zacht); font-size: 1rem; }
.dienstkaart__meer { color: var(--petrol-inkt); font-weight: 600; font-size: .95rem; display: inline-flex; gap: 6px; align-items: center; }
.dienstkaart__meer svg { width: 18px; height: 18px; transition: transform .15s ease; }
.dienstkaart:hover .dienstkaart__meer svg { transform: translateX(3px); }
@media (max-width: 1100px) { .diensten-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .diensten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .diensten-raster { grid-template-columns: 1fr; } .dienstkaart { padding: 22px 20px; } }
.dienst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--lijn); }
.dienst:first-child { border-top: 0; padding-top: 0; }
.dienst:nth-child(even) .dienst__foto { order: 2; }
.dienst__foto .foto { aspect-ratio: 4 / 3; }
.dienst__tekst { display: grid; gap: 16px; min-width: 0; }
.dienst__tekst > p { color: var(--tekst-zacht); }
.vinklijst { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.vinklijst li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .98rem; }
.vinklijst svg { width: 20px; height: 20px; color: var(--petrol); flex: none; margin-top: 3px; }
@media (max-width: 820px) {
.dienst { grid-template-columns: 1fr; }
.dienst:nth-child(even) .dienst__foto { order: 0; }
.vinklijst { grid-template-columns: 1fr; }
}
.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: stap; position: relative; }
.stap { position: relative; padding: 0 24px 0 0; display: grid; gap: 10px; align-content: start; }
.stap__nr {
width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
background: var(--wit); border: 2px solid var(--petrol); color: var(--navy);
font: 700 1.2rem var(--font-kop); position: relative; z-index: 1; margin-bottom: 10px;
font-variant-numeric: tabular-nums;
}
.stap::before { content: ""; position: absolute; top: 26px; left: 52px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--petrol) 0 8px, transparent 8px 14px); opacity: .5; }
.stap:last-child::before { display: none; }
.stap p { color: var(--tekst-zacht); font-size: 1rem; }
.sectie--vlak .stap__nr { background: var(--vlak); }
@media (max-width: 900px) {
.stappen { grid-template-columns: 1fr; gap: 0; }
.stap { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 0 0 30px; }
.stap__nr { grid-row: 1 / span 2; margin: 0; }
.stap h3 { align-self: center; padding-top: 12px; }
.stap::before { top: 52px; bottom: 0; left: 25px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--petrol) 0 8px, transparent 8px 14px); }
}
.stappen-groot { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 860px; }
.stappen-groot li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 26px; }
.stappen-groot .stap__nr { margin: 0; width: 56px; height: 56px; }
.stappen-groot div { display: grid; gap: 8px; }
.stappen-groot p { color: var(--tekst-zacht); }
@media (max-width: 560px) { .stappen-groot li { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; } }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.duo__tekst { display: grid; gap: 18px; min-width: 0; }
.duo__tekst p { color: var(--tekst-zacht); }
.duo .foto { aspect-ratio: 4 / 3.2; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.doelgroepen { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.doelgroepen li { background: var(--vlak); border-radius: var(--rond-klein); padding: 14px 16px; display: grid; gap: 2px; }
.doelgroepen strong { color: var(--navy); }
.sectie--vlak .doelgroepen li { background: var(--wit); border: 1px solid var(--lijn); }
.doelgroepen span { color: var(--tekst-zacht); font-size: .93rem; line-height: 1.5; }
@media (max-width: 520px) { .doelgroepen { grid-template-columns: 1fr; } }
.gebied { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.provincies { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
.provincies li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.18); flex-wrap: wrap; }
.provincies .naam { font: 700 clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem) var(--font-kop); color: var(--wit); letter-spacing: -.02em; }
.provincies .plaatsen { color: #b9cadb; font-size: .95rem; }
.gebied .foto { aspect-ratio: 4 / 3; }
.gebied .inleiding { margin-top: 18px; }
@media (max-width: 860px) { .gebied { grid-template-columns: 1fr; } }
.provincies--licht { border-top-color: var(--lijn); }
.provincies--licht li { border-bottom-color: var(--lijn); }
.provincies--licht .naam { color: var(--navy); }
.provincies--licht .plaatsen { color: var(--tekst-zacht); }
.vragen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.vragen .sectie-kop { margin-bottom: 0; }
.faq { border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary {
list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center;
padding: 20px 0; font-weight: 600; font-size: 1.06rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--lijn); display: grid; place-items: center; color: var(--petrol-inkt); transition: transform .2s ease; }
.faq summary .plus svg { width: 16px; height: 16px; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--petrol-zacht); border-color: var(--petrol-zacht); }
.faq details > p { padding: 0 48px 22px 0; color: var(--tekst-zacht); }
@media (max-width: 860px) { .vragen { grid-template-columns: 1fr; } .faq details > p { padding-right: 0; } }
.slot { background: var(--navy); color: #d6e2ee; border-radius: 24px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center; position: relative; overflow: hidden; }
.slot::after { content: ""; position: absolute; right: -60px; bottom: -120px; width: 320px; height: 320px; border: 46px solid var(--petrol); border-radius: 50%; opacity: .22; pointer-events: none; }
.slot h2 { color: var(--wit); }
.slot > div { display: grid; gap: 14px; position: relative; z-index: 1; min-width: 0; }
.slot .knoppen { position: relative; z-index: 1; }
@media (max-width: 860px) { .slot { grid-template-columns: 1fr; } }
.waarden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.waarden li { border-top: 3px solid var(--petrol); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.waarden p { color: var(--tekst-zacht); font-size: 1rem; }
@media (max-width: 820px) { .waarden { grid-template-columns: 1fr; } }
.contact-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 920px) { .contact-raster { grid-template-columns: 1fr; } }
.paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: clamp(22px, 3.5vw, 40px); }
.contactkaart { display: grid; gap: 18px; }
.contactkaart h2 { font-size: 1.35rem; }
.contactregels { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contactregels li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.contactregels .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--petrol-zacht); color: var(--petrol-inkt); display: grid; place-items: center; }
.contactregels .ic svg { width: 20px; height: 20px; }
.contactregels small { display: block; color: var(--tekst-zacht); font-size: .82rem; line-height: 1.3; }
.contactregels a, .contactregels b { font-weight: 600; word-break: break-word; }
.contactkaart .knoppen .knop { flex: 1 1 160px; }
.formulier { display: grid; gap: 22px; }
.formulier fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; min-width: 0; }
.formulier legend { font: 700 1.1rem var(--font-kop); color: var(--navy); padding: 0; float: left; width: 100%; }
.rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 600px) { .rij { grid-template-columns: 1fr; } }
.veld { display: grid; gap: 7px; min-width: 0; }
.veld label, .veld .veldlabel { font-weight: 600; font-size: .97rem; color: var(--tekst); }
.veld .opt { font-weight: 400; color: var(--tekst-zacht); }
.veld .hint { font-size: .88rem; color: var(--tekst-zacht); line-height: 1.45; }
.veld input[type="text"], .veld input[type="tel"], .veld input[type="email"], .veld input[type="date"], .veld select, .veld textarea {
width: 100%; min-height: 50px; padding: 12px 14px;
border: 1.5px solid #b9c5d1; border-radius: var(--rond-klein); background: var(--wit);
font: 400 1rem/1.4 var(--font-tekst); color: var(--tekst);
transition: border-color .15s ease, box-shadow .15s ease;
}
.veld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311686b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 42px; }
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--petrol-inkt); box-shadow: 0 0 0 3px rgba(27,139,142,.25); }
.veld [aria-invalid="true"] { border-color: var(--fout) !important; background: #fffafa; }
.foutmelding { color: var(--fout); font-size: .9rem; font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.foutmelding svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.upload {
border: 2px dashed #b9c5d1; border-radius: var(--rond); padding: 22px; text-align: center; background: var(--vlak);
display: grid; gap: 8px; justify-items: center; position: relative;
}
.upload.sleep { border-color: var(--petrol); background: var(--petrol-zacht); }
.upload svg { width: 30px; height: 30px; color: var(--petrol-inkt); }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload label.knop { min-height: 44px; }
.upload input:focus-visible + label { outline: 3px solid var(--petrol); outline-offset: 3px; }
.fotolijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.fotolijst li { position: relative; border-radius: var(--rond-klein); overflow: hidden; background: var(--vlak); aspect-ratio: 1; }
.fotolijst img { width: 100%; height: 100%; object-fit: cover; }
.fotolijst button {
position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0;
background: rgba(6,31,59,.82); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.fotolijst button svg { width: 16px; height: 16px; }
.fotolijst .grootte { position: absolute; left: 6px; bottom: 6px; background: rgba(6,31,59,.82); color: #fff; font-size: .72rem; padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.akkoord { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--tekst-zacht); }
.akkoord input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--petrol-inkt); }
.honing { position: absolute; left: -9999px; }
.melding { border-radius: var(--rond); padding: 18px 20px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .98rem; }
.melding svg { width: 26px; height: 26px; }
.melding strong { display: block; margin-bottom: 2px; }
.melding--test { background: var(--invul-bg); color: #5c3c00; border: 1.5px solid #f0d58a; }
.melding--fout { background: var(--fout-bg); color: #7a1a12; border: 1.5px solid #f3b8b1; }
.melding--goed { background: var(--petrol-zacht); color: #0b4a4c; border: 1.5px solid #a9d6d7; }
.melding--goed svg, .melding--goed strong { color: var(--goed); }
.verzendrij { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.verzendrij .knop { min-width: 240px; }
.verzendrij small { color: var(--tekst-zacht); }
.knop[aria-busy="true"] { opacity: .75; cursor: progress; }
.lees { max-width: 760px; }
.lees h2 { font-size: 1.45rem; margin-top: 2.2em; margin-bottom: .6em; }
.lees h2:first-child { margin-top: 0; }
.lees p, .lees li { color: var(--tekst); }
.lees p + p { margin-top: 1em; }
.lees ul { padding-left: 1.2em; display: grid; gap: 6px; margin: .8em 0; }
.tabel-wrap { overflow-x: auto; margin: 1em 0; }
.lees table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .95rem; }
.lees th, .lees td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.lees th { background: var(--vlak); color: var(--navy); }
.voet { background: var(--navy-diep); color: #b9c8d8; padding-block: 64px 32px; font-size: .95rem; }
.voet a { color: #e2ecf5; text-decoration: none; }
.voet__logo:hover { text-decoration: none !important; }
.voet a:hover { color: #fff; text-decoration: underline; }
.voet__raster { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.voet__logo img { width: 230px; }
.voet h2 { font: 700 .8rem var(--font-tekst); color: #fff; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.voet__onder { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; color: #8ea3b9; }
.voet .invul { background: rgba(255,244,214,.12); color: #ffd98a; border-color: #b98a1c; }
@media (max-width: 900px) { .voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voet__merk { grid-column: 1 / -1; } }
@media (max-width: 480px) { .voet__raster { grid-template-columns: 1fr; } }
.contactbalk { display: none; }
@media (max-width: 760px) {
:root { --balk-h: calc(66px + env(safe-area-inset-bottom, 0px)); }
.contactbalk {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: var(--wit); border-top: 1px solid var(--lijn);
box-shadow: 0 -8px 24px -18px rgba(10,44,82,.5);
padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
}
.contactbalk > a, .contactbalk > span {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 50px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .8rem; line-height: 1.1;
color: var(--navy); background: var(--vlak);
}
.contactbalk svg { width: 20px; height: 20px; }
.contactbalk .hoofd { background: var(--petrol-inkt); color: #fff; }
.contactbalk > span { color: var(--invul); background: var(--invul-bg); border: 1.5px dashed #d9a520; font-size: .72rem; text-align: center; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
.kop, .contactbalk, .conceptbalk, .voet { display: none; }
}
.woordmerk { display: grid; line-height: 1; gap: 5px; }
.woordmerk__naam { font: 800 1.45rem/1 var(--font-kop); color: var(--navy); letter-spacing: -.03em; }
.woordmerk__naam b { color: var(--petrol); font-weight: inherit; }
.woordmerk__sub { font-size: .6rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--navy); }
.voet .woordmerk__naam, .voet .woordmerk__sub { color: #fff; }
.voet .woordmerk__naam b { color: #7fd0d2; }
.logo-uitsnede { display: block; width: 220px; aspect-ratio: 1767 / 300; overflow: hidden; }
.logo-uitsnede img { width: 109.9%; max-width: none; height: auto; margin: -12.68% 0 0 -5.04%; }
.voet__logo--kaart { display: inline-block; background: #fff; border-radius: 12px; padding: 12px 16px; justify-self: start; }
.voet__logo--kaart .logo-uitsnede { width: 210px; }
@media (max-width: 980px) { .logo-uitsnede { width: 180px; } }
@media (max-width: 380px) { .logo-uitsnede { width: 156px; } }
.voet__logo--kaart .woordmerk__naam, .voet__logo--kaart .woordmerk__sub { color: var(--navy); }
.voet__logo--kaart .woordmerk__naam b { color: var(--petrol); }