/*
 * Ruijs Reset, basis.
 *
 * Tokens en gedeelde componenten uit ontwerp B (bronnen/variant-b/index.html), met
 * prefix rr-. Mobiel eerst; breekpunten 640, 760, 900 en 1200 (hoofdmenu).
 * Dit bestand is van de basis-agent. Een pagina schrijft hier niet in: eigen stijl
 * hoort in assets/css/page-{slug}.css.
 *
 * Inhoud
 *   1. Lettertypen
 *   2. Tokens
 *   3. Basis en typografie
 *   4. Knop, tekstlink, onthullen
 *   5. Kop (header), uitklapmenu, mobiel menu, belbalk
 *   6. Secties: hero, sectiekop, tekst met beeld, tegels, lijst, citaat,
 *      afsluiter, lege staat, inhoud
 *   7. Formulier
 *   8. Voet (footer)
 *   9. Ontbrekende tekst (markering)
 *  10. Minder beweging
 */

/* ---------- 1. Lettertypen, lokaal uit het thema (Google Fonts, OFL) ---------- */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/newsreader-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format("woff2")}

/* ---------- 2. Tokens ---------- */
:root{
  /* kleur, variant B */
  --rr-pagina:#F4F5EC;
  --rr-grond:#DDE5CC;
  --rr-muur:#C6D3AE;
  --rr-salie:#D7E0C3;
  --rr-mint:#D2E3C2;
  --rr-boter:#F6E7B5;
  --rr-inkt:#0E2A1B;
  --rr-groen:#0D5A2D;
  --rr-petrol:#0C3A21;
  --rr-geel:#F2B200;
  --rr-lijn:rgba(14,42,27,.16);
  --rr-lijn-licht:rgba(243,243,231,.4);
  --rr-kop-glas:rgba(244,245,236,.78);

  /* type */
  --rr-serif:"Newsreader",Georgia,serif;
  --rr-sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rr-tekst:17px;
  --rr-kop2:clamp(40px,4.4vw,72px);

  /* ruimte en vorm */
  --rr-wrap:1240px;
  --rr-goot:20px;
  --rr-inzet:clamp(8px,1.6vw,24px);
  /* sectieruimte schaalt ook met de hoogte: op een laag venster minder lucht, zodat een
     sectie in beeld past (desktop 1280x800 en 1440x900) */
  --rr-sectie:clamp(72px,min(9vw,11vh),128px);
  --rr-kop-h:64px;
  --rr-r-s:12px;
  --rr-r-m:24px;
  --rr-r-l:28px;
  --rr-zweef:0 25px 50px -12px rgba(14,42,27,.28);

  /* beweging */
  --rr-ease-koers:cubic-bezier(.14,.43,.32,1);
  --rr-ease-uit:cubic-bezier(.215,.61,.355,1);
  --rr-ease-waas:cubic-bezier(.4,0,.2,1);
}
@media (min-width:760px){
  :root{--rr-tekst:19px;--rr-goot:32px;--rr-kop-h:76px;--rr-r-l:40px}
}

/* ---------- 3. Basis en typografie ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--rr-kop-h) + 20px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--rr-pagina);color:var(--rr-inkt);font:400 var(--rr-tekst)/1.55 var(--rr-sans)}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--rr-serif);font-weight:300;font-optical-sizing:auto;letter-spacing:-.03em;text-wrap:balance}
em{font-style:italic}
:focus-visible{outline:2px solid var(--rr-groen);outline-offset:3px}
.rr-donker :focus-visible{outline-color:var(--rr-geel)}
.rr-wrap{max-width:var(--rr-wrap);margin:0 auto;padding:0 var(--rr-goot)}
.rr-sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rr-heel{white-space:nowrap}
.rr-skiplink{position:absolute;left:16px;top:-80px;z-index:100;background:var(--rr-inkt);color:var(--rr-pagina);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600}
.rr-skiplink:focus{top:12px}
.rr-main{padding-top:var(--rr-kop-h)}
.rr-kop2{font-size:var(--rr-kop2);line-height:.98;letter-spacing:-.035em}
.rr-sectie{padding-block:var(--rr-sectie)}
.rr-sectie + .rr-sectie{padding-top:0}
/* hero en tekst met beeld zijn geen .rr-sectie maar hebben al --rr-sectie onder zich:
   een sectie erna telt die ruimte niet nog eens bovenop */
.rr-hero + .rr-sectie,.rr-tekst-beeld + .rr-sectie{padding-top:0}

/* ---------- 4. Knop, tekstlink, onthullen ---------- */
/* de vullaag schuift omhoog, de tekst wisselt als hij het midden passeert */
.rr-knop{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:999px;background:var(--rr-geel);color:var(--rr-inkt);font:600 16px/1.2 var(--rr-sans);text-decoration:none;border:0;cursor:pointer;transition:color 0s linear 65ms,transform .2s var(--rr-ease-uit)}
.rr-knop::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:var(--rr-inkt);transform:translateY(102%);transition:transform .35s var(--rr-ease-uit)}
.rr-knop__pijl{width:16px;height:16px;flex:none;margin-right:-4px;transition:transform .35s var(--rr-ease-uit)}
.rr-knop--rand{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.rr-knop--rand::before{border-radius:0}
.rr-knop:active{transform:scale(.97)}
.rr-donker .rr-knop::before{background:var(--rr-pagina)}
.rr-donker .rr-knop--rand{color:var(--rr-pagina)}
@media (hover:hover) and (pointer:fine){
  .rr-knop:hover{color:var(--rr-pagina);transition:color 0s linear 90ms,transform .2s var(--rr-ease-uit)}
  .rr-knop:hover::before{transform:none}
  .rr-knop:hover .rr-knop__pijl{transform:translateX(3px)}
  .rr-donker .rr-knop:hover{color:var(--rr-inkt)}
}
.rr-knoppen{display:flex;flex-wrap:wrap;gap:12px}

.rr-tekstlink{display:inline-flex;align-items:center;gap:8px;padding-block:10px;font-weight:600;text-decoration:none}
.rr-tekstlink__label{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--rr-lijn);transition:text-decoration-color .15s linear}
.rr-tekstlink__pijl{display:inline-block;transition:transform .3s var(--rr-ease-koers)}
.rr-donker .rr-tekstlink__label{text-decoration-color:var(--rr-lijn-licht)}
/* uit rr_tekstlink_html(): loopt als tekst, laatste woord en pijl breken niet af */
.rr-tekstlink--loopt{display:inline-block}
.rr-tekstlink__eind{white-space:nowrap}
.rr-tekstlink--loopt .rr-tekstlink__pijl{margin-left:4px}
@media (min-width:760px){.rr-tekstlink{padding-block:0}}
@media (hover:hover) and (pointer:fine){
  .rr-tekstlink:hover .rr-tekstlink__label{text-decoration-color:var(--rr-groen)}
  .rr-donker .rr-tekstlink:hover .rr-tekstlink__label{text-decoration-color:var(--rr-geel)}
  .rr-tekstlink:hover .rr-tekstlink__pijl{transform:translateX(4px)}
}

