/* ==========================================================================
   Studio Praal — prototype stylesheet (v2)
   Palet: samengesteld op basis van huisstijl.pdf
     blauw #1F4389 · blauwgrijs #B0C0CB · crème #FFF5E7 · roest #A63200 · perzik #F3C19E
     + charcoal #353535 voor lopende tekst (uit de briefing)
   Type (Google Fonts, allemaal standaard in Elementor beschikbaar):
     koppen: Young Serif (stand-in TAN Nimbus) · tekst: Outfit (stand-in Garet)
     accent: Sacramento (stand-in Madelyn) — zie fonts.html voor alternatieven
   Vorm: licht afgeronde knoppen (6px), verder strakke vlakken en het
     golfrand-motief van Pleuns kaartjes (Elementor: Shape Divider → Waves).
   ========================================================================== */

/* De lettertypes worden in de kop van elke pagina geladen (zie build.py),
   niet hier: een @import begint pas als deze css al binnen is. */

:root {
  --creme: #FFF5E7;      /* unslop-ignore: huisstijlkleur */
  --blauw: #1F4389;
  --blauw-diep: #17346b;
  --grijsblauw: #B0C0CB;
  --roest-diep: #8A2900;  /* voor kleine tekst op blauwgrijs */
  --roest: #A63200;
  --perzik: #F3C19E;
  --perzik-licht: #FAE3CF;
  --ink: #353535;
  --line: rgba(31, 67, 137, .18);

  --font-display: 'Young Serif', 'TAN Nimbus', Georgia, serif;
  --font-body: 'Outfit', 'Garet', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Sacramento', 'Madelyn', cursive;

  --radius: 6px;
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth;
  /* De kop blijft boven in beeld staan. Zonder deze marge schuift een link
     naar #ergens de titel eronder weg. */
  scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--creme); color: var(--ink); font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

/* Kom je vanuit de winkel binnen met een pakket al gekozen, dan licht die keuze
   even op zodat je ziet dat er al iets voor je is ingevuld. */
.keuze--uit-winkel { animation: keuze-aandacht 1.6s ease-out 1; }
@keyframes keuze-aandacht {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 123, 74, 0); }
  25%      { box-shadow: 0 0 0 5px rgba(201, 123, 74, .35); }
}
@media (prefers-reduced-motion: reduce) { .keuze--uit-winkel { animation: none; } }
a { color: var(--blauw); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--roest); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--blauw); line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(36px, 4.8vw, 62px); }
h2 { font-size: clamp(28px, 3.3vw, 42px); }
h3 { font-size: clamp(21px, 2.1vw, 26px); }
h4 { font-size: 20px; font-family: var(--font-body); font-weight: 500; }
p { margin: 0 0 1em; }
strong { font-weight: 500; }
.lead { font-size: clamp(17.5px, 1.4vw, 20px); font-weight: 300; }
.kicker { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--roest); display: block; margin-bottom: 14px; }
.bg-grijsblauw .kicker, .bg-grijsblauw .melding__label { color: var(--roest-diep); }
.script { font-family: var(--font-script); font-size: 1.7em; line-height: 1; color: var(--blauw); font-weight: 400; }
.muted { opacity: .72; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.bg-perzik { background: var(--perzik-licht); }
.bg-grijsblauw { background: var(--grijsblauw); }
.bg-blauw { background: var(--blauw); color: var(--creme); }
.bg-blauw h1, .bg-blauw h2, .bg-blauw h3, .bg-blauw a, .bg-blauw .script { color: var(--creme); }
.bg-blauw .kicker { color: var(--perzik); }
.bg-roest { background: var(--roest); color: var(--creme); }

/* --- iconen: inline SVG, kleur via klasse (alleen paletkleuren) --- */
.ico { display: inline-block; width: 1em; height: 1em; }
.ico svg { width: 100%; height: 100%; display: block; }
.ico--blauw { color: var(--blauw); }
.ico--roest { color: var(--roest); }
.ico--perzik { color: var(--perzik); }
.ico--grijsblauw { color: var(--grijsblauw); }
.ico--creme { color: var(--creme); }

/* --- golfrand --- */
.wave { display: block; width: 100%; height: clamp(22px, 3.5vw, 44px); line-height: 0; }
.wave svg { width: 100%; height: 100%; display: block; }
.wave--top { position: absolute; top: -1px; left: 0; transform: scaleY(-1); }
.wave--bottom { position: absolute; bottom: -1px; left: 0; }
/* Twee gekleurde blokken tegen elkaar aan. Allebei tekenen ze een golf in de kleur
   van de pagina, en daardoor staat er een lichte strook tussen. Hebben de blokken
   dezelfde kleur, dan mogen beide golven weg en lopen ze in elkaar over. Verschillen
   ze, dan blijft er een golf over, in de kleur van het blok erboven, zodat het ene
   blok de golfvorm in het andere snijdt. (Opmerkingen Pleun, 19 en 21 september) */
.bg-perzik + .bg-perzik > .wave--top,
.bg-creme + .bg-creme > .wave--top,
.bg-grijsblauw + .bg-grijsblauw > .wave--top { display: none; }
.bg-perzik:has(+ .bg-perzik) > .wave--bottom,
.bg-creme:has(+ .bg-creme) > .wave--bottom,
.bg-grijsblauw:has(+ .bg-grijsblauw) > .wave--bottom,
.bg-perzik:has(+ .bg-grijsblauw) > .wave--bottom,
.bg-grijsblauw:has(+ .bg-perzik) > .wave--bottom { display: none; }
.bg-perzik + .bg-grijsblauw > .wave--top { color: var(--perzik-licht) !important; }
.bg-grijsblauw + .bg-perzik > .wave--top { color: var(--grijsblauw) !important; }

/* --- knoppen --- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: .02em; padding: 13px 22px; border: 1.5px solid var(--blauw); border-radius: var(--radius); background: var(--blauw); color: var(--creme); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--blauw-diep); border-color: var(--blauw-diep); color: var(--creme); }
.btn--ghost { background: transparent; color: var(--blauw); }
.btn--ghost:hover { background: var(--blauw); color: var(--creme); }
.btn--roest { background: var(--roest); border-color: var(--roest); }
.btn--roest:hover { background: #8a2900; border-color: #8a2900; }
.btn--creme { background: var(--creme); color: var(--blauw); border-color: var(--creme); }
.btn--creme:hover { background: #fff; border-color: #fff; color: var(--blauw); }
.bg-blauw .btn--creme { color: var(--blauw); }
.btn--wa { background: #25D366; border-color: #25D366; color: #fff; } /* WhatsApp-groen om herkenbaarheid */
.btn--wa:hover { background: #1fb457; border-color: #1fb457; color: #fff; }
.btn svg { width: 18px; height: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-arrow { font-weight: 500; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* --- header --- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--creme); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo { display: block; width: 118px; }
.logo img { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { font-weight: 400; font-size: 15.5px; text-decoration: none; color: var(--ink); padding: 10px 13px; }
@media (max-width: 1240px) { .nav a { font-size: 15px; padding: 10px 9px; } }
@media (max-width: 1100px) { .nav a { padding: 10px 7px; } }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blauw); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--roest); text-decoration-thickness: 2px; }
.nav .has-sub { position: relative; }
.nav .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 8px; position: relative; top: -3px; }
.sub { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--creme); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: none; flex-direction: column; box-shadow: 0 12px 30px rgba(31,67,137,.10); }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: flex; }
.sub a { padding: 10px 12px; }
.sub a small { display: block; font-size: 12.5px; opacity: .7; font-weight: 300; }
.nav .btn { margin-left: 12px; padding: 10px 18px; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--blauw); border-radius: var(--radius); width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--blauw); margin: 4px auto; }

