/* UltraGym Hardenberg - mockup design system
   Light athletic theme, brand accent #00B2FF, Anton + Inter */

:root {
  --bg: #FFFFFF;
  --bg-raised: #EDF5FC;
  --panel: #FFFFFF;
  --line: rgba(13, 20, 28, 0.09);
  --line-strong: rgba(13, 20, 28, 0.15);
  --text: #0D1218;
  --text-muted: #55616E;
  --accent: #00B2FF;
  --accent-soft: rgba(0, 178, 255, 0.10);
  --accent-line: rgba(0, 178, 255, 0.35);
  --on-accent: #06121C;
  --dark: #0B0E13;
  --navy: #0A1626;
  --navy-line: rgba(255, 255, 255, 0.09);
  --navy-text: #F2F6FA;
  --navy-muted: rgba(213, 226, 240, 0.68);
  --shadow: 0 12px 32px rgba(13, 20, 28, 0.07);
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --accent-grad: linear-gradient(145deg, #22C0FF 0%, #00A3ED 45%, #0072B5 100%);
  --container: 1200px;
  --header-h: 76px;
  --promo-h: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Zonder deze regel wint elke component met een eigen display (.abo-kaart is
   flex, .opt-lijst is grid) het van het hidden-attribuut, en blijft er staan
   wat verborgen zou moeten zijn. */
[hidden] { display: none !important; }

/* Navy als canvaskleur: Safari (iOS) kleurt het vlak achter de adresbalk en de
   overscroll-gebieden met de html-achtergrond, niet met theme-color. */
html { scroll-behavior: smooth; background-color: var(--navy); }

body {
  /* Safari 26 (iOS) kleurt de adresbalk met de body-achtergrond (theme-color
     wordt genegeerd, html ook). Navy op body, het echte wit staat op main. */
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { background-color: var(--bg); }

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

h1.display { font-size: clamp(2.6rem, 6.4vw, 4.9rem); }
h2.display { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h3.display { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* Streepje naast het labeltje, zoals de eyebrow-labels op xxlgym */
.kicker::after {
  content: "";
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-line), transparent);
}

.section-head.center .kicker,
.statement-inner .kicker,
.cta-inner .kicker { gap: 0; }

.section-head.center .kicker::after,
.statement-inner .kicker::after,
.cta-inner .kicker::after { display: none; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-muted); }

.muted { color: var(--text-muted); }

.accent { color: var(--accent); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.btn svg { flex: none; transition: transform 0.18s ease; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #009EE4; transform: translateY(-2px); }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn-dark { background: var(--dark); color: #F2F5F9; }
.btn-dark:hover { background: #1A2030; transform: translateY(-2px); }

/* ---------- Promo bar ---------- */

.promo-bar {
  background: var(--accent);
  color: var(--on-accent);
  height: var(--promo-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 0.9rem;
}

.promo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  white-space: nowrap;
}

.promo-bar p { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.promo-bar a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
}

/* Glasbalk: de bovenste laag is de glans, daaronder het navy verloop. Beide
   zitten in de achtergrond zelf, dus er ligt niets over de tekst heen. De
   dekking blijft 0.80: lager oogt mooier maar dan zakt het contrast van de
   menu-items onder de leesbaarheidsgrens op een lichte pagina. */
.header-inner {
  height: 64px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02) 44%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, rgba(31, 57, 90, 0.80) 0%, rgba(13, 28, 47, 0.78) 55%, rgba(10, 22, 38, 0.82) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 30px;
  box-shadow:
    0 16px 40px rgba(7, 15, 26, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 26px rgba(120, 190, 255, 0.08);
}

/* Zonder backdrop-filter is er niets om doorheen te kijken: dan dekkend maken,
   anders wordt de tekst onleesbaar op een lichte achtergrond. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-inner { background: var(--navy); }
}

/* Sturen op breedte, niet op hoogte. Het logobestand heeft sinds kort een
   doorzichtige rand rondom, want het beeld raakte de randen en dat zag
   eruit alsof er boven en onder een hap uit was. Op hoogte sturen zou het
   merk zelf kleiner maken; op breedte blijft het precies even groot. */
.logo img { width: 112px; height: auto; }

/* Desktop: logo in het midden van de balk, links eromheen verdeeld.
   .main-nav lost op in display: contents zodat de groepen naast het logo komen. */
.main-nav { display: contents; }

.nav-groep {
  display: flex;
  align-items: center;
  gap: 34px;
  flex: 1;
}

.nav-groep:first-child { justify-content: flex-end; order: 1; }
.logo { order: 2; }
.nav-groep + .nav-groep { justify-content: flex-start; order: 3; }

.main-nav a {
  color: rgba(226, 236, 246, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.15s ease;
  position: relative;
  padding: 6px 0;
}

.main-nav a:hover { color: #FFFFFF; }

.main-nav a.is-active { color: #FFFFFF; }

.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: calc(var(--header-h) + var(--promo-h) + 72px) 0 96px;
  overflow: hidden;
  /* Licht blauw bovenaan dat naar wit zakt, zodat het beeld eronder loskomt */
  background: linear-gradient(180deg, #D3E7F9 0%, #DFEFFB 34%, #ECF5FD 62%, #F8FBFE 82%, var(--bg) 100%);
}

/* Zachte blauwe gloed achter de gecentreerde hero */
.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  width: min(1180px, 130vw);
  height: 680px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 178, 255, 0.18), transparent 72%);
  pointer-events: none;
}

/* Actiebalkje: gekleurd labeltje links, boodschap ernaast, pijl rechts.
   Een echt vlak met schaduw in plaats van een doorschijnend pilletje, zodat
   het als knop leest en niet als decoratie. */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 6px 5px 5px;
  margin-bottom: 26px;
  box-shadow: 0 6px 18px rgba(13, 20, 28, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hero-chip .chip-label {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-chip .chip-tekst {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}

.hero-chip .chip-pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #0083BD;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.hero-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: 0 10px 26px rgba(0, 178, 255, 0.22);
}

.hero-chip:hover .chip-pijl {
  background: var(--accent);
  color: var(--on-accent);
  transform: translateX(2px);
}

.hero-copy {
  position: relative;
  text-align: center;
  max-width: 58rem;
  margin: 0 auto;
}

.hero-copy h1 { margin-bottom: 24px; }
.hero-copy h1 em { font-style: normal; color: var(--accent); }
.hero-copy .lead { max-width: 42rem; margin: 0 auto 40px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* Feitenbalk met scheidingsstreepjes onder de hero-tekst */
.hero-facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 40px;
}

.hero-fact {
  padding: 4px clamp(20px, 4vw, 46px);
  text-align: center;
}

.hero-fact + .hero-fact { border-left: 1px solid var(--line-strong); }

.hero-fact svg { display: block; margin: 0 auto 10px; color: var(--accent); }

.hero-fact strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  letter-spacing: 0.02em;
  line-height: 1;
  /* cijfers even breed, anders trilt het getal tijdens het tellen */
  font-variant-numeric: tabular-nums;
}

.hero-fact strong em { font-style: normal; color: var(--accent); }

/* alleen het label eronder, niet de teller-span binnen strong */
.hero-fact > span {
  display: block;
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* Brede sfeerfoto direct onder de hero */
.hero-band {
  position: relative;
  margin-top: clamp(48px, 6vw, 72px);
}

.hero-band img {
  width: 100%;
  height: clamp(300px, 42vw, 520px);
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
}

/* Statuslabel op de foto: donker glas met een pulserend stipje, geen icoontegel */
.hero-card {
  position: absolute;
  left: 24px; bottom: 24px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 24px 14px 20px;
  border-radius: 18px;
  background: rgba(8, 18, 31, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 44px rgba(4, 10, 19, 0.42);
  color: #FFFFFF;
}

.hero-card-stip {
  position: relative;
  flex: none;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0, 178, 255, 0.9);
}

/* rustige puls die laat zien dat het nu geldt */
.hero-card-stip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  animation: stip-puls 2.6s ease-out infinite;
}

@keyframes stip-puls {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}

.hero-card-tekst strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hero-card-tekst span {
  display: block;
  margin-top: 4px;
  font-size: 0.84rem;
  color: rgba(226, 236, 246, 0.74);
}

/* ---------- Sections ---------- */

.section { padding: 104px 0; }
.section-tight { padding: 72px 0; }

/* Licht blauwe sectie, geeft ritme tussen de witte secties en de navy blokken */
.section.soft { background: var(--bg-raised); }

.section-head { max-width: 44rem; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 18px; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}

/* Let op de >: dit geldt voor een losse foto in de kolom, niet voor de foto's
   in een carrousel daarbinnen. Die hebben hun eigen regels verderop, en met
   een vaste hoogte van 480px erbovenop kreeg de ene foto een andere uitsnede
   dan de andere. */
.split-media > img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
}

/* Fotocarrousel in een split-kolom. De rij scrollt met snap-punten; elke foto is
   precies zo breed als de kolom, zodat er altijd één beeld tegelijk in beeld staat. */
.media-carrousel { position: relative; }

.carrousel-rij {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Bewust geen rand en geen ronding op de rij. De foto heeft ze zelf al, en
     twee afgeronde kaders over elkaar sluiten nooit precies aan: dan zie je
     vierkante fotohoeken binnen een ronde rand. Bovendien snijdt een rij die
     horizontaal scrolt zijn hoeken op de iPhone helemaal niet af. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrousel-rij::-webkit-scrollbar { display: none; }
/* De ronding en de rand zitten op dit vak, niet op de foto zelf.
   Safari klipt een foto niet altijd netjes op zijn eigen ronding, en tijdens
   het swipen helemaal niet: dan zie je vierkante fotohoeken binnen een ronde
   rand, met de donkere vulling van de foto ertussen. Dat is de zwarte rand
   die op de telefoon te zien was. Een gewoon vak met overflow hidden klipt
   wel betrouwbaar, ook terwijl het beeld beweegt. De mask-regel is een oud
   maar hardnekkig effectief duwtje voor Safari; isolation houdt de klip
   overeind als de browser de laag apart gaat tekenen. */
.carrousel-rij > li {
  flex: none;
  width: 100%;
  scroll-snap-align: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  background-color: #0D141C;
  /* De verhouding staat hier en niet op de foto. De foto vult dit vak
     daardoor helemaal, in de hoogte en in de breedte. Stond de verhouding op
     de foto, dan bleef er door afronding een streepje van dit vak over aan de
     onderkant, en dat zag je als een donkere rand om het beeld. */
  aspect-ratio: 3 / 2;
}
/* De foto's in de carrousel zijn allemaal 3:2. Stond hier een vaste hoogte,
   dan werd zo'n liggende foto in een staand vak geperst en zag je alleen een
   strook uit het midden: op een telefoon vaak niet meer dan het plafond.
   Met de verhouding van de foto zelf is hij altijd helemaal in beeld. */
.carrousel-rij img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Op een breed scherm een hoger kader, dichter bij hoe het was. Daar was het
   480 pixels vast; met 4:3 komt het op 405 en snijdt hij alleen links en
   rechts een klein stukje weg. Op de telefoon blijft het 3:2, want daar staat
   de foto over de volle breedte en dan zou een hoger kader er weer een strook
   uit het midden van maken. Dat was de oorspronkelijke klacht. */
@media (min-width: 921px) {
  .carrousel-rij > li { aspect-ratio: 4 / 3; }
}

/* Pijlen liggen over het beeld; op smalle schermen weg, daar swipe je. */
.carrousel-knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.carrousel-knop:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.carrousel-knop:disabled { opacity: 0.35; cursor: default; }
.carrousel-knop:disabled:hover { background: rgba(255, 255, 255, 0.92); color: var(--text); border-color: var(--line-strong); }
.carrousel-knop.vorige { left: 14px; }
.carrousel-knop.volgende { right: 14px; }

.carrousel-bolletjes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.carrousel-bolletjes button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Was 15% dekking: op een foto zie je dat niet, en dan lijkt het of er maar
     één foto is. Nu is te zien hoeveel er zijn en waar je bent. */
  background: rgba(13, 20, 28, 0.32);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.carrousel-bolletjes button:hover { background: rgba(13, 20, 28, 0.5); }
.carrousel-bolletjes button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--accent); }

.split-copy h2 { margin-bottom: 20px; }
.split-copy p { color: var(--text-muted); margin-bottom: 18px; }
.split-copy .btn { margin-top: 14px; }

/* ---------- Fotogalerij op de lespagina's ----------
   Groeit vanzelf mee als er straks meer foto's per les bijkomen: elke <figure>
   krijgt dezelfde vierkante uitsnede, ongeacht de verhouding van het bestand. */

.les-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.les-fotos figure {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
}

.les-fotos img {
  display: block;
  width: 100%;
  height: clamp(260px, 30vw, 380px);
  object-fit: cover;
  transition: transform 0.4s ease;
}

.les-fotos figure:hover img { transform: scale(1.04); }

/* Eén foto hoeft de rij niet uit te rekken tot de volle breedte. */
.les-fotos:has(figure:only-child) {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

/* ---------- Sfeerimpressie (horizontaal scrollende fotorij) ---------- */

.impressie {
  position: relative;
  /* rij loopt door tot de schermrand, koppen blijven binnen de container */
  overflow: hidden;
}

.impressie-rij {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  padding: 4px max(24px, calc((100vw - var(--container)) / 2 + 24px)) 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.impressie-rij::-webkit-scrollbar { display: none; }

.impressie-kaart {
  flex: none;
  width: clamp(260px, 34vw, 420px);
  height: clamp(320px, 38vw, 430px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
}

.impressie-kaart.breed { width: clamp(300px, 48vw, 620px); }

.impressie-kaart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.impressie-kaart:hover img { transform: scale(1.04); }

/* Gekleurde kaart tussen de foto's, zoals de statkaart op xxlgym */
.impressie-kaart.is-stat {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 34px;
}

.impressie-kaart.is-stat .stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 14px;
}

.impressie-kaart.is-stat strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.impressie-kaart.is-stat p {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.5;
  opacity: 0.85;
}

.impressie-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.impressie-hint svg { color: var(--accent); }

/* ---------- Stats band ---------- */

.stats-band {
  background: radial-gradient(70% 160% at 50% 0%, rgba(0, 178, 255, 0.14), transparent 60%), var(--navy);
  color: var(--navy-text);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stat {
  padding: 56px 32px;
  text-align: center;
}

.stat + .stat { border-left: 1px solid var(--navy-line); }

.stat strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4rem);
  letter-spacing: 0.01em;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

.stat strong em { font-style: normal; color: var(--accent); }

.stat > span { color: var(--navy-muted); font-size: 0.98rem; }

.stat strong span { font-size: inherit; color: inherit; }

/* ---------- Voordeelkaarten met foto ---------- */

.voordeel-card { min-height: 420px; }

.voordeel-card .overlay {
  background: linear-gradient(to top, rgba(7, 10, 15, 0.96) 20%, rgba(7, 10, 15, 0.6) 62%, transparent);
  padding-top: 72px;
}

.voordeel-card p { font-size: 0.92rem; }

/* ---------- Lesson cards ---------- */

.lessons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lesson-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}

.lesson-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.lesson-card:hover img { transform: scale(1.045); }

.lesson-card .overlay {
  position: relative;
  width: 100%;
  padding: 26px 26px 24px;
  background: linear-gradient(to top, rgba(7, 10, 15, 0.95) 15%, rgba(7, 10, 15, 0.55) 60%, transparent);
  color: #F2F5F9;
}

.lesson-card h2, .lesson-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.lesson-card p { color: rgba(235, 240, 246, 0.85); font-size: 0.95rem; line-height: 1.55; }

.lesson-card.tall { grid-row: span 2; min-height: 100%; }

/* ---------- Proefles boekingsmodule ---------- */

.boeking-kop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.boeking-kop strong {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
}

.boeking-weeknav { margin-bottom: 12px; }
.boeking-weeknav .rooster-week { font-size: 1rem; }
.boeking-weeknav .rooster-nav button { width: 38px; height: 38px; }

.dag-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.dag-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 2px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dag-chip span { font-size: 0.7rem; color: var(--text-muted); }
.dag-chip strong { font-size: 1.05rem; font-weight: 700; color: var(--text); }

.dag-chip:hover:not(:disabled) { border-color: var(--accent-line); }

.dag-chip.is-gekozen {
  background: var(--accent);
  border-color: var(--accent);
}

.dag-chip.is-gekozen span, .dag-chip.is-gekozen strong { color: var(--on-accent); }

.dag-chip:disabled { opacity: 0.35; cursor: not-allowed; }

.tijd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
  min-height: 52px;
}

.tijd-grid .rooster-status { padding: 14px; grid-column: 1 / -1; }

.tijd-chip {
  padding: 11px 4px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tijd-chip:hover { border-color: var(--accent-line); }

.tijd-chip.is-gekozen {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.boeking-samenvatting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.boeking-samenvatting svg { color: var(--accent); flex: none; }

.boeking-samenvatting[hidden] { display: none; }

.form-card .pricing-note { text-align: left; margin-top: 22px; font-size: 0.9rem; }
.form-card .pricing-note a { font-weight: 600; }

/* ---------- Lesrooster ---------- */

.rooster-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rooster-day { padding: 22px 16px; }

.rooster-day + .rooster-day { border-left: 1px solid var(--line); }

.rooster-day h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.rooster-slot {
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  border-radius: 0 8px 8px 0;
  padding: 9px 10px 10px;
  margin-bottom: 10px;
}

.rooster-slot strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}

.rooster-slot span { display: block; font-size: 0.82rem; color: var(--text-muted); }

.rooster-slot .rooster-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2px 0;
}

.rooster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.rooster-week {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}

.rooster-nav { display: flex; gap: 10px; }

.rooster-nav button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.rooster-nav button:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.rooster-day h3 span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 2px;
}

.rooster-day.is-today h3 { color: var(--accent); }

.rooster-empty { font-size: 0.85rem; color: var(--text-muted); }

.rooster-status {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* losse kaart, gecentreerd (dagpas) */
.pricing-grid.enkel {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}

/* twee kaarten naast elkaar (Comfort en Premium) */
.pricing-grid.duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
  margin: 0 auto;
}

.price-card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.price-card:hover { transform: translateY(-4px); border-color: rgba(0, 178, 255, 0.45); }

.price-card.featured {
  background: linear-gradient(170deg, rgba(0, 178, 255, 0.10), rgba(0, 178, 255, 0.02) 55%), var(--panel);
  border-color: rgba(0, 178, 255, 0.55);
}

/* Tab die rechtsboven uit de kaart steekt, zoals het label op xxlgym */
.price-card .plan-tag {
  position: absolute;
  top: -15px; right: 28px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 8px 20px rgba(0, 178, 255, 0.28);
}

.price-card h2, .price-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.price-card .plan-sub { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 26px; }

/* "vanaf" en de oude prijs op een eigen regel boven het grote bedrag */
.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 28px;
}

.price-line .from,
.price-line .amount-old { flex-basis: 100%; }

.price-line .amount {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 4.4vw, 3.7rem);
  line-height: 1;
}