/* alleen verbergen als JavaScript draait; basis.js toont alles na drie seconden als vangnet */
html.js .rr-onthul{opacity:0;transform:translateY(24px);transition:opacity .7s var(--rr-ease-koers),transform .7s var(--rr-ease-koers)}
html.js .rr-onthul.is-zichtbaar{opacity:1;transform:none}

/* ---------- 5. Kop ---------- */
.rr-kop{position:fixed;inset:0 0 auto;z-index:50;background:var(--rr-kop-glas);-webkit-backdrop-filter:saturate(1.4) blur(20px);backdrop-filter:saturate(1.4) blur(20px);border-bottom:1px solid transparent;transition:transform .3s ease,border-color .3s,background-color .15s var(--rr-ease-waas)}
.admin-bar .rr-kop{top:46px}
@media (min-width:783px){.admin-bar .rr-kop{top:32px}}
@media (max-width:600px){.admin-bar .rr-kop{top:0}.admin-bar .rr-main{padding-top:calc(var(--rr-kop-h) + 46px)}}
.rr-kop.is-gescrold{border-bottom-color:var(--rr-lijn)}
.rr-kop.is-weg{transform:translateY(-100%)}
.admin-bar .rr-kop.is-weg{transform:translateY(calc(-100% - 46px))}
/* Met de werkbalk van de bewerklaag (vast bovenin, de body krijgt zijn hoogte als padding) staat de kop gewoon in de stroom, anders valt hij onder die balk. */
.nx-ed-has-bar .rr-kop{position:relative;top:auto;transform:none}
.nx-ed-has-bar .rr-main{padding-top:0}
html.uitklap-open .rr-kop{background:var(--rr-pagina);border-bottom-color:transparent}
.rr-kop__binnen{display:flex;align-items:center;gap:24px;height:var(--rr-kop-h)}
.rr-merk{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;flex:none}
.rr-merk__beeld{width:40px;height:40px}
.rr-merk__woord{width:110px}
@media (min-width:760px){.rr-merk__beeld{width:44px;height:44px}.rr-merk__woord{width:132px}}

.rr-hoofdmenu{display:none;margin-left:auto}
.rr-hoofdmenu>ul{display:flex;align-items:center;gap:24px;padding:0;list-style:none}
.rr-hoofdmenu>ul>li>a,.rr-uitklap__knop{font:500 16px/1.2 var(--rr-sans);color:var(--rr-inkt);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:text-decoration-color .15s linear}
.rr-hoofdmenu>ul>li>a[aria-current]{text-decoration-color:var(--rr-groen)}
/* op een pagina uit het coachingmodel staat de knop van het uitklapmenu actief */
.rr-uitklap.is-actief>.rr-uitklap__knop{text-decoration-color:var(--rr-groen)}
.rr-uitklap__meer .rr-tekstlink[aria-current] .rr-tekstlink__label{text-decoration-color:var(--rr-groen)}
@media (hover:hover) and (pointer:fine){.rr-hoofdmenu>ul>li>a:hover,.rr-uitklap__knop:hover{text-decoration-color:var(--rr-groen)}}
.rr-uitklap__knop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:12px 0;cursor:pointer}
.rr-uitklap__knop svg{width:12px;height:12px;transition:transform .3s var(--rr-ease-uit)}
.rr-uitklap__knop[aria-expanded="true"]{text-decoration-color:var(--rr-groen)}
.rr-uitklap__knop[aria-expanded="true"] svg{transform:rotate(180deg)}
.rr-uitklap__paneel{position:absolute;left:0;right:0;top:100%;background:var(--rr-pagina);border-radius:0 0 var(--rr-r-l) var(--rr-r-l);box-shadow:var(--rr-zweef);padding:8px 0 28px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .15s var(--rr-ease-waas),transform .15s var(--rr-ease-waas),visibility 0s linear .15s}
.rr-uitklap.is-open .rr-uitklap__paneel{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--rr-ease-uit),transform .3s var(--rr-ease-uit),visibility 0s}
.rr-uitklap__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:16px}
.rr-uitklap__meer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:20px;font-size:16px}
.rr-uitklap__meer>span{opacity:.75}
.rr-menukaart{position:relative;display:flex;flex-direction:column;border-radius:var(--rr-r-m);background:var(--rr-vlak,var(--rr-grond));padding:16px 20px 22px;text-decoration:none;opacity:0;transform:translateY(10px);transition:opacity .35s var(--rr-ease-uit),transform .35s var(--rr-ease-uit)}
.rr-uitklap.is-open .rr-menukaart{opacity:1;transform:none;transition-delay:calc(var(--i) * 40ms + 60ms)}
.rr-menukaart__beeld{width:132px;height:132px;margin:0 auto 8px;filter:drop-shadow(0 10px 12px rgba(14,42,27,.14));transition:transform .4s var(--rr-ease-uit)}
.rr-menukaart b{display:flex;align-items:center;gap:8px;font:600 17px/1.3 var(--rr-sans);margin-bottom:4px}
.rr-menukaart b svg{width:16px;height:16px;flex:none;transition:transform .35s var(--rr-ease-uit)}
.rr-menukaart span{display:block;font-size:15px;line-height:1.45;opacity:.8}
@media (hover:hover) and (pointer:fine){
  .rr-menukaart:hover .rr-menukaart__beeld{transform:translateY(-4px) scale(1.04)}
  .rr-menukaart:hover b svg{transform:translateX(3px)}
}
.rr-menukaart--koers{--rr-vlak:var(--rr-groen);color:var(--rr-pagina);display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:1fr auto;align-items:center;column-gap:12px;padding:24px}
.rr-menukaart--koers .rr-menukaart__beeld{width:112px;height:112px;margin:0;grid-column:2;grid-row:1}
.rr-menukaart--koers p{font:300 26px/1.08 var(--rr-serif);letter-spacing:-.03em;grid-column:1;grid-row:1}
.rr-menukaart--koers .rr-knop{grid-column:1/-1;grid-row:2;justify-self:start;margin-top:20px;white-space:nowrap}
.rr-waas{position:fixed;inset:0;z-index:45;background:rgba(14,42,27,.1);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .15s var(--rr-ease-waas),visibility 0s linear .15s}
html.uitklap-open .rr-waas{opacity:1;visibility:visible;transition:opacity .15s var(--rr-ease-waas),visibility 0s}

