/* site.css — huisstijl Gymsoftware = die van Fitness Race Timer (racetimer/public/assets/site.css, Robin 9 okt '26): diepteal
   + cyaan naar het voorbeeld van styrekx.nl, koppen in Bai Jamjuree cursief 700, kaarten met teal-verloop, knoppen 10 px rond.
   Een gym overschrijft de tokens (--accent, --accent-rgb, --on-accent, --bg, --bg-2, --surface, --card) met een eigen <style>
   in de leden-app. Drie werelden delen dit bestand: site (/), medewerkers-app (/app/) en leden-app (/m/). */
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bai-jamjuree-400.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/bai-jamjuree-500.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/bai-jamjuree-600.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/bai-jamjuree-700.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/bai-jamjuree-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/bai-jamjuree-700-italic.woff2") format("woff2"); }

:root {
  --accent: #3be9ed; --accent-rgb: 59, 233, 237; --accent-bright: #7af3f6; --on-accent: #0a2b33;
  --finish: #3ddc84; --finish-rgb: 61, 220, 132; --warn: #ffcc33; --warn-rgb: 255, 204, 51; --bad: #ff5a5f; --bad-rgb: 255, 90, 95;
  --bg: #0a2b33; --bg-2: #0c313a; --surface: #123d47; --surface-2: #0e353e; --ink: #ffffff; --muted: #b7cfd4; --line: rgba(255, 255, 255, 0.12);
  --card: linear-gradient(135deg, rgba(30, 70, 82, 0) 0%, rgb(30, 70, 82) 100%); --card-flat: rgba(30, 70, 82, 0.55);
  --max: 1240px; --radius: 16px; --radius-lg: 22px; --radius-btn: 10px; --hdr: 72px;
  --font-display: "Bai Jamjuree", "Arial Narrow", sans-serif; --font-body: "Bai Jamjuree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p a, .muted a, td a, li a { color: var(--accent); }
p a:hover { color: var(--accent-bright); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; font-style: italic; line-height: 1.04; letter-spacing: 0.005em; margin: 0 0 0.45em; text-transform: uppercase; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
.hl { color: var(--accent); }
.kicker { display: inline-block; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.kicker::before { content: "\203A\203A"; margin-right: 8px; letter-spacing: -0.1em; font-weight: 700; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); margin: 12px 0 0; font-size: 1.08rem; }
.section-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 960px; }
.section { padding: clamp(56px, 8vw, 110px) 0; position: relative; }
.section--black { background: var(--bg) linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 120px; }
.section--deep { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.muted { color: var(--muted); } .small { font-size: 0.875rem; } .right { text-align: right; } .inline { display: inline; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .grow { flex: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Knoppen (.btn = primair; racetimer's .btn--primary blijft werken) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; border: 2px solid transparent; white-space: nowrap; background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.22); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, transform 0.15s ease; }
.btn:hover { background: var(--accent-bright); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.35); }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.18); box-shadow: none; }
.btn--danger { background: transparent; color: var(--bad); border: 1px solid rgba(var(--bad-rgb), 0.4); box-shadow: none; }
.btn--danger:hover { background: rgba(var(--bad-rgb), 0.12); box-shadow: none; }
.btn--sm { padding: 8px 14px; font-size: 0.78rem; } .btn--lg { padding: 16px 28px; font-size: 0.95rem; } .btn--block, .btn--wide { width: 100%; }
.btn svg { flex: 0 0 auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- Header (racetimer): logo links, menu in het midden, knoppen rechts; hamburger op tablet/mobiel ---------- */
.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; height: var(--hdr); padding: 0 20px; background: rgba(18, 61, 71, 0.86); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.brand img { display: block; height: 40px; width: auto; }
.brand__mark { display: block; width: 36px; height: 36px; fill: var(--accent); }
.brand__tile { fill: #0a2b33; } /* de tegel = het app-icoon; de kop is lichter (--surface) zodat de tegel zichtbaar blijft */
.brand--footer .brand__mark { width: 44px; height: 44px; }
.site-footer .brand__tile { fill: #0a2b33; }
span.brand__mark { display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-style: normal; font-weight: 800; font-size: 1.1rem; }
.brand--footer { font-size: 1.4rem; }
.brand--footer img { height: 52px; }
@media (max-width: 560px) { .site-header .brand img { height: 36px; } }
.main-nav { display: flex; align-items: center; gap: 4px; justify-self: center; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-btn); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); transition: background 0.15s, color 0.15s; }
.nav-link svg { width: 14px; height: 14px; opacity: 0.55; transition: transform 0.2s; }
.nav-link:hover, .nav-item.is-open > .nav-link { background: rgba(255, 255, 255, 0.07); }
.nav-item:hover > .nav-link svg, .nav-item.is-open > .nav-link svg { transform: rotate(180deg); opacity: 1; }
.nav-drop { position: absolute; left: 50%; top: 100%; z-index: 60; padding-top: 10px; min-width: 300px; transform: translateX(-50%) translateY(6px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.22s var(--ease-out), visibility 0s linear 0.2s; }
.nav-item:hover > .nav-drop, .nav-item:focus-within > .nav-drop, .nav-item.is-open > .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
/* Megamenu Functies (9 okt '26): gecentreerd onder de kop (nav-item static → de sticky kop is het referentiekader) */
.nav-item--mega { position: static; }
.nav-drop--mega { width: min(1200px, calc(100vw - 32px)); min-width: 0; }
.mega { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; padding: 20px 22px 0; max-height: calc(100vh - var(--hdr) - 24px); overflow-y: auto; }
.mega-col { padding: 4px 4px 14px; }
.mega-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.mega-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.mega-ic svg { width: 17px; height: 17px; }
.mega ul { margin: 0; padding: 0 0 0 40px; list-style: none; display: grid; gap: 0; }
.mega li a { display: flex; align-items: center; gap: 8px; padding: 4px 8px; margin-left: -8px; border-radius: 8px; color: var(--muted); font-size: 0.88rem; line-height: 1.3; }
.mega li a:hover, .mega li a:focus-visible { color: var(--ink); background: rgba(255, 255, 255, 0.06); outline: none; }
.mega li a::after { content: "›"; opacity: 0; transition: opacity 0.15s ease; }
.mega li a:hover::after { opacity: 0.7; }
.mega li a.is-soon span { opacity: 0.75; }
.mega-tag { flex: none; display: inline-block; padding: 2px 7px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.mega-tag--new { background: var(--accent); color: var(--on-accent); }
.mega-tag--soon { border: 1px solid rgba(var(--warn-rgb), 0.55); color: var(--warn); }
.mega-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 6px -22px 0; padding: 14px 22px; position: sticky; bottom: 0; border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.14); border-radius: 0 0 16px 16px; color: var(--muted); font-size: 0.88rem; }
.mega-foot span { margin-right: auto; }
.mega-foot a { color: var(--accent); font-weight: 700; }
@media (max-width: 1240px) { .mega { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .mega { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* /functies/ */
.hero--sub { padding-bottom: 40px; }
.feat-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.feat-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-weight: 600; font-size: 0.92rem; }
.feat-jump a:hover { border-color: var(--accent); }
.feat-jump svg { width: 16px; height: 16px; color: var(--accent); }
.feat-group { scroll-margin-top: calc(var(--hdr) + 12px); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.feat-item { padding: 20px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.feat-item h3 { margin: 0 0 6px; font-size: 1.12rem; }
.feat-item h3 a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.5); text-underline-offset: 3px; }
.feat-item p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.feat-item.is-soon { background: transparent; border-style: dashed; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid rgba(var(--accent-rgb), 0.4); }
.cta-band h2 { margin: 0 0 6px; }
.cta-band p { margin: 0; color: var(--muted); }
.nav-drop--right { left: auto; right: 0; transform: translateY(6px); }
.nav-item:hover > .nav-drop--right, .nav-item:focus-within > .nav-drop--right, .nav-item.is-open > .nav-drop--right { transform: translateY(0); }
.nav-drop-in { display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.nav-drop-link { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-align: left; transition: background 0.12s; }
.nav-drop-link b { font-weight: 700; font-size: 0.98rem; }
.nav-drop-link span { color: var(--muted); font-size: 0.82rem; }
.nav-drop-link:hover, .nav-drop-link:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
.nav-drop-btn { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
.nav-drop form { margin: 0; }
.nav-drop-who { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.nav-drop-who > div b { display: block; font-size: 0.98rem; }
.nav-drop-who > div span { display: block; color: var(--muted); font-size: 0.8rem; }
.header-ctas { justify-self: end; display: flex; align-items: center; gap: 8px; }
.header-ctas .btn { padding: 11px 16px; } /* 16 i.p.v. 20 (19 okt '26): met kalender-icoon en pil moet de volle kop op 1366 px passen */
.nav-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: rgba(var(--accent-rgb), 0.18); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; }
.nav-drop-who .nav-avatar { width: 36px; height: 36px; }
/* Accountknop: alleen de foto in een ring (racetimer, 8 okt '26) */
.nav-account { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.24); transition: color 0.15s, background 0.15s; }
.nav-account.is-sub { box-shadow: inset 0 0 0 2px var(--accent); }
.nav-account > svg { width: 20px; height: 20px; }
.nav-account:hover, .nav-item.is-open > .nav-account { color: #fff; background: rgba(255, 255, 255, 0.07); }
/* Hamburger: twee balken die naar een kruisje draaien */
.nav-toggle { display: none; flex: none; width: 44px; min-width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.nav-toggle:hover { background: rgba(255, 255, 255, 0.07); }
.nav-burger { position: relative; display: block; width: 20px; height: 10px; }
.nav-burger i { position: absolute; left: 0; top: 4px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.34s var(--ease-out); }
.nav-burger i:first-child { transform: translateY(-4px); }
.nav-burger i:last-child { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] { border-color: rgba(var(--accent-rgb), 0.5); }
.nav-toggle[aria-expanded="true"] .nav-burger i:first-child { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-burger i:last-child { transform: translateY(0) rotate(-45deg); }
button.nav-link { border: 0; background: none; cursor: pointer; }
@media (max-width: 1100px) { .nav-link { padding: 10px 10px; font-size: 0.98rem; } .site-header { gap: 16px; } }
/* Tabletweergave met hamburger: zonder JS onder 1360 px, met JS zodra de kop niet past (html.nav-compact); tussenstand html.nav-tight */
@media (max-width: 1360px) {
  html:not(.nav-fit) .site-header:not(.wl-header) { display: flex; gap: 8px; }
  html:not(.nav-fit) .site-header:not(.wl-header) .main-nav, html:not(.nav-fit) .site-header:not(.wl-header) .header-ctas > .btn { display: none; }
  html:not(.nav-fit) .site-header:not(.wl-header) .header-ctas { margin-left: auto; }
  html:not(.nav-fit) .nav-toggle { display: grid; }
}
html.nav-tight .site-header:not(.wl-header) { grid-template-columns: auto 1fr auto; }
html.nav-compact .site-header:not(.wl-header) { display: flex; gap: 8px; }
html.nav-compact .site-header:not(.wl-header) .main-nav, html.nav-compact .site-header:not(.wl-header) .header-ctas > .btn { display: none; }
html.nav-compact .site-header:not(.wl-header) .header-ctas { margin-left: auto; }
html.nav-compact .nav-toggle { display: grid; }
@media (max-width: 400px) { .site-header { padding-left: 16px; padding-right: 16px; } .nav-toggle, .site-header .nav-account { width: 40px; min-width: 40px; height: 40px; } html.nav-compact .site-header:not(.wl-header), html:not(.nav-fit) .site-header:not(.wl-header), .header-ctas { gap: 6px; } }
/* Mobiel menu "Gordijn" (racetimer optie B, naar layer menu-curve, Codrops Theodore, MIT): het gordijn in de accentkleur veegt als
   koepel over het menuvlak (app.js), onder volle dekking wisselt het menu, dan trekt het gordijn naar boven weg. Items groot,
   cursief en genummerd, rijzend uit hun masker. */
.mobile-menu { position: fixed; left: 0; right: 0; top: var(--mm-top, var(--hdr)); bottom: 0; z-index: 44; display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0; background: var(--bg); border-top: 1px solid var(--line); }
.mobile-menu[hidden] { display: none; }
.mobile-nav { display: flex; flex-direction: column; padding: 22px 20px 0; }
.mm-kick { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mm-links { margin-top: 4px; }
.mobile-nav .mm-link { display: flex; align-items: baseline; gap: 14px; overflow: hidden; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.7rem, 8.6vw, 2.2rem); line-height: 1.02; text-transform: uppercase; }
.mm-link small { flex: none; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }
.mm-link span, .mm-link small { display: block; }
.mobile-nav .mm-sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px; }
.mobile-nav .mm-sub a { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.08); font-size: 0.9rem; font-weight: 600; }
.mobile-nav .mm-install { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 4px; color: var(--muted); font-size: 0.95rem; }
.mm-install svg { color: var(--accent); }
.mm-foot { position: sticky; bottom: 0; display: flex; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); margin-top: 12px; background: linear-gradient(180deg, rgba(10, 43, 51, 0) 0%, var(--bg) 28%); }
.mm-foot .btn { width: 100%; }
body.nav-open { overflow: hidden; }
@keyframes mm-rise { from { transform: translateY(115%); } to { transform: none; } }
@keyframes mm-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.mobile-menu.is-open .mm-link span, .mobile-menu.is-open .mm-link small { animation: mm-rise 0.9s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
.mobile-menu.is-open .mm-sub a, .mobile-menu.is-open .mm-install { animation: mm-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 0.2s); }
.mm-curtain { position: fixed; left: 0; top: var(--mm-top, var(--hdr)); z-index: 45; width: 100%; height: calc(100dvh - var(--mm-top, var(--hdr))); fill: var(--accent); pointer-events: none; }
.mm-curtain[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-burger i, .mobile-menu.is-open .mm-link span, .mobile-menu.is-open .mm-link small, .mobile-menu.is-open .mm-sub a, .mobile-menu.is-open .mm-install { transition: none !important; animation: none; } }
/* Leden-app (white-label kop): logo en naam van de gym, geen menu */
.wl-header { display: flex; justify-content: space-between; gap: 12px; }
.wl-brand img { height: 36px; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 40% at 80% 20%, rgba(var(--accent-rgb), 0.16), transparent 70%), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 120px; }
.hero h1 { max-width: 16ch; }
.hero-sub { max-width: 60ch; color: var(--muted); font-size: 1.15rem; margin: 18px 0 0; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { color: var(--finish); }
.hero-demo { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }

/* ---------- Kaarten / rasters ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .grid--stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.card { padding: 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); margin-bottom: 16px; }
.grid-3 .card, .grid .card { margin-bottom: 0; }
.card--flat { background: var(--card-flat); }
.card__title { font-size: 1.35rem; margin: 0 0 14px; }
.card > h3 { margin-top: 14px; }
.card > p { margin: 8px 0 0; color: var(--muted); }
.card-n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.card-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.step { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.step h3 { margin: 4px 0 0; font-size: 1.4rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.stat { padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.stat__v { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.8rem; line-height: 1; letter-spacing: 0.01em; }
.stat__l { margin-top: 6px; color: var(--muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.stat__s { margin-top: 4px; color: var(--muted); font-size: 0.82rem; }
.list { display: grid; gap: 10px; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color 0.15s; }
a.item:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.item__t { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.15rem; text-transform: uppercase; }
.item__s { color: var(--muted); font-size: 0.85rem; }
.class { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.class__t { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.3rem; }
.class__d { color: var(--muted); font-size: 0.85rem; }

/* ---------- Prijzen (racetimer: tilt naar de muis, schakelaar, altijd inbegrepen, bezwaren en garantie) ---------- */
.plans .price-head { margin-bottom: 26px; }
.plans .price-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; align-items: stretch; margin-top: 10px; perspective: 1200px; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform 0.15s ease-out, border-color 0.3s; }
.price-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), 0.14), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.price-card:hover::before { opacity: 1; }
.price-card:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.price-card > :not(.price-badge) { position: relative; }
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.55), 0 10px 44px rgba(var(--accent-rgb), 0.16); }
.price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 11px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.price-card h3 { font-size: 1.7rem; margin: 0; }
.price-tag { color: var(--muted); font-size: 0.95rem; margin: 2px 0 14px; }
.price-amount { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 3rem; line-height: 1; }
.price-amount small { font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 0.9rem; color: var(--muted); margin-left: 6px; text-transform: none; }
.price-sub { margin: 8px 0 0; color: var(--accent); font-size: 0.85rem; font-weight: 700; }
.feature-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; color: var(--muted); font-size: 0.98rem; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; }
.feature-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--finish); }
.price-card .btn { margin-top: auto; }
/* Prijscalculator (9 okt '26, compact): één rij label · slider · aantal, daaronder de grote maandprijs + betaalperiode */
.price-calc { max-width: 820px; margin: 0 auto 28px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.pc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.pc-row label { font-weight: 700; }
.pc-row output { min-width: 96px; text-align: right; color: var(--muted); }
.pc-row output b { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ink); margin-right: 3px; }
.price-calc input[type="range"] { --p: 10%; display: block; width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.price-calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, 0.14) var(--p)); }
.price-calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.price-calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.price-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.price-calc input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.price-calc input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.pc-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pc-price { display: flex; align-items: center; gap: 10px; }
.pc-price > b { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent); }
.pc-price > span { color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.pc-price em { font-style: normal; font-weight: 700; color: var(--ink); }
.pc-mollie, .pc-save { margin: 10px 0 0; color: var(--muted); font-size: 0.86rem; }
.pc-mollie b { color: var(--ink); }
.pc-save { margin-top: 4px; color: var(--finish); font-weight: 600; }
.pc-bill { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.pc-bill button { padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.pc-bill button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.pc-bill i { margin-left: 4px; font-style: normal; font-weight: 600; font-size: 0.76rem; opacity: 0.85; }
.price-mollie { margin: 8px 0 0; color: var(--muted); font-size: 0.82rem; }
@media (max-width: 560px) {
  .price-calc { padding: 14px; }
  .pc-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .pc-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .pc-bill { width: 100%; } .pc-bill button { flex: 1; padding: 7px 8px; }
}
.price-badge--value { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.price-range { margin: 2px 0 0; font-weight: 700; color: var(--ink); }
.price-year { margin: 8px 0 0; color: var(--finish); font-size: 0.85rem; font-weight: 700; }
.price-note { margin: 22px 0 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
.price-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.price-proof li { display: inline-flex; align-items: center; gap: 6px; }
.price-proof svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--finish); }
.price-guarantee { display: flex; align-items: flex-start; gap: 12px; max-width: 720px; margin: 26px auto 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(var(--finish-rgb), 0.35); background: rgba(var(--finish-rgb), 0.07); }
.price-guarantee svg { flex: 0 0 auto; margin-top: 2px; color: var(--finish); }
.price-guarantee b { display: block; font-size: 1rem; }
.price-guarantee span { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.price-below { max-width: 720px; margin: 18px auto 0; color: var(--muted); text-align: center; font-size: 0.98rem; line-height: 1.6; }
.price-always { margin-top: 28px; padding: 26px 28px; border-radius: var(--radius-lg); background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.25); }
.price-always-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; }
.price-always-head h3 { margin: 0; font-size: 1.4rem; }
.price-always-head p { margin: 0; color: var(--muted); }
.always-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px 22px; }
.always-grid li { display: flex; gap: 10px; align-items: flex-start; }
.always-grid svg { flex: 0 0 auto; margin-top: 3px; color: var(--finish); }
.always-grid b { display: block; font-size: 0.98rem; }
.always-grid span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .price-card { transform: none !important; transition: none; } }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { position: relative; width: 100%; padding: 20px 44px 20px 0; text-align: left; background: none; border: 0; color: #fff; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.08rem; transition: color 0.2s ease; }
.faq-q::before, .faq-q::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: var(--accent); transition: transform 0.4s var(--ease-out), opacity 0.3s ease; }
.faq-q::after { transform: rotate(90deg); }
.faq-item.open .faq-q::before { transform: rotate(180deg); }
.faq-item.open .faq-q::after { transform: rotate(180deg); opacity: 0; }
.faq-q:hover { color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); color: var(--muted); }
.faq-item.open .faq-a { max-height: 720px; }
.faq-a p { margin: 0 0 22px; }

