/* De opening van een eventpagina: kleiner en strakker letterbeeld, één rustig blauw vlak met de echte
   parcourslijn als motief, en een compacte onderdeelkeuze. Overschrijft de oudere openingsregels,
   daarom met :root ervoor. Geen kaders of accentstrepen; hiërarchie komt uit maat en witruimte. */
:root body .mp-opening { background: radial-gradient(120% 140% at 88% 18%, color-mix(in srgb, #FFFFFF 9%, var(--mp-open)) 0%, var(--mp-open) 46%, color-mix(in srgb, #000 14%, var(--mp-open)) 100%); }
:root body .mp-opening-in { padding-top: clamp(28px, 3.4vw, 44px); padding-bottom: clamp(36px, 4.6vw, 60px); }

/* de parcourslijn: wit op 20%, tekent zich één keer */
.mp-opening-route { position: absolute; z-index: 0; top: 44%; right: 2vw; width: min(50%, 660px); aspect-ratio: 1.15; transform: translateY(-50%); color: #FFFFFF; opacity: .2; pointer-events: none; }
.mp-opening-route svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mp-opening-route polyline { stroke-dasharray: 1; stroke-dashoffset: 0; animation: mp-route-teken 2.6s cubic-bezier(.65, .05, .25, 1) both; }
@keyframes mp-route-teken { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: reduce) { .mp-opening-route polyline { animation: none; } }

:root body .mp-opening-boven { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 0; font-size: 15px; font-weight: 700; letter-spacing: .005em; opacity: 1; color: color-mix(in srgb, var(--mp-open-inkt) 86%, transparent); }
.mp-aftel { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--mp-geel); color: var(--mp-geel-inkt); font: 800 13px/1 var(--mp-tekst); letter-spacing: .01em; }

:root body .mp-opening h1 { margin-top: 14px; max-width: min(15ch, calc(100% - min(22vw, 260px))); font-size: clamp(38px, 4.5vw, 62px); line-height: 1.01; letter-spacing: -0.032em; }
:root body .mp-opening-sienna { top: clamp(20px, 3vw, 40px); right: clamp(12px, 5vw, 80px); height: clamp(140px, 15vw, 196px); z-index: 1; }

:root body .mp-kies { margin-top: 26px; max-width: 600px; }
:root body .mp-kies legend { margin-bottom: 10px; font-size: 15px; color: color-mix(in srgb, var(--mp-open-inkt) 86%, transparent); }
:root body .mp-kiesrij { gap: 8px; }
:root body .mp-kiesoptie { min-height: 0; gap: 3px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--mp-open-inkt) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mp-open-inkt) 16%, transparent); transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
:root body .mp-kiesoptie:hover { background: color-mix(in srgb, var(--mp-open-inkt) 15%, transparent); }
:root body .mp-kiesoptie b { font-size: clamp(19px, 1.8vw, 22px); }
:root body .mp-kiesoptie span { font-size: 13.5px; }
:root body .mp-kiesoptie.is-aan { background: var(--mp-geel); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { :root body .mp-kiesoptie { transition: none; } }

:root body .mp-opening-onder { margin-top: 30px; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
:root body .mp-opening-tekst { max-width: 46ch; font-size: 17px; line-height: 1.55; }
:root body .mp-feitchips { margin-top: 18px; gap: 6px; }
:root body .mp-feitchips li { padding: 7px 12px; font-size: 13.5px; background: color-mix(in srgb, var(--mp-open-inkt) 11%, transparent); }
:root body .mp-opening-knoppen { margin-top: 22px; gap: 10px; }
:root body .mp-opening .mp-knop { min-height: 48px; padding: 0 20px; font-size: 16px; }

/* het weerkaartje: een rustig vlak, geen kapitalen erboven */
:root body .mp-weerkaart { position: relative; z-index: 1; padding: 20px 22px; border-radius: 18px; box-shadow: 0 18px 40px -22px rgba(1, 20, 60, .55); }
:root body .mp-weerkaart .mp-wk-kop { font-size: 14px; letter-spacing: 0; text-transform: none; }
:root body .mp-weerkaart b { margin-top: 6px; font-size: 24px; line-height: 1.12; }
:root body .mp-weerkaart .mp-wk-tekst { font-size: 15px; }
:root body .mp-weerkaart small { font-size: 12.5px; }

@media (max-width: 1023px) {
  :root body .mp-opening-onder { grid-template-columns: minmax(0, 1fr); }
  .mp-opening-route { width: 78%; right: -16%; top: 34%; opacity: .1; }
}
@media (max-width: 640px) {
  :root body .mp-opening-in { padding: 22px 16px 30px; }
  :root body .mp-opening-boven { max-width: calc(100% - 86px); min-height: 0; font-size: 14px; }
  :root body .mp-opening-sienna { top: 16px; right: 10px; height: 84px; }
  :root body .mp-opening h1 { max-width: none; margin-top: 18px; font-size: clamp(32px, 9vw, 40px); line-height: 1.05; }
  :root body .mp-kies { margin-top: 22px; }
  :root body .mp-kiesoptie { padding: 10px 8px; border-radius: 12px; }
  :root body .mp-kiesoptie b { font-size: 19px; }
  :root body .mp-kiesoptie span { font-size: 12.5px; }
  :root body .mp-opening-onder { margin-top: 22px; gap: 22px; }
  :root body .mp-opening-tekst { font-size: 16px; }
  :root body .mp-feitchips li { padding: 7px 10px; font-size: 13px; }
  :root body .mp-opening .mp-knop { width: 100%; }
  .mp-opening-route { width: 120%; right: -46%; top: 26%; }
}