/* funzone-ch.com
   Kleuren komen uit het logo zelf: oranje #F87820 en aubergine #302838, met
   een cremekleurig kruis. Geen groen, dat zat nergens in het merk.
   Fredoka voor de koppen, Nunito voor de tekst: rond en speels, maar nog te
   lezen in een lange alinea voorwaarden.
   Let op: nergens .fact span als selector, die wint van .fact-ic. */

:root{
  --room:#FDF8F1;
  --room-2:#F7EFE3;
  --papier:#FFFCF8;
  --wit:#FFFFFF;
  --inkt:#2A2233;
  --grijs:#665A70;
  --zacht:#8A7D94;
  --lijn:#EEE2D2;
  --lijn-2:#DCCAB2;
  --oranje:#F87820;
  --oranje-diep:#DD5E08;
  --oranje-zacht:#FFE8D4;
  --pruim:#302838;
  --pruim-2:#463A52;
  --geel:#FFC93C;
  --creme:#F4F1E4;
  --schaduw:0 1px 2px rgba(48,40,56,.05), 0 8px 22px rgba(48,40,56,.07);
  --schaduw-op:0 3px 8px rgba(48,40,56,.08), 0 20px 46px rgba(48,40,56,.16);
  --oranje-gloed:0 8px 22px rgba(248,120,32,.34);
  --wrap:1180px;
  --display:'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --sans:'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --veer:cubic-bezier(.2,.9,.3,1.2);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--room); color:var(--inkt);
  font-family:var(--sans); font-size:17px; line-height:1.66; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--oranje-diep)}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  line-height:1.14; margin:0; overflow-wrap:break-word; hyphens:manual}
/* Alleen het Duits heeft afbreken nodig, voor woorden als
   Vierhundertvierundfuenfzig. In het Engels levert het "bun-dle" op. */
html:lang(de) h1,html:lang(de) h2,html:lang(de) h3{hyphens:auto}
h1{font-size:clamp(2.15rem,4.7vw,3.5rem); font-weight:700; letter-spacing:-.022em}
h2{font-size:clamp(1.6rem,2.9vw,2.35rem); font-weight:600; letter-spacing:-.015em}
h3{font-size:1.16rem; line-height:1.32; font-weight:600}
p{margin:0 0 1em}
b,strong{font-weight:700}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--pruim); color:#fff;
  padding:12px 18px; z-index:60; border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--oranje); outline-offset:3px; border-radius:6px}

/* ============================================================ kopbalk */
.top{position:sticky; top:0; z-index:40; background:rgba(253,248,241,.9);
  backdrop-filter:saturate(1.5) blur(12px); border-bottom:1px solid var(--lijn)}
.top .bar{display:flex; align-items:center; gap:18px; min-height:76px}
.top .logo{display:inline-flex; align-items:center; flex:0 0 auto;
  transition:transform .3s var(--veer)}
.top .logo:hover{transform:rotate(-2deg) scale(1.04)}
.top .logo img{width:auto; height:36px; display:block}
.burger{margin-left:auto; width:46px; height:46px; border:2px solid var(--lijn-2);
  background:var(--papier); border-radius:14px; display:none; cursor:pointer; position:relative}
.burger span, .burger span::before, .burger span::after{content:''; position:absolute;
  left:12px; width:20px; height:2.5px; background:var(--inkt); border-radius:3px;
  transition:transform .25s var(--veer), opacity .2s}
.burger span{top:21px}
.burger span::before{top:-6px; left:0}
.burger span::after{top:6px; left:0}
.top[data-open="true"] .burger span{background:transparent}
.top[data-open="true"] .burger span::before{transform:translateY(6px) rotate(45deg)}
.top[data-open="true"] .burger span::after{transform:translateY(-6px) rotate(-45deg)}

.nav{margin-left:auto}
.nav ul{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav a{position:relative; display:inline-block; padding:9px 14px; border-radius:10px;
  text-decoration:none; color:var(--grijs); font-size:.95rem; font-weight:600; transition:color .18s}
.nav a::after{content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2.5px;
  background:var(--oranje); border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--veer)}
.nav a:hover{color:var(--inkt)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--inkt); font-weight:700}
.nav-cta-li{margin-left:10px}
.nav .nav-cta{background:var(--oranje); color:#fff; padding:11px 22px; border-radius:999px;
  font-weight:700; box-shadow:var(--oranje-gloed)}
.nav .nav-cta::after{display:none}
.nav .nav-cta:hover{background:var(--oranje-diep); color:#fff; transform:translateY(-1px)}

.talen{display:inline-flex; gap:2px; padding:3px; margin-left:6px;
  background:var(--room-2); border:1.5px solid var(--lijn); border-radius:999px}
.talen button{border:0; background:transparent; color:var(--zacht); font:inherit;
  font-family:var(--display); font-size:.8rem; font-weight:600; letter-spacing:.05em;
  padding:5px 12px; border-radius:999px; cursor:pointer; transition:.2s var(--veer)}
.talen button:hover{color:var(--inkt); transform:translateY(-1px)}
.talen button[aria-pressed="true"]{background:var(--oranje); color:#fff;
  box-shadow:0 2px 6px rgba(248,120,32,.4)}

/* ============================================================ knoppen */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center;
  justify-content:center; gap:9px; padding:14px 28px; border-radius:999px;
  background:var(--oranje); color:#fff; text-decoration:none; font-family:var(--display);
  font-weight:600; font-size:1.02rem; border:2px solid var(--oranje);
  box-shadow:var(--oranje-gloed); transition:transform .22s var(--veer), box-shadow .22s,
  background .18s, border-color .18s}
