/* ==========================================================================
   Marathon Den Haag -- Apple-discipline, sinds 30 oktober 2026.

   Dezelfde laag als src/app/apple.css op de rest van de site, vertaald naar
   de --mp-tokens van dit losse bestand. Kleuren, lettertypen, personages en
   de inhoud blijven ongemoeid; de 3D-kaart (#stage) ook: geen regel hieronder
   raakt iets binnen #stage.

   Wat er verandert, per laag:
   - Typografie: koppen per maat strakker gespatieerd; bovenschriften als
     gewone zin in plaats van spatieerde kapitalen.
   - Ritme: secties gescheiden door witruimte, niet door lijnen; zware 2-3 px
     inktlijnen boven tabellen worden gegroepeerde lijsten (een vlak met
     haarlijnen ertussen, zoals Instellingen op iOS).
   - Hiërarchie: één gevulde knop per blok; tweede knoppen getint in plaats
     van omlijnd; keuzes (segmenten, chips) gekozen = actiekleur, net als het
     Segmented-onderdeel op de site.
   - Beweging: indrukken op pointer-down, kritisch gedempte overgangen, vellen
     die binnenkomen in plaats van verschijnen; alles stil bij minder beweging.
   - Materialen: bovenbalk, paginanavigatie en de rail als doorschijnende laag
     met een randje dat pas verschijnt als er pagina onder schuift.
   ========================================================================== */