.rr-kop__cta{display:none;flex:none;min-height:46px;padding:11px 20px}
/* knop Webwinkel (inc/webwinkel.php): op de telefoon alleen het tasje, vanaf 760 met tekst */
.rr-kop__winkel{flex:none;width:48px;min-height:48px;margin-left:auto;padding:0}
.rr-kop__winkel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.rr-kop__winkel[aria-current]{background:var(--rr-mint)}
.rr-kop__winkel ~ .rr-menuknop{margin-left:0}
.rr-kop__tas{width:20px;height:20px;flex:none}
.rr-mobielmenu__winkel .rr-kop__tas{margin-left:-4px}
.rr-menuknop{display:inline-block;margin-left:auto;min-width:48px;min-height:48px;padding:0 18px;border-radius:999px;border:0;background:none;box-shadow:inset 0 0 0 1.5px var(--rr-inkt);font-weight:600;font-size:16px;cursor:pointer}
@media (min-width:760px){
  .rr-kop__cta{display:inline-flex;margin-left:auto}
  .rr-kop__binnen>.rr-menuknop{margin-left:0}
  .rr-kop__winkel{width:auto;min-height:46px;padding:11px 20px}
  .rr-kop__winkel span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .rr-kop__winkel ~ .rr-kop__cta{margin-left:0}
}
@media (min-width:1200px){
  .rr-kop__binnen{gap:32px}
  .rr-hoofdmenu{display:block}
  .rr-kop__cta{margin-left:0}
  .rr-kop__winkel{margin-left:0}
  .rr-kop__binnen>.rr-menuknop{display:none}
}
/* met het hele hoofdmenu erbij past de tekst Webwinkel pas vanaf 1280: daaronder het tasje */
@media (min-width:1200px) and (max-width:1279px){
  .rr-kop__winkel{width:46px;padding:0}
  .rr-kop__winkel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}

.rr-mobielmenu{position:fixed;inset:0;z-index:60;background:var(--rr-pagina);padding:12px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;opacity:0;transition:opacity .25s ease-out}
.rr-mobielmenu.is-open{opacity:1}
.rr-mobielmenu[hidden]{display:none}
.rr-mobielmenu__top{display:flex;align-items:center;justify-content:space-between;height:56px;margin-bottom:20px}
.rr-mobielmenu__top .rr-menuknop{margin:0}
.rr-mobielmenu__groep{font:600 15px/1.2 var(--rr-sans);opacity:.7;margin-bottom:10px}
.rr-mobielmenu__pijlers{display:grid;gap:8px;padding:0;list-style:none}
.rr-mobielmenu__pijlers a{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:var(--rr-r-m);background:var(--rr-vlak,var(--rr-grond));text-decoration:none;font-size:14px;line-height:1.4;color:rgba(14,42,27,.78)}
.rr-mobielmenu__pijlers img{width:72px;height:72px}
.rr-mobielmenu__pijlers b{display:block;font-size:17px;font-weight:600;color:var(--rr-inkt);margin-bottom:2px}
.rr-mobielmenu__links{margin-top:20px;padding:0;list-style:none}
.rr-mobielmenu__links a{display:block;padding:14px 0;text-decoration:none;font:500 22px/1.2 var(--rr-sans);border-bottom:1px solid var(--rr-lijn)}
.rr-mobielmenu__links a[aria-current]{color:var(--rr-groen)}
.rr-mobielmenu__onder{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.rr-mobielmenu__onder .rr-knop{width:100%}

[data-kleur="mint"]{--rr-vlak:var(--rr-mint)}
[data-kleur="boter"]{--rr-vlak:var(--rr-boter)}
[data-kleur="salie"]{--rr-vlak:var(--rr-salie)}
[data-kleur="muur"]{--rr-vlak:var(--rr-muur)}
[data-kleur="grond"]{--rr-vlak:var(--rr-grond)}

/* belbalk: alleen op de telefoon, verstopt zodra een andere contactweg in beeld is */
.rr-belbalk{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(244,245,236,.86);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--rr-lijn);transition:transform .3s ease}
.rr-belbalk a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--rr-inkt)}
.rr-belbalk a:first-child{background:var(--rr-geel);box-shadow:none}
.rr-belbalk a:active{transform:scale(.97)}
html.menu-open .rr-belbalk{display:none}
html.js .rr-belbalk.is-verstopt{transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
@media (min-width:760px){.rr-belbalk{display:none}}

/* ---------- 6. Secties ---------- */

/* hero: lichte schreef, heel groot, foto als boog; in een vlak met inzet */
.rr-hero{padding:8px var(--rr-inzet) var(--rr-sectie)}
.rr-hero__vlak{background:var(--rr-grond);border-radius:var(--rr-r-l);padding:clamp(32px,min(4vw,6vh),64px) 0}
.rr-hero__raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px;align-items:start}
.rr-hero__titel{grid-column:1/-1;font-size:clamp(48px,14vw,72px);line-height:.92;letter-spacing:-.045em;padding-top:4px}
.rr-hero__tekst{grid-column:1/-1;margin-top:20px;max-width:33em;position:relative;z-index:3}
.rr-hero__tekst p{font-size:18px;line-height:1.5;margin-bottom:24px}
.rr-hero__tekst p:last-child{margin-bottom:0}
.rr-hero__tekst .rr-knoppen{margin-top:24px}
.rr-hero__foto{grid-column:2/7;margin-top:36px;position:relative;z-index:1}
.rr-hero__foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px var(--rr-r-m) var(--rr-r-m)}
.rr-hero--pagina .rr-hero__titel{font-size:clamp(40px,11vw,60px);line-height:.98}
/* met label staan label en h1 samen in .rr-hero__kop, die de plek van de h1 in het raster inneemt */
.rr-hero__kop{grid-column:1/-1}
.rr-hero__kop .rr-hero__titel{padding-top:0}
.rr-hero__label{width:fit-content;margin:4px 0 14px;padding:6px 14px;border-radius:999px;background:var(--rr-pagina);box-shadow:inset 0 0 0 1px var(--rr-lijn);font-size:15px;font-weight:600;line-height:1.3}
@media (min-width:760px){
  .rr-hero__raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .rr-hero__titel{grid-column:1/8;grid-row:1;align-self:end;font-size:clamp(60px,min(7.6vw,13.5vh),128px);line-height:.9;padding-top:clamp(16px,min(5vw,6vh),80px)}
  .rr-hero__tekst{grid-column:1/8;grid-row:2;margin-top:36px}
  .rr-hero__tekst p{font-size:21px;margin-bottom:32px}
  .rr-hero__foto{grid-column:8/13;grid-row:1/3;margin-top:0}
  /* het vlak past onder de vaste kop: foto plus vlakpadding plus kop plus marge */
  .rr-hero__foto img{max-height:calc(100vh - 200px);max-height:calc(100svh - 200px)}
  .rr-hero--pagina .rr-hero__titel{font-size:clamp(48px,min(5.4vw,11vh),88px);line-height:.96}
  .rr-hero--zonder-beeld .rr-hero__titel,.rr-hero--zonder-beeld .rr-hero__tekst{grid-column:1/11}
  .rr-hero__kop{grid-column:1/8;grid-row:1;align-self:end;padding-top:clamp(16px,min(5vw,6vh),80px)}
  .rr-hero--zonder-beeld .rr-hero__kop{grid-column:1/11}
  .rr-hero__label{margin-bottom:20px}
}