/* --- hero --- */
.hero { padding-block: clamp(36px, 5vw, 72px) 0; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; box-shadow: inset 0 -.32em var(--perzik); }
.hero .lead { max-width: 46ch; }
.hero-stack { position: relative; aspect-ratio: 4 / 4.6; }
.hero-stack img { position: absolute; object-fit: cover; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(31,67,137,.16); }
.hero-stack .ph-1 { width: 68%; height: 82%; left: 0; top: 4%; transform: rotate(-3deg); z-index: 2; }
.hero-stack .ph-2 { width: 50%; height: 56%; right: 0; bottom: 0; transform: rotate(4deg); z-index: 3; }
.hero-stack .ico { position: absolute; font-size: clamp(56px, 7vw, 96px); z-index: 4; }
.hero-stack .st-a { top: -2%; right: 10%; transform: rotate(12deg); }
.hero-stack .st-b { bottom: 6%; left: -4%; transform: rotate(-10deg); }

/* --- marquee strip (roest band) --- */
.marquee { overflow: hidden; background: var(--roest); color: var(--creme); padding: 14px 0; }
.marquee__track { display: flex; gap: 48px; white-space: nowrap; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 48px; font-family: var(--font-display); font-size: clamp(18px, 1.9vw, 24px); }
.marquee__track .ico { font-size: 22px; color: var(--perzik); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- tekst met foto --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split figure { margin: 0; position: relative; }
.split figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split figure .ico { position: absolute; font-size: 76px; right: -22px; top: -22px; }
.split figcaption { font-size: 13.5px; margin-top: 10px; opacity: .7; }
.img-frame { border: 6px solid #fff; box-shadow: 0 14px 34px rgba(31,67,137,.14); }

/* fotosuggestie-label: alleen in het prototype, geeft aan welke foto hier moet komen */
.fotosuggestie { position: absolute; left: 12px; bottom: 12px; right: 12px; background: rgba(255,245,231,.94); color: var(--roest); font-size: 12.5px; font-weight: 500; padding: 8px 10px; border-left: 3px solid var(--roest); z-index: 3; }

/* --- diensten als genummerde rijen --- */
.services { border-top: 1.5px solid var(--blauw); }
.service-row { display: grid; grid-template-columns: 80px 1.1fr 1fr 220px; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(24px, 3.5vw, 40px) 0; border-bottom: 1.5px solid var(--blauw); text-decoration: none; color: inherit; }
.service-row:hover { color: inherit; }
.service-row:hover .service-row__img img { transform: scale(1.03); }
.service-row:hover h3 { color: var(--roest); }
.service-row__num { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 48px); color: var(--roest); line-height: 1; }
.service-row h3 { margin-bottom: 6px; transition: color .15s; }
.service-row__sub { display: block; font-size: 16px; line-height: 1.4; }
.service-row__tag { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--blauw); }
.service-row p { margin: 0; }
.service-row__img { overflow: hidden; aspect-ratio: 5 / 4; border-radius: var(--radius); }
.service-row__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }

/* --- werkwijze --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); counter-reset: step; }
.step { position: relative; padding-top: 18px; border-top: 1.5px solid var(--blauw); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: 36px; color: var(--roest); display: block; margin-bottom: 8px; }
.step h3 { font-family: var(--font-body); font-weight: 500; font-size: 19px; }

/* --- portfolio grid + pop-up --- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 14px; grid-auto-flow: dense; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: 13.5px; background: rgba(31,67,137,.85); color: var(--creme); opacity: 0; transition: opacity .2s; }
.gallery figure:hover figcaption, .gallery figure:focus-visible figcaption { opacity: 1; }
.gallery figure[hidden] { display: none; }
.g-4x2 { grid-column: span 4; grid-row: span 2; } .g-4x3 { grid-column: span 4; grid-row: span 3; }
.g-8x3 { grid-column: span 8; grid-row: span 3; } .g-6x3 { grid-column: span 6; grid-row: span 3; }
.g-3x2 { grid-column: span 3; grid-row: span 2; } .g-3x3 { grid-column: span 3; grid-row: span 3; }
.g-5x3 { grid-column: span 5; grid-row: span 3; } .g-7x3 { grid-column: span 7; grid-row: span 3; }
.g-6x2 { grid-column: span 6; grid-row: span 2; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; }
.filters button { font: inherit; font-weight: 500; font-size: 14px; padding: 9px 16px; background: transparent; border: 1.5px solid var(--blauw); color: var(--blauw); border-radius: var(--radius); cursor: pointer; }
.filters button[aria-pressed="true"], .filters button:hover { background: var(--blauw); color: var(--creme); }

.project { border: 0; padding: 0; background: var(--creme); color: var(--ink); width: min(920px, 92vw); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.project::backdrop { background: rgba(31,67,137,.55); }
.project__inner { display: grid; grid-template-columns: 1.1fr .9fr; }
.project__inner img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.project__body { padding: clamp(24px, 4vw, 40px); position: relative; }
.project__body h2 { font-size: 30px; }
.project__body .kicker { margin-bottom: 8px; }
.project__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--blauw); background: var(--creme); color: var(--blauw); font-size: 22px; cursor: pointer; line-height: 1; }
.project__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; margin: 16px 0; }
.project__meta dt { font-weight: 500; color: var(--blauw); } .project__meta dd { margin: 0; }
.project__story { font-size: 15.5px; }
.project__todo { font-size: 13px; color: var(--roest); border: 1px dashed var(--roest); padding: 8px 10px; margin-top: 14px; }

/* --- reviews met golfrand --- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review { background: var(--creme); position: relative; padding: 40px 28px 40px; margin: 0; }
.review .wave { position: absolute; left: 0; height: 22px; color: var(--grijsblauw); }
.review .wave.top { top: 0; transform: scaleY(-1); }
.review .wave.bottom { bottom: 0; }
.review p { font-size: 16.5px; }
.review cite { font-style: normal; font-weight: 500; color: var(--blauw); display: block; margin-top: 14px; }
.review cite small { display: block; font-weight: 300; opacity: .7; font-size: 13px; }

/* --- CTA band --- */
.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 28px; }
.cta .ico { font-size: 56px; margin: 0 auto 18px; }

