:root {
  --achtergrond: #fbf6ec;
  --vlak: #ffffff;
  --vlak-warm: #f4ead6;
  --tekst: #2a2723;
  --tekst-zacht: #6a6157;
  --blauw: #1f5fa8;
  --blauw-diep: #173f73;
  --goud: #d6a23e;
  --olijf: #5f7a3a;
  --rood: #b8452f;
  --oranje: #b87407;
  --groen: #4d7a3a;
  --rand: #e7dcc8;
  --schaduw: 0 1px 2px rgba(60, 40, 10, .06), 0 6px 20px rgba(60, 40, 10, .07);
  --held-van: #1d5aa3;
  --held-naar: #4a92d4;
  --held-tekst: #ffffff;
  --koraal: #d9684a;
  --turkoois: #23897d;
  --zon: #f2b84b;
  --blauw-zacht: #eaf2fc;
  --olijf-zacht: #eef3e4;
  --koraal-zacht: #fcebe4;
  --zon-zacht: #fdf1d6;
  --voet: #173f73;
  --voet-tekst: #f3ead8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --achtergrond: #17191d;
    --vlak: #20242a;
    --vlak-warm: #2a2721;
    --tekst: #f1ece3;
    --tekst-zacht: #b5ab9c;
    --blauw: #7fb2ec;
    --blauw-diep: #a9cbf2;
    --goud: #e6b95a;
    --olijf: #a3bf78;
    --rood: #ef8a73;
    --oranje: #f0b04a;
    --groen: #93c27b;
    --rand: #343a42;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --held-van: #163a66;
    --held-naar: #23599a;
    --koraal: #f09a80;
    --turkoois: #6fcabd;
    --zon: #f2c46a;
    --blauw-zacht: #1d2a3a;
    --olijf-zacht: #232b1f;
    --koraal-zacht: #33231f;
    --zon-zacht: #312a1b;
    --voet: #0f1a29;
    --voet-tekst: #e9e2d6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --achtergrond: #17191d; --vlak: #20242a; --vlak-warm: #2a2721; --tekst: #f1ece3; --tekst-zacht: #b5ab9c;
  --blauw: #7fb2ec; --blauw-diep: #a9cbf2; --goud: #e6b95a; --olijf: #a3bf78; --rood: #ef8a73;
  --oranje: #f0b04a; --groen: #93c27b; --rand: #343a42; --held-van: #163a66; --held-naar: #23599a;
  --koraal: #f09a80; --turkoois: #6fcabd; --zon: #f2c46a; --blauw-zacht: #1d2a3a; --olijf-zacht: #232b1f;
  --koraal-zacht: #33231f; --zon-zacht: #312a1b; --voet: #0f1a29; --voet-tekst: #e9e2d6;
  color-scheme: dark;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--achtergrond); color: var(--tekst);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, .logo span, .slot-tekst, .feit strong { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; line-height: 1.25; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .2em 0 .4em; }
h2 { font-size: 1.4rem; margin: 0 0 .6em; }
a { color: var(--blauw); text-underline-offset: 3px; }
a:hover { color: var(--blauw-diep); }
blockquote { margin: 0; padding: .2em 0 .2em 1.1em; border-left: 4px solid var(--goud); font-style: italic; font-size: 1.12rem; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.smal { max-width: 780px; padding-top: 2rem; padding-bottom: 2rem; }
.klein { font-size: .9rem; color: var(--tekst-zacht); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.overslaan { position: absolute; left: -999px; }
.overslaan:focus { left: 16px; top: 8px; background: var(--vlak); padding: .5em 1em; z-index: 10; }

.kop { background: var(--vlak); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 5; }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tekst); font-weight: 700; font-size: 1.1rem; }
.logo-ster { width: 30px; height: 30px; color: var(--blauw); }
.kop-rechts { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.thema-knop { flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--rand); border-radius: 50%; background: var(--vlak-warm); color: var(--blauw-diep); cursor: pointer; transition: transform .2s; }
.thema-knop:hover { transform: rotate(-15deg); }
.thema-knop[hidden] { display: none; }
.thema-knop svg { width: 1.15rem; height: 1.15rem; }
.thema-zon { display: none; }
:root[data-theme="dark"] .thema-zon { display: block; }
:root[data-theme="dark"] .thema-maan { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .thema-zon { display: block; }
  :root:not([data-theme="light"]) .thema-maan { display: none; }
}
.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--tekst); padding: .35em .75em; border-radius: 999px; font-size: .95rem; }
.nav a:hover, .nav a[aria-current] { background: var(--vlak-warm); color: var(--blauw-diep); }

