/* 123gameslux.com - speeleiland bij nacht
   Het cyaan komt uit het neonlogo. De zustersite 123gameslu.com is juist licht
   met datzelfde cyaan, dus deze gaat bewust de andere kant op: diep water,
   eilanden, sterren en neon.
   Baloo 2 voor de koppen, Outfit voor de tekst.
   Let op: nergens .fact span als selector, die wint van .fact-ic. */

:root{
  --zee:#071A2C;
  --zee-2:#0B2438;
  --diep:#040E18;
  --paneel:#0F3050;
  --paneel-2:#15395C;
  --lijn:rgba(120,180,220,.17);
  --lijn-2:rgba(120,180,220,.30);

  --neon:#32E6F0;
  --neon-diep:#14C3CE;
  --koraal:#FF7B5A;
  --goud:#FFC24A;
  --zand:#F5E2BC;

  --tekst:#DDEBF6;
  --grijs:#9BB5CB;
  --zacht:#7791A8;

  --gloed:0 0 0 1px rgba(50,230,240,.22), 0 8px 26px rgba(50,230,240,.22);
  --schaduw:0 2px 6px rgba(2,8,16,.42), 0 18px 40px rgba(2,8,16,.42);
  --schaduw-op:0 4px 12px rgba(2,8,16,.5), 0 30px 64px rgba(2,8,16,.56);
  --wrap:1180px;
  --display:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --sans:'Outfit', -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(--zee); color:var(--tekst); font-family:var(--sans);
  font-size:17px; line-height:1.68; font-weight:300; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--neon)}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.005em;
  line-height:1.16; margin:0; color:#fff; overflow-wrap:break-word; hyphens:manual}
html:lang(de) h1,html:lang(de) h2,html:lang(de) h3{hyphens:auto}
h1{font-size:clamp(2.1rem,4.6vw,3.45rem); font-weight:800; letter-spacing:-.018em}
h2{font-size:clamp(1.6rem,2.9vw,2.3rem)}
h3{font-size:1.17rem; line-height:1.34}
p{margin:0 0 1em}
b,strong{font-weight:600; color:#EAF4FC}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

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

/* ----------------------------------------------------------- sterrenhemel */
.sterren{position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(50,230,240,.75) 1.4px, transparent 1.9px),
    radial-gradient(circle, rgba(255,194,74,.6) 1px, transparent 1.5px);
  background-size:170px 140px, 230px 190px, 130px 210px;
  background-position:0 0, 70px 50px, 30px 110px}
.beweegt .sterren{animation:sterdrijf 40s linear infinite}
.sterren::after{content:''; position:absolute; top:9%; left:-8%; width:130px; height:2px;
  border-radius:2px; opacity:0; rotate:15deg;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95))}
.beweegt .sterren::after{animation:komeet 15s linear infinite 4s}
@keyframes komeet{
  0%,84%{opacity:0; translate:0 0}
  86%{opacity:.95}
  97%{opacity:0; translate:125vw 32vh}
  100%{opacity:0; translate:125vw 32vh}
}
@keyframes sterdrijf{
  from{background-position:0 0, 70px 50px, 30px 110px}
  to{background-position:170px 140px, 300px 240px, 160px 320px}
}

/* --------------------------------------------------------------- kopbalk */
.top{position:sticky; top:0; z-index:40; background:rgba(7,26,44,.82);
  backdrop-filter:saturate(1.4) blur(14px); 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:filter .3s, transform .3s var(--veer)}
.top .logo img{width:auto; height:34px; display:block}
.top .logo:hover{transform:scale(1.04); filter:drop-shadow(0 0 12px rgba(50,230,240,.7))}
.burger{margin-left:auto; width:46px; height:46px; border:1.5px solid var(--lijn-2);
  background:rgba(15,48,80,.6); 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(--neon); border-radius:3px; transition:transform .25s var(--veer)}
.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:500; transition:color .18s}
.nav a::after{content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2.5px;
  background:var(--neon); border-radius:3px; box-shadow:0 0 10px var(--neon);
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--veer)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:#fff; font-weight:600}
.nav-cta-li{margin-left:10px}
.nav .nav-cta{background:var(--neon); color:#04121F; padding:11px 22px; border-radius:999px;
  font-weight:700; box-shadow:0 6px 20px rgba(50,230,240,.35)}
