/* =====================================================================
   PAGES.CSS — bouwstenen voor de binnenpagina's.
   style.css blijft de basis (nav, sponsors, footer, homepagina).
   Hier staat alles wat enkel de onderliggende pagina's gebruiken.
   ===================================================================== */

:root {
    --wrap: 1360px;
    --wrap-narrow: 860px;
    --gold: #C9A227;
    --silver: #9AA3AB;
    --bronze: #B87333;
}

/* ============ PAGE HERO ============ */
.page-hero {
    position: relative;
    background: #0d0d0d;
    color: #fff;
    padding: 210px 0 130px;
    overflow: hidden;
    isolation: isolate;
}
.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 40px;
}

/* De hero staat altijd op een foto; de vijf behandelingen (hero-a … hero-e)
   verschillen in scrim, uitlijning, koptype en labelvorm. Zo blijft de site één
   familie zonder dat elke pagina dezelfde zware kop met rode pill krijgt. */
.page-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    transform: scale(1.04);
}
.page-hero-scrim { position: absolute; inset: 0; }

/* ---------- a — zware display-kop, glazen pill ---------- */
.hero-a .page-hero-scrim {
    background: linear-gradient(100deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 48%, rgba(213, 0, 0,.46) 100%);
}

/* ---------- b — gecentreerd, lichtere kop, label tussen lijntjes ---------- */
.hero-b { text-align: center; }
.hero-b .page-hero-scrim {
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.82) 78%),
        linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.75));
}
.hero-b .crumbs { justify-content: center; }
.hero-b .page-hero-body { max-width: 900px; margin: 0 auto; }
.hero-b .page-title {
    max-width: none;
    font-weight: 600;
    letter-spacing: -.9px;
    font-size: clamp(34px, 4.2vw, 56px);
}
.hero-b .page-lead { margin-left: auto; margin-right: auto; }
.hero-b .hero-facts { justify-content: center; }
/* label: woord tussen twee streepjes, geen pill */
.hero-b .page-eyebrow {
    background: none;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,.9);
}
.hero-b .page-eyebrow::before,
.hero-b .page-eyebrow::after {
    content: "";
    width: 30px;
    height: 1px;
    background: rgba(255,255,255,.5);
}

/* ---------- c — rode balk onder de kop, streepje voor het label ---------- */
.hero-c .page-hero-scrim {
    background: linear-gradient(15deg, rgba(0,0,0,.9) 12%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.35) 100%);
}
.hero-c .page-title {
    font-weight: 700;
    letter-spacing: -1.1px;
    font-size: clamp(34px, 4.4vw, 58px);
}
.hero-c .page-title::after {
    content: "";
    display: block;
    width: 74px;
    height: 5px;
    margin-top: 22px;
    border-radius: 3px;
    background: var(--red);
}
.hero-c .page-eyebrow {
    background: none;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}
.hero-c .page-eyebrow::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--red);
}

/* ---------- d — glazen kaart op de foto ---------- */
.hero-d .page-hero-scrim {
    background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.5) 100%);
}
.hero-d .page-hero-body {
    max-width: 720px;
    background: rgba(14, 14, 14, .58);
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-radius: 26px;
    padding: 40px 42px 44px;
}
.hero-d .page-title {
    max-width: none;
    font-weight: 700;
    font-size: clamp(32px, 3.6vw, 48px);
    letter-spacing: -1.1px;
}
.hero-d .page-eyebrow {
    background: none;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    color: var(--red);
    color: #ff5252;
    letter-spacing: 2px;
}

/* ---------- e — onderaan, dunne lichte kop, ghost-chip ---------- */
.hero-e { padding-top: 260px; padding-bottom: 120px; }
.hero-e .page-hero-scrim {
    /* twee lagen: verticaal voor de nav/golf, horizontaal zodat de dunne kop
       leesbaar blijft over de felle rode hoodies in het midden van de foto */
    background:
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.2) 100%),
        linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.8) 100%);
}
.hero-e .page-title {
    font-weight: 300;
    font-size: clamp(38px, 5.4vw, 70px);
    letter-spacing: -2px;
    max-width: 17ch;
}
.hero-e .page-eyebrow {
    background: none;
    border: 1px solid rgba(255,255,255,.45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: rgba(255,255,255,.92);
}
.hero-e .page-lead { color: rgba(255,255,255,.75); }

/* --- kruimelpad --- */
.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 30px;
}
.crumbs a { color: rgba(255, 255, 255, .78); transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs-current { color: #fff; }

/* --- kop --- */
.page-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 999px;
}
.page-title {
    margin-top: 22px;
    font-size: clamp(36px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -1.6px;
    text-wrap: balance;
    max-width: 15ch;
}
.page-lead {
    margin-top: 24px;
    max-width: 62ch;
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    text-wrap: pretty;
}
.page-hero .btn { margin-top: 36px; }
.page-hero .btn + .btn { margin-left: 12px; }

/* --- feitenrij onder de hero-tekst --- */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}
.hero-fact {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 16px 22px;
    min-width: 132px;
}
.hero-fact b {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1;
}
.hero-fact span {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

/* --- golf onderaan de hero --- */
.page-hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 90px;
    display: block;
    z-index: 3;
}

/* ============ SECTIES ============ */
.section {
    padding: 96px 0;
}
.section--tight { padding: 64px 0; }
.section--grey { background: #fafafa; }
.section--dark {
    position: relative;
    background: #0d0d0d;
    color: #fff;
    overflow: hidden;
}
.section-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 40px;
}
.section-inner--narrow { max-width: var(--wrap-narrow); }

.section-head { margin-bottom: 52px; max-width: 760px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
    display: inline-block;
    color: var(--red);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.section--dark .eyebrow { color: #ff5252; }

.section-title {
    color: var(--red);
    font-size: clamp(26px, 2.6vw, 35px);
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.18;
    text-wrap: balance;
}
.section--dark .section-title { color: #fff; }
.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--red);
}
.section-head--center .section-title::after { margin-left: auto; margin-right: auto; }

.section-text {
    margin-top: 20px;
    color: #5c5c5c;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    text-wrap: pretty;
}
.section--dark .section-text { color: #c4c4c4; }
.section-text a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.section--dark .section-text a { color: #fff; }

/* ============ PROZA (privacy, gedragsregels, ...) ============ */
.prose { max-width: 74ch; }
.prose h2 {
    margin: 48px 0 14px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    margin: 32px 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--red);
}
.prose p,
.prose li {
    color: #575757;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.8;
}
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 20px 20px; display: flex; flex-direction: column; gap: 9px; }
.prose a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 700; }

/* zijkolom naast proza */
.prose-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 70px;
    align-items: start;
}
.aside-card {
    position: sticky;
    top: 130px;
    background: #0d0d0d;
    color: #fff;
    border-radius: 22px;
    padding: 30px 28px;
}
.aside-card h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 14px;
}
.aside-card p {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.7;
    color: #c8c8c8;
    margin-bottom: 18px;
}
.aside-card a.btn { margin-top: 4px; }