.held { background: linear-gradient(135deg, var(--held-van), var(--held-naar)); color: var(--held-tekst); padding: 3.5rem 0 clamp(110px, 15vw, 220px); position: relative; overflow: hidden; isolation: isolate; }
.held::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(circle at 84% 34%, rgba(255, 214, 130, .45), rgba(255, 214, 130, 0) 32%),
  radial-gradient(ellipse 70% 45% at 50% 100%, rgba(255, 196, 120, .30), rgba(255, 196, 120, 0) 70%); }
.held h1 em { font-style: italic; color: #ffd98a; }
.held a:not(.knop) { color: #fff; }
.held .badge { background: #fff; border-color: transparent; }
.held .badge-rood { color: #b8452f; } .held .badge-oranje { color: #9a5f00; } .held .badge-groen { color: #3f6b2e; }
.held::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, var(--goud), #f2d27e, var(--goud)); z-index: 1; }
.held > .wrap { position: relative; z-index: 1; }
.banner { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(100px, 14vw, 210px); display: block; pointer-events: none; }
.banner-ver { fill: rgba(255, 255, 255, .07); }
.banner-stad, .banner-bomen { fill: rgba(255, 255, 255, .17); }
.banner-stad line { stroke: rgba(255, 255, 255, .17); }
.banner-koepel { fill: rgba(242, 210, 126, .55); }
.banner-midden { fill: rgba(255, 255, 255, .11); }
.banner-voor { fill: rgba(10, 30, 60, .22); }
.held-binnen { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.held-ster { width: 220px; height: 220px; color: rgba(255, 255, 255, .28); filter: drop-shadow(0 0 24px rgba(255, 220, 150, .35)); animation: zweef 9s ease-in-out infinite; }
@keyframes zweef { 50% { transform: translateY(-10px) rotate(4deg); } }
.held-groet [lang="he"] { font-size: 1.15em; letter-spacing: 0; }
.held-groet { margin: 0; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; color: #ffe2a3; }
.held-lead { font-size: 1.15rem; max-width: 40em; opacity: .95; }
.held-klein { padding-top: 2.5rem; }
.knoppen { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.knop { display: inline-block; background: linear-gradient(135deg, #f5c661, #e0a238); color: #2a1d05; font-weight: 700; text-decoration: none; padding: .7em 1.4em; border-radius: 999px; box-shadow: 0 4px 14px rgba(214, 162, 62, .35); transition: transform .15s, box-shadow .15s; }
.knop:hover { color: #2a1d05; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(214, 162, 62, .45); }
.knop-licht { background: rgba(255, 255, 255, .15); color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.knop-licht:hover { background: rgba(255, 255, 255, .25); color: #fff; }

.waarden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.waarde { --accent: var(--blauw); --accent-zacht: var(--blauw-zacht); background: var(--vlak); border: 1px solid var(--rand); border-top: 4px solid var(--accent); border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: var(--schaduw); }
.waarde-warmte { --accent: var(--koraal); --accent-zacht: var(--koraal-zacht); }
.waarde-eerlijk { --accent: var(--olijf); --accent-zacht: var(--olijf-zacht); }
.waarde .icoon { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: var(--accent-zacht); color: var(--accent); margin-bottom: .7rem; }
.waarde h2 { font-size: 1.15rem; color: var(--accent); }
.waarde p { margin: 0; color: var(--tekst-zacht); }

.icoon { display: inline-block; flex: none; }
.sectie-groet { margin: 0; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .82rem; color: var(--koraal); }
.mooi-sectie { padding-bottom: 1rem; }
.mooi-lijst { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mooi { --accent: var(--zon); --accent-zacht: var(--zon-zacht); display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; padding: .8rem .8rem 1.1rem; box-shadow: var(--schaduw); transition: transform .2s; }
.mooi > :not(.mooi-plaat) { padding-inline: .5rem; }
.mooi:nth-child(2) { --accent: var(--turkoois); --accent-zacht: var(--blauw-zacht); }
.mooi:nth-child(3) { --accent: var(--koraal); --accent-zacht: var(--koraal-zacht); }
.mooi:nth-child(4) { --accent: var(--olijf); --accent-zacht: var(--olijf-zacht); }
.mooi:hover { transform: translateY(-3px) rotate(-.4deg); }
.mooi-plaat { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--accent-zacht); }
.mooi-plaat .f-z { fill: var(--zon); } .mooi-plaat .f-t { fill: var(--turkoois); } .mooi-plaat .f-o { fill: var(--olijf); }
.mooi-plaat .f-b { fill: var(--blauw); } .mooi-plaat .f-k { fill: var(--koraal); } .mooi-plaat .f-w { fill: var(--vlak); }
.mooi-plaat .s-z { stroke: var(--zon); } .mooi-plaat .s-t { stroke: var(--turkoois); } .mooi-plaat .s-o { stroke: var(--olijf); }
.mooi-plaat .s-b { stroke: var(--blauw); } .mooi-plaat .s-k { stroke: var(--koraal); } .mooi-plaat .s-w { stroke: var(--vlak); } .mooi-plaat .s-g { stroke: var(--tekst-zacht); }
.mooi h3 { font-size: 1.12rem; margin: .9rem 0 .35rem; }
.mooi p { margin: 0; font-size: .95rem; color: var(--tekst-zacht); }
.mooi .mooi-bron { margin-top: auto; padding-top: .7rem; font-size: .8rem; }

.feiten { margin-top: 2.5rem; background: var(--vlak-warm); border-block: 1px solid var(--rand); }
.feiten-binnen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.feit strong { display: block; font-size: 2.3rem; color: var(--olijf); }
.feit:nth-child(2) strong { color: var(--blauw); }
.feit:nth-child(3) strong { color: var(--koraal); }
.feit:nth-child(4) strong { color: var(--turkoois); }
.feit span { font-size: .93rem; color: var(--tekst-zacht); }

.sectie { padding-top: 3rem; padding-bottom: 2rem; }
.sectie-titel { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.sectie-lead { color: var(--tekst-zacht); max-width: 46em; }
.filterbalk { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1.2rem 0 1.4rem; }
.zoek { flex: 1 1 260px; }
.zoek input { width: 100%; font: inherit; padding: .6em 1em; border-radius: 999px; border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst); }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.filters button { font: inherit; font-size: .88rem; padding: .45em .9em; border-radius: 999px; border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst); cursor: pointer; display: inline-flex; align-items: center; gap: .4em; }
.filters button[aria-pressed="true"] { background: var(--blauw); border-color: var(--blauw); color: var(--vlak); }

.kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.kaart[hidden] { display: none; }
.kaart a { display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.2rem 1.3rem; background: var(--vlak); border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--schaduw); text-decoration: none; color: var(--tekst); transition: transform .15s, border-color .15s; }
.kaart a:hover { transform: translateY(-3px); border-color: var(--goud); color: var(--tekst); box-shadow: 0 10px 28px rgba(214, 162, 62, .22); }
.kaart a:hover .kaart-lees span { transform: translateX(4px); }
.kaart-lees span { display: inline-block; transition: transform .15s; }
.kaart-cat { font-weight: 700; color: var(--blauw-diep); font-family: Georgia, serif; font-size: 1.1rem; }
.kaart-tekst { font-style: italic; color: var(--tekst-zacht); flex: 1; }
.kaart-voet { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kaart-lees { font-weight: 600; color: var(--blauw); font-size: .95rem; }
.freq { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--tekst-zacht); }
.freq-balk { width: 70px; height: 6px; background: var(--vlak-warm); border-radius: 3px; overflow: hidden; }
.freq-balk span { display: block; height: 100%; background: linear-gradient(90deg, var(--zon), var(--koraal)); }
.leeg { text-align: center; color: var(--tekst-zacht); padding: 2rem; }

.badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; border: 1px solid currentColor; }
.badge-rood { color: var(--rood); }
.badge-oranje { color: var(--oranje); }
.badge-groen { color: var(--groen); }
.stip { display: inline-block; width: .65em; height: .65em; border-radius: 50%; }
.stip-rood { background: var(--rood); }
.stip-oranje { background: var(--oranje); }
.stip-groen { background: var(--groen); }

.band { background: var(--vlak-warm); border-block: 1px solid var(--rand); margin-top: 2rem; }
.band-binnen { display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding-top: 2.2rem; padding-bottom: 2.2rem; flex-wrap: wrap; }
.band-binnen > div { max-width: 44em; }
.slot { text-align: center; padding: 3.5rem 0 3rem; background: radial-gradient(ellipse 60% 80% at 50% 0%, var(--zon-zacht), transparent 70%); }
.slot-binnen { max-width: 640px; }
.slot-tak { width: 110px; height: 66px; color: var(--olijf); }
.slot-tak .olijf-vrucht, .voet-tak .olijf-vrucht { fill: var(--goud); }
.slot-hebreeuws { font-size: clamp(2.6rem, 7vw, 3.6rem); margin: .2rem 0 0; color: var(--blauw); line-height: 1.1; }
.slot-tekst { font-size: 1.5rem; color: var(--blauw-diep); font-style: italic; margin: .3rem 0 .6rem; }
.slot-lead { color: var(--tekst-zacht); }
.knoppen-midden { justify-content: center; }

.mythe-label { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem; color: var(--koraal); }
.quiz [hidden] { display: none !important; }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
.quiz legend { font-weight: 700; color: var(--blauw-diep); margin-bottom: .5rem; padding: 0; }
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; }
.keuze span { display: block; height: 100%; padding: .8rem 1rem; border: 2px solid var(--rand); border-radius: 12px; background: var(--vlak-warm); cursor: pointer; font-weight: 600; transition: border-color .15s; }
.keuze span:hover { border-color: var(--goud); }
.keuze small { display: block; font-weight: 400; font-size: .85rem; color: var(--tekst-zacht); }
.keuze input:checked + span { border-color: var(--blauw); background: var(--blauw-zacht); }
.keuze input:focus-visible + span { outline: 3px solid var(--goud); outline-offset: 2px; }
button.knop { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.knop-rustig { background: var(--vlak-warm); color: var(--tekst); border: 1px solid var(--rand); box-shadow: none; }
.knop-rustig:hover { color: var(--tekst); box-shadow: none; }
.quiz-kop { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; font-weight: 600; color: var(--tekst-zacht); }
.quiz-voortgang { height: 8px; background: var(--vlak-warm); border-radius: 4px; overflow: hidden; margin: .5rem 0 1.2rem; }
.quiz-voortgang span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--zon), var(--koraal)); transition: width .3s; }
.quiz .mythe-label { margin: 0; }
.quiz-vraag { font-size: 1.35rem; margin-top: .3rem; }
.quiz-vraag:focus, .quiz-score-getal:focus { outline: none; }
.quiz-opties { display: grid; gap: .6rem; margin: 1rem 0; }
.optie { display: flex; gap: .8rem; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--tekst); padding: .75rem 1rem; border: 2px solid var(--rand); border-radius: 12px; background: var(--vlak); cursor: pointer; transition: border-color .15s, transform .15s; }
.optie:hover:not(:disabled) { border-color: var(--goud); transform: translateX(3px); }
.optie:disabled { cursor: default; }
.optie-letter { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--vlak-warm); color: var(--blauw-diep); font-weight: 700; }
.optie.is-goed { border-color: var(--groen); background: var(--olijf-zacht); }
.optie.is-goed .optie-letter { background: var(--groen); color: var(--vlak); }
.optie.is-fout { border-color: var(--rood); background: var(--koraal-zacht); }
.optie.is-fout .optie-letter { background: var(--rood); color: var(--vlak); }
.optie.is-anders { opacity: .55; }
.quiz-feedback { border-left: 5px solid var(--groen); background: var(--olijf-zacht); border-radius: 12px; padding: .9rem 1.1rem; }
.quiz-feedback.fout { border-left-color: var(--rood); background: var(--koraal-zacht); }
.quiz-feedback p { margin: .3em 0; }
.quiz-oordeel { font-weight: 700; }
.quiz-score { text-align: center; }
.quiz-score-getal { font-family: Georgia, serif; font-size: clamp(3rem, 10vw, 4.5rem); font-weight: 700; color: var(--blauw); line-height: 1; margin: .3em 0 .1em; }
.quiz-titel { font-size: 1.5rem; color: var(--koraal); margin-top: .6rem; }
.antwoorden { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.antwoorden li { background: var(--vlak); border: 1px solid var(--rand); border-left: 5px solid var(--groen); border-radius: 12px; padding: .7rem 1rem; }
.antwoorden li.fout { border-left-color: var(--rood); }
.antwoorden p { margin: .2em 0; }
.weg-terug { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.weg-terug a { display: block; padding: .8rem 1rem; border: 1px solid var(--rand); border-radius: 12px; background: var(--vlak-warm); text-decoration: none; font-weight: 600; transition: border-color .15s, transform .15s; }
.weg-terug a:hover { border-color: var(--goud); transform: translateX(3px); }
.kruimel { font-size: .9rem; color: var(--tekst-zacht); margin: 0; }
.blok { background: var(--vlak); border: 1px solid var(--rand); border-radius: 16px; padding: 1.4rem 1.5rem; margin: 1.2rem 0; box-shadow: var(--schaduw); }
.blok > :last-child { margin-bottom: 0; }
.blok h2 { font-size: 1.2rem; color: var(--blauw-diep); }
.blok-verwijt { background: var(--vlak-warm); }
.blok h2 .icoon { width: 1.3em; height: 1.3em; vertical-align: -.25em; margin-right: .4em; }
.blok-weerwoord { border-top: 5px solid var(--blauw); background: linear-gradient(180deg, var(--blauw-zacht), var(--vlak) 120px); }
.weerwoord { font-size: 1.08rem; }
.blok-klopt { border-left: 5px solid var(--olijf); background: linear-gradient(90deg, var(--olijf-zacht), var(--vlak) 60%); }
.blok-klopt h2 { color: var(--olijf); }
.blok-rood { border-left: 5px solid var(--rood); }
.blok-oranje { border-left: 5px solid var(--oranje); }
.blok-groen { border-left: 5px solid var(--groen); }
details.blok summary { cursor: pointer; font-weight: 700; color: var(--blauw-diep); }
.bronlijst, .voorbeeldlijst { padding-left: 1.2em; }
.bronlijst li, .voorbeeldlijst li { margin: .3em 0; }
.voorbeeldlijst a { color: var(--tekst); }
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.cijfers div { background: var(--vlak-warm); border-radius: 12px; padding: .8rem 1rem; }
.cijfers dt { font-size: .85rem; color: var(--tekst-zacht); }
.cijfers dd { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--olijf); }
.bladeren { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.bladeren a { display: block; padding: 1rem 1.2rem; border: 1px solid var(--rand); border-radius: 14px; background: var(--vlak); text-decoration: none; font-weight: 600; transition: border-color .15s, transform .15s; }
.bladeren a:hover { border-color: var(--goud); transform: translateY(-2px); }
.bladeren a span { display: block; font-size: .82rem; color: var(--tekst-zacht); font-weight: 400; }
.bladeren .rechts { text-align: right; }

.drie-d { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.drie-d div { background: var(--vlak-warm); border-radius: 12px; padding: 1rem; }
.drie-d strong { color: var(--blauw-diep); }
.drie-d p { margin: .3em 0 0; font-size: .93rem; }
.ihra-lijst { list-style: none; padding: 0; margin: 0; }
.ihra-lijst li { display: flex; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--rand); scroll-margin-top: 80px; }
.ihra-lijst li:target { background: var(--vlak-warm); border-radius: 10px; padding-inline: .6rem; }
.ihra-lijst p { margin: 0; }
.nr { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--blauw); color: var(--vlak); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.tags { margin-top: .5rem !important; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tag { font-size: .82rem; background: var(--vlak-warm); padding: .2em .7em; border-radius: 999px; text-decoration: none; }
.groepen { display: grid; gap: .8rem; }
.groep { border: 1px solid var(--rand); border-radius: 12px; padding: 1rem 1.2rem; }
.groep h3 { font-size: 1.05rem; margin: 0; display: flex; gap: .5rem; align-items: center; }
.groep ul { columns: 2; margin: .4rem 0 0; padding-left: 1.2em; }
.tips li, .methode li { margin: .5em 0; }

.voet { background: var(--voet); color: var(--voet-tekst); margin-top: 2rem; border-top: 1px solid var(--rand); }
.voet-binnen { padding-top: 2rem; padding-bottom: 2rem; font-size: .92rem; text-align: center; }
.voet-tak { width: 64px; height: 38px; opacity: .65; }
.voet-groet { opacity: .8; }
.voet p { margin: .3em 0; }
.voet a { color: inherit; }

@keyframes opkomen { from { opacity: 0; transform: translateY(14px); } }
.waarde, .mooi, .kaart, .smal > .blok { animation: opkomen .6s ease-out both; }
.waarde:nth-child(2), .mooi:nth-child(2), .kaart:nth-child(2) { animation-delay: .08s; }
.waarde:nth-child(3), .mooi:nth-child(3), .kaart:nth-child(3) { animation-delay: .16s; }
.mooi:nth-child(4), .kaart:nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 1000px) {
  .mooi-lijst { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .held-binnen { grid-template-columns: 1fr; }
  .held-ster { display: none; }
  .waarden, .drie-d, .mooi-lijst { grid-template-columns: 1fr; }
  .feiten-binnen { grid-template-columns: 1fr 1fr; }
  .kaarten { grid-template-columns: 1fr; }
  .groep ul { columns: 1; }
  .bladeren { grid-template-columns: 1fr; }
  .bladeren .rechts { text-align: left; }
}