.price-line .per { color: var(--text-muted); font-size: 0.95rem; }
.price-line .from { color: var(--text-muted); font-size: 0.95rem; }

.plan-list { list-style: none; display: grid; gap: 13px; margin-bottom: 34px; }

.plan-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.97rem;
  color: var(--text-muted);
}

.plan-list li svg { flex: none; margin-top: 4px; color: var(--accent); }

.price-card .btn { margin-top: auto; width: 100%; }

.pricing-note { text-align: center; margin-top: 36px; color: var(--text-muted); font-size: 0.97rem; }


/* ---------- Donkere abonnementensectie ---------- */

/* .section-dark geeft elke sectie dezelfde donkere behandeling; .pricing-dark voegt
   daar alleen de regels voor de prijskaarten aan toe. */
.section-dark,
.pricing-dark {
  background: radial-gradient(60% 130% at 50% 0%, rgba(0, 178, 255, 0.15), transparent 60%), var(--navy);
  color: var(--navy-text);
}

.section-dark .section-head h2,
.pricing-dark .section-head h2 { color: var(--navy-text); }
.section-dark .section-head .lead,
.pricing-dark .section-head .lead, .pricing-dark .pricing-note { color: var(--navy-muted); }
.pricing-dark .pricing-note a { color: var(--accent); }