/* sectiekop: kop, inleiding en een knop of link */
.rr-sectiekop{max-width:46em;margin-bottom:clamp(28px,min(4vw,5vh),56px)}
.rr-sectiekop__titel{margin-bottom:20px}
.rr-sectiekop__tekst p{max-width:30em;margin-bottom:16px}
.rr-sectiekop__tekst p:last-child{margin-bottom:0}
.rr-sectiekop .rr-knop,.rr-sectiekop .rr-tekstlink{margin-top:24px}
.rr-sectiekop--midden{margin-inline:auto;text-align:center}
.rr-sectiekop--midden .rr-sectiekop__tekst p{margin-inline:auto}

/* tekst met beeld, stijl vlak: foto vult een helft van een groen vlak, uitspraak op de foto */
.rr-tekst-beeld{padding:0 var(--rr-inzet) var(--rr-sectie)}
.rr-tekst-beeld__vlak{display:grid;grid-template-columns:minmax(0,1fr);background:var(--rr-grond);border-radius:var(--rr-r-l);overflow:hidden}
.rr-tekst-beeld__foto{position:relative;color:var(--rr-pagina);isolation:isolate;aspect-ratio:4/5;background:var(--rr-muur)}
.rr-tekst-beeld__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 0}
.rr-tekst-beeld__foto--uitspraak::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,58,33,0) 55%,rgba(12,58,33,.78));pointer-events:none}
.rr-tekst-beeld__uitspraak{position:absolute;left:24px;right:24px;bottom:24px;z-index:1;font:300 italic clamp(32px,3.6vw,60px)/.95 var(--rr-serif);letter-spacing:-.035em}
.rr-tekst-beeld__tekst{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,min(6vw,8vh),96px) clamp(24px,5vw,88px)}
.rr-tekst-beeld__titel{margin-bottom:24px}
.rr-tekst-beeld__tekst p{margin-bottom:20px;max-width:30em}
.rr-tekst-beeld__feiten{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 28px;padding:0;list-style:none}
.rr-tekst-beeld__feiten li{padding:8px 14px;border-radius:var(--rr-r-s);background:var(--rr-pagina);box-shadow:inset 0 0 0 1px var(--rr-lijn);font-size:15px;font-weight:500}
.rr-tekst-beeld__tekst .rr-knop{align-self:flex-start;margin-top:8px}
.rr-tekst-beeld__tekst .rr-tekstlink{align-self:flex-start}
@media (min-width:760px){
  .rr-tekst-beeld__vlak{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(78vh,720px);min-height:min(78svh,720px)}
  .rr-tekst-beeld__foto{aspect-ratio:auto}
  .rr-tekst-beeld__uitspraak{left:clamp(24px,3.5vw,48px);bottom:clamp(24px,3.5vw,44px)}
  .rr-tekst-beeld--rechts .rr-tekst-beeld__foto{order:2}
}
/* stijl open: twee kolommen zonder vlak, de foto met ronde hoeken */
.rr-tekst-beeld--open{padding:0 0 var(--rr-sectie)}
.rr-tekst-beeld--open .rr-tekst-beeld__vlak{background:none;border-radius:0;overflow:visible;gap:32px;max-width:var(--rr-wrap);margin:0 auto;padding:0 var(--rr-goot);min-height:0;align-items:center}
.rr-tekst-beeld--open .rr-tekst-beeld__foto{aspect-ratio:4/3;max-height:calc(100svh - 2 * var(--rr-sectie));border-radius:var(--rr-r-m);overflow:hidden}
.rr-tekst-beeld--open .rr-tekst-beeld__tekst{padding:0}
@media (min-width:760px){
  .rr-tekst-beeld--open .rr-tekst-beeld__vlak{gap:clamp(32px,6vw,96px)}
}