.nav .nav-cta::after{display:none}
.nav .nav-cta:hover{background:#6BF0F8; color:#04121F; transform:translateY(-1px)}

.talen{display:inline-flex; gap:2px; padding:3px; margin-left:6px;
  background:rgba(15,48,80,.75); border:1px 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:#fff}
.talen button[aria-pressed="true"]{background:var(--neon); color:#04121F;
  box-shadow:0 0 14px rgba(50,230,240,.5)}

/* --------------------------------------------------------------- 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(--neon); color:#04121F; text-decoration:none; font-family:var(--display);
  font-weight:700; font-size:1.02rem; border:2px solid var(--neon);
  box-shadow:0 6px 22px rgba(50,230,240,.34);
  transition:transform .22s var(--veer), box-shadow .22s, background .18s}
.btn::before{content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .55s ease}
.btn:hover::before{left:125%}
.btn:hover{background:#6BF0F8; border-color:#6BF0F8; transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(50,230,240,.46)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-lg{padding:16px 34px; font-size:1.08rem}
.btn-ghost{background:transparent; color:var(--tekst); border-color:var(--lijn-2); box-shadow:none}
.btn-ghost::before{display:none}
.btn-ghost:hover{background:rgba(50,230,240,.09); color:var(--neon); border-color:var(--neon);
  box-shadow:none}
.btn-block{width:100%}
.beweegt .kop-actie .btn:not(.btn-ghost){animation:pols 3.6s ease-in-out infinite}
@keyframes pols{
  0%,100%{box-shadow:0 6px 22px rgba(50,230,240,.34)}
  50%{box-shadow:0 8px 32px rgba(50,230,240,.56), 0 0 0 7px rgba(50,230,240,.06)}
}
.hero-cta,.end-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}

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

/* ------------------------------------------------------------ kop: de kaart
   De hele archipel als zeekaart. Elk eiland is een vlek waarvan de grootte
   meeschaalt met het aantal titels. Dit vervangt de drie drijvende kaarten
   die de zustersites hebben. */
.kop{position:relative; padding:64px 0 96px; overflow:hidden;
  background:radial-gradient(1100px 540px at 76% -10%, rgba(50,230,240,.15), transparent 62%),
             radial-gradient(760px 420px at 4% 104%, rgba(255,123,90,.13), transparent 66%)}
.kop-in{position:relative; z-index:2; display:grid; grid-template-columns:.92fr 1.08fr;
  gap:52px; align-items:center}
.kop-tekst{min-width:0}
.kop h1{margin-bottom:20px; max-width:15ch}
.hero-sub{font-size:1.1rem; color:var(--grijs); max-width:46ch; 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(--goud)}
.kop-prijs span{margin-left:7px}

.kaart{position:relative; min-width:0; aspect-ratio:1/.86; border-radius:28px}
.kaart-water{position:absolute; inset:0; border-radius:28px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(50,230,240,.10), transparent 70%),
    linear-gradient(180deg, #0A2438, #071A2C 70%);
  border:1px solid var(--lijn);
  box-shadow:inset 0 0 70px rgba(2,8,16,.7)}
/* diepte­lijnen zoals op een zeekaart */
.beweegt .kaart-water::before{animation:drift 26s linear infinite}
@keyframes drift{from{background-position:0 0, 0 0} to{background-position:46px 46px, 46px 46px}}
.kaart::after{content:''; position:absolute; inset:0; border-radius:28px; pointer-events:none;
  z-index:1; background:linear-gradient(104deg, transparent 38%, rgba(120,230,245,.07) 47%,
  rgba(120,230,245,.10) 50%, transparent 60%); background-size:280% 100%;
  background-position:120% 0}
.beweegt .kaart::after{animation:veeg 11s ease-in-out infinite}
@keyframes veeg{0%{background-position:150% 0} 55%,100%{background-position:-60% 0}}
.kaart-water::before{content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(120,180,220,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,220,.09) 1px, transparent 1px);
  background-size:46px 46px}
.kaart-water::after{content:''; position:absolute; inset:-30%;
  background:repeating-radial-gradient(circle at 62% 28%, transparent 0 34px,
             rgba(50,230,240,.055) 34px 35px); opacity:.85}

.eiland{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; text-decoration:none;
  color:inherit; z-index:2; transition:transform .32s var(--veer)}
.eiland:hover{transform:translate(-50%,-50%) scale(1.09); z-index:5}
.beweegt .ei-vlek{animation:deinen var(--t,6s) ease-in-out infinite var(--vert,0s)}
@keyframes deinen{0%,100%{translate:0 0} 50%{translate:0 -8px}}
.eiland:hover .ei-vlek{animation-play-state:paused}
.ei-vlek{display:block; width:var(--d); height:var(--d);
  border-radius:47% 53% 56% 44% / 52% 45% 55% 48%;
  background:radial-gradient(circle at 34% 30%,
             color-mix(in srgb, var(--c) 92%, #fff 8%), var(--c) 62%,
             color-mix(in srgb, var(--c) 72%, #04121F 28%));
  box-shadow:0 0 0 7px color-mix(in srgb, var(--c) 16%, transparent),
             0 0 0 14px color-mix(in srgb, var(--c) 7%, transparent),
             0 14px 34px rgba(2,8,16,.6);
  transition:box-shadow .3s}
.eiland:hover .ei-vlek{box-shadow:0 0 0 8px color-mix(in srgb, var(--c) 26%, transparent),
             0 0 0 18px color-mix(in srgb, var(--c) 11%, transparent),
             0 18px 40px rgba(2,8,16,.7), 0 0 34px color-mix(in srgb, var(--c) 55%, transparent)}
.ei-n{position:absolute; left:50%; top:calc(var(--d) / 2); transform:translate(-50%,-50%);
  font-family:var(--display); font-weight:800; line-height:1; color:#06131F;
  font-size:max(.8rem, calc(var(--d) / 4.3)); font-variant-numeric:tabular-nums}
.ei-naam{margin-top:9px; font-family:var(--display); font-weight:600; font-size:.83rem;
  color:var(--tekst); white-space:nowrap; text-shadow:0 2px 8px rgba(4,14,24,.9)}
.eiland:hover .ei-naam{color:#fff}

.golf{position:absolute; left:0; right:0; height:46px; z-index:3; pointer-events:none;
  background-repeat:repeat-x; background-size:1200px 46px}
.beweegt .golf-onder{animation:golfschuif 26s linear infinite}
@keyframes golfschuif{from{background-position-x:0} to{background-position-x:1200px}}
.golf-onder{bottom:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 24C150 46 350 4 600 24s450 22 600 0v22H0z' fill='%230B2438'/%3E%3C/svg%3E")}

/* -------------------------------------------------------------- beloften */
.belofte{background:var(--zee-2); border-bottom:1px solid var(--lijn)}
.belofte ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr)}
.belofte li{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;
  color:#fff; margin-bottom:5px}
.belofte span{display:block; font-size:.93rem; color:var(--grijs); line-height:1.6; margin-top:6px}

/* ------------------------------------------------------------- de peiling
   De kerngetallen als een doorlopende zin met grote cijfers erin. */
.peiling{background:var(--diep); border-bottom:1px solid var(--lijn); padding:40px 0}
.peiling-regel{margin:0; text-align:center; font-family:var(--display); font-weight:500;
  font-size:clamp(1.05rem,2.1vw,1.45rem); color:var(--grijs); line-height:1.5}
.pl{display:inline-block; margin:0 .45em; white-space:nowrap}
.pl b{font-weight:800; font-size:1.7em; color:var(--neon); margin-right:.22em;
  font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(50,230,240,.5);
  vertical-align:-.06em}
.pl:nth-child(2) b{color:var(--goud); text-shadow:0 0 22px rgba(255,194,74,.45)}
.pl:nth-child(4) b,.pl:nth-child(5) b{color:var(--koraal);
  text-shadow:0 0 22px rgba(255,123,90,.45)}
.peiling-regel em{font-style:normal; display:block; margin-top:8px; font-size:.78em;
  color:var(--zacht)}

/* ------------------------------------------------- het grootste eiland
   Een brede strook in de kleur van dat eiland, geen kaartje met schaduw. */
.uitgelicht{padding:82px 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--zee), color-mix(in srgb, var(--c) 9%, var(--zee)))}
.uitgelicht::before{content:''; position:absolute; left:-8%; top:-40%; width:46%; height:180%;
  border-radius:50%; background:var(--c); opacity:.10; filter:blur(70px)}
.uitgelicht > .wrap{position:relative; z-index:1}
.ug-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center}
.ug-tekst{min-width:0}
.ug-tekst .eyebrow{color:var(--c)}
.ug-tekst .eyebrow::before{background:var(--c)}
.ug-tekst h2{color:var(--c); margin-bottom:6px}
.ug-n{font-family:var(--display); font-size:1rem; color:var(--zacht); margin:0 0 18px}
.ug-n b{font-size:1.9rem; font-weight:800; color:#fff; margin-right:.3em;
  font-variant-numeric:tabular-nums}
.ug-tekst p{color:var(--grijs); font-size:1.01rem; max-width:46ch}
.ug-link{display:inline-block; margin-top:8px; font-family:var(--display); font-weight:600;
  color:var(--c); text-decoration:none; border-bottom:2px solid transparent;
  transition:border-color .22s, gap .2s}
.ug-link::after{content:'\2192'; margin-left:8px; display:inline-block; transition:transform .25s var(--veer)}
.ug-link:hover{border-color:var(--c)}
.ug-link:hover::after{transform:translateX(5px)}
.ug-beeld{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; min-width:0}
.ug-beeld figure{margin:0; min-width:0}
.ug-beeld img{display:block; width:100%; height:auto; aspect-ratio:440/280; object-fit:cover;
  border-radius:14px; border:1px solid var(--lijn); box-shadow:var(--schaduw);
  transition:transform .35s var(--veer)}
.ug-beeld figure:hover img{transform:translateY(-5px) rotate(-1deg)}
.ug-beeld figcaption{font-family:var(--display); font-size:.82rem; font-weight:500;
  color:var(--zacht); margin-top:8px}

/* ---------------------------------------------------------- de scheepslijst
   Een echte tabel. Dicht en feitelijk; geen van de zustersites heeft er een. */
.scheepslijst{padding:82px 0; background:var(--zee-2); border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn)}
.lijst{width:100%; border-collapse:collapse; font-size:.98rem}
.lijst thead th{font-family:var(--display); font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--zacht); text-align:left;
  padding:0 18px 14px 0; border-bottom:2px solid var(--lijn-2)}