/* --- footer --- */
.site-footer { background: var(--blauw); color: var(--creme); padding: 64px 0 28px; position: relative; }
.site-footer .wave--top { top: 0; transform: translateY(-100%); height: clamp(22px, 3.5vw, 40px); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .voet-kop { color: var(--perzik); margin-bottom: 12px; font-size: 14px; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
@media (max-width: 860px) {
  /* Meer ruimte tussen de raakvlakken; met een duim zit 28px pitch krap. */
  .site-footer li { margin-bottom: 14px; }
  .site-footer a { display: inline-block; padding-block: 3px; }
}
.site-footer a { color: var(--creme); text-decoration: none; }
.site-footer a:hover { color: var(--perzik); text-decoration: underline; }
.site-footer .logo { width: 130px; margin-bottom: 14px; }
.site-footer .script { font-size: 34px; color: var(--perzik); }
.site-footer .bottom { border-top: 1px solid rgba(255,245,231,.25); margin-top: 48px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13.5px; }
.newsletter { display: flex; margin-top: 12px; max-width: 360px; }
.newsletter input { flex: 1; font: inherit; padding: 12px 14px; border: 1.5px solid var(--creme); background: var(--creme); color: var(--ink); border-radius: var(--radius) 0 0 var(--radius); min-width: 0; }
.newsletter button { font: inherit; font-weight: 500; padding: 12px 16px; border: 1.5px solid var(--roest); background: var(--roest); color: var(--creme); border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; }

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* --- pagina-koppen --- */
.page-head { padding-block: clamp(36px, 5vw, 64px) 0; }
.page-head .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 72px); align-items: end; }
.page-head h1 { margin-bottom: 16px; }
.page-head .lead { max-width: 48ch; }
.page-head figure { margin: 0; position: relative; }
.page-head figure img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.crumbs { font-size: 13.5px; margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.crumbs span { opacity: .55; margin: 0 8px; }

/* --- detail: checklist en prijs --- */
.detail { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.checklist { list-style: none; padding: 0; margin: 0 0 24px; }
.checklist li { padding: 10px 0 10px 34px; border-bottom: 1px solid var(--line); position: relative; }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 14px; height: 14px; background: var(--roest); border-radius: 50%; }
.pricebox { background: var(--perzik-licht); padding: 28px; position: relative; border-radius: var(--radius); }
.pricebox .wave { position: absolute; top: -21px; left: 0; height: 22px; color: var(--perzik-licht); }
.bg-perzik .pricebox { background: var(--creme); }
.bg-perzik .pricebox .wave { color: var(--creme); }
.pricebox h3 { font-family: var(--font-body); font-weight: 500; font-size: 18px; margin-bottom: 14px; }
.price { font-family: var(--font-display); font-size: 36px; color: var(--blauw); line-height: 1; margin-bottom: 4px; }
.price small { font-family: var(--font-body); font-size: 14px; font-weight: 400; margin-left: 6px; }
.pricebox dl { margin: 18px 0 22px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.pricebox dt { font-weight: 500; color: var(--blauw); } .pricebox dd { margin: 0; }
.placeholder { background: rgba(166,50,0,.10); border: 1px dashed var(--roest); color: var(--roest); padding: 0 6px; font-family: var(--font-body); font-size: .55em; vertical-align: middle; letter-spacing: .06em; border-radius: 3px; }

/* --- foto-strook --- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.strip--3 { grid-template-columns: repeat(3, 1fr); }
.strip--3 img { aspect-ratio: 4 / 3; }
.strip figure { margin: 0; position: relative; }

/* --- opties --- */
.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.option { background: var(--creme); border: 1.5px solid var(--blauw); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 140px 1fr; }
.option img { width: 100%; height: 100%; object-fit: cover; }
.option div { padding: 20px 22px; }
.option h3 { font-family: var(--font-body); font-weight: 500; font-size: 19px; margin-bottom: 6px; }
.option p { font-size: 15.5px; margin-bottom: 8px; }
.option .meta { font-size: 13.5px; font-weight: 500; color: var(--roest); }
.options--3 { grid-template-columns: repeat(3, 1fr); }
.options--3 .option { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
.options--2 { grid-template-columns: repeat(2, 1fr); }
.options--4 { grid-template-columns: repeat(4, 1fr); }
.options--4 .option { grid-template-columns: 1fr; grid-template-rows: 150px 1fr; }
.options--4 .option div { padding: 14px 16px 16px; }
.option--plat { grid-template-columns: 1fr; }
/* Materiaal waar Pleun nog geen foto van heeft: een rustig vlak in plaats van
   een gat, zodat de rij kaarten heel blijft. */
.option__nog { display: grid; place-items: center; background: var(--perzik-licht); padding: 0; min-height: 132px; }
.option__nog span { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--roest); }

/* melding: iets is er nog niet, maar komt eraan */
.melding { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: var(--creme); border-left: 4px solid var(--roest); border-radius: var(--radius); padding: 20px 24px; }
.melding__label { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--roest); white-space: nowrap; padding-top: 4px; }
.melding p { margin: 0; max-width: 70ch; }
/* Workshops met een datum die al vaststaat. Knopjes onder het datumveld in
   plaats van een apart blok: de pagina is al lang genoeg. */
.vaste-data { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.vaste-data__kop { font-size: 13px; opacity: .75; flex-basis: 100%; }
.vaste-datum { font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--blauw);
  background: transparent; color: var(--blauw); }
.vaste-datum:hover { background: var(--blauw); color: var(--creme); }
.vaste-datum.is-aan { background: var(--blauw); color: var(--creme); }

/* Een melding die zegt dat er iets misging, niet dat er iets staat te gebeuren. */
.melding--fout { border-left-color: #9B2C2C; margin-top: 20px; }
.melding--fout .melding__label { color: #9B2C2C; }
@media (max-width: 560px) { .melding { grid-template-columns: 1fr; gap: 8px; padding: 18px; } .melding__label { padding-top: 0; } }

/* stappenplan (workshops): genummerde stappen met een blok eronder */
.stap { border-top: 1.5px solid var(--blauw); padding: 28px 0 36px; }
.stap--laatste { border-bottom: 1.5px solid var(--blauw); }
.stap:first-of-type { margin-top: 36px; }
.stap__kop { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: start; margin-bottom: 18px; }
.stap__num { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 44px); color: var(--roest); line-height: 1; }
.stap__kop h3 { font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 26px); margin-bottom: 4px; }
.stap__kop p { margin: 0; max-width: 62ch; }
@media (max-width: 960px) { .options--2, .options--4 { grid-template-columns: 1fr; } .options--4 .option { grid-template-rows: 170px 1fr; } .stap__kop { grid-template-columns: 52px 1fr; } }

/* --- agenda --- */
.agenda { border-top: 1.5px solid var(--blauw); }
.agenda-row { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.agenda-row .date { font-family: var(--font-display); font-size: 26px; color: var(--blauw); line-height: 1; }
.agenda-row .date small { display: block; font-family: var(--font-body); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; white-space: nowrap; }
.agenda-row .spots { font-size: 14px; }
.agenda-row .spots.few { color: var(--roest); font-weight: 500; }

/* --- feestje samenstellen --- */
.planner { background: var(--creme); border: 1.5px solid var(--blauw); border-radius: var(--radius); padding: clamp(24px, 4vw, 44px); }
.planner-steps { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.planner-steps span { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border: 1.5px solid var(--blauw); color: var(--blauw); border-radius: var(--radius); }
.planner-steps span.active { background: var(--blauw); color: var(--creme); }
.planner .bubble { background: var(--perzik-licht); padding: 20px 24px; margin-bottom: 24px; position: relative; font-size: 16.5px; border-radius: var(--radius); }
.planner .bubble::after { content: ""; position: absolute; left: 32px; bottom: -12px; border: 12px solid transparent; border-top-color: var(--perzik-licht); border-bottom: 0; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-weight: 500; font-size: 14px; color: var(--blauw); }
.field input, .field select, .field textarea { font: inherit; padding: 12px 14px; border: 1.5px solid var(--blauw); background: #fff; border-radius: var(--radius); width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 15.5px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.choice { border: 1.5px solid var(--blauw); border-radius: var(--radius); overflow: hidden; padding: 0; background: #fff; text-align: left; cursor: pointer; font: inherit; }
.choice img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.choice div { padding: 12px 14px; }
.choice strong { display: block; color: var(--blauw); }
.choice small { font-size: 13px; }
.choice.selected { outline: 3px solid var(--roest); outline-offset: -3px; }

/* --- FAQ --- */
.faq details { border-bottom: 1.5px solid var(--blauw); }
.faq details:first-of-type { border-top: 1.5px solid var(--blauw); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 500; font-size: 18px; color: var(--blauw); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 26px; color: var(--roest); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; margin: 0; max-width: 64ch; }

/* --- contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-ways { display: grid; gap: 14px; margin: 28px 0; }
.way { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.way .ico { font-size: 40px; }
.way h2 { font-family: var(--font-body); font-weight: 500; font-size: 18px; margin-bottom: 4px; }
.way p { margin: 0; font-size: 15.5px; }
.form { background: var(--perzik-licht); padding: clamp(24px, 4vw, 40px); position: relative; border-radius: var(--radius); }
.form .wave { position: absolute; top: -21px; left: 0; height: 22px; color: var(--perzik-licht); }

/* --- over ons --- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value { padding: 32px 28px; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; border-radius: var(--radius); }
.value .ico { font-size: 52px; position: absolute; top: 24px; right: 24px; }
.value h3 { margin-bottom: 8px; }
.value p { margin: 0; font-size: 15.5px; }
.value--grijsblauw { background: var(--grijsblauw); }
.value--perzik { background: var(--perzik); }
.value--creme { background: var(--creme); border: 1.5px solid var(--blauw); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fact { border-left: 3px solid var(--roest); padding-left: 18px; }
.fact strong { display: block; color: var(--blauw); font-size: 18px; margin-bottom: 4px; }

/* --- prototype-notities --- */
.note { position: fixed; left: 16px; bottom: 16px; z-index: 40; background: #fff8c9; color: #5a4b00; font-size: 12.5px; padding: 8px 12px; border: 1px solid #e0cf6a; max-width: 320px; }
.note b { display: block; }

/* --- responsive --- */
@media (max-width: 960px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--creme); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px var(--gutter) 20px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 6px; font-size: 17px; }
  .sub { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 8px 16px; }
  .nav .has-sub > a::after { display: none; }
  .nav .btn { margin: 12px 0 0; justify-content: center; }
  .nav-toggle { display: block; }
  .hero .wrap, .split, .page-head .wrap, .detail, .contact-grid, .project__inner { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .service-row { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; }
  .service-row__img { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .service-row p { grid-column: 2; }
  .steps, .reviews, .values, .facts, .choice-grid, .options, .options--3 { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .gallery { grid-auto-rows: 90px; }
  .g-8x3, .g-7x3, .g-6x3, .g-5x3, .g-6x2 { grid-column: span 12; }
  .g-4x2, .g-4x3, .g-3x2, .g-3x3 { grid-column: span 6; }
  .agenda-row { grid-template-columns: 120px 1fr; }
  .agenda-row .btn { grid-column: 1 / -1; justify-content: center; }
  .hero-stack { aspect-ratio: 4 / 3.6; margin-top: 24px; }
  .hero-stack .st-b { left: 2%; }
  .project__inner img { min-height: 220px; max-height: 260px; }
}
@media (max-width: 560px) {
  .site-footer .cols, .strip, .field-row { grid-template-columns: 1fr; }
  .option { grid-template-columns: 1fr; }
  .option img, .option__nog { aspect-ratio: 16 / 9; }
  .note { display: none; }
}

/* formulier op perzik-sectie: crème, anders valt het weg */
.bg-perzik .form { background: var(--creme); }
.bg-perzik .form .wave { color: var(--creme); }
.choice[hidden] { display: none; }
.pakket figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .steps[style*="repeat(4"] { grid-template-columns: 1fr !important; } }
.field .check input { width: auto; padding: 0; margin: 0; }
.field .check { font-weight: 300; color: var(--ink); }

/* ==========================================================================
   v3 (13 sept): homepage-hero "Kies je moment", dienstpagina-kop met foto en
   golfpaneel, scroll-aanwijzing, en mobiele verbeteringen
   ========================================================================== */

/* --- homepage-hero --- */
.hero-v3 { position: relative; padding: clamp(36px, 6vw, 64px) 0 0; overflow: hidden; }
.hero-v3__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; padding-bottom: 56px; }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tile:hover img { transform: scale(1.04); }
.tile:focus-visible { outline: 3px solid var(--roest); outline-offset: 3px; }
.tile__label { position: absolute; left: 0; right: 0; bottom: 0; background: var(--creme); padding: 0 20px 18px; }
.tile__label .wave { position: absolute; top: -21px; left: 0; height: 22px; color: var(--creme); }
.tile__label strong { display: block; font-family: var(--font-display); font-size: 22px; color: var(--blauw); padding-top: 6px; }
.tile__label span { font-size: 14px; }
.tile:nth-child(2) { transform: translateY(28px); }
.tile--duo .tile__img { display: block; height: 100%; }
.tile--duo .tile__img img { height: 100%; }
.tile__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.tile__links a { font-size: 14px; font-weight: 500; color: var(--blauw); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tile__links a::after { content: "→"; transition: transform .15s; }
.tile__links a:hover { color: var(--roest); }
.tile__links a:hover::after { transform: translateX(3px); }
.tile--duo .tile__label span:not(.tile__links) { display: block; }
.hero-v3 .v3-st-a { position: absolute; top: 40px; left: 6%; font-size: 84px; }
.hero-v3 .v3-st-b { position: absolute; top: 60px; right: 6%; font-size: 72px; transform: rotate(10deg); }

/* --- dienstpagina-kop: foto + golfpaneel --- */
.page-hero { position: relative; padding-top: min(46vh, 430px); }
.page-hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: min(60vh, 560px); object-fit: cover; }
.page-hero__panel { position: relative; }
.page-hero__card { position: relative; width: min(100%, calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 800px)); padding: 36px 0 0 max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.page-hero__card::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; bottom: 0; background: var(--creme); }
.page-hero__card .wave { position: absolute; top: 0; left: 0; width: 100%; height: 36px; color: var(--creme); }
.page-hero__inner { position: relative; padding: 10px clamp(20px, 3vw, 40px) 8px 0; }
.page-hero__inner h1 { max-width: 16ch; }
.page-hero__inner .lead { max-width: 48ch; }
.page-hero + #verder { scroll-margin-top: 90px; }
.scroll-cue { border: 0; cursor: pointer; font-family: var(--font-body); position: absolute; right: var(--gutter); top: calc(min(60vh, 560px) - 64px); display: inline-flex; align-items: center; gap: 8px; background: var(--blauw); color: var(--creme); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.18); z-index: 2; }
.scroll-cue__arrow { display: inline-block; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue__arrow { animation: none; } }

/* --- mobiel --- */
@media (max-width: 960px) {
  .hero-v3__tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; width: auto; margin: 28px 0 0; padding: 4px var(--gutter) 40px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hero-v3__tiles::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 78%; scroll-snap-align: center; }
  .tile:nth-child(2) { transform: none; }
  .hero-v3 .v3-st-a, .hero-v3 .v3-st-b { display: none; }
  .page-hero { padding-top: min(38vh, 300px); }
  .page-hero__bg { height: min(50vh, 400px); }
  .page-hero__inner { padding-right: 0; }
  .scroll-cue { top: calc(min(50vh, 400px) - 56px); }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .nav.open { position: fixed; top: 64px; bottom: 0; overflow-y: auto; padding-top: 8px; }
  .nav a { font-size: 19px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
  .sub a { font-size: 16px; border-bottom: 0; padding: 8px 6px; }
  .sub a small { font-size: 13px; }
  .service-row__num { font-size: 28px; }
  .service-row h3 { font-size: 21px; }
  .reviews { gap: 14px; }
  .review { padding: 34px 22px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .site-header .wrap { min-height: 64px; }
  .logo { width: 98px; }
  .marquee__track span { font-size: 17px; }
  .section { padding-block: clamp(40px, 10vw, 56px); }
  .page-head { padding-top: 24px; }
  .hero-v3 h1 { font-size: 34px; }
  .tile { flex-basis: 82%; }
  .tile__label strong { font-size: 19px; }
  .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .pricebox { padding: 22px; }
  .planner { padding: 18px; }
  .planner-steps span { font-size: 11px; padding: 6px 10px; }
  .choice-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -18px 20px; padding: 0 18px 6px; }
  .choice { flex: 0 0 76%; scroll-snap-align: center; }
  .options--3 .option { grid-template-rows: 160px 1fr; }
  .site-footer { padding-top: 44px; }
  .site-footer .cols { gap: 28px; }
  .crumbs { font-size: 12.5px; }
  .kicker { font-size: 11px; }
}
@media (max-width: 560px) {
  .wa-float { width: 46px; height: 46px; right: 12px; bottom: 12px; }
  .wa-float svg { width: 24px; height: 24px; }
  main > section:last-of-type .btn-row, .cta .btn-row { padding-right: 56px; }
}
@media (max-width: 560px) {
  .page-hero__inner .btn-row, .page-head .btn-row, .hero-v3 .btn-row { padding-right: 60px; }
  .page-hero__inner .btn-row .btn, .page-head .btn-row .btn { flex: 1 1 100%; }
}
.sub a, .sub a:hover, .sub a[aria-current="page"] { text-decoration: none; }
.sub a[aria-current="page"], .sub a:hover { color: var(--roest); }

.page-hero + section, .page-hero ~ section { scroll-margin-top: 84px; }

/* fotokop: paneel over de volle breedte, scroll-knop boven de golfrand */
.page-hero__card { width: 100%; }
.page-hero__inner { max-width: 760px; }
.scroll-cue { top: calc(min(46vh, 430px) - 64px); }
@media (max-width: 960px) { .scroll-cue { top: calc(min(38vh, 300px) - 56px); } }

/* ==========================================================================
   v4 (13 sept): intake volgens Pleun. Kleurrondjes, i-symbool, wensen-dialoog, proces in 5 stappen
   ========================================================================== */
.swatches { display: flex; flex-wrap: wrap; gap: 10px 14px; padding-top: 4px; }
.swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--ink); width: 58px; text-align: center; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch__dot { width: 38px; height: 38px; border-radius: 50%; background: var(--sw); border: 2px solid rgba(31,67,137,.25); box-shadow: inset 0 0 0 2px var(--creme); transition: transform .15s, border-color .15s; }
.swatch:hover .swatch__dot { transform: scale(1.08); }
.swatch input:checked + .swatch__dot { border-color: var(--roest); border-width: 3px; transform: scale(1.1); }
.swatch input:focus-visible + .swatch__dot { outline: 3px solid var(--roest); outline-offset: 2px; }
.swatch input:checked ~ .swatch__name { font-weight: 500; color: var(--roest); }
.check .placeholder { margin-left: 6px; font-size: 11px; }
.steps--5 { grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); }
.steps--5 .step h3 { font-size: 17px; }
.steps--5 .step p { font-size: 15px; }
.info-cue { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--creme); color: var(--blauw); font-family: var(--font-display); font-size: 19px; display: grid; place-items: center; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; box-shadow: 0 4px 12px rgba(31,67,137,.2); }
.gallery figure:hover .info-cue, .gallery figure:focus-visible .info-cue { opacity: 1; transform: none; }
.gallery-empty { margin-top: 24px; padding: 24px; border: 1.5px dashed var(--blauw); border-radius: var(--radius); font-size: 16px; }
.wensen-dialog { width: min(760px, 92vw); }
.wensen-dialog .form { background: var(--creme); padding: 0; }
.wensen-dialog .form .wave { display: none; }
.project__body h2 { text-wrap: balance; }
form.planner .bubble { margin-top: 8px; }
@media (max-width: 960px) {
  .steps--5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps--5 { grid-template-columns: 1fr; }
  .swatch { width: 52px; font-size: 11px; }
  .swatch__dot { width: 34px; height: 34px; }
}

