@font-face { font-family:Fredoka; font-weight:400 700; font-display:swap;
  src:url("../fonts/fredoka-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:Fredoka; font-weight:400 700; font-display:swap;
  src:url("../fonts/fredoka-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Nunito; font-weight:400 800; font-display:swap;
  src:url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:Nunito; font-weight:400 800; font-display:swap;
  src:url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --sky:#e6f4ee; --card:#fff; --ink:#16313b; --ink-soft:#4a636e; --line:#4f9478;
  --grass:#2aa87a; --grass-tx:#0f5f45; --grass-lt:#d4f0e4; --grape:#6a4d99; --sun:#e8961a;
  --stip:#bcdccd; --r-s:12px; --r-m:14px; --r-l:20px;
  --t-h1:clamp(2.5rem, 6vw, 3.5rem); --t-h2:1.75rem; --t-h3:1.375rem;
  --t-intro:1.1875rem; --t-tekst:1.0625rem; --t-ui:.9375rem; --t-naam:1.625rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky:#10222a; --card:#213b46; --ink:#eaf6f2; --ink-soft:#a6c1cb; --line:#5a8fa4;
    --grass:#5ad3a5; --grass-tx:#a6ecd0; --grass-lt:#17392f; --grape:#c3a9e8; --sun:#ffc65c;
    --stip:#2a4550;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--sky); color:var(--ink); line-height:1.6; font-size:var(--t-tekst);
  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background-image:radial-gradient(var(--stip) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  overflow-wrap:break-word;
}
:focus-visible { outline:3px solid var(--grass-tx); outline-offset:2px; }
.kop { display:grid; grid-template-columns:auto 1fr; gap:4px 20px; align-items:center;
       max-width:60rem; margin:0 auto; padding:16px 20px 4px; }
.menurij { display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:flex-end;
           align-items:center; }
.merk { font-family:Fredoka,sans-serif; font-weight:700; font-size:var(--t-naam);
        text-decoration:none; color:var(--ink); display:inline-flex; align-items:center;
        min-height:44px; }
.merk img { width:34px; height:34px; margin-right:8px; flex:none; }
@media (min-width: 48rem) {
  :root { --t-naam:1.875rem; }
  .merk img { width:40px; height:40px; margin-right:10px; }
}
.merk .naam { white-space:nowrap; }
.merk b { color:var(--grass-tx); font-weight:700; }
.nav { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.nav a { padding:7px 13px; border-radius:12px; text-decoration:none; font-weight:700;
         color:var(--ink-soft); font-size:var(--t-ui); }
.nav a:hover { background:var(--grass-lt); }
.nav a.aan { background:var(--card); color:var(--ink); border:2px solid var(--line); padding:5px 11px; }
.vel { max-width:60rem; margin:0 auto; padding:16px 20px 56px; }
h1 { font-family:Fredoka,sans-serif; font-weight:700; font-size:var(--t-h1); line-height:1.08;
     margin:18px 0 12px; letter-spacing:-.01em; }
h2 { font-family:Fredoka,sans-serif; font-weight:600; font-size:var(--t-h2); margin:0 0 8px; }
h3 { font-family:Fredoka,sans-serif; font-weight:600; font-size:var(--t-h3); margin:0 0 6px;
     color:var(--grass-tx); }
h2, h3 { line-height:1.25; }
p { margin:0 0 14px; }
a { color:var(--grass-tx); }
.lood { font-size:var(--t-intro); max-width:36rem; }
.hero { display:grid; gap:20px; align-items:center; margin-top:8px; }
.hero-beeld, .paar-beeld { margin:0; }
.hero-beeld img, .paar-beeld img { display:block; width:min(64vw, 250px); height:auto; margin:0 auto;
                                   border-radius:var(--r-l); border:3px solid var(--line);
                                   background:var(--card); }
.sectiekop { margin-top:56px; }
.paar { display:grid; gap:18px; align-items:center; margin:36px 0; }
.paar-beeld { order:2; }
.paar-tekst p { max-width:34rem; }
.paar-tekst h3 { margin-top:22px; }
@media (min-width: 48rem) {
  .hero { grid-template-columns:1.25fr .75fr; gap:40px; }
  .hero-beeld img, .paar-beeld img { width:100%; max-width:300px; }
  .paar { grid-template-columns:1fr 1fr; gap:48px; margin:72px 0; }
  .paar-beeld { order:0; }
  .paar.spiegel .paar-beeld { order:2; }
}
.paar-beeld, .paar-tekst, .beloften .kaart, .verhaal { transition:opacity .6s ease-out, translate .6s ease-out; }
.js .paar-beeld:not(.zichtbaar), .js .paar-tekst:not(.zichtbaar),
.js .beloften .kaart:not(.zichtbaar), .js .verhaal:not(.zichtbaar) { opacity:0; translate:0 28px; }
.paar-beeld img, .hero-beeld img { will-change:transform; }
@media (prefers-reduced-motion: reduce) {
  .paar-beeld, .paar-tekst, .beloften .kaart, .verhaal { transition:none; }
}
.beloften { display:grid; gap:14px; margin:36px 0; }
@media (min-width: 48rem) { .beloften { grid-template-columns:1fr 1fr; gap:20px; margin:72px 0; } }
.kaart { background:var(--card); border:3px solid var(--line); border-radius:20px; padding:16px 18px; }
.kaart p { margin:0; color:var(--ink-soft); }
.blok { background:var(--card); border:3px solid var(--line); border-radius:20px;
        padding:4px 18px 6px; margin:26px 0; }
.blok h2 { margin-top:16px; }
.winkelblok h2, .sectiekop, .tekstvel h2 { margin-top:34px; }
.datum { color:var(--ink-soft); font-size:var(--t-ui); margin-top:26px; }
ul { margin:0 0 14px; padding-left:1.2em; }
li { margin-bottom:6px; }
.voet { max-width:60rem; margin:0 auto; padding:22px 20px 40px; color:var(--ink-soft);
        font-size:var(--t-ui); border-top:2px solid var(--line); }
.taal { padding:4px 10px; border:2px solid var(--line); border-radius:12px;
        text-decoration:none; background:var(--card); }
.taal:hover { background:var(--grass-lt); }
.taal.aan { background:var(--grass-lt); color:var(--grass-tx); font-weight:700;
            border-color:var(--grass-tx); }
.taalkiezer { position:relative; }
.taalkiezer > summary {
  display:inline-flex; align-items:center; gap:2px; cursor:pointer; list-style:none;
  padding:7px 13px; border:2px solid var(--line); border-radius:12px;
  background:var(--card); font-weight:700; font-size:var(--t-ui);
}
.taalkiezer > summary::-webkit-details-marker { display:none; }
.taalkiezer .pijl { margin-left:4px; border:solid var(--ink-soft); border-width:0 2px 2px 0;
                    padding:2.5px; translate:0 -2px; transform:rotate(45deg);
                    transition:transform .15s ease-out; }
.taalkiezer[open] .pijl { transform:rotate(-135deg); translate:0 1px; }
@media (prefers-reduced-motion: reduce) { .taalkiezer .pijl { transition:none; } }
.kopTalen { position:absolute; right:0; top:calc(100% + 6px); z-index:5;
            display:flex; flex-direction:column; gap:4px; min-width:11rem;
            padding:6px; background:var(--card); border:2px solid var(--line);
            border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.kopTalen .taal { font-size:var(--t-ui); padding:5px 11px; white-space:nowrap; border-color:transparent; }
.kopTalen .taal.aan { border-color:var(--grass-tx); }
.vlag { width:1.3em; height:.9em; object-fit:cover; border-radius:2px; flex:none;
        margin-right:.45em; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
@media (max-width: 30rem) {
  .kop { grid-template-columns:1fr; }
  .menurij { justify-content:space-between; }
  .kopTalen { left:0; right:auto; }
}
.verhaal { max-width:42rem; }
.verhaal p:last-child { margin-bottom:14px; }
.vel > p, .vel > ul, .vel > h2, .vel > h3, .blok > p, .blok > ul, .verhaal > p {
  max-width:42rem;
}
.blok { max-width:44rem; }
.tekstvel { background:var(--card); border:3px solid var(--line); border-radius:20px;
            padding:6px 22px 18px; margin:14px 0 0; }
.tekstvel > h1 { margin-top:14px; }
.tekstvel .blok { border-width:2px; }
.kort { display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; padding:0;
        margin:0 0 18px; }
.kort li { background:var(--card); color:var(--grass-tx); border:2px solid var(--line);
           border-radius:12px; padding:5px 12px; font-weight:700; font-size:var(--t-ui); }
.winkelblok { margin:22px 0 26px; }
.winkelblok h2 { margin:8px 0 8px; }
.winkelrij { display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.winkel { display:inline-flex; align-items:center; min-height:46px; padding:10px 18px;
          border-radius:14px; border:3px solid var(--line); background:var(--card);
          font-weight:700; font-size:var(--t-ui); text-decoration:none; color:var(--ink); }
.winkel.straks { color:var(--ink-soft); background:transparent; border:2px dashed var(--line);
                 padding:11px 19px; }
a.winkel:hover { background:var(--grass-lt); }
@media (prefers-color-scheme: dark) {
  .hero-beeld img, .paar-beeld img { border-color:#3f6b7c; }
}
.nav a, .taal, .taalkiezer > summary, .voetnav a { min-height:44px; display:inline-flex;
                                                    align-items:center; }
.nav a.aan { align-items:center; }
.voetnav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.voetnav a { padding:6px 12px; border-radius:12px; text-decoration:none;
             font-weight:700; font-size:var(--t-ui); color:var(--ink-soft); }
.voetnav a.aan { color:var(--ink); background:var(--card); border:2px solid var(--line);
                 padding:4px 10px; }