/* ============ KAARTENRASTER ============ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px 28px 28px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
    overflow: hidden;
}
.card::before {
    /* rode accentlijn die bij hover uitloopt */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
a.card:hover,
.card--hover:hover {
    transform: translateY(-6px);
    border-color: #ddd;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .09);
}
a.card:hover::before,
.card--hover:hover::before { transform: scaleY(1); }

.card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
}
.card--accent .card-badge { background: var(--red); }
.card-title {
    margin-top: 18px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--ink);
    transition: color .25s;
}
a.card:hover .card-title { color: var(--red); }
.card-text {
    margin-top: 10px;
    color: #6b6b6b;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.7;
}
.card-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #a0a0a0;
}
.card-foot .go { color: var(--red); display: inline-flex; align-items: center; gap: 7px; transition: gap .2s; }
a.card:hover .card-foot .go { gap: 12px; }
.card-foot svg { width: 16px; height: 16px; }

/* Kaart met meerdere mailadressen (bv. de twee vertrouwenspersonen): onder
   elkaar in plaats van naast elkaar, elk als eigen link. */
.card-foot--mails {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.card-foot--mails a,
.card-foot--mails span {
    color: var(--red);
    text-decoration: none;
    word-break: break-word;
}
.card-foot--mails a:hover { text-decoration: underline; }

/* ============ GROEPSKAART (aanbod-detailpagina's) ============ */
.group-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    transition: box-shadow .3s, transform .3s;
}
.group-card + .group-card { margin-top: 22px; }
.group-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.09); }

.group-key {
    background: linear-gradient(160deg, #D50000, #8a0000);
    color: #fff;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.group-card--dark .group-key { background: linear-gradient(160deg, #2a2a2a, #0d0d0d); }
.group-code {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1;
}
.group-age {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.35);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
}
.group-body { padding: 30px 32px; }
.group-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.3px;
}
.group-goal {
    margin-top: 8px;
    color: #6b6b6b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}
.group-meta {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}
.group-meta-item { display: flex; flex-direction: column; gap: 5px; }
.group-meta-item span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a5a5a5;
}
.group-meta-item b { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* voorwaarden-lijst met vinkjes */
.check-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.check-list li {
    position: relative;
    padding-left: 30px;
    color: #5c5c5c;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.section--dark .check-list li { color: #c4c4c4; }

/* ============ TABEL (trainingsuren, lidgeld) ============ */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
}
.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}
.table th {
    background: var(--ink);
    color: #fff;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 16px 22px;
    white-space: nowrap;
}
.table td {
    padding: 17px 22px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    font-weight: 500;
    color: #4f4f4f;
    vertical-align: middle;
}
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: #fbf5f4; }
.table td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.table .price { font-weight: 700; color: var(--red); white-space: nowrap; }

/* groepslabels in de tabel */
.pill {
    display: inline-block;
    background: #f1f1f1;
    color: #444;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 5px 11px;
    border-radius: 999px;
    margin: 2px 4px 2px 0;
}
.pill--red { background: var(--red); color: #fff; }
.pill--dark { background: var(--ink); color: #fff; }

/* ============ WEDSTRIJD: HERO OP PAGINASCHAAL (zelfde design, kleiner) ============ */
.page-groep .page-hero { padding: 250px 0 170px; }
.page-groep .crumbs { margin-bottom: 22px; font-size: 11.5px; }
.page-groep .page-eyebrow { font-size: 10.5px; padding: 7px 15px; letter-spacing: 1.2px; }
.page-groep .page-title { margin-top: 16px; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -1px; max-width: 18ch; }
.page-groep .page-lead { margin-top: 16px; font-size: clamp(14px, 1.1vw, 16px); }
.page-groep .hero-facts { margin-top: 26px; gap: 10px; }
.page-groep .hero-fact { padding: 12px 18px; min-width: 108px; }
.page-groep .hero-fact b { font-size: 21px; }

/* ============ WEDSTRIJD: TABBLADEN ============ */
.wz-tabbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.wz-tabbar-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 6px;
    justify-content: flex-start;
}
.wz-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--muted);
    padding: 22px 28px;
    cursor: pointer;
    transition: color .25s, border-color .25s;
}
.wz-tab:hover { color: var(--ink); }
.wz-tab.is-active { color: var(--red); border-bottom-color: var(--red); }
.wz-panel[hidden] { display: none; }