.lijst thead th:first-child{width:22%}
.lijst tbody th{font-family:var(--display); font-weight:600; color:#fff; text-align:left;
  padding:16px 18px 16px 0; border-bottom:1px solid var(--lijn); vertical-align:top}
.lijst tbody td{padding:16px 18px 16px 0; border-bottom:1px solid var(--lijn);
  color:var(--tekst); vertical-align:top}
.lijst tbody td:last-child{color:var(--zacht); font-size:.94rem; padding-right:0}
.lijst tbody tr:last-child th,.lijst tbody tr:last-child td{border-bottom:0}
.lijst tbody tr{transition:background .18s}
.lijst tbody tr:hover{background:rgba(50,230,240,.04)}
.lijst tbody td:first-of-type{position:relative; padding-left:28px}
.lijst tbody td:first-of-type::before{content:''; position:absolute; left:2px; top:22px;
  width:10px; height:6px; border-left:2.2px solid var(--neon); border-bottom:2.2px solid var(--neon);
  transform:rotate(-45deg)}

/* -------------------------------------------------------------- logboek
   Tekst links, het scheepsjournaal rechts: de stappen onder elkaar als
   regels met een volgnummer, niet als drie vakjes naast elkaar. */
.logboek{padding:86px 0; background:var(--zee-2); border-bottom:1px solid var(--lijn)}
.log-in{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:start}
.log-tekst{min-width:0}
.log-tekst h2{margin-bottom:20px; max-width:19ch}
.log-tekst p{font-size:1.04rem; color:var(--grijs); max-width:60ch}
.log-tekst p:first-of-type{font-size:1.15rem; color:var(--tekst)}
.log-voet{font-size:.86rem !important; color:var(--zacht) !important; padding-top:16px;
  border-top:1px solid var(--lijn); margin-bottom:0}