/* tegels: kaarten met een beeld op een eigen kleurvlak */
.rr-tegels__lijst{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:0;list-style:none}
@media (min-width:640px){.rr-tegels__lijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.rr-tegels--3 .rr-tegels__lijst{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rr-tegel{position:relative;display:flex;flex-direction:column;height:100%;padding:12px;border-radius:var(--rr-r-l);background:var(--rr-grond);text-decoration:none}
.rr-tegel__beeld{position:relative;aspect-ratio:4/3;border-radius:var(--rr-r-m);overflow:hidden;background:var(--rr-vlak,var(--rr-muur))}
.rr-tegel__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--rr-ease-koers)}
.rr-tegel__beeld--illustratie img{object-fit:contain;padding:12%;filter:drop-shadow(0 10px 12px rgba(14,42,27,.14))}
.rr-tegel__tekst{display:flex;flex-direction:column;flex:1;gap:8px;padding:18px 12px 8px}
.rr-tegel__titel{font:600 20px/1.25 var(--rr-sans);letter-spacing:0}
.rr-tegel__tekst p{font-size:16px;line-height:1.5;opacity:.85}
.rr-tegel__link{margin-top:auto;padding-top:8px;color:var(--rr-groen);font-size:16px}
.rr-tegel__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
@media (hover:hover) and (pointer:fine){
  .rr-tegel:hover .rr-tegel__beeld img{transform:scale(1.04)}
  .rr-tegel:hover .rr-tekstlink__label{text-decoration-color:var(--rr-groen)}
  .rr-tegel:hover .rr-tekstlink__pijl{transform:translateX(4px)}
}
.rr-tegel:focus-within{outline:2px solid var(--rr-groen);outline-offset:3px}
.rr-tegel:focus-within :focus-visible{outline:none}

/* lijst: kop links, lijst rechts; stijl stappen (de route), links (regels) of punten */
.rr-lijst__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.rr-lijst__links .rr-kop2{margin-bottom:24px}
.rr-lijst__links p{margin-bottom:16px;max-width:26em}
.rr-lijst__links .rr-knop{margin-top:16px}
@media (min-width:900px){
  .rr-lijst__raster{grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px)}
}
@media (min-width:900px) and (min-height:700px){.rr-lijst__links{position:sticky;top:112px}}

.rr-route{position:relative;padding-left:64px}
.rr-route__lijn{position:absolute;left:0;top:0;bottom:0;width:64px}
.rr-route__lus{width:64px;height:68px;overflow:visible}
.rr-route__lus path{fill:none;stroke:var(--rr-groen);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rr-route__baan{position:absolute;left:47.2px;top:67px;bottom:48px;width:3px;background:var(--rr-lijn)}
.rr-route__vul{position:absolute;inset:0;background:var(--rr-groen);transform-origin:50% 0}
.rr-route__loper{position:absolute;inset:0;display:none}
.rr-route__loper::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--rr-geel);border:3px solid var(--rr-pagina)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rr-route__baan{view-timeline-name:--rr-baan;view-timeline-axis:block;view-timeline-inset:50% 50%}
    .rr-route__vul{animation:rr-route-vul linear both;animation-timeline:--rr-baan}
    .rr-route__loper{display:block;animation:rr-route-loop linear both;animation-timeline:--rr-baan}
  }
}
@keyframes rr-route-vul{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rr-route-loop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.rr-route__stappen{padding:56px 0 0;list-style:none}
.rr-route__stappen li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;gap:8px;padding:28px 0;border-top:1px solid var(--rr-lijn)}
.rr-route__stappen li:last-child{border-bottom:1px solid var(--rr-lijn)}
.rr-route__stappen li::before{content:"";position:absolute;left:-23px;top:44px;width:14px;height:14px;border-radius:50%;background:var(--rr-pagina);border:3px solid var(--rr-groen)}
.rr-route__nr{font:300 40px/1 var(--rr-serif);letter-spacing:-.04em;color:var(--rr-groen)}
.rr-route__stap{font:500 clamp(20px,1.8vw,28px)/1.25 var(--rr-sans);letter-spacing:-.01em}
.rr-route__uitleg{grid-column:2;font-size:17px;line-height:1.5;opacity:.85;margin-top:6px}
@media (min-width:760px){
  .rr-route{padding-left:96px}
  .rr-route__lijn{width:96px}
  .rr-route__lus{width:96px;height:102px}
  .rr-route__baan{left:71.5px;top:101px}
  .rr-route__stappen{padding-top:84px}
  .rr-route__stappen li{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:36px 0}
  .rr-route__stappen li::before{left:-31px;top:56px}
  .rr-route__nr{font-size:56px}
}

.rr-regels{padding:0;list-style:none}
.rr-regels a,.rr-regels span.rr-regels__regel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4px;border-top:1px solid var(--rr-lijn);text-decoration:none;font:400 clamp(24px,2.3vw,36px)/1.1 var(--rr-serif);letter-spacing:-.025em;transition:background-color .2s var(--rr-ease-uit)}
.rr-regels li:last-child>*{border-bottom:1px solid var(--rr-lijn)}
.rr-regels__pijl{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--rr-grond);transition:transform .3s var(--rr-ease-koers),background-color .2s}
.rr-regels__pijl svg{width:18px;height:18px}
.rr-regels a:active{background:var(--rr-grond)}
@media (min-width:760px){.rr-regels a,.rr-regels span.rr-regels__regel{padding:26px 12px}}
@media (hover:hover) and (pointer:fine){
  .rr-regels a:hover{background:var(--rr-grond)}
  .rr-regels a:hover .rr-regels__pijl{transform:translateX(4px);background:var(--rr-geel)}
}

/* punten: open regels zonder vlak, een dunne lijn ertussen en een kort groen streepje
   ervoor (de lijn uit het logo, heel klein). Vanaf vijf punten op desktop twee kolommen. */