/* ---------- Formulieren, tabellen, meldingen (medewerkers-app) ---------- */
form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field > span { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
input, select, textarea { width: 100%; height: 46px; padding: 0 14px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); color: #fff; font: inherit; font-size: 1rem; }
textarea { height: auto; padding: 12px 14px; }
input[type="color"] { padding: 4px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); }
select option { color: #000; background: #fff; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 14px; }
.row > input, .row > select { width: auto; flex: 1 1 200px; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl th { text-align: left; padding: 8px 10px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.badge--ok, .badge--active, .badge--paid, .badge--valid, .badge--booked { color: var(--finish); border-color: rgba(var(--finish-rgb), 0.4); background: rgba(var(--finish-rgb), 0.1); }
.badge--warn, .badge--pending, .badge--open, .badge--paused, .badge--waitlist, .badge--no_mandate { color: var(--warn); border-color: rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.1); }
.badge--bad, .badge--failed, .badge--chargeback, .badge--invalid, .badge--cancelled, .badge--inactive { color: var(--bad); border-color: rgba(var(--bad-rgb), 0.4); background: rgba(var(--bad-rgb), 0.1); }
.flash { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; border: 1px solid; font-weight: 600; }
.flash--ok { background: rgba(var(--finish-rgb), 0.12); border-color: rgba(var(--finish-rgb), 0.5); }
.flash--bad { background: rgba(var(--bad-rgb), 0.12); border-color: rgba(var(--bad-rgb), 0.55); }
.flash--warn { background: rgba(var(--warn-rgb), 0.12); border-color: rgba(var(--warn-rgb), 0.5); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0, 0, 0, 0.25); padding: 2px 6px; border-radius: 6px; font-size: 0.88rem; word-break: break-all; }
details > summary { cursor: pointer; color: var(--accent); margin: 10px 0; }
main { padding: 0; }
.app main, .member main { padding: 24px 0 48px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 4px; }
.page-head p { margin: 0; color: var(--muted); }
/* Sub-navigatie van een gym onder de kop */
.subnav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 24px 10px; max-width: var(--max); margin: 0 auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { white-space: nowrap; padding: 7px 14px; border-radius: 999px; color: var(--muted); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.02em; }
.subnav a:hover, .subnav a[aria-current] { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.subnav a[aria-current] { color: var(--accent); }
.subnav-wrap { position: sticky; top: var(--hdr); z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* Inloggen */
.login-card { max-width: 460px; margin: 40px auto; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--card-flat); border: 1px solid var(--line); }
.login-card h1 { font-size: 2.4rem; margin: 0 0 8px; }
.login-card > p { color: var(--muted); margin: 0 0 22px; }
.login-card .btn { margin-bottom: 0; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-foot { margin: 20px 0 0 !important; font-size: 0.85rem; }
.hp { position: absolute; left: -9999px; }
/* Demo (13 okt '26, src/demo.js): smalle balk bovenaan elke pagina van een demogym (app en leden-app) en de pagina /demo/ */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px clamp(16px, 3vw, 36px); background: rgba(var(--warn-rgb), 0.1); border-bottom: 1px solid rgba(var(--warn-rgb), 0.35); font-size: 0.86rem; line-height: 1.35; }
.demo-bar__t { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.demo-bar__tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--warn); color: #0b0b0b; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-bar__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-bar__btns form { margin: 0; }
.demo-bar .btn { box-shadow: none; }
.demo-bar .btn svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .demo-bar { padding: 8px 12px; font-size: 0.8rem; } .demo-bar .btn--sm { padding: 7px 10px; font-size: 0.72rem; } }
/* Testmodus (19 okt '26, src/demo.js): smalle balk, rustiger dan de demobalk (cyaan, geen knoppen), en de schakelaar in Instellingen. */
.test-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 6px clamp(16px, 3vw, 36px); background: rgba(var(--accent-rgb), 0.06); border-bottom: 1px solid rgba(var(--accent-rgb), 0.22); font-size: 0.82rem; line-height: 1.35; color: var(--muted, #b9c9cc); }
.test-bar__t { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.test-bar__tag { flex: none; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), 0.55); color: var(--accent); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.test-bar__a { flex: none; color: var(--accent); font-weight: 700; font-size: 0.8rem; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.45); text-underline-offset: 3px; }
.test-bar__a:hover { text-decoration-color: var(--accent); }
@media (max-width: 860px) { .test-bar { padding: 6px 12px; font-size: 0.76rem; } }
.tm-card.is-on { border-color: rgba(var(--accent-rgb), 0.4); }
.tm-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tm-row > p { margin: 0; }
.tm-sw { display: flex; flex: none; align-items: center; gap: 8px; margin: 0; }
.tm-switch { position: relative; flex: none; width: 46px; height: 26px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.08); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.tm-switch__k { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.tm-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.tm-switch[aria-checked="true"] .tm-switch__k { transform: translateX(20px); background: var(--on-accent); }
.tm-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.tm-switch__l { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tm-seed { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tm-seed form { margin: 0; }
@media (prefers-reduced-motion: reduce) { .tm-switch, .tm-switch__k { transition: none; } }
.demo-do { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 28px 0 0; padding: 0; list-style: none; }
.demo-do li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--card-flat); border: 1px solid var(--line); }
.demo-do__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--accent); }
.demo-do b { display: block; font-size: 0.98rem; }
.demo-do span:not(.demo-do__ic) { color: var(--muted); font-size: 0.9rem; }
.demo-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 28px; }
.demo-note { margin: 0; color: var(--muted); font-size: 0.86rem; }
.demo-flash { max-width: 980px; margin: 22px 0 0; }
.demo-flash a { color: inherit; text-decoration: underline; }
.contact-aside .card > .btn { margin-top: 12px; }
.demo-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 26px 0 0; color: var(--muted); text-align: center; }
@media (max-width: 760px) { .demo-do { grid-template-columns: 1fr; } }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--muted); }
/* QR en installeren (leden-app) */
.qr { display: grid; place-items: center; gap: 12px; padding: 24px; background: #fff; border-radius: 16px; color: #000; }
.qr canvas, .qr img { width: min(70vw, 280px); height: auto; }
.install { display: none; position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 47; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.install.is-on { display: flex; }

/* ---------- Onderbalk leden-app (racetimer, naar het rendrr-dashboard): vijf tabs, Inchecken in het midden uitgelicht ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 4px calc(16px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 90%, #000 10%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-height: 52px; padding: 4px 0 2px; color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; }
.tab-ic { display: grid; place-items: center; width: 40px; height: 30px; border-radius: 10px; transition: color 0.15s, background 0.15s; }
.tab[aria-current] { color: #fff; }
.tab[aria-current] .tab-ic { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.tab--main { color: #fff; }
.tab--main .tab-ic, .tab--main[aria-current] .tab-ic { width: 54px; height: 46px; margin-top: -24px; border-radius: 15px; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.4); }
body.has-tabbar main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { .member .tabbar { left: 50%; right: auto; width: 480px; transform: translateX(-50%); border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: 40px; padding: 56px 0 28px; border-top: 1px solid var(--line); background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-about p { color: var(--muted); max-width: 36ch; margin: 14px 0 0; font-size: 0.95rem; }
.footer-maker a { color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.footer-h { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--muted); margin: 6px 0 12px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: #fff; font-size: 0.95rem; opacity: 0.85; }
.footer-col a:hover { opacity: 1; color: var(--accent); }
.footer-tm { margin: 36px 0 0; color: var(--muted); font-size: 0.8rem; max-width: 90ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.wl-footer { padding: 28px 0; text-align: center; }
.wl-powered { margin: 0; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .page-head { display: block; } .page-head .btn, .page-head form { margin-top: 10px; } .stat__v { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .faq-q::before, .faq-q::after, .faq-a, .seg-ind { animation: none !important; transition: none !important; } }
/* Leden-app: inlogkaart en 'link verlopen' */
.member .login { max-width: 460px; margin: 24px auto; }

/* ---------- Medewerkers-app: hoofd-rail + sub-rail (Robin koos optie C, 9 okt '26; naar dash/rendrr) ----------
   Rail 92 px (icoon boven label), sub-rail 224 px (zoeken, groepkopjes, tellers, badges), inklapbaar naar 60 px (body.sub-collapsed).
   Mobiel (max 860 px): rail = onderbalk met de hoofditems, sub-rail = horizontale strip bovenaan. */
:root { --rail-w: 92px; --sub-w: 224px; --sub-c: 60px; }
body.app.has-rail { --rail-bg: #061c22; --sub-bg: #0b252c; }
.rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: var(--rail-w); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0 14px; background: var(--rail-bg, #061c22); border-right: 1px solid var(--line); }
.ra-main, .ra-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.ra-main { flex: 1; overflow-y: auto; scrollbar-width: none; }
.ra-main::-webkit-scrollbar { display: none; }
.ra-tile { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border: 0; border-radius: 12px; padding: 0; cursor: pointer; overflow: hidden; font: 800 13px/1 var(--font-body); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); }
.ra-tile img { width: 72%; height: 72%; object-fit: contain; }
.ra-brand { box-shadow: none; background: none; }
.ra-brand .brand__mark { width: 44px; height: 44px; }
.ra-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 9px 0 8px; border-radius: 12px; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; transition: background 0.12s, color 0.12s; }
.ra-i:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.ra-i.cur { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.ra-ic { position: relative; display: grid; place-items: center; }
.ra-ic.dot::after { content: ""; position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--rail-bg, #061c22); }
.ra-sep { width: 36px; height: 1px; margin: 6px 0; background: var(--line); }
.ra-av { margin-top: 8px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.ra-av .nav-avatar { width: 34px; height: 34px; }
.ra-dh { margin: 4px 12px 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nav-drop-link.is-cur b { color: var(--accent); }
/* uitklapmenu's in de rail: rechts naast de rail i.p.v. eronder */
.rail .nav-item > .nav-drop { left: calc(100% + 10px); top: 0; padding-top: 0; min-width: 240px; transform: translateX(-6px); }
.rail .nav-item:hover > .nav-drop, .rail .nav-item:focus-within > .nav-drop, .rail .nav-item.is-open > .nav-drop { transform: none; }
.rail .ra-acct > .nav-drop { top: auto; bottom: 0; }
/* sub-rail */
.subrail { position: fixed; left: var(--rail-w); top: 0; bottom: 0; z-index: 40; width: var(--sub-w); display: flex; flex-direction: column; padding: 16px 10px 10px; background: var(--sub-bg, #0b252c); border-right: 1px solid var(--line); transition: width 0.18s ease; }
.sr-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; color: #6c8f96; }
.sr-search input { flex: 1; height: auto; padding: 0; border: 0; background: none; color: var(--ink); font-size: 0.85rem; box-shadow: none; }
.sr-search input:focus { box-shadow: none; }
.sr-search:focus-within { border-color: rgba(var(--accent-rgb), 0.6); }
.sr-search kbd { flex: none; font: inherit; font-size: 0.66rem; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; color: #6c8f96; }
.sr-nav { flex: 1; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; scrollbar-width: none; }
.sr-h { margin: 0; padding: 14px 10px 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6c8f96; white-space: nowrap; }
.sr-h:first-child { padding-top: 2px; }
.sr-i { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: 9px; color: #b9d2d6; font-size: 0.86rem; white-space: nowrap; transition: background 0.12s, color 0.12s; }
a.sr-i:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.sr-i.cur { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); font-weight: 600; }
.sr-i.is-soon { opacity: 0.45; cursor: default; }
.sr-l { overflow: hidden; text-overflow: ellipsis; }
.sr-n { margin-left: auto; font-size: 0.72rem; color: #6c8f96; font-variant-numeric: tabular-nums; }
.sr-b { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--bad-rgb), 0.16); color: var(--bad); font-size: 0.68rem; font-weight: 800; text-align: center; }
.sr-collapse { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 10px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: #6c8f96; font: inherit; font-size: 0.82rem; cursor: pointer; }
.sr-collapse:hover { color: var(--ink); }
.sr-collapse svg { transition: transform 0.2s; }
/* ingeklapt: alleen iconen */
body.sub-collapsed .subrail { width: var(--sub-c); padding-left: 8px; padding-right: 8px; }
body.sub-collapsed .sr-search, body.sub-collapsed .sr-h, body.sub-collapsed .sr-l, body.sub-collapsed .sr-n { display: none; }
body.sub-collapsed .sr-i, body.sub-collapsed .sr-collapse { justify-content: center; padding-left: 0; padding-right: 0; position: relative; }
body.sub-collapsed .sr-b { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: 0.6rem; }
body.sub-collapsed .sr-collapse svg { transform: rotate(180deg); }
/* inhoud schuift naast de rails */
body.app.has-rail { padding-left: var(--rail-w); }
body.app.has-rail.has-sub { padding-left: calc(var(--rail-w) + var(--sub-w)); transition: padding-left 0.18s ease; }
body.app.has-rail.has-sub.sub-collapsed { padding-left: calc(var(--rail-w) + var(--sub-c)); }
.app-main { padding: 32px clamp(16px, 3vw, 36px) 56px; }
@media (max-width: 860px) {
  body.app.has-rail, body.app.has-rail.has-sub, body.app.has-rail.has-sub.sub-collapsed { padding-left: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .rail { display: none; } /* op de telefoon vervangt de onderbalk .tabbar--staff de rail (13 okt '26) */
  .ra-gym, .ra-brand, .ra-help, .ra-acct, .ra-sep { display: none; }
  .ra-main, .ra-foot { flex-direction: row; justify-content: space-around; width: auto; flex: 1; }
  .ra-foot { flex: 0 0 auto; }
  .ra-main { overflow: visible; }
  .ra-i { width: auto; min-width: 58px; padding: 6px 4px; font-size: 0.66rem; }
  .ra-i[target="_blank"] { display: none; }
  .subrail, body.sub-collapsed .subrail { position: sticky; top: 0; left: 0; width: auto; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .subrail::-webkit-scrollbar { display: none; }
  .sr-search, .sr-collapse, .sr-h, .sr-i.is-soon { display: none !important; }
  .sr-nav { flex-direction: row; gap: 6px; overflow: visible; }
  .sr-i, body.sub-collapsed .sr-i { flex: none; min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
  body.sub-collapsed .sr-l { display: inline; }
  .app-main { padding-top: 18px; }
}

/* Rail-top = softwarelogo; gym-dropdown bovenin de sub-rail (Robin, 9 okt '26) */
.ra-brand { width: 44px; height: 44px; margin-bottom: 14px; }
.sr-gym { position: relative; margin-bottom: 10px; }
.sr-gymbtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.sr-gymbtn:hover, .sr-gym.is-open > .sr-gymbtn { background: rgba(255, 255, 255, 0.06); border-color: rgba(var(--accent-rgb), 0.35); }
.sr-gymlogo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; overflow: hidden; font-weight: 800; font-size: 0.72rem; }
.sr-gymlogo img { width: 76%; height: 76%; object-fit: contain; }
.sr-gymname { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.sr-gymname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.sr-gymname span { font-size: 0.7rem; color: var(--muted); text-transform: capitalize; }
.sr-gymbtn > svg { flex: none; opacity: 0.6; transition: transform 0.2s; }
.sr-gym.is-open > .sr-gymbtn > svg { transform: rotate(180deg); }
.subrail .sr-gym > .nav-drop { left: 0; right: 0; top: calc(100% + 6px); min-width: 0; padding-top: 0; transform: translateY(4px); }
.subrail .sr-gym:hover > .nav-drop, .subrail .sr-gym:focus-within > .nav-drop, .subrail .sr-gym.is-open > .nav-drop { transform: none; }
body.sub-collapsed .subrail .sr-gymname, body.sub-collapsed .subrail .sr-gymbtn > svg { display: none; } /* alleen de sub-rail: de gymwisselaar staat sinds ronde 3 in de hoofd-rail (bug 12 okt '26) */
body.sub-collapsed .subrail .sr-gymbtn { justify-content: center; padding: 4px; border: 0; background: none; }
body.sub-collapsed .subrail .sr-gym > .nav-drop { left: calc(100% + 10px); right: auto; top: 0; min-width: 240px; }
@media (max-width: 860px) { .sr-gym { display: none; } }

/* Meldingen in de leden-app (9 okt '26) */
.push-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 14px 0; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.push-card b { display: block; }
.push-card[hidden] { display: none; }

/* App: vaste ruimte tussen blokken (Robin, 9 okt '26: stats plakten tegen "Laatste gebeurtenissen") */
.app-main .wrap > * + * { margin-top: 18px; }
.app-main .wrap > .page-head + * { margin-top: 0; }
.app-main .grid { margin-bottom: 0; }
.app-main .card { margin-bottom: 0; }
.app-main .card > :last-child { margin-bottom: 0; }
/* Koppel Mollie met het Mollie-icoon */
.btn--mollie { gap: 10px; }
.btn--mollie img { width: 22px; height: 22px; border-radius: 6px; }
/* Race Timer rechts in de kop (zoals "Hiigym" op timer.hiigym.com) */
.nav-side { padding: 8px 10px; border-radius: var(--radius-btn); color: var(--muted); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.nav-side:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
html.nav-compact .site-header .nav-side { padding: 6px 8px; font-size: 0.84rem; } /* Race Timer blijft links van het account staan (Robin, 13 okt '26) */
@media (max-width: 370px) { html.nav-compact .site-header .nav-side { display: none; } }
.price-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.price-grid--4 .price-card { padding: 28px 22px; }
/* #partner had een eigen achtergrond; sinds 12 okt '26 krijgt elke kaart zijn kleur via --pc (zie Plankleuren onderaan) */
.race-time { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--accent); }

/* Taalknop NL/EN (9 okt '26) */
.lang-sw { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; }
.lang-sw:hover { color: #fff; border-color: rgba(var(--accent-rgb), 0.5); }
.mm-lang { display: inline-flex; margin: 10px 0 0 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 800; font-size: 0.8rem; }
html.nav-compact .site-header .lang-sw { display: none; }
.lang-row { margin: 14px 0 0; text-align: center; }

/* ---- Kop en mobiel menu (Robin, 12 okt '26): logo HIIGYM / FITNESS SOFTWARE, Naar de app ook op mobiel, taal in het accountmenu ---- */
.brand img { height: 48px; } /* 48 i.p.v. 40 (Robin, 19 okt '26): de pil is weg, dus ruimte voor het logo */
@media (max-width: 560px) { .site-header .brand img { height: 36px; } }
html.nav-compact .site-header:not(.wl-header) .header-ctas > .btn--app { display: inline-flex; padding: 9px 14px; font-size: 0.76rem; }
@media (max-width: 1360px) { html:not(.nav-fit) .site-header:not(.wl-header) .header-ctas > .btn--app { display: inline-flex; } }
@media (max-width: 400px) { .site-header .btn--app { padding: 8px 10px; font-size: 0.7rem; } }
.nav-drop--branche { min-width: 0; width: 520px; }
.branche-cols { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px; }
.branche-cols .nav-drop-link { padding: 8px 12px; }
.nav-drop-h { margin: 4px 12px 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card--link { display: block; color: inherit; transition: border-color 0.15s; }
.card--link:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.card-more { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.crumb { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; } .crumb a { color: var(--muted); }
/* Mobiel menu: tabs bovenin, groepen met rijen, knoppen onderin (zelfde opbouw als timer.hiigym.com). */
.mm-tabs { display: flex; align-items: center; gap: 6px; padding: 14px 20px 6px; }
.mm-tab { flex: 1; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.mm-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.3); }
.mobile-nav { padding: 6px 20px 0; }
.mobile-nav[hidden] { display: none; }
.mobile-nav .mm-kick { display: block; margin: 16px 0 8px; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mm-list { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }
.mobile-nav .mm-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: var(--surface-2); font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 0; color: #fff; }
.mobile-nav .mm-row:active { background: rgba(var(--accent-rgb), 0.12); }
.mm-row-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.mm-row-ic img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.mm-row-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-row-h { flex: none; color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.mm-foot { display: grid; gap: 10px; }
.mobile-menu.is-open .mm-list, .mobile-menu.is-open .mm-kick { animation: mm-in 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; }
@media (prefers-reduced-motion: reduce) { .mobile-menu.is-open .mm-list, .mobile-menu.is-open .mm-kick { animation: none; } }

/* ---- Medewerkers-app (Robin, 12 okt '26): brede rail met icoon + tekst op één regel, inklapbaar; vensters; ledentabel; kalender; webshop ---- */
:root { --rail-w: 212px; --rail-c: 64px; }
.rail { align-items: stretch; padding: 12px 10px 12px; }
.ra-main, .ra-foot { align-items: stretch; }
.ra-tile.ra-brand { display: flex; align-items: center; gap: 10px; width: auto; height: auto; margin: 2px 4px 14px; padding: 4px; }
.ra-brand .brand__mark { flex: none; width: 36px; height: 36px; }
.ra-brand-l { display: grid; line-height: 1.05; font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; }
.ra-brand-l b { font-size: 0.98rem; } .ra-brand-l small { font-size: 0.6rem; color: var(--accent); letter-spacing: 0.04em; }
.ra-i { flex-direction: row; justify-content: flex-start; gap: 11px; width: auto; min-height: 40px; padding: 8px 11px; font-size: 0.9rem; text-align: left; white-space: nowrap; }
.ra-i .ra-ic svg { width: 19px; height: 19px; }
.ra-i.is-dim { opacity: 0.45; }
.ra-collapse { border: 0; background: none; font: inherit; cursor: pointer; color: #6c8f96; }
.ra-collapse .ra-ic svg { transition: transform 0.2s; }
.ra-sep { width: auto; margin: 6px 10px; }
.ra-acct { margin-top: 6px; } .ra-av { display: flex; align-items: center; gap: 10px; }
body.rail-collapsed { --rail-w: var(--rail-c); }
body.rail-collapsed .rail { padding-left: 8px; padding-right: 8px; }
body.rail-collapsed .ra-l, body.rail-collapsed .ra-brand-l { opacity: 0; pointer-events: none; }
body.rail-collapsed .ra-i { justify-content: flex-start; padding-left: 14.5px; padding-right: 0; } /* icoon blijft op zijn plek: (64 - 16 - 19) / 2 */
body.rail-collapsed .ra-tile.ra-brand { justify-content: flex-start; margin-left: 2px; margin-right: 0; }
body.rail-collapsed .ra-collapse .ra-ic svg { transform: rotate(180deg); }
body.app.has-rail, body.app.has-rail.has-sub, body.app.has-rail.has-sub.sub-collapsed { transition: padding-left 0.18s ease; }
@media (max-width: 860px) {
  :root { --rail-w: 0px; }
  .rail { padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
  .ra-i { flex-direction: column; gap: 4px; min-height: 0; padding: 6px 4px; font-size: 0.66rem; white-space: normal; }
  .ra-collapse, .ra-i.is-dim, .rail .ra-i[href="/app/"] { display: none; }
  body.rail-collapsed .ra-l { display: block; opacity: 1; }
}
/* Rail-icoon van de huidige groep + Mijn gyms */
.ra-i[href="/app/"] { margin-bottom: 4px; }
/* Vensters (nieuwe les, lid toevoegen, bericht, challenge, product) */
.cal-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(2, 12, 15, 0.7); backdrop-filter: blur(4px); }
.cal-pop[hidden] { display: none; }
.cal-pop-in { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.cal-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .cal-pop-head h2 { margin: 0; font-size: 1.4rem; }
.cal-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cal-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 10px; font-size: 0.92rem; } .cal-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 560px) { .form-row--3 { grid-template-columns: 1fr; } }
body.pop-open { overflow: hidden; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; transition: color 0.15s, background 0.15s; }
.icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .icon-btn--danger:hover { color: var(--bad); }
.btn--round { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
/* Ledentabel: avatar, naam + e-mail, rij klikbaar */
.tbl--members td { padding: 10px 12px; } .tbl--members .mrow { cursor: pointer; } .tbl--members .mrow:hover td { background: rgba(255, 255, 255, 0.04); }
.mrow-av { width: 44px; } .mrow-av .nav-avatar { width: 34px; height: 34px; font-size: 0.8rem; }
.mrow-name { display: block; font-weight: 700; color: #fff; } .tbl--members .small { display: block; }
.page-head .row form { margin: 0; }
/* Kalender: volle breedte, uren links, zeven dagen, blokken per les */
body.cal-page .app-main .wrap { max-width: none; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; } .cal-title { margin: 0 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); text-transform: none; }
.cal-acts { display: flex; gap: 8px; }
.cal { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-flat); overflow: hidden; }
.cal-head { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-h { padding: 10px 8px 8px; border-left: 1px solid var(--line); font-size: 0.86rem; } .cal-h b { display: block; text-transform: capitalize; }
.cal-h.is-today b { color: var(--accent); }
.cal-allday { display: grid; gap: 4px; margin-top: 4px; min-height: 4px; }
.cal-ch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(var(--warn-rgb), 0.16); border: 1px solid rgba(var(--warn-rgb), 0.5); color: #fff; font-size: 0.78rem; font-weight: 700; } .cal-ch svg { width: 14px; height: 14px; color: var(--warn); } .cal-ch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-body { position: relative; display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); max-height: calc(100vh - 230px); overflow-y: auto; }
.cal-times { position: relative; } .cal-times span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-times span:first-child { transform: none; }
.cal-day { position: relative; border-left: 1px solid var(--line); }
.cal-day.is-today { background: rgba(var(--accent-rgb), 0.04); }
.cal-slot { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); cursor: cell; }
.cal-slot:hover { background: rgba(var(--accent-rgb), 0.08); }
.cal-ev { position: absolute; left: 3px; right: 3px; z-index: 2; display: grid; align-content: start; gap: 1px; padding: 5px 8px; border: 0; border-left: 3px solid var(--cal-c); border-radius: 8px; background: color-mix(in srgb, var(--cal-c) 22%, var(--surface)); color: #fff; font: inherit; font-size: 0.78rem; line-height: 1.25; text-align: left; overflow: hidden; cursor: pointer; transition: filter 0.12s; }
.cal-ev:hover { filter: brightness(1.15); z-index: 3; } .cal-ev b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-ev span { color: rgba(255, 255, 255, 0.78); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.is-full { border-left-style: double; } .cal-ev.is-off { opacity: 0.45; text-decoration: line-through; } .cal-ev i { font-style: normal; font-size: 0.68rem; color: var(--warn); }
.cal-c1 { --cal-c: #3be9ed; } .cal-c2 { --cal-c: #3ddc84; } .cal-c3 { --cal-c: #ffcc33; } .cal-c4 { --cal-c: #ff8a5b; } .cal-c5 { --cal-c: #b388ff; } .cal-c6 { --cal-c: #ff5a8f; }
.cal-hint { margin: 10px 0 0; }
@media (max-width: 860px) { .cal-head, .cal-body { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); } .cal-h { padding: 8px 4px; font-size: 0.72rem; } .cal-ev { padding: 3px 4px; font-size: 0.66rem; } .cal-ev span { display: none; } .cal-body { max-height: calc(100vh - 300px); } .cal-ch span { display: none; } }
/* Webshop: tabs per soort, filter op looptijd, kaarten */
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-tab { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .shop-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.shop-filter { display: flex; align-items: center; gap: 6px; }
.shop-chip { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .shop-chip.is-on { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; } .shop-grid[hidden] { display: none; }
.shop-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; color: inherit; transition: border-color 0.15s; } .shop-card:hover { border-color: rgba(var(--accent-rgb), 0.6); } .shop-card[hidden] { display: none; } .shop-card.is-off { opacity: 0.55; }
.shop-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .shop-img--empty { display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); color: var(--muted); }
.shop-body { display: grid; gap: 6px; padding: 14px 16px 16px; } .shop-body b { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; text-transform: uppercase; } .shop-body p { margin: 0; }
.shop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; } .shop-meta small { color: var(--muted); font-weight: 500; }
.shop-price { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--accent); }
.shop-acts { position: absolute; top: 10px; right: 10px; } .shop-go { position: absolute; right: 14px; bottom: 14px; color: var(--accent); }
/* Publieke webshop / challenge-inschrijving (op de gymhost, ook als iframe) */
.shop-pub { max-width: 920px; margin: 0 auto; } .shop-pub h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.shop-steps { display: flex; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: s; } .shop-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; font-weight: 700; } .shop-steps li span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 0.74rem; }
.shop-steps li.is-on { color: #fff; border-color: var(--accent); } .shop-steps li.is-on span, .shop-steps li.is-done span { background: var(--accent); color: var(--on-accent); }
@media (max-width: 560px) { .shop-steps li { padding: 6px; font-size: 0; gap: 0; } .shop-steps li span { font-size: 0.74rem; } }
body.embed .site-header, body.embed .site-footer, body.embed .tabbar { display: none; } body.embed main { padding-top: 8px; }
.ch-opt { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; } .ch-opt legend { padding: 0 6px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ch-choice { display: inline-flex; align-items: center; gap: 8px; margin: 4px 10px 4px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; } .ch-choice input { width: 16px; height: 16px; accent-color: var(--accent); } .ch-choice:has(input:checked) { border-color: var(--accent); color: var(--accent); }
/* Nieuws in de leden-app en de bel in de kop */
.nav-bell { position: relative; margin-right: 6px; } .nav-bell.has-new { color: #fff; box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.6); }
.nav-bell-n { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.66rem; font-weight: 800; line-height: 18px; text-align: center; }
.card--post .post-img { width: calc(100% + 52px); margin: -26px -26px 16px; border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 16 / 9; object-fit: cover; }
.item--post { align-items: flex-start; } .post-body { margin: 8px 0 0; color: var(--muted); font-size: 0.92rem; } .post-peek { margin: 6px 0 0; color: var(--muted); }

/* ---- Beelden (Robin, 12 okt '26): gegenereerd in de teal-huisstijl (FLUX.2 dev, gratis); hero, overstappen, branches, login ---- */
.hero--img::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hero-img) center 35% / cover no-repeat; opacity: 0.55; }
.hero--img::after { background: linear-gradient(180deg, rgba(10, 43, 51, 0.5) 0%, rgba(10, 43, 51, 0.78) 55%, var(--bg) 100%), radial-gradient(50% 40% at 80% 20%, rgba(var(--accent-rgb), 0.16), transparent 70%); }
.section-img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 35%; border-radius: var(--radius-lg); margin: 0 0 32px; }
.card--link .card-img { width: calc(100% + 52px); margin: -26px -26px 16px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.login-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: 980px; margin: 40px auto; }
.login-split .login-card { margin: 0; max-width: none; }
.login-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 760px) { .login-split { grid-template-columns: 1fr; margin-top: 16px; } .login-img { aspect-ratio: 16 / 9; max-height: 220px; } }

/* Taalkeuze onderin het account-/inlogmenu (12 okt '26): uitklapknop, iets los van Uitloggen */
.nav-drop-lang { margin: 6px 0 0; padding: 8px 4px 2px; border-top: 1px solid var(--line); }
.nav-drop-lang label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; color: var(--muted); cursor: pointer; }
.nav-drop-lang label:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-drop-lang label > span { display: grid; }
.nav-drop-lang select { flex: 1; height: 30px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; appearance: none; -webkit-appearance: none; box-shadow: none; }
.nav-drop-lang select:focus { box-shadow: none; outline: none; }
.nav-drop-lang label > svg:last-child { width: 14px; height: 14px; opacity: 0.6; }
.rail .nav-drop-lang select { color: var(--ink); }

/* ---- Plankleuren (Robin, 12 okt '26): --pc/--pc-rgb per kaart (layout planStyle); dezelfde kleur in de ring om de accountknop ---- */
.price-card { --pc: var(--accent); --pc-rgb: var(--accent-rgb); background: linear-gradient(165deg, rgba(var(--pc-rgb), 0.2) 0%, rgba(var(--pc-rgb), 0.05) 48%, rgba(255, 255, 255, 0.02) 100%), var(--card); border-color: rgba(var(--pc-rgb), 0.32); }
.price-card::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--pc-rgb), 0.18), transparent 60%); }
.price-card:hover { border-color: rgba(var(--pc-rgb), 0.6); }
.price-card.featured { border-color: var(--pc); box-shadow: 0 0 0 1px rgba(var(--pc-rgb), 0.55), 0 10px 44px rgba(var(--pc-rgb), 0.16); }
.price-card .price-badge { background: var(--pc); color: var(--on-accent); }
.price-card .price-badge--value { background: var(--surface); color: var(--pc); border-color: var(--pc); }
.price-card .price-range, .price-card .price-amount > span { color: var(--pc); }
.price-card .btn:not(.btn--ghost) { background: var(--pc); border-color: var(--pc); }
.price-card .btn--ghost { color: var(--pc); border-color: rgba(var(--pc-rgb), 0.6); }
.price-card .btn--ghost:hover { background: rgba(var(--pc-rgb), 0.14); }
.price-card .price-match { position: absolute; top: 14px; right: 14px; display: none; padding: 4px 10px; border-radius: 999px; background: var(--pc); color: var(--on-accent); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.price-card.is-match { border-color: var(--pc); box-shadow: 0 0 0 2px var(--pc), 0 14px 50px rgba(var(--pc-rgb), 0.28); }
.price-card.is-match .price-match { display: inline-block; }
.nav-account.is-user { box-shadow: inset 0 0 0 2px var(--ring, rgba(255, 255, 255, 0.24)); }
.ra-av { box-shadow: 0 0 0 2px var(--ring, transparent); }
/* Planformulier onder de kaarten (12 okt '26): ledental, wensen als chips, betaalperiode → uitkomst met knop */
.plan-finder { max-width: 980px; margin: 28px auto 0; padding: 24px 26px; }
.pf-head h3 { margin: 0; font-size: 1.5rem; }
.pf-head p { margin: 6px 0 0; color: var(--muted); }
.pf-grid { display: grid; gap: 18px; margin: 20px 0 0; }
.pf-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.pf-q legend, .pf-label { display: block; font-weight: 700; margin-bottom: 10px; }
.pf-q .pc-row label { margin: 0; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { position: relative; display: inline-block; }
.pf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pf-chip span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; font-weight: 600; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.pf-chip span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); transition: background 0.15s, border-color 0.15s; }
.pf-chip input:checked + span { border-color: var(--accent); color: #fff; background: rgba(var(--accent-rgb), 0.12); }
.pf-chip input:checked + span::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--bg); }
.pf-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-result { --pc: var(--accent); margin-top: 20px; padding-top: 16px; }
.pf-result .pc-price > b { color: var(--pc); }
.pf-result .btn { margin-left: auto; }
@media (max-width: 560px) { .plan-finder { padding: 16px 14px; } .pf-result .btn { width: 100%; margin-left: 0; } }
/* Beelden door de site (12 okt '26, Nano Banana Pro) */
.img-band { height: clamp(200px, 34vw, 420px); background: var(--img) center 35% / cover no-repeat; position: relative; }
.img-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 43, 51, 0.12) 0%, rgba(10, 43, 51, 0.3) 60%, var(--bg) 100%); }
.section-img--wide { aspect-ratio: 16 / 7; margin-bottom: 36px; }
.feat-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 32px; align-items: center; margin-bottom: 30px; }
.feat-top .section-head { margin-bottom: 0; }
.feat-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 860px) { .feat-top { grid-template-columns: 1fr; gap: 18px; } .feat-top .feat-img { order: -1; aspect-ratio: 21 / 9; } }

/* ---- Ronde 2, 12 okt '26 avond: betaalperiode boven de kaarten, compacte prijskop, pijlers, risicoregel bij CTA's ---- */
.bill-row { display: flex; justify-content: center; margin: 4px 0 22px; }
.plans .price-head { margin-bottom: 16px; }
.plans .price-head p { max-width: 64ch; margin-left: auto; margin-right: auto; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px 26px; }
.pillars li { display: flex; gap: 12px; align-items: flex-start; }
.pillar-ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.pillar-ic svg { width: 20px; height: 20px; }
.pillars b { display: block; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; }
.pillars span:not(.pillar-ic) { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin-top: 2px; }
.pillars-band { padding: 22px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillars--compact { max-width: 980px; margin: 20px auto 0; text-align: left; }
.pillars--compact .pillar-ic { width: 34px; height: 34px; } .pillars--compact .pillar-ic svg { width: 17px; height: 17px; }
.pillars--compact b { font-size: 0.95rem; } .pillars--compact span:not(.pillar-ic) { font-size: 0.86rem; }
.cta-risk { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--finish); font-size: 0.92rem; font-weight: 600; }
.cta-risk svg { flex: 0 0 auto; width: 18px; height: 18px; }
@media (max-width: 560px) { .pillars-band { padding: 16px 0; } .pillars { gap: 12px; } }
/* /pricing/ opent op de plannen (Robin, 12 okt '26 avond): korte kop, pijlers pas ónder de kaarten */
.plans { padding-top: clamp(28px, 4vw, 52px); }
.plans .price-head { margin-bottom: 10px; }
.plans .price-head h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); }
.pillars--compact { margin: 28px auto 0; }