.btn::before{content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); transition:left .55s ease}
.btn:hover::before{left:125%}
.btn:hover{background:var(--oranje-diep); border-color:var(--oranje-diep);
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(248,120,32,.42)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-lg{padding:16px 34px; font-size:1.08rem}
.btn-ghost{background:transparent; color:var(--inkt); border-color:var(--lijn-2); box-shadow:none}
.btn-ghost::before{display:none}
.btn-ghost:hover{background:var(--wit); color:var(--oranje-diep); border-color:var(--oranje);
  box-shadow:var(--schaduw)}
.btn-block{width:100%}
.hero-cta,.end-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

.eyebrow{display:inline-flex; align-items:center; gap:7px; font-family:var(--display);
  font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--oranje-diep); margin-bottom:14px}
.eyebrow::before{content:''; width:18px; height:3px; border-radius:3px; background:var(--oranje)}

/* ============================================================ de kop */
.kop{padding:64px 0 74px; position:relative; overflow:hidden}
.kop::before,.kop::after{content:''; position:absolute; border-radius:50%; z-index:0;
  filter:blur(46px); pointer-events:none}
.kop::before{width:520px; height:460px; top:-130px; right:-90px;
  background:rgba(248,120,32,.26)}
.kop::after{width:430px; height:390px; bottom:-215px; left:-175px;
  background:rgba(255,201,60,.17)}
.beweegt .kop::before{animation:drijf 15s ease-in-out infinite alternate}
.beweegt .kop::after{animation:drijf 19s ease-in-out infinite alternate-reverse}
@keyframes drijf{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-32px,26px) scale(1.12)}
}
.kop-in{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:54px; align-items:center}
.kop-tekst{min-width:0}
.kop h1{margin-bottom:20px; max-width:15ch}
.hero-sub{font-size:1.12rem; color:var(--grijs); max-width:48ch; margin-bottom:26px}
.kop-actie{display:flex; flex-wrap:wrap; gap:12px}
.kop-prijs{margin:22px 0 0; font-size:.96rem; color:var(--grijs)}
.kop-prijs b{font-family:var(--display); font-size:1.2rem; font-weight:700; color:var(--inkt)}
.kop-prijs span{margin-left:7px}

.kop-beeld{position:relative; min-width:0; min-height:492px}
.kop-beeld figure{position:absolute; margin:0; width:57%; border-radius:20px;
  background:var(--wit); padding:10px 10px 0; box-shadow:var(--schaduw-op);
  border:1px solid var(--lijn); --dx:0px; --dy:0px; --tilt:0deg; --lift:0px;
  transform:translate(var(--dx),var(--dy)) rotate(var(--tilt)) translateY(var(--lift));
  transition:transform .5s var(--veer), box-shadow .3s}
.kop-beeld img{display:block; width:100%; height:auto; border-radius:13px}
.kop-beeld figcaption{font-family:var(--display); font-size:.74rem; font-weight:600;
  color:var(--zacht); padding:8px 4px 9px}
.kop-beeld .stapel-1{top:0; left:0; --tilt:-4deg; z-index:3}
.kop-beeld .stapel-2{top:46px; right:0; --tilt:3.5deg; z-index:2}
.kop-beeld .stapel-3{bottom:0; left:21%; --tilt:-1.5deg; z-index:1}
.beweegt .kop-beeld .stapel-1{animation:zweef 6.5s ease-in-out infinite}
.beweegt .kop-beeld .stapel-2{animation:zweef 7.8s ease-in-out infinite .5s}
.beweegt .kop-beeld .stapel-3{animation:zweef 9s ease-in-out infinite 1s}
@keyframes zweef{
  0%,100%{--lift:0px}
  50%{--lift:-11px}
}
@property --lift{syntax:'<length>'; inherits:false; initial-value:0px}
.kop-beeld figure:hover{z-index:5; box-shadow:0 18px 50px rgba(48,40,56,.26)}

/* ============================================================ beloften */
.belofte{border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn);
  background:var(--papier)}
.belofte ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr)}
.belofte li{position:relative; padding:30px 28px; border-left:1px solid var(--lijn); min-width:0}
.belofte li:first-child{border-left:0; padding-left:0}
.belofte li:last-child{padding-right:0}
.belofte b{display:block; font-family:var(--display); font-size:1.1rem; font-weight:600;
  margin-bottom:5px}
.belofte b::after{content:''; display:block; width:26px; height:3px; border-radius:3px;
  background:var(--oranje); margin-top:9px; transform-origin:left;
  transition:transform .35s var(--veer)}
.belofte li:hover b::after{transform:scaleX(2.4)}
.belofte span{display:block; font-size:.92rem; color:var(--grijs); line-height:1.55; margin-top:8px}

/* ============================================================ redactie */
.redact{padding:84px 0}
.redact-in{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.redact-beeld{margin:0; min-width:0; position:sticky; top:106px}
.redact-beeld img{display:block; width:100%; height:auto; border-radius:20px;
  box-shadow:var(--schaduw-op); transition:transform .4s var(--veer)}
.redact-beeld:hover img{transform:rotate(-1.5deg) scale(1.02)}
.redact-beeld figcaption{font-size:.87rem; color:var(--zacht); margin-top:13px;
  padding-left:14px; border-left:3px solid var(--oranje)}
.redact-tekst{min-width:0}
.redact-tekst h2{margin-bottom:20px; max-width:18ch}
.redact-tekst p{font-size:1.04rem; color:#4C4253; max-width:62ch}
.redact-tekst p:first-of-type{font-size:1.17rem; color:var(--inkt)}
.redact-voet{font-size:.85rem !important; color:var(--zacht) !important;
  padding-top:16px; border-top:1px solid var(--lijn); margin-bottom:0}

/* ============================================================ lade */
.lade{padding:74px 0; background:var(--room-2); border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn)}
.lade-in{display:grid; grid-template-columns:262px 1fr; gap:44px; align-items:start}
.lade-rail{position:sticky; top:106px; min-width:0}
.rail-kop{font-family:var(--display); font-size:.76rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--zacht); margin:0 0 12px}
.rail{display:flex; flex-direction:column; gap:3px}
.rail-k{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 13px; border:0; border-radius:12px; background:transparent; cursor:pointer;
  font:inherit; font-size:.95rem; font-weight:600; color:var(--grijs);
  transition:background .18s, color .18s, transform .22s var(--veer)}
