/* Website Westland, gedeelde stijl voor alle landingspagina's */

:root{
  --kas:#123B2E;
  --kas-diep:#0A241C;
  --mos:#1C5140;
  --blad:#7FB89A;
  --zand:#D8B173;
  --zand-diep:#BF9450;
  --papier:#F6F4EE;
  --glas:#E6EEE8;
  --inkt:#10241D;
  --grijs:#5A6B63;
  --lijn:#D9E1DA;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--papier);color:var(--inkt);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}

h1,h2,h3{line-height:1.1;letter-spacing:-.03em;font-weight:500}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:300}
h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:400}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.018em;line-height:1.32}
p{max-width:66ch}
.lood{font-size:clamp(1.06rem,2.1vw,1.24rem);line-height:1.58;font-weight:300;color:var(--grijs)}
.oog{display:block;font-size:.78rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--zand-diep);margin-bottom:18px}

/* ---------- logo ---------- */
.merk{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:32px;height:32px;flex:none;display:block}
.mark svg{width:100%;height:100%;display:block}
.woord{display:flex;flex-direction:column;line-height:1}
.woord b{font-size:1.06rem;font-weight:600;letter-spacing:-.028em}
.woord span{font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--zand-diep);margin-top:4px;font-weight:500}

/* ---------- balk ---------- */
.balk{position:sticky;top:0;z-index:60;background:rgba(246,244,238,.9);backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid var(--lijn)}
.balk .wrap{display:flex;align-items:center;gap:22px;height:78px}
.balk nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.balk nav a{text-decoration:none;font-size:.97rem;color:var(--grijs);font-weight:400}
.balk nav a:hover{color:var(--kas)}
.tel{font-weight:600;color:var(--kas) !important}