/* --- vragenlijst-formulieren --- */
.q { position: relative; padding-left: 46px; margin-bottom: 26px; }
.q[hidden] { display: none; }
.q__num { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--blauw); color: var(--creme); font-family: var(--font-display); font-size: 16px; display: grid; place-items: center; }
.q .field { margin-bottom: 0; }
.q .field-row { margin-bottom: 0; }
.q .field label, .q > .field > label { font-size: 17px; font-weight: 500; color: var(--blauw); }
.q .field-row .field label { font-size: 15px; }
.q-actions { margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.q-next { padding: 9px 16px; font-size: 14px; }
.q-progress { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--roest); margin: 0 0 18px; }
.q-tail { padding-left: 46px; }
.q-tail[hidden] { display: none; }
/* Zegt welke vraag nog leeg is als versturen niet lukt. De ballon van de
   browser kan op een telefoon buiten beeld vallen; deze staat bij de knop. */
.q-melding { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius);
  background: rgba(155, 44, 44, .08); border-left: 3px solid #9B2C2C;
  color: var(--ink); font-size: 15px; }
.q-melding[hidden] { display: none; }
.q--in { animation: qin .35s ease both; }
@keyframes qin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q--in { animation: none; } }
@media (max-width: 560px) { .q, .q-tail { padding-left: 0; } .q__num { position: static; margin-bottom: 8px; } }