.log-kaart{min-width:0; background:var(--diep); border:1px solid var(--lijn);
  border-radius:20px; padding:30px 32px 26px; box-shadow:var(--schaduw)}
.log-kop{font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--neon); margin:0 0 6px}
.log-regels{list-style:none; margin:0; padding:0}
.log-regel{display:flex; gap:18px; padding:20px 0; border-bottom:1px dashed var(--lijn-2)}
.log-regel:last-child{border-bottom:0}
.log-regel > div{min-width:0}
.log-n{flex:0 0 auto; font-family:var(--display); font-size:1.15rem; font-weight:800;
  color:var(--neon); font-variant-numeric:tabular-nums; padding-top:1px;
  text-shadow:0 0 14px rgba(50,230,240,.5)}
.log-regel h3{font-size:1.04rem; margin-bottom:5px}
.log-regel p{font-size:.94rem; color:var(--grijs); margin:0}
.log-slot{margin:20px 0 0; padding-top:18px; border-top:1px solid var(--lijn);
  font-size:.88rem; color:var(--zacht); line-height:1.65}

/* -------------------------------------------------------------- schappen
   De catalogus als schappen die je opzij schuift, per eiland een schap.
   Geen filterknoppen: het eiland zelf is het filter. */
.schappen{padding:86px 0}
.schappen .sec-head{margin-bottom:40px}
.schap{margin-bottom:44px; scroll-margin-top:100px}
.schap:last-of-type{margin-bottom:0}
.schap-kop{display:flex; align-items:baseline; gap:14px; margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--lijn); position:relative}
.schap-kop::after{content:''; position:absolute; left:0; bottom:-1px; width:70px; height:3px;
  border-radius:3px; background:var(--c); box-shadow:0 0 12px var(--c);
  transform-origin:left; transition:transform .6s var(--veer) .1s}
