/* OurStayOne : marketingwebsite.
Designsysteem = de app: bosgroen, crème, champagnegoud, kaarten met
radius 24, gouden lijntjes, eigen 2px-outline-iconen op groene cirkels. */
:root {
--groen-d: #1F3A2E; /* bosgroen donker (app: PC.groenDonker) */
--groen: #2F5240; /* bosgroen */
--goud: #C9A46A; /* champagnegoud (app: PC.goud) */
--creme: #F8F6F2; /* crème (app: PC.creme) */
--antraciet:#2A2A2A; /* tekst (app: PC.antraciet) */
--grijs: #6B7069;
--rand: #E9E4DB;
--wit: #ffffff;
--radius: 24px; /* kaartenradius : identiek aan de app */
--schaduw: 0 10px 30px rgba(31, 58, 46, .08);
--schaduw-groot: 0 24px 70px rgba(31, 58, 46, .16);
--overgang: all .3s ease; /* 300ms : zelfde interactiesnelheid als de app */
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
font-family: Inter, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
color: var(--antraciet);
background: var(--creme);
line-height: 1.65;
font-size: 18px;
}
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
h1 { font-size: clamp(36px, 5vw, 48px); line-height: 1.08; font-weight: 800;
letter-spacing: -.5px; }
h2 { font-size: clamp(27px, 3.6vw, 36px); line-height: 1.15; font-weight: 800;
color: var(--groen-d); letter-spacing: -.3px; }
h3 { font-size: 17px; font-weight: 700; color: var(--antraciet); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ------------------------------------------------------------ knoppen */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 15.5px;
border: 1.5px solid transparent; cursor: pointer; transition: var(--overgang);
white-space: nowrap;
}
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--groen-d); color: var(--wit); }
.btn-primary:hover { background: var(--groen); }
.btn-ghost { border-color: var(--rand); color: var(--groen-d); background: var(--wit); }
.btn-light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55);
color: var(--wit); backdrop-filter: blur(6px); }
.btn-gold { background: var(--goud); color: var(--groen-d); }
.btn-lg { padding: 14px 28px; font-size: 16.5px; }
.btn-xl { padding: 18px 40px; font-size: 18px; }
.btn-block { width: 100%; }
/* ------------------------------------------------------------ topbalk */
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(248, 246, 242, .88); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--rand);
}
.header-inner { display: flex; align-items: center; justify-content: space-between;
gap: 18px; height: 72px; }
/* Het logo in de kop mocht groter (Stefano, 4 oktober 2026). */
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800;
font-size: 26px; letter-spacing: -0.3px; color: var(--groen-d); }
.logo img { width: 48px; height: 48px; border-radius: 11px; }
.main-nav { display: flex; align-items: center; gap: 22px; font-weight: 600;
font-size: 15.5px; color: var(--groen-d); }
.main-nav > a:not(.btn):hover { color: var(--goud); }
.nav-login { position: relative; margin-left: 6px; padding-left: 24px; }
.nav-login::before { content: ""; position: absolute; left: 0; top: 50%;
transform: translateY(-50%); width: 1px; height: 20px; background: var(--rand); }
/* ------------------------------------------------------------ hero */
.hero {
position: relative; color: var(--wit); overflow: hidden;
background: url('/assets/hero.jpg') center 35% / cover no-repeat, var(--groen-d);
/* Ronde onderkant, zoals de foto's en kaartjes verderop (Stefano, 30
oktober 2026: "moet deze foto ook niet van me banner met rondingen
aflopen?"). */
border-radius: 0 0 44px 44px;
}
@media (max-width: 640px) { .hero { border-radius: 0 0 28px 28px; } }
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(13,24,19,.88) 0%,
rgba(13,24,19,.62) 46%, rgba(13,24,19,.30) 100%);
}
.hero-inner {
position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
gap: 40px; align-items: center; padding: 92px 24px 110px;
}
.pill {
display: inline-block; font-size: 12.5px; font-weight: 700;
letter-spacing: 1.6px; text-transform: uppercase; color: var(--goud);
border: 1px solid rgba(201,164,106,.65); border-radius: 999px;
padding: 7px 16px; margin-bottom: 22px;
}
.hero h1 { color: var(--wit); margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: var(--goud); }
.hero .lead { font-size: 20px; color: rgba(255,255,255,.88); max-width: 46ch;
margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.store-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-badge {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(10, 18, 14, .82); border: 1px solid rgba(255,255,255,.28);
border-radius: 14px; padding: 8px 16px; color: var(--wit);
transition: var(--overgang);
}
/* de winkelknoppen zijn links (naar de winkel, of vóór de publicatie naar
de gratis demo); ze lichten op bij hover */
a.store-badge { text-decoration: none; cursor: pointer; }
a.store-badge:hover { transform: scale(1.03); border-color: var(--goud); }
.store-badge small { display: block; font-size: 10.5px; opacity: .75;
line-height: 1.2; }
.store-badge b { font-size: 15.5px; line-height: 1.15; }
.store-note { font-size: 13px; color: rgba(255,255,255,.75); max-width: 46ch; }
.store-note a { color: var(--goud); font-weight: 700; }
/* Zolang de app nog niet in de winkels staat (besluit 57, punt 21): de zin
"Binnenkort in de App Store en Google Play" met een knop naar de webapp,
op de plek van de winkelknoppen. */
.store-soon { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-soon b { font-size: 15.5px; color: var(--wit); }
.store-soon .store-note { flex-basis: 100%; }
/* telefoon + laptop in de hero */
.hero-devices { position: relative; height: 500px; }
.phone {
width: 232px; aspect-ratio: 1206 / 2622; border-radius: 36px;
border: 9px solid #101613; overflow: hidden; background: #101613;
box-shadow: var(--schaduw-groot);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone-hero { position: absolute; right: 8px; bottom: -64px; z-index: 3;
transform: rotate(2.5deg); }
.laptop { position: absolute; left: -30px; top: 30px; width: 470px; z-index: 2; }
.laptop-screen {
border: 10px solid #101613; border-bottom-width: 14px; border-radius: 18px 18px 0 0;
background: var(--creme); overflow: hidden; box-shadow: var(--schaduw-groot);
aspect-ratio: 16 / 10;
}
.laptop-base {
height: 14px; background: linear-gradient(#2b2f2c, #171b18);
border-radius: 0 0 16px 16px; margin: 0 -22px;
}
/* ------------------------------------------------------------ secties */
.section { padding: 84px 0; }
.section-alt { background: var(--wit); border-top: 1px solid var(--rand);
border-bottom: 1px solid var(--rand); }
.center-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.center-head .sub, .split-copy .sub { color: var(--grijs);
margin-top: 12px; }
/* grote witte kaart met tegels (zoals het app-homegrid) */
.bigcard {
background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw);
padding: 48px 44px;
}
.bigcard-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.bigcard-head p { color: var(--grijs); margin-top: 10px; }
.tile-grid { display: grid; gap: 16px; }
.tile-grid-6 { grid-template-columns: repeat(3, 1fr); }
.tile-grid-12 { grid-template-columns: repeat(4, 1fr); }
/* de tegel = 1-op-1 de app-kaart: witte kaart, cirkelicoon, goudlijntje */
.tile {
background: var(--creme); border-radius: var(--radius); text-align: center;
padding: 30px 20px 26px; transition: var(--overgang); cursor: default;
}
.tile-grid-12 .tile { background: var(--wit); box-shadow: var(--schaduw); }
.tile:hover { transform: scale(1.03); box-shadow: var(--schaduw-groot); }
.tile h3 { margin-top: 14px; }
.tile p { font-size: 14px; color: var(--grijs); margin-top: 10px; line-height: 1.5; }
.goldline { display: block; width: 26px; height: 3px; border-radius: 2px;
background: var(--goud); margin: 10px auto 0; }
/* icoon op donkergroene cirkel : exact de app-stijl */
.icircle {
width: 44px; height: 44px; border-radius: 50%; background: var(--groen-d);
display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.icircle-lg { width: 64px; height: 64px; }
.icircle .pc-ico { vertical-align: 0 !important; }
/* aan/uit-schakelaar op moduletegels (beheerder bepaalt wat aanstaat) */
.tile { position: relative; }
.mswitch {
position: absolute; top: 14px; right: 14px;
width: 30px; height: 18px; border-radius: 999px;
background: var(--groen); display: inline-block;
}
.mswitch i {
position: absolute; top: 3px; right: 3px; width: 12px; height: 12px;
border-radius: 50%; background: var(--goud); display: block;
}
.dash-img { width: 100%; display: block; border-radius: 18px;
border: 1px solid var(--rand); }
/* herkenning: de vier zorgen van de parkbeheerder */
.zorg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.zorg {
display: flex; gap: 14px; align-items: flex-start;
background: var(--wit); border-radius: var(--radius);
box-shadow: var(--schaduw); padding: 24px 24px 22px;
}
.zorg h3 { font-size: 17px; color: var(--groen-d); margin-bottom: 6px; }
.zorg p { font-size: 15.5px; color: var(--grijs); line-height: 1.6; }
.zorg-slot {
max-width: 700px; margin: 34px auto 0; text-align: center;
font-size: 17px; color: var(--groen-d); font-weight: 600; line-height: 1.65;
}
/* twijfels: eerlijke antwoorden */
.faq {
background: var(--creme); border: 1px solid var(--rand);
border-radius: 14px; padding: 0; margin-bottom: 12px; overflow: hidden;
}
.faq summary {
cursor: pointer; list-style: none; font-weight: 700; font-size: 15.5px;
color: var(--groen-d); padding: 15px 44px 15px 20px; position: relative;
transition: var(--overgang);
}
/* De vragen in twee rustige kolommen ("maak deze overzichtelijker",
30 aug 2026). Twee LOSSE kolommen, geen rijen-grid: in een grid hangen
de balken per rij aan elkaar vast, en naast een vraag van twee regels
viel dan een gat onder de korte buurvraag. Elke kolom stapelt nu zijn
eigen balken strak op; een opengeklapte vraag duwt alleen de eigen
kolom omlaag. Op smalle schermen weer gewoon onder elkaar. */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
align-items: start; }
.faq-kolom { display: flex; flex-direction: column; gap: 14px; }
.faq-kolom .faq { margin-bottom: 0; }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+'; position: absolute; right: 20px; top: 50%;
transform: translateY(-50%); color: var(--goud); font-size: 22px;
font-weight: 700;
}
.faq[open] summary::after { content: '\2212'; }
.faq[open] summary { background: rgba(201, 164, 106, .08); }
.faq p { padding: 4px 22px 18px; color: var(--grijs); font-size: 15.5px; }
/* ------------------------------------------------------------ split-secties */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
align-items: center; }
.split-rev { grid-template-columns: 1.1fr .9fr; }
.usp-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; }
.usp-list li { display: flex; gap: 14px; align-items: flex-start; }
.usp-list b { color: var(--groen-d); }
.usp-list div { font-size: 16px; color: var(--grijs); line-height: 1.55; }
.split-visual { position: relative; min-height: 420px; }
.phone-tilt { position: absolute; right: 30px; top: 0; transform: rotate(3deg);
z-index: 2; }
.phone-back { right: auto; left: 30px; top: 46px; transform: rotate(-4deg);
z-index: 1; opacity: .96; }
/* Eén kolom: zo staat het UITBREIDING-label bij elk onderdeel naast de
naam in plaats van soms eronder (twee smalle kolommen braken de langere
namen af). */
.check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid;
grid-template-columns: 1fr; gap: 9px; }
.check-kop { margin: 24px 0 0; font-size: 12.5px; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
color: var(--grijs); }
.check-2 { grid-template-columns: 1fr 1fr; gap: 8px 20px;
margin-top: 12px; }
/* de uitbreidingen krijgen een goudkleurig vinkje, zodat het verschil met
inbegrepen in één oogopslag te zien is */
.check-list.check-uitb li::before { background: var(--goud);
color: var(--groen-d); }
.check-list .uitb { display: inline-block; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--goud-d, #A98045);
border: 1px solid rgba(201,164,106,.55); border-radius: 999px;
padding: 1px 8px; margin-left: 4px; vertical-align: 2px;
white-space: nowrap; }
.check-list li { position: relative; padding-left: 30px; font-weight: 600;
color: var(--groen-d); font-size: 16.5px; }
.check-list li::before {
content: '✓'; position: absolute; left: 0; top: 0;
width: 21px; height: 21px; border-radius: 50%; background: var(--groen-d);
color: var(--goud); font-size: 12px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
/* ------------------------------------------------------------ dashboard-mockup */
.dash-wrap { filter: drop-shadow(0 30px 60px rgba(31,58,46,.22)); }
.dash {
display: grid; grid-template-columns: 168px 1fr; border-radius: 18px;
overflow: hidden; background: var(--creme); border: 1px solid var(--rand);
font-size: 11.5px; min-height: 340px;
}
.dash aside { background: var(--groen-d); color: rgba(255,255,255,.85);
padding: 14px 10px; }
.d-logo { display: flex; align-items: center; gap: 7px; font-weight: 800;
color: var(--wit); font-size: 12px; padding: 4px 8px 14px; }
.d-nav { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
border-radius: 10px; margin-bottom: 2px; }
.d-nav.on { background: rgba(201,164,106,.18); color: var(--wit); }
.d-nav span { font-weight: 600; }
.dash main { padding: 16px 18px; }
.d-title { font-weight: 800; color: var(--groen-d); font-size: 15px;
margin-bottom: 12px; }
.d-title span { font-weight: 500; color: var(--grijs); font-size: 11px;
margin-left: 8px; }
.d-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
margin-bottom: 14px; }
.d-stat { background: var(--wit); border-radius: 12px; padding: 10px 12px;
box-shadow: var(--schaduw); }
.d-stat b { display: block; font-size: 17px; color: var(--groen-d); }
.d-stat span { color: var(--grijs); font-size: 10.5px; }
.d-panel { background: var(--wit); border-radius: 12px; padding: 12px 14px;
box-shadow: var(--schaduw); margin-bottom: 12px; }
.d-panel-t { font-weight: 700; color: var(--groen-d); margin-bottom: 8px;
font-size: 12px; }
.d-row { display: flex; align-items: center; gap: 10px; padding: 7px 0;
border-top: 1px solid var(--rand); }
.d-row i { width: 26px; height: 26px; border-radius: 50%; background: var(--groen-d);
flex: none; position: relative; }
.d-row i::after { content: ''; position: absolute; inset: 8px;
border-radius: 50%; background: var(--goud); opacity: .85; }
.d-row i.warn::after { background: #C96A5B; }
.d-row b { display: block; font-size: 11.5px; color: var(--antraciet); }
.d-row span { color: var(--grijs); font-size: 10.5px; }
.d-row em { margin-left: auto; font-style: normal; font-weight: 700;
font-size: 10.5px; color: var(--grijs); border: 1px solid var(--rand);
padding: 3px 10px; border-radius: 999px; }
.d-row em.ok { color: var(--wit); background: var(--groen); border-color: var(--groen); }
.dash-mini { transform: scale(1); font-size: 10px; min-height: 0; height: 100%; }
.dash-mini aside { padding: 10px 8px; }
.dash-mini .d-nav { padding: 5px 8px; }
.dash-wrap-big { max-width: 940px; margin: 0 auto; }
.dash-big { min-height: 430px; grid-template-columns: 200px 1fr; font-size: 13px; }
.dash-big main { padding: 22px 26px; }
/* ------------------------------------------------------------ huisstijl-telefoons */
.brand-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.brand-phone {
--bp-donker: #1F3A2E; --bp-accent: #C9A46A; --bp-licht: #F8F6F2;
border: 8px solid #101613; border-radius: 30px; background: var(--bp-licht);
overflow: hidden; aspect-ratio: 10 / 19; position: relative;
box-shadow: var(--schaduw-groot); transition: var(--overgang);
display: flex; flex-direction: column; margin: 0;
}
.brand-phone:hover { transform: translateY(-6px) scale(1.02); }
.theme-b { --bp-donker: #1E3A5C; --bp-accent: #D9B978; --bp-licht: #F4F7FA; }
.theme-c { --bp-donker: #6B3A2E; --bp-accent: #E0C9A0; --bp-licht: #FAF6F0; }
.theme-d { --bp-donker: #23404A; --bp-accent: #9FC7B8; --bp-licht: #F2F7F5; }
.bp-head { display: flex; align-items: center; gap: 6px; background: var(--bp-donker);
color: #fff; font-weight: 700; font-size: 11px; padding: 14px 12px 8px; }
.bp-logo { width: 14px; height: 14px; border-radius: 50%;
border: 2px solid var(--bp-accent); flex: none; }
.bp-hero { height: 26%; background:
linear-gradient(160deg, var(--bp-donker) 0%, transparent 130%),
var(--bp-accent); opacity: .92; }
.bp-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
padding: 12px; }
.bp-grid i { background: #fff; border-radius: 14px; position: relative; }
.bp-grid i::before { content: ''; position: absolute; top: 12px; left: 50%;
transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%;
background: var(--bp-donker); border: 2px solid var(--bp-accent); }
.bp-grid i::after { content: ''; position: absolute; bottom: 12px; left: 50%;
transform: translateX(-50%); width: 22px; height: 3px; border-radius: 2px;
background: var(--bp-accent); }
.bp-tab { height: 26px; background: var(--bp-donker); border-radius: 14px 14px 0 0;
margin: 0 6px; }
.brand-phone figcaption {
position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);
background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12px;
font-weight: 700; color: var(--groen-d); box-shadow: var(--schaduw);
white-space: nowrap;
}
/* ------------------------------------------------------------ reviews */
.review-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { background: var(--wit); border-radius: var(--radius);
box-shadow: var(--schaduw); padding: 28px 26px;
transition: var(--overgang); }
.review:hover { transform: scale(1.02); box-shadow: var(--schaduw-groot); }
.stars { color: var(--goud); font-size: 18px; letter-spacing: 3px;
margin-bottom: 12px; }
.review p { font-size: 16px; color: var(--antraciet); line-height: 1.6; }
.review-who { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.review-who .icircle { width: 36px; height: 36px; }
.review-who b { display: block; font-size: 14.5px; color: var(--groen-d); }
.review-who small { color: var(--grijs); font-size: 12.5px; }
/* ------------------------------------------------------------ CTA + footer */
.cta { background: var(--groen-d); color: var(--wit); padding: 84px 0;
text-align: center; }
.cta h2 { color: var(--wit); }
.cta p { color: rgba(255,255,255,.8); margin: 14px auto 30px; max-width: 52ch; }
.site-footer { background: #16281F; color: rgba(255,255,255,.82);
padding: 52px 0 34px; font-size: 14.5px; }
/* Vier nette kolommen met kopjes; het merk links als eigen blok. Eerder
stonden alle tien links in één doorlopende rij die op elke schermbreedte
ergens anders afbrak. */
.footer-kolommen { display: flex; gap: 56px; flex-wrap: wrap;
align-items: flex-start; }
.footer-brand { display: flex; flex-direction: column; gap: 14px;
flex: 1 1 240px; min-width: 220px; }
.footer-brand-kop { display: flex; align-items: center; gap: 12px; }
.footer-brand small { color: rgba(255,255,255,.55); }
.footer-contactzin { font-size: 13.5px; color: rgba(255,255,255,.55);
max-width: 32ch; line-height: 1.55; }
.footer-mail { display: inline-flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 14px; color: var(--goud); }
.footer-mail:hover { text-decoration: underline; }
.footer-kolom { display: flex; flex-direction: column; gap: 10px; }
.footer-kolom a { font-weight: 500; font-size: 14px;
color: rgba(255,255,255,.78); }
.footer-kolom a:hover { color: var(--goud); }
.footer-kop { font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: rgba(255,255,255,.42);
margin-bottom: 4px; }
.footer-copy { display: block; margin-top: 40px; padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.45); line-height: 1.7; }
/* ------------------------------------------------------------ modal (aanmelden) */
.modal-backdrop {
position: fixed; inset: 0; z-index: 90; background: rgba(16, 26, 21, .55);
display: flex; align-items: flex-start; justify-content: center;
padding: 40px 16px; overflow-y: auto; backdrop-filter: blur(4px);
}
.modal { background: var(--wit); border-radius: var(--radius); max-width: 620px;
width: 100%; padding: 34px 34px 28px; position: relative;
box-shadow: var(--schaduw-groot); }
.modal h3 { font-size: 24px; color: var(--groen-d); }
.modal-sub { color: var(--grijs); font-size: 15px; margin: 8px 0 20px; }
.modal-close { position: absolute; top: 16px; right: 16px; border: 0;
background: var(--creme); width: 36px; height: 36px;
border-radius: 50%; font-size: 15px; cursor: pointer;
color: var(--groen-d); }
.modal label { display: block; font-weight: 600; font-size: 13.5px;
color: var(--groen-d); margin-bottom: 12px; }
.modal input, .modal select { width: 100%; margin-top: 5px; padding: 11px 14px;
border: 1.5px solid var(--rand); border-radius: 12px;
font-size: 15px; font-family: inherit; background: var(--creme); }
.modal input:focus, .modal select:focus { outline: none; border-color: var(--goud); background: #fff; }
.modal select { appearance: none; -webkit-appearance: none; font: inherit;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-error { background: #FBEDEA; color: #A4392B; border-radius: 12px;
padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.modal-note { display: block; text-align: center; color: var(--grijs);
font-size: 12.5px; margin-top: 12px; }
/* Wat er besteld is, vlak voor de betaalpagina */
.besteld-blok h3 { margin: 0 0 12px; font-size: 20px; }
.besteld-lijst { margin: 0 0 14px; padding-left: 20px; }
.besteld-lijst li { margin-bottom: 4px; }
.besteld-uitleg { background: #FBF6EC; border: 1px solid #E9DCC2;
border-radius: 12px; padding: 10px 14px; font-size: 14px;
margin: 0 0 16px; }
/* ------------------------------------------------------------ responsief */
@media (max-width: 1120px) {
.main-nav > a:not(.btn):not(.nav-login) { display: none; }
}
@media (max-width: 1020px) {
.hero-inner { grid-template-columns: 1fr; padding-bottom: 80px; }
.hero-devices { height: 430px; max-width: 560px; }
.split, .split-rev { grid-template-columns: 1fr; }
.split-visual { min-height: 460px; }
.tile-grid-12 { grid-template-columns: repeat(3, 1fr); }
.brand-row { grid-template-columns: repeat(2, 1fr); }
.review-row { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
.zorg-grid { grid-template-columns: 1fr; }
.main-nav > a:not(.btn):not(.nav-login) { display: none; }
.tile-grid-6 { grid-template-columns: 1fr 1fr; }
.tile-grid-12 { grid-template-columns: 1fr 1fr; }
.bigcard { padding: 30px 20px; }
.laptop { width: 340px; left: -10px; }
.phone-hero { width: 180px; right: 0; bottom: -40px; }
.check-list, .check-2 { grid-template-columns: 1fr 1fr; }
.brand-row { grid-template-columns: 1fr 1fr; gap: 14px; }
.grid2 { grid-template-columns: 1fr; }
.footer-kolommen { gap: 36px; }
}
/* Personeel: prijskaarten premium modules */
.prijs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px; margin-top: 34px; align-items: start; }
.prijs-kaart { background: #fff; border-radius: 24px; padding: 28px 26px;
box-shadow: 0 12px 34px rgba(31, 58, 46, .10); position: relative; }
.prijs-kaart-top { border: 2px solid var(--goud, #C9A46A); }
.prijs-badge { position: absolute; top: -13px; right: 22px; background: var(--goud, #C9A46A);
color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .8px;
padding: 4px 14px; border-radius: 999px; text-transform: uppercase; }
.prijs-kop { font-weight: 800; color: var(--groen-d, #16281F); font-size: 17px; }
.prijs-bedrag { font-size: 34px; font-weight: 800; color: var(--groen-d, #16281F);
margin: 6px 0 14px; }
.prijs-bedrag span { display: block; font-size: 13.5px; font-weight: 600; color: #6b7a72; margin-top: 2px; }
.prijs-lijst { list-style: none; margin: 0; padding: 0; }
.prijs-lijst li { padding: 7px 0 7px 34px; position: relative; color: #3d4a43;
font-size: 15.5px; line-height: 1.45; border-bottom: 1px solid #f0ede6; }
.prijs-lijst li:last-child { border-bottom: none; }
/* het vinkje op de donkergroene cirkel, net als de iconen in de app
(verzoek 30 aug 2026: "die icoontjes toevoegen bij die kopjes") */
.prijs-lijst li::before { content: "✓"; position: absolute; left: 0; top: 7px;
width: 21px; height: 21px; border-radius: 50%;
background: var(--groen-d, #1F3A2E); color: var(--goud, #C9A46A);
font-weight: 800; font-size: 11.5px; display: flex;
align-items: center; justify-content: center; }
.prijs-voetnoot { font-size: 13.5px; color: #6b7a72; margin: 12px 0 0; }
/* Wat er allemaal bij het standaardabonnement zit */
.inbegrepen-kaart { background: #fff; border-radius: 24px; padding: 30px 36px 26px;
margin: 28px 0 0; box-shadow: 0 12px 34px rgba(31, 58, 46, .10); }
.inbegrepen-kaart h3 { margin: 0 0 6px; font-size: 21px; font-weight: 800;
color: var(--groen-d, #16281F); }
.inbegrepen-kaart .sub { margin: 0 0 14px; }
.inbegrepen-lijst { columns: 2; column-gap: 44px; }
.inbegrepen-lijst li { break-inside: avoid; border-bottom: none; padding: 6px 0 6px 34px; }
.inbegrepen-lijst li::before { top: 6px; }
@media (max-width: 760px) {
.inbegrepen-kaart { padding: 24px 20px 20px; }
.inbegrepen-lijst { columns: 1; }
}
/* De welkomstactie voor de bundel (besluit 156); site.js verbergt hem zodra
de plekken op zijn. */
.welkomst-actie { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px;
background: rgba(201, 164, 106, .16); border: 1px solid rgba(201, 164, 106, .55);
color: var(--groen-d, #16281F); font-size: 15.5px; line-height: 1.55; }
/* De prijzen als menukaart, ontwerp 3 van Stefano (30 oktober 2026): de
staffels als één regel met dunne lijnen, daaronder één witte kaart met
links de basis en rechts de uitbreidingen, elk met een stippellijn naar de
prijs en de uitleg onder een tik. */
#prijzen .staffel-balk { max-width: 900px; margin: 0 auto 30px; background: transparent;
box-shadow: none; border-radius: 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
#prijzen .staffel-cel { padding: 22px 10px; }
#prijzen .staffel-cel h4 { order: 2; font-weight: 600; color: var(--grijs); font-size: 14.5px; margin: 6px 0 0; }
#prijzen .staffel-cel { display: flex; flex-direction: column; align-items: center; }
#prijzen .staffel-prijs { font-size: 34px; line-height: 1.1; }
#prijzen .staffel-cel p { order: 3; }
@media (max-width: 640px) {
#prijzen .staffel-cel { padding: 14px 8px; }
#prijzen .staffel-prijs { font-size: 28px; }
}
.prijs-menu { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; background: #fff;
border-radius: 26px; padding: 40px 44px; box-shadow: 0 16px 40px rgba(31, 58, 46, .08); }
.prijs-menu-label { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud);
font-weight: 800; margin: 0 0 12px; }
.prijs-menu-uitleg { font-size: 14px; color: var(--grijs); margin: -4px 0 4px; }
.prijs-rij { border-bottom: 1px solid var(--rand); }
.prijs-rij summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
padding: 13px 28px 13px 0; position: relative; }
.prijs-rij summary::-webkit-details-marker { display: none; }
.prijs-rij summary::after { content: '+'; position: absolute; right: 2px; top: 9px; font-size: 20px;
color: var(--goud); font-weight: 700; }
.prijs-rij[open] summary::after { content: '\2212'; }
.prijs-rij-naam { font-weight: 700; color: var(--groen-d); font-size: 16px; }
.prijs-rij-lijn { flex: 1; border-bottom: 2px dotted #d9cfbf; transform: translateY(-4px); }
.prijs-rij-prijs { font-weight: 800; color: var(--groen-d); white-space: nowrap; }
.prijs-rij p { margin: 0 0 14px; color: #4a5650; font-size: 15px; line-height: 1.6; }
.prijs-alles { margin-top: 18px; background: #F1E7D6; border-radius: 16px; padding: 14px 16px; }
.prijs-alles-kop { display: flex; gap: 10px; align-items: baseline; font-weight: 800; color: var(--groen-d); }
.prijs-alles-kop s { color: var(--grijs); font-weight: 600; margin-right: 4px; }
.prijs-na-actie { display: none; }
[data-welkomst][hidden] + .prijs-na-actie { display: inline; }
.prijs-alles p { margin: 8px 0 0; font-size: 14.5px; color: #3b4741; line-height: 1.55; }
.prijs-alles .welkomst-actie { background: transparent; border: none; padding: 0; font-size: 14.5px; }
@media (max-width: 900px) {
.prijs-menu { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
}
/* "Alles wat uw bewoners nodig hebben", ontwerp 2 van Stefano (30 oktober
2026): links de namen van de schermen in vier groepen, rechts de app; een
tik toont de uitleg als melding op de telefoon (het scriptje staat in het
blok zelf). Op een smal scherm staat de telefoon bovenaan en verschijnt de
melding onder het gekozen groepje (.fx-los). */
.fx-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.fx-tekst h2 { margin: 0; }
.fx-intro { font-size: 18px; color: #4a5650; line-height: 1.6; margin: 14px 0 24px; }
.fx-groep { margin-bottom: 16px; }
.fx-groep h3 { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud);
font-weight: 800; margin: 0 0 10px; }
.fx-schermen { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-scherm { display: inline-flex; align-items: center; gap: 8px; background: #fff;
border: 1px solid var(--rand); border-radius: 999px; padding: 6px 14px 6px 6px; font: inherit;
font-weight: 700; color: var(--groen-d); font-size: 15px; cursor: pointer;
transition: border-color .2s ease, transform .2s ease, background .2s ease, color .2s ease; }
.fx-scherm .icircle { width: 28px; height: 28px; }
.fx-scherm:hover, .fx-scherm:focus-visible { border-color: var(--goud); transform: translateY(-1px); outline: none; }
.fx-scherm.actief { background: var(--groen-d); border-color: var(--groen-d); color: #fff; }
.fx-plus::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--goud); margin-left: 2px; }
.fx-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-noot { font-size: 14.5px; color: var(--grijs); line-height: 1.7; margin-top: 18px; }
.fx-noot .mswitch { position: relative; top: 3px; right: auto; display: inline-block; margin-right: 4px; }
.fx-stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--goud);
margin: 0 4px 1px 6px; }
.fx-telefoon { position: relative; display: flex; justify-content: center; }
.fx-gloed { position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
border-radius: 50%; background: radial-gradient(circle, rgba(201, 164, 106, .35), rgba(201, 164, 106, 0) 65%); }
.fx-tel { position: relative; background: #1d2721; border-radius: 46px; padding: 10px; width: 290px; max-width: 100%;
box-shadow: 0 34px 60px rgba(31, 58, 46, .28); }
.fx-tel img { display: block; width: 100%; border-radius: 36px; }
.fx-melding { position: absolute; left: 50%; top: 120px; width: 300px; transform: translateX(-50%); z-index: 3;
display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .97);
border-radius: 18px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); animation: fxin .35s ease; }
.fx-melding .icircle { width: 40px; height: 40px; flex: none; }
.fx-melding b { display: block; color: var(--groen-d); font-size: 16px; }
.fx-melding b + span { display: block; color: #3b4741; font-size: 14px; line-height: 1.5; margin-top: 2px; }
.fx-melding.fx-los { position: static; transform: none; width: auto; margin-top: 10px;
box-shadow: 0 10px 26px rgba(31, 58, 46, .14); border: 1px solid var(--rand); animation: fxlos .3s ease; }
@keyframes fxin { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fxlos { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
.fx-wrap { grid-template-columns: 1fr; gap: 30px; }
.fx-telefoon { order: -1; }
.fx-tel { width: 230px; }
.fx-melding { top: 96px; width: 260px; }
}
/* "Ook uw personeel in één app", ontwerp 4 van Stefano (30 oktober 2026):
vier treden met gouden cijfers, zonder kaders, met dunne lijnen ertussen;
meer dan 50 medewerkers in een groene balk eronder. */
.pers-treden { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.pers-trede { padding: 0 26px; border-left: 1px solid var(--rand); }
.pers-trede:first-child { border-left: none; padding-left: 0; }
.pers-trede:last-child { padding-right: 0; }
.pers-boven { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pers-nr { font-size: 44px; font-weight: 800; line-height: 1; color: var(--goud); }
.pers-badge { background: var(--goud); color: var(--groen-d); font-weight: 800; font-size: 12.5px;
padding: 5px 13px; border-radius: 99px; }
.pers-trede .prijs-kop { font-size: 18px; }
.pers-trede .prijs-bedrag { font-size: 30px; margin: 6px 0 8px; }
.pers-trede .prijs-intro { font-size: 15px; color: #4a5650; }
.pers-trede .prijs-lijst li { border-bottom: none; padding: 6px 0 6px 30px; font-size: 15px; }
.pers-trede .prijs-lijst li::before { top: 6px; width: 19px; height: 19px; font-size: 10.5px; }
.pers-balk { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 26px;
background: var(--groen-d); color: #fff; border-radius: 22px; padding: 20px 28px; margin-top: 40px; text-align: center; }
.pers-balk > b { color: var(--goud); font-size: 16px; }
.pers-balk-prijs { font-size: 22px; font-weight: 800; }
.pers-balk p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; }
.pers-balk a { color: #fff; }
@media (max-width: 1100px) {
.pers-treden { grid-template-columns: 1fr 1fr; row-gap: 40px; }
.pers-trede:nth-child(odd) { border-left: none; padding-left: 0; }
.pers-trede:nth-child(even) { padding-right: 0; }
}
@media (max-width: 640px) {
.pers-treden { grid-template-columns: 1fr; row-gap: 34px; }
.pers-trede { border-left: none; padding: 0; }
.pers-balk { flex-direction: column; }
}
/* "De administratie die wettelijk klopt", idee 3 van Stefano (30 oktober
2026): links de kop en het jaaroverzicht in een schermrand, rechts één
kaart met de acht onderdelen die openklappen. */
.adm-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.adm-links .sub { margin: 12px 0 26px; }
.adm-scherm { background: #1f2a24; padding: 10px; border-radius: 20px;
box-shadow: 0 30px 70px rgba(31, 58, 46, .2); }
.adm-scherm img { display: block; width: 100%; border-radius: 12px; }
.adm-kaart { background: #fff; border-radius: 26px; padding: 26px 30px;
box-shadow: 0 16px 40px rgba(31, 58, 46, .08); }
.adm-label { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud);
font-weight: 800; margin: 0 0 8px; }
.adm-rij { border-bottom: 1px solid var(--rand); }
.adm-rij:last-child { border-bottom: none; }
.adm-rij summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center;
padding: 12px 28px 12px 0; position: relative; font-weight: 700; color: var(--groen-d); font-size: 16px; }
.adm-rij summary::-webkit-details-marker { display: none; }
.adm-rij summary::after { content: '+'; position: absolute; right: 2px; font-size: 20px; color: var(--goud); }
.adm-rij[open] summary::after { content: '\2212'; }
.adm-rij .icircle { width: 32px; height: 32px; flex: none; }
.adm-rij p { margin: 0 0 14px 44px; color: #4a5650; font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
.adm-wrap { grid-template-columns: 1fr; gap: 28px; }
.adm-kaart { padding: 20px 20px; }
}
/* "Waarom parken voor OurStayOne kiezen", ontwerp 1 van Stefano (30 oktober
2026): een groot goud cijfer in plaats van het icoon, en een gouden rand
bovenaan elk kaartje. */
#waarom-kiezen .zomer-kaart { background: #fff; border: none; border-top: 4px solid var(--goud);
border-radius: 22px; padding: 30px 28px 26px; box-shadow: 0 14px 34px rgba(31, 58, 46, .08); }
.waarom-nr { display: block; font-size: 44px; font-weight: 800; line-height: 1;
color: var(--goud); letter-spacing: -1px; margin-bottom: 14px; }
#waarom-kiezen .zomer-kaart h3 { font-size: 19px; color: var(--groen-d); margin: 0 0 10px; }
#waarom-kiezen .zomer-kaart p { font-size: 15.5px; color: #4a5650; line-height: 1.65; }
/* "Zo start u", ontwerp 3 van Stefano (30 oktober 2026): de balie-foto
links (blijft in beeld bij het scrollen), de vier stappen rechts als
tijdlijn met genummerde rondjes en een lijn ertussen. Op de telefoon staat
de foto erboven. */
.tl-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 44px;
align-items: start; margin: 10px 0 20px; }
.tl-foto { margin: 0; border-radius: 24px; overflow: hidden; background: #fff;
box-shadow: var(--schaduw-groot); position: sticky; top: 96px; }
.tl-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto;
object-fit: cover; object-position: 52% 50%; }
.tl-foto figcaption { padding: 14px 18px; font-size: 14.5px; color: var(--grijs);
line-height: 1.5; }
.tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.tijdlijn::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 30px;
width: 2px; background: var(--rand); }
.tijdlijn li { display: flex; gap: 20px; position: relative; padding-bottom: 30px; }
.tijdlijn .stap-nr { flex: none; margin: 0; position: relative; z-index: 1;
box-shadow: 0 0 0 6px var(--wit); }
.tijdlijn h3 { margin: 6px 0 6px; font-size: 19px; }
.tijdlijn p { margin: 0; color: var(--grijs); font-size: 15.5px; line-height: 1.65; }
@media (max-width: 860px) {
.tl-grid { grid-template-columns: 1fr; gap: 30px; }
.tl-foto { position: static; }
.tl-foto img { aspect-ratio: 4 / 3; }
}
/* Winterstop voor seizoensparken */
.winter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
align-items: start; }
.winter-kaart { margin-top: 0; }
.winter-tabel { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.winter-tabel th { text-align: left; color: #6b7a72; font-size: 12.5px;
text-transform: uppercase; letter-spacing: .6px; padding: 6px 0; }
.winter-tabel td { padding: 8px 0; border-top: 1px solid #f0ede6; color: #3d4a43; }
.winter-tabel td:last-child { font-weight: 800; color: var(--groen-d, #16281F);
text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .winter-grid { grid-template-columns: 1fr; } }
/* ------------------------------------------- mobiel: volwaardig ontwerp */
html, body { overflow-x: hidden; }
/* Met hidden op html én body werd body een eigen schuifvlak, en daarin bleef
de position: sticky van .site-header nooit staan: de menubalk scrolde
gewoon weg. clip knipt net zo af zonder schuifvlak te worden; een browser
die clip niet kent, houdt hidden. */
@supports (overflow-x: clip) {
html, body { overflow-x: clip; }
}
/* Op de telefoon is de kop twee regels hoog; daar scrolt hij mee weg en
blijven de zwevende knoppen Demo en Direct aanmelden staan. */
@media (max-width: 760px) {
.site-header { position: relative; }
}
img, svg { max-width: 100%; }
@media (max-width: 640px) {
/* Een lang label op de grootste knop ("Bekijk prijzen en meld uw park
aan") werd door de white-space:nowrap van .btn 380px breed en liep tot
46px buiten een scherm van 390px. De overflow-x:hidden hierboven maakt
dat stuk onbereikbaar: de laatste woorden waren op een telefoon niet te
lezen en niet te bereiken. Alleen bij .btn-xl mag de tekst daarom
afbreken; de korte knoppen elders houden hun nowrap, zodat daar niets
verspringt. De max-width houdt de knop hoe dan ook binnen zijn kader. */
.btn-xl { white-space: normal; max-width: 100%; padding: 16px 24px;
font-size: 17px; }
/* koptekst: logo boven, knoppen daaronder, rustig gecentreerd */
.header-inner { flex-wrap: wrap; justify-content: center; height: auto;
padding: 10px 0 12px; gap: 8px 10px; }
.logo { font-size: 19px; gap: 8px; }
.logo img { width: 38px; height: 38px; border-radius: 9px; }
.main-nav { gap: 8px; }
.main-nav .btn { padding: 9px 14px; font-size: 12.5px; }
/* hero: tekst eerst, daarna één rustige telefoon in het midden.
Zijmarge komt van .container; hier alleen boven en onder. */
.hero-inner { grid-template-columns: 1fr; padding-top: 30px;
padding-bottom: 38px; gap: 28px; }
.hero-copy .pill { border: none; background: none; padding: 0;
font-size: 11px; letter-spacing: 2.2px; color: var(--goud);
font-weight: 800; margin-bottom: 14px; }
.hero-copy h1 { font-size: 30px; line-height: 1.15; margin-bottom: 14px; }
.hero-copy p, .hero-copy .lead { font-size: 15px; line-height: 1.7;
opacity: .94; margin-bottom: 22px; }
.hero-copy .btn { display: block; width: 100%; text-align: center;
margin: 0 0 10px; padding: 15px 18px; font-size: 15.5px;
border-radius: 16px; }
.store-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-badge { justify-content: center; }
.store-note { grid-column: 1 / -1; text-align: center; font-size: 12px; }
/* Het raster van twee kolommen is voor de twee winkelknoppen naast
elkaar. Het blok "Binnenkort in de App Store en Google Play" (besluit
57, punt 21) is één vakje en kreeg zo de halve schermbreedte: de zin
brak af tot "Binnenkort in de App / Store en Google Play", de knop naar
de webapp was half zo breed als de knoppen erboven en rechts bleef een
lege helft over. Het blok hoort over beide kolommen. De regel voor
.store-note hierboven helpt daar niet bij: die zin zit binnen dit blok
en is dus geen direct kind van het raster. */
.store-soon { grid-column: 1 / -1; justify-content: center;
text-align: center; }
.hero-devices { position: relative; height: auto; max-width: none;
display: flex; justify-content: center; padding-bottom: 8px; }
.laptop { display: none; }
.phone-hero { position: static; transform: none; width: 210px; }
/* secties: compacter ritme, duidelijke koppen */
.section { padding: 46px 0; }
h2 { font-size: 23px; line-height: 1.2; }
.center-head p, .section-sub { font-size: 14.5px; }
/* zorg-kaarten en tegels */
.zorg-grid { grid-template-columns: 1fr; gap: 12px; }
.zorg { padding: 18px 16px; }
.tile-grid-6, .tile-grid-12 { grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { padding: 16px 10px; border-radius: 18px; }
.tile h3 { font-size: 13.5px; }
.tile p { font-size: 11.5px; line-height: 1.45; }
.icircle { width: 42px; height: 42px; }
/* schuine telefoons recht en enkelvoudig */
.split, .split-rev { grid-template-columns: 1fr; gap: 22px; }
.split-visual { min-height: 0; display: flex; justify-content: center; }
.phone-tilt { position: static; transform: none; width: 200px; }
.phone-back { display: none; }
.dash-wrap { display: block; }
.dash-img { border-radius: 14px; }
.check-list { grid-template-columns: 1fr; gap: 8px; font-size: 14px; }
/* huisstijlrij: veeg horizontaal door de voorbeelden */
.brand-row { display: flex; grid-template-columns: none; gap: 14px;
overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; }
.brand-row > * { flex: 0 0 150px; scroll-snap-align: center; }
/* prijzen, reviews, faq */
.prijs-grid { grid-template-columns: 1fr; gap: 16px; }
.prijs-kaart { padding: 22px 18px; }
.prijs-bedrag { font-size: 30px; }
.review-row { grid-template-columns: 1fr; gap: 14px; }
.review { padding: 18px 16px; }
.faq details { padding: 14px 15px; }
.faq summary { font-size: 15px; }
.grid2 { grid-template-columns: 1fr; }
.bigcard { padding: 24px 18px; border-radius: 20px; }
/* slot en voettekst */
.cta { padding: 52px 0; }
.cta-inner h2 { font-size: 24px; }
.cta-inner .btn { display: block; width: 100%; text-align: center;
margin: 0 0 10px; padding: 15px 18px; }
.footer-kolommen { display: grid; grid-template-columns: 1fr 1fr;
gap: 26px 18px; }
.footer-brand { grid-column: 1 / -1; min-width: 0; }
.footer-copy { margin-top: 30px; }
}
/* ============================================= v12: zomerkaarten + live demo */
.zomer-eyebrow { display: inline-block; color: var(--goud-d, #A98045);
font-size: 12px; font-weight: 800; letter-spacing: 2.4px;
text-transform: uppercase; margin-bottom: 10px; }
.zomer-grid { display: grid; grid-template-columns: repeat(3, 1fr);
gap: 18px; margin: 34px 0 70px; text-align: left; }
/* het cijferrondje van "Zo start u": zelfde plek en maat als .rol-emoji */
.stap-nr { display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; background: var(--groen);
color: var(--wit); font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.zomer-kaart { position: relative; background: #fff;
border: 1px solid var(--lijn, #E7E2D8); border-radius: 24px;
padding: 26px 22px 24px; transition: transform .3s ease, box-shadow .3s ease; }
.zomer-kaart:hover { transform: translateY(-4px);
box-shadow: 0 16px 38px rgba(31, 58, 46, .12); }
.zomer-kaart .icircle { width: 52px; height: 52px; margin-bottom: 14px; }
.zomer-kaart h3 { margin: 0 0 8px; font-size: 17px; }
.zomer-kaart p { margin: 0; color: var(--tekst-zacht, #6C7268);
font-size: 15px; line-height: 1.6; }
.zomer-badge { position: absolute; top: 16px; right: 16px;
background: var(--goud, #C9A46A); color: #16281F; font-size: 10.5px;
font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px; }
/* De administratie-kaartjes: zelfde familie als .zomer-kaart maar strakker
(verzoek 30 aug 2026, "mag wel strakker, qua uitstraling"): geen bonte
emoji maar de huisstijl-iconen op de donkergroene cirkel, kop en icoon
op één regel, weinig lucht en korte teksten. */
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px; margin-top: 26px; text-align: left; }
.admin-kaart { background: #fff; border: 1px solid var(--lijn, #E7E2D8);
border-radius: 14px; padding: 16px 18px;
box-shadow: 0 1px 2px rgba(31, 58, 46, .04); }
.admin-kaart h3 { display: flex; align-items: center; gap: 10px;
margin: 0 0 7px; font-size: 16px; color: var(--groen-d, #1F3A2E); }
.admin-kaart h3 .icircle { width: 32px; height: 32px; }
.admin-kaart p { margin: 0; color: var(--tekst-zacht, #6C7268);
font-size: 15px; line-height: 1.6; }
@media (max-width: 980px) { .admin-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .admin-grid { grid-template-columns: 1fr; } }
.demo-monitor { max-width: 940px; margin: 0 auto; }
.demo-screen { position: relative; background: #0F1713;
border: 10px solid #16281F; border-bottom-width: 26px; border-radius: 18px;
overflow: hidden; aspect-ratio: 16 / 9.6;
box-shadow: 0 34px 70px rgba(22, 40, 31, .28); }
.demo-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%;
border: 0; background: #F8F6F2; }
.demo-poster { position: absolute; inset: 0; z-index: 2; display: flex;
flex-direction: column; align-items: center; justify-content: center;
gap: 20px; cursor: pointer; }
.demo-poster img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: top; }
.demo-poster::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(rgba(22, 40, 31, .35), rgba(22, 40, 31, .62)); }
.demo-poster .btn { position: relative; z-index: 2; }
.demo-stand { width: 120px; height: 34px; margin: 0 auto;
background: linear-gradient(#122019, #16281F);
border-radius: 0 0 12px 12px; }
.demo-foot { width: 260px; height: 12px; margin: 2px auto 0;
background: #16281F; border-radius: 999px; }
.demo-mobiel { display: none; }
.demo-note { text-align: center; color: var(--tekst-zacht, #6C7268);
font-size: 13px; margin-top: 18px; }
.demo-note a { color: var(--groen-d, #1F3A2E); font-weight: 700; }
@media (max-width: 900px) {
.zomer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.zomer-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 46px; }
.check-list, .check-3 { grid-template-columns: 1fr; }
.zomer-kaart { padding: 20px 18px; }
.demo-monitor, #demoOpenGroot { display: none; }
.demo-mobiel { display: block; text-align: center; }
.demo-note { margin-top: 12px; }
}
/* staffelkaarten van het Medewerkersdashboard: eigen gecentreerde rij */
.prijs-staffels { grid-template-columns: repeat(2, minmax(260px, 430px));
justify-content: center; margin-top: 22px; }
/* ============================== v13: personeel-sectie cleaner en strakker */
.prijs-grid-clean { align-items: stretch; }
.prijs-grid-clean .prijs-kaart { display: flex; flex-direction: column; }
.prijs-intro { margin: 0 0 12px; color: #6b7a72; font-size: 14.5px;
line-height: 1.5; }
.prijs-grid-clean .prijs-lijst li { border-bottom: none; padding: 6px 0 6px 30px;
font-size: 15px; }
.prijs-grid-clean .prijs-lijst li::before { top: 6px; width: 19px;
height: 19px; font-size: 10.5px; }
.prijs-grid-clean .prijs-bedrag { margin: 6px 0 10px; }
.staffel-kop { text-align: center; margin: 34px 0 14px; font-size: 12.5px;
font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--goud-d, #A98045); }
.staffel-balk { display: grid; grid-template-columns: repeat(3, 1fr);
background: #fff; border-radius: 24px;
box-shadow: 0 12px 34px rgba(31, 58, 46, .10); overflow: hidden; }
.staffel-2 { grid-template-columns: repeat(2, 1fr); }
.staffel-1 { grid-template-columns: 1fr; margin-top: 26px; }
.btn-goud { background: var(--goud, #C9A46A); color: #16281F; font-weight: 800; }
.btn-goud:hover { filter: brightness(1.06); }
.prijs-cta { text-align: center; margin-top: 26px; }
.prijs-cta .sub { margin-top: 10px; color: #5B6560; font-size: 13.5px; }
.veld-kop { font-weight: 800; color: #1F3A2E; margin: 18px 0 6px; }
.keuze-sub { font-size: 13.5px; color: #5B6560; margin: 0 0 10px; line-height: 1.55; }
/* Het exacte aantal kavels staat los onder de staffelkaartjes; de staffel
bepaalt de prijs, dit getal bepaalt wat er straks in het portaal staat. */
.modal label.kavel-exact { margin-top: 12px; margin-bottom: 6px; }
/* Bij de keuze "Meer dan 500 kavels" schakelt site.js dit veld uit: het
exacte aantal is dan zinloos en blokkeerde eerder de maatwerkmelding.
Uitgegrijsd zodat zichtbaar is dat het niet aan de bezoeker ligt. */
.modal label.kavel-exact.veld-uit { opacity: .45; }
.keuze-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .keuze-grid { grid-template-columns: 1fr; } }
label.keuze-kaart { display: flex; align-items: center; gap: 10px;
border: 1.5px solid #E4DFD4; font-weight: 400; margin: 0;
border-radius: 14px; padding: 12px 14px; cursor: pointer; background: #FBFAF7; }
.keuze-kaart input { accent-color: #2F5240; }
label.keuze-kaart b { font-size: 14px; color: #1F3A2E; flex: 1;
text-align: left; white-space: nowrap; }
label.keuze-kaart span { font-weight: 800; color: #2F5240; font-size: 13.5px;
white-space: nowrap; text-align: right; }
.keuze-kaart.gekozen { border-color: #C9A46A; background: #FAF4E8; }
/* De B&B-kaart (besluit 113) heeft meer uitleg dan een staffel: de prijs
gaat onder de naam op een eigen regel, anders liep hij de kaart uit. */
label.keuze-kaart.bnb { flex-wrap: wrap; }
label.keuze-kaart.bnb span { flex-basis: 100%; white-space: normal;
text-align: left; font-weight: 600; line-height: 1.45; }
.pakket-lijst { display: flex; flex-direction: column; gap: 10px; }
label.pakket-kaart { position: relative; display: block; border: 1.5px solid #E4DFD4;
font-weight: 400; margin: 0;
border-radius: 16px; padding: 14px 16px 12px; cursor: pointer; background: #FBFAF7; }
.pakket-kaart.gekozen { border-color: #C9A46A; background: #FAF4E8; }
.pakket-kaart input { position: absolute; top: 16px; right: 14px; accent-color: #2F5240; }
.pakket-kop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
padding-right: 30px; }
.pakket-kop b { color: #1F3A2E; font-size: 15px; }
.pakket-kop em { font-style: normal; font-weight: 800; color: #2F5240; font-size: 13px; }
.pakket-intro { display: block; font-size: 13px; color: #5B6560; margin: 3px 0 6px; }
.pakket-kaart ul { margin: 0; padding-left: 18px; }
.pakket-kaart li { font-size: 12.5px; color: #4A524D; line-height: 1.6; }
.pakket-badge { position: absolute; top: -9px; left: 14px; background: #C9A46A;
color: #16281F; font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
text-transform: uppercase; padding: 2px 10px; border-radius: 999px; }
.pakket-noot { display: block; font-size: 12px; color: #8A7B55; margin-top: 6px; }
.extra-lijst { display: flex; flex-direction: column; gap: 8px; }
label.extra-kaart { display: flex; align-items: center; gap: 12px;
border: 1.5px solid #E4DFD4; font-weight: 400; margin: 0;
border-radius: 14px; padding: 10px 14px; cursor: pointer; background: #FBFAF7; }
.extra-kaart.gekozen { border-color: #C9A46A; background: #FAF4E8; }
.extra-kaart input { width: auto; flex: 0 0 auto; padding: 0; margin: 0;
accent-color: #2F5240; }
.extra-tekst { flex: 1; text-align: left; }
.extra-tekst b { display: block; color: #1F3A2E; font-size: 14px; }
.extra-tekst small { display: block; font-size: 12.5px; color: #5B6560;
line-height: 1.5; margin-top: 1px; }
.extra-prijs { font-weight: 800; color: #2F5240; font-size: 13px;
white-space: nowrap; }
.extra-alles { border-style: solid; border-color: #C9A46A; background: #FDFAF3; }
.extra-kaart.extra-gedekt { opacity: .45; }
.extra-kaart.extra-gedekt .extra-prijs { text-decoration: line-through; }
/* In het tarief (een B&B of verhuurbedrijf): aangevinkt, met Inbegrepen op
de plek van de prijs, niet grijs. */
.extra-kaart.extra-inbegrepen { cursor: default; }
.extra-kaart.extra-inbegrepen .extra-prijs { color: var(--groen-d); }
.extra-kaart[hidden] { display: none; }
.totaal-regel { margin-top: 14px; background: #1F3A2E; color: #F8F6F2;
border-radius: 14px; padding: 12px 16px; font-weight: 700; font-size: 14.5px; }
.totaal-regel small { display: block; font-weight: 400; opacity: .85; margin-top: 2px; }
/* waarschuwing dat los aanvinken duurder is dan de bundel: goud, want het is
een voordeel voor de klant en geen fout in het formulier */
/* flex-kolom: de knop krijgt zo een eigen regel en de tekst loopt er niet
omheen, wat de regelafstand rommelig maakt */
.totaal-regel .bundel-tip { display: flex; flex-direction: column;
align-items: flex-start; margin-top: 10px; padding-top: 10px;
border-top: 1px solid rgba(248,246,242,.28); font-weight: 400;
font-size: 13.5px; line-height: 1.5; color: #F6E4C2; }
.bundel-knop { display: inline-block; margin-top: 8px; background: #C9A46A;
color: #1F3A2E; border: 0; border-radius: 999px; padding: 7px 14px;
font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
transition: var(--overgang); }
.bundel-knop:hover { background: #EAC98F; }
label.modal-akkoord { display: flex; gap: 10px; align-items: flex-start;
font-size: 13.5px; font-weight: 400; color: #4A524D; margin: 14px 0 12px;
cursor: pointer; }
label.modal-akkoord span { flex: 1; text-align: left; }
label.keuze-kaart input, label.pakket-kaart input, label.modal-akkoord input {
width: auto; flex: 0 0 auto; padding: 0; margin: 0; }
.modal-akkoord input { margin-top: 3px; accent-color: #2F5240; }
.modal-akkoord a { color: #2F5240; font-weight: 700; }
.staffel-cel { padding: 26px 22px; text-align: center;
border-left: 1px solid #f0ede6; }
.staffel-cel:first-child { border-left: none; }
.staffel-cel h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800;
color: var(--groen-d, #16281F); }
.staffel-prijs { font-size: 26px; font-weight: 800;
color: var(--groen-d, #16281F); }
.staffel-prijs span { font-size: 13px; font-weight: 600; color: #6b7a72; }
.staffel-cel p { margin: 6px 0 0; font-size: 12.5px; color: #6b7a72;
line-height: 1.5; }
.staffel-cel p a { color: inherit; font-weight: 700; }
.prijs-voetnoot-onder { text-align: center; margin-top: 16px; }
@media (max-width: 760px) {
.staffel-balk { grid-template-columns: 1fr; }
.staffel-cel { border-left: none; border-top: 1px solid #f0ede6; }
.staffel-cel:first-child { border-top: none; }
}
/* v14: kavelstaffel-balk met zes cellen (2 rijen van 3) */
.staffel-6 { grid-template-columns: repeat(3, 1fr); }
.staffel-6 .staffel-cel:nth-child(3n+1) { border-left: none; }
.staffel-6 .staffel-cel:nth-child(n+4) { border-top: 1px solid #f0ede6; }
@media (max-width: 760px) {
.staffel-6 { grid-template-columns: 1fr; }
.staffel-6 .staffel-cel { border-top: 1px solid #f0ede6; }
.staffel-6 .staffel-cel:first-child { border-top: none; }
}
/* v16: demo-keuzemodal */
.demo-keuze { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.demo-optie { display: flex; align-items: center; gap: 14px; width: 100%;
text-align: left; background: #FBF9F5; border: 1px solid var(--lijn, #E7E2D8);
border-radius: 18px; padding: 14px 16px; cursor: pointer; font: inherit;
transition: border-color .2s, transform .2s; }
.demo-optie:hover { border-color: var(--goud, #C9A46A); transform: translateY(-1px); }
.demo-optie.demo-bezig { opacity: .55; pointer-events: none; }
.demo-emoji { font-size: 26px; }
.demo-optie-tekst { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.demo-optie-tekst b { font-size: 15px; color: var(--groen-d, #16281F); }
.demo-optie-tekst small { font-size: 12.5px; color: #6b7a72; line-height: 1.45; }
.demo-pijl { font-size: 22px; color: var(--goud, #C9A46A); font-weight: 800; }
.btn-outline { border: 2px solid rgba(255,255,255,.75); color: #fff; border-radius: 999px; }
.btn-outline:hover { background: rgba(255,255,255,.12); }
@media (max-width: 640px) {
.cta-inner .btn-outline { margin-left: 0 !important; }
}
/* v17: live app-demo in een iPhone-lijst */
.tel-backdrop { background: rgba(15, 23, 19, .82); }
.tel-wrap { display: flex; flex-direction: column; align-items: center;
gap: 12px; max-height: 96vh; }
.tel-kop { display: flex; align-items: center; gap: 12px; }
.tel-schakel { display: flex; gap: 8px; background: rgba(255,255,255,.10);
border-radius: 999px; padding: 5px; }
.tel-chip { border: 0; background: transparent; color: #E8E3D8;
font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 16px;
border-radius: 999px; cursor: pointer; }
.tel-chip.actief { background: var(--goud, #C9A46A); color: #16281F; }
.tel-sluit { border: 0; background: rgba(255,255,255,.14); color: #fff;
width: 38px; height: 38px; border-radius: 50%; font-size: 16px;
cursor: pointer; }
.tel-sluit:hover { background: rgba(255,255,255,.26); }
.tel-frame { position: relative; height: min(76vh, 780px);
background: #0B0E0C; border-radius: 46px;
padding: 10px; box-shadow: 0 40px 90px rgba(0,0,0,.5),
inset 0 0 0 2px #2A2F2B; }
.tel-scherm { position: absolute; inset: 10px; border-radius: 37px;
overflow: hidden; background: #F8F6F2; }
/* Hier stond een nagemaakte notch (de zwarte pil van een iPhone). Die lag
over de titelbalk van de app heen, waardoor "Welkom & openingstijden" half
onleesbaar werd. Op een echte telefoon schuift de app onder de notch
vandaan via de veilige zone, maar in een venster op de site bestaat die
zone niet. Liever geen notch dan een onleesbare demo. */
.tel-frame iframe { width: 390px; height: 844px; border: 0;
background: #F8F6F2; transform-origin: 0 0; }
.tel-voet { color: #C9CFC7; font-size: 13px; text-align: center; margin: 0; }
.tel-voet a { color: var(--goud, #C9A46A); font-weight: 700; }
/* v18: rollenuitleg */
.rollen-grid { grid-template-columns: repeat(4, 1fr); }
.rol-emoji { font-size: 34px; display: block; margin-bottom: 12px; }
.rol-prijs { display: inline-block; margin-top: 12px;
background: var(--goud, #C9A46A); color: #16281F; font-size: 12px;
font-weight: 800; letter-spacing: .6px; padding: 4px 12px;
border-radius: 999px; }
/* Drie rollen (sinds de tweede mede-eigenaar gratis is en zijn kaartje weg,
30 oktober 2026): drie kolommen in plaats van vier, en in het blok met de
foto de derde kaart over de volle breedte. */
@media (min-width: 1021px) {
.rollen-grid:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, 1fr); }
}
.rand-inhoud .rollen-grid > .zomer-kaart:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 1020px) { .rollen-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rollen-grid { grid-template-columns: 1fr; } }
/* "Voor iedereen op uw park een eigen plek", ontwerp 2 van Stefano (30
oktober 2026): de foto loopt links door tot de rand van het scherm, de kop
en de kaartjes staan rechts en eindigen op dezelfde lijn als de andere
blokken (.container: 1160 breed, 24 binnenrand). Het gouden label staat in
elk kaartje onderaan, op één lijn. Op de telefoon staat de foto erboven. */
.rollen-rand { padding: 0; }
.rand-grid { display: grid; grid-template-columns: 40% 60%; }
/* Ronde hoeken zoals de kaartjes, iets van de schermrand af (Stefano, 30
oktober 2026: "overal zijn rondingen kan je die fotos ook rondingen maken"). */
.rand-foto { margin: 28px 0 28px 28px; position: relative; min-height: 640px;
border-radius: 28px; overflow: hidden; box-shadow: 0 18px 44px rgba(31, 58, 46, .14); }
.rand-foto img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 38% 55%; }
.rand-inhoud { padding: 84px max(24px, calc((100vw - 1160px) / 2 + 24px)) 84px 56px; }
.rand-inhoud .center-head { text-align: left; max-width: none; margin: 0 0 26px; }
.rand-inhoud .zomer-grid.rollen-grid { grid-template-columns: 1fr 1fr; margin: 0; }
#rollen .zomer-kaart { display: flex; flex-direction: column; }
#rollen .zomer-kaart p { margin-bottom: 18px; }
#rollen .rol-prijs { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) {
.rand-grid { grid-template-columns: 1fr; }
.rand-foto { min-height: 0; margin: 16px 16px 0; border-radius: 22px; }
.rand-foto img { position: static; height: 340px; object-position: 40% 50%; }
.rand-inhoud { padding: 48px 20px 60px; }
}
@media (max-width: 640px) {
.rand-inhoud .zomer-grid.rollen-grid { grid-template-columns: 1fr; }
}
/* Demo: eerlijk vooraf melden dat alles aan staat, zodat niemand denkt dat
een functie ontbreekt omdat hij niet is meegeleverd. */
.demo-let-op { margin: 0 0 14px; padding: 11px 13px; border-radius: 10px;
background: #FBF7EF; border: 1px solid #E4D6B8; color: #4A3B1E;
font-size: 14px; line-height: 1.5; }
.demo-let-op b { color: #2F2410; }
/* ------------------------------------------------- demobalk bovenaan
Volle breedte boven de topbalk. Bewust een