/* --- opmerkingen 13 sept: kleurnamen, invoervelden, datum --- */
:root { color-scheme: light; }
.field input, .field select, .field textarea, .newsletter input { color: var(--ink); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: rgba(53,53,53,.45); }
.swatch { width: auto; }
.swatch__name { position: absolute; left: 50%; transform: translateX(-50%); top: 44px; white-space: nowrap; font-size: 12px; background: var(--blauw); color: var(--creme); padding: 3px 8px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.swatch { position: relative; }
.swatch:hover .swatch__name, .swatch input:focus-visible ~ .swatch__name { opacity: 1; }
.swatch input:checked ~ .swatch__name { opacity: 0; }
.swatches { padding-bottom: 6px; }
.swatch-out { font-size: 14px; margin: 10px 0 0; }
.swatch-out strong { color: var(--roest); font-weight: 500; }
input[type="date"] { min-height: 48px; }
.swatch input:disabled + .swatch__dot { cursor: default; }
input[type="file"] { font: inherit; padding: 10px 0; }

/* --- ontwerprichtlijnen (visueel) en AI-check --- */
.gl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.gl-col { border-radius: var(--radius); padding: 24px; }
.gl-col--wel { background: var(--perzik-licht); }
.gl-col--niet { background: var(--grijsblauw); }
.gl-col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 500; font-size: 20px; margin-bottom: 18px; }
.gl-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--creme); font-size: 16px; font-weight: 600; }
.gl-badge--wel { background: var(--blauw); }
.gl-badge--niet { background: var(--roest); }
.gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gl-tile { background: var(--creme); border-radius: var(--radius); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.gl-tile strong { color: var(--blauw); font-weight: 500; font-size: 16px; }
.gl-tile span { font-size: 14px; line-height: 1.45; }
.gl-icon { display: block; width: 72px; height: 72px; margin-bottom: 6px; }
.gl-icon svg { width: 100%; height: 100%; display: block; }
.gl-col--niet .gl-tile { position: relative; }
.gl-col--niet .gl-icon { opacity: .85; }
.gl-deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.gl-tile--row { flex-direction: row; align-items: center; gap: 14px; border: 1.5px solid var(--blauw); }
.gl-tile--row .gl-icon { width: 60px; height: 60px; margin: 0; flex: 0 0 60px; }
.gl-tile--row div { display: flex; flex-direction: column; gap: 4px; }
.ai-check { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ai-check[hidden] { display: none; }
.ai-result { flex-basis: 100%; background: var(--creme); border: 1.5px solid var(--blauw); border-radius: var(--radius); padding: 18px; font-size: 15px; }
.ai-result[hidden] { display: none; }
.ai-result h4 { margin: 0 0 8px; font-size: 17px; }
.ai-result ul { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.ai-result li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.ai-result li .ok, .ai-result li .nok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--creme); font-size: 12px; font-weight: 600; margin-top: 1px; }
.ai-result li .ok { background: var(--blauw); } .ai-result li .nok { background: var(--roest); }
.ai-result .ai-demo { font-size: 12.5px; color: var(--roest); border: 1px dashed var(--roest); padding: 6px 10px; margin-top: 10px; display: inline-block; }
.ai-result .ai-busy { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 960px) { .gl-cols, .gl-deliver { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gl-grid { grid-template-columns: 1fr 1fr; } .gl-icon { width: 56px; height: 56px; } }

/* --- Canva-sjabloon: mock van hoe het sjabloon eruitziet --- */
.canva-embed { background: #fff; padding: 0; overflow: hidden; }
.canva-embed__bar { background: var(--blauw); color: var(--creme); font-size: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 6px; }
.canva-embed__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--perzik); display: inline-block; }
.canva-embed__bar span:nth-child(2) { background: var(--grijsblauw); } .canva-embed__bar span:nth-child(3) { background: var(--creme); margin-right: 6px; }
.canva-embed__frame { position: relative; aspect-ratio: 1 / 1.2; background: #2A2D33; overflow: hidden; }
.canva-embed .canva-embed__frame .canva-embed__page { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; display: block; padding: 14px 14px 36px; box-sizing: border-box; }
.canva-embed .canva-embed__frame .canva-embed__page[hidden] { display: none; }
.canva-embed__live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.canva-embed__nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 12px; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); color: #fff; }
.canva-embed__teller { font-size: 12px; letter-spacing: .04em; }
.canva-embed__knop { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.canva-embed__knop:hover { background: #fff; }
.canva-embed__knop:disabled { opacity: .35; cursor: default; }
.canva-embed__knop:focus-visible { outline: 2px solid var(--perzik); outline-offset: 2px; }
.canva-embed figcaption { padding: 10px 12px; }
@media (max-width: 560px) { .canva-embed__frame { aspect-ratio: 1 / 1.35; } }
/* fotokop: iets hoger op desktop, zodat het onderwerp van liggende foto's ruimer in beeld blijft */
@media (min-width: 961px) { .page-hero { padding-top: min(50vh, 470px); } .page-hero__bg { height: min(66vh, 620px); } .scroll-cue { top: calc(min(50vh, 470px) - 64px); } }

@media (hover: none) { .gallery figcaption { opacity: 1; padding: 8px 10px; font-size: 12px; } .info-cue { opacity: 1; transform: none; width: 28px; height: 28px; font-size: 16px; } }

.tag-binnenkort { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--creme); background: var(--roest); border-radius: 999px; padding: 4px 10px; vertical-align: middle; margin-left: 10px; white-space: nowrap; }


/* ==========================================================================
   Winkelwagen en kassa (DIY-pakketten)
   ========================================================================== */
.keuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.keuze { position: relative; display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--blauw); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; background: #fff; }
.keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.keuze__naam { font-weight: 500; color: var(--blauw); }
.keuze__prijs { font-size: 13.5px; opacity: .75; }
.keuze:hover { border-color: var(--roest); }
.keuze:has(input:checked) { background: var(--perzik-licht); border-color: var(--roest); border-width: 2.5px; padding: 10.5px 12.5px; }
.keuze:has(input:focus-visible) { outline: 3px solid var(--roest); outline-offset: 2px; }
.keuze[hidden] { display: none; }

.mand-knopje { position: relative; }
.mand-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--roest); color: var(--creme); font-size: 12px; font-weight: 500; display: grid; place-items: center; padding: 0 5px; }