.beweegt .schap.opkomst .schap-kop::after{transform:scaleX(.08)}
.beweegt .schap.opkomst.erin .schap-kop::after{transform:scaleX(1)}
.schap-kop h3{font-size:1.3rem; color:var(--c)}
.schap-n{font-family:var(--display); font-size:.86rem; font-weight:500; color:var(--zacht);
  margin-left:auto; font-variant-numeric:tabular-nums}
.schap-rij{display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--lijn-2) transparent}
.schap-rij::-webkit-scrollbar{height:8px}
.schap-rij::-webkit-scrollbar-thumb{background:var(--lijn-2); border-radius:4px}
.schap-rij::-webkit-scrollbar-track{background:transparent}

/* tegel: naam over het beeld, niet eronder */
.tile{position:relative; flex:0 0 auto; width:216px; scroll-snap-align:start; display:block;
  text-decoration:none; color:inherit; border-radius:14px; overflow:hidden;
  border:1px solid var(--lijn); box-shadow:var(--schaduw);
  transition:transform .26s var(--veer), box-shadow .26s, border-color .2s}
.tile:hover{transform:translateY(-5px); border-color:var(--c);
  box-shadow:var(--schaduw-op), 0 0 20px -6px var(--c)}
.tile-art{display:block; position:relative; overflow:hidden; background:var(--zee-2)}
.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.06)}
.tile-art::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(4,14,24,.88))}
.tile-naam{position:absolute; left:12px; right:12px; bottom:10px; z-index:1; display:block;
  font-family:var(--display); font-weight:600; font-size:.9rem; line-height:1.25; color:#fff;
  text-shadow:0 2px 8px rgba(4,14,24,.9)}
.schap-meer{flex:0 0 auto; width:150px; scroll-snap-align:start; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border-radius:14px; border:1px dashed var(--lijn-2); text-decoration:none;
  color:var(--grijs); font-size:.86rem; text-align:center; padding:12px;
  transition:border-color .2s, color .2s, background .2s}
