:root { --schicht: #ECB652; --schicht-kern: #FFF1A0; --schicht-kern-dik: 2.2; --schicht-lagen: 22 .1 #FFE066, 12 .2 #FFE066, 6 .45 #FFD447; }
[data-theme="dark"] { --schicht-kern: #FFFFFF; --schicht-kern-dik: 1.6; --schicht-lagen: 22 .12 #7B5CFF, 12 .25 #C9A2FF, 5 .6 #ECB652; }

html { scroll-padding-top: 10rem; }
@media (min-width: 768px) { html { scroll-padding-top: 6.5rem; } }

.schets .proefbalk, .schets .stempel, .schets .tabel th, .schets .voet-kop, .schets .legenda, .schets .oog, .schets .sectiekop, .schets .stap-nr {
  font-family: var(--font-label, var(--font-sans)); font-weight: 500; font-variant-numeric: tabular-nums; }
.schets .proefbalk, .schets .legenda { letter-spacing: .04em; }
.schets .stempel, .schets .tabel th, .schets .oog, .schets .stap-nr { letter-spacing: .05em; }
.schets .voet-kop, .schets .sectiekop { letter-spacing: .06em; }

.schets .kop { position: static; }
@media (min-width: 768px) { .schets .kop { position: sticky; } }
.schets .kop-binnen { height: auto; min-height: 5rem; flex-wrap: wrap; gap: 0 .5rem; padding-top: .5rem; padding-bottom: .5rem; }
.logo { min-height: 44px; margin-right: auto; }
.logo-woord { font: 500 1.375rem/1 var(--koppen); letter-spacing: .04em; color: var(--merk, var(--azul)); white-space: nowrap; }
.schets .levend-logo { color: var(--merk, var(--azul)); }
.voet-logo { display: inline-flex; align-items: center; gap: .6rem; }
.schets .kop-nav { order: 3; flex: 1 0 100%; margin-left: 0; flex-wrap: wrap; gap: 0 .85rem; font-size: 14px; }
@media (min-width: 768px) {
  .schets .kop-binnen { height: 5rem; flex-wrap: nowrap; gap: .75rem; }
  .logo { margin-right: 0; }
  .schets .kop-nav { order: 0; flex: 0 1 auto; margin-left: auto; flex-wrap: nowrap; gap: 1.1rem; font-size: 15px; }
  .schets .kop-nav a { white-space: nowrap; }
}
@media (min-width: 1024px) {
  .schets .kop-binnen { gap: 1.25rem; }
  .schets .kop-nav { gap: 1.75rem; }
}
.taalwissel { display: inline-flex; align-items: center; gap: .1rem; font: 500 14px/1 var(--font-label, var(--font-sans)); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.taal-nu, .taal-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; }
.taal-nu { color: var(--inkt); font-weight: 700; }
.taal-link { color: var(--azul); text-decoration: none; border-radius: 4px; }
.taal-link:hover, .taal-link:focus-visible { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.taal-streep { color: var(--stil); }
@media (min-width: 768px) { .thema-knop { margin-left: -.25rem; } }

.opening-vlak { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.speelvlak { position: absolute; inset: 0; z-index: 0; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.speelvlak.is-slepen { cursor: grabbing; }
.raatveld { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 76%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 76%, transparent); }
.opening-vlak > .opening { position: relative; z-index: 1; pointer-events: none; }
.opening-tekst, .raat-wrap, .raat, .raat-svg, .knoppen, .legenda { pointer-events: none; }
.opening h1, .opening .lede, .opening .oog, .knoppen a, .raat-svg .halo, .raat-svg .cel-a, .legenda li, .raat-kaartje { pointer-events: auto; }
.opening h1, .opening .lede { width: fit-content; max-width: 100%; }
.opening .oog { width: fit-content; }
.veld-bediening { position: relative; z-index: 1; display: flex; align-items: center; min-height: 44px; padding-top: .25rem; padding-bottom: 1.5rem; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .speelvlak { pointer-events: none; } .veld-bediening { display: none; } }
.veld-regel { pointer-events: auto; margin: 0; min-height: 1.4em; font-size: 14px; line-height: 1.4; color: var(--zacht); }

.opening h1 { font-size: clamp(32px, 8vw, 44px); }
@media (min-width: 768px) { .opening h1 { font-size: clamp(36px, 5vw, 46px); } }
@media (min-width: 1024px) { .opening h1 { font-size: clamp(38px, 3.3vw, 46px); } }
.opening .knoppen { margin-top: 2rem; }
.oog .ik { color: var(--azul); }

.cel.i0 { --i: 0; } .cel.i1 { --i: 1; } .cel.i2 { --i: 2; } .cel.i3 { --i: 3; } .cel.i4 { --i: 4; } .cel.i5 { --i: 5; }
.schets .raat { max-width: 34rem; }
.cel-label { font: 600 13.5px/1 var(--font-heading); letter-spacing: -.005em; fill: var(--inkt); }
.cel-sub { font: 500 10px/1 var(--font-label, var(--font-sans)); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-transform: uppercase; fill: var(--zacht); }
.cel.gepland .cel-label { fill: var(--zacht); }
.cel.gepland .cel-ico { opacity: 1; color: var(--accent-zacht); }
.cel.gepland .vorm { stroke: var(--accent-zacht); }
.raat-wrap .legenda { display: flex; }
.raat-wrap.raat-actief .raat-kaartje { min-height: 10.5rem; max-width: 34rem; }
.raat-wrap.raat-actief .kaartje-leeg { height: 7.5rem; }
.kaartje-top .stap-nr .ik { color: var(--azul); }
.kaartje-onder { font-size: 17px; line-height: 1.5; }
@keyframes knipoog { 0%, 100% { transform: scale(1); fill: var(--papier); } 40% { transform: scale(1.08); fill: var(--tint-hover); } }
.cel.gepland .vorm { transform-box: fill-box; transform-origin: center; animation: knipoog 1100ms ease-in-out 1.8s 1 backwards; }
@media (prefers-reduced-motion: reduce) { .cel.gepland .vorm { animation: none; } }

.bewijs .sectiekop { display: flex; align-items: center; gap: .6rem; }
.bewijs .sectiekop .ik { color: var(--azul); }
.bewijzen { margin-top: 2rem; }
.bewijzen li { display: grid; min-width: 0; }
.kaart-ico { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 1.5rem 1.5rem 1.25rem; }
.kaart-icoon { color: var(--azul); margin-bottom: 1.1rem; transition: translate 200ms cubic-bezier(.22, 1, .36, 1); }
.kaart-ico h3 { margin-bottom: .5rem; max-width: 100%; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.kaart-ico p { max-width: 100%; overflow-wrap: anywhere; }
.kaart-pijl { margin-top: auto; padding-top: 0; color: var(--accent-zacht); transition: translate 250ms cubic-bezier(.22, 1, .36, 1), color 150ms; }
.kaart-ico p { margin-bottom: 1.25rem; }
a.kaart-ico:hover .kaart-pijl, a.kaart-ico:focus-visible .kaart-pijl { translate: 6px 0; color: var(--azul); }
a.kaart-ico:hover .kaart-icoon, a.kaart-ico:focus-visible .kaart-icoon { translate: 0 -3px; }

.bewijzen li:nth-child(2) .kaart { --reveal-enter: 10%; --reveal-exit: 45%; }
.bewijzen li:nth-child(3) .kaart { --reveal-enter: 20%; --reveal-exit: 55%; }
.geen-tijdlijn .bewijzen li:nth-child(2) .kaart { transition-delay: 120ms; }
.geen-tijdlijn .bewijzen li:nth-child(3) .kaart { transition-delay: 240ms; }

:root { --gloed: rgba(12, 0, 76, .09); }
[data-theme="dark"] { --gloed: rgba(201, 195, 234, .14); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kaart-ico { position: relative; isolation: isolate; }
  .kaart-ico::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 250ms ease-out;
    background: radial-gradient(260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--gloed), transparent 70%); }
  a.kaart-ico:hover::before { opacity: 1; }
}

.voorproef { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 4rem; }
.voorproef-kop .lede { margin-top: 1rem; }
.voorbeeld-label { margin: 2.25rem 0 .75rem; display: flex; align-items: center; gap: .6rem; }
.voorbeeld-label .ik { color: var(--accent-zacht); }
.voorbeeld-label .stempel { margin-left: 0; font-size: 12px; white-space: normal; }
.kaarttabel table { font-size: 17px; }
.kaarttabel td { padding-top: 16px; padding-bottom: 16px; }
.kaarttabel td:first-child { font: 600 18px/1.4 var(--font-heading); color: var(--inkt); }
.kaarttabel td:nth-child(2) { color: var(--zacht); }
.kaarttabel .status { margin: 0; justify-self: start; white-space: normal; border-radius: .9rem; }
@media (max-width: 640px) {
  .kaarttabel { overflow: visible; border-top: 0; }
  .kaarttabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kaarttabel table, .kaarttabel tbody, .kaarttabel tr, .kaarttabel td { display: block; }
  .kaarttabel tr { padding: 1rem 0; border-top: 1px solid var(--lijn); }
  .kaarttabel tr:last-child { border-bottom: 1px solid var(--lijn); }
  .kaarttabel td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .3rem 0; border: 0; overflow-wrap: anywhere; }
  .kaarttabel td::before { content: attr(data-label); font: 500 12px/1.5 var(--font-label, var(--font-sans)); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .05em; color: var(--stil); }
  .kaarttabel td:first-child { font-size: 18px; }
}

.hive { background: var(--papier-2); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 4rem 0; overflow: hidden; }
.hive-binnen { display: grid; gap: 2.5rem; align-items: center; }
.hive-tekst .lede { margin-top: 1rem; }
.hive-stand { margin-top: 1.5rem; }
.hive-stand .status { margin: 0; font-size: 14px; padding: 3px 14px; color: var(--zacht); }
.hive-svg { display: block; width: 100%; max-width: 15rem; justify-self: start; overflow: visible; }
.hive-svg.reveal { --reveal-x: 40px; --reveal-y: 0px; }
.hive-svg .h { fill: var(--papier); stroke: var(--accent-zacht); stroke-width: 1.5; stroke-linejoin: round; }
.hive-svg .h.leeg { stroke-dasharray: 4 5; stroke-linecap: round; }
.hive-svg .h.vol { stroke: var(--azul); fill: var(--tint-hive, var(--papier)); }
.hive-ico { fill: none; stroke: var(--azul); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@supports (background: color-mix(in srgb, red, blue)) { .hive { --tint-hive: color-mix(in srgb, var(--azul) 8%, var(--papier)); } }
@media (min-width: 768px) {
  .hive { padding: 5rem 0; }
  .hive-binnen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; }
  .hive-svg { justify-self: end; max-width: 17rem; }
}

.schets .voet { margin-top: 0; border-top: 0; }
.voet-binnen { gap: 1.5rem; }
.voet-merk p { margin-top: .5rem; font-size: 15px; color: var(--zacht); }
.voet-merk .colofon { margin-top: .25rem; }
.voet-merk .voet-logo + .colofon { margin-top: .5rem; }
.voet-nav { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; }
.voet-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.schets .voet-kop { margin-bottom: .25rem; }
@media (min-width: 768px) {
  .schets .voet-binnen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding: 3.5rem 1.5rem; }
}

.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 90; width: max-content; max-width: min(32rem, calc(100vw - 2rem)); margin: 0; padding: .75rem 1.25rem; background: var(--cta-bg); color: var(--cta-tekst); border-radius: 0 6px 6px 6px; font: 500 15px/1.45 var(--font-sans); box-shadow: 0 8px 24px rgba(var(--schaduw-kleur), .25); opacity: 0; translate: -50% 1rem; pointer-events: none; transition: opacity 250ms ease-out, translate 250ms cubic-bezier(.22, 1, .36, 1); }
.toast.is-zichtbaar { opacity: 1; translate: -50% 0; }