/* ---------- menu op de telefoon ---------- */
.mobmenu{display:none;position:relative}
@media(max-width:880px){
  .balk nav a:not(.tel){display:none}
  .balk nav{gap:14px}
  .mobmenu{display:block}
}
@media(max-width:560px){
  /* Op een telefoon is er geen ruimte voor logo, nummer en menu naast elkaar.
     Het woordmerk gaat eruit, want de kop eronder zegt al waar je bent. */
  .balk .wrap{gap:12px;height:70px}
  .woord{display:none}
  .merk{gap:0}
}
.tel{white-space:nowrap}
.mobmenu summary{list-style:none;cursor:pointer;width:42px;height:42px;padding:0;display:grid;place-items:center;border:1px solid var(--lijn);border-radius:11px;background:#fff;font-size:0}
.mobmenu summary::-webkit-details-marker{display:none}
.mobmenu summary::marker{content:"";font-size:0}
/* De FAQ-regels verderop gebruiken een kale summary-selector. Hier zetten we
   het uitklappijltje en de padding daarvan expliciet uit. */
.mobmenu summary::after{content:none;display:none}
.mobmenu summary span{position:relative;display:block;width:18px;height:2px;background:var(--kas);border-radius:2px;transition:background .18s ease}
.mobmenu summary span::before,.mobmenu summary span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--kas);border-radius:2px;transition:transform .2s ease}
.mobmenu summary span::before{top:-6px}
.mobmenu summary span::after{top:6px}
.mobmenu[open] summary span{background:transparent}
.mobmenu[open] summary span::before{transform:translateY(6px) rotate(45deg)}
.mobmenu[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}
.mobmenu-paneel{position:absolute;right:0;top:calc(100% + 14px);background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:10px;min-width:216px;box-shadow:0 26px 54px -26px rgba(18,59,46,.55);display:grid;gap:2px;z-index:70}
.mobmenu-paneel a{display:block;padding:12px 15px;border-radius:9px;text-decoration:none;font-size:1rem;color:var(--inkt);font-weight:400}
.mobmenu-paneel a:hover,.mobmenu-paneel a:focus{background:var(--glas)}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border-radius:100px;font-family:inherit;font-size:1rem;font-weight:500;letter-spacing:-.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.knop:hover{transform:translateY(-2px)}
.knop-zand{background:var(--zand);color:var(--kas-diep);font-weight:600}
.knop-zand:hover{background:var(--zand-diep)}
.knop-lijn{border-color:rgba(255,255,255,.34);color:#fff}
.knop-lijn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.6)}
.knop-groen{background:var(--kas);color:#fff}
.knop-groen:hover{background:var(--mos)}
.knop-groenlijn{border-color:var(--kas);color:var(--kas)}
.knop-groenlijn:hover{background:var(--kas);color:#fff}
.knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ---------- kruimelpad ---------- */
.kruimels{font-size:.87rem;color:rgba(255,255,255,.6);margin-bottom:22px;font-weight:300}
.kruimels a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.kruimels a:hover{color:#fff}
.kruimels span{margin:0 8px;opacity:.5}

/* ---------- hero ---------- */
.hero{background:var(--kas);color:#fff;position:relative;overflow:hidden;padding:clamp(56px,7vw,84px) 0 clamp(72px,9vw,104px)}

/* Het glasraster. Twee lagen op verschillende schaal en snelheid, allebei door
   hetzelfde vervormingsveld. Het veld staat stil en het raster schuift eroorheen,
   dus de ruis hoeft maar één keer berekend te worden. */
.kas-raster{
  /* De scheefstand van 7 graden duwt de rechterkant omhoog, ruwweg 0,12 keer de
     breedte van de laag. Met het draaipunt in het midden is dat de helft, en de
     200 pixels speling boven en onder vangen dat op tot voorbij een 4K-scherm. */
  position:absolute;inset:-200px -12% -200px -12%;
  transform:skewY(-7deg);transform-origin:center;
  pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:78px 116px;
  filter:url(#ww-golf);
  animation:ww-pan 34s linear infinite;
  will-change:transform;
}
@keyframes ww-pan{
  from{transform:skewY(-7deg) translate3d(0,0,0)}
  to{transform:skewY(-7deg) translate3d(78px,116px,0)}
}
.ww-filters{position:absolute;width:0;height:0;overflow:hidden}
.hero::after{content:"";position:absolute;right:-18%;top:-36%;width:66%;height:126%;background:radial-gradient(closest-side,rgba(127,184,154,.4),transparent 72%);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:17ch}
.hero h1 b{font-weight:500;color:var(--zand)}
.hero .lood{color:rgba(255,255,255,.78);max-width:54ch;margin-top:24px}
.merkje{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);padding:8px 17px 8px 12px;border-radius:100px;font-size:.86rem;color:rgba(255,255,255,.88);margin-bottom:26px;font-weight:300}
.stip{width:7px;height:7px;border-radius:50%;background:var(--zand);flex:none}
.bewijs{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.15)}
.bewijs div{font-size:.92rem;color:rgba(255,255,255,.62);font-weight:300}
.bewijs b{display:block;font-size:1.6rem;font-weight:400;color:#fff;letter-spacing:-.035em;line-height:1.2;margin-bottom:2px}

/* ---------- beweging in de hero ---------- */
@keyframes ww-op{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero .kruimels,.hero .merkje,.hero h1,.hero .lood,.hero .knoppen,.hero .bewijs{
  animation:ww-op .85s cubic-bezier(.22,.68,.3,1) both;
}
.hero .kruimels{animation-delay:.02s}
.hero .merkje{animation-delay:.08s}
.hero h1{animation-delay:.18s}
.hero .lood{animation-delay:.3s}
.hero .knoppen{animation-delay:.42s}
.hero .bewijs{animation-delay:.54s}

@keyframes ww-drift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  50%{transform:translate3d(-7%,5%,0) scale(1.15);opacity:1}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.85}
}
.hero::after{animation:ww-drift 22s ease-in-out infinite;will-change:transform}

@keyframes ww-puls{0%,100%{box-shadow:0 0 0 0 rgba(216,177,115,.55)}50%{box-shadow:0 0 0 6px rgba(216,177,115,0)}}
.stip{animation:ww-puls 2.6s ease-out infinite}

@media(prefers-reduced-motion:reduce){
  .hero .kruimels,.hero .merkje,.hero h1,.hero .lood,.hero .knoppen,.hero .bewijs,
  .kas-raster,.hero::after,.stip{animation:none !important}
}

/* ---------- secties ---------- */
section{padding:clamp(62px,8vw,96px) 0}
.kopblok{max-width:58ch;margin-bottom:clamp(34px,4.5vw,52px)}
.kopblok p{margin-top:18px;color:var(--grijs);font-size:1.08rem;font-weight:300}

/* ---------- lopende tekst ---------- */
.verhaal{max-width:68ch}
.verhaal p{font-weight:300;margin-bottom:17px}
.verhaal p:last-child{margin-bottom:0}
.verhaal h2{margin:38px 0 16px}
.verhaal h2:first-child{margin-top:0}
.verhaal h3{margin:28px 0 10px}
.verhaal ul{list-style:none;display:grid;gap:11px;margin:18px 0 22px}
.verhaal li{padding-left:28px;position:relative;font-weight:300;line-height:1.55}
.verhaal li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:9px;border-left:2px solid var(--zand-diep);border-bottom:2px solid var(--zand-diep);transform:rotate(-45deg)}
.verhaal a{color:var(--mos);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.verhaal a:hover{color:var(--kas)}

.tweeluik{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,66px);align-items:start}
@media(max-width:900px){.tweeluik{grid-template-columns:1fr}}

/* ---------- kader ---------- */
.kader{background:var(--glas);border:1px solid var(--lijn);border-radius:16px;padding:28px 30px}
.kader h3{margin-bottom:12px}
.kader p{font-size:.97rem;font-weight:300;color:var(--grijs)}
.kader ul{list-style:none;display:grid;gap:10px;margin-top:14px;font-size:.96rem;font-weight:300}
.kader li{padding-left:26px;position:relative}
.kader li::before{content:"";position:absolute;left:0;top:.4em;width:14px;height:8px;border-left:2px solid var(--zand-diep);border-bottom:2px solid var(--zand-diep);transform:rotate(-45deg)}

/* ---------- caseraster, gebruikt op het overzicht ---------- */
.cases{background:var(--kas-diep);color:#fff}
.cases .kopblok p{color:rgba(255,255,255,.68)}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:760px){.case-grid{grid-template-columns:1fr}}
.case{
  background:var(--kas);border-radius:16px;overflow:hidden;text-decoration:none;display:block;
  border:1px solid rgba(255,255,255,.09);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);
  transition:transform .22s ease,border-color .22s ease;
}
.case:hover{transform:translateY(-4px);border-color:rgba(216,177,115,.55)}
.case-beeld{aspect-ratio:5/4;overflow:hidden;background:var(--mos)}
.case-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.case:hover .case-beeld img{transform:scale(1.04)}
.case-tekst{padding:26px 28px 30px}
.case-tekst .tag{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--zand);font-weight:500}
.case-tekst h3{margin:12px 0 9px;color:#fff;font-size:1.42rem;font-weight:400;letter-spacing:-.028em}
.case-tekst p{color:rgba(255,255,255,.66);font-size:.97rem;font-weight:300;line-height:1.55}
.case-tekst .meer{display:inline-block;margin-top:18px;color:var(--zand);font-size:.94rem;font-weight:500}
.cases .naregel{margin-top:34px;color:rgba(255,255,255,.6);font-size:.98rem;font-weight:300}
.cases .naregel a{color:var(--zand)}

/* ---------- specificaties in de zijkolom ---------- */
.specs{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:.95rem;margin-top:4px}
.specs dt{color:var(--grijs);font-weight:300}
.specs dd{font-weight:500;color:var(--kas)}
.pillen{display:flex;flex-wrap:wrap;gap:6px}
.pil{display:inline-block;background:#fff;border:1px solid var(--lijn);border-radius:100px;padding:3px 11px;font-size:.83rem;font-weight:500;color:var(--kas)}
.kader a{color:var(--mos);text-decoration:underline;text-underline-offset:3px}

/* ---------- galerij ---------- */
.galerij{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:700px){.galerij{grid-template-columns:1fr}}
.galerij figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--lijn);background:var(--glas)}
.galerij img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;transition:transform .5s ease}
.galerij figure:hover img{transform:scale(1.03)}