.schap-meer span{font-family:var(--display); font-size:1.5rem; font-weight:800; color:var(--c)}
.schap-meer:hover{border-color:var(--c); color:#fff; background:rgba(50,230,240,.06)}

/* balk met eilanden bovenaan de catalogus */
.eilandbalk{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px; padding-bottom:22px;
  border-bottom:1px solid var(--lijn)}
.eilandbalk a{display:inline-flex; align-items:center; gap:8px; padding:8px 15px;
  border-radius:999px; border:1px solid var(--lijn-2); text-decoration:none;
  color:var(--grijs); font-family:var(--display); font-size:.9rem; font-weight:500;
  transition:border-color .2s, color .2s, transform .2s var(--veer)}
.eilandbalk a b{font-size:.8rem; color:var(--zacht); font-variant-numeric:tabular-nums}
.eilandbalk a:hover{border-color:var(--c); color:#fff; transform:translateY(-2px)}
.eilandbalk a:hover b{color:var(--c)}

/* ----------------------------------------------------------- vaarschema
   Het aanbod als vertrekbord: label links, waarde rechts, regel na regel. */
.vaarschema{padding:86px 0; background:var(--zee-2); border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn)}
.vs-in{display:grid; grid-template-columns:.86fr 1.14fr; gap:52px; align-items:start}
.vs-bord{background:var(--diep); border:1px solid var(--lijn-2); border-radius:20px;
  padding:28px 30px 24px; box-shadow:var(--schaduw-op); min-width:0}
.vs-kop{font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--goud); margin:0 0 14px}
.bord-regel{display:flex; align-items:baseline; gap:12px; padding:13px 0;
  border-bottom:1px dashed var(--lijn); font-size:.94rem}
.bord-regel:last-child{border-bottom:0}
.bord-regel span{color:var(--zacht); flex:0 0 auto}
.bord-regel b{margin-left:auto; text-align:right; font-family:var(--display); font-weight:600;
  color:#fff}
.bord-regel:first-of-type b{color:var(--goud); font-size:1.24rem;
  text-shadow:0 0 22px rgba(255,194,74,.45)}
.vs-tekst{min-width:0}
.vs-tekst h2{margin-bottom:22px; max-width:20ch}
.lines{list-style:none; margin:0; padding:0}
.lines li{position:relative; padding:9px 0 9px 32px; font-size:.99rem; color:var(--tekst);
  border-bottom:1px solid var(--lijn)}
.lines li:last-child{border-bottom:0}
.lines li::before{content:''; position:absolute; left:4px; top:17px; width:10px; height:6px;
  border-left:2.4px solid var(--neon); border-bottom:2.4px solid var(--neon);
  transform:rotate(-45deg)}
.fine{font-size:.84rem; color:var(--zacht); line-height:1.65; margin:20px 0 0}
.section{padding:84px 0}
.band{background:var(--zee); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn)}

/* ---------------------------------------------------------------- vragen */
.vragen-kop{margin-bottom:38px}
.vragen{display:grid; grid-template-columns:repeat(2,1fr); gap:0 46px}
.vr{min-width:0; padding:22px 0; border-top:1px solid var(--lijn)}
.vr h3{margin-bottom:7px}
.vr p{font-size:.97rem; color:var(--grijs); margin:0}

/* ------------------------------------------------------------ paginakop */
.page-hero{padding:60px 0 50px; border-bottom:1px solid var(--lijn); position:relative;
  overflow:hidden;
  background:radial-gradient(760px 340px at 82% -30%, rgba(50,230,240,.16), transparent 64%)}
.page-hero > .wrap{position:relative; z-index:1}
.back{display:inline-block; font-size:.9rem; font-weight:600; color:var(--zacht);
  text-decoration:none; margin-bottom:18px; transition:color .2s}
.back::before{content:'\2190'; margin-right:7px; display:inline-block; transition:transform .25s var(--veer)}
.back:hover{color:var(--neon)}
.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:.84rem; color:var(--zacht); margin:16px 0 0}

/* ------------------------------------------------------------ documenten */
.doc{padding:58px 0 84px}
.doc-card{background:var(--zee-2); 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.48rem; margin:40px 0 14px; scroll-margin-top:100px}
.doc-card h2:first-child{margin-top:0}
.doc-card p{color:var(--grijs)}
.doc-card ul,.doc-card ol{padding-left:22px; color:var(--grijs)}
.doc-card li{margin-bottom:8px}
.doc-card li::marker{color:var(--neon)}
.doc-card code{background:var(--paneel); padding:2px 8px; border-radius:6px; font-size:.88em;
  border:1px solid var(--lijn); color:var(--zand)}