.mand-lade { position: fixed; inset: 0; z-index: 60; background: rgba(31,67,137,.45); display: flex; justify-content: flex-end; }
.mand-paneel { background: var(--creme); width: min(440px, 100%); height: 100%; overflow-y: auto; padding: 24px clamp(18px, 4vw, 32px) 32px; box-shadow: -12px 0 40px rgba(0,0,0,.2); }
.mand-paneel__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.mand-paneel__kop h2 { margin: 0; font-size: 26px; }
.mand-paneel__kop .project__close { position: static; }

.mand-regel { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mand-regel img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); }
.mand-regel strong { display: block; font-weight: 500; color: var(--blauw); font-size: 15px; line-height: 1.3; }
.mand-regel__prijs { font-size: 13px; opacity: .7; }
.mand-aantal { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.mand-knop { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--blauw); background: transparent; color: var(--blauw); font-size: 15px; line-height: 1; cursor: pointer; }
.mand-knop:hover { background: var(--blauw); color: var(--creme); }
.mand-weg { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--roest); cursor: pointer; padding: 4px; }
.mand-leeg { padding: 20px 0; opacity: .75; }

.mand-som { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 18px 0 8px; font-size: 15.5px; }
.mand-som dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.mand-som__eind { font-weight: 500; color: var(--blauw); font-size: 18px; border-top: 1.5px solid var(--blauw); padding-top: 8px; margin-top: 4px; }
.mand-btw { font-size: 13px; opacity: .7; margin: 0 0 16px; }

.prijs-indicatie { background: var(--perzik-licht); border-radius: var(--radius); padding: 12px 16px; font-size: 15px; margin: 0 0 16px; }
.prijs-indicatie strong { color: var(--roest); font-weight: 500; }
.field small.fout { color: var(--roest); opacity: 1; }
.adres-zoek { position: relative; }
.adres-suggesties { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 4px; background: #fff; border: 1.5px solid var(--blauw); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(31,67,137,.16); max-height: 268px; overflow-y: auto; }
.adres-suggesties li { padding: 9px 12px; border-radius: 4px; cursor: pointer; font-size: 15px; line-height: 1.35; }
.adres-suggesties li.is-actief, .adres-suggesties li:hover { background: var(--perzik-licht); color: var(--blauw); }
.adres-melding { font-size: 13px; margin: -8px 0 16px; }
.adres-melding--fout { color: var(--roest); opacity: 1; }
.kassa-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.kassa-overzicht { background: var(--perzik-licht); border-radius: var(--radius); padding: 24px; position: relative; }
.kassa-overzicht .wave { position: absolute; top: -21px; left: 0; height: 22px; color: var(--perzik-licht); }
.kassa-overzicht .mand-regel { grid-template-columns: 44px 1fr auto; }
.kassa-overzicht .mand-regel img { width: 44px; height: 44px; }
.kassa-overzicht .mand-weg { display: none; }
@media (max-width: 960px) { .kassa-grid { grid-template-columns: 1fr; } }

/* ─── Feestpakketten als prijstrap ─────────────────────────────────────
   Drie kaarten van compact naar compleet, met leeftijdsknoppen erboven.
   In dit blok geen roesttinten: rood leest in een vergelijking als "dit kan
   niet", en alles wat hier staat kan juist wél. */
.fv-tabs { display: flex; gap: 8px; margin: 28px 0 24px; flex-wrap: wrap; }
.fv-tab { font: inherit; font-weight: 500; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--blauw); background: transparent; color: var(--blauw); }
.fv-tab.is-aan { background: var(--blauw); color: var(--creme); }
.feest-paneel[hidden] { display: none; }