/* ============ WEDSTRIJD: COMPACTE INFO-TAB (enkel deze pagina) ============ */
.wz-panel .section { padding: 52px 0; }
.wz-panel .section-head { margin-bottom: 30px; }
.wz-panel .eyebrow { font-size: 10px; margin-bottom: 9px; }
.wz-panel .section-title { font-size: clamp(19px, 2vw, 24px); }
.wz-panel .section-title::after { width: 44px; height: 3px; margin-top: 10px; }
.wz-panel .section-text { font-size: 13.5px; margin-top: 13px; line-height: 1.65; }

.wz-panel .card { padding: 22px 22px 20px; border-radius: 16px; }
.wz-panel .card-badge { min-width: 34px; height: 24px; font-size: 11px; }
.wz-panel .card-title { font-size: 15px; margin-top: 12px; }
.wz-panel .card-text { font-size: 12.5px; }

.wz-panel .btn { font-size: 13px; padding: 12px 20px; }
.wz-panel .empty { padding: 30px 24px; font-size: 13px; }
.wz-panel .empty b { font-size: 14px; }

/* ============ WEDSTRIJD: GROEPSINFO (clean kaarten) ============ */
.wgroepen { display: flex; flex-direction: column; gap: 20px; }
.wgroep {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 28px 32px 30px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.wgroep:hover {
    transform: translateY(-3px);
    border-color: #e0e0e0;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .07);
}

.wgroep-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.wgroep-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 6px 11px;
    background: linear-gradient(160deg, #2a2a2a, #0d0d0d);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    border-radius: 8px;
}
.wgroep-titel {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.3px;
    color: var(--ink);
}
.wgroep-leeftijd {
    margin-left: auto;
    padding: 6px 13px;
    background: #f4f4f5;
    color: #555;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    border-radius: 999px;
}

.wgroep-rows { display: flex; flex-direction: column; gap: 18px; }
.wgroep-row {
    display: grid;
    grid-template-columns: 175px 1fr;
    gap: 24px;
    align-items: baseline;
}
.wgroep-row dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a5a5a5;
}
.wgroep-row dd {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: #3a3a3a;
}
.wgroep-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.wtag {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    border-radius: 999px;
}

.wgroep-check { list-style: none; display: flex; flex-direction: column; gap: 9px; padding-left: 8px; }
.wgroep-check li {
    position: relative;
    padding-left: 28px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #3a3a3a;
}
.wgroep-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

@media (max-width: 640px) {
    .wgroep { padding: 24px 22px 26px; }
    .wgroep-row { grid-template-columns: 1fr; gap: 8px; }
    .wgroep-titel { font-size: 19px; }
    .wgroep-leeftijd { margin-left: 0; }
    .wgroep-head { flex-wrap: wrap; gap: 10px; }
}

/* ============ WEDSTRIJD: TRAININGSSCHEMA ============ */
.wz-schedule { display: flex; flex-direction: column; }
.wz-day {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    align-items: start;
}
.wz-day:last-child { border-bottom: 1px solid var(--line); }
.wz-day-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.wz-slots { display: flex; flex-direction: column; gap: 7px; }
.wz-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    min-width: 105px;
    font-variant-numeric: tabular-nums;
}
.wz-grp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 3px 7px;
    background: var(--gold);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    border-radius: 6px;
}
.wz-note-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #3d94a3;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}
.wz-note-pill svg { width: 12px; height: 12px; flex-shrink: 0; }

@media (max-width: 640px) {
    .wz-day { grid-template-columns: 1fr; gap: 7px; padding: 12px 0; }
    .wz-time { min-width: 95px; }
    .wz-tab { padding: 16px 16px; font-size: 13px; }
    .wz-tabbar-inner { padding: 0 16px; }
}