.rail-k:hover{background:var(--papier); color:var(--inkt); transform:translateX(3px)}
.rail-k[aria-pressed="true"]{background:var(--wit); color:var(--inkt); font-weight:700;
  box-shadow:var(--schaduw)}
.rail-k b{margin-left:auto; font-family:var(--display); font-size:.82rem; font-weight:600;
  color:var(--zacht); font-variant-numeric:tabular-nums}
.rail-stip{width:10px; height:10px; border-radius:50%; background:var(--c,#999); flex:0 0 auto;
  transition:transform .25s var(--veer)}
.rail-k:hover .rail-stip,.rail-k[aria-pressed="true"] .rail-stip{transform:scale(1.35)}
.rail-voet{font-size:.84rem; color:var(--zacht); margin:16px 0 0; padding-top:14px;
  border-top:1px solid var(--lijn-2); line-height:1.55}
.lade-grid{min-width:0}
.lade-kop{margin-bottom:22px}
.lade-kop h2{margin-bottom:6px}
.lade-kop span{font-size:.96rem; color:var(--grijs)}

/* ============================================================ tegels */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:16px;
  align-items:start}
.tile{display:block; text-decoration:none; color:inherit; background:var(--wit);
  border:1px solid var(--lijn); border-radius:18px; overflow:hidden; min-width:0;
  box-shadow:var(--schaduw);
  transition:transform .26s var(--veer), box-shadow .26s, border-color .2s}
.tile:hover{transform:translateY(-6px) rotate(-.7deg); box-shadow:var(--schaduw-op);
  border-color:var(--c,var(--oranje))}
.tile-art{display:block; position:relative; background:var(--room-2); overflow:hidden}
.tile-art img{display:block; width:100%; height:auto; aspect-ratio:440/280; object-fit:cover;
  transition:transform .45s var(--veer)}
.tile:hover .tile-art img{transform:scale(1.07)}
.tile-art::after{content:''; position:absolute; left:50%; top:50%; width:46px; height:46px;
  margin:-23px 0 0 -23px; border-radius:50%; background:rgba(248,120,32,.96);
  box-shadow:0 6px 18px rgba(48,40,56,.35); opacity:0; transform:scale(.5);
  transition:opacity .25s, transform .3s var(--veer);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size:20px; background-repeat:no-repeat; background-position:56% 50%}
.tile:hover .tile-art::after{opacity:1; transform:scale(1)}
.tile-body{display:block; padding:11px 13px 13px; border-top:3px solid var(--c,var(--oranje))}
.tile-name{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  font-weight:700; font-size:.93rem; line-height:1.3; overflow:hidden; min-height:2.6em}
.tile-cat{display:block; font-family:var(--display); font-size:.76rem;
  color:var(--c,var(--zacht)); font-weight:600; margin-top:3px}

/* ============================================================ tijdlijn */
.tijdlijn{padding:84px 0}
.tijdlijn-kop{text-align:center; margin-bottom:48px}
.stappen{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:38px; position:relative}
.stappen::before{content:''; position:absolute; top:25px; left:11%; right:11%; height:3px;
  border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--lijn-2) 0 9px,transparent 9px 18px)}
.stap{position:relative; min-width:0; text-align:center}
.stap-n{display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px;
  border-radius:50%; background:var(--oranje); border:4px solid var(--room);
  color:#fff; font-family:var(--display); font-size:1.25rem; font-weight:700;
  margin-bottom:18px; position:relative; z-index:1; box-shadow:var(--oranje-gloed);
  transition:transform .3s var(--veer)}
.stap:hover .stap-n{transform:scale(1.12) rotate(-8deg)}
.stap h3{margin-bottom:8px}
.stap p{font-size:.97rem; color:var(--grijs); margin:0 auto; max-width:34ch}

/* ============================================================ marquee */
.marquee{position:relative; padding:44px 0; background:var(--pruim); overflow:hidden}
.mq-rij{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-spoor{display:flex; gap:14px; width:max-content}
.mq-spoor img{width:168px; height:107px; object-fit:cover; border-radius:12px; display:block;
  opacity:.82}
.beweegt .mq-rij.links .mq-spoor{animation:schuif 54s linear infinite}
.beweegt .mq-rij.rechts .mq-spoor{animation:schuif 64s linear infinite reverse}
@keyframes schuif{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.mq-kop{margin:22px 0; text-align:center; font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem,2.3vw,1.6rem); color:var(--creme); letter-spacing:-.01em}

/* ============================================================ bonnetje */
.section{padding:80px 0}
.band{background:var(--room-2); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn)}
.ticket{display:grid; grid-template-columns:1.25fr .85fr; background:var(--wit);
  border:1px solid var(--lijn); border-radius:24px; box-shadow:var(--schaduw-op);
  overflow:hidden}
.tk-links{padding:46px 46px 42px; min-width:0}
.tk-label{display:inline-block; font-family:var(--display); font-size:.76rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#fff; background:var(--oranje);
  padding:5px 14px; border-radius:999px; margin-bottom:16px}
.tk-bedrag{font-family:var(--display); font-size:clamp(2.7rem,5.2vw,3.8rem); font-weight:700;
  line-height:1; letter-spacing:-.03em; color:var(--oranje)}
.tk-bedrag span{font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--grijs);
  margin-left:10px; letter-spacing:0}