.rr-punten{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(24px,3vw,40px);padding:0;list-style:none;border-bottom:1px solid var(--rr-lijn)}
.rr-punten li{position:relative;padding:16px 4px 16px 30px;border-top:1px solid var(--rr-lijn)}
.rr-punten li::before{content:"";position:absolute;left:4px;top:calc(16px + .7em);width:14px;height:3px;border-radius:2px;background:var(--rr-groen)}
.rr-punten b{display:block;font-weight:600;font-size:clamp(17px,1.35vw,19px);line-height:1.4}
.rr-punten span{display:block;margin-top:4px;font-size:16px;line-height:1.5;opacity:.85}
@media (min-width:760px){.rr-punten:has(>li:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* citaat: één citaat groot in de display-letter, de namen eronder als keuze */
.rr-citaat__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.rr-citaat__links .rr-kop2{margin-bottom:32px}
.rr-citaat__beeld{display:none;position:relative}
.rr-citaat__beeld img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rr-r-m)}
.rr-citaat__rechts{position:relative;padding-top:8px}
.rr-citaat__teken{display:block;font:300 clamp(96px,10vw,160px)/.6 var(--rr-serif);color:var(--rr-groen);height:.42em;margin-bottom:8px}
.rr-citaat__citaten{display:grid}
.rr-citaat__item{grid-area:1/1}
.rr-citaat__item p{font:300 clamp(22px,2.3vw,36px)/1.28 var(--rr-serif);letter-spacing:-.015em;text-wrap:pretty}
.rr-citaat__item figcaption{margin-top:20px;font:600 16px/1.3 var(--rr-sans)}
html.js .rr-citaat__item:not([hidden]){animation:rr-in .6s var(--rr-ease-koers)}
@keyframes rr-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rr-citaat__namen{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rr-lijn)}
.rr-citaat__naam{appearance:none;border:0;cursor:pointer;min-height:44px;padding:10px 18px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--rr-lijn);font:600 15px/1.2 var(--rr-sans);color:var(--rr-inkt);transition:background-color .2s var(--rr-ease-uit),box-shadow .2s,transform .2s var(--rr-ease-uit)}
.rr-citaat__naam:active{transform:scale(.97)}
.rr-citaat__naam[aria-selected="true"]{background:var(--rr-geel);box-shadow:none}
@media (hover:hover) and (pointer:fine){.rr-citaat__naam[aria-selected="false"]:hover{background:var(--rr-grond)}}
/* zonder JavaScript staan alle citaten onder elkaar, met naam */
html:not(.js) .rr-citaat__citaten{gap:32px}
html:not(.js) .rr-citaat__item{grid-area:auto}
html:not(.js) .rr-citaat__item[hidden]{display:block}
html:not(.js) .rr-citaat__namen{display:none}
/* met tabs blijven de verborgen citaten in het gestapelde grid staan, onzichtbaar: het
   hoogste citaat bepaalt de hoogte, dus niets springt bij het wisselen */
html.js .rr-citaat--tabs .rr-citaat__item[hidden]{display:block;visibility:hidden}
html.js .rr-citaat--tabs .rr-citaat__item figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (min-width:900px){
  .rr-citaat__raster{grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px)}
  .rr-citaat__beeld{display:block}
}

/* afsluiter: bosgroen vlak met de eindboog van de logolijn als bovenrand */
.rr-afsluiter{position:relative;margin-top:clamp(56px,7vw,96px);background:var(--rr-petrol);color:var(--rr-pagina);padding:var(--rr-sectie) 0}
.rr-afsluiter__rand{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(48px,7vw,96px);color:var(--rr-petrol)}
.rr-afsluiter__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.rr-afsluiter .rr-kop2{margin-bottom:24px}
.rr-afsluiter__tekst p{margin-bottom:16px;max-width:28em}
.rr-afsluiter .rr-knoppen{margin-top:24px}
.rr-kanalen{margin-top:32px;padding:0;list-style:none}
/* in de smalle afsluiter niet over de hele breedte: soort en waarde horen bij elkaar */
.rr-afsluiter--smal .rr-kanalen{max-width:34em}
.rr-kanalen a,.rr-kanalen span.rr-kanalen__regel{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--rr-lijn-licht);text-decoration:none}
.rr-kanalen li:last-child>*{border-bottom:1px solid var(--rr-lijn-licht)}
.rr-kanalen__soort{opacity:.75}
/* WhatsApp met het logo ervoor: het logo op volle kleur, het woord gedimd zoals de rest */
.rr-kanalen__met-icoon{display:inline-flex;align-items:center;gap:10px}
.rr-kanalen b{font-weight:600;text-align:right}
@media (hover:hover) and (pointer:fine){.rr-kanalen a:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--rr-geel)}}
@media (min-width:900px){
  .rr-afsluiter__raster{grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px)}
  .rr-afsluiter--smal .rr-afsluiter__raster{grid-template-columns:minmax(0,1fr)}
  .rr-afsluiter--smal .rr-afsluiter__tekst{max-width:46em}
}

/* lege staat: zolang er nog geen recepten of downloads zijn */
.rr-leeg{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;padding:clamp(24px,4vw,56px);border-radius:var(--rr-r-l);background:var(--rr-vlak,var(--rr-salie))}
.rr-leeg__beeld{width:clamp(120px,18vw,200px);height:auto;filter:drop-shadow(0 10px 12px rgba(14,42,27,.14))}
.rr-leeg__titel{font-size:clamp(28px,3vw,44px);line-height:1.05;margin-bottom:12px}
.rr-leeg__tekst p{max-width:32em;margin-bottom:12px}
.rr-leeg .rr-knop,.rr-leeg .rr-tekstlink{margin-top:12px}
@media (min-width:640px){.rr-leeg{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px)}}