/* ============ DAGROOSTER (trainingsuren) ============ */
.day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 16px;
    align-items: start;
}
.day-col {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
}
.day-head {
    background: var(--ink);
    color: #fff;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.day-col:nth-child(odd) .day-head { background: var(--red); }
.day-slots { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.slot {
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px 14px;
    transition: border-color .2s, background .2s;
}
.slot:hover { border-color: var(--red); background: #fff8f7; }
.slot-time {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.2px;
}
.slot-groups { display: block; margin-top: 7px; }
.day-empty { padding: 22px 16px; color: #b3b3b3; font-size: 13.5px; font-weight: 500; text-align: center; }

/* ============ PERSONEN (trainers, bestuur) ============ */
.person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}
.person {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 28px 24px;
    text-align: center;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.person:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0,0,0,.09); border-color: #ddd; }
.avatar {
    width: 76px;
    height: 76px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(150deg, #D50000, #8f1a0b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.5px;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.person:hover .avatar { transform: scale(1.07) rotate(-3deg); }
.avatar--dark { background: linear-gradient(150deg, #2f2f2f, #0d0d0d); }
.person-name {
    margin-top: 18px;
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -.3px;
}
.person-role {
    margin-top: 6px;
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}
.person-groups {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}
.person-mail {
    display: inline-block;
    margin-top: 14px;
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
    transition: color .2s;
}
.person-mail:hover { color: var(--red); }

/* ============ FAQ / ACCORDEON ============ */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}
.faq-item[open] { border-color: var(--red); box-shadow: 0 14px 34px rgba(213, 0, 0, .10); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink);
    transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); }
.faq-item[open] summary { color: var(--red); }
.faq-icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, transform .3s;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.faq-icon { position: relative; color: #777; }
.faq-icon::after { transform: rotate(90deg); transition: transform .3s, opacity .3s; }
.faq-item[open] .faq-icon { background: var(--red); color: #fff; }
.faq-item[open] .faq-icon::after { transform: rotate(0); opacity: 0; }
.faq-answer { padding: 0 26px 24px; }
.faq-answer p {
    color: #5c5c5c;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
}
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ============ TIJDLIJN (kalender) ============ */
.timeline { position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 118px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--red), rgba(213, 0, 0,.12));
}
.tl-month {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 44px 0 22px;
    padding-left: 152px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b5b5b5;
}
.tl-month:first-child { margin-top: 0; }
.tl-month::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 52px;
    align-items: start;
    padding: 20px 0;
}
.tl-date {
    text-align: right;
    padding-top: 4px;
}
.tl-day {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--ink);
}
.tl-mon {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #a8a8a8;
}
.tl-dot {
    position: absolute;
    left: 112px;
    top: 30px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--red);
    transition: transform .25s, background .25s;
}
.tl-item:hover .tl-dot { transform: scale(1.25); background: var(--red); }

.tl-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 26px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.tl-item:hover .tl-card { transform: translateX(6px); border-color: #ddd; box-shadow: 0 16px 36px rgba(0,0,0,.07); }
.tl-title { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.tl-info {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #8a8a8a;
    font-size: 13.5px;
    font-weight: 500;
}
.tl-info span { display: inline-flex; align-items: center; gap: 7px; }
.tl-info svg { width: 15px; height: 15px; flex: none; }
.tl-year {
    display: inline-block;
    margin-bottom: 30px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 8px 18px;
    border-radius: 999px;
}

/* ============ NIEUWSRASTER ============ */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px 34px;
}
.post { display: block; }
.post-media {
    display: block;
    overflow: hidden;
    border-radius: 18px;
}
.post-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10.5;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.post:hover .post-img { transform: scale(1.06); }
.post .meta { margin-top: 18px; }
.post-headline {
    display: block;
    margin-top: 13px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.3px;
    color: var(--ink);
    text-wrap: pretty;
    transition: color .25s;
}
.post:hover .post-headline { color: var(--red); }
.post-excerpt {
    margin-top: 9px;
    color: #7a7a7a;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.65;
}

/* ============ PRIJS-/LIDGELDKAART ============ */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}
.price-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px 26px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.price-card:hover { transform: translateY(-6px); border-color: #ddd; box-shadow: 0 22px 46px rgba(0,0,0,.09); }
.price-card--feature {
    background: linear-gradient(165deg, #D50000, #a11d0c);
    border-color: transparent;
    color: #fff;
}
.price-card-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #a3a3a3;
}
.price-card--feature .price-card-name { color: rgba(255,255,255,.75); }
.price-amount {
    margin-top: 14px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1.6px;
    line-height: 1;
    color: var(--ink);
}
.price-card--feature .price-amount { color: #fff; }
.price-amount small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: #a3a3a3; }
.price-card--feature .price-amount small { color: rgba(255,255,255,.75); }
.price-note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    color: #6f6f6f;
}
.price-card--feature .price-note { border-top-color: rgba(255,255,255,.3); color: rgba(255,255,255,.9); }

/* ============ STAPPEN (lid worden, testmoment) ============ */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    counter-reset: step;
}
.step {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 34px 26px 28px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.step:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,.09); }
.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -18px;
    left: 26px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 8px 13px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(213, 0, 0,.3);
}
.section--dark .step {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.14);
}
.step h3 { font-size: 18px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 9px; }
.step p { color: #6b6b6b; font-size: 14.5px; font-weight: 500; line-height: 1.7; }
.section--dark .step p { color: #b8b8b8; }
.step a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.section--dark .step a { color: #fff; }

/* ============ INFO-/CONTACTBLOKKEN ============ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr .85fr; }
.split-media {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.split-media:hover img { transform: scale(1.05); }

/* Variant met een bijschrift: de beeldverhouding zit dan op het beeld zelf,
   zodat het tekstje eronder past in plaats van eroverheen. */
.split-media--bijschrift { aspect-ratio: auto; overflow: visible; }
.split-media__beeld {
    display: block;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.split-media--bijschrift figcaption {
    margin-top: 12px;
    font-size: 13px;
    color: #8a8a8a;
}

.info-list { display: flex; flex-direction: column; gap: 2px; }
.info-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
}
.section--dark .info-row { border-bottom-color: rgba(255,255,255,.14); }
.info-row dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #a5a5a5;
    padding-top: 3px;
}
.info-row dd {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.6;
}
.section--dark .info-row dd { color: #fff; }
.info-row dd a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.section--dark .info-row dd a { color: #ff5252; }

/* ============ FORMULIER ============ */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #8a8a8a;
}
.field input,
.field select,
.field textarea {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 15px 18px;
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(213, 0, 0, .10);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    color: #6b6b6b;
    line-height: 1.6;
    cursor: pointer;
}
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); flex: none; }
.check a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form .btn { align-self: flex-start; border: none; cursor: pointer; font-family: inherit; }

/* ============ CTA-BAND ============ */
.cta {
    position: relative;
    background: linear-gradient(118deg, #ff2b2b 0%, #D50000 52%, #8a0000 100%);
    color: #fff;
    overflow: hidden;
}
.cta-inner {
    position: relative;
    z-index: 2;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 84px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 46px;
    flex-wrap: wrap;
}
.cta::before {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.cta h2 {
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 800;
    letter-spacing: -.9px;
    line-height: 1.15;
    text-wrap: balance;
    max-width: 18ch;
}
.cta p {
    margin-top: 14px;
    max-width: 52ch;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-white {
    background: #fff;
    color: var(--red);
}
.btn-white:hover { background: #f2f2f2; }
.btn-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .8);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .15); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }

/* lege staat ("er staan geen wedstrijden op de kalender") */
.empty {
    border: 1.5px dashed #e0e0e0;
    border-radius: 20px;
    padding: 46px 30px;
    text-align: center;
    color: #a5a5a5;
    font-size: 15px;
    font-weight: 500;
}
.empty b { display: block; color: #6b6b6b; font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }

/* sponsor-tiers op de sponsorpagina */
.tier-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.tier-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.tier-line { flex: 1; height: 1px; background: var(--line); }
.tier-head--goud .tier-name { color: var(--gold); }
.tier-head--zilver .tier-name { color: var(--silver); }
.tier-head--brons .tier-name { color: var(--bronze); }
.tier-head--partner .tier-name { color: var(--red); }

.logo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 56px;
}
.logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.logo-tile img {
    max-width: 100%;
    max-height: 62px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .72;
    transition: filter .3s, opacity .3s;
}
.logo-tile:hover { transform: translateY(-5px); border-color: #ddd; box-shadow: 0 18px 38px rgba(0,0,0,.08); }
.logo-tile:hover img { filter: none; opacity: 1; }
.logo-tile--code { position: relative; }
.code-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    padding: 5px 9px;
    border-radius: 7px;
}
.name-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 56px;
}
.name-chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #555;
    transition: border-color .2s, color .2s, transform .2s;
}
.name-chip:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