.tk-onder{margin:14px 0 22px; color:var(--grijs); font-size:.98rem; max-width:44ch}
.lines{list-style:none; margin:0 0 26px; padding:0}
.lines li{position:relative; padding:7px 0 7px 32px; font-size:.98rem; color:#4C4253}
.lines li::before{content:''; position:absolute; left:2px; top:10px; width:19px; height:19px;
  border-radius:50%; background:var(--oranje-zacht)}
.lines li::after{content:''; position:absolute; left:7px; top:15px; width:9px; height:5px;
  border-left:2.4px solid var(--oranje-diep); border-bottom:2.4px solid var(--oranje-diep);
  transform:rotate(-45deg)}
.tk-rechts{padding:46px 40px; background:var(--room-2); border-left:3px dashed var(--lijn-2);
  min-width:0; position:relative}
.tk-rechts::before,.tk-rechts::after{content:''; position:absolute; left:-14px; width:26px;
  height:26px; border-radius:50%; background:var(--room-2); border:1px solid var(--lijn)}
.tk-rechts::before{top:-14px}
.tk-rechts::after{bottom:-14px}
.tk-kop{font-family:var(--display); font-size:.76rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--zacht); margin:0 0 16px}
.tk-op{padding:13px 0; border-bottom:1px solid var(--lijn-2)}
.tk-op:last-of-type{border-bottom:0}
.tk-op b{display:block; font-family:var(--display); font-size:1.08rem; font-weight:600;
  margin-bottom:3px}
.tk-op span{display:block; font-size:.89rem; color:var(--grijs); line-height:1.55}
.fine{font-size:.83rem; color:var(--zacht); line-height:1.6; margin:18px 0 0}

/* ============================================================ vragen */
.vragen-kop{text-align:center; margin-bottom:44px}
.vragen{display:grid; grid-template-columns:repeat(2,1fr); gap:34px 46px}
.vr{min-width:0; padding-left:20px; border-left:3px solid var(--lijn-2);
  transition:border-color .25s}
.vr:hover{border-color:var(--oranje)}
.vr h3{margin-bottom:7px}
.vr p{font-size:.98rem; color:var(--grijs); margin:0}
.vragen-kop + .vragen + .end-cta{justify-content:center}

/* ============================================================ paginakop */
.page-hero{padding:58px 0 48px; border-bottom:1px solid var(--lijn); background:var(--papier);
  position:relative; overflow:hidden}
.page-hero::after{content:''; position:absolute; width:340px; height:300px; top:-140px;
  right:-70px; border-radius:50%; background:rgba(248,120,32,.16); filter:blur(44px)}
.page-hero > .wrap{position:relative; z-index:1}
.back{display:inline-block; font-size:.89rem; font-weight:700; color:var(--zacht);
  text-decoration:none; margin-bottom:18px; transition:color .2s, transform .2s var(--veer)}
.back::before{content:'\2190'; margin-right:7px; display:inline-block; transition:transform .25s var(--veer)}
.back:hover{color:var(--oranje-diep)}
.back:hover::before{transform:translateX(-4px)}
.page-hero h1{max-width:20ch; margin-bottom:16px}
.lead{font-size:1.1rem; color:var(--grijs); max-width:62ch; margin:0}
.updated{font-size:.83rem; color:var(--zacht); margin:16px 0 0}

/* ============================================================ documenten */
.doc{padding:56px 0 80px}
.doc-card{background:var(--wit); border:1px solid var(--lijn); border-radius:24px;
  padding:50px 54px; box-shadow:var(--schaduw); max-width:860px; margin:0 auto}
.doc-card h2{font-size:1.5rem; margin:40px 0 14px; scroll-margin-top:100px}
.doc-card h2:first-child{margin-top:0}
.doc-card p{color:#4C4253}
.doc-card ul,.doc-card ol{padding-left:22px; color:#4C4253}
.doc-card li{margin-bottom:8px}
.doc-card li::marker{color:var(--oranje)}
.doc-card code{background:var(--room-2); padding:2px 8px; border-radius:6px;
  font-size:.88em; border:1px solid var(--lijn)}
.doc-card hr{border:0; border-top:1px solid var(--lijn); margin:36px 0}
.toc{background:var(--room-2); border:1px solid var(--lijn); border-radius:18px;
  padding:26px 30px; margin-bottom:34px}
.toc h2{font-family:var(--display) !important; font-size:.76rem !important; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--zacht); margin:0 0 12px !important}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:32px}
.toc li{margin-bottom:6px}
.toc a{color:var(--grijs); text-decoration:none; font-size:.93rem; transition:color .18s}
.toc a:hover{color:var(--oranje-diep); text-decoration:underline}
.note{background:var(--oranje-zacht); border:1px solid #F7D0AC; border-left:4px solid var(--oranje);
  border-radius:16px; padding:18px 22px; margin:26px 0; font-size:.96rem; color:#5A3A1E}
.note p:last-child{margin-bottom:0}

/* ============================================================ bouwsels */
.sec-head{margin-bottom:28px}
.sec-head.center{text-align:center}
.sec-head p{color:var(--grijs); margin:10px 0 0; max-width:58ch}
.sec-head.center p{margin-left:auto; margin-right:auto}

.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
  align-items:start}
.cat{display:block; text-decoration:none; color:inherit; background:var(--wit);
  border:1px solid var(--lijn); border-top:4px solid var(--c,var(--oranje));
  border-radius:16px; padding:18px 18px 16px; min-width:0; scroll-margin-top:100px;
  box-shadow:var(--schaduw); transition:transform .24s var(--veer), box-shadow .24s}
.cat:hover{transform:translateY(-5px) rotate(-1deg); box-shadow:var(--schaduw-op)}
.cat-n{display:block; font-family:var(--display); font-size:1.85rem; font-weight:700;
  line-height:1; color:var(--c,var(--oranje)); font-variant-numeric:tabular-nums}
