/* Shape Sportcentrum · conceptontwerp NorthByte, oktober 2026
   Kleuren uit het logo (oranje #E9820C, bordeaux #77092E) en het gebouw (antraciet gevel, oranje entree).
   Saira (koppen, variabel in breedte en gewicht) en Barlow (tekst), lokaal. */

@font-face { font-family: "Saira"; src: url("/fonts/saira-var.woff2") format("woff2"); font-weight: 500 900; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --oranje: #E9820C;
  --oranje-kop: #D77100;     /* oranje voor grote koppen op licht (3:1) */
  --oranje-tekst: #A85800;   /* oranje voor kleine tekst op licht (4,5:1) */
  --oranje-licht: #FDF0E1;
  --bordeaux: #77092E;
  --bordeaux-licht: #F7E7EC;
  --water: #0E9CB0;
  --water-tekst: #0A7383;
  --water-donker: #0B3F48;
  --water-licht: #E3F4F6;
  --groen: #2F8A5B;
  --groen-tekst: #23704A;
  --groen-licht: #E5F2EA;
  --nacht: #16181B;
  --antraciet: #2A2E33;
  --tekst: #1B1D20;
  --zacht: #5A5F66;
  --lijn: #E6E1D8;
  --licht: #F6F4F0;
  --wit: #fff;
  --r: 22px;
  --r-s: 14px;
  --kop-h: 76px;
  --schaduw: 0 1px 2px rgba(22, 24, 27, .06), 0 12px 32px -12px rgba(22, 24, 27, .18);
  --kop-font: "Saira", "Arial Narrow", system-ui, sans-serif;
  --tekst-font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* wereldkleuren */
.w-oranje { --w: var(--oranje); --w-tekst: var(--oranje-tekst); --w-licht: var(--oranje-licht); --w-op: var(--nacht); }
.w-bordeaux { --w: var(--bordeaux); --w-tekst: var(--bordeaux); --w-licht: var(--bordeaux-licht); --w-op: #fff; }
.w-water { --w: var(--water); --w-tekst: var(--water-tekst); --w-licht: var(--water-licht); --w-op: #fff; }
.w-zwart { --w: var(--nacht); --w-tekst: var(--nacht); --w-licht: #ECEAE6; --w-op: #fff; }
.w-groen { --w: var(--groen); --w-tekst: var(--groen-tekst); --w-licht: var(--groen-licht); --w-op: #fff; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 16px); }
body { margin: 0; font-family: var(--tekst-font); font-size: 17px; line-height: 1.6; color: var(--tekst); background: var(--wit); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--kop-font); font-stretch: 88%; font-weight: 800; line-height: 1.04; letter-spacing: -.012em; margin: 0 0 .45em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--oranje-kop); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--nacht); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } body { font-size: 16.5px; } }

/* ------------------------------------------------ labels en knoppen */
.label { font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--oranje-tekst); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 26px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 6c3-4 6-4 8 0s5 4 8 0 5-4 8-1' fill='none' stroke='%23E9820C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.label[class*=" w-"] { color: var(--w-tekst); }
.label-licht { color: var(--oranje); }
.label-zwart { color: var(--nacht); }
.label-zwart::before { filter: brightness(0); }
.mini-label { display: inline-block; font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--w-tekst, var(--zacht)); }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: var(--r-s); border: 2px solid transparent; font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 16.5px; line-height: 1.15; text-decoration: none; transition: transform .2s, background-color .2s, border-color .2s, color .2s; }
.knop svg { width: 20px; height: 20px; flex: none; }
.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }
.knop-oranje { background: var(--oranje); color: var(--nacht); }
.knop-oranje:hover { background: #F5932A; }
.knop-zwart { background: var(--nacht); color: #fff; }
.knop-zwart:hover { background: #2c3036; }
.knop-wit { background: #fff; color: var(--nacht); }
.knop-lijn { border-color: rgba(255, 255, 255, .38); color: #fff; }
.knop-lijn:hover { border-color: #fff; }
.knop-lijn-zwart { border-color: var(--nacht); color: var(--nacht); background: transparent; }
.knop-lijn-zwart:hover { background: var(--nacht); color: #fff; }
.knop-s { min-height: 44px; padding: 8px 16px; font-size: 15.5px; }
.knop-vol { width: 100%; }
.tekstlink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; color: var(--tekst); text-decoration: none; border-bottom: 2px solid var(--oranje); padding-bottom: 2px; }
.tekstlink svg { width: 18px; height: 18px; transition: transform .2s; }
.tekstlink:hover svg { transform: translateX(4px); }

/* ------------------------------------------------ topbalk en kop */
.topbalk { background: var(--nacht); color: #C9CDD2; font-size: 13.5px; }
.topbalk .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbalk a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbalk a:hover { color: #fff; }
.topbalk svg { width: 15px; height: 15px; }
.topbalk-rechts { display: flex; gap: 22px; }
.topbalk-leden { color: var(--oranje) !important; font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 9px; }
.stip { width: 9px; height: 9px; border-radius: 50%; background: #8A9097; flex: none; position: relative; }
.is-open .stip, .stip.is-open { background: #3DD68C; box-shadow: 0 0 0 0 rgba(61, 214, 140, .6); animation: pols 2.2s infinite; }
.is-dicht .stip, .stip.is-dicht { background: #F0646C; }
@keyframes pols { 0% { box-shadow: 0 0 0 0 rgba(61, 214, 140, .55); } 70% { box-shadow: 0 0 0 8px rgba(61, 214, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); } }
@media (max-width: 860px) { .topbalk-rechts a:not(.topbalk-leden) { display: none; } }

.kop { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--lijn); }
@supports (backdrop-filter: blur(8px)) { .kop { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(12px); } }
.kop-binnen { display: flex; align-items: center; gap: 28px; height: var(--kop-h); }
.logo { flex: none; display: block; }
.logo-svg { height: 50px; width: auto; }
.hoofdnav { margin-left: auto; }
.hoofdnav ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.hoofdnav a, .mega-knop { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; font-family: var(--kop-font); font-stretch: 95%; font-weight: 700; font-size: 16.5px; text-decoration: none; color: var(--tekst); background: none; border: 0; position: relative; }
.mega-knop svg { width: 16px; height: 16px; transition: transform .2s; }
.hoofdnav a::after, .mega-knop::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--oranje); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.hoofdnav a:hover::after, .hoofdnav a[aria-current]::after, .heeft-mega[data-actief] .mega-knop::after, .mega-knop[aria-expanded="true"]::after { transform: scaleX(1); }
.mega-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.kop-acties { display: flex; align-items: center; gap: 10px; }
.menuknop { display: none; width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--lijn); background: #fff; position: relative; }
.menuknop span, .menuknop span::before, .menuknop span::after { position: absolute; left: 12px; width: 20px; height: 2.5px; border-radius: 2px; background: var(--nacht); transition: transform .25s, opacity .2s; }
.menuknop span { top: 21.5px; }
.menuknop span::before { content: ""; left: 0; top: -7px; }
.menuknop span::after { content: ""; left: 0; top: 7px; }
.menuknop[aria-expanded="true"] span { background: transparent; }
.menuknop[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menuknop[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* mega-menu */
.heeft-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--lijn); box-shadow: 0 30px 60px -30px rgba(22, 24, 27, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.mega.open { opacity: 1; visibility: visible; transform: none; }
.mega-binnen { max-width: 1240px; margin: 0 auto; padding: 28px 24px 34px; display: grid; grid-template-columns: repeat(5, 1fr) 1.3fr; gap: 28px; }
.mega-kop { display: flex !important; align-items: center; gap: 6px; padding: 0 0 10px !important; margin-bottom: 8px; border-bottom: 3px solid var(--w); border-radius: 0 !important; font-size: 18px !important; }
.mega-kop::after { display: none; }
.mega-kop svg { width: 16px; height: 16px; color: var(--w-tekst); }
.mega-kol ul { list-style: none; padding: 0; margin: 0; display: block; }
.mega-kol li a { display: block; padding: 5px 0; font-family: var(--tekst-font); font-weight: 400; font-size: 15.5px; color: var(--zacht); }
.mega-kol li a::after { display: none; }
.mega-kol li a:hover { color: var(--tekst); text-decoration: underline; text-decoration-color: var(--w); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.mega-uitgelicht { background: var(--nacht); color: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.mega-uitgelicht img { height: 120px; width: 100%; object-fit: cover; }
.mega-uitgelicht div { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.mega-uitgelicht strong { font-family: var(--kop-font); font-size: 19px; }
.mega-uitgelicht span { color: #C9CDD2; font-size: 15px; }
.mega-uitgelicht a { color: var(--oranje) !important; padding: 6px 0 0 !important; font-size: 15.5px !important; }
.mega-uitgelicht a::after { display: none; }
.mega-uitgelicht a svg { width: 16px; height: 16px; }

@media (max-width: 1080px) {
  .hoofdnav { display: none; }
  .menuknop { display: block; }
  .kop-acties { margin-left: auto; }
  .logo-svg { height: 44px; }
  :root { --kop-h: 68px; }
}
@media (max-width: 520px) { .kop-cta { display: none; } .logo-svg { height: 40px; } }

/* mobiel menu */
.mobielmenu { position: fixed; z-index: 49; left: 0; right: 0; top: var(--kop-top, 108px); bottom: 0; background: #fff; overflow-y: auto; padding: 12px 20px 120px; overscroll-behavior: contain; }
.mobielmenu nav { display: flex; flex-direction: column; }
.mob-hoofd, .mob-groep summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; border-bottom: 1px solid var(--lijn); font-family: var(--kop-font); font-stretch: 92%; font-weight: 800; font-size: 23px; text-decoration: none; list-style: none; cursor: pointer; }
.mob-groep summary::-webkit-details-marker { display: none; }
.mob-groep summary { position: relative; padding-left: 18px; }
.mob-groep summary::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; border-radius: 3px; background: var(--w); transform: translateY(-50%); }
.mob-groep summary svg { width: 22px; height: 22px; transition: transform .2s; }
.mob-groep[open] summary svg { transform: rotate(180deg); }
.mob-groep div { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 10px 4px 16px; border-bottom: 1px solid var(--lijn); }
.mob-groep div a { padding: 8px 0; text-decoration: none; color: var(--zacht); font-size: 16.5px; }
.mob-alles { grid-column: 1 / -1; color: var(--w-tekst) !important; font-weight: 600; }
.mob-knoppen { display: grid; gap: 10px; margin: 24px 0 18px; }
.mob-knoppen .knop-lijn { border-color: var(--nacht); color: var(--nacht); }
.mob-info { color: var(--zacht); font-size: 15px; }
body.menu-open { overflow: hidden; }
body.menu-open .actiebalk { display: none; }

/* ------------------------------------------------ held (home) */
.held { position: relative; background: var(--nacht); color: #fff; overflow: hidden; padding-top: 64px; isolation: isolate; }
.held::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 0% 100%, rgba(233, 130, 12, .22), transparent 70%), radial-gradient(50% 55% at 100% 0%, rgba(119, 9, 46, .55), transparent 70%); }
.held-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.held-tekst { padding-bottom: 84px; }
@media (min-width: 981px) { .held-tekst { align-self: center; padding: 0 0 40px; } }
/* "Ga voor fit." altijd op één regel: de kop is 4,71 em breed, de grootte volgt de beschikbare breedte */
.held-titel { font-size: min(118px, calc((min(100vw, 1240px) - 96px) / 9.7)); font-stretch: 78%; font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.02em; margin: 6px 0 34px; white-space: nowrap; }
.ht-regel { display: inline; }
.held-titel em { color: var(--oranje); }
.golf-onder { position: relative; display: inline-block; padding-bottom: .06em; }
.golf-onder::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10c10-9 20-9 29 0s19 9 29 0 19-9 29 0 19 9 29 0' fill='none' stroke='%23E9820C' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; }
.held .lead { font-size: clamp(18px, 1.6vw, 21px); color: #D6D9DD; max-width: 500px; }
.held .knoppen { margin: 28px 0 30px; }

.nu-kaart { position: absolute; z-index: 3; left: -44px; bottom: 34px; width: min(400px, 92%); border: 1px solid rgba(255, 255, 255, .14); background: rgba(22, 24, 27, .9); border-radius: var(--r); padding: 16px 18px 8px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
@supports (backdrop-filter: blur(10px)) { .nu-kaart { background: rgba(22, 24, 27, .72); backdrop-filter: blur(14px) saturate(1.3); } }
.nu-kop { display: flex; align-items: center; gap: 10px; font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.nu-lijst { list-style: none; margin: 0; padding: 0; }
.nu-lijst li { border-top: 1px solid rgba(255, 255, 255, .09); }
.nu-lijst li:first-child { border-top: 0; }
.nu-lijst a { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; text-decoration: none; color: #E8EAEC; font-size: 15.5px; }
.nu-lijst a:hover .nu-naam { color: #fff; text-decoration: underline; text-decoration-color: var(--oranje); text-underline-offset: 3px; }
.nu-lijst svg { width: 16px; height: 16px; color: var(--oranje); }
.nu-tijd { font-family: var(--kop-font); font-stretch: 95%; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.nu-naam { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.nu-naam i { width: 8px; height: 8px; border-radius: 3px; background: var(--w); flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.nu-badge { font-family: var(--kop-font); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: #3DD68C; color: #06291A; border-radius: 6px; padding: 2px 7px; }
.nu-lijst .nu-meer a { grid-template-columns: 1fr auto; color: var(--oranje); font-family: var(--kop-font); font-weight: 700; }

.held-beeld { position: relative; align-self: end; padding-right: 64px; margin-top: 20px; }
.portaal { position: relative; border: 20px solid var(--oranje); border-bottom: 0; border-radius: 30px 30px 0 0; padding: 0; overflow: hidden; background: var(--antraciet); }
.portaal img { width: 100%; height: 100%; object-fit: cover; }
.portaal-held { height: clamp(480px, 47vw, 660px); }
.held-fotos { position: absolute; inset: 0; }
.hf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hf0 { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .held-fotos.draait .hf { animation: hf 24s infinite; }
  .held-fotos.draait .hf0 { animation-delay: -1s; }
  .held-fotos.draait .hf1 { animation-delay: 5s; }
  .held-fotos.draait .hf2 { animation-delay: 11s; }
  .held-fotos.draait .hf3 { animation-delay: 17s; }
}
@keyframes hf { 0% { opacity: 0; transform: scale(1.08); } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.gevel { position: absolute; right: 0; top: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--kop-font); font-stretch: 100%; font-weight: 900; font-size: clamp(38px, 4.4vw, 62px); line-height: .98; color: transparent; -webkit-text-stroke: 2px var(--oranje); }
.badge-32 { position: absolute; z-index: 2; left: -34px; top: 54px; background: #fff; color: var(--water-tekst); border-radius: 22px; padding: 14px 18px 12px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); }
.badge-32 strong { font-family: var(--kop-font); font-stretch: 85%; font-weight: 900; font-size: 46px; line-height: .9; }
.badge-32 span { font-family: var(--kop-font); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst); }

.ticker { background: var(--oranje); color: var(--nacht); overflow: hidden; padding: 15px 0; border-top: 3px solid var(--nacht); }
.ticker-baan { display: flex; width: max-content; }
.ticker span { font-family: var(--kop-font); font-stretch: 85%; font-weight: 800; font-size: 23px; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; display: inline-flex; align-items: center; }
.ticker span::after { content: ""; display: inline-block; width: 30px; height: 12px; margin: 0 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 6c3-4 6-4 8 0s5 4 8 0 5-4 8-1' fill='none' stroke='%2316181B' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; }
@media (prefers-reduced-motion: no-preference) { .ticker-baan { animation: ticker 48s linear infinite; } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 980px) {
  .held { padding-top: 40px; }
  .held-grid { grid-template-columns: 1fr; gap: 8px; }
  .held-tekst { padding-bottom: 28px; }
  .held-beeld { padding-right: 52px; margin-left: 30px; }
  .portaal-held { height: 400px; }
  .badge-32 { left: -30px; top: 30px; }
  .nu-kaart { position: relative; left: auto; bottom: auto; width: auto; margin: -70px -40px 28px -18px; }
  .badge-32 strong { font-size: 36px; }
}
@media (max-width: 980px) { .held-titel { font-size: min(150px, calc((100vw - 56px) / 4.85)); } }
@media (max-width: 640px) { .held-titel { font-size: calc((100vw - 44px) / 4.85); margin-bottom: 26px; } }
@media (max-width: 520px) {
  .portaal { border-width: 14px; border-radius: 24px 24px 0 0; }
  .portaal-held { height: 300px; }
  .held-beeld { padding-right: 40px; margin-left: 22px; }
  .gevel { -webkit-text-stroke-width: 1.5px; font-size: 34px; }
  .nu-lijst a { grid-template-columns: 82px 1fr auto; font-size: 15px; }
}

/* ------------------------------------------------ cijfers */
.cijfers { border-bottom: 1px solid var(--lijn); }
.cijfers-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cijfer { padding: 34px 24px; border-left: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 4px; }
.cijfer:first-child { border-left: 0; padding-left: 0; }
.cijfer strong { font-family: var(--kop-font); font-stretch: 80%; font-weight: 900; font-size: clamp(48px, 5.4vw, 74px); line-height: .9; color: var(--nacht); }
.cijfer:nth-child(2) strong { color: var(--water-tekst); }
.cijfer:nth-child(3) strong { color: var(--oranje-kop); }
.cijfer:nth-child(4) strong { color: var(--bordeaux); }
.cijfer span { color: var(--zacht); font-size: 15.5px; }
@media (max-width: 760px) { .cijfers-grid { grid-template-columns: 1fr 1fr; } .cijfer { padding: 22px 16px; } .cijfer:nth-child(3) { border-left: 0; padding-left: 0; } .cijfer:nth-child(n+3) { border-top: 1px solid var(--lijn); } }

/* ------------------------------------------------ secties */
.sectie { padding: 100px 0; }
.sectie-kort { padding: 72px 0; }
.sectie-licht { background: var(--licht); }
.sectie-donker { background: var(--nacht); color: #fff; }
.sectie-donker .sectie-kop p { color: #B9BEC4; }
.sectie-kop { max-width: 760px; margin-bottom: 44px; }
.sectie-kop h2 { font-size: clamp(38px, 5vw, 64px); }
.sectie-kop p { font-size: 19px; color: var(--zacht); margin: 0; }
.sectie-kop p.label { font-size: 13px; color: var(--oranje-tekst); margin: 0 0 14px; }
.vandaag-sectie .sectie-kop p.label, .sectie-donker .sectie-kop p.label { color: var(--oranje); }
.sectie-donker .sectie-kop h2 em { color: var(--oranje); }
@media (max-width: 760px) { .sectie { padding: 68px 0; } .sectie-kort { padding: 52px 0; } .sectie-kop { margin-bottom: 30px; } .sectie-kop p { font-size: 17.5px; } }

.js .onthul { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .onthul.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .onthul { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* werelden */
.werelden { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.wereld { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; position: relative; transition: box-shadow .3s, transform .3s; }
.wereld:hover { box-shadow: var(--schaduw); transform: translateY(-3px); }
.wereld::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 6px; background: var(--w); }
.wereld-beeld { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.wereld-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wereld:hover .wereld-beeld img { transform: scale(1.05); }
.wereld-tekst { padding: 24px 28px 28px; }
.wereld h3 { font-size: clamp(32px, 3.4vw, 44px); margin: 6px 0 8px; }
.wereld h3 a { text-decoration: none; }
.wereld h3 a::after { content: " →"; color: var(--w-tekst); font-stretch: 100%; }
.wereld-tekst > p { color: var(--zacht); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.chips a { display: inline-block; padding: 6px 13px; border-radius: 999px; background: var(--w-licht); color: var(--w-tekst); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background-color .2s, color .2s; }
.chips a:hover { background: var(--w); color: var(--w-op); }
.gezond-strook { margin-top: 28px; display: flex; align-items: center; gap: 18px; padding: 22px 28px; border-radius: var(--r); background: var(--groen-licht); color: var(--tekst); text-decoration: none; border: 1px solid #CFE5D8; }
.gezond-strook .mini-label { color: var(--groen-tekst); flex: none; }
.gezond-strook strong { font-family: var(--kop-font); font-stretch: 92%; font-size: 20px; flex: 1; }
.gezond-strook svg { width: 24px; height: 24px; color: var(--groen-tekst); flex: none; transition: transform .2s; }
.gezond-strook:hover svg { transform: translateX(5px); }
@media (max-width: 860px) { .werelden { grid-template-columns: 1fr; } .gezond-strook { flex-wrap: wrap; } .wereld-tekst { padding: 20px 20px 24px; } }

/* doelkiezer */
.doel-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.doel-knop { padding: 12px 20px; border-radius: 999px; border: 2px solid var(--nacht); background: #fff; font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 16px; transition: background-color .2s, color .2s; }
.doel-knop:hover { background: var(--oranje-licht); }
.doel-knop[aria-selected="true"] { background: var(--nacht); color: #fff; }
.doel-paneel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.doel-paneel.ingeschoven .doel-kaart { animation: inschuif .5s cubic-bezier(.2, .7, .2, 1) both; }
.doel-paneel.ingeschoven .doel-kaart:nth-child(2) { animation-delay: .07s; }
.doel-paneel.ingeschoven .doel-kaart:nth-child(3) { animation-delay: .14s; }
@keyframes inschuif { from { opacity: 0; transform: translateY(16px); } }
.doel-kaart { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; text-decoration: none; border: 1px solid var(--lijn); transition: transform .25s, box-shadow .25s; }
.doel-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.doel-kaart-beeld { aspect-ratio: 3 / 2; overflow: hidden; }
.doel-kaart-beeld img { width: 100%; height: 100%; object-fit: cover; }
.doel-kaart-tekst { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; border-top: 5px solid var(--w); }
.doel-kaart h3 { font-size: 26px; margin: 4px 0 6px; }
.doel-kaart p { color: var(--zacht); font-size: 16px; }
.volgende, .les-tegel-wanneer { margin: auto 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; color: var(--tekst) !important; font-weight: 600; }
.volgende svg, .les-tegel-wanneer svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--w-tekst); }
@media (max-width: 860px) { .doel-paneel { grid-template-columns: 1fr; } .doel-kaart { flex-direction: row; } .doel-kaart-beeld { width: 38%; aspect-ratio: auto; flex: none; } .doel-kaart-tekst { border-top: 0; border-left: 5px solid var(--w); padding: 14px 16px; } .doel-kaart h3 { font-size: 21px; } .doel-kaart p:not(.volgende) { display: none; } .doel-knop { font-size: 15px; padding: 10px 15px; } }

/* vandaag */
.vandaag-sectie { padding: 90px 0 100px; background: var(--nacht); color: #fff; }
.vandaag-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.vandaag-kop .sectie-kop { margin: 0; }
.vandaag-kop .sectie-kop h2 em { color: var(--oranje); }
.vandaag-sectie .tekstlink { color: #fff; }
.vandaag-strook { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 16px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.vandaag-leeg { color: #B9BEC4; }
.vandaag-leeg a { color: var(--oranje); }
.v-kaart { flex: none; width: 210px; scroll-snap-align: start; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); padding: 16px 16px 14px; text-decoration: none; color: #fff; position: relative; overflow: hidden; transition: background-color .2s, transform .2s; }
.v-kaart:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.v-kaart::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--w); }
.w-zwart.v-kaart::before { background: #fff; }
.v-tijd { font-family: var(--kop-font); font-stretch: 90%; font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.v-eind { color: #9AA0A7; font-size: 14px; }
.v-naam { display: block; margin-top: 10px; font-weight: 600; font-size: 16.5px; line-height: 1.3; }
.v-wereld { display: block; color: #9AA0A7; font-size: 13.5px; margin-top: 2px; }
.v-kaart.is-voorbij { background: transparent; }
.v-kaart.is-voorbij::before { background: #4A4F55 !important; }
.v-kaart.is-voorbij .v-tijd, .v-kaart.is-voorbij .v-naam { color: #9AA0A7; }
.v-kaart.is-nu { background: rgba(61, 214, 140, .12); border-color: rgba(61, 214, 140, .5); }
.v-kaart .nu-badge { position: absolute; right: 12px; top: 14px; }

/* zwembad-blok */
.zwembad-blok { position: relative; background: var(--water-donker); color: #fff; padding: 110px 0 100px; margin-top: 0; }
.zb-golf { position: absolute; left: 0; right: 0; top: -1px; height: 40px; overflow: hidden; }
.zb-golf svg { width: 200%; max-width: none; height: 100%; fill: var(--nacht); transform: scaleY(-1); }
@media (prefers-reduced-motion: no-preference) { .zb-golf svg { animation: golfloop 14s linear infinite; } }
@keyframes golfloop { to { transform: scaleY(-1) translateX(-50%); } }
.zb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zb-beeld { position: relative; }
.zb-beeld img { border-radius: 28px; aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; }
.zb-thermo { position: absolute; right: -18px; top: 28px; background: var(--oranje); color: var(--nacht); border-radius: 18px; padding: 12px 16px; display: flex; align-items: center; gap: 6px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); }
.zb-thermo svg { width: 26px; height: 26px; }
.zb-thermo strong { font-family: var(--kop-font); font-stretch: 85%; font-weight: 900; font-size: 30px; line-height: 1; }
.zb-tekst h2 { font-size: clamp(40px, 5vw, 64px); }
.zb-tekst h2 em { color: #6FD6E3; }
.zb-tekst .label { color: #6FD6E3; }
.zb-tekst > p { color: #C8E3E7; font-size: 18.5px; }
.zb-feiten { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; margin: 26px 0 26px; }
.zb-feiten li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.zb-feiten svg { grid-row: span 2; width: 28px; height: 28px; color: #6FD6E3; }
.zb-feiten strong { font-family: var(--kop-font); font-stretch: 92%; font-size: 19px; }
.zb-feiten span { color: #A9CCD2; font-size: 14.5px; }
@media (max-width: 900px) { .zb-grid { grid-template-columns: 1fr; gap: 40px; } .zwembad-blok { padding: 84px 0 72px; } .zb-thermo { right: 12px; } }
@media (max-width: 520px) { .zb-feiten li { grid-template-columns: 1fr; padding: 12px 14px; } .zb-feiten svg { grid-row: auto; margin-bottom: 6px; } .zb-feiten strong { font-size: 17px; } .vandaag-sectie { padding: 64px 0 70px; } .held .knoppen { margin-bottom: 6px; } }

/* proef-blok */
.proef-blok { background: var(--oranje); color: var(--nacht); padding: 90px 0; position: relative; overflow: hidden; }
.proef-blok::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; background: url("/images/favicon.svg") no-repeat center/contain; opacity: .12; filter: brightness(0); pointer-events: none; }
.proef-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.proef-tekst h2 { font-size: clamp(40px, 5.2vw, 68px); }
.proef-tekst p { font-size: 19px; }
.prijs-groot { display: inline-block; background: var(--nacht); color: var(--oranje); padding: 0 .16em; border-radius: 10px; transform: rotate(-2.5deg); font-stretch: 80%; }
.proef-lijst { list-style: none; margin: 0; padding: 26px; background: rgba(255, 255, 255, .92); border-radius: var(--r); display: grid; gap: 12px; box-shadow: 0 30px 60px -30px rgba(80, 40, 0, .5); }
.proef-lijst li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 17.5px; }
.proef-lijst svg { width: 24px; height: 24px; flex: none; color: var(--oranje-tekst); }
.proef-lijst .min { font-weight: 400; font-size: 15px; color: var(--zacht); border-top: 1px solid var(--lijn); padding-top: 12px; }
.proef-lijst .min svg { width: 20px; height: 20px; color: var(--zacht); }
@media (max-width: 860px) { .proef-grid { grid-template-columns: 1fr; gap: 30px; } .proef-blok { padding: 68px 0; } }

/* karate */
.karate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.karate-beeld { position: relative; }
.karate-beeld img { border-radius: 28px; aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.karate-beeld::after { content: ""; position: absolute; left: -16px; bottom: -16px; width: 46%; height: 46%; border-left: 12px solid var(--nacht); border-bottom: 12px solid var(--nacht); border-radius: 0 0 0 30px; z-index: -1; }
.karate-tekst h2 { font-size: clamp(38px, 4.6vw, 60px); }
.karate-tekst p { color: var(--zacht); font-size: 18px; }
blockquote { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 5px solid var(--oranje); font-family: var(--kop-font); font-stretch: 92%; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; color: var(--tekst); }
.karate-tijd { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--tekst) !important; }
.karate-tijd svg { width: 20px; height: 20px; color: var(--oranje-tekst); }
@media (max-width: 860px) { .karate-grid { grid-template-columns: 1fr; gap: 40px; } }

/* onder één dak */
.dak-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dak-kaart { position: relative; display: block; padding: 26px 26px 54px; border-radius: var(--r); background: #fff; border: 1px solid var(--lijn); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.dak-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); border-color: transparent; }
.dak-ico, .info-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--oranje-licht); color: var(--oranje-tekst); margin-bottom: 16px; }
.dak-ico svg, .info-ico svg { width: 28px; height: 28px; }
.dak-kaart h3 { font-size: 24px; margin-bottom: 6px; }
.dak-kaart p { color: var(--zacht); font-size: 16px; margin: 0; }
.dak-pijl { position: absolute; left: 26px; bottom: 20px; color: var(--oranje-tekst); }
.dak-pijl svg { width: 22px; height: 22px; transition: transform .2s; }
.dak-kaart:hover .dak-pijl svg { transform: translateX(6px); }
@media (max-width: 900px) { .dak-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dak-grid { grid-template-columns: 1fr; } .dak-kaart { padding: 20px 20px 48px; } }

/* waarom */
.waarom-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; }
.waarom-kop { position: sticky; top: calc(var(--kop-h) + 30px); align-self: start; }
.waarom-foto img { border-radius: 28px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.waarom-lijst { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.waarom-lijst li { display: grid; grid-template-columns: 74px 1fr; column-gap: 18px; padding: 26px 0; border-top: 1px solid var(--lijn); }
.waarom-lijst li:first-child { border-top: 0; padding-top: 0; }
.waarom-nr { grid-row: span 2; font-family: var(--kop-font); font-stretch: 80%; font-weight: 900; font-size: 54px; line-height: .9; color: transparent; -webkit-text-stroke: 1.6px var(--oranje-kop); }
.waarom-lijst h3 { font-size: 25px; margin: 0 0 6px; }
.waarom-lijst p { color: var(--zacht); margin: 0; }
.waarom-breed { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.waarom-breed li:nth-child(2) { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .waarom-grid { grid-template-columns: 1fr; gap: 40px; } .waarom-kop { position: static; } .waarom-breed { grid-template-columns: 1fr; } .waarom-breed li:nth-child(2) { border-top: 1px solid var(--lijn); padding-top: 26px; } .waarom-lijst li { grid-template-columns: 56px 1fr; } .waarom-nr { font-size: 42px; } }

/* bezoek */
.bezoek { padding: 0 0 100px; }
.bezoek-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; background: var(--licht); border-radius: 32px; overflow: hidden; }
.bezoek-beeld img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.bezoek-tekst { padding: 48px 48px 44px; }
.bezoek-tekst h2 { font-size: clamp(36px, 4vw, 52px); }
.bezoek-tekst > p { color: var(--zacht); }
@media (max-width: 900px) { .bezoek-grid { grid-template-columns: 1fr; border-radius: 24px; } .bezoek-tekst { padding: 30px 22px 30px; } .bezoek-beeld img { min-height: 0; aspect-ratio: 16 / 10; } .bezoek { padding-bottom: 68px; } }

.tijden { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 16px; }
.tijden th, .tijden td { padding: 10px 0; border-bottom: 1px solid var(--lijn); text-align: left; font-weight: 400; }
.tijden td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-left: 12px; }
.tijden tr.vandaag th, .tijden tr.vandaag td { color: var(--oranje-tekst); font-weight: 700; }
.tijden tr.vandaag th::after { content: "vandaag"; margin-left: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: var(--oranje); color: var(--nacht); border-radius: 5px; padding: 2px 6px; vertical-align: 2px; }

/* cta-band */
.cta-band { padding: 0 0 90px; }
.sectie-donker ~ .cta-band { padding-top: 90px; }
.cta-band-binnen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; background: var(--oranje); color: var(--nacht); border-radius: 32px; padding: 44px 48px; position: relative; overflow: hidden; }
.cta-icoon { width: 84px; height: 84px; flex: none; }
.cta-band h2 { font-size: clamp(32px, 3.6vw, 48px); margin-bottom: 8px; }
.cta-band h2 em { color: var(--nacht); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.cta-band p { margin: 0; font-size: 18px; max-width: 560px; }
.cta-band .knoppen { margin: 0; flex-direction: column; }
@media (max-width: 960px) { .cta-band-binnen { grid-template-columns: 1fr; padding: 36px 18px 40px; gap: 18px; border-radius: 0; } .cta-icoon { width: 56px; height: 56px; } .cta-band .knoppen { flex-direction: row; } .cta-band { padding-bottom: 64px; } }

/* ------------------------------------------------ voet */
.voet { background: var(--nacht); color: #C2C7CD; position: relative; padding: 70px 0 0; font-size: 15.5px; }
.voet-golf { position: absolute; left: 0; right: 0; top: -22px; height: 24px; }
.voet-golf svg { width: 100%; height: 100%; fill: var(--nacht); }
.voet-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.3fr 1.5fr; gap: 32px; }
.voet-logo .logo-svg { height: 56px; margin-bottom: 18px; }
.voet h2 { font-size: 15px; font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 4px 0 16px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet a { color: inherit; text-decoration: none; }
.voet a:hover { color: #fff; }
.voet-contact a { display: flex; gap: 10px; align-items: flex-start; }
.voet-contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--oranje); }
.voet-contact.donker a { color: var(--tekst); }
.voet-sociaal { display: flex; gap: 10px; margin-top: 18px; }
.voet-sociaal a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #3A3F45; }
.voet-sociaal a:hover { border-color: var(--oranje); color: var(--oranje); }
.voet-sociaal svg { width: 20px; height: 20px; }
.voet .tijden { margin: 0 0 10px; font-size: 15px; }
.voet .tijden th, .voet .tijden td { border-color: #2E3238; color: #D9DCE0; padding: 7px 0; }
.voet .tijden tr.vandaag th, .voet .tijden tr.vandaag td { color: var(--oranje); }
.voet-klein { font-size: 13.5px; color: #8E949B; }
.voet-onder { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2E3238; margin-top: 50px; padding: 22px 0 26px; font-size: 14px; color: #8E949B; }
@media (max-width: 1000px) { .voet-grid { grid-template-columns: 1fr 1fr; } .voet-merk { grid-column: 1 / -1; } }
@media (max-width: 520px) { .voet-grid { grid-template-columns: 1fr; } }

.concept-noot { background: #FFE14D; color: #2A2400; font-size: 13.5px; text-align: center; padding: 10px 18px; line-height: 1.45; }
.concept-noot a { color: inherit; font-weight: 600; }

.actiebalk { display: none; }
@media (max-width: 760px) {
  .actiebalk { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 6px; background: rgba(22, 24, 27, .94); border-radius: 18px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5); }
  .actiebalk a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border-radius: 13px; color: #fff; text-decoration: none; font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 15.5px; }
  .actiebalk svg { width: 19px; height: 19px; }
  .actiebalk-accent { background: var(--oranje); color: var(--nacht) !important; }
  body { padding-bottom: 84px; }
}

/* ------------------------------------------------ paginakop */
.pagina-kop { background: var(--nacht); color: #fff; padding: 56px 0 72px; position: relative; overflow: hidden; isolation: isolate; }
.pagina-kop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 70% at 100% 0%, color-mix(in srgb, var(--w, var(--bordeaux)) 55%, transparent), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(233, 130, 12, .16), transparent 70%); }
.w-zwart.pagina-kop::before { background: radial-gradient(55% 70% at 100% 0%, rgba(255, 255, 255, .08), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(233, 130, 12, .18), transparent 70%); }
.pk-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.pk-met-beeld .pk-grid { grid-template-columns: 1.05fr .95fr; }
.pagina-kop h1 { font-size: clamp(46px, 6.6vw, 92px); font-stretch: 80%; font-weight: 900; line-height: .95; margin: 4px 0 20px; }
.pagina-kop h1 em { color: var(--oranje); }
.pagina-kop .lead { font-size: clamp(18px, 1.6vw, 21px); color: #D2D6DA; max-width: 620px; }
.pagina-kop .label { color: var(--oranje); }
.pagina-kop .label[class*=" w-"] { color: #fff; background: var(--w); padding: 6px 12px 6px 10px; border-radius: 9px; }
.pagina-kop .label[class*=" w-"]::before { filter: brightness(0) invert(1); }
.w-oranje .label[class*=" w-"] { color: var(--nacht); }
.w-oranje .label[class*=" w-"]::before { filter: brightness(0); }
.w-zwart .label[class*=" w-"] { background: #fff; color: var(--nacht); }
.w-zwart .label[class*=" w-"]::before { filter: none; }
.pk-beeld { align-self: end; margin-bottom: -72px; }
.portaal-s { height: clamp(320px, 34vw, 470px); border-width: 16px; }
.pk-compact { padding: 44px 0 56px; }
.pk-compact h1 { font-size: clamp(44px, 6vw, 80px); }
.kruimel { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #9EA4AB; margin-bottom: 26px; }
.kruimel a { color: #C9CDD2; text-decoration: none; }
.kruimel a:hover { color: #fff; text-decoration: underline; }
.kruimel span[aria-current] { color: #fff; }
@media (max-width: 900px) { .pk-met-beeld .pk-grid { grid-template-columns: 1fr; gap: 28px; } .pk-beeld { margin-bottom: -72px; margin-left: 10px; margin-right: 10px; } .portaal-s { height: 280px; border-width: 12px; } .pagina-kop { padding: 38px 0 72px; } }
.pk-404 { padding: 90px 0 110px; }
.pk-met-rechts .pk-grid { grid-template-columns: 1fr 360px; }
.pk-compact:not(.pk-met-rechts) .pk-grid::after { content: ""; position: absolute; right: max(24px, calc(50% - 600px)); top: 50%; width: 260px; height: 260px; transform: translateY(-50%) rotate(-8deg); background: url("/images/favicon.svg") no-repeat center/contain; opacity: .09; pointer-events: none; }
[data-wacht] { visibility: hidden; }
.vandaag-kaart { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r); padding: 22px 24px; }
.vandaag-kaart .mini-label { color: var(--oranje); }
.vandaag-kaart > strong { display: block; font-family: var(--kop-font); font-stretch: 85%; font-weight: 900; font-size: 46px; line-height: 1; margin: 4px 0 8px; }
.vk-status { display: flex; align-items: center; gap: 9px; color: #D2D6DA; font-size: 15px; }
.vandaag-kaart dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.vandaag-kaart dt { font-family: var(--kop-font); font-stretch: 88%; font-weight: 800; font-size: 28px; line-height: 1; }
.vandaag-kaart dd { margin: 4px 0 0; color: #A8AEB5; font-size: 13.5px; line-height: 1.3; }
@media (max-width: 900px) { .pk-met-rechts .pk-grid { grid-template-columns: 1fr; gap: 24px; } .pk-compact .pk-grid::after { display: none; } }

/* feitenbalk */
.feitenbalk { border-bottom: 1px solid var(--lijn); background: #fff; }
.feiten { display: flex; flex-wrap: wrap; margin: 0; }
.feit { flex: 1 1 170px; }
.feit:first-child { flex: 2.2 1 300px; }
.feit { padding: 22px 22px 22px 0; border-right: 1px solid var(--lijn); margin-right: 22px; }
.feit:last-child { border-right: 0; }
.feit dt { font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--w-tekst); margin-bottom: 4px; }
.feit dd { margin: 0; font-weight: 600; font-size: 16.5px; line-height: 1.4; }
@media (max-width: 900px) { .pk-met-beeld + .feitenbalk .feiten { padding-top: 72px; } }
@media (max-width: 700px) { .feit { flex: 1 1 40%; border-right: 0; margin-right: 0; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--lijn); } .feit:first-child { flex-basis: 100%; } }

/* lespagina */
.les-sectie { padding-top: 64px; }
.les-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: start; }
.les-tekst { max-width: 720px; }
.les-intro { font-size: clamp(20px, 1.9vw, 23px); line-height: 1.5; color: var(--tekst); margin-bottom: 1.4em; }
.les-tekst h2 { font-size: 30px; margin: 1.5em 0 .4em; }
.les-figuur { margin: 0 0 8px; }
.les-figuur img { border-radius: var(--r); width: 100%; max-width: 480px; }
.les-tekst p { font-size: 18px; color: #33373C; }
.les-tekst a { color: var(--oranje-tekst); font-weight: 600; }
.punten-blok { margin: 34px 0; padding: 26px 28px; border-radius: var(--r); background: var(--w-licht); }
.punten-blok h3 { font-size: 22px; margin-bottom: 14px; }
.vink-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vink-lijst li { display: flex; gap: 12px; align-items: flex-start; }
.vink-lijst svg { width: 22px; height: 22px; flex: none; color: var(--w-tekst, var(--oranje-tekst)); margin-top: 2px; }
.punten-blok .vink-lijst { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.les-citaat { font-size: clamp(26px, 2.6vw, 34px); padding-left: 26px; }
.les-citaat cite { display: block; margin-top: 10px; font-family: var(--tekst-font); font-style: normal; font-weight: 400; font-size: 15px; color: var(--zacht); }
.les-extra { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--licht); font-size: 16px !important; }
.les-extra svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--oranje-tekst); }
.les-zij { position: sticky; top: calc(var(--kop-h) + 24px); display: grid; gap: 16px; }
.zij-kaart { background: var(--licht); border-radius: var(--r); padding: 24px; }
.zij-kaart h2 { font-size: 24px; margin-bottom: 8px; }
.zij-klein { font-size: 14.5px; color: var(--zacht); }
.zij-cta { background: var(--nacht); color: #fff; }
.zij-cta p { color: #C2C7CD; font-size: 16px; }
.zij-cta .tekstlink { color: #fff; margin-top: 16px; font-size: 15.5px; }
.zij-cta .knop { width: 100%; }
.zij-donker { background: var(--nacht); color: #fff; }
.zij-donker p { color: #C2C7CD; }
.volgende-kaart { display: flex; gap: 14px; align-items: center; background: #fff; border: 2px solid var(--nacht); }
.volgende-kaart .stip { width: 12px; height: 12px; }
.volgende-kaart strong { display: block; font-family: var(--kop-font); font-stretch: 92%; font-size: 21px; line-height: 1.2; }
.week-lijst { list-style: none; margin: 12px 0 16px; padding: 0; }
.week-lijst li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn); align-items: start; }
.week-lijst li.vandaag .week-dag { color: var(--oranje-tekst); }
.week-dag { font-weight: 600; font-size: 15.5px; padding-top: 6px; }
.week-momenten { display: flex; flex-wrap: wrap; gap: 6px; }
.moment { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--lijn); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; transition: border-color .2s, background-color .2s; }
.moment small { font-size: 12px; color: var(--zacht); font-weight: 600; }
.moment svg { width: 15px; height: 15px; color: var(--oranje-tekst); }
button.moment:hover { border-color: var(--oranje); background: var(--oranje-licht); }
.moment-vast { cursor: default; }
@media (max-width: 1000px) { .les-grid { grid-template-columns: 1fr; gap: 40px; } .les-zij { position: static; } }
@media (max-width: 560px) { .punten-blok .vink-lijst { grid-template-columns: 1fr; } .punten-blok { padding: 22px 20px; } }

.fotostrook { padding: 0 0 100px; }
.fotostrook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fotostrook figure { margin: 0; }
.fotostrook img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.fotostrook-grid figure:first-child:nth-last-child(1) { grid-column: span 2; }
@media (max-width: 700px) { .fotostrook-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .fotostrook { padding-bottom: 64px; } }

/* les-tegels */
.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.les-tegel { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: #fff; border: 1px solid var(--lijn); overflow: hidden; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.les-tegel:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.les-tegel-beeld { aspect-ratio: 3 / 2; overflow: hidden; }
.les-tegel-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.les-tegel:hover .les-tegel-beeld img { transform: scale(1.05); }
.les-tegel-tekst { padding: 18px 22px 22px; border-top: 5px solid var(--w); display: flex; flex-direction: column; flex: 1; }
.les-tegel h3 { font-size: 26px; margin: 4px 0 6px; padding-right: 30px; }
.les-tegel-tekst > p:not(.les-tegel-wanneer) { color: var(--zacht); font-size: 16px; }
.les-tegel-pijl { position: absolute; right: 18px; bottom: 20px; width: 38px; height: 38px; border-radius: 12px; background: var(--w-licht); color: var(--w-tekst); display: grid; place-items: center; transition: background-color .2s, color .2s; }
.les-tegel-pijl svg { width: 20px; height: 20px; }
.les-tegel:hover .les-tegel-pijl { background: var(--w); color: var(--w-op); }
.les-tegel-wanneer { padding-right: 44px; }
.meer-link { margin: 30px 0 0; }
@media (max-width: 960px) { .tegels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tegels { grid-template-columns: 1fr; } }

/* info-rij en split */
.info-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.info-blok { padding: 28px; border-radius: var(--r); border: 1px solid var(--lijn); background: #fff; }
.info-blok h3 { font-size: 24px; margin-bottom: 6px; }
.info-blok p { color: var(--zacht); margin: 0; }
.info-blok a { color: var(--oranje-tekst); font-weight: 600; }
.sectie-licht .info-blok { border-color: transparent; }
@media (max-width: 860px) { .info-rij { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-tekst h2 { font-size: clamp(36px, 4.4vw, 56px); }
.split-tekst > p { color: var(--zacht); font-size: 18px; }
.collage { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 520px; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.collage .c1 { grid-row: span 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } .collage { height: 380px; } }
.principe { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.principe-woord { margin: 0; font-family: var(--kop-font); font-stretch: 75%; font-weight: 900; font-size: clamp(64px, 11vw, 150px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--nacht); letter-spacing: -.01em; }
.principe h2 { font-size: clamp(32px, 3.6vw, 46px); }
.principe p { color: var(--zacht); font-size: 18px; }
@media (max-width: 860px) { .principe { grid-template-columns: 1fr; gap: 16px; } }

/* zwemmen: wegwijzer */
.wegwijzer { background: var(--water-donker); color: #fff; padding: 140px 0 96px; }
.ww-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.ww-grid > *, .pk-grid > *, .les-grid > *, .form-grid > *, .contact-grid > * { min-width: 0; }
.ww-vraag h2 { font-size: clamp(40px, 5vw, 64px); }
.ww-vraag h2 em { color: #6FD6E3; }
.ww-vraag .label { color: #6FD6E3; }
.ww-vraag > p { color: #C8E3E7; font-size: 18px; }
.ww-schuif { margin: 30px 0 34px; }
.ww-waarde { display: block; font-family: var(--kop-font); font-stretch: 85%; font-weight: 900; font-size: 54px; line-height: 1; margin-bottom: 14px; color: #fff; }
.ww-schuif input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--oranje) var(--p, 40%), rgba(255, 255, 255, .18) var(--p, 40%)); outline-offset: 8px; }
.ww-schuif input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 12px; background: #fff; border: 4px solid var(--oranje); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); cursor: grab; }
.ww-schuif input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 10px; background: #fff; border: 4px solid var(--oranje); cursor: grab; }
.ww-schaal { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13.5px; color: #A9CCD2; }
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.route-stap { position: relative; padding: 14px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 2px; transition: background-color .3s, border-color .3s, transform .3s; }
.route-stap strong { font-family: var(--kop-font); font-stretch: 92%; font-size: 17px; line-height: 1.1; }
.route-stap > span:last-child { font-size: 12.5px; color: #A9CCD2; line-height: 1.3; }
.route-nr { font-family: var(--kop-font); font-weight: 900; font-size: 13px; color: #6FD6E3; }
.route-stap.actief { background: var(--oranje); border-color: var(--oranje); color: var(--nacht); transform: translateY(-4px); }
.route-stap.actief span { color: var(--nacht) !important; }
.ww-uitkomst { background: #fff; color: var(--tekst); border-radius: 28px; padding: 32px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.ww-uitkomst .mini-label { color: var(--water-tekst); }
.ww-uitkomst h3 { font-size: clamp(30px, 3vw, 40px); margin: 6px 0 10px; }
.ww-uitkomst p { color: var(--zacht); font-size: 17.5px; }
.ww-tijden { list-style: none; margin: 16px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ww-tijden li { padding: 7px 12px; border-radius: 10px; background: var(--water-licht); color: var(--water-tekst); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.ww-uitkomst .knop-wit { background: var(--nacht); color: #fff; }
.ww-uitkomst .knop-lijn { border-color: var(--nacht); color: var(--nacht); }
@media (max-width: 960px) { .ww-grid { grid-template-columns: 1fr; gap: 36px; } .route { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; padding-bottom: 6px; } .wegwijzer { padding: 130px 0 72px; } .ww-uitkomst { padding: 24px; } }
.zwem-feiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.zf { padding: 26px 24px; border-radius: var(--r); background: var(--water-licht); display: flex; flex-direction: column; gap: 4px; }
.zf strong { font-family: var(--kop-font); font-stretch: 82%; font-weight: 900; font-size: clamp(36px, 3.8vw, 52px); line-height: .95; color: var(--water-tekst); }
.zf span { color: var(--zacht); font-size: 15.5px; }
@media (max-width: 760px) { .zwem-feiten { grid-template-columns: 1fr 1fr; gap: 12px; } }
.ouder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.ouder-regel { padding: 20px 0; border-top: 1px solid #DCD6CB; display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
.ouder-regel h3 { font-size: 19px; margin: 2px 0 0; }
.ouder-regel p { margin: 0; color: var(--zacht); font-size: 16.5px; }
@media (max-width: 860px) { .ouder-grid { grid-template-columns: 1fr; } .ouder-regel { grid-template-columns: 1fr; gap: 4px; } }

/* ------------------------------------------------ rooster */
.rooster-sectie { padding: 40px 0 100px; }
.rooster-balk { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.rooster-balk > * { min-width: 0; max-width: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--lijn); background: #fff; font-family: var(--kop-font); font-stretch: 100%; font-weight: 700; font-size: 15px; transition: border-color .2s, background-color .2s, color .2s; }
.filter-chip i { width: 10px; height: 10px; border-radius: 3px; background: var(--w); }
.filter-chip:hover { border-color: var(--nacht); }
.filter-chip[aria-pressed="true"] { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.filter-chip.w-zwart i { box-shadow: 0 0 0 1.5px #fff; }
.rooster-acties { display: flex; gap: 10px; align-items: center; }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select { -webkit-appearance: none; appearance: none; padding: 10px 42px 10px 16px; min-height: 44px; border-radius: 12px; border: 2px solid var(--lijn); background: #fff; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.select-wrap select:focus { border-color: var(--oranje); outline: none; box-shadow: 0 0 0 4px rgba(233, 130, 12, .2); }
.select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; }
.veld .select-wrap { display: flex; margin: 0; }
.select-vol { display: flex; }
.select-vol select { width: 100%; min-height: 52px; font-weight: 400; font-size: 16.5px; }
.dag-knoppen { display: none; }
.rooster { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.rdag { background: var(--licht); border-radius: 18px; padding: 14px 10px 12px; min-width: 0; }
.rdag.is-vandaag { background: var(--oranje-licht); box-shadow: inset 0 0 0 2px var(--oranje); }
.rdag-kop { font-size: 21px; margin: 2px 4px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; }
.vandaag-tag { font-family: var(--kop-font); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--oranje); color: var(--nacht); border-radius: 5px; padding: 2px 6px; }
.rdag-vrij { display: grid; gap: 4px; margin-bottom: 10px; }
.vrij-regel { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 9px; border: 1.5px dashed color-mix(in srgb, var(--w) 60%, transparent); text-decoration: none; font-size: 12.5px; line-height: 1.3; color: var(--zacht); }
.vrij-regel .tijd { font-weight: 700; color: var(--tekst); font-variant-numeric: tabular-nums; }
.rdag-lessen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.les-knop { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 9px 10px 9px 12px; border-radius: 11px; border: 0; background: #fff; box-shadow: inset 4px 0 0 var(--w); transition: transform .15s, box-shadow .2s; }
.les-knop:hover { transform: translateX(2px); box-shadow: inset 4px 0 0 var(--w), 0 6px 16px -8px rgba(0, 0, 0, .3); }
.les-knop .tijd { font-family: var(--kop-font); font-stretch: 92%; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.les-knop .naam { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.les-knop .wereld-naam { font-size: 12px; color: var(--zacht); }
.les-kaart.is-nu .les-knop { box-shadow: inset 4px 0 0 var(--w), 0 0 0 2px #3DD68C; }
.les-kaart.is-nu .tijd::after { content: "nu"; margin-left: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; background: #3DD68C; color: #06291A; border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.les-kaart.is-voorbij .les-knop { background: rgba(255, 255, 255, .45); box-shadow: inset 4px 0 0 #CFC9C0; }
.les-kaart.is-voorbij .les-knop span { color: #64686E; }
.les-kaart.is-verborgen, .vrij-regel.is-verborgen { display: none; }
.rdag-leeg { font-size: 13.5px; color: var(--zacht); margin: 6px 4px; }
.rooster-noten { display: grid; gap: 8px; margin-top: 26px; }
.rooster-noten p { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--zacht); font-size: 15.5px; }
.rooster-noten svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--oranje-tekst); }
.rooster-noten a { color: var(--oranje-tekst); font-weight: 600; }
.print-kop { display: none; }
@media (max-width: 1100px) {
  .js .dag-knoppen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; position: sticky; top: var(--kop-h); z-index: 5; background: #fff; padding: 8px 0; }
  .dag-knop { padding: 10px 2px; border-radius: 12px; border: 2px solid var(--lijn); background: #fff; font-family: var(--kop-font); font-weight: 800; font-size: 16px; position: relative; }
  .dag-knop[aria-selected="true"] { background: var(--nacht); color: #fff; border-color: var(--nacht); }
  .dag-knop.is-vandaag::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--oranje); }
  .dk-lang { display: none; }
  .js .rooster { grid-template-columns: 1fr; overflow: visible; }
  .js .rdag { display: none; padding: 16px 14px; }
  .js .rdag.actief, .js[data-dag="0"] .rdag[data-dag="0"], .js[data-dag="1"] .rdag[data-dag="1"], .js[data-dag="2"] .rdag[data-dag="2"], .js[data-dag="3"] .rdag[data-dag="3"], .js[data-dag="4"] .rdag[data-dag="4"], .js[data-dag="5"] .rdag[data-dag="5"], .js[data-dag="6"] .rdag[data-dag="6"] { display: block; }
  .rooster { grid-template-columns: 1fr; }
  .rdag-lessen { gap: 8px; }
  .les-knop { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 13px 14px 13px 16px; }
  .les-knop .tijd { font-size: 17px; min-width: 104px; }
  .les-knop .naam { font-size: 16.5px; flex: 1; }
  .les-knop .wereld-naam { width: 100%; padding-left: 116px; font-size: 13px; }
  .vrij-regel { flex-direction: row; gap: 10px; font-size: 14.5px; padding: 9px 12px; }
  .rooster-balk { flex-direction: column; align-items: stretch; }
  .rooster-acties { justify-content: space-between; }
  .rooster-acties .select-wrap { flex: 1; }
  .rooster-acties select { width: 100%; }
}
@media (max-width: 520px) { .les-knop .wereld-naam { padding-left: 0; } .les-knop .tijd { min-width: 0; } .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; max-width: calc(100% + 36px) !important; scrollbar-width: none; } .rooster-acties .select-wrap { min-width: 0; } .filter-chip { flex: none; } }

/* dialoog */
dialog { border: 0; padding: 0; border-radius: 26px; max-width: min(540px, calc(100vw - 28px)); width: 100%; color: var(--tekst); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(14, 16, 18, .62); backdrop-filter: blur(3px); }
.dialoog-binnen { padding: 32px 30px 26px; position: relative; border-top: 8px solid var(--w, var(--oranje)); }
.dialoog-binnen h2 { font-size: 36px; margin: 6px 0 6px; padding-right: 30px; }
.dialoog-tijd { font-family: var(--kop-font); font-stretch: 95%; font-weight: 700; font-size: 18px; color: var(--w-tekst, var(--oranje-tekst)); }
.dialoog-klein { font-size: 14.5px; color: var(--zacht); margin: 18px 0 0; }
.dialoog-klein a { color: var(--oranje-tekst); font-weight: 600; }
.dialoog-sluit { position: absolute; right: 16px; top: 14px; width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--licht); font-size: 26px; line-height: 1; }
.dialoog-sluit:hover { background: var(--lijn); }
@media (prefers-reduced-motion: no-preference) { dialog[open] { animation: dlg .3s cubic-bezier(.2, .7, .2, 1); } }
@keyframes dlg { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.lichtbak { max-width: min(1100px, calc(100vw - 28px)); background: #000; }
.lichtbak img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.lichtbak .dialoog-sluit { background: rgba(255, 255, 255, .9); z-index: 2; }

/* ------------------------------------------------ tarieven */
.wizard-sectie { padding: 56px 0 80px; }
.wizard { background: var(--nacht); color: #fff; border-radius: 32px; padding: 40px 44px; position: relative; overflow: hidden; }
.wizard::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: url("/images/favicon.svg") no-repeat center/contain; opacity: .07; }
.wz-nr { font-family: var(--kop-font); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--oranje); margin-bottom: 6px; }
.wz-stap h2 { font-size: clamp(28px, 3vw, 38px); }
.wz-stap + .wz-stap { margin-top: 30px; padding-top: 30px; border-top: 1px solid #30353B; }
.wz-opties { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; position: relative; z-index: 1; }
.wz-optie { display: flex; align-items: center; gap: 12px; padding: 16px 16px; border-radius: 16px; border: 2px solid #3A3F45; background: rgba(255, 255, 255, .03); color: #fff; text-align: left; font-weight: 600; font-size: 16.5px; line-height: 1.25; transition: border-color .2s, background-color .2s, transform .2s; }
.wz-optie svg { width: 26px; height: 26px; flex: none; color: var(--oranje); }
.wz-optie:hover { border-color: #6B7178; transform: translateY(-2px); }
.wz-optie[aria-pressed="true"] { border-color: var(--oranje); background: var(--oranje); color: var(--nacht); }
.wz-optie[aria-pressed="true"] svg { color: var(--nacht); }
.wz-optie small { display: block; font-weight: 400; font-size: 13.5px; opacity: .8; }
.wz-uitkomst { margin-top: 32px; padding: 30px; border-radius: 24px; background: #fff; color: var(--tekst); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; position: relative; z-index: 1; }
.wz-uitkomst h3 { font-size: 26px; margin: 4px 0 6px; }
.wz-uitkomst p { color: var(--zacht); margin: 0 0 6px; }
.wz-prijs { text-align: right; }
.wz-prijs strong { display: block; font-family: var(--kop-font); font-stretch: 80%; font-weight: 900; font-size: clamp(54px, 6vw, 80px); line-height: .9; color: var(--nacht); }
.wz-prijs span { color: var(--zacht); font-size: 15px; }
.wz-reken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 18px; border-top: 1px solid var(--lijn); font-size: 15.5px; }
.wz-reken b { font-variant-numeric: tabular-nums; }
.wz-tip { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; background: var(--oranje-licht); border-radius: 12px; padding: 12px 14px; font-size: 15.5px; }
.wz-tip svg { width: 20px; height: 20px; flex: none; color: var(--oranje-tekst); margin-top: 2px; }
.wz-uitkomst .knoppen { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) { .wizard { padding: 28px 20px; border-radius: 24px; } .wz-opties { grid-template-columns: 1fr 1fr; } .wz-optie { padding: 13px 12px; font-size: 15px; gap: 9px; } .wz-optie svg { width: 22px; height: 22px; } .wz-uitkomst { grid-template-columns: 1fr; padding: 22px; } .wz-prijs { text-align: left; } }
.prijs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.prijs-kaart { background: #fff; border-radius: var(--r); padding: 26px 26px 18px; border-top: 6px solid var(--oranje); }
.prijs-kaart:nth-child(2) { border-top-color: var(--bordeaux); }
.prijs-kaart:nth-child(4) { border-top-color: var(--water); }
.prijs-kaart:nth-child(5) { border-top-color: var(--groen); }
.prijs-kaart:nth-child(6) { border-top-color: var(--nacht); }
.prijs-kaart h3 { font-size: 25px; margin-bottom: 4px; }
.prijs-kaart > p { color: var(--zacht); font-size: 15px; margin-bottom: 6px; }
.prijs-kaart table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.prijs-kaart thead th { font-family: var(--kop-font); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); text-align: left; padding: 10px 0 6px; }
.prijs-kaart thead th:last-child, .prijs-kaart td.bedrag { text-align: right; }
.prijs-kaart tbody th { text-align: left; font-weight: 600; padding: 10px 8px 10px 0; border-top: 1px solid var(--lijn); }
.prijs-kaart td { padding: 10px 0; border-top: 1px solid var(--lijn); color: var(--zacht); white-space: nowrap; }
.prijs-kaart td.bedrag { font-family: var(--kop-font); font-stretch: 90%; font-weight: 800; font-size: 19px; color: var(--tekst); font-variant-numeric: tabular-nums; padding-left: 10px; }
@media (max-width: 1000px) { .prijs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .prijs-grid { grid-template-columns: 1fr; } }
.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.extra-kaart { padding: 30px; border-radius: var(--r); border: 1px solid var(--lijn); }
.extra-kaart h3 { font-size: 26px; margin-bottom: 16px; }
.extra-kaart .vink-lijst { margin-bottom: 20px; }
.extra-kaart a:not(.tekstlink) { color: var(--oranje-tekst); font-weight: 600; }
.prijs-regels { list-style: none; margin: 0 0 16px; padding: 0; }
.prijs-regels li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.prijs-regels b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .extra-grid { grid-template-columns: 1fr; } .extra-kaart { padding: 22px; } }

/* ------------------------------------------------ formulieren */
.form-grid { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; }
#aanmelden .form-grid, .sectie-licht .form-grid { grid-template-columns: .85fr 1.15fr; }
.formulier { background: #fff; border-radius: 28px; padding: 34px; box-shadow: var(--schaduw); border: 1px solid var(--lijn); }
.formulier h2 { font-size: 30px; }
.veld { margin-bottom: 18px; }
.veld label, .keuze-groep legend { display: block; font-weight: 600; margin-bottom: 7px; font-size: 16px; }
.optioneel { font-weight: 400; color: var(--zacht); font-size: 14px; }
.veld input, .veld textarea { width: 100%; padding: 13px 15px; border-radius: 12px; border: 2px solid #DCD6CB; background: #fff; font-size: 17px; transition: border-color .2s, box-shadow .2s; }
.veld textarea { resize: vertical; min-height: 110px; }
.veld input:focus, .veld textarea:focus { border-color: var(--oranje); outline: none; box-shadow: 0 0 0 4px rgba(233, 130, 12, .2); }
.veld.fout input, .veld.fout textarea { border-color: #C9303A; }
.veld-fout { color: #B0242E; font-size: 14.5px; margin: 6px 0 0; font-weight: 600; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.keuze-groep { border: 0; padding: 0; margin: 0 0 20px; }
.keuze-groep legend { padding: 0; }
.keuze-groep[class*=" w-"] legend { display: flex; align-items: center; gap: 8px; }
.keuze-groep[class*=" w-"] legend::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--w); }
.keuze-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze-chip { position: relative; cursor: pointer; }
.keuze-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuze-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; border: 2px solid #DCD6CB; font-weight: 600; font-size: 15px; transition: background-color .15s, border-color .15s, color .15s; }
.keuze-chip input:checked + span { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.keuze-chip input:checked + span::before { content: "✓"; color: var(--oranje); }
.keuze-chip input:focus-visible + span { outline: 3px solid var(--oranje); outline-offset: 2px; }
.keuze-chip:hover span { border-color: var(--nacht); }
.formulier .knop[type=submit], .formulier .knop[data-volgende-stap] { margin-top: 6px; }
.formulier .knoppen .knop { margin-top: 0; }
.formulier-ok { text-align: center; padding: 30px 10px; }
.formulier-ok:focus { outline: none; }
.ok-vink { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 24px; background: var(--oranje); color: var(--nacht); display: grid; place-items: center; }
.ok-vink svg { width: 40px; height: 40px; }
.concept-klein { font-size: 14px; color: var(--zacht); }
.stap-balk { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 26px; padding: 0; counter-reset: s; }
.stap-balk li { counter-increment: s; font-family: var(--kop-font); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); padding-top: 10px; border-top: 4px solid var(--lijn); }
.stap-balk li::before { content: counter(s) ". "; }
.stap-balk li.actief { color: var(--tekst); border-color: var(--oranje); }
.form-stap h2 { font-size: 28px; }
.form-zij { display: grid; gap: 16px; position: sticky; top: calc(var(--kop-h) + 24px); }
.stappen-uitleg { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; }
.stappen-uitleg li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.stappen-uitleg span { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--oranje); color: var(--nacht); display: grid; place-items: center; font-family: var(--kop-font); font-weight: 900; }
.form-uitleg .sectie-kop { margin-bottom: 20px; }
@media (max-width: 960px) { .form-grid, #aanmelden .form-grid, .sectie-licht .form-grid { grid-template-columns: 1fr; gap: 32px; } .form-zij { position: static; } .formulier { padding: 24px 20px; border-radius: 22px; } }
@media (max-width: 560px) { .veld-rij { grid-template-columns: 1fr; gap: 0; } }

/* proefmaand */
.proef-kop { background: var(--oranje); color: var(--nacht); padding: 50px 0 0; overflow: hidden; }
.proef-kop .pk-grid { grid-template-columns: 1.05fr .95fr; align-items: end; }
.proef-kop .pk-tekst { padding-bottom: 64px; }
.proef-kop h1 { font-size: clamp(46px, 6.4vw, 88px); font-stretch: 80%; font-weight: 900; line-height: .95; margin: 4px 0 20px; }
.proef-kop .lead { font-size: clamp(18px, 1.6vw, 21px); max-width: 560px; }
.proef-kop .kruimel, .proef-kop .kruimel a, .proef-kop .kruimel span[aria-current] { color: #3E2A10; }
.proef-kop .pk-beeld { margin-bottom: 0; }
.portaal-zwart { border-color: var(--nacht); height: clamp(320px, 36vw, 500px); border-width: 18px; }
@media (max-width: 900px) { .proef-kop .pk-grid { grid-template-columns: 1fr; gap: 0; } .proef-kop .pk-tekst { padding-bottom: 36px; } .portaal-zwart { height: 300px; border-width: 12px; } }
.proef-inhoud { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.groot-vink { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.groot-vink li { display: flex; gap: 16px; }
.groot-vink svg { flex: none; width: 42px; height: 42px; padding: 9px; border-radius: 13px; background: var(--oranje); color: var(--nacht); }
.groot-vink strong { display: block; font-family: var(--kop-font); font-stretch: 92%; font-size: 22px; }
.groot-vink span { color: var(--zacht); }
.vraag-blok { background: var(--licht); border-radius: var(--r); padding: 28px; }
.vraag-blok h2 { font-size: 28px; }
details { border-top: 1px solid #DCD6CB; }
details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-weight: 600; font-size: 17px; }
details summary::-webkit-details-marker { display: none; }
details summary svg { width: 20px; height: 20px; flex: none; transition: transform .2s; color: var(--oranje-tekst); }
details[open] summary svg { transform: rotate(45deg); }
details p { color: var(--zacht); margin: 0 0 16px; }
details a { color: var(--oranje-tekst); font-weight: 600; }
@media (max-width: 900px) { .proef-inhoud { grid-template-columns: 1fr; gap: 40px; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.contact-info { display: grid; gap: 12px; }
.contact-kaart { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--lijn); text-decoration: none; transition: border-color .2s, transform .2s; }
.contact-kaart:hover { border-color: var(--oranje); transform: translateX(3px); }
.contact-kaart .info-ico { margin: 0; width: 48px; height: 48px; }
.contact-kaart small { display: block; color: var(--zacht); font-size: 13.5px; }
.contact-kaart strong { font-family: var(--kop-font); font-stretch: 95%; font-size: 19px; word-break: break-word; }
.status-groot { font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.sociaal-rij { display: flex; gap: 10px; flex-wrap: wrap; }
.sociaal-rij a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lijn); text-decoration: none; font-weight: 600; font-size: 15px; }
.sociaal-rij svg { width: 18px; height: 18px; }
.zij-donker .knop { margin-top: 6px; }
.kaart-strook { padding: 0 0 100px; }
.kaart-link { position: relative; display: block; border-radius: 28px; overflow: hidden; text-decoration: none; }
.kaart-link img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: center 72%; transition: transform .8s; }
.kaart-link:hover img { transform: scale(1.03); }
.kaart-label { position: absolute; left: 22px; bottom: 22px; right: 22px; max-width: 520px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: var(--schaduw); }
.kaart-label > svg { width: 26px; height: 26px; color: var(--oranje-tekst); flex: none; }
.kaart-label > span { flex: 1; }
.kaart-label strong { display: block; font-family: var(--kop-font); font-size: 19px; }
.kaart-label small { color: var(--zacht); font-size: 14px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .kaart-link img { aspect-ratio: 4 / 3; } .kaart-strook { padding-bottom: 64px; } }

/* over */
.verhaal { display: grid; grid-template-columns: 1.2fr .8fr; gap: 72px; align-items: start; }
.verhaal-tekst h2 { font-size: clamp(36px, 4.4vw, 56px); }
.verhaal-tekst p { font-size: 18px; color: #33373C; }
.verhaal-feiten { margin: 0; display: grid; gap: 14px; }
.verhaal-feiten div { padding: 20px 22px; border-radius: 18px; background: var(--licht); border-left: 6px solid var(--oranje); }
.verhaal-feiten div:nth-child(2) { border-color: var(--bordeaux); }
.verhaal-feiten div:nth-child(3) { border-color: var(--water); }
.verhaal-feiten div:nth-child(4) { border-color: var(--nacht); }
.verhaal-feiten dt { font-family: var(--kop-font); font-stretch: 85%; font-weight: 900; font-size: 30px; line-height: 1.05; }
.verhaal-feiten dd { margin: 2px 0 0; color: var(--zacht); }
@media (max-width: 900px) { .verhaal { grid-template-columns: 1fr; gap: 36px; } }
.team-blok { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.team-lijst { list-style: none; margin: 0; padding: 0; }
.team-lijst li { display: flex; flex-direction: column; padding: 14px 0; border-top: 1px solid var(--lijn); }
.team-lijst strong { font-family: var(--kop-font); font-stretch: 92%; font-size: 22px; }
.team-lijst span { color: var(--zacht); }
.team-beeld img { border-radius: 28px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (max-width: 900px) { .team-blok { grid-template-columns: 1fr; gap: 36px; } }
.galerij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-flow: dense; }
.galerij-item { padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.galerij-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s, filter .3s; }
.galerij-item:hover img { transform: scale(1.06); }
.galerij-item:nth-child(1), .galerij-item:nth-child(8) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .galerij { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* bedrijfsfitness */
.bf-grid { display: grid; grid-template-columns: .7fr 1.3fr 1fr; gap: 40px; align-items: start; }
.bf-groot { background: var(--oranje); border-radius: 28px; padding: 30px 26px; color: var(--nacht); }
.bf-groot strong { display: block; font-family: var(--kop-font); font-stretch: 78%; font-weight: 900; font-size: clamp(80px, 9vw, 130px); line-height: .85; }
.bf-groot span { font-weight: 600; font-size: 17px; }
@media (max-width: 1000px) { .bf-grid { grid-template-columns: 1fr; gap: 28px; } }

/* huisregels */
.regels-grid { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
.regels-nav { position: sticky; top: calc(var(--kop-h) + 24px); display: grid; gap: 4px; }
.regels-nav a { padding: 10px 14px; border-radius: 12px; text-decoration: none; font-family: var(--kop-font); font-stretch: 95%; font-weight: 700; color: var(--zacht); }
.regels-nav a:hover, .regels-nav a.actief { background: var(--licht); color: var(--tekst); }
.regels { max-width: 780px; }
.regel-groep { padding: 0 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--lijn); }
.regel-groep h2 { font-size: 34px; margin-bottom: 18px; }
.regel-groep .vink-lijst { gap: 14px; font-size: 17.5px; }
.regel-dl { margin: 0; display: grid; gap: 0; }
.regel-dl div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--lijn); }
.regel-dl dt { font-weight: 700; }
.regel-dl dd { margin: 0; color: #33373C; }
@media (max-width: 860px) { .regels-grid { grid-template-columns: 1fr; gap: 24px; } .regels-nav { position: static; display: flex; flex-wrap: wrap; } .regels-nav a { background: var(--licht); } .regel-dl div { grid-template-columns: 1fr; gap: 4px; } }

/* ------------------------------------------------ print (rooster) */
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  body { font-size: 10px; padding: 0; }
  .topbalk, .kop, .mobielmenu, .voet, .actiebalk, .concept-noot, .pagina-kop, .rooster-balk, .dag-knoppen, .cta-band, .rooster-noten, dialog, .skip { display: none !important; }
  .print-kop { display: flex !important; align-items: center; justify-content: space-between; margin: 0 0 6mm; font-size: 11px; }
  .print-kop .logo-svg { height: 34px; }
  .rooster-sectie { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .rooster { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px; overflow: visible; }
  .rdag { display: block !important; background: none; border: 1px solid #999; border-radius: 6px; padding: 5px; box-shadow: none !important; }
  .rdag-kop { font-size: 13px; margin: 0 0 4px; }
  .vandaag-tag { display: none !important; }
  .les-kaart { opacity: 1 !important; }
  .les-kaart.is-verborgen { display: none !important; }
  .les-knop { padding: 3px 4px 3px 7px; box-shadow: inset 3px 0 0 #000 !important; flex-direction: column !important; }
  .les-knop .tijd, .les-knop .naam { font-size: 10px; min-width: 0 !important; }
  .les-knop .wereld-naam { display: none; }
  .vrij-regel { font-size: 9px; padding: 2px 4px; flex-direction: column !important; }
  .les-kaart.is-nu .tijd::after { display: none; }
  .rdag-lessen { gap: 2px; }
}