/* ============ VEILIGE PLEK (homepagina) ============ */
.safe {
    background: #fff;
    padding: 64px 0;
}
.safe-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 40px;
}
.safe-card {
    position: relative;
    background: var(--red);
    color: #fff;
    border-radius: 34px;
    padding: 46px 56px;
    overflow: hidden;
}
.safe-card::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -170px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.safe-card > * { position: relative; z-index: 1; max-width: 760px; }
.safe-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 14px;
}
.safe-eyebrow svg { width: 15px; height: 15px; }
/* zelfde koptypografie als .card-title elders op de site */
.safe-card h2 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.25;
}
/* zelfde tekstgrootte als .card-text elders */
.safe-card p {
    margin-top: 12px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}
.safe-card p a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.safe-card .btn { margin-top: 26px; }

@media (max-width: 760px) {
    .safe { padding: 48px 0; }
    .safe-inner { padding-left: 22px; padding-right: 22px; }
    .safe-card { padding: 34px 24px; border-radius: 26px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
    .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .prose-layout { grid-template-columns: 1fr; gap: 46px; }
    .aside-card { position: static; }
    .split { grid-template-columns: 1fr; gap: 44px; }
    .split--wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .page-hero { padding: 160px 0 100px; }
    .page-hero-inner,
    .section-inner,
    .cta-inner { padding-left: 22px; padding-right: 22px; }
    .section { padding: 64px 0; }
    .card-grid, .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
    .group-card { grid-template-columns: 1fr; }
    .group-key { padding: 22px; flex-direction: row; gap: 16px; }
    .group-age { margin-top: 0; padding-top: 0; padding-left: 16px; border-top: none; border-left: 1px solid rgba(255,255,255,.35); }
    .group-body { padding: 24px 22px; }
    .field-row { grid-template-columns: 1fr; }
    .info-row { grid-template-columns: 1fr; gap: 4px; }

    .timeline::before { left: 7px; }
    .tl-item { grid-template-columns: 1fr; gap: 12px; padding-left: 34px; }
    .tl-date { text-align: left; display: flex; align-items: baseline; gap: 8px; }
    .tl-day { font-size: 20px; }
    .tl-mon { margin-top: 0; }
    .tl-dot { left: 1px; top: 26px; }
    .tl-month { padding-left: 34px; }
}

/* --- sobere, zakelijke hero (enkel waar .hero-plain om de hero staat) ---
   Zelfde bouw als de gewone page-hero, maar zonder feitenkaartjes, met een
   rechte scrim in plaats van het rode diagonale verloop, een streepje voor het
   label en dezelfde dubbele golf als de homepage. */
.hero-plain .page-hero { padding: 200px 0 150px; }
.hero-plain .page-hero-photo { transform: none; background-position: center 32%; }
.hero-plain .page-hero-scrim {
    background:
        linear-gradient(180deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.46) 42%, rgba(8,8,8,.66) 100%),
        linear-gradient(90deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,0) 62%);
}
.hero-plain .crumbs { margin-bottom: 26px; }

/* label met een kort rood streepje ervoor */
.hero-plain .page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 11.5px;
    letter-spacing: 1.8px;
}
.hero-plain .page-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--red);
}
.hero-plain .page-title {
    margin-top: 18px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -1.2px;
    max-width: 16ch;
}
.hero-plain .page-lead {
    margin-top: 18px;
    max-width: 56ch;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
}

/* de effen golf blijft weg; de dubbele golf van de homepage niet */
.hero-plain .page-hero-wave:not(.is-wave-home) { display: none; }
.page-hero-wave.is-wave-home { height: 130px; bottom: 0; }

@media (max-width: 760px) {
    .hero-plain .page-hero { padding: 140px 0 100px; }
    .page-hero-wave.is-wave-home { height: 80px; }
}

/* --- personenlijst (bestuur): rustige rijen i.p.v. kaartjes met avatar --- */
.people-list { list-style: none; display: flex; flex-direction: column; }
.pl-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.pl-row:first-child { border-top: 1px solid var(--line); }
.pl-name {
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink);
}
.pl-role {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #7a7a7a;
}
.pl-contact a {
    font-size: 14.5px;
    font-weight: 600;
    color: #3a3a3a;
    transition: color .15s ease;
}
.pl-contact a:hover { color: var(--red); }
.pl-contact a + a::before {
    content: "\00b7";
    margin: 0 9px;
    color: #c9c9c9;
}