/* ---------- tabel ---------- */
.tabel{border:1px solid var(--lijn);border-radius:16px;overflow:hidden;background:#fff}
.tabel-kop{background:var(--kas);color:#fff;padding:18px 24px;font-weight:500;font-size:.98rem}
.rij{display:flex;justify-content:space-between;gap:18px;padding:15px 24px;border-bottom:1px solid var(--lijn);font-size:.96rem}
.rij:last-child{border-bottom:0}
.rij span:first-child{color:var(--grijs);font-weight:300}
.rij span:last-child{font-weight:600;white-space:nowrap;color:var(--kas)}

/* ---------- prijzen ---------- */
.prijzen{background:var(--glas);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media(max-width:920px){.kaarten{grid-template-columns:1fr;max-width:520px}}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:34px 30px 30px;position:relative}
.kaart.top{border-color:var(--kas);box-shadow:0 26px 54px -32px rgba(18,59,46,.55)}
.vlag{position:absolute;top:-12px;left:30px;background:var(--zand);color:var(--kas-diep);font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.kaart h3{margin-bottom:7px;font-size:1.3rem;font-weight:500}
.kaart .waarvoor{color:var(--grijs);font-size:.95rem;min-height:3em;font-weight:300}
.bedrag{font-size:2.7rem;font-weight:400;letter-spacing:-.045em;margin:20px 0 3px;line-height:1;color:var(--kas)}
.bedrag.klein{font-size:2rem}
.bedrag span{font-size:.92rem;font-weight:300;color:var(--grijs);letter-spacing:0}
.excl{font-size:.85rem;color:var(--grijs);margin-bottom:24px;font-weight:300}
.kaart ul{list-style:none;display:grid;gap:12px;margin-bottom:28px;font-size:.96rem;font-weight:300}
.kaart li{padding-left:28px;position:relative;line-height:1.5}
.kaart li::before{content:"";position:absolute;left:0;top:.4em;width:15px;height:9px;border-left:2px solid var(--zand-diep);border-bottom:2px solid var(--zand-diep);transform:rotate(-45deg)}
.kaart .knop{width:100%}
.naregel{margin-top:32px;font-size:.98rem;color:var(--grijs);max-width:72ch;font-weight:300}

/* ---------- case ---------- */
.case-blok{background:var(--kas-diep);color:#fff}
.case-strook{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,52px);align-items:center}
@media(max-width:800px){.case-strook{grid-template-columns:1fr}}
.case-strook img{border-radius:16px;width:100%}
.case-strook .tag{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--zand);font-weight:500}
.case-strook h2{margin:14px 0 14px;font-weight:300}
.case-strook p{color:rgba(255,255,255,.72);font-weight:300}
.case-strook .meer{display:inline-block;margin-top:20px;color:var(--zand);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(216,177,115,.45);padding-bottom:2px}

/* ---------- dorpen ---------- */
.dorpen{background:var(--glas);border-top:1px solid var(--lijn)}
.tegels{display:flex;flex-wrap:wrap;gap:10px}
.tegel{background:#fff;border:1px solid var(--lijn);border-radius:100px;padding:11px 22px;font-size:.97rem;font-weight:400;text-decoration:none;transition:border-color .16s ease,color .16s ease,background .16s ease}
.tegel:hover{border-color:var(--kas);background:var(--kas);color:#fff}
.tegel.hier{border-color:var(--zand-diep);background:var(--zand);color:var(--kas-diep);font-weight:600}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--lijn)}
details:first-of-type{border-top:1px solid var(--lijn)}
summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;position:relative;font-weight:500;font-size:1.08rem;letter-spacing:-.018em;line-height:1.4}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:calc(50% - 5px);width:10px;height:10px;border-right:2px solid var(--zand-diep);border-bottom:2px solid var(--zand-diep);transform:rotate(45deg);transition:transform .22s ease}
details[open] summary::after{transform:rotate(-135deg);top:calc(50% - 2px)}
details .antwoord{padding:0 48px 26px 0;color:var(--grijs);font-weight:300}
details .antwoord p+p{margin-top:13px}