.trap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.trap__kaart { background: var(--creme); border: 1.5px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  cursor: pointer; transition: border-color .15s, transform .15s; }
.trap__kaart:hover { border-color: var(--blauw); }
.trap__kaart:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; }
/* Gekozen feestje. De rand is 2px waar hij anders 1,5px is; dat halve pixeltje
   verschil zou de kaart een fractie doen verspringen, dus vangt een negatieve
   marge het op. */
.trap__kaart--uit { border-color: var(--blauw); border-width: 2px; margin: -0.5px; }
.trap__kaart--uit .trap__knop { background: var(--blauw); color: var(--creme); }
/* Niet gekozen: de knop blijft leesbaar maar vraagt minder aandacht. */
.trap__kaart:not(.trap__kaart--uit) .trap__knop { background: transparent; color: var(--blauw); }
.trap__kaart img { width: 100%; height: 170px; object-fit: cover; display: block; }
/* Sfeerbeelden: een vierkante strook waar je met de pijltjes of je vinger
   doorheen bladert. De strook scrollt zelf, dus zonder javascript werkt het
   swipen nog steeds en zijn alle foto's bereikbaar. */
.trap__beeld { position: relative; aspect-ratio: 1; overflow: hidden; }
.trap__kaart .trap__beeld img { height: 100%; }
.trap__spoor { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.trap__spoor::-webkit-scrollbar { display: none; }
.trap__spoor img { flex: 0 0 100%; scroll-snap-align: center; }
.trap__pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 245, 231, .92); color: var(--blauw);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(31, 67, 137, .18); }
.trap__pijl:hover { background: var(--creme); }
.trap__pijl--terug { left: 8px; } .trap__pijl--verder { right: 8px; }
.trap__bollen { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 5px; }
.trap__bol { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 245, 231, .55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.trap__bol.is-aan { background: var(--creme); }
@media (prefers-reduced-motion: reduce) { .trap__spoor { scroll-behavior: auto; } }
.trap__tekst { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.trap__tekst h3 { margin: 0; }
.trap__trede { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--creme);
  color: var(--blauw); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; }
.trap__kaart--uit .trap__trede { background: var(--blauw); color: var(--creme); }
.trap__onder { margin: 0; color: var(--blauw); opacity: .78; }
.trap__prijs { font-size: 32px; line-height: 1; font-weight: 600; color: var(--blauw);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.trap__prijs small { font-size: 13px; opacity: .7; font-weight: 400; }
.trap .checklist { margin: 0; flex: 1; }
/* Blauwe bolletjes in plaats van de roestkleurige van elders: in een
   vergelijking mag niets als een verbod lezen. */
.trap .checklist li::before { background: var(--blauw); }
.trap .checklist li { padding: 8px 0 8px 30px; }
.trap .checklist li::before { top: 14px; width: 11px; height: 11px; left: 3px; }
.trap .btn { margin-top: 6px; text-align: center; justify-content: center; }
@media (max-width: 860px) { .trap { grid-template-columns: 1fr; } }

/* Kopje in het label van een fototegel: zegt in welke wereld je terechtkomt. */
.tile__kicker { display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--roest); padding-top: 12px; }
.tile__label strong { padding-top: 2px; }

/* ─── De winkel ────────────────────────────────────────────────────────
   Stond eerst als stijlblok in de pagina zelf; de winkel is nu een echte
   pagina en de kaarten worden ook op de homepage gebruikt. */
/* Beeld voorop: de foto is het grootste deel van de kaart en wisselt bij aanwijzen. */
.wk-beeld { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--creme); }
/* Zolang de productfoto er nog niet is: een symbool op een rustig vlak, zodat de
   pagina niet vol staat met beeld dat toch vervangen wordt. */
.wk-beeld--leeg { display: grid; place-items: center; gap: 10px; align-content: center;
  background: var(--perzik-licht); }
.wk-beeld--leeg .ico { width: 44px; height: 44px; color: var(--roest); opacity: .4; position: static; }
.wk-beeld--leeg .ico svg { width: 100%; height: 100%; display: block; }
.wk-beeld__nog { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blauw); opacity: .5; }
.wk-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-beeld__b { opacity: 0; transition: opacity .35s ease; }
.wk-kaart:hover .wk-beeld__b, .wk-kaart:focus-within .wk-beeld__b,
.wk-etalage__item:hover .wk-beeld__b { opacity: 1; }
.wk-beeld__a { transition: transform .5s ease; }
.wk-kaart:hover .wk-beeld__a, .wk-etalage__item:hover .wk-beeld__a { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .wk-beeld__a { transition: none; }
  .wk-kaart:hover .wk-beeld__a, .wk-etalage__item:hover .wk-beeld__a { transform: none; }
}
.wk-filters, .wk-sporen { display: flex; gap: 10px; margin: 26px 0 28px; flex-wrap: wrap; }
.wk-filters--gelegenheid { margin: 0 0 24px; }
.wk-filter { font: inherit; font-weight: 600; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--blauw); background: transparent; color: var(--blauw); }
.wk-filter.is-aan { background: var(--blauw); color: var(--creme); }
.wk-raster, .wk-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.wk-kaart { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.wk-kaart[hidden] { display: none; }
.wk-kaart__tekst { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.wk-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--roest); }
.wk-kaart__tekst h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.wk-kaart__tekst p { margin: 0; font-size: 14px; opacity: .72; flex: 1;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
/* Past de prijs niet naast de actie, dan zakt de actie naar de volgende regel
   in plaats van half weg te vallen. Dat gebeurt bij de DIY-pakketten, waar in
   plaats van een bedrag een zinnetje staat. */
.wk-kaart__voet { display: flex; align-items: baseline; justify-content: space-between;
  gap: 2px 10px; margin-top: 8px; flex-wrap: wrap; }
.wk-prijs { font-size: 18px; font-weight: 700; color: var(--blauw); }
.wk-prijs--zin { font-size: 14px; font-weight: 400; opacity: .75; }
/* Het aanraakvlak is 44px hoog zodat je hem met een duim raakt; de
   onderstreping blijft strak om de tekst zitten. */
.wk-actie { font: inherit; font-size: 14px; font-weight: 600; color: var(--blauw); background: none;
  border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; position: relative; padding: 0; }
.wk-actie::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px;
  border-bottom: 1.5px solid currentColor; }