.pl-groups { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

@media (max-width: 640px) {
    .pl-row { grid-template-columns: 1fr; gap: 8px; }
    .pl-groups { justify-content: flex-start; }
}

/* --- knop onderaan een nieuwskaart: er zijn geen aparte berichtpagina's,
       dus de link wijst naar de livestream, de bijlage of het album --- */
.post-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    transition: gap .2s ease;
}
.post-cta svg { width: 17px; height: 17px; }
.post:hover .post-cta { gap: 14px; }

/* --- knop "Inschrijven" op een kalenderitem --- */
.tl-inschrijven {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: right;
    margin: 0 0 6px 16px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
    transition: gap .2s ease, background .2s ease;
}
.tl-inschrijven svg { width: 16px; height: 16px; }
.tl-inschrijven:hover { gap: 12px; background: var(--red-dark); }

@media (max-width: 640px) {
    .tl-inschrijven { float: none; margin: 14px 0 0; }
}

/* ============ VACATURE ============
   Eén kaart met een rode accentrand, een kop met badge en drie kolommen
   (wat je doet / wat we vragen / wat je krijgt) met een afsluitende oproep. */
.vacature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
}
.vacature-kop {
    position: relative;
    padding: 42px 44px 34px;
    background: linear-gradient(150deg, #161616 0%, #2a0d0b 100%);
    color: #fff;
}
.vacature-kop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--red), #ff6a5e);
}
.vacature-badge {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.vacature-titel {
    margin-top: 16px;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -.8px;
}
.vacature-lead {
    margin-top: 12px;
    max-width: 62ch;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

.vacature-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.vacature-blok { padding: 32px 34px 34px; }
.vacature-blok + .vacature-blok { border-left: 1px solid var(--line); }
.vacature-blok h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
}
.vacature-blok .check-list { gap: 12px; }
.vacature-blok .check-list li { font-size: 15px; }

.vacature-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 26px;
    padding: 26px 34px 30px;
    border-top: 1px solid var(--line);
    background: #fafafa;
}
.vacature-voet p {
    flex: 1 1 320px;
    margin: 0;
    font-size: 15px;
    color: #5c5c5c;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .vacature-body { grid-template-columns: 1fr; }
    .vacature-blok + .vacature-blok { border-left: none; border-top: 1px solid var(--line); }
    .vacature-kop { padding: 32px 26px 26px; }
    .vacature-blok { padding: 26px; }
    .vacature-voet { padding: 22px 26px 26px; }
}

