/* Gereegeld voorstellen 1, 2 en 3: gedeelde basis (lettertypen, kleuren, woordmerk, bediening).
   Elk voorstel heeft daarnaast een eigen stijl.css. */
@font-face{font-family:'Gereegeld Franklin';src:url('libre-franklin-brand-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('libre-franklin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('libre-franklin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto Condensed';src:url('roboto-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --font:'Gereegeld Franklin','Libre Franklin',Arial,sans-serif;
  --label:'Roboto Condensed','Gereegeld Franklin',Arial,sans-serif;
  --papier:#faf7f1;       /* warme lichte achtergrond */
  --wit:#fffdf9;
  --creme:#f5eadd;        /* crème vlakken */
  --creme-d:#eadbca;
  --steen:#36332e;        /* tekst */
  --steen-l:#514c44;
  --muted:#655e54;        /* ondersteunende tekst, 6,5:1 op papier */
  --lijn:#e3d8ca;
  --terra:#975334;        /* terracotta voor tekst en accenten, 5,2:1 op papier */
  --terra-d:#7a4530;      /* donkerder terracotta op terracotta-lichte vlakken */
  --terra-zacht:#de997a;  /* merkvlak van de E */
  --terra-licht:#eed8c6;
  --olijf:#e6ebdf;        /* zacht olijfgroen voor ondersteunende vlakken */
  --olijf-d:#cfd8c3;
  --groen-tekst:#4a5d3f;
  --radius:14px;
  --maat:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-weight:400;font-size:17px;line-height:1.6;color:var(--steen);background:var(--papier);overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-weight:700}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--maat),100% - 40px);margin-inline:auto}
@media (max-width:600px){.wrap{width:min(var(--maat),100% - 32px)}}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Woordmerk: GERE + gemarkeerde E + GELD, ongewijzigd uit de merkidentiteit */
.gg-wordmark{display:inline-flex;align-items:center;gap:.16em;white-space:nowrap;font-family:var(--font);font-weight:800;font-size:20px;line-height:1;letter-spacing:0;color:var(--steen);text-decoration:none}
.gg-wordmark>span{display:inline-block}
.gg-wordmark .gg-letter{display:inline-flex;align-items:center;justify-content:center;width:1.06em;height:1.06em;margin:0 .04em;border-radius:.15em;background:var(--terra-zacht);color:var(--creme);flex:none}
.brand{display:inline-flex;text-decoration:none;padding:8px 0}

/* Labels (eyebrow) */
.eyebrow{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin:0 0 14px}

/* Knoppen: één primaire knop per pagina-onderdeel */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;border:1.5px solid var(--steen);background:var(--steen);color:var(--papier);font-weight:600;text-decoration:none;line-height:1.2;transition:background .2s,border-color .2s,transform .2s}
.btn:hover{background:var(--terra-d);border-color:var(--terra-d)}
.btn .pijl{transition:transform .2s}
.btn:hover .pijl{transform:translateX(3px)}
.link{font-weight:600;color:var(--terra);text-decoration:none;border-bottom:1.5px solid var(--terra-licht)}
.link:hover{border-bottom-color:var(--terra)}

/* Kop en voet, gedeeld skelet; het voorstel kleurt ze in */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav a{display:inline-block;padding:8px 12px;text-decoration:none;font-weight:500;color:var(--steen-l);border-radius:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--steen);background:var(--creme)}
.nav a[aria-current="page"]{font-weight:600}
.header-cta{padding:10px 18px;font-size:15px}
.menu-btn{display:none;border:1.5px solid var(--lijn);background:transparent;border-radius:10px;padding:8px 12px;font-weight:600}
@media (max-width:860px){.nav{display:none}.menu-btn{display:inline-flex}.header-cta{display:none}}
.mobile-menu{border-bottom:1px solid var(--lijn);background:var(--papier)}
.mobile-menu[hidden]{display:none}
.mobile-menu ul{list-style:none;margin:0;padding:8px 0 16px}
.mobile-menu a{display:block;padding:12px 0;text-decoration:none;font-weight:600;font-size:18px;border-bottom:1px solid var(--lijn)}
.mobile-menu .btn{margin-top:14px}
.concept-strip{font-size:13px;color:var(--muted);background:var(--creme);text-align:center;padding:6px 16px}

.site-footer{background:var(--creme);border-top:1px solid var(--lijn);padding:48px 0 32px;color:var(--muted);font-size:15px}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-footer h4{font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--label);color:var(--steen);margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--steen);text-decoration:underline}
.site-footer .onder{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;border-top:1px solid var(--lijn);padding-top:16px;margin-top:8px;font-size:13px}
@media (max-width:760px){.site-footer .wrap{grid-template-columns:1fr 1fr}.site-footer .wrap>:first-child{grid-column:1/-1}}

/* Beweging: één gedeelde pauzestand. html[data-beweging="uit"] zet alle animaties stil. */
.beweging-knop{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--lijn);background:var(--wit);font-size:14px;font-weight:600;color:var(--steen-l);cursor:pointer}
.beweging-knop:hover{border-color:var(--steen)}
.beweging-knop .dot{width:8px;height:8px;border-radius:50%;background:var(--terra-zacht)}
html[data-beweging="uit"] .beweging-knop .dot{background:var(--lijn)}
html[data-beweging="uit"] *,html[data-beweging="uit"] *::before,html[data-beweging="uit"] *::after{animation-play-state:paused!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html:not([data-beweging="aan"]) *,html:not([data-beweging="aan"]) *::before,html:not([data-beweging="aan"]) *::after{animation-play-state:paused!important;transition:none!important}
}
/* Scènes spelen alleen in beeld. Zonder beweging staat elke scène in de eindstand. */
.scene{--spelen:paused}
.scene.in-beeld{--spelen:running}
.scene *{animation-play-state:var(--spelen);animation-fill-mode:both}
.scene-noot{font-size:13px;color:var(--muted);margin-top:10px}