/* ---------- slot ---------- */
.slot{background:var(--kas);color:#fff;text-align:center;position:relative;overflow:hidden}
.slot::after{content:"";position:absolute;left:50%;top:-40%;width:80%;height:150%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(127,184,154,.3),transparent 70%);pointer-events:none}
.slot .wrap{position:relative;z-index:2}
.slot h2{max-width:22ch;margin:0 auto;font-weight:300}
.slot h2 b{font-weight:500;color:var(--zand)}
.slot .lood{color:rgba(255,255,255,.76);margin:20px auto 0;max-width:56ch}
.slot .knoppen{justify-content:center}

/* ---------- voet ---------- */
footer{background:var(--kas-diep);color:rgba(255,255,255,.6);font-size:.93rem;padding:58px 0 42px;font-weight:300}
.voet-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:900px){.voet-grid{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;margin-bottom:17px;font-weight:500}
footer a{text-decoration:none}
footer a:hover{color:var(--zand)}
footer ul{list-style:none;display:grid;gap:10px}
footer .woord b{color:#fff}

.voet-contact{font-style:normal;display:grid;gap:7px;margin-top:20px;line-height:1.5}
.voet-contact a{color:rgba(255,255,255,.82)}
.voet-contact a:hover{color:var(--zand)}

.voet-onder{
  margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.86rem;color:rgba(255,255,255,.48);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 28px;
}

/* ---------- tikdoelen op een telefoon ----------
   Links van 19 pixels hoog zijn met een duim niet te raken. Op klein scherm
   krijgen ze verticale ruimte, op desktop verandert er niets. */
@media(max-width:880px){
  footer ul{gap:2px}
  footer ul a{display:inline-block;padding:10px 0;line-height:1.3}
  .voet-contact a{display:inline-block;padding:8px 0}
  .balk .tel{display:inline-flex;align-items:center;min-height:44px}
  .mobmenu-paneel a{padding:14px 15px}
  .tegel{padding:13px 22px}
  .kruimels a{display:inline-block;padding:4px 0}
}

/* ---------- contactformulier ----------
   Drie velden, links uitgelijnd, grote raakvlakken. De 17 pixels op de invoer
   zijn geen smaak maar noodzaak: onder de 16 zoomt iOS bij het tikken in en
   dan springt je hele pagina. */
.slot-twee{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:start;text-align:left;margin-top:38px}
@media(max-width:820px){.slot-twee{grid-template-columns:1fr;gap:34px}}

.ww-form{display:grid;gap:16px}
.ww-form-rij{display:grid;gap:7px}
.ww-form label{font-size:.95rem;font-weight:500;color:#fff}
.ww-form input[type=text],
.ww-form textarea{
  width:100%;font-family:inherit;font-size:17px;line-height:1.5;
  padding:15px 17px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:#fff;
  transition:border-color .16s ease,background .16s ease;
  -webkit-appearance:none;appearance:none;
}
.ww-form textarea{resize:vertical;min-height:112px}
.ww-form input::placeholder,.ww-form textarea::placeholder{color:rgba(255,255,255,.42)}
.ww-form input:focus,.ww-form textarea:focus{
  outline:none;border-color:var(--zand);background:rgba(255,255,255,.12);
}
.ww-form-rij.fout input,.ww-form-rij.fout textarea{border-color:#E8917A;background:rgba(232,145,122,.1)}
.ww-form-hulp{font-size:.83rem;color:rgba(255,255,255,.55);font-weight:300}

.ww-form-knop{width:100%;margin-top:4px;min-height:56px;font-size:1.05rem}
.ww-form-knop:disabled{opacity:.6;cursor:wait;transform:none}
.ww-form-klein{font-size:.83rem;color:rgba(255,255,255,.5);font-weight:300;max-width:46ch;margin:0}

/* Het lokvakje voor robots. Niet display:none, want sommige bots slaan dat over. */
.ww-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ww-form-melding:empty{display:none}
.ww-form-goed,.ww-form-slecht{margin:6px 0 0;padding:14px 17px;border-radius:12px;font-size:.96rem;line-height:1.5}
.ww-form-goed{background:rgba(127,184,154,.18);border:1px solid rgba(127,184,154,.45);color:#DFF1E7}
.ww-form-slecht{background:rgba(232,145,122,.14);border:1px solid rgba(232,145,122,.4);color:#F6D9D1}

.slot-of{padding-top:6px}
.ww-of{font-size:1rem;color:rgba(255,255,255,.8);margin-bottom:14px;font-weight:300}
.slot-of .knop{width:100%;justify-content:center}
.ww-of-klein{font-size:.9rem;color:rgba(255,255,255,.55);font-weight:300;line-height:1.7;margin-top:20px}
.ww-of-klein a{color:rgba(255,255,255,.75)}
.ww-of-klein a:hover{color:var(--zand)}

/* Het slotblok is gecentreerd, maar een formulier lees je links uitgelijnd. */
.slot .slot-twee h2,.slot .slot-twee p{text-align:left}

/* ---------- grid-items mogen krimpen ----------
   Een grid-item heeft standaard min-width:auto en weigert dan smaller te worden
   dan zijn langste woord. Op een telefoon van 375 pixels rekt een woord als
   "onderhoudsabonnement" de kolom op tot buiten het scherm en krijg je
   horizontale scroll. min-width:0 laat de tekst gewoon afbreken. */
.tweeluik > *,
.kaarten > *,
.zes > *,
.pad > *,
.voet-grid > *,
.case-grid > *,
.slot-twee > *,
.galerij > *{min-width:0}

.verhaal,.kader,.lood,.kopblok p{overflow-wrap:break-word}