/* inhoud uit de editor van WordPress: page.php en berichten */
.rr-inhoud{max-width:44em}
.rr-inhoud>*+*{margin-top:1.1em}
.rr-inhoud h2{font-size:clamp(30px,3vw,44px);line-height:1.08;margin-top:1.6em}
.rr-inhoud h3{font-size:clamp(24px,2.2vw,32px);line-height:1.15;margin-top:1.4em}
.rr-inhoud ul,.rr-inhoud ol{padding-left:1.3em}
.rr-inhoud ul{list-style:disc}
.rr-inhoud ol{list-style:decimal}
.rr-inhoud li+li{margin-top:.4em}
.rr-inhoud a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--rr-groen)}
.rr-inhoud img{border-radius:var(--rr-r-m)}
.rr-inhoud blockquote{padding-left:24px;border-left:3px solid var(--rr-groen);font:300 clamp(22px,2vw,30px)/1.3 var(--rr-serif)}
.rr-inhoud figcaption{margin-top:8px;font-size:15px;opacity:.75}
.rr-inhoud h4{font:600 20px/1.3 var(--rr-sans);margin-top:1.4em}
.rr-inhoud h2+*,.rr-inhoud h3+*,.rr-inhoud h4+*{margin-top:.6em}
.rr-inhoud li::marker{color:var(--rr-groen)}
.rr-inhoud ol li::marker{font-weight:600}
.rr-inhoud strong{font-weight:600}
.rr-inhoud hr{border:0;border-top:1px solid var(--rr-lijn);margin-block:2em}
.rr-inhoud table{width:100%;border-collapse:collapse;font-size:16px}
.rr-inhoud th,.rr-inhoud td{padding:10px 12px;border-bottom:1px solid var(--rr-lijn);text-align:left;vertical-align:top}
.rr-inhoud .wp-block-table{overflow-x:auto}
.rr-inhoud iframe,.rr-inhoud video{max-width:100%}
@media (hover:hover) and (pointer:fine){.rr-inhoud a:hover{text-decoration-thickness:2.5px}}
/* een link naar een pdf, los of in het blok Bestand van de editor */
.rr-inhoud a[href$=".pdf" i]:not(.wp-block-file__button){padding:3px 10px 3px 6px;border-radius:8px;background:var(--rr-grond);text-decoration:none;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rr-inhoud a[href$=".pdf" i]:not(.wp-block-file__button)::before{content:"PDF";display:inline-block;margin-right:8px;padding:1px 6px;vertical-align:.1em;line-height:1.4;border-radius:6px;background:var(--rr-groen);color:var(--rr-pagina);font-size:12px;font-weight:700;letter-spacing:.04em}
.rr-inhoud .wp-block-file{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px;border-radius:var(--rr-r-m);background:var(--rr-grond)}
.rr-inhoud .wp-block-file>a:not(.wp-block-file__button){background:none;padding:0}
.rr-inhoud .wp-block-file object{display:none}
.rr-inhoud .wp-block-file__button{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--rr-geel);color:var(--rr-inkt);font-weight:600;text-decoration:none}
@media (hover:hover) and (pointer:fine){.rr-inhoud .wp-block-file__button:hover{background:var(--rr-inkt);color:var(--rr-pagina)}}

/* los bericht (single.php) */
.rr-bericht{padding-bottom:var(--rr-sectie)}
.rr-bericht__terug{max-width:44em;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--rr-lijn)}

/* vangnetlijst (index.php): categorie, archief, zoeken */
.rr-overzicht{display:grid;gap:12px;max-width:52em;margin:0;padding:0;list-style:none}
.rr-overzicht__link{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border-radius:var(--rr-r-m);background:var(--rr-grond);text-decoration:none;transition:background-color .15s linear}
.rr-overzicht__titel{font:400 clamp(22px,2.2vw,30px)/1.15 var(--rr-serif)}
.rr-overzicht__tekst{font-size:16px;opacity:.8}
@media (hover:hover) and (pointer:fine){.rr-overzicht__link:hover{background:var(--rr-muur)}}
.rr-paginering{margin-top:32px}
/* 404: tekstlinks onder de pijlertegels, dicht bij de tegels en met ruimte naar de voet */
.rr-vangnet__links{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:calc(48px - var(--rr-sectie));padding-bottom:var(--rr-sectie)}
.rr-paginering .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.rr-paginering .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rr-lijn);text-decoration:none;font-weight:600}
.rr-paginering .page-numbers.current{background:var(--rr-inkt);color:var(--rr-pagina);box-shadow:none}

/* ---------- 7. Formulier ----------
   Markup uit rr_contact_form() in inc/forms.php (backend). Na versturen staat alleen de
   melding er. Op het bosgroen (.rr-donker) krijgt alles lichte tekst en randen. */