.doc-card hr{border:0; border-top:1px solid var(--lijn); margin:36px 0}
.toc{background:var(--paneel); border:1px solid var(--lijn); border-radius:18px;
  padding:26px 30px; margin-bottom:34px}
.toc h2{font-family:var(--display) !important; font-size:.78rem !important; font-weight:600;
  letter-spacing:.14em; 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(--neon); text-decoration:underline}
.note{background:rgba(50,230,240,.09); border:1px solid rgba(50,230,240,.26);
  border-left:4px solid var(--neon); border-radius:16px; padding:18px 22px; margin:26px 0;
  font-size:.96rem; color:var(--tekst)}
.note p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- kleine delen */
.sec-head{margin-bottom:30px}
.sec-head.center{text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{color:var(--grijs); margin:12px 0 0; max-width:58ch}
.sec-head.center p{margin-left:auto; margin-right:auto}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.chip{border:1.5px solid var(--lijn-2); background:transparent; 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:#fff; border-color:var(--c,var(--neon)); transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--c,var(--neon)); border-color:var(--c,var(--neon));
  color:#04121F; font-weight:600}

.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(--goud)}

.pricebox{display:grid; grid-template-columns:1.3fr .8fr;
  background:linear-gradient(180deg,var(--paneel),var(--zee-2)); border:1px solid var(--lijn-2);
  border-radius:26px; overflow:hidden; box-shadow:var(--schaduw-op)}
.pricebox-main{padding:46px}
.pricebox-side{padding:38px 34px; background:rgba(4,14,24,.45); 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:800;
  line-height:1; color:var(--goud); letter-spacing:-.02em; text-shadow:0 0 30px rgba(255,194,74,.4)}
.amount .per{font-size:1rem; color:var(--grijs); font-weight:500}
.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(--paneel); 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:.75rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--zacht); margin-bottom:5px}
.ic .v{font-weight:600; color:#fff; 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:rgba(50,230,240,.12); border:1px solid rgba(50,230,240,.3);
  display:inline-flex; align-items:center; justify-content:center; color:var(--neon);
  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:600; color:#fff}
.fact > div > span{display:block; font-size:.89rem; 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(--paneel); border:1px solid var(--lijn); border-radius:18px;
  padding:26px 26px 20px; min-width:0}
.contact-card h2{font-size:1.17rem !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:rgba(50,230,240,.12); border:1px solid rgba(50,230,240,.3); display:inline-flex;
  align-items:center; justify-content:center; color:var(--neon); 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:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--zacht)}
.contact-row > div > .v{font-size:.96rem; overflow-wrap:anywhere; color:var(--tekst)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.step{background:var(--paneel); border:1px solid var(--lijn); border-radius:18px; padding:28px;
  min-width:0; box-shadow:var(--schaduw); transition:transform .24s var(--veer)}
.step:hover{transform:translateY(-4px)}
.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:800; color:var(--neon)}
.stat span{font-size:.9rem; 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:600; color:#fff;
  font-size:1.03rem; list-style:none; position:relative; transition:color .18s}
.qa summary:hover{color:var(--neon)}
.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(--neon); border-bottom:2.5px solid var(--neon);
  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
   Vier kolommen: merk, Explore, Legal, Support. Kopjes in kleine kapitalen,
   links in gewone grootte. Onder de streep een links uitgelijnde alinea met
   de entiteit, de leeftijdsgrens en de merkenclausule. */
.foot{background:var(--diep); color:var(--grijs); padding:78px 0 44px; position:relative;
  border-top:1px solid var(--lijn)}
.foot-grid{display:grid; grid-template-columns:1.6fr .85fr .85fr .95fr; gap:40px}
.foot-brand{max-width:42ch}
.foot-brand .logo img{height:40px; width:auto; display:block}
.foot-label{font-family:var(--display); font-size:.82rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grijs); margin:26px 0 18px}
.foot-contact{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.foot-rij{display:inline-flex; align-items:center; gap:13px; color:var(--tekst);
  text-decoration:none; font-size:1.02rem; font-weight:400; transition:color .18s}
.foot-rij:hover{color:var(--neon)}
.foot-ic{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--neon)}
.foot-ic svg{width:19px; height:19px; display:block}
.foot-tag{font-size:1rem; margin:24px 0 0; max-width:38ch; line-height:1.8; color:var(--zacht)}