:root {
  --ap-veer: cubic-bezier(0.22, 1, 0.36, 1);
  --ap-veer-duur: 420ms;
  --ap-druk: 90ms;
  --ap-hoek-tegel: 28px;
  --ap-hoek-kaart: 20px;
  --ap-hoek-veld: 14px;
  --ap-materiaal: color-mix(in srgb, var(--mp-bg) 72%, transparent);
  --ap-materiaal-dun: color-mix(in srgb, var(--mp-wit) 64%, transparent);
  --ap-filter: blur(20px) saturate(180%);
  --ap-rand: color-mix(in srgb, var(--mp-inkt) 9%, transparent);
  --ap-haarlijn: color-mix(in srgb, var(--mp-inkt) 10%, transparent);
  --ap-stil: color-mix(in srgb, var(--mp-blauw) 11%, var(--mp-bg));
  --ap-diepte-rust: 0 1px 1px rgba(10, 27, 61, .04), 0 4px 14px rgba(10, 27, 61, .05);
  --ap-diepte-op: 0 2px 6px rgba(10, 27, 61, .05), 0 20px 44px rgba(10, 27, 61, .11);
  --ap-sectie: clamp(64px, 8vw, 112px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ap-diepte-rust: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .28);
    --ap-diepte-op: 0 0 0 1px rgba(255, 255, 255, .09), 0 22px 48px rgba(0, 0, 0, .45);
    --ap-rand: color-mix(in srgb, #FFFFFF 11%, transparent);
    --ap-haarlijn: color-mix(in srgb, #FFFFFF 9%, transparent);
    --ap-stil: color-mix(in srgb, var(--mp-blauw) 16%, var(--mp-bg));
  }
}
:root[data-theme="dark"] {
  --ap-diepte-rust: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .28);
  --ap-diepte-op: 0 0 0 1px rgba(255, 255, 255, .09), 0 22px 48px rgba(0, 0, 0, .45);
  --ap-rand: color-mix(in srgb, #FFFFFF 11%, transparent);
  --ap-haarlijn: color-mix(in srgb, #FFFFFF 9%, transparent);
  --ap-stil: color-mix(in srgb, var(--mp-blauw) 16%, var(--mp-bg));
}

/* ==========================================================================
   1. Typografie
   ========================================================================== */

html body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html body .mp :where(h1, h2, h3):where(:not(#stage *)) { font-optical-sizing: auto; }
html body .mp .mp-h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
html body .mp .mp-intro { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.42; letter-spacing: -.006em; max-width: 46ch; margin-top: 12px; text-wrap: pretty; }
html body .mp h3 { letter-spacing: -.012em; }

/* Bovenschriften: een gewone zin, geen kapitalen met brede spatiëring. */
html body .mp-d4label,
html body .mp-weerkaart .mp-wk-kop,
html body .mp-lijsten h3,
html body .mp-feit h3,
html body .mp-lade-kopje {
  text-transform: none;
  letter-spacing: 0;
  font: 700 15px/1.3 var(--mp-tekst);
}
/* Blauw gemengd met inkt: in licht iets donkerder, in donker iets lichter, zodat
   het label ook op het vertrekvlak boven 4,5:1 blijft. */
html body .mp-d4label { color: color-mix(in srgb, var(--mp-blauw) 68%, var(--mp-inkt)); margin-bottom: 14px; }
html body .mp-d4fin .mp-d4label { color: var(--mp-blauw-inkt); opacity: .85; }
html body .mp-feit h3 { color: var(--mp-feit-zacht); font-size: 14px; }

/* ==========================================================================
   2. Ritme: witruimte in plaats van lijnen
   ========================================================================== */

html body .mp .mp-sectie { padding-block: var(--ap-sectie) 0; border-top: 0; }
html body .mp .mp-sectie:last-child { padding-bottom: var(--ap-sectie); }
html body .mp .mp-omgeving { border-top: 0; }
html body .mp.mp-parcours { border-top: 0; padding-top: var(--ap-sectie); }
html body .mp-colofon { border-top: 0; }

/* Het sectie-icoon: een rustig afgerond vlak in de accentkleur, zoals de
   iconen op de homepage, in plaats van een vol blauw rondje. */
html body .mp .mp-sectiekop { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
html body .mp .mp-knoop { width: 44px; height: 44px; border-radius: 13px; background: var(--ap-stil); color: var(--mp-blauw); }
html body .mp .mp-knoop svg { width: 24px; height: 24px; }
html body .mp .mp-sectiekop .mp-knoop { margin-top: 2px; }

/* ==========================================================================
   3. Knoppen: één gewicht per rol, indrukken op pointer-down
   ========================================================================== */

html body .mp-knop {
  border: 0;
  min-height: 50px;
  padding: 0 22px;
  font-weight: 700;
  letter-spacing: 0;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform var(--ap-veer-duur) var(--ap-veer);
}
html body .mp-knop:not(:disabled):active { transform: scale(.97); transition-duration: var(--ap-druk); }
html body .mp-knop:not(.mp-knop--twee):not(:disabled):hover { background: color-mix(in srgb, var(--mp-blauw) 88%, #FFFFFF); }
/* Tweede knop: getint vlak, geen omlijning. */
html body .mp-knop--twee { background: var(--ap-stil); color: var(--mp-blauw); box-shadow: none; }
html body .mp-knop--twee:not(:disabled):hover { background: color-mix(in srgb, var(--mp-blauw) 17%, var(--mp-bg)); }
html body .mp-knop--klein { min-height: 40px; padding: 0 16px; }
html body .mp-knop:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 3px; }

/* Kleine tekstknoppen en links in kaarten. */
html body .mp-link,
html body .mp-plekerbij,
html body .mp-wissel { transition: background-color 160ms ease, transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp-link:active, html body .mp-plekerbij:active { transform: scale(.96); transition-duration: var(--ap-druk); }
html body .mp-alle summary,
html body .mp-omgeving-actie,
html body .mp-weerkaart .mp-wk-link { text-decoration: none; }
html body .mp-alle summary:hover,
html body .mp-omgeving-actie:hover,
html body .mp-weerkaart .mp-wk-link:hover { text-decoration: underline; text-underline-offset: .22em; }

/* ==========================================================================
   4. Materialen: bovenbalk, paginanavigatie, rail
   ========================================================================== */

html body .mp-sitebalk {
  border-bottom-color: transparent;
  background: var(--ap-materiaal);
  -webkit-backdrop-filter: var(--ap-filter);
  backdrop-filter: var(--ap-filter);
}
@supports (animation-timeline: scroll()) {
  html body .mp-sitebalk { animation: ap-rand linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
}
@keyframes ap-rand { from { box-shadow: 0 1px 0 transparent; } to { box-shadow: 0 1px 0 var(--ap-rand); } }
html body .mp-sb-nav { gap: 6px; }
html body .mp-sb-nav a { padding: 0 12px; border-radius: 999px; font-weight: 500; color: var(--mp-zacht); transition: color 160ms ease, background-color 160ms ease; }
html body .mp-sb-nav a:hover { color: var(--mp-inkt); background: color-mix(in srgb, var(--mp-inkt) 6%, transparent); }
html body .mp-sb-login { min-height: 36px; transition: transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp-sb-login:active, html body .mp-sb-pil:active { transform: scale(.95); transition-duration: var(--ap-druk); }
html body .mp-sb-pil { transition: background-color 160ms ease, transform var(--ap-veer-duur) var(--ap-veer); }

/* Paginanavigatie op telefoon en tablet: materiaal, gekozen = pil. */
html body .mp-paginanav {
  border-bottom: 0;
  background: var(--ap-materiaal);
  -webkit-backdrop-filter: var(--ap-filter);
  backdrop-filter: var(--ap-filter);
  box-shadow: 0 1px 0 var(--ap-rand);
  padding-block: 6px;
}
html body .mp-paginanav a { min-height: 40px; border-radius: 999px; padding: 8px 14px; font-weight: 600; transition: color 160ms ease, background-color 220ms var(--ap-veer); }
html body .mp-paginanav a[aria-current] { color: var(--mp-blauw); background: var(--ap-stil); font-weight: 700; }

/* De rail links op een breed scherm: geen vlak, maar een inhoudsopgave in
   kale regels, zo ver mogelijk links. Een dunne lijn ernaast vult zich met
   het scrollen (waar ben ik op de pagina), het actieve onderdeel staat vet in
   inkt met zijn nummer in blauw. De inhoud schuift wat op, zodat er lucht
   tussen de rail en de vlakken zit. */
@media (min-width: 1280px) {
  html body > .mp, html body > .mp.mp-parcours { margin-left: 232px; margin-right: 40px; }
  html body .mp-paginanav {
    counter-reset: ap-rail;
    left: 32px;
    top: calc(var(--mp-site-header-height, 84px) + 40px);
    width: 168px;
    padding: 2px 0 2px 18px;
    gap: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transition: opacity 280ms var(--ap-veer), transform 420ms var(--ap-veer), visibility 0s linear 0s;
  }
  /* De voortgangslijn: een spoor en een vulling op de scroll van de pagina. */
  html body .mp-paginanav::before,
  html body .mp-paginanav::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--ap-haarlijn);
  }
  /* Spoor en vulling wisselen op de hoogte waar het blauwe slot begint
     (--mp-rail-blauw, gezet door event-navigatie.js). De vulling groeit met
     clip-path in plaats van scaleY, zodat die kleurgrens niet meerekt. */
  html body .mp-paginanav::before {
    background: linear-gradient(to bottom, var(--ap-haarlijn) var(--mp-rail-blauw, 100vh), color-mix(in srgb, #FFFFFF 28%, transparent) var(--mp-rail-blauw, 100vh));
  }
  html body .mp-paginanav::after {
    background: linear-gradient(to bottom, var(--mp-blauw) var(--mp-rail-blauw, 100vh), var(--mp-geel) var(--mp-rail-blauw, 100vh));
    clip-path: inset(0 0 100% 0);
  }
  @supports (animation-timeline: scroll()) {
    html body .mp-paginanav::after { animation: ap-voortgang linear both; animation-timeline: scroll(root); }
  }
  html body .mp-paginanav a {
    counter-increment: ap-rail;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: baseline;
    min-height: 0;
    padding: 9px 0;
    border-radius: 0;
    background: none;
    font: 500 15px/1.25 var(--mp-tekst);
    letter-spacing: -.005em;
    color: var(--mp-zacht);
    transition: color 200ms ease, transform 420ms var(--ap-veer);
  }
  html body .mp-paginanav a::before {
    content: counter(ap-rail, decimal-leading-zero);
    font: 700 12px/1 var(--mp-kop);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--mp-zacht) 70%, transparent);
    transition: color 200ms ease;
  }
  html body .mp-paginanav a:hover { color: var(--mp-inkt); background: none; transform: translateX(2px); }
  html body .mp-paginanav a[aria-current] {
    color: var(--mp-inkt);
    background: none;
    font: 800 17px/1.2 var(--mp-kop);
    letter-spacing: -.02em;
  }
  html body .mp-paginanav a[aria-current]::before { color: var(--mp-blauw); }
  html body .mp-paginanav a:focus-visible { outline: 2px solid var(--mp-blauw); outline-offset: 4px; border-radius: 4px; }
  /* Weg, maar niet onbereikbaar: doorzichtig en niet aanklikbaar, en zodra
     je er met Tab op komt is hij er weer (WCAG 2.1.1). visibility: hidden
     liet Tab de vijf links overslaan. */
  html body .mp-paginanav[data-enhanced="true"][data-stuck="false"],
  html body .mp-paginanav[data-finished="true"] {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
  }
  html body .mp-paginanav[data-enhanced="true"]:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* Met Tab opgeroepen boven de opening: een eigen blauw vlak, anders ligt
     de rail dwars over de grote kop. */
  html body .mp-paginanav[data-enhanced="true"][data-stuck="false"]:focus-within {
    margin-left: -18px;
    padding: 14px 18px 14px 36px;
    border-radius: 18px;
    background: var(--mp-open);
    box-shadow: 0 14px 36px rgba(1, 22, 60, .35);
  }
  html body .mp-paginanav[data-enhanced="true"][data-stuck="false"]:focus-within::before,
  html body .mp-paginanav[data-enhanced="true"][data-stuck="false"]:focus-within::after { left: 18px; top: 20px; bottom: 20px; }
}
@keyframes ap-voortgang { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Boven een donker vlak (de blauwe opening, het blauwe slot, of het donkere thema): de regel wordt
   licht, de plek waar je bent wit en vet met een geel nummer. event-navigatie.js meet per regel wat
   er onder het midden van de tekst ligt (data-op-blauw). */
@media (min-width: 1280px) {
  html body .mp-paginanav a[data-op-blauw] { color: color-mix(in srgb, #FFFFFF 78%, transparent); }
  html body .mp-paginanav a[data-op-blauw]::before { color: color-mix(in srgb, #FFFFFF 58%, transparent); }
  html body .mp-paginanav a[data-op-blauw]:hover { color: #FFFFFF; }
  html body .mp-paginanav a[data-op-blauw][aria-current] { color: #FFFFFF; }
  html body .mp-paginanav a[data-op-blauw][aria-current]::before { color: var(--mp-geel); }
  html body .mp-paginanav a[data-op-blauw]:focus-visible { outline-color: var(--mp-geel); }
  html body .mp-paginanav[data-blauw-boven]::before {
    background: linear-gradient(to bottom, color-mix(in srgb, #FFFFFF 28%, transparent) var(--mp-rail-blauw), var(--ap-haarlijn) var(--mp-rail-blauw));
  }
  html body .mp-paginanav[data-blauw-boven]::after {
    background: linear-gradient(to bottom, var(--mp-geel) var(--mp-rail-blauw), var(--mp-blauw) var(--mp-rail-blauw));
  }

  /* Het slot staat in dezelfde kolom als de rest van de inhoud, zodat de
     rail er in de lege strook links naast loopt en niet over de kop. */
  html body .mp-slot-in { max-width: 1180px; margin-left: 232px; margin-right: 40px; padding-inline: 0; }
}
@media (min-width: 1900px) {
  html body .mp-slot-in { margin-left: calc((100% - 1640px) / 2 + 160px); }
}
@media (min-width: 1900px) {
  html body > .mp, html body > .mp.mp-parcours { margin-inline: auto; }
}

/* Het menu-vel: een echte laag met een dimmende achtergrond. */
html body .mp-lade-achter { background: color-mix(in srgb, #0A1B3D 36%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html body .mp-lade-in { border-radius: 24px 0 0 24px; transition: transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp-lade-lijst a { font-weight: 600; transition: background-color 160ms ease; }
html body .mp-lade-voet { border-top: 0; box-shadow: 0 -1px 0 var(--ap-haarlijn); }

/* ==========================================================================
   5. Opening (blauw)
   ========================================================================== */

html body .mp-opening h1 { letter-spacing: -.038em; line-height: .98; font-weight: 800; }
html body .mp-opening-boven { opacity: .9; font-weight: 600; letter-spacing: 0; }
html body .mp-opening-tekst { line-height: 1.45; letter-spacing: -.006em; opacity: .95; }

/* De drie onderdelen als keuzetegels: zachter vlak, geen rand, indrukbaar. */
html body .mp-kiesrij { gap: 12px; }
html body .mp-kiesoptie {
  border-radius: 20px;
  box-shadow: none;
  background: color-mix(in srgb, var(--mp-open-inkt) 13%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 220ms var(--ap-veer), color 220ms var(--ap-veer), transform var(--ap-veer-duur) var(--ap-veer), box-shadow 220ms var(--ap-veer);
}
html body .mp-kiesoptie:hover { background: color-mix(in srgb, var(--mp-open-inkt) 20%, transparent); }
html body .mp-kiesoptie:active { transform: scale(.975); transition-duration: var(--ap-druk); }
html body .mp-kiesoptie.is-aan { background: var(--mp-geel); box-shadow: 0 10px 28px rgba(1, 22, 60, .28); }
html body .mp-kiesoptie b { letter-spacing: -.02em; }

/* Feitenchips: materiaal op blauw. */
html body .mp-feitchips li { padding: 9px 14px; font-weight: 600; background: color-mix(in srgb, var(--mp-open-inkt) 14%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Knoppen op blauw: geel gevuld en een getinte tweede weg. */
html body .mp-opening .mp-knop { border: 0; }
html body .mp-opening .mp-knop:not(.mp-knop--twee):not(:disabled):hover { background: #FFF45C; }
html body .mp-opening .mp-knop--twee { background: color-mix(in srgb, var(--mp-open-inkt) 16%, transparent); color: var(--mp-open-inkt); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html body .mp-opening .mp-knop--twee:not(:disabled):hover { background: color-mix(in srgb, var(--mp-open-inkt) 24%, transparent); }

/* Weerkaart: een zwevend vlak met diepte. */
html body .mp-weerkaart { border-radius: 24px; padding: 22px 24px; box-shadow: 0 18px 44px rgba(1, 22, 60, .3); }
html body .mp-weerkaart b { letter-spacing: -.025em; }
html body .mp-nadien { border-radius: 16px; }

/* ==========================================================================
   6. Raceplan
   ========================================================================== */

html body .mp .mp-h1 span { letter-spacing: -.025em; font-weight: 700; }
html body .mp .mp-h1 strong { letter-spacing: -.05em; }
html body .mp .mp-boven { font-weight: 700; }
html body .mp .mp-lead { line-height: 1.45; letter-spacing: -.006em; }

html body .mp .mp-reken { border-radius: var(--ap-hoek-tegel); padding: 28px; gap: 20px 24px; }
html body .mp .mp-invoer,
html body .mp .mp-reken .mp-select,
html body .mp .mp-select {
  border: 0;
  border-radius: var(--ap-hoek-veld);
  background: var(--mp-wit);
  box-shadow: 0 0 0 1px var(--ap-rand), 0 1px 2px rgba(10, 27, 61, .06);
  transition: box-shadow 200ms var(--ap-veer);
}
html body .mp .mp-invoer:focus-within,
html body .mp .mp-select:focus { outline: none; box-shadow: 0 0 0 2px var(--mp-blauw), 0 0 0 6px color-mix(in srgb, var(--mp-blauw) 22%, transparent); }
html body .mp .mp-invoer input { letter-spacing: -.03em; }
html body .mp .mp-veldinput,
html body .mp .mp-snel {
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--ap-rand);
  transition: box-shadow 200ms var(--ap-veer);
}
html body .mp .mp-veldinput:focus,
html body .mp .mp-snel:focus { outline: none; box-shadow: 0 0 0 2px var(--mp-blauw), 0 0 0 6px color-mix(in srgb, var(--mp-blauw) 20%, transparent); }
html body .mp .mp-label { font-size: 14px; font-weight: 700; color: var(--mp-inkt); }
html body .mp .mp-uitkomst b { letter-spacing: -.02em; }

/* Bewaren en de app: rustige tegels, geen rand. */
html body .mp .mp-account { border: 0; border-radius: var(--ap-hoek-kaart); padding: 24px; background: var(--mp-vlak); }
html body .mp .mp-appboven { border-radius: var(--ap-hoek-kaart); padding: 20px 24px; }
html body .mp .mp-plensblok { border: 0; border-radius: var(--ap-hoek-kaart); background: var(--mp-vlak); }
html body .mp .mp-winkel img { transition: transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp .mp-winkel:active img { transform: scale(.97); transition-duration: var(--ap-druk); }

/* ==========================================================================
   7. Jouw dag
   ========================================================================== */

html body .mp .mp-dag4 { gap: 16px; }
html body .mp .mp-d4kaart { border-radius: var(--ap-hoek-tegel); padding: 26px 26px 28px; }
html body .mp .mp-d4moment time { letter-spacing: -.03em; }
html body .mp .mp-d4weg li { border-top-color: var(--ap-haarlijn); padding: 11px 0; }
html body .mp .mp-d4voor .mp-d4groot { border-top-color: color-mix(in srgb, var(--mp-blauw) 18%, transparent); }
html body .mp .mp-d4fin { box-shadow: 0 18px 40px color-mix(in srgb, var(--mp-blauw) 30%, transparent); }
html body .mp .mp-d4fin .mp-d4groot time { letter-spacing: -.045em; }
html body .mp .mp-tip { border-radius: 14px; padding: 10px 14px; }
html body .mp .mp-kmtabel { border-top: 0; margin-top: 16px; padding: 4px 16px; border-radius: var(--ap-hoek-kaart); background: var(--mp-vlak); }
html body .mp .mp-kmtabel li { border-bottom-color: var(--ap-haarlijn); }

/* ==========================================================================
   8. Parcours: alleen de kop. De kaart blijft zoals hij is.
   ========================================================================== */

@media (min-width: 1280px) {
  html body .mp-parcours .mp-kaartvak { border-radius: var(--ap-hoek-tegel); box-shadow: var(--ap-diepte-rust); }
}

/* ==========================================================================
   9. Supporters
   ========================================================================== */

html body .mp .mp-mens { border-radius: var(--ap-hoek-tegel); padding: 24px; gap: 16px; }
html body .mp .mp-naam { font-weight: 700; letter-spacing: -.02em; border-radius: 10px; }
html body .mp .mp-nr { box-shadow: 0 2px 6px rgba(10, 27, 61, .18); }
html body .mp .mp-chip { border-radius: 12px; box-shadow: 0 0 0 1px var(--ap-rand); transition: box-shadow 160ms ease, transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp .mp-chip:active { transform: scale(.94); transition-duration: var(--ap-druk); }
html body .mp .mp-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mp-blauw); }
html body .mp .mp-chip[aria-pressed="true"]::after { background-color: var(--mp-blauw); }

/* Segmenten: een baan in pilvorm, gekozen = actiekleur (zoals Segmented op de site). */
html body .mp .mp-seg { padding: 3px; background: color-mix(in srgb, var(--mp-inkt) 7%, var(--mp-wit)); box-shadow: none; }
html body .mp .mp-seg button { transition: background-color 220ms var(--ap-veer), color 220ms var(--ap-veer), box-shadow 220ms var(--ap-veer), transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp .mp-seg button:active { transform: scale(.96); transition-duration: var(--ap-druk); }
html body .mp .mp-seg button[aria-pressed="true"] { background: var(--mp-blauw); color: var(--mp-blauw-inkt); box-shadow: 0 1px 2px rgba(10, 27, 61, .12), 0 3px 10px color-mix(in srgb, var(--mp-blauw) 26%, transparent); }

/* Meeneemchips: pillen, gekozen = actiekleur. */
html body .mp .mp-mee button { box-shadow: 0 0 0 1px var(--ap-rand); transition: background-color 180ms var(--ap-veer), color 180ms var(--ap-veer), transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp .mp-mee button:active { transform: scale(.95); transition-duration: var(--ap-druk); }
html body .mp .mp-mee button[aria-pressed="true"] { background: var(--mp-blauw); color: var(--mp-blauw-inkt); box-shadow: none; }

html body .mp .mp-plekblok,
html body .mp .mp-rond { border-radius: 16px; box-shadow: none; background: color-mix(in srgb, var(--mp-wit) 62%, transparent); }
html body .mp .mp-plekkop strong,
html body .mp .mp-tijd strong { letter-spacing: -.035em; }
html body .mp .mp-tijd { border-top-color: var(--ap-haarlijn); }

/* Supporter toevoegen: een tegel die uitnodigt, geen stippellijn. */
html body .mp .mp-plus {
  border: 0;
  border-radius: var(--ap-hoek-tegel);
  background: var(--ap-stil);
  transition: background-color 200ms ease, transform var(--ap-veer-duur) var(--ap-veer);
}
html body .mp .mp-plus:hover { background: color-mix(in srgb, var(--mp-blauw) 16%, var(--mp-bg)); }
html body .mp .mp-plus:active { transform: scale(.985); transition-duration: var(--ap-druk); }
html body .mp .mp-plus i { box-shadow: 0 10px 24px color-mix(in srgb, var(--mp-blauw) 35%, transparent); transition: transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp .mp-voorbeeld { border-radius: 999px; padding: 7px 14px; }

/* ==========================================================================
   10. Parcours & weer: tabs als segmented control, tabellen als groepen
   ========================================================================== */

html body .mp .mp-omgeving-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 28px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mp-inkt) 7%, var(--mp-bg));
}
html body .mp .mp-omgeving-tabs button {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  transition: background-color 220ms var(--ap-veer), color 220ms var(--ap-veer), box-shadow 220ms var(--ap-veer), transform var(--ap-veer-duur) var(--ap-veer);
}
html body .mp .mp-omgeving-tabs button:hover { color: var(--mp-inkt); }
html body .mp .mp-omgeving-tabs button:active { transform: scale(.97); transition-duration: var(--ap-druk); }
html body .mp .mp-omgeving-tabs button[aria-selected="true"] { background: var(--mp-blauw); color: var(--mp-blauw-inkt); border: 0; box-shadow: 0 1px 2px rgba(10, 27, 61, .12), 0 4px 12px color-mix(in srgb, var(--mp-blauw) 26%, transparent); }
@media (max-width: 639px) {
  html body .mp .mp-omgeving-tabs { display: flex; border-radius: 18px; }
  html body .mp .mp-omgeving-tabs button { border-radius: 14px; padding: 10px 8px; }
}
html body .mp .mp-omgeving[data-enhanced] > .mp-sectie { padding-top: 28px; }

/* De zware inktlijn boven de kop van een blok verdwijnt; de kop staat los. */
html body .mp .mp-rail { border-top: 0; padding-top: 0; }
html body .mp .mp-rail h2 { letter-spacing: -.025em; }

/* Lijsten met haarlijnen: één vlak, de regels ingesprongen gescheiden. */
html body .mp .mp-gegevens,
html body .mp .mp-stukken,
html body .mp .mp-tijden {
  border-top: 0;
  border-radius: var(--ap-hoek-kaart);
  background: var(--mp-vlak);
  overflow: hidden;
}
html body .mp .mp-gegevens { padding: 4px 18px; }
html body .mp .mp-gegevens li { border-bottom-color: var(--ap-haarlijn); }
html body .mp .mp-gegevens li:last-child { border-bottom: 0; }
html body .mp .mp-stukken { padding: 0 6px; }
html body .mp .mp-stukken li { padding: 16px 14px 14px; border-bottom-color: var(--ap-haarlijn); }
html body .mp .mp-tijden li { padding: 14px 0 14px 14px; border-bottom-color: var(--ap-haarlijn); }
html body .mp .mp-tijden li:nth-child(5n + 1) { padding-left: 16px; }
html body .mp .mp-tijden li:not(:nth-child(5n + 1)) { border-left-color: var(--ap-haarlijn); }
html body .mp .mp-tijden b { letter-spacing: -.02em; }
html body .mp .mp-strook { border-radius: 10px; height: 32px; }
html body .mp .mp-windkaart { border-radius: var(--ap-hoek-tegel); padding: 14px; }
html body .mp .mp-windkaart .mp-k2d { border-radius: 14px; }
html body .mp .mp-groot b { letter-spacing: -.045em; }
html body .mp .mp-kled { border-radius: var(--ap-hoek-kaart); }
html body .mp .mp-kled h3 { letter-spacing: -.02em; }
html body .mp .mp-zeker { border-radius: var(--ap-hoek-kaart); }
html body .mp .mp-hcijfers li { background: var(--mp-vlak); padding: 9px 14px; }
html body .mp .mp-klimmen li { border-radius: var(--ap-hoek-kaart); padding: 20px; }
html body .mp .mp-klimmen dl { border-top-color: var(--ap-haarlijn); }
html body .mp .mp-uur { border-radius: var(--ap-hoek-kaart); }

/* De hoogte- en windgrafieken van race-profielen.js: dezelfde segmenten. */
html body .mp .prp-tabs { padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--mp-inkt) 7%, var(--mp-bg)); border: 0; gap: 2px; }
html body .mp .prp-tabs button { border: 0; border-radius: 999px; transition: background-color 220ms var(--ap-veer), color 220ms var(--ap-veer), transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp .prp-tabs button:active { transform: scale(.96); transition-duration: var(--ap-druk); }
html body .mp .prp-tabs button[aria-pressed="true"] { background: var(--mp-blauw); color: var(--mp-blauw-inkt); box-shadow: 0 1px 2px rgba(10, 27, 61, .12); }
html body .mp .prp-details > div { border-radius: 16px; }

/* ==========================================================================
   11. Feiten
   ========================================================================== */

html body .mp .mp-feiten { border-radius: var(--ap-hoek-tegel); padding: 28px clamp(22px, 3vw, 48px) 32px; box-shadow: 0 24px 56px rgba(10, 27, 61, .18); }
html body .mp .mp-feiten .mp-rail { border: 0; }
html body .mp .mp-feit { border-bottom-color: var(--mp-feit-lijn); }
html body .mp .mp-feit .mp-groot2 { letter-spacing: -.04em; }
html body .mp .mp-vakken li { border-radius: 10px; }

/* ==========================================================================
   12. Klaar voor zondag: afvinklijst als gegroepeerde lijst
   ========================================================================== */

html body .mp .mp-stand { border-radius: var(--ap-hoek-tegel); padding: 24px 26px; }
html body .mp .mp-stand b { letter-spacing: -.045em; }
html body .mp .mp-balk { height: 8px; }
html body .mp .mp-balk i { transition: width 600ms var(--ap-veer); }
html body .mp .mp-lijsten h3 { border-bottom: 0; padding: 0 4px 10px; color: var(--mp-zacht); }
html body .mp .mp-lijsten ul { border-radius: var(--ap-hoek-kaart); background: var(--mp-wit); box-shadow: var(--ap-diepte-rust); overflow: hidden; }
html body .mp .mp-vink { padding: 15px 18px; border-bottom: 1px solid var(--ap-haarlijn); grid-template-columns: 28px minmax(0, 1fr); transition: background-color 160ms ease; }
html body .mp .mp-lijsten li:last-child .mp-vink { border-bottom: 0; }
html body .mp .mp-vink:not(:disabled):hover { background: color-mix(in srgb, var(--mp-inkt) 3%, transparent); }
html body .mp .mp-vink:not(:disabled):active { background: color-mix(in srgb, var(--mp-inkt) 6%, transparent); }
/* Ronde vinkjes die bij het aanvinken even indeuken en terugveren. */
html body .mp .mp-vak { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mp-inkt) 26%, transparent); transition: background-color 220ms var(--ap-veer), box-shadow 220ms var(--ap-veer), transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp .mp-vink:not(:disabled):active .mp-vak { transform: scale(.86); transition-duration: var(--ap-druk); }
html body .mp .mp-vak svg { width: 16px; height: 16px; }
html body .mp .mp-vink b { letter-spacing: -.01em; }

/* ==========================================================================
   13. Horloge
   ========================================================================== */

html body .mp .mp-doel { border-radius: var(--ap-hoek-tegel); padding: 24px 26px; }
html body .mp .mp-gpx { border-radius: var(--ap-hoek-kaart); box-shadow: none; background: var(--mp-vlak); }
html body .mp .mp-uitleg,
html body .mp .mp-inhoud { border-top: 0; padding-top: 0; }
html body .mp .mp-uitleg ol { margin-top: 14px; padding: 0 18px; border-radius: var(--ap-hoek-kaart); background: var(--mp-vlak); }
html body .mp .mp-uitleg li { border-bottom-color: var(--ap-haarlijn); }
html body .mp .mp-uitleg li:last-child { border-bottom: 0; }
html body .mp .mp-kast { box-shadow: 0 0 0 6px color-mix(in srgb, #0A1B3D 22%, transparent), 0 24px 48px rgba(10, 27, 61, .28); }

/* ==========================================================================
   14. Vragen
   ========================================================================== */

html body .mp .mp-vragen { gap: 0 56px; margin-top: 32px; }
html body .mp .mp-vraag { padding: 22px 0; border-top-color: var(--ap-haarlijn); }
html body .mp .mp-vraag h3 { font-size: 20px; letter-spacing: -.015em; margin-bottom: 10px; }
html body .mp .mp-vraag p { color: var(--mp-zacht); }
html body .mp .mp-vraag a,
html body .mp .mp-zeker a { text-decoration-thickness: 1.5px; text-underline-offset: .22em; }

/* ==========================================================================
   15. Slot en voet
   ========================================================================== */

html body .mp-slot h2 { letter-spacing: -.04em; line-height: .96; }
html body .mp-slottekst { letter-spacing: -.006em; }
html body .mp-slotonder { border-top-color: color-mix(in srgb, var(--mp-open-inkt) 22%, transparent); }

html body .mp-plensvoet h2 { font: 700 15px/1.3 var(--mp-tekst); letter-spacing: 0; text-transform: none; }
html body .mp-plensvoet a { text-decoration: none; color: color-mix(in srgb, var(--mp-open-inkt) 86%, transparent); transition: color 160ms ease; }
html body .mp-plensvoet a:hover { color: var(--mp-open-inkt); text-decoration: underline; text-decoration-color: var(--mp-geel); }
@media (min-width: 640px) { html body .mp-plensvoet ul a { min-height: 36px; } }
html body .mp-pv-sociaal a { transition: transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp-pv-sociaal a:active { transform: scale(.94); transition-duration: var(--ap-druk); }

/* ==========================================================================
   16. Vellen: PDF-paneel en tijdkiezer
   ========================================================================== */

html body .mp-paneel { border-radius: 24px; box-shadow: 0 24px 64px rgba(10, 27, 61, .26); }
html body .mp-sluit { display: grid; place-items: center; width: 36px; height: 36px; background: color-mix(in srgb, var(--mp-inkt) 7%, transparent); transition: transform var(--ap-veer-duur) var(--ap-veer); }
html body .mp-sluit:active { transform: scale(.9); transition-duration: var(--ap-druk); }
html body .mp-figkeuze button { box-shadow: 0 0 0 1px var(--ap-rand); }
html body .mp-figkeuze button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mp-blauw); }
html body .mp-figkeuze button[aria-pressed="true"]::after { background-color: var(--mp-blauw); }
html body .mp-duration-dialog { border-radius: 28px; box-shadow: 0 24px 64px rgba(10, 27, 61, .3); }
html body .mp-duration-dialog::backdrop { background: rgba(10, 27, 61, .36); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  html body .mp-duration-dialog[open] { animation: ap-vel 420ms var(--ap-veer); }
  html body .mp-pdf:not([hidden]) .mp-paneel { animation: ap-vel 420ms var(--ap-veer); }
}
@keyframes ap-vel { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   17. Binnenkomen bij het scrollen
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html body .mp > .mp-sectie > *:not(.mp-sectiekop),
    html body .mp-dag4 > *,
    html body .mp-kleding > *,
    html body .mp-klimmen > li {
      animation: ap-op linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}
@keyframes ap-op { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   18. Toegankelijkheid
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html body .mp-knop, html body .mp-kiesoptie, html body .mp-chip, html body .mp-seg button,
  html body .mp-mee button, html body .mp-plus, html body .mp-vak, html body .mp-omgeving-tabs button,
  html body .mp-paginanav, html body .mp-lade-in { transition-property: background-color, color, box-shadow, opacity !important; }
  html body .mp-knop:active, html body .mp-kiesoptie:active, html body .mp-chip:active,
  html body .mp-plus:active, html body .mp-vink:active .mp-vak { transform: none !important; }
  html body .mp-paginanav[data-finished="true"], html body .mp-paginanav[data-stuck="false"] { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html body .mp-sitebalk, html body .mp-paginanav { background: var(--mp-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html body .mp-kiesoptie, html body .mp-feitchips li, html body .mp-opening .mp-knop--twee { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  html body .mp-sitebalk, html body .mp-paginanav { background: var(--mp-bg); box-shadow: 0 1px 0 var(--mp-lijn); }
  html body .mp .mp-lijsten ul, html body .mp .mp-gegevens, html body .mp .mp-stukken, html body .mp .mp-tijden { box-shadow: inset 0 0 0 1px var(--mp-lijn); }
  html body .mp-kiesoptie { box-shadow: inset 0 0 0 1.5px var(--mp-open-inkt); }
}
@media print {
  html body .mp-sitebalk, html body .mp-paginanav { backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
  html body .mp * { animation: none !important; }
}

/* ==========================================================================
   19. Telefoon: de tijdkiezers (mobile-page.css) en het tijdkiezervel
   ========================================================================== */

@media (max-width: 767px), (pointer: coarse) and (max-width: 1366px) {
  html body .mp .mp-tijdkiezer {
    border: 0;
    border-radius: var(--ap-hoek-veld);
    box-shadow: 0 0 0 1px var(--ap-rand), 0 1px 2px rgba(10, 27, 61, .06);
    transition: box-shadow 200ms var(--ap-veer), transform var(--ap-veer-duur) var(--ap-veer);
  }
  html body .mp .mp-tijdkiezer:active { transform: scale(.98); transition-duration: var(--ap-druk); }
  html body .mp .mp-tijdkiezer:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mp-blauw), 0 0 0 6px color-mix(in srgb, var(--mp-blauw) 22%, transparent); }
  html body .mp-tijdkiezer .mp-tijdwaarde { letter-spacing: -.025em; }
  html body .mp .mp-reken { border-radius: 24px; padding: 20px; }
}
html body .mp-duration-dialog { border-radius: 28px 28px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 767px) {
    /* Een vel van onderen komt van onderen en gaat ook zo weer weg. */
    html body .mp-duration-dialog[open] { animation: ap-vel-onder 420ms var(--ap-veer); }
  }
}
@keyframes ap-vel-onder { from { transform: translateY(100%); } to { transform: none; } }

/* De focusring om een keuzetegel alleen bij toetsenbordfocus, niet na een tik. */
html body .mp-kiesoptie:focus-within:not(:has(:focus-visible)) { outline: none; }