html.verrassing-open { overflow: hidden; }
.kop a.logo { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.verrassing { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0;
  padding: 0; border: 0; background: transparent; overflow: hidden; color: var(--azul); }
.verrassing::backdrop { background: rgba(246, 245, 252, .72); }
[data-theme="dark"] .verrassing::backdrop { background: rgba(4, 3, 26, .72); }
.verrassing-veld { position: absolute; inset: 0; }
.verrassing.is-open .verrassing-veld { transform-origin: var(--van-x, 50%) var(--van-y, 0); animation: verrassing-vouw 560ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes verrassing-vouw { from { opacity: 0; transform: scale(.04); } to { opacity: 1; transform: none; } }
.verrassing-sluit { position: absolute; z-index: 1; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 999px; cursor: pointer;
  color: var(--azul); background: rgba(255, 255, 255, .72); border: 1px solid rgba(12, 0, 76, .18); }
[data-theme="dark"] .verrassing-sluit { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
.verrassing-kleuren { position: absolute; z-index: 1; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0;
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(12, 0, 76, .18); }
.verrassing-kleuren button { font: inherit; font-size: .875rem; line-height: 1; min-height: 40px; padding: 0 16px; border: 0;
  border-radius: 999px; background: transparent; color: #0C004C; cursor: pointer; }
.verrassing-kleuren button[aria-pressed="true"] { background: #0C004C; color: #fff; }
.verrassing-kleuren button:focus-visible { outline: 2px solid #0C004C; outline-offset: 2px; }
.verrassing[data-bal="azul"] .verrassing-kleuren button:focus-visible,
.verrassing[data-bal="goud"] .verrassing-kleuren button:focus-visible { outline-color: #fff; }
@media (max-height: 420px) {
  .verrassing-kleuren { left: auto; right: max(16px, env(safe-area-inset-right)); translate: none; }
}
.verrassing[data-bal="licht"] .verrassing-sluit, .verrassing[data-bal="licht"] .verrassing-kleuren {
  color: #0C004C; background: rgba(255, 255, 255, .72); border-color: rgba(12, 0, 76, .18); }
.verrassing[data-bal="azul"] .verrassing-sluit, .verrassing[data-bal="goud"] .verrassing-sluit,
.verrassing[data-bal="azul"] .verrassing-kleuren, .verrassing[data-bal="goud"] .verrassing-kleuren {
  color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
.verrassing[data-bal="azul"] .verrassing-kleuren button, .verrassing[data-bal="goud"] .verrassing-kleuren button { color: #fff; }
.verrassing[data-bal="azul"] .verrassing-kleuren button[aria-pressed="true"],
.verrassing[data-bal="goud"] .verrassing-kleuren button[aria-pressed="true"] { background: rgba(255, 255, 255, .24); }
.verrassing[data-bal="licht"] .verrassing-veld canvas:focus-visible { outline-color: #0C004C; }
.verrassing[data-bal="azul"] .verrassing-veld canvas:focus-visible,
.verrassing[data-bal="goud"] .verrassing-veld canvas:focus-visible { outline-color: rgba(255, 255, 255, .5); }
.verrassing-sluit svg { width: 20px; height: 20px; }
.verrassing-sluit:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.verrassing-veld canvas:focus { outline: none; }
.verrassing-veld canvas:focus-visible { outline: 2px solid currentColor; outline-offset: -10px; }
[data-theme="dark"] .verrassing-veld canvas:focus-visible { outline-color: rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: reduce) { .verrassing.is-open .verrassing-veld { animation: none; } }