.pricing-dark .price-card { border-color: transparent; color: var(--text); }

.pricing-dark .price-card.featured {
  background: linear-gradient(165deg, rgba(0, 178, 255, 0.14), rgba(0, 178, 255, 0.02) 55%), #0D1D31;
  border: 1px solid rgba(0, 178, 255, 0.55);
  box-shadow: 0 0 46px rgba(0, 178, 255, 0.22);
  color: var(--navy-text);
}

.pricing-dark .price-card.featured .plan-sub,
.pricing-dark .price-card.featured .plan-list li,
.pricing-dark .price-card.featured .per,
.pricing-dark .price-card.featured .from { color: var(--navy-muted); }

.pricing-dark .price-card.featured .plan-tag {
  background: #FFFFFF;
  color: var(--navy);
  left: auto;
  right: 20px;
}

/* De uitgelichte kaart in een .oplopend-grid krijgt op elke pagina dezelfde blauwe
   gloed; dat is het enige verschil met de witte kaarten ernaast. */
.pricing-grid.oplopend .price-card.featured {
  box-shadow: 0 0 46px rgba(0, 178, 255, 0.22);
}

/* In een donkere sectie blijven alle kaarten wit, dus de donkere featured-stijl terugdraaien. */
.pricing-dark .pricing-grid.oplopend .price-card.featured {
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(0, 178, 255, 0.55);
}

.pricing-dark .pricing-grid.oplopend .price-card.featured .plan-sub,
.pricing-dark .pricing-grid.oplopend .price-card.featured .plan-list li,
.pricing-dark .pricing-grid.oplopend .price-card.featured .per,
.pricing-dark .pricing-grid.oplopend .price-card.featured .from { color: var(--text-muted); }

.pricing-dark .pricing-grid.oplopend .price-card.featured .amount { color: var(--text); }

/* terug naar het blauwe labeltje van de lichte kaarten; wit-op-wit valt weg */
.pricing-dark .pricing-grid.oplopend .price-card.featured .plan-tag {
  background: var(--accent);
  color: var(--on-accent);
  left: auto;
  right: 28px;
}

/* ---------- Premium: warme, luxere variant van de featured kaart ---------- */

:root {
  --premium: #D8B25C;
  --premium-licht: #F0DCA8;
  --premium-diep: #8C6B22;
}

.price-card.premium {
  background:
    linear-gradient(170deg, rgba(216, 178, 92, 0.16), rgba(216, 178, 92, 0.03) 55%),
    var(--panel);
  border-color: rgba(216, 178, 92, 0.55);
}

.price-card.premium:hover { border-color: rgba(216, 178, 92, 0.85); }

/* dunne gouden glansrand over de bovenkant */
.price-card.premium::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, transparent, var(--premium-licht), var(--premium), transparent);
}

.price-card.premium .plan-tag {
  background: linear-gradient(135deg, var(--premium-licht), var(--premium));
  color: #3A2C08;
  box-shadow: 0 8px 20px rgba(216, 178, 92, 0.35);
}

.price-card.premium .plan-list li svg { color: var(--premium-diep); }

.price-card.premium .btn-primary {
  background: linear-gradient(135deg, var(--premium-licht), var(--premium));
  border-color: transparent;
  color: #3A2C08;
}

.price-card.premium .btn-primary:hover {
  background: linear-gradient(135deg, var(--premium), var(--premium-diep));
  color: #FFFFFF;
}

/* op de donkere tarievensectie mag de kaart echt oplichten */
.pricing-dark .price-card.featured.premium {
  background: linear-gradient(165deg, rgba(216, 178, 92, 0.20), rgba(216, 178, 92, 0.03) 55%), #14192B;
  border: 1px solid rgba(216, 178, 92, 0.6);
  box-shadow: 0 0 52px rgba(216, 178, 92, 0.22);
}

.pricing-dark .price-card.featured.premium .plan-list li svg { color: var(--premium); }
.pricing-dark .price-card.featured.premium .amount { color: var(--premium-licht); }

.pricing-dark .price-card.featured.premium .plan-tag {
  background: linear-gradient(135deg, var(--premium-licht), var(--premium));
  color: #3A2C08;
}

/* ---------- Veldstatus (o.a. IBAN-controle) ---------- */

.veld-status {
  margin-top: 7px;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}