.cat-naam{display:block; font-weight:700; margin-top:8px; font-size:.98rem}
.cat-sub{display:block; font-size:.79rem; color:var(--zacht)}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.chip{border:2px solid var(--lijn-2); background:var(--wit); color:var(--grijs);
  padding:8px 17px; border-radius:999px; font:inherit; font-family:var(--display);
  font-size:.92rem; font-weight:500; cursor:pointer;
  transition:transform .2s var(--veer), background .18s, color .18s, border-color .18s}
.chip:hover{color:var(--inkt); border-color:var(--c,var(--oranje)); transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--c,var(--oranje)); border-color:var(--c,var(--oranje));
  color:#fff; font-weight:600}

.band-ink{background:var(--pruim); border:0; color:#E8E2EC; position:relative; overflow:hidden}
.band-ink::before{content:''; position:absolute; width:460px; height:400px; top:-160px;
  left:50%; margin-left:-230px; border-radius:50%; background:rgba(248,120,32,.3); filter:blur(70px)}
.band-ink > .wrap{position:relative; z-index:1}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:rgba(232,226,236,.84)}
.close{text-align:center; max-width:56ch; margin:0 auto}
.close .hero-cta{justify-content:center}
.close .price-tag{color:rgba(232,226,236,.84); margin-top:18px}
.close .price-tag b{color:#fff}
.price-tag{font-size:.96rem; color:var(--grijs); margin:16px 0 0}
.price-tag b{font-family:var(--display); font-size:1.18rem; font-weight:700; color:var(--inkt)}

.pricebox{display:grid; grid-template-columns:1.3fr .8fr; gap:0; background:var(--wit);
  border:1px solid var(--lijn); border-radius:24px; overflow:hidden; box-shadow:var(--schaduw-op)}
.pricebox-main{padding:46px}
.pricebox-side{padding:38px 34px; background:var(--room-2); border-left:1px solid var(--lijn)}
.amount{display:flex; align-items:baseline; gap:12px}
.amount .num{font-family:var(--display); font-size:clamp(2.7rem,5.2vw,3.7rem); font-weight:700;
  line-height:1; color:var(--oranje); letter-spacing:-.03em}
.amount .per{font-size:1rem; color:var(--grijs); font-weight:600}
.amount-sub{margin:14px 0 24px; color:var(--grijs); font-size:.98rem; max-width:46ch}

.info-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
  margin-bottom:30px; align-items:start}
.ic{background:var(--room-2); border:1px solid var(--lijn); border-radius:16px; padding:16px 18px;
  min-width:0; transition:transform .22s var(--veer)}
.ic:hover{transform:translateY(-3px)}
.ic .l{font-family:var(--display); font-size:.74rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--zacht); margin-bottom:5px}
.ic .v{font-weight:700; font-size:1rem; overflow-wrap:anywhere}

.factrow{display:grid; gap:4px}
.fact{display:flex; align-items:flex-start; gap:13px; padding:13px 0;
  border-bottom:1px solid var(--lijn)}
.fact:last-child{border-bottom:0}
.fact-ic{flex:0 0 auto; width:38px; height:38px; border-radius:12px; background:var(--oranje-zacht);
  border:1px solid #F7D0AC; display:inline-flex; align-items:center; justify-content:center;
  color:var(--oranje-diep); transition:transform .25s var(--veer)}
.fact:hover .fact-ic{transform:rotate(-8deg) scale(1.07)}
.fact-ic svg{width:18px; height:18px; display:block}
.fact > div{min-width:0}
.fact > div > b{display:block; font-size:.96rem; font-weight:700}
.fact > div > span{display:block; font-size:.88rem; color:var(--grijs); overflow-wrap:anywhere}

.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin:26px 0 34px}
.contact-card{background:var(--room-2); border:1px solid var(--lijn); border-radius:18px;
  padding:26px 26px 20px; min-width:0}
.contact-card h2{font-size:1.16rem !important; margin:0 0 8px !important}
.contact-card p{font-size:.95rem; color:var(--grijs)}
.contact-row{display:flex; align-items:flex-start; gap:13px; padding:12px 0;
  border-top:1px solid var(--lijn)}
.contact-row .ic{flex:0 0 auto; width:36px; height:36px; border-radius:11px;
  background:var(--oranje-zacht); border:1px solid #F7D0AC; display:inline-flex;
  align-items:center; justify-content:center; color:var(--oranje-diep); padding:0}
.contact-row .ic:hover{transform:none}
.contact-row .ic svg{width:17px; height:17px; display:block}
.contact-row > div{min-width:0}
.contact-row > div > .l{font-family:var(--display); font-size:.74rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--zacht)}
.contact-row > div > .v{font-size:.96rem; overflow-wrap:anywhere}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.step{background:var(--wit); border:1px solid var(--lijn); border-radius:18px; padding:28px;
  min-width:0; box-shadow:var(--schaduw); transition:transform .24s var(--veer), box-shadow .24s}
.step:hover{transform:translateY(-4px); box-shadow:var(--schaduw-op)}
.step h3{margin-bottom:8px}
.step p{font-size:.96rem; color:var(--grijs); margin:0}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat b{display:block; font-family:var(--display); font-size:2.1rem; font-weight:700;
  color:var(--oranje)}
.stat span{font-size:.89rem; color:var(--grijs)}

.qa details{border-bottom:1px solid var(--lijn); padding:2px 0}
.qa summary{cursor:pointer; padding:16px 36px 16px 0; font-weight:700; font-size:1.03rem;
  list-style:none; position:relative; transition:color .18s}
.qa summary:hover{color:var(--oranje-diep)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:''; position:absolute; right:8px; top:24px; width:10px; height:10px;
  border-right:2.5px solid var(--oranje); border-bottom:2.5px solid var(--oranje);
  transform:rotate(45deg); transition:transform .3s var(--veer)}
.qa details[open] summary::after{transform:rotate(-135deg); top:28px}
.qa .a{padding:0 40px 18px 0; color:var(--grijs); font-size:.98rem}
.qa .a p:last-child{margin-bottom:0}