/* ---- Ronde 3, 12 okt '26 avond: account en gymwisselaar bovenin de rail, sleepbare rail, inrichten in stappen, ledenlijst, rooster leden-app ---- */
.ra-acct { margin: 0 0 8px; }
.ra-av { width: 100%; padding: 6px 8px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--ink); font: inherit; text-align: left; box-shadow: none; transition: background 0.12s, border-color 0.12s; }
.ra-av:hover, .ra-acct.is-open > .ra-av { background: rgba(255, 255, 255, 0.06); border-color: rgba(var(--accent-rgb), 0.35); }
.ra-avatar { flex: none; display: grid; border-radius: 50%; box-shadow: 0 0 0 2px var(--ring, rgba(255, 255, 255, 0.2)); }
.ra-avatar .nav-avatar { width: 32px; height: 32px; }
.ra-who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ra-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.ra-who span { font-size: 0.7rem; color: var(--muted); }
.ra-av > svg { flex: none; opacity: 0.6; transition: transform 0.2s; }
.ra-acct.is-open > .ra-av > svg { transform: rotate(180deg); }
.rail .ra-acct > .nav-drop { top: 0; bottom: auto; }
.rail .sr-gym { margin: 0 0 12px; }
.ra-drop .nav-drop-in { padding: 6px; background: #0b252c; border-color: rgba(255, 255, 255, 0.12); }
.ra-drop .ra-dh { margin: 6px 10px 4px; }
.ra-drop .ra-drop-i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.ra-drop .ra-drop-i svg { flex: none; color: var(--muted); }
.ra-drop .nav-drop-link.is-cur { background: rgba(var(--accent-rgb), 0.1); }
.nav-drop-sep { display: block; height: 1px; margin: 4px 6px; background: var(--line); }
.ra-gym-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.ra-gym-opt .sr-gymlogo { width: 34px; height: 34px; }
.ra-gym-opt .ra-gym-txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ra-gym-opt .ra-gym-txt b { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-gym-opt .ra-gym-txt span { font-size: 0.74rem; color: var(--muted); }
.ra-gym-opt > svg { flex: none; color: var(--accent); }
.ra-drop .nav-drop-who { padding: 8px 10px 10px; }
.ra-resize { position: absolute; top: 0; bottom: 0; right: -3px; width: 7px; cursor: col-resize; z-index: 52; border-radius: 3px; transition: background 0.15s; }
.ra-resize:hover, .ra-resize.is-drag { background: rgba(var(--accent-rgb), 0.45); }
body.rail-drag, body.rail-drag * { cursor: col-resize !important; user-select: none; }
body.rail-drag .rail, body.rail-drag .subrail, body.rail-drag.app.has-rail, body.rail-drag.app.has-rail.has-sub { transition: none !important; }
body.rail-collapsed .ra-who, body.rail-collapsed .ra-av > svg, body.rail-collapsed .rail .sr-gymname, body.rail-collapsed .rail .sr-gymbtn > svg { opacity: 0; pointer-events: none; }
body.rail-collapsed .ra-resize { display: none; }
body.rail-collapsed .ra-av, body.rail-collapsed .rail .sr-gymbtn { justify-content: flex-start; padding: 5px 0 5px 7px; }
@media (max-width: 860px) { .ra-acct, .rail .sr-gym, .ra-resize { display: none; } }
/* Inrichten in stappen */
.onb { padding: 22px 24px; margin-bottom: 20px; }
.onb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.onb-head h2 { margin: 0 0 2px; font-size: 1.35rem; } .onb-head p { margin: 0; font-size: 0.92rem; } .onb-head p b { color: var(--accent); }
.onb-bar { --p: 0%; flex: 0 0 180px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.onb-bar i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--finish)); }
.onb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.onb-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; }
.onb-step.is-next { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.35); }
.onb-step.is-done { opacity: 0.55; }
.onb-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); font-weight: 800; font-size: 0.82rem; color: var(--muted); }
.onb-step.is-next .onb-n { border-color: var(--accent); color: var(--accent); }
.onb-step.is-done .onb-n { border-color: var(--finish); background: rgba(var(--finish-rgb), 0.15); color: var(--finish); }
.onb-body { min-width: 0; display: grid; gap: 2px; }
.onb-body > b { font-size: 1rem; } .onb-step.is-done .onb-body > b { text-decoration: line-through; }
.onb-body > span { color: var(--muted); font-size: 0.9rem; }
.onb-how { margin-top: 6px; } .onb-how summary { cursor: pointer; color: var(--accent); font-size: 0.86rem; font-weight: 600; }
.onb-how ol { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.onb-step .btn { align-self: center; white-space: nowrap; }
.onb-done { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--finish); font-weight: 600; }
@media (max-width: 600px) { .onb-step { grid-template-columns: 30px minmax(0, 1fr); } .onb-step .btn { grid-column: 2; justify-self: start; } .onb-bar { flex-basis: 100%; } }
/* Ledenlijst */
.mem-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -6px 0 14px; }
.mem-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 360px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.03); }
.mem-search input { flex: 1; height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink); } .mem-search input:focus { box-shadow: none; }
.mem-search:focus-within { border-color: rgba(var(--accent-rgb), 0.6); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; font-weight: 600; transition: border-color 0.12s, color 0.12s, background 0.12s; }
a.chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.chip.is-on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.chip--select { position: relative; padding-right: 10px; cursor: pointer; }
.chip--select select { appearance: none; -webkit-appearance: none; height: auto; padding: 0 2px; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; }
.chip--select select:focus { box-shadow: none; outline: none; } .chip--select select option { color: #000; }
.chip--select > svg { width: 14px; height: 14px; opacity: 0.6; }
.tbl--members th { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbl--members td { vertical-align: middle; white-space: nowrap; }
.mrow-lid { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.mrow-txt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-badge { display: inline-block; padding: 2px 6px; border-radius: 5px; background: #ffd54a; color: #1a1600; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.m-contact { display: flex; gap: 4px; }
.m-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--accent); }
.m-ic:hover { background: rgba(var(--accent-rgb), 0.12); }
.m-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); vertical-align: middle; }
.m-dot.is-on { background: var(--finish); box-shadow: 0 0 0 3px rgba(var(--finish-rgb), 0.18); }
.m-more { width: 44px; text-align: right; }
.icon-btn--sm { width: 30px; height: 30px; border-radius: 8px; }
/* Rooster in de leden-app */
.sch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sch-head h1 { margin: 0; }
.sch-filter { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; }
.sch-filter select { appearance: none; -webkit-appearance: none; height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; max-width: 180px; }
.sch-filter select:focus { box-shadow: none; outline: none; } .sch-filter select option { color: #000; } .sch-filter > svg:last-child { width: 14px; height: 14px; opacity: 0.6; }
.sch-day { position: sticky; top: var(--hdr, 60px); z-index: 2; margin: 18px 0 8px; padding: 6px 0; background: var(--bg); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sch-list { display: grid; gap: 8px; }
.sch-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.sch-row.is-mine { border-color: rgba(var(--accent-rgb), 0.45); }
.sch-time { display: grid; line-height: 1.15; } .sch-time b { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .sch-time span { font-size: 0.74rem; color: var(--muted); }
.sch-body { min-width: 0; display: grid; gap: 2px; } .sch-body > b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-meta { font-size: 0.82rem; color: var(--muted); }
.sch-cap { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: var(--finish); }
.sch-cap svg { width: 15px; height: 15px; } .sch-cap.is-full { color: var(--bad); }
.sch-cap em { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--bad-rgb), 0.16); font-style: normal; font-size: 0.7rem; }
.sch-row .btn { min-width: 104px; }
.btn--wait { background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.35); }
.btn--onwait { background: var(--finish); border-color: var(--finish); color: #06271a; }
@media (max-width: 420px) { .sch-row { grid-template-columns: 56px minmax(0, 1fr); } .sch-row form { grid-column: 1 / -1; } .sch-row .btn { width: 100%; } }
.tabbar { grid-template-columns: repeat(4, 1fr); }
.tab-n { position: absolute; top: -2px; right: 2px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 16px; text-align: center; }
.tab-ic { position: relative; }

/* Ronde 3b (12 okt '26 avond): account compact onderin de rail; micro-animatie op vensters */
.ra-foot .ra-acct { margin: 4px 0 2px; }
.ra-foot .ra-av { padding: 5px 8px 5px 6px; gap: 8px; border-color: transparent; background: none; }
.ra-foot .ra-av:hover, .ra-foot .ra-acct.is-open > .ra-av { background: rgba(255, 255, 255, 0.05); border-color: var(--line); }
.ra-foot .ra-avatar .nav-avatar { width: 26px; height: 26px; font-size: 0.7rem; }
.ra-foot .ra-who b { font-size: 0.8rem; font-weight: 600; }
.ra-foot .ra-who span { display: none; }
.rail .ra-foot .ra-acct > .nav-drop { top: auto; bottom: 0; }
body.rail-collapsed .ra-foot .ra-av { padding: 4px 0 4px 10.5px; } /* foto (26 px) op dezelfde as als de iconen; ingeklapt staat alles links uitgelijnd (12 okt 26) */
.btn--mollie img { width: 20px; height: 20px; margin-right: 8px; border-radius: 5px; vertical-align: middle; }
@keyframes pop-bg-in { from { opacity: 0; } }
@keyframes pop-bg-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
.cal-pop:not([hidden]) { animation: pop-bg-in 0.16s ease-out; }
.cal-pop:not([hidden]) .cal-pop-in { animation: pop-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.cal-pop.is-out { animation: pop-bg-out 0.15s ease-in forwards; }
.cal-pop.is-out .cal-pop-in { animation: pop-out 0.15s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .cal-pop, .cal-pop .cal-pop-in { animation: none !important; } }
/* ---------- Afspraken (pakket 1, 12 okt '26): blok in de kalender met stippelrand, eigen kleur en icoon; rechterhelft als er een les naast staat ---------- */
.cal-appt { --cal-c: #7fb2ff; border: 1px dashed var(--cal-c); border-left: 3px solid var(--cal-c); background: color-mix(in srgb, var(--cal-c) 14%, var(--surface)); }
.cal-appt.is-side { left: 50%; } .cal-appt.is-done { opacity: 0.7; }
.cal-appt b { display: flex; align-items: center; gap: 4px; min-width: 0; } .cal-appt b svg { flex: none; width: 12px; height: 12px; } .cal-appt b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .cal-appt b span { display: inline; } }
.cal-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.cal-pop [hidden] { display: none !important; } /* ook knoppen (.btn = inline-flex) verbergen in de stand nieuw/bewerken */
.pop-default { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); } /* Enter = Opslaan, niet de eerste rode knop */
.appt-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .appt-quick { display: flex; gap: 6px; }
.appt-kind { display: inline-flex; align-items: center; gap: 6px; } .appt-kind svg { width: 15px; height: 15px; color: #7fb2ff; } .appt-when { white-space: nowrap; }
.appt-coach { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-size: 1rem; } .appt-coach svg { width: 16px; height: 16px; color: var(--accent); }
.appt-avail-add, .appt-self { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.appt-guest { margin: 2px 0 8px; }
/* Leden-app: tab Lessen | Afspraken in het rooster, vrije tijden als knoppen (pakket 1, 12 okt '26) */
.sch-tabs { flex: 0 0 auto; } .sch-tabs .shop-tab { display: inline-flex; align-items: center; }
.slot-row { gap: 8px; } .slot-row .btn { min-width: 76px; }
.appt-new { margin-top: 18px; }
@media (max-width: 420px) { .sch-row > .badge { grid-column: 2; justify-self: start; } }

/* ---- Ronde 4, 12 okt '26 avond: pijl naar rechts bij het account, snel zoeken, mobiel Race Timer-menu met kaarten, contact, branches ---- */
.ra-foot .ra-av > svg { transform: rotate(-90deg); }
.ra-foot .ra-acct.is-open > .ra-av > svg { transform: rotate(-90deg); }
/* Snel zoeken (Ctrl K) */
.sr-search { cursor: pointer; background: none; font: inherit; width: 100%; text-align: left; }
.sr-search > span { flex: 1; font-size: 0.85rem; color: #6c8f96; }
body.sub-collapsed .sr-search { display: flex; justify-content: center; padding: 0; } body.sub-collapsed .sr-search > span, body.sub-collapsed .sr-search kbd { display: none; }
.cal-pop.qs { align-items: start; padding-top: 10vh; }
.qs-in { padding: 0; width: min(640px, 100%); overflow: hidden; }
.qs-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.qs-head input { flex: 1; height: auto; padding: 6px 0; border: 0; background: none; box-shadow: none; color: var(--ink); font-size: 1.05rem; } .qs-head input:focus { box-shadow: none; }
.qs-head kbd { font: inherit; font-size: 0.68rem; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; color: #6c8f96; }
.qs-body { max-height: 60vh; overflow-y: auto; padding: 8px; }
.qs-h { margin: 8px 10px 4px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #6c8f96; }
.qs-i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); }
.qs-i:hover, .qs-i.is-sel { background: rgba(var(--accent-rgb), 0.12); }
.qs-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.qs-i.is-sel .qs-ic { color: var(--accent); }
.qs-t { flex: 1; min-width: 0; display: grid; line-height: 1.2; } .qs-t b { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qs-t span { font-size: 0.78rem; color: var(--muted); }
.qs-g { font-size: 0.72rem; color: #6c8f96; white-space: nowrap; }
.qs-hint { margin: 14px 10px; color: var(--muted); font-size: 0.88rem; }
/* Mobiel menu, Race Timer-tab: kaarten in een slider (zelfde opbouw als timer.hiigym.com) */
.mm-cards { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px 18px; padding: 0 20px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0 20px; overscroll-behavior-x: contain; }
.mm-cards::-webkit-scrollbar { display: none; }
.mobile-nav .mm-card { flex: none; width: 112px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 10px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 18px; background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.02)); color: #fff; }
.mm-card img { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; }
.mm-card b { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.9rem; line-height: 1.1; text-transform: uppercase; text-align: center; }
.mm-card-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.mm-card-ic svg { width: 28px; height: 28px; }
.mm-cards--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0 0 18px; padding: 0; }
.mobile-nav .mm-cards--two .mm-card { width: auto; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 14px; }
.mobile-nav .mm-cards--two .mm-card b { text-align: left; }
.mm-kick a { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
/* Contact */
.contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; }
.contact-card { padding: 28px; }
.contact-topics { margin-bottom: 18px; }
.contact-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-form .field { display: grid; gap: 6px; margin: 0 0 14px; } .contact-form .field > span { font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.contact-form textarea { width: 100%; resize: vertical; }
.contact-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.contact-form .cta-risk { margin-top: 14px; }
.contact-sent { display: flex; gap: 14px; align-items: flex-start; } .contact-sent > svg { flex: none; width: 28px; height: 28px; color: var(--finish); margin-top: 4px; } .contact-sent h2 { margin: 0 0 6px; } .contact-sent .btn { margin-top: 12px; }
.contact-aside { display: grid; gap: 14px; } .contact-aside .card { margin: 0; } .contact-aside h3 { margin: 0 0 6px; font-size: 1.1rem; }
@media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; } .contact-form .form-row { grid-template-columns: 1fr; } }
/* Branchepagina's */
.card--pain { border-color: rgba(var(--bad-rgb), 0.3); } .card--pain h3 { color: #fff; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.grid-2 .card { margin-bottom: 0; }
/* ---- Proefles & leads (pakket 2, 12 okt '26): info bovenin het leadvenster, regel naar de proefles in de webshop, kaart "bel mij" ---- */
.lead-info { margin: -6px 0 10px; } .lead-info p { margin: 0 0 4px; }
.tbl--leads .badge { margin-left: 2px; } .tbl--leads td > .small { margin-top: 2px; }
.shop-trial { margin: -4px 0 16px; }
.trial-call { margin-top: 22px; } .trial-call .card__title { font-size: 1.15rem; } .trial-call .row p { margin: 0; }
.shop-pub > .sch-list { margin: 0 0 18px; }
/* ---- Pauzes, opzeggingen en mislukte incasso's (pakket 3, 12 okt '26): staff-lijsten, notities bij het contract, accountkaart van het lid ---- */
.badge--overdue { color: var(--bad); border-color: rgba(var(--bad-rgb), 0.4); background: rgba(var(--bad-rgb), 0.1); }
.pause-cfg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; } .pause-cfg a { font-weight: 600; }
.row-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.c-note { margin-top: 4px; white-space: nowrap; } .c-note a { font-weight: 600; } .c-note .badge { margin-left: 4px; }
.acct-box { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.acct-box p { margin: 8px 0 0; } .acct-box form { margin-top: 10px; }
.acct-act { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 4px; }
.acct-act > summary { display: flex; align-items: center; gap: 10px; list-style: none; margin: 8px 0; color: var(--ink); font-weight: 700; }
.acct-act > summary::-webkit-details-marker { display: none; }
.acct-act > summary svg { width: 18px; height: 18px; color: var(--accent); flex: none; } .acct-act > summary svg:last-child { margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.acct-act[open] > summary svg:last-child { transform: rotate(180deg); }
.acct-act form { margin-top: 10px; } .acct-act textarea { width: 100%; resize: vertical; }
.acct-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; } .acct-note svg { width: 16px; height: 16px; flex: none; }

/* ---- 12 okt '26 nacht (Robin): rail zo vloeiend als de sub-rail, gymkaarten, stappen met iconen, accordeons, snel toevoegen,
   plan in het accountmenu, mobiel menu met knoppen per tab ---- */
.rail { transition: width 0.18s ease, padding 0.18s ease; }
.subrail { transition: width 0.18s ease, left 0.18s ease, padding 0.18s ease; }
.rail .ra-i, .rail .ra-av, .rail .sr-gymbtn, .rail .ra-brand { overflow: hidden; }
.rail .ra-i, .rail .ra-av, .rail .sr-gymbtn, .rail .ra-tile.ra-brand { transition: background 0.12s, color 0.12s, border-color 0.12s, padding 0.18s ease, margin 0.18s ease; }
.ra-l, .ra-brand-l, .ra-who, .ra-av > svg, .rail .sr-gymname, .rail .sr-gymbtn > svg { transition: opacity 0.14s ease; }
body.rail-collapsed .ra-sep { margin-left: 8px; margin-right: 8px; }
@media (prefers-reduced-motion: reduce) { .rail, .subrail, .rail .ra-i, .ra-l { transition: none !important; } }
/* Alle gyms als kaarten met logo */
.gym-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gym-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; color: inherit; transition: border-color 0.15s; }
a.gym-card:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.gym-cover { display: grid; place-items: center; height: 116px; border-bottom: 1px solid var(--line); }
.gym-cover img { max-width: 64%; max-height: 62px; object-fit: contain; }
.gym-cover b { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 2.2rem; line-height: 1; }
.gym-cover--new { background: rgba(255, 255, 255, 0.025); color: var(--muted); }
.gym-cover--new svg { width: 34px; height: 34px; }
.gym-body { display: grid; gap: 6px; padding: 16px 18px 4px; min-width: 0; }
.gym-name { font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-addr { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 0.86rem; }
.gym-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-addr svg { flex: none; width: 14px; height: 14px; }
.gym-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding: 12px 18px 16px; }
.gym-plan { padding: 3px 10px; border-radius: 999px; background: rgba(var(--pc-rgb, 59, 233, 237), 0.14); color: var(--pc, var(--accent)); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.gym-role { color: var(--muted); font-size: 0.82rem; }
.gym-card--new { border-style: dashed; }
.gym-card--new .gym-body { gap: 10px; padding-bottom: 18px; }
.gym-card--new input { height: 42px; }
/* Inrichten: icoon per stap, nummer als bolletje op de tegel */
.onb-step { grid-template-columns: 44px minmax(0, 1fr) auto; }
.onb-ic { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); }
.onb-ic img { width: 24px; height: 24px; border-radius: 6px; }
.onb-step.is-next .onb-ic { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.1); }
.onb-step.is-done .onb-ic { color: var(--finish); }
.onb-ic .onb-n { position: absolute; right: -7px; bottom: -7px; width: 20px; height: 20px; font-size: 0.64rem; background: #0d3039; }
.onb-ic .onb-n svg { width: 11px; height: 11px; }
.onb-step.is-done .onb-ic .onb-n { background: var(--finish); border-color: var(--finish); color: #04161a; }
/* Accordeons: chevron draait mee (de hoogte-animatie zit in app.js) */
.acc > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary svg { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.acc[open]:not(.is-closing) > summary svg { transform: rotate(180deg); }
/* Ledentabel: altijd een tabel, onderste regel = snel toevoegen */
.m-empty td { padding: 24px 16px; color: var(--muted); text-align: center; white-space: normal; }
.m-quick td { padding: 0; border-bottom: 0; }
.m-quick-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 16px; border: 0; border-top: 1px dashed rgba(255, 255, 255, 0.14); background: none; color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; }
.m-quick-btn:hover, .m-quick-btn:focus-visible { background: rgba(var(--accent-rgb), 0.06); color: var(--accent); }
.m-quick-btn[hidden] { display: none; }
.m-quick-btn svg { width: 16px; height: 16px; }
.tbl--members .m-new td { background: rgba(var(--accent-rgb), 0.05); cursor: default; white-space: normal; }
.m-new-row { display: flex; align-items: center; gap: 8px; }
.m-new-row input { flex: 1 1 140px; min-width: 0; height: 38px; padding: 0 12px; font-size: 0.9rem; }
.m-new-row .nav-avatar { flex: none; width: 34px; height: 34px; }
.m-new .nav-avatar svg { width: 16px; height: 16px; }
.m-new-act { flex: none; display: inline-flex; gap: 6px; }
@media (max-width: 700px) { .m-new-row { flex-wrap: wrap; } .m-new-row input { flex-basis: 40%; } }
.icon-btn--ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.icon-btn--ok:hover { background: var(--accent-bright, var(--accent)); color: var(--on-accent); }
.tbl--members .mrow.is-new td { animation: m-new 2.6s ease-out; }
@keyframes m-new { 0%, 35% { background: rgba(var(--accent-rgb), 0.16); } 100% { background: transparent; } }
/* Actief plan in het accountmenu, in de kleur van het plan (= de ring) */
.nav-drop-who > div .nav-drop-plan { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ring, var(--accent)); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; }
.nav-drop-plan i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Mobiel menu: neutrale tabs (alleen de CTA valt op), knoppen per tab, taal klein en gecentreerd eronder */
.mm-tab.is-on { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
.mm-btns { display: grid; gap: 10px; }
.mm-btns[hidden] { display: none; }
.mm-lang-row { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 2px; color: var(--muted); font-size: 0.8rem; }
.mm-lang-row svg { width: 14px; height: 14px; opacity: 0.7; }
.mm-lang-row a { color: var(--muted); }
.mm-lang-row a[aria-current] { color: #fff; font-weight: 700; }
/* Prijskaarten met iconen (Robin, 12 okt '26): icoon per plan, per regel en "Altijd inbegrepen" onderin (naar robinwessels.com) */
.price-top { display: flex; align-items: center; gap: 12px; }
.price-top h3 { margin: 0; }
.price-top .price-range { margin: 2px 0 0; }
.price-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(var(--pc-rgb, 59, 233, 237), 0.12); border: 1px solid rgba(var(--pc-rgb, 59, 233, 237), 0.35); color: var(--pc, var(--accent)); }
.price-ic svg { width: 22px; height: 22px; }
.feature-list--ic li > svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--pc, var(--accent)); }
.price-incl { margin: 4px 0 20px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.price-incl__h { margin: 0 0 9px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.price-incl ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.price-incl li { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: #cfe2e5; line-height: 1.25; }
.price-incl svg { flex: none; width: 16px; height: 16px; color: var(--finish); }
html.rail-init .rail, html.rail-init .subrail, html.rail-init body.app.has-rail, html.rail-init .ra-l, html.rail-init .ra-i { transition: none !important; }

/* ---- 13 okt '26 (Robin): drie productkaarten onder de hero, iconen bij de overstapstappen, FAQ met micro-animatie ---- */
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.prod-card { --c: 59, 233, 237; position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 520px; padding: 30px 28px 0; border-radius: 26px; overflow: hidden; color: inherit;
  background: linear-gradient(165deg, rgba(var(--c), 0.18) 0%, rgba(var(--c), 0.05) 55%, rgba(var(--c), 0.02) 100%); border: 1px solid rgba(var(--c), 0.28); transition: border-color 0.2s; }
.prod-card--timer { --c: 255, 181, 71; }
.prod-card--wo { --c: 157, 143, 255; }
.prod-card:hover { border-color: rgba(var(--c), 0.6); }
.prod-kick { color: rgb(var(--c)); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; }
.prod-card h3 { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.prod-card p { margin: 0; color: var(--muted); max-width: 34ch; }
.prod-go { color: rgb(var(--c)); font-weight: 700; font-size: 0.95rem; }
.prod-vis { position: relative; flex: 1; min-height: 280px; margin: 14px -28px 0; pointer-events: none; }
.prod-stage { position: absolute; inset: 0; transform: perspective(1000px) rotateX(16deg) rotateZ(-9deg); transform-origin: 50% 40%; }
.pv { position: absolute; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #0f3640; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); color: #e8f6f7; font-size: 0.78rem; }
.pv--a { left: 8%; top: 8%; width: 58%; }
.pv--b { left: 44%; top: 42%; width: 50%; }
.pv--c { left: 2%; top: 60%; width: 44%; }
.pv--d { left: 58%; top: 2%; width: 40%; }
.pv-k { color: #9ebfc4; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pv-big { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; line-height: 1; }
.pv-time { font-family: var(--font-display); font-style: italic; font-size: 2rem; line-height: 1; color: #fff; letter-spacing: 0.02em; }
.pv-sub { color: #9ebfc4; font-size: 0.72rem; }
.pv-up { color: var(--finish); font-style: normal; font-weight: 700; }
.pv-spark { width: 100%; height: 30px; color: rgb(var(--c)); }
.pv-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.pv-bars i { flex: 1; border-radius: 2px; background: rgba(var(--c), 0.75); }
.pv-row { display: flex; align-items: center; gap: 8px; }
.pv-row i { width: 70px; color: #9ebfc4; font-style: normal; white-space: nowrap; }
.pv-row em { margin-left: auto; color: #9ebfc4; font-style: normal; font-weight: 700; }
.pv-row em.pv-full { color: var(--warn); }
.pv-row em.pv-ok { color: var(--finish); }
.pv-row em.pv-bad { color: var(--bad); }
.pv-prog { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pv-prog i { display: block; height: 100%; background: rgb(var(--c)); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pv-chips em { padding: 3px 9px; border-radius: 999px; background: rgba(var(--c), 0.16); color: rgb(var(--c)); font-style: normal; font-weight: 700; font-size: 0.7rem; }
.pv--wb { background: #f7f7f2; color: #1b2a3a; box-shadow: inset 0 0 0 5px #e3e5df, 0 18px 40px rgba(0, 0, 0, 0.35); }
.pv--wb b { color: #d8433a; font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: 0.86rem; }
.pv--wb i { color: #2a6fd6; font-style: normal; font-weight: 700; }
@media (max-width: 980px) { .prod-grid { grid-template-columns: 1fr; } .prod-card { min-height: 0; } .prod-vis { min-height: 250px; } .pv--a { width: 52%; } }
/* Overstapstappen met een icoon */
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.step-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--accent); }
.step-n { color: var(--muted); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* FAQ: hoogte uit app.js (gemeten), antwoord schuift en vervaagt in */
.faq-a { transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item.open .faq-a { max-height: none; }
.faq-a > * { opacity: 0; transform: translateY(-6px); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item.open .faq-a > * { opacity: 1; transform: none; transition-delay: 0.06s; }
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-a > * { transition: none !important; } }

/* Megamenu Functies variant B + Branche variant A (Robin koos 13 okt '26) */
.mega--b { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 4px 22px; padding: 20px 22px 0; }
.mega--b .mega-foot { grid-column: 1 / -1; }
.mega-feat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 100%; margin-bottom: 16px; padding: 20px; border-radius: 16px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); }
.mega-feat::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover no-repeat; }
.mega-feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 28, 34, 0.05) 20%, rgba(6, 28, 34, 0.95) 80%); }
.mega-feat:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.mega-feat-k { color: var(--accent); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.mega-feat b { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; }
.mega-feat span:not(.mega-feat-k) { color: #cfe2e5; font-size: 0.88rem; line-height: 1.45; }
.mega-feat em { color: var(--accent); font-style: normal; font-weight: 700; font-size: 0.86rem; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; }
.mega-more { display: block; margin: 4px 0 0 40px; color: var(--muted); font-size: 0.78rem; }
.mega-more:hover { color: var(--accent); }
@media (max-width: 1180px) { .mega--b { grid-template-columns: 1fr; } .mega-feat { display: none; } }
.nav-drop--branche { width: min(1080px, calc(100vw - 32px)); min-width: 0; }
.nav-item:has(> .nav-drop--branche) { position: static; }
.branche-a { display: grid; gap: 14px; padding: 20px 22px; }
.branche-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.branche-t { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--line); transition: border-color 0.15s, background 0.15s; }
.branche-t:hover, .branche-t:focus-visible { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.04); outline: none; }
.branche-t img { width: 74px; height: 60px; object-fit: cover; border-radius: 10px; }
.branche-t span { display: grid; gap: 2px; min-width: 0; }
.branche-t b { font-size: 0.92rem; color: var(--ink); }
.branche-t small { color: var(--muted); font-size: 0.74rem; line-height: 1.3; }
@media (max-width: 1100px) { .branche-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mega-foot .mega-demo { color: #fff; }
.mega--b { grid-template-columns: 240px minmax(0, 1fr); }
.mega--b .mega-h { font-size: 0.94rem; }
.mega--b .mega ul, .mega--b .mega-col ul { padding-left: 40px; }
.mega--b .mega-grid { gap: 4px 12px; }

/* ---- SEO- en conversieronde (Robin, 13 okt '26): founding gyms, vergelijking, ROI-rekenhulp, gidsen ---- */
.founding { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; max-width: 980px; margin: 0 auto 22px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255, 181, 71, 0.4); background: linear-gradient(90deg, rgba(255, 181, 71, 0.12), rgba(255, 181, 71, 0.03)); }
.founding-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 181, 71, 0.16); color: #ffb547; }
.founding > div { flex: 1 1 320px; display: grid; gap: 2px; min-width: 0; }
.founding > div b { font-size: 1rem; }
.founding > div span { color: var(--muted); font-size: 0.92rem; }
.founding-left { color: #ffd38a; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.founding-left b { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: #ffb547; }
.founding .btn { background: #ffb547; color: #1b1203; box-shadow: none; }
.cmp-wrap { max-width: 980px; margin: 0 auto 26px; overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp thead th { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; text-transform: uppercase; background: rgba(255, 255, 255, 0.03); }
.cmp tbody th { color: var(--muted); font-weight: 600; font-size: 0.92rem; width: 26%; }
.cmp td { color: var(--muted); font-size: 0.94rem; }
.cmp td.cmp-us { color: #fff; background: rgba(var(--accent-rgb), 0.06); }
.cmp td.cmp-us svg { width: 16px; height: 16px; color: var(--finish); vertical-align: -3px; margin-right: 8px; }
.cmp thead th.cmp-us { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-row.center { justify-content: center; }
.roi-box { max-width: 980px; margin: 0 auto; display: grid; gap: 18px; padding: 26px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.roi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.roi-f { display: grid; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.roi-in { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.roi-in:focus-within { border-color: rgba(var(--accent-rgb), 0.6); }
.roi-in input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; box-shadow: none; }
.roi-in em { color: var(--muted); font-style: normal; font-weight: 700; }
.roi-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roi-out > div { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.3); }
.roi-out > div b { font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1; color: var(--accent); }
.roi-out > div span { color: var(--muted); font-size: 0.9rem; }
.roi-lines { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; color: var(--muted); font-size: 0.9rem; }
.roi-lines b { color: #fff; }
.roi-note { margin: 0; color: var(--muted); font-size: 0.82rem; }
@media (max-width: 760px) { .roi-grid { grid-template-columns: 1fr 1fr; } .roi-out { grid-template-columns: 1fr; } }
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-card { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: inherit; transition: border-color 0.15s; }
.guide-card:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.guide-card b { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
.guide-card span { color: var(--muted); font-size: 0.94rem; }
.guide-card em { color: var(--accent); font-style: normal; font-weight: 700; }
@media (max-width: 900px) { .guide-cards { grid-template-columns: 1fr; } }
.crumbs { margin-bottom: 10px; color: var(--muted); font-size: 0.86rem; }
.crumbs a { color: var(--accent); }
.guide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.guide-toc { position: sticky; top: calc(var(--hdr, 72px) + 20px); display: grid; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); }
.guide-toc p { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.guide-toc ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.9rem; }
.guide-toc a { color: #cfe2e5; }
.guide-toc a:hover { color: var(--accent); }
.guide-body { max-width: 72ch; color: #d6e7ea; font-size: 1.04rem; line-height: 1.7; }
.guide-body h2 { margin: 34px 0 10px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); scroll-margin-top: calc(var(--hdr, 72px) + 16px); }
.guide-body h2:first-child { margin-top: 0; }
.guide-body a { color: var(--accent); }
.guide-body li { margin: 6px 0; }
.guide-q li { margin: 12px 0; }
.guide-q b { display: block; color: #fff; }
.guide-q span { color: var(--muted); }
.guide-cta { display: grid; gap: 10px; margin-top: 36px; padding: 22px; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.06); }
.guide-cta b { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; text-transform: uppercase; }
.guide-cta span { color: var(--muted); }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; } .guide-toc { position: static; } }
.guide-toc .btn { color: var(--on-accent); }
/* Stripe (13 okt '26): CTA van een prijskaart als formulier (POST /api/billing/checkout), testmodus-regel en plan op de bedankpagina. */
.price-cta { display: grid; margin: auto 0 0; }
.price-card .price-cta .btn { margin-top: 0; }
.bill-test { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 181, 71, 0.1); border: 1px dashed #ffb547; color: #ffd28a; }
.bill-test b { color: #ffb547; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; }
.bill-plan { display: flex; gap: 10px; align-items: baseline; }
.bill-plan b { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; text-transform: uppercase; color: var(--accent); }

/* ---- Ronde 7 (Robin, 13 okt '26): demo-CTA's, planformulier 50/50, prijskaarten gecentreerd, grote vergelijkingstabel, KPI's ---- */
/* Prijskaarten: vier op een rij, anders twee bij twee (gecentreerd), op de telefoon onder elkaar. Daarvoor bleef Partner alleen links staan. */
.price-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .price-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) { .price-grid--4 { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }
/* Planformulier: links de vragen, rechts de kaart van het plan dat past (zelfde stijl als de prijskaarten). */
.plan-finder { max-width: 1120px; padding: 28px; }
.pf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.pf-left .pf-head h3 { font-size: 1.7rem; }
.pf-left .pc-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
.pf-left .pc-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
.price-calc input[type="range"] { padding: 0; border: 0; border-radius: 0; box-shadow: none; } /* de algemene input-rand gaf een vak om de schuif */
.pf-left .pf-grid { gap: 22px; margin-top: 22px; }
.pf-right { min-width: 0; }
.pf-card { padding: 26px 24px; animation: pf-in 0.35s var(--ease-out); }
.pf-card[hidden] { display: none; }
.pf-card .price-tag { margin-bottom: 12px; }
.pf-per { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; }
.pf-per b { color: var(--ink); font-size: 1rem; }
.pf-card .pc-mollie { margin-top: 2px; }
.pf-card .feature-list { margin: 18px 0 22px; }
.pf-cta { display: grid; margin: auto 0 0; }
.price-card .pf-cta .btn { margin-top: 0; }
@keyframes pf-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-card { animation: none; } }
@media (max-width: 860px) { .pf-split { grid-template-columns: minmax(0, 1fr); gap: 22px; } .plan-finder { padding: 20px 18px; } }
@media (max-width: 560px) { .pf-card { padding: 22px 18px; } }
/* "Boek een demo" onder het planformulier (/pricing/) en onder het productblok (home) */
.demo-cta { justify-content: space-between; gap: 14px 24px; max-width: 1120px; margin: 24px auto 0; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.06); text-align: left; }
.demo-cta p { flex: 1 1 380px; margin: 0; }
.demo-cta p b { color: var(--ink); }
.demo-cta .btn-row { margin: 0; }
.prod-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: 34px; text-align: center; }
.prod-cta p { margin: 0; color: var(--muted); font-weight: 600; }
.prod-cta .btn-row { margin: 0; justify-content: center; }
@media (max-width: 560px) { .demo-cta { padding: 16px; } .demo-cta .btn-row, .demo-cta .btn, .prod-cta .btn-row, .prod-cta .btn { width: 100%; } }
/* Slotband vóór de footer: links het gesprek met Robin, rechts zelf rondklikken in de sandbox */
.demo-band .section-head { margin-bottom: 30px; }
.db-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
.db-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.db-card--book { border-color: rgba(var(--accent-rgb), 0.45); background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03) 60%), var(--card); }
.db-card h3 { margin: 6px 0 0; font-size: 1.5rem; }
.db-card p { margin: 0 0 6px; color: var(--muted); }
.db-card > .btn { margin-top: 4px; }
.db-card .cta-risk { margin: 2px 0 0; }
.db-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--accent); }
.db-ic svg { width: 22px; height: 22px; }
.db-card--try .db-ic { background: rgba(255, 255, 255, 0.06); border-color: var(--line); color: #fff; }
@media (max-width: 760px) { .db-grid { grid-template-columns: minmax(0, 1fr); } .db-card { padding: 22px 18px; } .db-card > .btn { width: 100%; } }
/* Vergelijkingstabel: scrollt in zijn eigen vak (max 560 px) met een vaste kopregel; op smalle schermen ook opzij, met de eerste kolom vast. */
.cmp-wrap { position: relative; max-width: 1120px; max-height: 560px; overflow: auto; background: var(--bg); scrollbar-width: thin; }
.cmp-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp--wide { min-width: 880px; border-collapse: separate; border-spacing: 0; }
.cmp--wide th, .cmp--wide td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 0.9rem; line-height: 1.35; vertical-align: top; }
.cmp--wide thead th { position: sticky; top: 0; z-index: 3; background: #0f3943; font-size: 0.92rem; line-height: 1.2; vertical-align: bottom; }
.cmp--wide thead th.cmp-us { background: #124a52; }
.cmp--wide thead th:first-child { left: 0; z-index: 4; }
.cmp--wide tbody th[scope="row"] { position: sticky; left: 0; z-index: 2; width: 24%; min-width: 150px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 0.88rem; }
.cmp--wide td { position: relative; padding-left: 38px; width: 19%; }
.cmp--wide td.cmp-us { width: 22%; }
.cmp--wide td .cmp-ic { position: absolute; left: 14px; top: 13px; margin: 0; }
.cmp--wide .cmp-group th { padding: 18px 14px 8px; background: var(--bg-2); color: var(--accent); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp--wide .cmp-group th span { position: sticky; left: 14px; }
.cmp--wide tr:last-child th, .cmp--wide tr:last-child td { border-bottom: 0; }
.cmp-y .cmp-ic { color: var(--finish); }
.cmp-p .cmp-ic { color: var(--warn); }
.cmp-n .cmp-ic { color: rgba(255, 255, 255, 0.38); }
.cmp-s .cmp-ic { color: var(--accent); }
.cmp--wide td.cmp-us.cmp-y, .cmp--wide td.cmp-us.cmp-s { color: #fff; }
.cmp--wide td.cmp-s span { color: var(--accent); font-weight: 700; }
.cmp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 16px 0 6px; padding: 0; color: var(--muted); font-size: 0.85rem; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-note { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 0.85rem; text-align: center; }
@media (max-width: 700px) { .cmp-wrap { max-height: 520px; } .cmp--wide { min-width: 760px; } .cmp--wide tbody th[scope="row"] { width: 140px; min-width: 130px; max-width: 150px; font-size: 0.84rem; } .cmp--wide th, .cmp--wide td { font-size: 0.85rem; } }
/* KPI's bovenaan het overzicht van een gym: actieve leden en omzet deze maand */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic l" "ic v" "ic s" "ic go"; column-gap: 16px; padding: 20px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: inherit; transition: border-color 0.15s; }
.kpi:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.kpi__ic { grid-area: ic; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--accent); }
.kpi__l { grid-area: l; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.kpi__v { grid-area: v; margin-top: 4px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.05; }
.kpi__s { grid-area: s; margin-top: 4px; color: var(--muted); font-size: 0.86rem; }
.kpi__s b { color: var(--ink); }
.kpi__go { grid-area: go; margin-top: 8px; color: var(--accent); font-size: 0.84rem; font-weight: 700; }
.kpi__go::after { content: " \203A"; }
@media (max-width: 600px) { .kpis { gap: 10px; } .kpi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "v" "s" "go"; padding: 14px; } .kpi__ic { display: none; } .kpi__l { font-size: 0.7rem; } .kpi__v { font-size: 1.7rem; } .kpi__s { font-size: 0.78rem; } .kpi__go { font-size: 0.8rem; } }
/* Inrichten klaar: dezelfde kaart met 7/7, stappen ingeklapt */
.onb--done .onb-head { margin-bottom: 6px; }
.onb--done .onb-head p b { color: var(--finish); }
.onb-all > summary { cursor: pointer; color: var(--accent); font-size: 0.88rem; font-weight: 600; }
.onb-all .onb-steps { margin-top: 10px; }

/* Onderbalk medewerkers-app op de telefoon (13 okt '26): zelfde .tabbar als de leden-app en de Race Timer, met Inchecken uitgelicht in het midden. */
.tabbar--staff { display: none; }
.tb-sheet { display: none; }
@media (max-width: 860px) {
  .tabbar--staff { display: grid; grid-template-columns: repeat(5, 1fr); }
  .tabbar--staff .tab { background: none; border: 0; font: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer; }
  .tb-sheet { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(4, 18, 22, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .tb-sheet[hidden] { display: none; }
  .tb-sheet-in { position: absolute; left: 0; right: 0; bottom: calc(74px + env(safe-area-inset-bottom)); max-height: calc(100vh - 140px); overflow: auto; padding: 10px 12px 14px; border-radius: 20px 20px 0 0; background: var(--surface, #123d47); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4); }
  .tb-h { margin: 10px 8px 4px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .tb-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
  .tb-row:hover, .tb-row:focus-visible { background: rgba(var(--accent-rgb), 0.08); outline: none; }
  .tb-row.is-cur { color: var(--accent); }
  .tb-row svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }
  .tb-row img, .tb-row > span:first-child:not(:only-child) { flex: 0 0 auto; }
  .tb-row .avatar, .tb-row img { width: 24px; height: 24px; border-radius: 50%; }
  .tb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad, #ff6b5e); margin-left: auto; }
  .tb-sheet form { margin: 0; }
}

/* Overstapsectie (13 okt '26 avond): knoppen onder de kop, foto als band i.p.v. een hele hoogte */
.btn-row--center { justify-content: center; }
.migrate-cta { margin: -18px 0 28px; }
.section-img--wide { max-height: 360px; object-fit: cover; }
.hero-sub b, .section-head b, .pillar b, .prod-card b, .step b { color: var(--ink); font-weight: 700; }
/* Rooster en leden-app (13 okt '26 avond): Rooster-instellingen (code van de widget met kopieerknop), deelnemers, boetes, leden-app */
.roster-set .card--wide, .grid > .fines-card { grid-column: 1 / -1; }
.roster-set .tbl .badge, .fines-card .tbl .badge, .fine-row .badge { white-space: nowrap; }
.snip { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 12px; padding: 12px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); }
.snip-code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84rem; line-height: 1.5; color: #d9eef1; white-space: pre-wrap; word-break: break-all; user-select: all; }
.snip-btn { flex: none; } .snip-btn svg { display: none; } .snip-btn.is-done svg { display: inline; }
.snip-opts { align-items: end; margin-top: 14px; } .snip-go { padding-bottom: 14px; }
.fines-open, .fines-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.fines-note { padding: 10px 14px; border-radius: var(--radius-btn); border: 1px solid rgba(var(--warn-rgb), 0.4); background: rgba(var(--warn-rgb), 0.07); }
.fines-note svg { color: var(--warn); } .fines-note a { color: var(--ink); }
.ok-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--finish); }
.cal-people { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sr-i > svg { flex: none; width: 16px; height: 16px; }
.sch-row.is-target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); scroll-margin-top: 90px; }
.sch-rule { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; } .sch-rule svg { flex: none; margin-top: 2px; color: var(--warn); }
.acct-remind form { margin: 10px 0 4px; }
.fine-row { align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); } .fine-row:first-child { border-top: 0; } .fine-row p { margin: 4px 0 0; }
/* ---- Ronde Lidmaatschappen (13 okt '26): Geld → Lidmaatschappen (pages/plans.js): sjablonen per branche, venster met live voorbeeld;
   rittenkaartsaldo in de leden-app (pages/member.js creditsHtml) en bij het inchecken. ---- */
.cal-pop--wide .cal-pop-in { width: min(1080px, 100%); }
.plan-edit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.plan-pv { position: sticky; top: 0; display: grid; gap: 8px; }
.pv-k { margin: 0; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pv-frame { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.pv-l { margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.pv-frame .shop-card { pointer-events: none; }
.pv-off { margin: 0; }
.pv-app { margin: 0; padding: 16px 18px; } .pv-app .card__title { font-size: 1.05rem; margin-bottom: 10px; }
.pv-sum { margin: 0; font-weight: 700; line-height: 1.5; }
@media (max-width: 860px) { .plan-edit { grid-template-columns: 1fr; } .plan-pv { position: static; } }
.tpl .tpl-intro { margin: -6px 0 0; }
.tpl-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 14px; }
.tpl-radio { position: absolute; opacity: 0; pointer-events: none; }
.tpl-choice { display: grid; justify-items: start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tpl-choice:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.tpl-choice small { color: var(--muted); font-size: 0.8rem; }
.tpl-ic { color: var(--accent); }
.tpl-radio:checked + .tpl-choice { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.tpl-radio:focus-visible + .tpl-choice { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-panel { display: none; gap: 8px; margin-bottom: 14px; }
.tpl:has(#tpl-box:checked) [data-tpl="box"], .tpl:has(#tpl-yoga:checked) [data-tpl="yoga"], .tpl:has(#tpl-pt:checked) [data-tpl="pt"], .tpl:has(#tpl-gym:checked) [data-tpl="gym"], .tpl:has(#tpl-other:checked) [data-tpl="other"] { display: grid; }
.tpl:has(.tpl-radio:checked) .tpl-hint { display: none; }
.tpl:not(:has(.tpl-radio:checked)) .tpl-foot { display: none; }
.tpl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; transition: opacity 0.15s; }
.tpl-row:has(.tpl-pick input:not(:checked)) { opacity: 0.5; }
.tpl-pick { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.tpl-pick input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.tpl-txt { display: grid; gap: 2px; } .tpl-txt small { color: var(--muted); } .tpl-meta { font-size: 0.78rem; }
.tpl-price { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-weight: 700; } .tpl-price input { width: 104px; text-align: right; }
.tpl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
@media (max-width: 560px) {
  .tpl-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tpl-choice { padding: 10px 12px; } .tpl-choice b { font-size: 0.92rem; } .tpl-ic svg { width: 22px; height: 22px; }
  .tpl-row { flex-wrap: wrap; } .tpl-pick { flex: 1 1 100%; } .tpl-price { margin-left: 30px; }
  .tpl-foot .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
.card > p.std-note { margin: 0 0 14px; }
.onb-tpl { display: grid; gap: 6px; margin-top: 8px; } .onb-tpl > span { color: var(--ink); font-weight: 600; } .onb-tpl .chip { height: 32px; font-size: 0.84rem; }
.credits { display: grid; gap: 6px; margin-top: 10px; }
.credits-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.credits-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.credits-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.credits.is-low .credits-bar i { background: var(--warn); } .credits.is-low .credits-top b { color: var(--warn); }
.credits p { margin: 0; }
.credits.is-empty { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(var(--bad-rgb), 0.4); background: rgba(var(--bad-rgb), 0.08); }
.credits.is-empty .btn { justify-self: start; }
.sch-credits { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); } .sch-credits svg { color: var(--accent); flex: 0 0 auto; }
.sch-credits.is-low { color: var(--warn); } .sch-credits.is-low svg { color: var(--warn); }
.sch-head + .credits.is-empty { margin: 0 0 14px; }
.btn.is-blocked { opacity: 0.45; cursor: not-allowed; }
.c-credits { margin: 10px 0 0; }
/* lidpagina: adres en notitie uit de CSV-import (19 okt '26) */
.m-extra { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 12px 0 0; } .m-extra dt { color: var(--muted); } .m-extra dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Onderbalk van de website op telefoon en tablet (Robin, 19 okt '26: "hiigym.com ook zo'n menu", zelfde als timer.hiigym.com):
   Start · Functies · Demo (midden, uitgelicht) · Prijzen · App of Inloggen. Tot 1024 px; vanaf 761 px als pil in het midden (zoals de
   leden-app). De footer, het gordijnmenu en de cookiebanner schuiven boven de balk. */
.tabbar--site { display: none; }
@media (max-width: 1024px) {
  body.site .tabbar--site { display: grid; grid-template-columns: repeat(5, 1fr); }
  body.site .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.site .mobile-menu { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.site .mm-curtain { height: calc(100dvh - var(--mm-top, var(--hdr)) - 74px - env(safe-area-inset-bottom)); }
  body.site .mm-foot { padding-bottom: 30px; } /* de uitstekende Demo-knop valt niet over de knop van het menu */
  body.site .rwcc-bar { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body.site .tabbar--site { left: 50%; right: auto; width: 520px; transform: translateX(-50%); border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0; }
}

/* Scrollbar blijft staan als het hamburgermenu open is (Robin, 19 okt '26): body.nav-open zet overflow: hidden, en zonder gereserveerde
   gutter verdween de scrollbar en schoof de hele kop 15 px naar rechts. */
html { scrollbar-gutter: stable; }
/* /leden/: gym zoeken en door naar de leden-app van die gym (19 okt '26). */
.leden { max-width: 640px; }
.leden .lead { color: var(--muted); }
.leden-search { position: relative; margin: 22px 0 12px; }
.leden-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.leden-search input { width: 100%; padding: 14px 16px 14px 44px; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.leden-search input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }
.leden-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }
.leden-list li[hidden] { display: none; }
.leden-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "u a"; align-items: center; gap: 0 12px; padding: 12px 14px; background: var(--surface-2); color: var(--ink); }
.leden-list a:hover { background: rgba(var(--accent-rgb), 0.1); }
.leden-list b { grid-area: n; font-weight: 700; }
.leden-list span { grid-area: u; color: var(--muted); font-size: 0.82rem; }
.leden-list svg { grid-area: a; width: 18px; height: 18px; color: var(--accent); }
.leden-none { color: var(--muted); }
.leden-help { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.leden-help a { color: var(--accent); }

/* Topbalk op elke sitepagina, ook mobiel (Robin, 19 okt '26): de drie producten als tabs met alleen een hover-streep (geen actieve
   stand), rechts de leden-login. De balk scrolt mee; de kop blijft sticky. Spiegel: racetimer site.css (zelfde regels). */
.topbar { background: #061d23; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.topbar-products { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.topbar-products::-webkit-scrollbar { display: none; }
.tb-l { position: relative; padding: 6px 10px; color: var(--muted); font-weight: 600; white-space: nowrap; text-decoration: none; transition: color 0.15s; }
.tb-l::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; }
.tb-l:hover { color: #fff; } .tb-l:hover::after { transform: scaleX(1); }
.topbar-r a, .topbar-login { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; color: #fff; font-weight: 600; white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.topbar-login svg { width: 14px; height: 14px; color: var(--accent); }
.topbar-r a:hover, .topbar-login:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(255, 255, 255, 0.05); }
@media (max-width: 560px) { .topbar { font-size: 0.76rem; } .tb-l { padding: 6px 8px; } .topbar-login { padding: 4px 9px; } .topbar-login span { display: none; } }
@media (prefers-reduced-motion: reduce) { .tb-l, .tb-l::after { transition: none; } }
/* Pil "Race Timer" met minimalistisch uitklapmenu in de kop (19 okt '26; spiegel van de pil "Fitness software" op de timer). */
.nav-item--hub { position: relative; }
.nav-side.nav-hub, html.nav-compact .site-header .nav-side.nav-hub { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: #fff; font-size: 0.84rem; letter-spacing: 0.01em; transition: border-color 0.15s, background 0.15s; }
.nav-side.nav-hub svg { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.2s; }
.nav-item--hub:hover > .nav-hub, .nav-item--hub.is-open > .nav-hub, .nav-item--hub:focus-within > .nav-hub { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(255, 255, 255, 0.05); }
.nav-item--hub:hover > .nav-hub svg, .nav-item--hub.is-open > .nav-hub svg { transform: rotate(180deg); opacity: 1; }
.nav-drop--hub { min-width: 0; }
.nav-drop--hub .nav-drop-in { min-width: 200px; padding: 6px; gap: 0; }
.nav-drop--hub .nav-drop-link { padding: 9px 12px; }
.nav-drop--hub .nav-drop-link b { font-weight: 600; font-size: 0.92rem; }
@media (max-width: 400px) { .nav-side.nav-hub { padding: 6px 9px 6px 11px; font-size: 0.8rem; } }
/* Leden-login in het mobiele menu, onder de knoppen van de tab Hiigym (19 okt '26). */
.mm-member { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 4px 0 0; color: var(--muted); font-size: 0.86rem; font-weight: 600; }
.mm-member svg { width: 16px; height: 16px; color: var(--accent); }
.mm-member:hover { color: #fff; }
/* Hero: hooguit twee knoppen (Robin, 19 okt '26); de prijscalculator staat als tekstlink eronder. */
.hero-more { margin: 12px 0 0; font-size: 0.92rem; }
.hero-more a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.hero-more a:hover { color: #fff; }
/* Productkaarten in de hero (Robin, 19 okt '26): de drie keuzekaarten staan bovenaan, onder de hero-tekst, boven de vouw op de laptop.
   Compacter dan de oude sectie; op telefoon en tablet een veegstrook met ±1,3 kaart in beeld. */
.hero-products { margin-top: 40px; }
.hero-products-k { margin: 0 0 14px; color: var(--muted); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-products-k span { margin: 0 6px; opacity: 0.5; }
.hero-products-k b { color: var(--accent); }
.prod-grid--hero .prod-card { min-height: 400px; padding: 22px 22px 0; border-radius: 22px; background: rgba(10, 43, 51, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.prod-grid--hero .prod-card h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); }
.prod-grid--hero .prod-card p { font-size: 0.95rem; }
.prod-grid--hero .prod-vis { min-height: 190px; margin: 10px -22px 0; }
@media (max-width: 980px) {
  .prod-grid--hero { display: flex; gap: 14px; overflow-x: auto; margin: 0 -24px; padding: 0 24px 10px; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; }
  .prod-grid--hero::-webkit-scrollbar { display: none; }
  .prod-grid--hero .prod-card { flex: 0 0 74%; max-width: 380px; min-height: 360px; scroll-snap-align: start; }
}
@media (max-width: 560px) { .hero-products { margin-top: 28px; } .prod-grid--hero .prod-card { flex-basis: 80%; } }
.hero:has(.hero-products) { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(28px, 4vw, 52px); }
.hero:has(.hero-products) .hero-proof { margin-top: 22px; }
/* Strava-koppeling (19 okt '26, pages/strava.js): kaart "Buiten de gym" op Start, kaart Strava op Account en op de lidpagina. Merkregels:
   knop met de tekst "Connect with Strava" in Strava-oranje (#FC5200), "Powered by Strava" eronder. */
.btn--strava { background: #fc5200; color: #fff; border-color: #fc5200; box-shadow: none; }
.btn--strava:hover { background: #e04a00; box-shadow: 0 10px 30px rgba(252, 82, 0, 0.3); }
.strava-pow { margin: 12px 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0 0 12px; }
.sv-stat { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.sv-stat b { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sv-stat span { font-size: 0.72rem; color: var(--muted); }
.sv-row { flex-wrap: nowrap; }
.sv-type { flex: none; display: inline-grid; place-items: center; min-width: 42px; max-width: 96px; padding: 6px 8px; border-radius: 9px; background: rgba(252, 82, 0, 0.14); color: #fc5200; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.sv-card .list { margin-top: 4px; }
/* Productkiezer-pil (19 okt '26): knop i.p.v. link, huidig product gemarkeerd, kopje in het menu. */
button.nav-hub { font: inherit; font-weight: 700; background: none; cursor: pointer; }
.nav-drop--hub .nav-drop-h { margin: 4px 12px 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nav-drop--hub .nav-drop-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-drop--hub .nav-drop-link.is-cur { color: var(--accent); }
.nav-drop--hub .nav-drop-link svg { width: 16px; height: 16px; }
.header-ctas .btn--app { order: 0; }
/* Slotband "Boek een demo": beeld H2 (Nano Banana Pro, 19 okt '26: laptop met zwevende MRR- en Customers-kaarten) boven de twee kaarten. */
.db-img { max-width: 1040px; max-height: 400px; margin: 0 auto 22px; border-radius: var(--radius-lg); }
/* Productkiezer-pil op de telefoon weg (19 okt '26): daar staan de producten als tabs in het hamburgermenu; zo houdt het logo ruimte. */
@media (max-width: 560px) { html.nav-compact .site-header .nav-item--hub { display: none; } }

/* fitHeader meet .brand; als grid-item werd die uitgerekt tot de hele kolom (1fr), waardoor de meting de halve kop was i.p.v. het logo (19 okt '26). */
.site-header:not(.wl-header) .brand { justify-self: start; min-width: max-content; } /* min-width: in een te krappe kop werd de 1fr-kolom 0 px, het logo (img max-width 100%) 0 px breed en de meting dacht dat alles paste (Robin, 19 okt '26: kop schaalde niet naar tablet bij resize) */
/* Optionele kopknoppen (data-fit-opt, 19 okt '26): "Open de timer" staat links van de pil op een brede laptop; in de krappe stand (±1366 px)
   verdwijnt hij, zodat het menu niet in de hamburger hoeft. fitHeader en EARLY_FIT tellen hem niet mee voor die stand. */
html.nav-slim [data-fit-opt], html.nav-compact [data-fit-opt] { display: none; }
/* Hero-tegels, variant D (Robin koos 19 okt '26): clean, naam + regel + cijfer + link, productkleur als bovenlijn; hover = alleen de rand (M3-B). */
.prod-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.prod-tile { --c: 59, 233, 237; position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--line); border-top: 3px solid rgb(var(--c)); border-radius: 18px; background: rgba(10, 43, 51, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: inherit; transition: border-color 0.2s; }
.prod-tile:hover { border-color: rgba(var(--c), 0.65); border-top-color: rgb(var(--c)); }
.prod-tile--timer { --c: 255, 181, 71; } .prod-tile--wo { --c: 157, 143, 255; }
.prod-tile .prod-kick { font-size: 0.72rem; }
.prod-tile h3 { margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.prod-tile p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: none; }
.prod-stat { align-self: flex-start; margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 0.74rem; font-weight: 700; }
.prod-tile .prod-go { margin-top: 4px; font-size: 0.9rem; }
@media (max-width: 760px) { .prod-tiles { grid-template-columns: 1fr; gap: 10px; } .prod-tile { padding: 14px 16px 14px; gap: 4px; } .prod-tile p { display: none; } }
/* M1-A (19 okt '26, lagen btn-shine + btn-fill): lichtstreep over de primaire knop, de ghost-knop vult zich met cyaan. Niets beweegt omhoog. */
.btn { overflow: hidden; }
.btn:not(.btn--ghost):not(.btn--danger)::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none; }
.btn:not(.btn--ghost):not(.btn--danger):hover::after { left: 120%; }
.btn--ghost { isolation: isolate; }
.btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.btn--ghost:hover { color: var(--on-accent, #04161a); border-color: var(--accent); background: transparent; }
.btn--ghost:hover::before { transform: scaleX(1); }
.btn--ghost:hover svg { color: inherit; }
/* M2-B: badge "Jouw plan" komt binnen zodra het planformulier een kaart kiest. */
.price-card.is-match .price-match, .pf-card.is-match .price-match { animation: badge-in 0.25s ease both; }
@keyframes badge-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
/* M5-A: vinkje schaalt in bij een aangevinkte chip (geen schild-animatie, Robin). */
.pf-chip { position: relative; }
.pf-chip::before { content: ""; flex: none; width: 14px; height: 14px; margin-right: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0.6); opacity: 0; transition: transform 0.18s, opacity 0.18s; }
.pf-chip:has(input:checked)::before { transform: scale(1); opacity: 1; }
/* M4-A: kilometerteller (app.js odometer). */
.odo { display: inline-flex; overflow: hidden; height: 1.15em; line-height: 1.15; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.odo-d { display: inline-block; height: 1.15em; overflow: hidden; }
.odo-d > i { display: block; font-style: normal; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.odo-d > i i { display: block; font-style: normal; }
/* M6-A: hero-kop woord voor woord omhoog (app.js split-text); html.js verbergt de kop tot de woorden gemaskeerd zijn. */
html.js .hero h1[data-split]:not(.is-ready) { visibility: hidden; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .w > span { display: inline-block; transform: translateY(110%); }
.hero h1.is-split .w > span { animation: word-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes word-rise { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .btn::after, .btn--ghost::before, .pf-chip::before, .odo-d > i { transition: none !important; } .price-card.is-match .price-match, .pf-card.is-match .price-match, .hero h1.is-split .w > span { animation-duration: 0.01s !important; animation-delay: 0s !important; } }

/* Partner "vanaf €449" (Robin, 19 okt '26): klein woord vóór het bedrag; app.js vult alleen het bedrag. */
.price-amount .price-from { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.78rem; line-height: 1.2; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } /* op een eigen regel boven het bedrag, zodat "per maand" naast het bedrag blijft */
/* M11-A (Robin, 19 okt '26): de lijn tussen de stappenkaarten tekent zich met de scroll, elk nummer licht op als de lijn hem bereikt
   (app.js [data-draw]). Lijn op de hoogte van het nummer: kaart-padding 26 + 38/2. Op één kolom (≤ 640 px) geen lijn. */
.steps-draw { position: relative; }
.steps-draw > .card { position: relative; z-index: 1; margin-bottom: 0; }
.steps-draw > .draw-line { position: absolute; left: 0; top: 45px; width: 100%; height: 2px; overflow: visible; pointer-events: none; z-index: 0; }
.steps-draw > .draw-line path { stroke-width: 2; fill: none; }
.steps-draw > .draw-line .ghost { stroke: rgba(var(--accent-rgb), 0.18); }
.steps-draw > .draw-line .draw { stroke: var(--accent); stroke-dasharray: 100; stroke-dashoffset: 100; }
.steps-draw .card-n { transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.steps-draw .card-n.lit { background: var(--accent); color: #04161a; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }
@media (max-width: 640px) { .steps-draw > .draw-line { display: none; } }
@media (prefers-reduced-motion: reduce) { .steps-draw > .draw-line .draw { stroke-dashoffset: 0 !important; } .steps-draw .card-n { transition: none; } }
/* Drie tabs in het gordijnmenu (19 okt '26: Fitness software · Race Timer · Workouts): op maat van de tekst, vullen de rij als er ruimte is
   en scrollen horizontaal als het niet past (iPhone SE). Spiegel van racetimer. */
.mm-tabs--3 { overflow-x: auto; scrollbar-width: none; }
.mm-tabs--3::-webkit-scrollbar { display: none; }
.mm-tabs--3 .mm-tab { flex: 1 1 auto; min-width: max-content; height: 40px; padding: 0 9px; font-size: 0.74rem; letter-spacing: 0.01em; white-space: nowrap; } /* 0,74 rem: drie tabs passen op 390 px (gemeten: 0,82 rem liep 19 px over) */

/* Knopanimatie in de plankleur (Robin, 19 okt '26: "de CTA-knoppen van de oranje/gele plannen ook in die kleur animeren"): op een
   prijskaart vult de ghost-knop zich met de kleur van het plan (amber Club, koraal Partner) i.p.v. cyaan; de primaire knop heeft die kleur al. */
.price-card .btn--ghost::before { background: var(--pc); }
.price-card .btn--ghost:hover { border-color: var(--pc); color: #04161a; }