.veld-status.is-goed { color: #17835A; }
.veld-status.is-fout { color: #C0392B; }
.veld-status.is-let-op { color: #94620A; }

.veld-status::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.veld-status.is-goed::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M2.5 8l3.2 3L12.5 4' stroke='%2317835A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.veld-status.is-fout::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Ccircle cx='7.5' cy='7.5' r='6.2' stroke='%23C0392B' stroke-width='1.6'/%3E%3Cpath d='M7.5 4.2v4M7.5 10.4v.6' stroke='%23C0392B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.veld-status.is-let-op::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.5 1.8 14 13.2H1z' stroke='%2394620A' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M7.5 6v2.6M7.5 10.8v.5' stroke='%2394620A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

input.is-fout { border-color: #C0392B; }
input.is-goed { border-color: #17835A; }
input.is-let-op { border-color: #C79A1E; }

/* label voor eenmalige inschrijfkosten */
.rooster-tag.is-kosten {
  background: rgba(192, 57, 43, 0.10);
  color: #A5342A;
}

.totaal-inschrijf { display: block; margin-top: 2px; font-size: 0.82rem; }
.totaal-inschrijf.is-kosten { color: #A5342A; }

/* ---------- Veelgestelde vragen ---------- */

.faq-lijst {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-weight: 600;
  font-size: 1.05rem;
  transition: color 0.15s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* plusje dat naar een minnetje draait */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 14px no-repeat;
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(90deg);
  background: linear-gradient(var(--accent), var(--accent)) center/14px 2px no-repeat;
}

.faq-antwoord {
  padding: 0 44px 24px 0;
  color: var(--text-muted);
  line-height: 1.65;
}

.faq-antwoord a { color: var(--accent); }

.amount-old {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--navy-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.plan-list li.niet { color: var(--text-muted); opacity: 0.6; }
.plan-list li.niet { text-decoration: line-through; }
.plan-list li.niet svg { color: var(--text-muted); }

.price-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}

.price-actions .btn { flex: 1; margin-top: 0; }

.korting-pil {
  flex: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: 0 0 22px rgba(0, 178, 255, 0.5);
  white-space: nowrap;
}

.aftel-pil {
  margin-top: 16px;
  background: #FFFFFF;
  color: var(--navy);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.aftel-pil strong { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Statement / overstap ---------- */

.statement {
  background: radial-gradient(55% 130% at 50% 100%, rgba(0, 178, 255, 0.16), transparent 62%), var(--navy);
  color: var(--navy-text);
}

.statement-inner {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.statement-inner h2 { margin-bottom: 24px; }
.statement-inner p { color: var(--navy-muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin-bottom: 34px; }

/* ---------- Partner logos ---------- */

.partners {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 8vw, 96px);
  flex-wrap: wrap;
}

.partners img {
  height: 44px;
  width: auto;
  filter: brightness(0);
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.partners img:hover { opacity: 0.8; }

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.gallery-grid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
}

.gallery-grid .wide { grid-column: span 2; }

/* ---------- Trainer ---------- */

.trainer-card {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 56px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.trainer-card img { width: 100%; height: 100%; object-fit: cover; }

.trainer-card .trainer-copy { padding: 48px 48px 48px 0; }

.trainer-copy h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.trainer-copy p { color: var(--text-muted); margin-bottom: 18px; }

.trainer-facts {
  display: flex;
  gap: 40px;
  margin: 28px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.trainer-facts strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  display: block;
  line-height: 1.1;
}

.trainer-facts span { font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
}

.info-block { border-top: 1px solid var(--line); padding: 26px 0; }
.info-block:last-child { border-bottom: 1px solid var(--line); }

/* drie praktische blokken naast elkaar (dagpas) */
.praktisch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 48px;
}

.praktisch-grid .info-block:last-child { border-bottom: none; }
.praktisch-grid .info-block p + p { margin-top: 6px; }

.info-block h2, .info-block h3 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.info-block p, .info-block a { color: var(--text); font-size: 1.05rem; }
.info-block .sub { color: var(--text-muted); font-size: 0.95rem; margin-top: 6px; }
.info-block a:hover { color: var(--accent); }

/* In een donkere sectie is de standaard donkere tekstkleur onleesbaar. */
.section-dark .info-block,
.pricing-dark .info-block { border-top-color: var(--navy-line); }
.section-dark .info-block:last-child,
.pricing-dark .info-block:last-child { border-bottom-color: var(--navy-line); }
.section-dark .info-block p, .section-dark .info-block a,
.pricing-dark .info-block p, .pricing-dark .info-block a { color: var(--navy-text); }
.section-dark .info-block .sub,
.pricing-dark .info-block .sub { color: var(--navy-muted); }
.section-dark .hours-table td,
.pricing-dark .hours-table td { color: var(--navy-text); border-bottom-color: var(--navy-line); }

.hours-table { width: 100%; border-collapse: collapse; }

.hours-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}

.hours-table tr:last-child td { border-bottom: none; }
.hours-table td:last-child { text-align: right; color: var(--text-muted); }

/* ---------- Form ---------- */

.form-card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 44px;
}

.form-card h2 { margin-bottom: 10px; }
.form-card > p { color: var(--text-muted); margin-bottom: 32px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  transition: border-color 0.15s ease;
}

.field textarea { min-height: 130px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-success {
  display: none;
  margin-top: 20px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--text);
  font-size: 0.98rem;
}

.form-success.visible { display: block; }

/* ---------- Inschrijfformulier ---------- */

.inschrijf-card { max-width: 760px; margin: 0 auto; }

.inschrijf-card h2 { margin-bottom: 10px; }
.inschrijf-card > p { color: var(--text-muted); margin-bottom: 30px; }

.form-kop {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 36px 0 14px;
}

/* Productkeuze: de prijs staat rechts, los van de omschrijving ernaast. */
.dp-producten { margin-bottom: 34px; }
.dp-producten .opt-row strong { flex: none; font-variant-numeric: tabular-nums; }
.dp-producten input:checked ~ span { font-weight: 600; }

.stappen {
  list-style: none;
  display: flex;
  gap: 8px;
  margin-bottom: 34px;
}

.stappen li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--line);
}

.stappen li span {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  font-size: 0.8rem;
}

.stappen li.is-actief {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.stappen li.is-actief span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.stappen li.is-klaar { border-bottom-color: var(--accent-line); }

.stappen li.is-klaar span {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.stap[hidden] { display: none; }

.stap-nav { display: flex; gap: 14px; }

.stap-nav #btn-vorige { flex: 0 0 auto; }
.stap-nav #btn-volgende, .stap-nav #btn-versturen { flex: 1; }
.stap-nav button[hidden] { display: none; }

.keuze-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.keuze-card {
  position: relative;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 20px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.keuze-card:hover { border-color: var(--accent-line); }

.keuze-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.keuze-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.keuze-card strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.keuze-card > span { display: block; font-size: 0.85rem; color: var(--text-muted); margin: 4px 0 10px; }

.keuze-card em { font-style: normal; font-weight: 700; font-size: 0.95rem; }

.keuze-card .keuze-tag {
  position: absolute;
  top: -11px;
  right: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0;
}

/* ---------- Dagpas bestellen ---------- */

.form-hint { color: var(--text-muted); font-size: 0.9rem; margin-top: 14px; }

.demo-melding {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.demo-melding strong {
  flex: none;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dagpas-klaar {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 34px;
  text-align: center;
}

.dagpas-klaar[hidden] { display: none; }

.dagpas-vink {
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 26px rgba(0, 178, 255, 0.35);
}

.dagpas-klaar > p { color: var(--text-muted); margin-bottom: 26px; }
.dagpas-klaar .hero-actions { justify-content: center; margin-top: 26px; }
.dagpas-klaar .demo-melding { text-align: left; }

.qr-kaart {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
}

.qr-code {
  flex: none;
  width: 132px; height: 132px;
  padding: 8px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
}

.qr-code svg, .qr-code img { width: 100%; height: 100%; display: block; }

.qr-info > span { display: block; font-size: 0.82rem; }

.qr-info > strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.qr-info p { margin-top: 10px; color: var(--text-muted); font-size: 0.9rem; }

/* ---------- Info-knopje en pop-up ---------- */

.keuze-wrap, .opt-wrap { position: relative; display: flex; }
.keuze-wrap > .keuze-card, .opt-wrap > .opt-row { flex: 1; }
.keuze-wrap > .keuze-card { padding-bottom: 20px; }
.opt-wrap > .opt-row { padding-right: 46px; }

.info-knop {
  position: absolute;
  right: 12px;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.keuze-wrap .info-knop { bottom: 16px; }
.opt-wrap .info-knop { top: 50%; transform: translateY(-50%); }

/* Op smalle schermen passen naam, prijs en het (i)-knopje niet naast elkaar:
   laat de prijs dan onder de naam vallen in plaats van buiten de kaart. */
@media (max-width: 460px) {
  .opt-wrap > .opt-row { flex-wrap: wrap; padding-right: 44px; }
  .opt-wrap > .opt-row > span { min-width: 0; }
  .opt-wrap > .opt-row > em { width: 100%; margin-left: 30px; white-space: normal; }
}

.info-knop:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #0083BD;
}

.info-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.info-modal[hidden] { display: none; }

.info-modal-achtergrond {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 31, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.info-modal-paneel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(7, 15, 26, 0.35);
  padding: 34px 34px 30px;
}

.info-modal-sluit {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.info-modal-sluit:hover { border-color: var(--accent); color: var(--accent); }

.info-modal-paneel h3 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin-bottom: 6px;
  padding-right: 40px;
}

.info-modal-tekst p { color: var(--text-muted); margin-top: 14px; font-size: 0.98rem; }
.info-modal-tekst .prijsregel { color: var(--text); font-weight: 600; }

.info-modal-tekst ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.info-modal-tekst li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.96rem;
  color: var(--text-muted);
}

.info-modal-tekst li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.info-modal-tekst li.niet::before { background: var(--line-strong); }

.opt-lijst { display: grid; gap: 10px; }

.opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s ease;
}

.opt-row:hover { border-color: var(--accent-line); }

.opt-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: none;
}

.opt-row span { flex: 1; }

/* De akkoordtekst is een hele alinea, geen labeltje: ruimer regelafstand en
   het vinkje bovenaan uitgelijnd in plaats van gecentreerd. */
.akkoord-row { align-items: flex-start; }
.akkoord-row span { font-size: 0.94rem; line-height: 1.55; font-weight: 400; }
.akkoord-row input { margin-top: 2px; }

.opt-row em { font-style: normal; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

.opt-row .rooster-tag { margin-left: 6px; }

.looptijd-blok[hidden] { display: none; }

.handtekening {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.handtekening.mist { border-color: #E5484D; }

.handtekening canvas {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
}

.handtekening-voet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px dashed var(--line-strong);
  font-size: 0.85rem;
}

.handtekening-wis {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.handtekening-wis:hover { border-color: var(--accent); color: var(--accent); }

.totaal-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 32px 0 20px;
}

.totaal-band > div > span { display: block; font-size: 0.85rem; }
.totaal-band > div > strong { font-size: 1.02rem; }

.totaal-prijs { text-align: right; }

.totaal-prijs strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
}

.totaal-prijs span { font-size: 0.85rem; }

.form-fout {
  margin-top: 16px;
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid rgba(229, 72, 77, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  color: #C62A30;
  font-size: 0.95rem;
}

.form-fout[hidden] { display: none; }

/* ---------- CTA band ---------- */

.cta-band { position: relative; overflow: hidden; background: var(--navy); color: var(--navy-text); }

.cta-band .cta-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11, 14, 19, 0.94) 25%, rgba(11, 14, 19, 0.6) 65%, rgba(11, 14, 19, 0.42));
  pointer-events: none;
}

/* Vangnet. De waas hierboven ligt los over de sectie en komt daardoor boven
   alles wat gewoon in de tekststroom staat. Vergeet je .cta-inner, dan staat
   de hele afsluiting onder een donker vlies: kop, tekst en knoppen half
   doorzichtig. Dat is precies wat er op de lespagina's en de plaatspagina's
   gebeurde. Deze regel maakt het onmogelijk. */
.cta-band > .container {
  position: relative;
  z-index: 1;
}

.cta-inner {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.cta-inner h2 { margin-bottom: 20px; }
.cta-inner p { color: #A7B0BC; margin-bottom: 36px; }
.cta-inner .hero-actions { justify-content: center; }

.cta-band .btn-ghost { border-color: rgba(255, 255, 255, 0.32); color: #F2F5F9; }
.cta-band .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Page hero (subpages) ---------- */

.page-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--promo-h) + 88px) 0 88px;
  overflow: hidden;
}

.page-hero .page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.30;
}

/* Zelfde lichtblauwe waas als de homepage-hero, zodat de subpagina's aansluiten */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 50% 30%, rgba(233, 244, 252, 0.74), rgba(228, 241, 251, 0.93) 70%),
    linear-gradient(180deg, rgba(220, 237, 251, 0.85), rgba(246, 250, 254, 0.9) 65%, var(--bg) 100%);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 1; }

/* Gecentreerd, zodat de subpagina's aansluiten op de nieuwe homepage-hero */
.page-hero .container { text-align: center; }
.page-hero h1 { margin: 0 auto 20px; max-width: 20ch; }
.page-hero .lead { max-width: 40rem; margin-left: auto; margin-right: auto; }
.page-hero .kicker { gap: 0; }
.page-hero .kicker::after { display: none; }
.page-hero .hero-actions { margin: 36px 0 0; justify-content: center; }

/* ---------- Tekstpagina's (privacy, voorwaarden) ---------- */

/* Zonder foto erachter mag de hero korter en zonder waas. */
.page-hero-plat { padding-bottom: 56px; }
.page-hero-plat::after { display: none; }
.page-hero-plat { background: linear-gradient(180deg, #E3F0FA 0%, #EDF5FC 55%, var(--bg-raised) 100%); }

.tekst-pagina { max-width: 46rem; }

.tekst-blok {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
}

.tekst-blok + .tekst-blok { margin-top: 24px; }

.tekst-blok h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin-bottom: 12px;
}

.tekst-blok h2 + p { margin-top: 0; }
.tekst-blok p { margin-bottom: 16px; }
.tekst-blok p:last-child { margin-bottom: 0; }
.tekst-blok h2:not(:first-child) { margin-top: 34px; }

/* Genummerde artikelen: nummer buiten de tekstkolom zodat lange alinea's netjes uitlijnen. */
.juridisch-lijst { margin: 0 0 8px; padding-left: 1.6em; display: grid; gap: 14px; }
.juridisch-lijst > li { padding-left: 4px; }
.juridisch-lijst li::marker { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.juridisch-sublijst {
  margin: 12px 0 0;
  padding-left: 1.5em;
  display: grid;
  gap: 10px;
  list-style: lower-alpha;
}

.tekst-blok .juridisch-lijst + h2 { margin-top: 38px; }

/* Nog in te vullen tekst: herkenbaar zonder dat het als foutmelding leest. */
.tekst-invullen {
  color: var(--text-muted);
  border-left: 3px solid var(--accent-line);
  padding-left: 16px;
}

.tekst-let-op {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.tekst-let-op p { margin: 0; font-size: 0.97rem; }

.vier-oh-vier-lijst { list-style: none; display: grid; gap: 12px; }
.vier-oh-vier-lijst a { font-weight: 500; }
.tekst-datum { color: var(--text-muted); font-size: 0.9rem; }

@media (max-width: 700px) {
  .tekst-blok { padding: 28px 22px; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--navy-text);
  padding: 72px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-bottom: 56px;
}

/* Het logo in de voettekst is nu een link naar de voorpagina. De link zelf
   hoeft niets te doen aan de opmaak: hij valt strak om het logo heen, zodat
   de ruimte eronder blijft zoals hij was. */
.footer-brand > a { display: inline-block; }
.footer-brand img { height: 26px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: var(--navy-muted); font-size: 0.95rem; max-width: 26rem; }

.footer-col h3 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-muted);
  margin-bottom: 18px;
}

.footer-col ul { list-style: none; display: grid; gap: 11px; }
.footer-col a, .footer-col li { color: var(--navy-text); font-size: 0.97rem; }
.footer-col a:hover { color: var(--accent); }
.footer-col .soft { color: var(--navy-muted); }

/* Sociale link als icoon: klikvlak van 40px zodat hij op mobiel goed raakbaar blijft. */
.footer-col .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -10px 0 -10px -10px;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.footer-col .social-link:hover { background: rgba(255, 255, 255, 0.08); }
.footer-col .social-link svg { display: block; }

.footer-bottom {
  border-top: 1px solid var(--navy-line);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--navy-muted);
  font-size: 0.9rem;
}

/* Juridische links staan naast de copyright-regel; op mobiel onder elkaar te smal, dus wrappend. */
.footer-juridisch { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Lichter dan de omringende tekst, zodat de credit-link herkenbaar is als link. */
.footer-bottom a { color: var(--navy-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(213, 226, 240, 0.35); }
.footer-bottom a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ---------- Google-reviews ---------- */

/* Scoreblok: het Google-logo, het cijfer en de sterren staan op één regel gecentreerd,
   met de meta-regel en de doorklik eronder. */
.reviews-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
}
.reviews-google { display: inline-flex; }
.reviews-score-cijfer { display: inline-flex; align-items: center; gap: 14px; }
.reviews-score-cijfer strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
/* Sterrenmeter: twee identieke rijen over elkaar. De onderste is grijs, de bovenste
   oranje en afgekapt op 4,8/5 = 96%, zodat de laatste ster gedeeltelijk oplicht. */
.sterren-meter { position: relative; display: inline-block; line-height: 0; }
.sterren-laag { display: flex; gap: 3px; }
.sterren-leeg { color: #D3DCE5; }
.sterren-vol {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  overflow: hidden;
  color: #F5A623;
}
.sterren-vol svg { flex: none; }
.reviews-score-meta { color: var(--text-muted); margin: 0; }
.reviews-score-meta strong { color: var(--text); font-weight: 600; }

.reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.reviews-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Drie kaarten tegelijk in beeld, de rest schuift ernaast. De kaarten rekken mee
   tot de hoogste, zodat er niets verspringt bij het doorwisselen. */
.reviews-rij {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews-rij::-webkit-scrollbar { display: none; }
.reviews-rij > li {
  flex: none;
  width: calc((100% - 48px) / 3);
  scroll-snap-align: start;
}
.review-kaart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.review-sterren { display: inline-flex; gap: 2px; color: #F5A623; }
.review-kaart blockquote {
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
}
.review-auteur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review-auteur strong { display: block; font-size: 0.9375rem; }
.review-auteur em {
  display: block;
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
/* Initiaal in plaats van een Google-profielfoto: die mogen we niet hotlinken. */
.review-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9375rem;
}

@media (max-width: 920px) {
  /* Eén review tegelijk: dat scheelt op mobiel twee kaarthoogtes aan paginalengte. */
  .reviews-rij { gap: 16px; }
  .reviews-rij > li { width: 100%; }
  .review-kaart { padding: 22px; }
}

/* ---------- Bottom nav (mobiel) ---------- */

.bottom-nav { display: none; }

@media (max-width: 920px) {
  /* Balk met wat diepte: iets lichter navy bovenin dat naar beneden verloopt,
     een dun lichtrandje aan de bovenkant en een zachte blauwe gloed eronder. */
  .bottom-nav {
    position: fixed;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0) 70%),
      linear-gradient(180deg, rgba(31, 57, 90, 0.80) 0%, rgba(13, 28, 47, 0.78) 58%, rgba(10, 24, 42, 0.82) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    box-shadow:
      0 18px 44px rgba(7, 15, 26, 0.30),
      0 10px 28px rgba(0, 178, 255, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05),
      inset 0 0 26px rgba(120, 190, 255, 0.08);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bottom-nav { background: var(--navy); }
  }

  /* Extra gloed onder de balk, vooral zichtbaar op de lichte homepage */
  .bottom-nav::before {
    content: "";
    position: absolute;
    left: 10%; right: 10%;
    bottom: -9px;
    height: 26px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(0, 178, 255, 0.75), transparent 78%);
    filter: blur(11px);
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
  }

  .is-home .bottom-nav::before { opacity: 1; }

  .bottom-nav a {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 2px;
    border-radius: 999px;
    color: rgba(220, 232, 244, 0.88);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .bottom-nav a svg { display: block; }

  .bottom-nav a.is-actief {
    color: var(--accent);
    background: rgba(0, 178, 255, 0.12);
  }

  /* Uit beeld zodra de footer in zicht komt: daar staan dezelfde links al,
     en de balk zou de onderkant van de pagina afdekken. */
  .bottom-nav.is-verborgen {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
  }

  .site-footer { padding-bottom: 56px; }
}

/* ---------- GSAP beginstaten (alleen homepage, gezet via .has-anim) ---------- */

.has-anim .site-header,
.has-anim .hero-copy h1,
.has-anim .hero-copy .lead,
.has-anim .hero .hero-actions,
.has-anim .hero-facts,
.has-anim .hero-band img,
.has-anim .hero-card { visibility: hidden; }

.hero-line { will-change: transform; }

/* ---------- Reveal animation ---------- */

/* Een blok is standaard gewoon zichtbaar. Het invliegen komt er pas bij als
   het script draait: dat zet de vlag reveal-actief op de pagina, en alleen
   onder die vlag wordt een blok tijdelijk verborgen. Hapert het script, dan
   komt die vlag er nooit en zie je de hele pagina. Andersom, zoals het eerst
   was, betekende dat een hapering de pagina wit liet. */
.reveal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.reveal-actief .reveal:not(.in-view) {
  opacity: 0;
  transform: translateY(22px);
}

/* De noodrem. Zet het script de vlag reveal-uit, dan is de animatie voorgoed
   van de baan voor deze pagina. transition op none is hier het punt: dat
   breekt ook een overgang af die halverwege is blijven staan, en dat is
   precies wat er gebeurt als de browser het tabblad even niet toont. */
html.reveal-uit .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Zonder JavaScript wordt in-view nooit gezet en zou de halve pagina onzichtbaar
   blijven. De noscript-regel in de head zet .reveal dan direct op zichtbaar. */

@media (prefers-reduced-motion: reduce) {
  html.reveal-actief .reveal:not(.in-view) { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .hero-card-stip::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .nav-groep { gap: 24px; }
  .trainer-card { grid-template-columns: 320px 1fr; gap: 40px; }
}

@media (max-width: 920px) {
  /* Mobiel: geen balk bovenaan. Alleen het logo zweeft bovenaan in het midden,
     de navigatie zit volledig in de balk onderaan. */
  /* De ruimte boven het logo als padding op de header zelf: als margin-top op
     .header-inner klapt hij samen met de rand en verdwijnt hij. */
  .site-header {
    pointer-events: none;
    padding-top: 16px;
  }

  /* De mobiele kop is 48px hoog (16px ruimte + 32px logo), niet de 76px van de
     desktopbalk. Zonder deze correctie reserveert de hero de desktophoogte en
     valt er een gat van bijna 80px onder het logo. */
  :root { --header-h: 52px; }

  .header-inner {
    height: auto;
    margin-top: 0;
    padding: 0 4px;
    justify-content: center;
    background: none;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .main-nav { display: none; }

  /* Het logo zweeft kaal over de pagina. Het bestand is wit; op lichte
     secties keren we het om naar zwart, op de donkere secties laten we het
     wit. Welke sectie eronder ligt bepaalt main.js via .op-donker. */
  .logo {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    /* Het logo is 112 bij 36 pixels en dat was ook precies het vlak waar je op
       kon tikken. Apple houdt 44 pixels aan als ondergrens, en zes pixels
       ernaast tikte je al mis. Vandaar "de ene keer werkt het wel en de andere
       keer niet". De ruimte eromheen maakt het vlak 152 bij 60; de negatieve
       marge haalt die ruimte weer weg uit de opmaak, dus er verschuift niets. */
    padding: 12px 20px;
    margin: -12px -20px;
  }

  /* Het logo houdt overal zijn eigen kleur, net als op ultragym.nl zelf.
     Hier stond dat het wit was en op lichte secties omgekeerd werd naar zwart.
     Dat gaf drie problemen: op de blauwe actiebalk werd het zwart en amper
     leesbaar, tijdens het omslaan was het een halve seconde grijs, en de kleur
     van het merk was helemaal verdwenen. De schaduw blijft, zodat het ook op
     een lichte foto leesbaar blijft. */
  .logo img {
    width: 112px;
    height: auto;
    display: block;
    /* Twee zachte schaduwen over elkaar, geen harde lijn.
       De vorige versie had een zwarte omtrek van een pixel om het logo heen.
       Dat las goed maar zag eruit als een kleurplaat, dus die is eruit.
       Wat er nu ligt: een korte donkere schaduw die de vorm meteen onder het
       blauw vandaan trekt, en daaronder een wijdere die het geheel van de
       achtergrond tilt. Allebei zacht, dus je ziet nergens een rand beginnen.
       Steviger dan de eerste poging (die was 2 pixels op 0,45 en verdween op
       een lichtblauwe kop), maar zonder de omtrek van de tweede. */
    filter:
      drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55))
      drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
  }

  /* zonder balk bovenaan hoeft er minder ruimte vrijgehouden te worden */
  .page-hero { padding-top: calc(var(--header-h) + var(--promo-h) + 34px); }

  .promo-bar { font-size: 0.82rem; }
  .promo-extra { display: none; }

  /* Onder de herofoto stapelde de onderruimte van de hero op de bovenruimte van
     de volgende sectie; samen werd dat een te groot wit gat. */
  .hero { padding-bottom: 32px; }

  .hero-card { left: 16px; bottom: 20px; }
  .hero-fact { padding: 4px 16px; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media > img { height: 380px; }
  .split.media-last .split-media { order: 2; }

  /* Op mobiel swipe je; pijlen zouden alleen maar beeld afdekken. */
  .carrousel-knop { display: none; }

  .lessons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooster-day + .rooster-day { border-left: none; }
  .rooster-day { border-top: 1px solid var(--line); }
  .rooster-day:nth-child(-n+2) { border-top: none; }
  .rooster-day:nth-child(even) { border-left: 1px solid var(--line); }
  .pricing-grid,
  .pricing-grid.duo { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .price-card.featured { order: -1; }
  /* bij twee kaarten blijft de leesvolgorde Comfort → Premium */
  .price-card.featured.premium { order: 0; }
  /* .oplopend staat van goedkoop naar duur; de uitgelichte kaart mag daar niet
     voorkruipen, anders klopt de prijsvolgorde op mobiel niet meer */
  .pricing-grid.oplopend .price-card.featured { order: 0; }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid .wide { grid-column: auto; }
  .gallery-grid img { height: 240px; }

  .trainer-card { grid-template-columns: 1fr; }
  .trainer-card img { height: 420px; }
  .trainer-card .trainer-copy { padding: 36px; }

  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .qr-kaart { flex-direction: column; align-items: flex-start; gap: 18px; }
  .praktisch-grid { grid-template-columns: 1fr; gap: 0; }
  .praktisch-grid .info-block:last-child { border-bottom: 1px solid var(--line); }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .section { padding: 80px 0; }
  .voordeel-card { min-height: 340px; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }

  .promo-mid { display: none; }

  .container { padding: 0 18px; }

  .hero { padding-top: calc(var(--header-h) + var(--promo-h) + 34px); padding-bottom: 8px; }
  .hero-actions .btn { width: 100%; }

  /* Drie knoppen onder elkaar duwt de hero te ver omlaag: de hoofdknop houdt
     de volle breedte, de twee secundaire delen de regel eronder. */
  .hero-actions:has(.btn:nth-child(3)) { gap: 12px; }

  .hero-actions:has(.btn:nth-child(3)) .btn-ghost {
    width: calc(50% - 6px);
    padding-left: 12px;
    padding-right: 12px;
  }

  /* compacter zodat het actiebalkje op één regel blijft */
  .hero-chip { gap: 8px; padding: 4px 5px 4px 4px; }
  .hero-chip .chip-label { font-size: 0.63rem; padding: 6px 10px; letter-spacing: 0.08em; }
  .hero-chip .chip-tekst { font-size: 0.8rem; }
  .hero-chip .chip-pijl { width: 26px; height: 26px; }

  .hero-facts { width: 100%; }
  .hero-fact { flex: 1; padding: 4px 8px; }
  .hero-fact svg { width: 18px; height: 18px; margin-bottom: 8px; }
  .hero-fact strong { font-size: 1.3rem; }
  .hero-fact > span { font-size: 0.76rem; margin-top: 6px; }

  .impressie-rij { scroll-padding-left: 18px; padding-left: 18px; padding-right: 18px; }

  .stats-grid { grid-template-columns: 1fr; }
  .stat { padding: 36px 24px; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--line); }

  .lessons-grid { grid-template-columns: 1fr; }
  .lesson-card { min-height: 320px; }

  /* In één kolom heeft het rijen overspannen geen zin meer: .tall maakte die kaarten
     dan simpelweg dubbel zo hoog als de rest. Alle kaarten even groot dus. */
  .lesson-card.tall { grid-row: auto; min-height: 320px; }

  .rooster-grid { grid-template-columns: 1fr; }
  .rooster-day:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .rooster-day:first-child { border-top: none; }
  .rooster-day:nth-child(even) { border-left: none; }

  .form-card { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }

  .keuze-grid { grid-template-columns: 1fr; }
  .totaal-band { flex-direction: column; align-items: flex-start; }
  .totaal-prijs { text-align: left; }

  .stappen { gap: 4px; }
  .stappen li { font-size: 0.72rem; gap: 6px; }
  .stap-nav { flex-wrap: wrap; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }

  .cta-inner { padding: 88px 0; }

  .section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }

  .trainer-facts { gap: 24px; flex-wrap: wrap; }

  .hero-card { padding: 12px 18px 12px 15px; gap: 12px; border-radius: 16px; }
  .hero-card-tekst strong { font-size: 1.1rem; }
  .hero-card-tekst span { font-size: 0.78rem; }
}

/* ---------- Abonnementskaarten (tarievenpagina) ---------- */

/* Foto bovenop, dan de prijs, een banner met de lopende actie en per regel een
   icoontje met uitleg. Groen/rood is hier bewust weggelaten: wat er niet bij
   zit staat doorgestreept met een grijze tegel. */

:root { --ja: #17A05A; --nee: #D64535; }

.abo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 940px;
  margin: 0 auto;
}

/* Drie kaarten naast elkaar, voor de losse trainingen en strippenkaarten */
.abo-grid.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1160px; }

/* Een enkele kaart, voor als de strippenkaarten uit staan en alleen de
   dagpas overblijft. De klasse wordt gewisseld in assets/js/dagpas.js. */
.abo-grid.een { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

.abo-kaart {
  position: relative;
  background: var(--panel);
  /* Eigen tekstkleur: op de donkere homesectie erft de kaart anders het lichte
     navy-tekstkleurtje en valt de tekst weg tegen het witte vlak. */
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 44px rgba(13, 20, 28, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.abo-kaart:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(13, 20, 28, 0.16); }

/* Premium krijgt een warme rand, zodat je in één blik ziet welke de rijkere is */
.abo-kaart.premium { border-color: rgba(197, 155, 62, 0.55); }

/* De voordeligste strippenkaart krijgt dezelfde nadruk, maar in merkblauw */
.abo-kaart.uitgelicht { border-color: rgba(0, 178, 255, 0.55); box-shadow: 0 20px 50px rgba(0, 114, 181, 0.16); }

.abo-foto { position: relative; aspect-ratio: 16 / 7; }

/* Los uit de flow, anders bepaalt de eigen hoogte van de foto het kader en doet
   de aspect-ratio niets. Iets boven het midden uitsnijden, daar zitten de
   gezichten. */
.abo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }

.abo-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 13px;
  box-shadow: 0 6px 18px rgba(7, 15, 26, 0.3);
}

.abo-kaart.premium .abo-tag { background: linear-gradient(135deg, #E4C877, #B8912F); color: #241B03; }

.abo-body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }

.abo-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: #0072B5;
  margin-bottom: 8px;
}

.abo-wie { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; }

/* Ruimte voor twee regels, anders schuiven de prijzen en banners van de drie
   kaarten ten opzichte van elkaar zodra één omschrijving afbreekt. */
.abo-grid.drie .abo-wie { min-height: 2.9em; }

.abo-prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.abo-prijs em {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.abo-prijs b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.2vw, 3.2rem);
  line-height: 1;
  color: var(--text);
}

.abo-prijs span { color: var(--text-muted); font-size: 1rem; }

.abo-grid.drie .abo-prijs b { font-size: clamp(2.1rem, 3.2vw, 2.7rem); }

/* De actiebanner: wat je nú extra krijgt, apart gezet zodat het opvalt */
.abo-actie {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(100deg, #0067AF 0%, #0090DA 55%, #22B4F5 100%);
  box-shadow: 0 10px 24px rgba(0, 114, 181, 0.28);
  margin-bottom: 24px;
}

.abo-actie > svg { flex: none; }
.abo-actie p { font-size: 0.94rem; font-weight: 600; line-height: 1.35; margin-right: auto; }
.abo-actie s { opacity: 0.8; }
.abo-grid.drie .abo-actie p { font-size: 0.9rem; }

/* De banner is het ankerpunt voor de uitleg die onder het i-knopje uitklapt */
.abo-actie { position: relative; }

/* Dezelfde actie als op de abonnementskaarten, maar in de kop van de
   voorpagina.
   
   Hij stond eerst alleen op de telefoon, met als redenering dat hij op een
   breed scherm dubbelop zou zijn omdat de actie ook op de abonnementskaarten
   staat. Die redenering hield geen stand: op de voorpagina staan die kaarten
   ver naar beneden, dus op een laptop zag je in de kop helemaal geen actie.
   Nu staat hij overal.
   
   Vorm: een pil, geen brede band. Mark had hem in zijn eigen ontwerp als een
   pil onder de titel staan en de brede versie viel hem meteen op als iets dat
   er niet hoorde. Een pil hoort bij de titel, een band trekt de aandacht naar
   zich toe en concurreert met de knoppen eronder.
   Hij hangt om zijn eigen inhoud (inline-flex, geen vaste breedte), heeft
   ronde uiteinden en geen zware slagschaduw. */
.hero-actie {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin: 0 auto 26px;
  padding: 9px 10px 9px 16px;
  gap: 10px;
  border-radius: 999px;
  text-align: left;
  box-shadow: 0 6px 16px rgba(0, 114, 181, 0.26);
}

.hero-actie br { display: none; }
.hero-actie p { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }

@media (max-width: 920px) {
  .hero-actie {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 7px 8px 7px 12px;
    gap: 8px;
    border-radius: 999px;
    text-align: left;
    box-shadow: 0 6px 16px rgba(0, 114, 181, 0.26);
  }

  /* De regelafbreking hoort bij de kaartversie, waar de band twee regels hoog
     mag zijn. In een pil laten we de tekst zelf bepalen waar hij afbreekt. */
  .hero-actie br { display: none; }

  /* 0,74rem is de grootste maat waarbij de hele tekst op een telefoon van 390
     pixels op een regel past, en dat is de breedte van de meeste iPhones van
     nu. Op een smaller toestel breekt hij netjes naar twee regels; de ronde
     uiteinden blijven dan gewoon staan. Groter kan niet zonder de tekst in te
     korten, en dan zou de doorgestreepte 25 euro sneuvelen; dat is juist het
     stukje dat laat zien wat je bespaart. */
  .hero-actie p {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
  }

  /* Het icoon iets kleiner, anders duwt het de pil uit model. */
  .hero-actie > svg { width: 18px; height: 18px; }
}

.abo-info {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

/* Het rondje is 24 bij 24 pixels en dat was ook precies het vlak waar je op
   kon tikken. Op een telefoon is dat te klein: Apple houdt 44 pixels aan als
   ondergrens en je mist hem zo. Dit onzichtbare vlak eromheen maakt er 48 bij
   48 van. Het staat los in de opmaak (absoluut geplaatst), dus het rondje
   zelf en de i erin blijven precies zoals ze waren. */
.abo-info { position: relative; }

.abo-info::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.abo-info:hover { background: rgba(255, 255, 255, 0.2); opacity: 1; }
.abo-info[aria-expanded="true"] { background: #fff; color: #0072B5; opacity: 1; }

/* Uitleg bij de actie. Een title-attribuut werkt niet op een telefoon, dus
   dit is een echt blokje dat open- en dichtklapt. */
.abo-uitleg {
  position: absolute;
  z-index: 6;
  top: calc(100% + 12px);
  right: 0;
  width: min(300px, 100%);
  background: var(--navy);
  color: var(--navy-text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 15px 17px;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 18px 38px rgba(7, 15, 26, 0.35);
}

.abo-uitleg[hidden] { display: none; }

/* Pijltje naar het knopje toe */
.abo-uitleg::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 8px;
  width: 12px; height: 12px;
  background: var(--navy);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: rotate(45deg);
}

/* Alleen voor schermlezers */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Regel met een icoontje in een tegel, titel en korte uitleg eronder */
.abo-lijst { list-style: none; display: grid; gap: 16px; margin-bottom: 28px; }

.abo-lijst li { display: flex; gap: 14px; align-items: flex-start; }

/* Eerste span is de icoontegel, de tweede houdt de tekst vast. */
.abo-lijst li > span:first-child {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: #0072B5;
}

.abo-lijst li > span:last-child { flex: 1; min-width: 0; }

.abo-lijst strong { display: block; font-size: 0.97rem; line-height: 1.35; margin-bottom: 1px; }
.abo-lijst small { display: block; font-size: 0.88rem; color: var(--text-muted); line-height: 1.4; }

.abo-lijst li.niet > span:first-child { background: rgba(13, 20, 28, 0.05); color: rgba(85, 97, 110, 0.55); }
.abo-lijst li.niet strong { text-decoration: line-through; color: var(--text-muted); font-weight: 600; }

.abo-kaart .btn { margin-top: auto; width: 100%; }

.abo-kaart.premium .btn {
  background: linear-gradient(100deg, #E4C877 0%, #C9A544 55%, #A9832A 100%);
  color: #201703;
  border-color: transparent;
}

.abo-kaart.premium .btn:hover { filter: brightness(1.06); }

.abo-voetnoot { text-align: center; margin-top: 28px; color: var(--text-muted); font-size: 0.9rem; }

/* Drie geruststellingen onder de kaarten */
.abo-onder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 940px;
  margin: 34px auto 0;
}

.abo-geruststelling {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.abo-geruststelling svg { flex: none; color: var(--accent); margin-top: 2px; }
.abo-geruststelling strong { display: block; color: var(--text); margin-bottom: 2px; }

@media (max-width: 1000px) {
  .abo-grid.drie { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

@media (max-width: 900px) {
  .abo-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .abo-onder { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

@media (max-width: 620px) {
  .abo-body { padding-left: 22px; padding-right: 22px; }
  .abo-lijst li > span:first-child { width: 38px; height: 38px; border-radius: 11px; }
}

/* ---------- Hero met sfeervideo (homepage) ---------- */

/* De posterfoto staat hier in plaats van in het poster-attribuut van de video.
   Reden: met een poster-attribuut plus een omzetting in JavaScript haalde de
   browser allebei de foto's op, samen zo'n 400 kB, nog voordat de video begon.
   Via CSS haalt hij alleen de foto op die bij het scherm past. */
.hero-video {
  position: relative;
  background-image: url('../video/zaal-poster.jpg');
  background-size: cover;
  background-position: center;
  min-height: min(92vh, 860px);
  display: flex;
  /* stretch in plaats van center: de inhoud vult de hele hoogte, zodat de titel
     bovenaan kan staan en de cijfers onderaan tegen de rand van de sectie. */
  align-items: stretch;
  padding: calc(var(--header-h) + var(--promo-h) + 44px) 0 40px;
  overflow: hidden;
  /* Alleen de kleur, niet de hele achtergrond in een keer. Hier stond
     'background: var(--navy)', en die korte schrijfwijze zette de posterfoto
     drie regels hierboven weer op niets. Op een breed scherm zag je daardoor
     nooit een poster, alleen marineblauw tot de video binnen was. */
  background-color: var(--navy);
  isolation: isolate;
}

.hero-video > .container {
  display: flex;
  /* De tekst hoort een eigen plek in de stapel te hebben. Zie de uitleg bij
     de video hieronder. */
  position: relative;
  z-index: 2;
}

/* De video lag op z-index -2 en de donkere laag op -1, dus achter de inhoud
   van de sectie. Dat werkt in de meeste browsers, maar Safari op de iPhone
   zet een video op een negatieve laag apart en vergeet daarbij soms de tekst
   erboven opnieuw te tekenen. Je krijgt dan een spookbeeld: de titel en de
   knoppen staan er twee keer, iets verschoven over elkaar. Precies wat er op
   een verse telefoon op een traag netwerk gebeurde.
   Alles staat nu op nul en hoger, en de tekst erboven. Zelfde beeld, maar
   zonder negatieve laag en dus zonder dat spook. */
.hero-video video,
.hero-video > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Donkere laag zodat de tekst leesbaar blijft, met wat blauw van het merk erin */
.hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 22, 38, 0.82) 0%, rgba(10, 22, 38, 0.62) 42%, rgba(10, 22, 38, 0.88) 100%),
    radial-gradient(70% 90% at 50% 40%, rgba(0, 114, 181, 0.34), transparent 70%);
}

.hero-video .hero-copy {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  max-width: 62rem;
  margin: 0 auto;
}
/* De ondertitel is weg; die ruimte gaat nu boven de titel zitten zodat hij
   niet meer tegen de bovenrand van de hero plakt. */
.hero-video h1 {
  color: #fff;
  margin: clamp(28px, 9vh, 96px) 0 22px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero-video h1 em { font-style: normal; color: #4FD0FF; }
.hero-video .lead { color: rgba(233, 242, 250, 0.9); max-width: 40rem; margin: 0 auto 38px; }

.hero-video .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-video .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.16); }

/* De knoppen en de cijfers vormen samen het onderste blok: auto op de knoppenrij
   duwt allebei naar beneden, de cijfers sluiten er direct op aan. */
.hero-video .hero-actions { margin-top: auto; }

/* Op het grote scherm mogen de hoofdknoppen zwaarder wegen. */
@media (min-width: 921px) {
  .hero-video .hero-actions { gap: 18px; }
  .hero-video .hero-actions .btn { font-size: 1.08rem; padding: 22px 40px; }
}

.hero-video-facts {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin: 0 auto;
  padding-top: 34px;
}

/* Geen achtergrond, rand of ronding: die maakten er knoppen van. Alleen een dun
   scheidingslijntje tussen de drie cijfers. */
.hero-video-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px clamp(16px, 4vw, 40px);
  color: #fff;
  text-align: center;
}

.hero-video-fact + .hero-video-fact { border-left: 1px solid rgba(255, 255, 255, 0.22); }

.hero-video-fact svg { color: #4FD0FF; margin-bottom: 2px; }

.hero-video-fact strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.hero-video-fact span {
  color: rgba(226, 238, 249, 0.8);
  font-size: clamp(0.7rem, 2.2vw, 0.84rem);
  line-height: 1.35;
}

/* Knopje om de video stil te zetten. Hoort erbij bij bewegend beeld dat vanzelf
   start: niet iedereen wil dat. */

/* Wie beweging liever niet heeft, krijgt de poster te zien. */
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; }
}

@media (max-width: 620px) {
  .hero-video { min-height: 88vh; }
}


/* ---------- Regio-links op de locatiepagina's ---------- */

/* Gebruikt op sportschool-<plaats>.html en sportschool-regio.html: een raster
   met tekstlinks naar de omliggende dorpen en steden. Auto-fill houdt het
   zonder media query netjes op elk scherm. */

.regio-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.regio-lijst a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.regio-lijst a:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.regio-lijst a span {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.82rem;
  text-align: right;
  white-space: nowrap;
  flex: none;
}

.section.soft .regio-lijst a { background: var(--bg); }

/* Staande posterfoto voor de telefoon, hoort bij sfeer-mobiel.mp4. */
@media (max-width: 768px) {
  .hero-video { background-image: url('../video/zaal-mobiel-poster.jpg'); }
}

/* Een extra die al in het abonnement zit: zichtbaar houden, maar duidelijk
   op slot. Anders vraagt iemand zich af waarom hij hem niet kan aanvinken. */
.opt-wrap.is-inbegrepen .opt-row { opacity: 0.6; cursor: default; }
.opt-wrap.is-inbegrepen .opt-row input { cursor: default; }
.opt-wrap.is-inbegrepen [data-prijslabel] { font-style: normal; }

/* ---------- Tekst uit de CMS ---------- */

/* Lopende tekst leest niet prettig over de volle breedte. Zelfde maat als
   .tekst-pagina, die de juridische pagina's al gebruikten. */
.container.smal { max-width: 46rem; }

/* De lijsten die Payload maakt dezelfde uitlijning geven als de handmatige
   .juridisch-lijst, anders staat de tekst er strak tegen de rand. */
.payload-richtext ul,
.payload-richtext ol {
  margin: 0 0 16px;
  padding-left: 1.6em;
  display: grid;
  gap: 14px;
}

.payload-richtext ul { list-style: disc; }
.payload-richtext ol { list-style: decimal; }
.payload-richtext li { padding-left: 4px; }

.payload-richtext li::marker {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Een lijst in een lijst krijgt letters, net als de sublijsten in de
   voorwaarden. */
.payload-richtext li > ul,
.payload-richtext li > ol {
  margin: 12px 0 0;
  padding-left: 1.5em;
  gap: 10px;
  list-style: lower-alpha;
}

.payload-richtext p { margin-bottom: 16px; }
.payload-richtext p:last-child { margin-bottom: 0; }

/* ---------- Ruimte boven een blok uit de CMS ---------- */

/* Het oorspronkelijke ontwerp regelde dit met inline stijlen op de sectie.
   Nu is het een keuze in de CMS, zodat de opmaak op één plek staat. */
.section.ruimte-krap { padding-top: 40px; }
.section.ruimte-geen { padding-top: 0; }

/* ---------- Cookiemelding ---------- */

/* Verschijnt alleen bij de eerste bezoeker die nog niets gekozen heeft. Het
   blokje bouwt zichzelf op vanuit analytics.js, zodat het op zowel de vaste
   pagina's als de pagina's van Next werkt zonder dat de opmaak twee keer
   bestaat. */
.cookiebalk {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin: 0 auto;
  max-width: 44rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.cookiebalk-tekst { flex: 1 1 20rem; }
.cookiebalk-tekst strong { display: block; margin-bottom: 4px; }
.cookiebalk-tekst p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.cookiebalk-knoppen { display: flex; gap: 12px; flex: 0 0 auto; }

/* Op een telefoon staat de onderbalk in de weg, dus daar iets hoger. */
@media (max-width: 720px) {
  .cookiebalk { bottom: 88px; padding: 18px 20px; }
  .cookiebalk-knoppen { width: 100%; }
  .cookiebalk-knoppen .btn { flex: 1; justify-content: center; }
}

/* ---------- Promoblok onder de abonnementen ---------- */

/* De actiebalk met de sporttas en bidon. Werkt met een kale foto en de tekst
   erover, en ook met een kant-en-klare banner waar de tekst al in zit. Zonder
   foto blijft er een nette donkere balk staan, zodat de pagina niet stukgaat
   als het beeld nog moet komen. */
.promo-band {
  position: relative;
  margin: 28px auto 0;
  max-width: 1160px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #0D141C 0%, #14314A 60%, #0072B5 100%);
  min-height: 240px;
  display: flex;
  align-items: center;
}

.promo-foto {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 320px;
}

/* Met tekst eroverheen moet de foto de hele balk vullen. */
.promo-band:has(.promo-tekst) .promo-foto {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* Een donker verloop onder de tekst. De foto is nu donker aan de linkerkant,
   maar met een ander beeld zou de tekst zomaar onleesbaar kunnen worden. Zo
   blijft hij dat altijd, ook op een smal scherm waar er weinig foto in beeld
   past. */
.promo-band:has(.promo-tekst)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 12, 20, 0.9) 0%, rgba(6, 12, 20, 0.6) 45%, rgba(6, 12, 20, 0) 78%);
}

/* Een kant-en-klare banner met de tekst er al in. Die mag niet uitgesneden
   worden, want dan valt de tekst weg. Hij staat dus helemaal in beeld, in zijn
   eigen verhouding, en wat smaller dan de rest zodat hij de pagina niet
   overneemt. */
.promo-band.promo-banner {
  max-width: 860px;
  min-height: 0;
  background: none;
}

/* Klaargezet, nog niet in gebruik. Mark vroeg of de sporttasbanner op wit moet
   staan of op donkerblauw. Zodra dat besloten is hoeft alleen de klasse
   'op-navy' op de sectie gezet te worden; zie PROMO_OP_NAVY in Blokken.tsx.
   Niets zelf kiezen, dit staat er alleen klaar. */
.section-tight.op-navy {
  background: var(--navy);
}

.section-tight.op-navy .promo-band.promo-banner {
  background: none;
}

.promo-band.promo-banner .promo-foto {
  max-height: none;
  height: auto;
  object-fit: contain;
}

.promo-tekst {
  position: relative;
  z-index: 1;
  padding: 40px 44px;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.promo-tekst strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

.promo-tekst span {
  display: block;
  margin-top: 8px;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  opacity: 0.92;
}

/* Zolang het beeld nog moet komen, staat de tekst op de donkere balk zelf. */
.promo-leeg { min-height: 180px; }

@media (max-width: 720px) {
  .promo-band { min-height: 190px; }
  .promo-tekst { padding: 26px 22px; }
  /* Op een smal scherm past er weinig foto naast de tekst, dus daar loopt het
     verloop van onder naar boven in plaats van van links naar rechts. */
  .promo-band:has(.promo-tekst)::after {
    background: linear-gradient(180deg, rgba(6, 12, 20, 0.86) 0%, rgba(6, 12, 20, 0.6) 55%, rgba(6, 12, 20, 0.25) 100%);
  }
}


/* ---------- Geen wit vlak meer terwijl een foto laadt ---------- */

/* Foto's die pas laden als ze in beeld komen, lieten tot dat moment een wit
   vlak achter. Op een telefoon met traag bereik ziet dat eruit alsof de
   pagina stuk is. Een rustige kleur eronder overbrugt dat: je ziet een vlak
   in de huisstijl in plaats van niets. */
.lesson-card,
.abo-foto,
.split-media > img,
.gallery-grid img,
.promo-band {
  background-color: #0D141C;
}

.info-block img,
.partners img {
  background-color: transparent;
}


/* ---------- Boekingswidget van Virtuagym ---------- */

/* De widget tekent gewone elementen in de pagina: geen iframe en geen
   afgeschermde opbouw. Daardoor kan hij met gewone opmaakregels in onze stijl
   gezet worden. Hij leest bovendien een reeks eigen kleur- en lettervariabelen
   uit, en die zetten we hieronder om naar onze eigen waarden. Dat is de nette
   route: geen regels die tegen de zijne in vechten, we voeden hem gewoon
   andere waarden.
   Wat we niet kunnen veranderen is de indeling: de widget werkt in drie
   stappen (datum, tijd, gegevens) waar ons oude formulier alles op een scherm
   had. Dat zit in de widget zelf. */
.guest-booking-widget {
  --accent-100: rgba(0, 178, 255, 0.10);
  --accent-200: rgba(0, 178, 255, 0.18);
  --accent-400: #22C0FF;
  --accent-500: #0072B5;
  --accent-600: #005E96;
  --accent-900: var(--navy);
  --blue-400: #22C0FF;
  --blue-500: #0072B5;
  --blue-600: #005E96;
  --gray-100: var(--bg-raised);
  --gray-200: var(--line);
  --gray-300: var(--line-strong);
  --gray-500: var(--text-muted);
  --gray-600: var(--text-muted);
  --gray-700: var(--text);
  --gray-800: var(--text);
  --gray-900: var(--text);
  --white: #FFFFFF;
  --background-color: transparent;
  --color: var(--text);
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --rounded: var(--radius);
  --rounded-lg: var(--radius);
  --rounded-full: 999px;

  font-family: var(--font-body);
  color: var(--text);
}

/* De kop van de widget in onze koplettertype, net als elke andere kop op de
   site. */
.guest-booking-widget--header--title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.05;
  color: var(--text);
}

.guest-booking-widget--header--side-information,
.guest-booking-widget--subtitle,
.no-result-label {
  color: var(--text-muted);
}

/* De knop krijgt dezelfde vorm en kleur als elke andere hoofdknop. */
.guest-booking-widget .vg-button--rounded-filled {
  background: var(--accent-grad);
  color: var(--on-accent);
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-body);
}

.guest-booking-widget .vg-button--disabled {
  opacity: 0.45;
  box-shadow: none;
}

/* De widget staat al in een kaart met eigen rand en ruimte, dus hij hoeft er
   zelf geen tweede omheen te zetten. */
.guest-booking-widget {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* De pagina rekte op de telefoon horizontaal uit sinds de module erin staat.
   Oorzaak: de kaart met de module staat in een raster, en een vak in een
   raster is standaard minstens zo breed als zijn inhoud. De module vroeg om
   bijna 700 pixels, dus het vak werd 700 breed, en het hele raster met de rest
   van de pagina rekte mee. Vandaar de smalle kolom met een donkere strook
   ernaast en tekst die onder het logo doorliep.
   Deze regel zegt: een vak mag smaller zijn dan zijn inhoud. De module is zelf
   prima meebuigend en past zich daarna netjes aan; gemeten op 390, 375 en 360
   pixels past hij binnen de kaart zonder ergens uit te steken. */
.contact-grid > * { min-width: 0; }

.form-card vg-guest-booking {
  display: block;
  max-width: 100%;
}

.guest-booking-widget,
.guest-booking-widget--body {
  max-width: 100%;
}

/* Op de telefoon was de module samengeperst: de dagen van de week plakten aan
   elkaar, de gekozen dag lag over zijn buren heen en de maandnaam brak over
   twee regels.
   De grootste oorzaak was niet de module maar de kaart eromheen. Die heeft 44
   pixels ruimte aan beide kanten, dus op een scherm van 390 bleef er nog geen
   270 pixels over voor zeven dagen plus twee pijlen. Op deze kaart hoort die
   ruimte kleiner op een telefoon, en de module mag de volle breedte pakken. */
@media (max-width: 920px) {
  .form-card { padding-left: 18px; padding-right: 18px; }

  .form-card vg-guest-booking {
    margin-left: -18px;
    margin-right: -18px;
  }

  /* "augustus 2026" hoort op een regel te staan. */
  .vg-date-picker-slider--header__title { white-space: nowrap; }

  /* Lucht tussen de dagen, zodat de gekozen dag niet meer over zijn buren
     valt. De rij mag daarvoor zijwaarts schuiven; de module heeft daar zelf
     al pijlen bij staan. */
  .vg-date-picker-slider--dates { gap: 4px; }

  .vg-date-picker-slider--dates__date-container { min-width: 40px; }
}

/* De keuze voor de instructeur stak buiten zijn eigen kader. De module geeft
   elk keuzeblokje een vaste hoogte van 36 pixels, en dat gaat goed voor een
   tijdstip als "11:00". "UltraGym Coaching" past op een telefoon niet op een
   regel, breekt naar twee regels, en die passen niet in 36 pixels. De tekst
   liep daardoor boven en onder de rand uit.
   Alleen dit blokje mag dus meegroeien met zijn tekst. De tijdstippen laten we
   met rust, die hebben die vaste hoogte niet nodig. */
.guest-booking-widget--body--booking-select--instructor .vg-list-select--item {
  height: auto;
  min-height: 44px;
  padding: 10px 12px;
  line-height: 1.3;
  align-items: center;
}

.guest-booking-widget--body--booking-select--instructor .vg-list-select--item__label {
  height: auto;
  line-height: 1.3;
  font-size: 0.95rem;
}