/* ============================================================ voet
   Opbouw: brede merkkolom links met contact en een keurmerkje, twee
   linkkolommen rechts, dan een streep met daaronder gecentreerd de
   disclosure, het copyright en de bedrijfsregel. */
.foot{background:var(--pruim); color:rgba(232,226,236,.7); padding:72px 0 40px;
  position:relative; overflow:hidden}
.foot::before{content:''; position:absolute; width:540px; height:460px; bottom:-250px;
  right:-120px; border-radius:50%; background:rgba(248,120,32,.2); filter:blur(76px)}
.foot > .wrap{position:relative; z-index:1}
.foot-grid{display:grid; grid-template-columns:1.55fr .85fr .85fr; gap:48px}
.foot-brand{max-width:46ch}
.foot-brand .logo img{height:38px; width:auto; display:block}
.foot-label{font-family:var(--display); font-size:1.02rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:#fff; margin:26px 0 16px}
.foot-contact{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.foot-rij{display:inline-flex; align-items:center; gap:13px; color:rgba(255,255,255,.92);
  text-decoration:none; font-size:1rem; font-weight:600; transition:color .18s}
.foot-rij:hover{color:var(--oranje)}
.foot-ic{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; color:var(--oranje)}
.foot-ic svg{width:20px; height:20px; display:block}
.foot-badge{display:inline-block; margin:24px 0 0; padding:9px 18px; border-radius:999px;
  background:rgba(248,120,32,.17); border:1px solid rgba(248,120,32,.34);
  color:var(--oranje); font-family:var(--display); font-size:.76rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase}
.foot-tag{font-size:.97rem; margin:22px 0 0; max-width:44ch; line-height:1.75;
  color:rgba(232,226,236,.66)}
.foot-col h4{font-family:var(--display); font-size:1.02rem; font-weight:600; letter-spacing:-.005em;
  text-transform:none; color:#fff; margin:0 0 18px}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:13px}
.foot-col a{color:rgba(232,226,236,.74); text-decoration:none; font-size:1rem;
  transition:color .18s, padding-left .22s var(--veer)}
.foot-col a:hover{color:#fff; padding-left:4px}

.foot-base{margin-top:54px; padding-top:30px; border-top:1px solid rgba(232,226,236,.14);
  text-align:center}
.foot-base p{margin:0 0 12px}
/* .foot-base p is specifieker dan .foot-disc, dus de marge moet hier staan,
   anders wint margin:0 en staat het blok links in plaats van gecentreerd. */
.foot-base p.foot-disc{font-size:.93rem; line-height:1.75; color:rgba(232,226,236,.62);
  max-width:80ch; margin:0 auto 12px}
.foot-disc a{color:rgba(255,255,255,.9); text-decoration:underline; text-underline-offset:3px}
.foot-disc a:hover{color:var(--oranje)}
.foot-copy{font-size:.97rem; font-weight:700; color:#fff; margin-top:22px}
.foot-addr{font-size:.86rem; color:rgba(232,226,236,.52); line-height:1.7}
.foot-addr a{color:rgba(232,226,236,.7); text-decoration:none}
.foot-addr a:hover{color:#fff}
.foot-addr a.foot-tel{color:var(--oranje)}

/* ============================================================ opkomst
   Alleen onderdelen die al buiten beeld staan krijgen dit van het script,
   dus zonder javascript blijft de pagina gewoon zichtbaar. */
.beweegt .opkomst{opacity:0; transform:translateY(22px)}
.beweegt .opkomst.erin{opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s var(--veer)}

/* ============================================================ smal */
@media (max-width:1000px){
  .kop-in{grid-template-columns:1fr; gap:44px}
  .kop-beeld{min-height:430px; max-width:480px}
  .redact-in{grid-template-columns:1fr; gap:34px}
  .redact-beeld{position:static; max-width:420px}
  .lade-in{grid-template-columns:1fr; gap:28px}
  .lade-rail{position:static}
  .rail{flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:6px;
    -webkit-overflow-scrolling:touch}
  .rail-k{width:auto; flex:0 0 auto; border:1.5px solid var(--lijn-2); background:var(--papier)}
  .rail-k:hover{transform:none}
  .rail-voet{display:none}
  .pricebox,.ticket{grid-template-columns:1fr}
  .pricebox-side{border-left:0; border-top:1px solid var(--lijn)}
  .tk-rechts{border-left:0; border-top:3px dashed var(--lijn-2)}
  .tk-rechts::before{top:-14px; left:-14px}
  .tk-rechts::after{bottom:auto; top:-14px; left:auto; right:-14px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:34px}
  .foot-brand{grid-column:1 / -1; max-width:none}
}
@media (max-width:820px){
  .nav{position:absolute; left:0; right:0; top:100%; background:var(--papier);
    border-bottom:1px solid var(--lijn); box-shadow:var(--schaduw-op); display:none; margin:0}
  .top[data-open="true"] .nav{display:block}
  .nav ul{flex-direction:column; align-items:stretch; gap:0; padding:10px 24px 18px}
  .nav a{padding:14px 4px; border-radius:0; border-bottom:1px solid var(--lijn)}
  .nav a::after{display:none}
  .nav-cta-li{margin:14px 0 0}
  .nav .nav-cta{text-align:center; border-bottom:0}
  .burger{display:block; margin-left:0}
  .talen{margin-left:auto}
  .top .bar{gap:10px; min-height:68px}
  .top .logo img{height:30px}
  .belofte ul{grid-template-columns:1fr 1fr}
  .belofte li{padding:22px 20px; border-top:1px solid var(--lijn)}
  .belofte li:first-child,.belofte li:nth-child(2){border-top:0}
  .belofte li:nth-child(odd){border-left:0; padding-left:0}
  .belofte li:nth-child(even){padding-right:0}
  .stappen{grid-template-columns:1fr; gap:26px}
  .stappen::before{display:none}
  .stap{text-align:left; padding-left:66px}
  .stap-n{position:absolute; left:0; top:0; margin:0}
  .stap p{margin-left:0}
  .vragen{grid-template-columns:1fr; gap:24px}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .toc ol{columns:1}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .kop{padding:40px 0 54px}
  .kop-beeld{display:flex; gap:10px; min-height:0; align-items:flex-start}
  .kop-beeld figure{position:static; width:auto; flex:1 1 0; min-width:0;
    --tilt:0deg; padding:7px 7px 0}
  .kop-beeld .stapel-3{display:none}
  .beweegt .kop-beeld figure{animation:none}
  .kop-beeld figcaption{font-size:.7rem; padding:6px 2px 7px}
  .kop-actie .btn{flex:1 1 100%}
  .kop-prijs b{display:block; margin:0 0 2px}
  .kop-prijs span{margin-left:0}
  .section,.redact,.tijdlijn{padding:54px 0}
  .lade{padding:54px 0}
  .marquee{padding:32px 0}
  .mq-spoor img{width:132px; height:84px}
  .doc-card{padding:30px 22px; border-radius:18px}
  .tk-links,.tk-rechts,.pricebox-main,.pricebox-side{padding:30px 24px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px}
  .foot-grid{grid-template-columns:1fr; gap:30px}
  .foot-base{margin-top:38px}
  .foot{padding:50px 0 28px}
  .belofte ul{grid-template-columns:1fr}
  .belofte li{border-left:0; padding:20px 0}
  .belofte li:nth-child(2){border-top:1px solid var(--lijn)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  .opkomst{opacity:1 !important; transform:none !important}
}


/* ============================================================ eilanden
   Elke categorie een eilandje met drie titelbeelden erop. Zelfde onderdeel
   op de startpagina en op de catalogus. */
.eilanden{padding:80px 0; background:var(--room-2); border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn); position:relative; overflow:hidden}
.eilanden::before,.eilanden::after{content:''; position:absolute; border-radius:50%;
  background:rgba(248,120,32,.13); filter:blur(40px); pointer-events:none}
.eilanden::before{width:300px; height:260px; top:-90px; left:-80px}
.eilanden::after{width:340px; height:300px; bottom:-120px; right:-90px;
  background:rgba(255,201,60,.16)}
.eilanden > .wrap{position:relative; z-index:1}
.eilanden-rij{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:start}
.eiland{position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--wit); border:1px solid var(--lijn); border-radius:26px;
  padding:96px 14px 20px; text-align:center; overflow:hidden; min-width:0;
  scroll-margin-top:100px; box-shadow:var(--schaduw);
  transition:transform .28s var(--veer), box-shadow .28s}
.eiland::before{content:''; position:absolute; top:0; left:0; right:0; height:88px;
  background:var(--c,var(--oranje)); opacity:.14}
.eiland::after{content:''; position:absolute; top:74px; left:-10%; right:-10%; height:34px;
  border-radius:50%; background:var(--wit)}
.eiland:hover{transform:translateY(-7px) rotate(-1.2deg); box-shadow:var(--schaduw-op)}
.ei-beeld{position:absolute; top:16px; left:0; right:0; height:62px; display:block}
.ei-beeld img{position:absolute; left:50%; top:0; width:74px; height:47px; object-fit:cover;
  border-radius:9px; border:2.5px solid var(--wit); box-shadow:0 3px 10px rgba(48,40,56,.22);
  transition:transform .38s var(--veer)}
.ei-beeld img:nth-child(1){transform:translateX(-50%) translateX(-22px) rotate(-11deg); z-index:1}
.ei-beeld img:nth-child(2){transform:translateX(-50%) rotate(1deg); z-index:3}
.ei-beeld img:nth-child(3){transform:translateX(-50%) translateX(22px) rotate(11deg); z-index:2}
.eiland:hover .ei-beeld img:nth-child(1){transform:translateX(-50%) translateX(-34px) rotate(-16deg)}
.eiland:hover .ei-beeld img:nth-child(2){transform:translateX(-50%) translateY(-4px) rotate(0deg)}
.eiland:hover .ei-beeld img:nth-child(3){transform:translateX(-50%) translateX(34px) rotate(16deg)}
.ei-n{position:relative; z-index:1; display:block; font-family:var(--display);
  font-size:1.9rem; font-weight:700; line-height:1; color:var(--c,var(--oranje));
  font-variant-numeric:tabular-nums}
.ei-naam{position:relative; z-index:1; display:block; font-weight:700; font-size:.98rem;
  margin-top:7px}
.ei-sub{position:relative; z-index:1; display:block; font-size:.78rem; color:var(--zacht)}

/* ============================================================ cijferband
   Donkere band met een schulprand, zodat hij als een eiland in de zee ligt. */
.cijferband{position:relative; background:var(--pruim); padding:66px 0 62px; overflow:hidden}
.cijferband::before,.cijferband::after{content:''; position:absolute; left:0; right:0;
  height:16px; z-index:2;
  background:radial-gradient(circle at 13px 0, var(--room-2) 13px, transparent 13.5px) repeat-x;
  background-size:26px 16px}
.cijferband::before{top:0}
.cijferband::after{bottom:0; transform:rotate(180deg)}
.confetti{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle, rgba(248,120,32,.9) 2.5px, transparent 3px),
    radial-gradient(circle, rgba(255,201,60,.85) 2px, transparent 2.5px),
    radial-gradient(circle, rgba(244,241,228,.5) 1.8px, transparent 2.3px);
  background-size:150px 120px, 210px 170px, 110px 190px;
  background-position:0 0, 60px 40px, 25px 90px}
.beweegt .confetti{animation:confettidrijf 26s linear infinite}
@keyframes confettidrijf{
  from{background-position:0 0, 60px 40px, 25px 90px}
  to{background-position:150px 120px, 270px 210px, 135px 280px}
}
.cijferband > .wrap{position:relative; z-index:3}
.cijfers{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.cijfer b{display:block; font-family:var(--display); font-size:clamp(2.4rem,4.6vw,3.4rem);
  font-weight:700; line-height:1; color:var(--oranje); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; text-shadow:0 4px 20px rgba(248,120,32,.34)}
.cijfer span{display:block; margin-top:9px; font-size:.93rem; color:rgba(232,226,236,.8)}

/* ============================================================ uitgelicht */
.spotlight{padding:86px 0; background:linear-gradient(180deg,var(--oranje-zacht),var(--room))}
.sp-in{display:grid; grid-template-columns:.95fr 1.05fr; gap:54px; align-items:center}
.sp-beeld{min-width:0; display:flex; justify-content:center}
.sp-kaart{position:relative; display:block; width:100%; max-width:430px; background:var(--pruim);
  border-radius:24px; padding:16px 16px 34px; box-shadow:var(--schaduw-op);
  transform:rotate(-2.5deg); transition:transform .45s var(--veer)}
.sp-kaart::after{content:''; position:absolute; left:50%; bottom:13px; width:64px; height:7px;
  margin-left:-32px; border-radius:4px; background:rgba(244,241,228,.3)}
.sp-kaart:hover{transform:rotate(1.5deg) scale(1.03)}
.sp-kaart img{display:block; width:100%; height:auto; border-radius:14px}
.sp-tekst{min-width:0}
.sp-tekst h2{margin-bottom:18px; max-width:17ch}
.sp-tekst p{color:#4C4253; max-width:58ch; font-size:1.04rem}
.sp-feiten{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.sp-feit{background:var(--wit); border:1px solid var(--lijn); border-radius:16px;
  padding:12px 18px; box-shadow:var(--schaduw)}
.sp-feit span{display:block; font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--zacht)}
.sp-feit b{display:block; font-size:1rem; font-weight:700; margin-top:2px}

/* ============================================================ momenten */
.momenten{padding:84px 0; background:var(--room-2); border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn)}
.momenten-kop{text-align:center; margin-bottom:46px}
.momenten-rij{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.moment{background:var(--wit); border:1px solid var(--lijn); border-radius:24px; padding:30px;
  min-width:0; box-shadow:var(--schaduw);
  transition:transform .26s var(--veer), box-shadow .26s}
.moment:hover{transform:translateY(-5px); box-shadow:var(--schaduw-op)}
.moment h3{margin:20px 0 9px}
.moment p{font-size:.97rem; color:var(--grijs); margin:0}
/* Drie tekeningetjes uit rondjes en balkjes, geen plaatjes van buiten. */
.moment-vorm{position:relative; display:block; width:74px; height:74px; border-radius:22px;
  background:var(--oranje-zacht); border:1px solid #F7D0AC;
  transition:transform .3s var(--veer)}
.moment:hover .moment-vorm{transform:rotate(-7deg) scale(1.06)}
.moment-vorm i{position:absolute; display:block; background:var(--oranje-diep)}
.vorm-tram i:nth-child(1){left:17px; top:19px; width:40px; height:26px; border-radius:9px 9px 4px 4px}
.vorm-tram i:nth-child(2){left:22px; top:47px; width:10px; height:10px; border-radius:50%}
.vorm-tram i:nth-child(3){left:42px; top:47px; width:10px; height:10px; border-radius:50%}
.vorm-wacht i:nth-child(1){left:18px; top:18px; width:38px; height:38px; border-radius:50%;
  background:transparent; border:4px solid var(--oranje-diep)}
.vorm-wacht i:nth-child(2){left:36px; top:26px; width:3.5px; height:13px; border-radius:2px}
.vorm-wacht i:nth-child(3){left:36px; top:36px; width:12px; height:3.5px; border-radius:2px}
.vorm-bank i:nth-child(1){left:16px; top:28px; width:42px; height:18px; border-radius:8px}
.vorm-bank i:nth-child(2){left:13px; top:33px; width:9px; height:18px; border-radius:5px}
.vorm-bank i:nth-child(3){left:52px; top:33px; width:9px; height:18px; border-radius:5px}

/* de schuivende strook krijgt dezelfde schulprand als de cijferband */
/* Let op: background-size moet NA de background-afkorting staan, anders zet de
   afkorting hem terug op auto en zie je maar een schulpje. */
.marquee::before,.marquee::after{content:''; position:absolute; left:0; right:0; height:16px;
  z-index:2}
.marquee::before{top:0;
  background:radial-gradient(circle at 13px 0, var(--room) 13px, transparent 13.5px) repeat-x;
  background-size:26px 16px}
.marquee::after{bottom:0; transform:rotate(180deg);
  background:radial-gradient(circle at 13px 0, var(--room-2) 13px, transparent 13.5px) repeat-x;
  background-size:26px 16px}

@media (max-width:1000px){
  .eilanden-rij{grid-template-columns:repeat(3,1fr)}
  .sp-in{grid-template-columns:1fr; gap:36px}
  .sp-kaart{max-width:380px}
  .momenten-rij{grid-template-columns:1fr; gap:18px}
  .cijfers{grid-template-columns:1fr 1fr; gap:34px 20px}
}
@media (max-width:620px){
  .eilanden,.momenten,.spotlight{padding:54px 0}
  .cijferband{padding:50px 0 46px}
  .eilanden-rij{grid-template-columns:1fr 1fr; gap:12px}
  .eiland{padding:88px 10px 18px; border-radius:22px}
  .ei-beeld img{width:62px; height:40px}
  .ei-beeld img:nth-child(1){transform:translateX(-50%) translateX(-18px) rotate(-11deg)}
  .ei-beeld img:nth-child(3){transform:translateX(-50%) translateX(18px) rotate(11deg)}
  .moment{padding:24px}
}