/* ============ TESTMOMENTEN ============ */
.test-lijst { list-style: none; display: flex; flex-direction: column; margin-top: 20px; }
.test-rij {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.test-rij:first-child { border-top: 1px solid var(--line); }
.test-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 54px;
    border-radius: 12px;
    background: var(--red);
    color: #fff;
    line-height: 1;
}
.test-dag { font-size: 19px; font-weight: 800; letter-spacing: -.5px; }
.test-maand { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.test-info b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.test-info span { display: block; margin-top: 3px; font-size: 13.5px; color: #7a7a7a; }
.test-status {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #1f9d63;
    white-space: nowrap;
}
.test-rij.is-dicht .test-datum { background: #c9c9c9; }
.test-rij.is-dicht .test-status { color: #9b9b9b; }

@media (max-width: 640px) {
    .test-rij { grid-template-columns: 46px 1fr; }
    .test-status { grid-column: 2; }
}

/* --- lichte variant van de zijkaart (inschrijfformulieren) --- */
.aside-card--licht {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .06);
}
.aside-card--licht h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    text-transform: none;
    color: var(--ink);
    margin-bottom: 6px;
}
.aside-card--licht p { color: #5c5c5c; }
.aside-card--licht .info-row dt { color: #9a9a9a; }
.aside-card--licht .info-row { border-bottom-color: var(--line); }

/* ============ LIDGELD ============
   Eén rustige lijst in plaats van een raster kaarten: omschrijving links,
   bedrag rechts. */
.prijs-lijst { display: flex; flex-direction: column; margin-top: 26px; }
.prijs-rij {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.prijs-rij:first-child { border-top: 1px solid var(--line); }
.prijs-rij dt {
    flex: 1;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
}
.prijs-rij dd {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--red);
    white-space: nowrap;
}

/* ============ TRAINERSPLOEG PER GROEP ============ */
.ploeg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.ploeg-kaart {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ploeg-kaart:hover { border-color: #e0d2d2; box-shadow: 0 12px 28px rgba(0,0,0,.06); }
.ploeg-kop {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.ploeg-code {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--red);
}
.ploeg-groep {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #9b9b9b;
}
.ploeg-rol + .ploeg-rol { margin-top: 12px; }
.ploeg-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9b9b9b;
    margin-bottom: 3px;
}
.ploeg-namen { display: block; font-size: 15px; font-weight: 500; color: #4a4a4a; line-height: 1.45; }
.ploeg-namen--hoofd { font-weight: 700; color: var(--ink); }

.ploeg-extra {
    list-style: none;
    display: flex;
    flex-direction: column;   /* elk lijntje onder het vorige */
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
}
.ploeg-extra li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fafafa;
}
.ploeg-extra span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9b9b9b;
}
.ploeg-extra b { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* ============ AFGELASTE TRAININGEN ============
   Melding boven de tabbladen, in dezelfde container als de secties eronder,
   zodat de linkerrand uitlijnt met "Groepen en trainers". */
.afgelast { padding: 30px 0 0; }
.afgelast-kaart {
    padding: 20px 24px 18px;
    border: 1px solid #f3c9c4;
    border-left: 4px solid var(--red);
    border-radius: 12px;
    background: #fdf3f2;
}
.afgelast-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--red);
    font-size: 15.5px;
}
.afgelast-kop svg { width: 20px; height: 20px; flex: none; }
.afgelast-lijst { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.afgelast-lijst li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding-top: 8px;
    border-top: 1px solid #f3d8d5;
    font-size: 14.5px;
    color: #4a4a4a;
}
.afgelast-datum { font-weight: 700; color: var(--ink); }
.afgelast-uur { font-variant-numeric: tabular-nums; }
.afgelast-reden { color: #7a7a7a; }

/* ==================================================================
   SPONSORVOORSTELLING (pagina "Onze sponsors 2026-2027")
   ================================================================== */

/* --- Hoofdsponsor: tekst links, beeld rechts --- */
.spv-hoofd {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 54px;
    align-items: start;
}
.spv-hoofd__tekst .section-title { margin: 6px 0 22px; }
.spv-alinea {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #4a4a4a;
}
.spv-hoofd__tekst .btn { margin-top: 10px; }

.spv-hoofd__beeld {
    margin: 0;
    position: sticky;
    top: 110px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 42px 38px 26px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
    text-align: center;
}
.spv-hoofd__beeld img {
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
}
.spv-hoofd__beeld figcaption {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rood, #e2001a);
    font-weight: 700;
}

/* --- Twee kaarten: beeld boven, tekst onder --- */
.spv-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}
.spv-kaart {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.spv-kaart:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}
.spv-kaart__beeld {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    padding: 30px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.spv-kaart__beeld img {
    max-width: 240px;
    max-height: 100%;
    object-fit: contain;
}
.spv-kaart__body { padding: 26px 28px 30px; }
.spv-kaart__body h3 {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
}
.spv-kaart__body p {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a4a4a;
}
.spv-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rood, #e2001a);
    text-decoration: none;
}
.spv-link:hover { text-decoration: underline; }

/* --- Drie draaikaartjes --- */
.spv-galerij {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 6px;
}
.spv-flip {
    display: block;
    height: 220px;
    perspective: 1200px;
    text-decoration: none;
    outline: none;
}
.spv-flip__binnen {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    transform-style: preserve-3d;
}
.spv-flip:hover .spv-flip__binnen,
.spv-flip:focus .spv-flip__binnen,
.spv-flip:focus-within .spv-flip__binnen { transform: rotateY(180deg); }

.spv-flip__voor,
.spv-flip__achter {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.spv-flip__voor {
    background: #fff;
    border: 1px solid #ececec;
    padding: 26px;
}
.spv-flip__voor img {
    max-width: 78%;
    max-height: 96px;
    object-fit: contain;
}
.spv-flip__achter {
    background: var(--rood, #e2001a);
    color: #fff;
    padding: 26px 24px;
    text-align: center;
    transform: rotateY(180deg);
}
.spv-flip__achter h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}
.spv-flip__achter p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

@media (max-width: 900px) {
    .spv-hoofd { grid-template-columns: 1fr; gap: 32px; }
    .spv-hoofd__beeld { position: static; padding: 32px 26px 22px; }
    .spv-duo { grid-template-columns: 1fr; }
    .spv-galerij { grid-template-columns: 1fr; }
    .spv-flip { height: 190px; }
}

/* ==================================================================
   MOBIEL — binnenpagina's
   Alles staat binnen media queries; op desktop verandert er niets.
   ================================================================== */
@media (max-width: 760px) {
    /* --- hero van de binnenpagina's --- */
    .page-hero { min-height: 420px; }
    .page-hero-inner { padding-left: 20px; padding-right: 20px; }
    .page-hero-body { max-width: 100%; }
    .crumbs { flex-wrap: wrap; row-gap: 4px; font-size: 10.5px; }
    .page-title { font-size: 30px; line-height: 1.15; }
    .page-lead { font-size: 15px; }
    /* Knoppen in de hero: allemaal even breed, netjes onder elkaar. */
    .page-hero .btn {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 22px;
    }
    .page-hero .btn + .btn { margin-left: 0; margin-top: 10px; }

    /* --- secties --- */
    .section { padding: 46px 0; }
    .section--tight { padding: 34px 0; }
    .section-inner { padding-left: 20px; padding-right: 20px; }
    .section-title { font-size: 25px; line-height: 1.2; }
    .section-text { font-size: 15px; }
    .section-head { margin-bottom: 26px; }

    /* --- formulieren: 16px voorkomt dat iOS bij het tikken inzoomt --- */
    .field input,
    .field select,
    .field textarea { font-size: 16px; padding: 14px 16px; border-radius: 12px; }
    .field textarea { min-height: 130px; }
    .field-row { grid-template-columns: 1fr; gap: 16px; }
    .form { gap: 16px; }
    .form .btn { align-self: stretch; justify-content: center; }

    /* --- kaarten en lijsten --- */
    .card { padding: 22px 20px; }
    .card-title { font-size: 18px; }
    .aside-card { padding: 26px 22px; }
    .split { gap: 28px; }

    /* --- mensenlijst (bestuur, coaches) --- */
    .pl-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
    .pl-rol { font-size: 12px; }

    /* --- prijzen en trainingsuren --- */
    .prijs-lijst li,
    .test-lijst li { flex-wrap: wrap; gap: 4px 12px; }

    /* --- trainersploeg --- */
    .ploeg { grid-template-columns: 1fr; }
    .ploeg-kaart { padding: 22px 20px; }

    /* --- afgelaste trainingen --- */
    .afgelast-kaart { padding: 18px 18px 16px; }
    .afgelast-lijst li { flex-wrap: wrap; gap: 4px 10px; }

    /* --- sponsorpagina: twee logo's naast elkaar i.p.v. één per rij --- */
    .logo-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 34px;
    }
    .logo-tile { min-height: 92px; padding: 14px; }
    .logo-tile img { max-height: 56px; }
    .tier-head { margin-bottom: 14px; }
    .name-list { gap: 8px; }
    .name-chip { font-size: 12.5px; padding: 8px 12px; }

    /* --- sponsorvoorstelling --- */
    .spv-hoofd__beeld { padding: 26px 22px 20px; }
    .spv-kaart__beeld { height: 150px; padding: 24px; }
    .spv-alinea { font-size: 15.5px; }
}

/* Draaikaartjes: op een toestel zonder muis is hoveren onmogelijk.
   Daar tonen we het logo met de tekst er meteen onder. */
@media (hover: none) {
    .spv-flip { height: auto; perspective: none; }
    .spv-flip__binnen { transform: none !important; transform-style: flat; height: auto; }
    .spv-flip__voor,
    .spv-flip__achter {
        position: static;
        backface-visibility: visible;
        transform: none;
        border-radius: 16px;
    }
    .spv-flip__voor { padding: 26px; min-height: 120px; }
    .spv-flip__achter { margin-top: 10px; padding: 20px 22px; }
}

/* Lange woorden ("Wedstrijdzwemmers") mogen op een smal scherm nooit
   buiten hun kader vallen. */
@media (max-width: 420px) {
    .page-title,
    .section-title,
    .card-title,
    .news-title { overflow-wrap: anywhere; hyphens: auto; }
    .page-title { font-size: 27px; }
    .section-inner { padding-left: 16px; padding-right: 16px; }
    .page-hero-inner { padding-left: 16px; padding-right: 16px; }
}

/* ==================================================================
   CLUBDOCUMENTEN (statuten, huishoudelijk reglement)
   Lange juridische tekst: smalle kolom, duidelijke artikelnummers en
   een inhoudstafel die meescrollt.
   ================================================================== */
.doc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}
.doc-toc {
    position: sticky;
    top: 120px;
    padding: 24px 24px 20px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 16px;
}
.doc-toc h2 {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #9b9b9b;
}
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-toc a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.4;
}
.doc-toc a:hover { color: var(--red); }
.doc-datum {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid #ececec;
    font-size: 12px;
    color: #9b9b9b;
}

.doc-tekst { max-width: 760px; }
.doc-tekst h2 {
    margin: 46px 0 18px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 23px;
    scroll-margin-top: 130px;   /* de vaste kop mag de titel niet afdekken */
}
.doc-tekst h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-tekst p { margin: 0 0 16px; line-height: 1.75; }
.doc-tekst ul, .doc-tekst ol { margin: 0 0 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.art {
    display: block;
    margin-bottom: 3px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--red);
}

@media (max-width: 900px) {
    .doc-layout { grid-template-columns: 1fr; gap: 30px; }
    .doc-toc { position: static; }
}
@media (max-width: 760px) {
    .doc-toc { padding: 20px; }
    .doc-tekst h2 { font-size: 20px; margin-top: 34px; padding-top: 20px; }
    .doc-tekst p { font-size: 15px; }
}

/* ==================================================================
   404 — PAGINA NIET GEVONDEN
   ================================================================== */
.nietgevonden {
    padding: 190px 0 90px;      /* ruimte voor de vaste kop */
    text-align: center;
}
.nietgevonden-code {
    display: block;
    font-size: clamp(72px, 13vw, 150px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    color: var(--red);
    opacity: .13;
}
.nietgevonden-titel {
    margin: -18px 0 16px;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -.8px;
}
.nietgevonden-tekst {
    max-width: 540px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #6b6b6b;
}
.nietgevonden-knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}
.nietgevonden-knoppen .btn-white {
    border: 1.5px solid var(--line);
    color: var(--ink);
}
.nietgevonden-links {
    margin-top: 54px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.nietgevonden-links > span {
    display: block;
    margin-bottom: 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #9b9b9b;
}
.nietgevonden-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}
.nietgevonden-links a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.nietgevonden-links a:hover { border-color: var(--red); color: var(--red); }

/* De kop staat hier op een witte pagina in plaats van op een foto: dezelfde
   behandeling als bij het scrollen, anders is het menu wit-op-wit. */
body.pagina-404 .header {
    background: #fff;
    border-bottom-color: #ececec;
}
body.pagina-404 .topbar { background: var(--red); }
body.pagina-404 .main-nav a,
body.pagina-404 .main-nav .nav-trigger { color: var(--ink); }
body.pagina-404 .main-nav a:hover,
body.pagina-404 .main-nav .nav-trigger:hover { color: var(--red); }
body.pagina-404 .logo .logo-white { opacity: 0; }
body.pagina-404 .nav-burger span { background: var(--ink); }
body.pagina-404 .nav-knop {
    background: #fff;
    color: var(--red);
    border-color: #e6e6e6;
}
body.pagina-404 .nav-knop:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

@media (max-width: 760px) {
    .nietgevonden { padding: 150px 0 60px; }
    .nietgevonden-titel { margin-top: -10px; }
    .nietgevonden-tekst { font-size: 15px; }
    .nietgevonden-knoppen .btn { flex: 1 1 100%; justify-content: center; }
    .nietgevonden-links { margin-top: 40px; }
}