.rr-form{display:grid;gap:16px;padding:clamp(24px,3vw,40px);border-radius:var(--rr-r-l);background:var(--rr-grond)}
.rr-form__titel{font-size:clamp(28px,2.6vw,40px);line-height:1.05}
.rr-form__intro{max-width:32em}
.rr-form__whatsapp{font-size:16px}
.rr-form__whatsapp-link{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;font-weight:600;text-decoration:none}
/* het logo zelf niet onderstreept, alleen het woord */
.rr-form__whatsapp-link span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--rr-groen)}
.rr-whatsapp-icoon{flex:none;width:24px;height:24px}
.rr-form__form{display:grid;gap:20px}
.rr-form__hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.rr-form__veld{display:grid;gap:8px}
.rr-form__label{font-weight:600;font-size:16px}
.rr-form__verplicht{color:var(--rr-groen)}
.rr-form__optioneel{font-weight:400;opacity:.75}
.rr-form__input{width:100%;min-height:52px;font-size:18px;padding:14px 16px;background:var(--rr-pagina);border:1px solid var(--rr-lijn);border-radius:var(--rr-r-s);color:var(--rr-inkt);transition:border-color .15s linear,background-color .15s linear}
.rr-form__textarea{resize:vertical;min-height:112px;height:clamp(112px,16vh,180px);height:clamp(112px,16svh,180px)}
.rr-form__input:focus{outline:none;border-color:var(--rr-groen)}
.rr-form__input:focus-visible{outline:2px solid var(--rr-groen);outline-offset:2px}
.rr-form__input[aria-invalid="true"]{border-color:#B3261E}
.rr-form__hint,.rr-form__privacy{font-size:15px;line-height:1.45;opacity:.8}
.rr-form__melding{font-size:16px;font-weight:500;padding:14px 16px;border-radius:var(--rr-r-s);background:var(--rr-pagina);box-shadow:inset 0 0 0 1px var(--rr-lijn)}
.rr-form__melding:empty{display:none}
.rr-form__melding--fout{box-shadow:inset 0 0 0 1.5px #B3261E}
.rr-form__melding--succes{box-shadow:inset 0 0 0 1.5px var(--rr-groen)}
/* de verstuurknop heeft .rr-knop (vorm, vullaag, pijl); hier alleen de plek in het formulier */
.rr-form__knop{justify-self:start}
/* op desktop compacter, zodat het slot met formulier in beeld past */
@media (min-width:900px){
  .rr-form{gap:12px}
  .rr-form__form{gap:16px}
  .rr-form__veld{gap:6px}
  .rr-form__input{min-height:48px;padding:11px 14px}
}
/* breed: twee kolommen, links naam, e-mail en telefoon, rechts het bericht over die drie
   rijen; privacy en knop eronder over de hele breedte */
@media (min-width:1100px){
  .rr-form{padding:28px}
  .rr-form__form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px}
  .rr-form__form>*{grid-column:1/-1}
  .rr-form__form>.rr-form__veld--naam,.rr-form__form>.rr-form__veld--email,.rr-form__form>.rr-form__veld--telefoon{grid-column:1}
  .rr-form__form>.rr-form__veld--bericht{grid-column:2;grid-row:1/span 3;grid-template-rows:auto minmax(0,1fr) auto}
  .rr-form__veld--bericht .rr-form__textarea{height:100%;min-height:120px}
}
/* op het bosgroen van de afsluiter */
.rr-donker .rr-form{background:rgba(243,243,231,.07);border:1px solid rgba(243,243,231,.16)}
.rr-donker .rr-form__verplicht{color:var(--rr-geel)}
.rr-donker .rr-form__whatsapp-link span{text-decoration-color:var(--rr-geel)}
.rr-donker .rr-form__input{background:rgba(243,243,231,.08);border-color:var(--rr-lijn-licht);color:var(--rr-pagina)}
.rr-donker .rr-form__input:focus{border-color:var(--rr-geel);background:rgba(243,243,231,.12)}
.rr-donker .rr-form__input:focus-visible{outline-color:var(--rr-geel)}
.rr-donker .rr-form__input[aria-invalid="true"]{border-color:#FFB4AB}
.rr-donker .rr-form__melding{background:rgba(243,243,231,.1);box-shadow:inset 0 0 0 1px var(--rr-lijn-licht)}
.rr-donker .rr-form__melding--fout{box-shadow:inset 0 0 0 1.5px #FFB4AB}
.rr-donker .rr-form__melding--succes{box-shadow:inset 0 0 0 1.5px var(--rr-geel)}

/* ---------- 8. Voet ---------- */
.rr-voet{background:var(--rr-petrol);color:var(--rr-pagina);padding:24px 0 calc(48px + 64px + env(safe-area-inset-bottom));font-size:16px}
/* onder 760 px ruimte voor de belbalk in de voet zelf, zodat er geen lichte strook onder de voet staat */
@media (min-width:760px){.rr-voet{padding-bottom:48px}}
.rr-voet__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-top:48px;position:relative}
.rr-voet__raster::before{content:"";position:absolute;top:0;left:var(--rr-goot);right:var(--rr-goot);border-top:1px solid var(--rr-lijn-licht)}
.rr-voet__merk{font:300 36px/1 var(--rr-serif);letter-spacing:-.03em;margin-bottom:12px}
.rr-voet__adres{font-style:normal;margin-top:12px;opacity:.8}
.rr-voet__kop{font-weight:600;margin-bottom:10px}
.rr-voet ul{padding:0;list-style:none}
.rr-voet ul a{display:inline-block;padding:10px 0;text-decoration:none;opacity:.8;transition:opacity .15s linear}
@media (hover:hover) and (pointer:fine){.rr-voet ul a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}}
.rr-voet__noot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--rr-lijn-licht);font-size:15px;opacity:.8}
.rr-voet__noot a{text-underline-offset:4px}
@media (min-width:640px){
  .rr-voet__raster{grid-template-columns:1fr 1fr}
  .rr-voet__raster>div:first-child{grid-column:1/-1}
  .rr-voet ul a{padding:5px 0}
}
@media (min-width:900px){
  .rr-voet__raster{grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,3fr))}
  .rr-voet__raster>div:first-child{grid-column:auto}
}

/* ---------- 9. Ontbrekende tekst ----------
   basis.js zet .rr-ontbreekt op elk element waarvan de tekst begint met "Tekst ontbreekt:".
   Outline in plaats van border: de markering verschuift niets aan de opmaak. Oranje is
   bewust geen merkkleur, zodat een gat nooit voor een accent wordt aangezien. Op het
   bosgroen (.rr-donker) een lichtere variant. Bewerkt Edith het veld, dan wijkt hij. */
.rr-ontbreekt{--rr-gat:#B4380B;--rr-gat-vlak:rgba(255,186,120,.32);--rr-gat-label:#fff;outline:2px dashed var(--rr-gat);outline-offset:4px;background:var(--rr-gat-vlak);border-radius:4px}
.rr-donker .rr-ontbreekt{--rr-gat:#FFB067;--rr-gat-vlak:rgba(255,176,103,.16);--rr-gat-label:var(--rr-inkt)}
.rr-ontbreekt::before{content:"Ontbreekt";display:inline-block;vertical-align:middle;margin:0 .6em .15em 0;padding:3px 8px;border-radius:999px;background:var(--rr-gat);color:var(--rr-gat-label);font:700 12px/1.2 var(--rr-sans);letter-spacing:.02em;font-style:normal;text-transform:none;pointer-events:none}
.rr-ontbreekt:focus-within{outline-color:transparent;background:none}
.rr-ontbreekt:focus-within::before{display:none}

/* ---------- 10. Minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.js .rr-onthul{opacity:1;transform:none}
}