.foot-col h4{font-family:var(--display); font-size:.82rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--zacht); margin:0 0 22px}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:16px}
.foot-col a{color:var(--tekst); text-decoration:none; font-size:1.02rem; font-weight:400;
  transition:color .18s, padding-left .22s var(--veer)}
.foot-col a:hover{color:var(--neon); padding-left:4px}

.foot-base{margin-top:58px; padding-top:30px; border-top:1px solid var(--lijn)}
.foot-legal{font-size:.93rem; line-height:1.85; color:var(--zacht); margin:0; max-width:none}
.foot-legal b{color:var(--tekst); font-weight:600}
.foot-legal a{color:var(--grijs); text-decoration:underline; text-underline-offset:3px}
.foot-legal a:hover{color:var(--neon)}
/* terugval als een site nog de losse regels gebruikt in plaats van FOOT_LEGAL */
.foot-base p.foot-disc{font-size:.93rem; line-height:1.8; color:var(--zacht); margin:0 0 12px}
.foot-copy{font-size:.97rem; font-weight:600; color:#fff; margin:18px 0 8px}
.foot-addr{font-size:.87rem; color:var(--zacht); line-height:1.75}
.foot-addr a{color:var(--grijs); text-decoration:none}
.foot-addr a.foot-tel{color:var(--neon)}

/* --------------------------------------------------------------- opkomst */
.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:42px}
  .kaart{max-width:540px; margin:0 auto; width:100%}
  .log-in{grid-template-columns:1fr; gap:36px}
  .ug-in{grid-template-columns:1fr; gap:34px}
  .vs-in{grid-template-columns:1fr; gap:36px}
  .vragen{grid-template-columns:1fr}
  .pricebox{grid-template-columns:1fr}
  .pricebox-side{border-left:0; border-top:1px solid var(--lijn)}
  .foot-grid{grid-template-columns:1fr 1fr; gap:38px}
  .foot-brand{grid-column:1 / -1; max-width:none}
}
@media (max-width:820px){
  .nav{position:absolute; left:0; right:0; top:100%; background:var(--zee-2);
    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:28px}
  .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}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .toc ol{columns:1}
}
/* Op een telefoon is een kaart onleesbaar; de eilanden worden dan chips in
   hetzelfde waterpaneel, met de vlek als stip ervoor. */
@media (max-width:700px){
  .kaart{aspect-ratio:auto; display:flex; flex-wrap:wrap; justify-content:center;
    gap:9px; padding:22px 16px; max-width:none}
  .eiland{position:static; transform:none; flex-direction:row; align-items:center; gap:9px;
    background:rgba(15,48,80,.62); border:1px solid var(--lijn); border-radius:999px;
    padding:7px 14px 7px 8px}
  .eiland:hover{transform:translateY(-2px)}
  .kaart .ei-vlek{width:24px; height:24px; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent)}
  .kaart .ei-n{position:static; transform:none; font-size:.8rem; color:var(--zacht);
    order:3; text-shadow:none}
  .kaart .ei-naam{margin-top:0; order:2; font-size:.88rem}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .kop{padding:42px 0 72px}
  .logboek,.schappen,.vaarschema,.section,.uitgelicht,.scheepslijst{padding:58px 0}
  .peiling{padding:30px 0}
  .ug-beeld{grid-template-columns:1fr 1fr; gap:10px}
  /* de tabel wordt op een telefoon twee kolommen; de derde is toelichting */
  .lijst thead th:last-child,.lijst tbody td:last-child{display:none}
  .lijst thead th:first-child{width:38%}
  .lijst{font-size:.92rem}
  .log-kaart{padding:24px 22px 20px}
  .vs-bord{padding:24px 22px 20px}
  .tile{width:172px}
  .schap{margin-bottom:34px}
  .schap-kop h3{font-size:1.15rem}
  .doc-card{padding:30px 22px; border-radius:18px}
  .pricebox-main,.pricebox-side{padding:30px 24px}
  .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)}
  .foot-grid{grid-template-columns:1fr; gap:30px}
  .foot{padding:52px 0 28px}
  .foot-base{margin-top:38px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  .opkomst{opacity:1 !important; transform:none !important}
}