.wk-kaart:hover .wk-actie { color: var(--roest); }
.wk-baan__voet { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.wk-baan__voet .muted { font-size: 14.5px; }
/* sporen */
.wk-spoor { font: inherit; text-align: left; cursor: pointer; padding: 0 0 16px; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit;
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; }
.wk-spoor img { width: 100%; height: 130px; object-fit: cover; display: block; margin-bottom: 12px; }
.wk-spoor strong, .wk-spoor span { padding-inline: 18px; }
.wk-spoor strong { font-size: 19px; }
.wk-spoor span { font-size: 14.5px; opacity: .78; }
.wk-spoor.is-aan { border-color: var(--blauw); border-width: 2px; box-shadow: 0 12px 30px rgba(31,67,137,.12); }
.wk-baan[hidden] { display: none; }
.wk-baan__kop { margin-bottom: 22px; }
.wk-baan__kop h2 { margin: 0 0 6px; }
.wk-baan__kop p { margin: 0; max-width: 62ch; opacity: .85; }
/* etalage */
.wk-etalage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.wk-etalage__rest { display: contents; }
.wk-etalage__item { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; }
.wk-etalage__item > div { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.wk-etalage__item h3 { margin: 0; }
.wk-etalage__item p { margin: 0; font-size: 15px; opacity: .78; flex: 1; }
.wk-etalage__item--groot { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.wk-etalage__item--groot .wk-beeld { aspect-ratio: auto; height: 100%; min-height: 320px; }
.wk-etalage__item--groot > div { justify-content: center; padding: 28px 32px; }
.wk-etalage__item--groot h3 { font-size: 30px; }
.wk-etalage__item--groot p { flex: 0; font-size: 16.5px; }
/* op maat */
.wk-opmaat-kop h2 { margin: 0 0 8px; }
.wk-opmaat-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.wk-opmaat { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wk-opmaat img { width: 100%; height: 150px; object-fit: cover; display: block; }
.wk-opmaat > div { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.wk-opmaat h3 { margin: 0; font-size: 19px; }
.wk-opmaat p { margin: 0; font-size: 15px; opacity: .8; }
/* homepage */
.wk-poorten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.wk-poort { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wk-poort img { width: 100%; height: 260px; object-fit: cover; display: block; }
.wk-poort__tekst { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.wk-poort__tekst strong { font-size: 25px; font-family: var(--font-display, inherit); font-weight: 500; }
.wk-poort__tekst p { margin: 0; opacity: .85; }
.wk-ervaringen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.wk-ervaring { display: grid; grid-template-columns: .85fr 1.15fr; text-decoration: none; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wk-ervaring img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; }
.wk-ervaring > div { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.wk-ervaring h3 { margin: 0; }
.wk-ervaring p { margin: 0; font-size: 15.5px; opacity: .82; }
@media (max-width: 1000px) {
  .wk-raster, .wk-rij { grid-template-columns: repeat(2, 1fr); }
  .wk-etalage { grid-template-columns: repeat(2, 1fr); }
  .wk-etalage__item--groot { grid-template-columns: 1fr; }
  .wk-etalage__item--groot .wk-beeld { min-height: 230px; }
  .wk-opmaat-rij { grid-template-columns: 1fr; }
  .wk-poorten, .wk-ervaringen { grid-template-columns: 1fr; }
  .wk-ervaring { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wk-raster, .wk-rij, .wk-etalage { grid-template-columns: 1fr; }
}

/* ─── Workshopkalender ───────────────────────────────────────────── */
/* De kaarten komen uit javascript, want de data staan in het portaal en niet
   in deze site. Daarom staat hun opmaak hier en niet bij de andere kaarten. */
.ws-kalender { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 720px) { .ws-kalender { grid-template-columns: repeat(2, 1fr); } }

.ws-kaart { background: var(--creme-licht, #FFFBF2); border: 1px solid var(--line, rgba(31,67,137,.18));
  border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ws-kaart.is-vol { opacity: .62; }
.ws-kaart h3 { margin: 0; font-size: 21px; }
.ws-kaart p { margin: 0; }
.ws-kaart__wanneer { font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--roest, #A63200); font-weight: 600; }
.ws-kaart__waar { font-size: 14px; color: rgba(53,53,53,.72); }
.ws-kaart__meta { font-size: 14px; color: rgba(53,53,53,.72); }

.ws-kaart__boek { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line, rgba(31,67,137,.18)); }
.ws-kaart__prijs { font-size: 22px; font-weight: 700; color: var(--blauw, #1F4389); line-height: 1.1; }
.ws-kaart__prijs small { display: block; font-size: 12px; font-weight: 400; color: rgba(53,53,53,.6); }
.ws-kaart__aantal { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: rgba(53,53,53,.6); }
.ws-kaart__aantal input { width: 68px; padding: 7px 8px; font-size: 15px;
  border: 1px solid var(--line, rgba(31,67,137,.18)); border-radius: 6px; background: #fff; }
.ws-kaart__boek .btn { margin-left: auto; }

/* Een ticket heeft geen productfoto; in het mandje staat er een ster in plaats
   van beeld, op dezelfde plek en in dezelfde maat. */
.mand-regel__ticket { width: 56px; height: 56px; border-radius: 6px; display: grid;
  place-items: center; font-size: 22px; color: var(--blauw, #1F4389);
  background: rgba(31,67,137,.08); flex: none; }

/* De losse workshoppagina: dezelfde kaart, maar hij staat alleen. */
.ws-kaart--groot { margin-top: 20px; }
.ws-kaart--groot .ws-kaart__wanneer { font-size: 14px; }
.ws-kaart h3 a { color: inherit; text-decoration: none; }
.ws-kaart h3 a:hover { text-decoration: underline; }

/* ─── Workshopkaart: foto's, starttijden en opties ────────────────── */
.ws-kaart { padding: 0; overflow: hidden; }
.ws-kaart__tekst { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ws-kaart__beeld { position: relative; }
.ws-kaart__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Zonder javascript blijft het een strook die je met je vinger opzij schuift,
   dus de foto's zijn altijd te zien. */
.ws-rol { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; }
.ws-rol::-webkit-scrollbar { display: none; }
.ws-rol img { flex: 0 0 100%; scroll-snap-align: center; }
.ws-pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border-radius: 50%; border: 0; background: rgba(255,245,231,.9); color: var(--blauw);
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ws-pijl--terug { left: 10px; } .ws-pijl--door { right: 10px; }
.ws-bollen { position: absolute; left: 0; right: 0; bottom: 10px; display: flex;
  justify-content: center; gap: 6px; }
.ws-bol { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,245,231,.6); }
.ws-bol.is-aan { background: var(--creme); }
.ws-kaart__over { font-size: 15.5px; }
.ws-kaart__klein { font-size: 13px; color: rgba(53,53,53,.6); margin: 0; }

.ws-keuze { margin-top: 6px; }
.ws-keuze__kop { display: block; font-size: 13px; font-weight: 500; color: var(--blauw);
  margin-bottom: 6px; }
.ws-tijden { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-tijd { font: inherit; font-size: 14.5px; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--blauw); background: transparent; color: var(--blauw); line-height: 1.2; }
.ws-tijd small { display: block; font-size: 11px; opacity: .75; }
.ws-tijd small:empty { display: none; }
.ws-tijd.is-aan { background: var(--blauw); color: var(--creme); }
.ws-tijd.is-vol { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.ws-opties { display: grid; gap: 6px; }
.ws-optie { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  font-size: 15px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
  cursor: pointer; }
.ws-optie.is-aan { border-color: var(--blauw); background: rgba(31,67,137,.05); }
.ws-optie em { font-style: normal; font-size: 13px; color: var(--roest); white-space: nowrap; }
.btn--klein { padding: 9px 15px; font-size: 14px; }
.ws-kaart__contact { margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line, rgba(31,67,137,.18)); display: grid; gap: 8px; }
.ws-kaart__contact span { font-size: 13.5px; color: rgba(53,53,53,.72); }