/* A common grid, restrained type and one course/weather workspace. */
body .mp { font-size:17px; }
body .mp .mp-h2 { font-size:clamp(27px,2.7vw,38px); line-height:1.08; letter-spacing:-.025em; }
body .mp .mp-sectie { padding-block:48px; }
body .mp .mp-sectiekop { max-width:none; grid-template-columns:32px minmax(0,1fr); gap:12px; }
body .mp .mp-knoop { width:32px; height:32px; }
body .mp .mp-knoop svg { width:20px; height:20px; }
body .mp .mp-intro { font-size:17px; line-height:1.5; margin-top:10px; max-width:65ch; }
body .mp-opening-in { max-width:1440px; }
body .mp-opening h1 { font-size:clamp(40px,5.7vw,76px); line-height:1; }
body .mp-opening-sienna { height:clamp(120px,18vw,210px); right:5%; top:44px; }
body .mp-opening-tekst { font-size:19px; max-width:56ch; }
body .mp-opening-onder { gap:40px; }
body .mp-weerkaart { padding:20px; border-radius:16px; }
body .mp-weerkaart b { font-size:26px; }
body .mp .mp-h1 span { font-size:clamp(30px,3vw,46px); }
body .mp .mp-h1 strong { font-size:clamp(88px,10vw,148px); line-height:.9; }
body .mp .mp-held { grid-template-columns:minmax(0,1fr) auto minmax(180px,320px); align-items:center; margin-bottom:24px; }
body .mp .mp-sienna { height:176px; width:auto; }
body .mp .mp-lead { font-size:18px; }
body .mp .mp-reken { border-radius:16px; padding:24px; gap:20px; }
body .mp .mp-reken input { font-size:clamp(27px,2.6vw,38px); }
body .mp .mp-reken .mp-invoer, body .mp .mp-reken select { min-height:68px; }
body .mp .mp-reken > button[type="submit"] { min-height:68px; }
body .mp .mp-knop { font-size:16px; }
body .mp .mp-dag { margin-top:24px; }
body .mp.mp-parcours { padding-top:40px; }
body .mp-parcours-kop { max-width:none; padding:0 0 24px; }
body .mp-parcours .mp-kaartvak { height:clamp(520px,72vh,800px); border-radius:16px; overflow:hidden; }
body .mp-parcours .mp-kaartvak #stage { border-radius:16px; }
body .mp .mp-locatieuitleg { margin-top:10px; font-size:15px; color:var(--mp-zacht); }
body .mp .mp-locatieuitleg summary { cursor:pointer; width:fit-content; min-height:44px; display:flex; align-items:center; text-decoration:underline; text-underline-offset:3px; }
body .mp .mp-omgeving { border-top:1px solid var(--mp-lijn); }
body .mp .mp-omgeving-kop { display:flex; justify-content:space-between; gap:20px; align-items:center; }
body .mp .mp-omgeving-actie { font:700 15px var(--mp-tekst); color:var(--mp-blauw); min-height:48px; display:inline-flex; align-items:center; flex-shrink:0; text-underline-offset:4px; }
body .mp .mp-omgeving-tabs { display:flex; gap:8px; border-bottom:1px solid var(--mp-lijn); margin-top:24px; padding-bottom:12px; }
body .mp .mp-omgeving-tabs button { padding:12px 24px; min-height:48px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--mp-zacht); font:700 16px var(--mp-tekst); cursor:pointer; }
body .mp .mp-omgeving-tabs button[aria-selected="true"] { color:var(--mp-inkt); background:var(--mp-vertrekvlak); border-color:var(--mp-blauw); }
body .mp .mp-omgeving-tabs button:focus-visible, body .mp .mp-omgeving [role="tabpanel"]:focus-visible { outline:2px solid var(--mp-blauw); outline-offset:3px; }
body .mp .mp-omgeving[data-enhanced] > .mp-sectie { padding:24px 0 0; border:0; }
body .mp .mp-omgeving[data-enhanced] > .mp-sectie > .mp-sectiekop { display:none; }
body .mp .mp-omgeving [hidden] { display:none !important; }
body .mp .mp-omgeving .mp-weergroot { margin-top:24px; font-size:17px; }
body .mp .mp-omgeving .mp-weergroot b { font-size:38px; }
body .mp .mp-omgeving .mp-kleding { gap:16px; margin-top:24px; }
body .mp .mp-omgeving .mp-kled { padding:20px; border-radius:12px; }
body .mp .mp-omgeving .mp-kled h3 { font-size:22px; }
body .mp .mp-omgeving .mp-uren { display:none; } /* Same hourly values already appear in the time chart. */
body .mp .mp-omgeving .mp-zeker { margin-top:20px; padding:16px; border-radius:12px; }
body .mp .mp-omgeving .mp-plensblok { border-radius:12px; margin-top:20px; padding:20px; }
body .mp .mp-omgeving .mp-grootrij .mp-groot b { font-size:40px; }
body .mp .mp-omgeving .mp-groot span { font-size:17px; }
body .mp .mp-omgeving .mp-windboven { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:24px; }
body .mp .mp-omgeving .mp-windkaart { margin:0; }
body .mp .mp-omgeving .mp-hoogtekop { margin-top:0; }
body .mp .mp-omgeving .mp-hoogtekop h3 { font-size:24px; }
body .mp .mp-omgeving .mp-hgrafiek { margin-top:24px; }
body .mp .mp-omgeving .mp-hcijfers li { font-size:14px; }
@media (max-width:1279px) { body .mp-parcours-kop { padding-inline:24px; } body .mp.mp-parcours .mp-kaartvak { border-radius:0; } }
@media (max-width:900px) {
 body .mp .mp-held { grid-template-columns:minmax(0,1fr); }
 body .mp .mp-sienna { height:112px; top:0; }
 body .mp .mp-omgeving .mp-windboven { grid-template-columns:minmax(0,1fr); }
 body .mp .mp-omgeving .mp-grootrij { gap:28px; }
 body .mp .mp-omgeving .mp-grootrij .mp-groot b { font-size:52px; }
}
@media (max-width:639px) {
 body .mp { font-size:16px; }
 body .mp .mp-sectie { padding-block:32px; }
 body .mp-opening h1 { font-size:clamp(34px,8.6vw,44px); }
 body .mp-opening-sienna { height:76px; top:22px; right:16px; }
 body .mp-opening-tekst { font-size:17px; }
 body .mp .mp-h1 span { font-size:30px; }
 body .mp .mp-h1 strong { font-size:88px; }
 body .mp .mp-held { padding-right:0; }
 body .mp .mp-sienna { height:96px; }
 body .mp .mp-omgeving-kop { display:block; }
 body .mp .mp-omgeving-tabs { gap:4px; }
 body .mp .mp-omgeving-tabs button { flex:1; padding:12px 8px; }
 body .mp .mp-reken { padding:18px; }
 body .mp-parcours-kop { padding-inline:16px; }
 body .mp-parcours .mp-kaartvak { height:72svh; min-height:480px; }
 body .mp .mp-omgeving .mp-hoogtekop h3 { font-size:23px; }
 body .mp .mp-omgeving .mp-plensblok { padding:16px; }
}
@media print { .mp-omgeving-tabs, .mp-omgeving-actie { display:none !important; } body .mp .mp-omgeving [hidden] { display:block !important; } }

body .mp .prp-shared-control { display:grid; grid-template-columns:1fr auto; gap:4px 16px; margin-top:16px; font-size:14px; }
body .mp .prp-shared-control .prp-position { font-size:18px; }
body .mp .prp-shared-control input { min-height:48px; grid-column:1 / -1; }
body .mp #wind .prp-details { grid-template-columns:repeat(3,minmax(0,1fr)); }
body .mp #wind .mp-grootrij { margin-top:24px; }

body .mp .mp-omgeving:not([data-enhanced]) .mp-omgeving-tabs { display:none; }

body .mp-weerkaart .mp-wk-link { display:inline-flex; align-items:center; min-height:48px; color:var(--mp-blauw); font:700 15px var(--mp-tekst); text-underline-offset:3px; margin-top:8px; }

body .mp .mp-omgeving[data-enhanced] #mp-windgegevens, body .mp .mp-omgeving[data-enhanced] .mp-weergroot { display:none; }
body .mp #wind .mp-grootrij { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
body .mp #wind .mp-groot span { width:auto; min-width:0; max-width:24ch; line-height:1.35; }

@media (max-width:639px) and (orientation:portrait) {
  body .mp .mp-winkels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.125fr); gap:12px; width:100%; max-width:292.5px; box-sizing:border-box; }
  body .mp .mp-winkel { min-width:0; min-height:48px; align-items:center; }
  body .mp .mp-winkel img { width:100%; height:auto; max-width:100%; }
}

/* Voorplaat van de 3D-kaart: meteen zichtbaar, vloeit weg bij het eerste echte beeld (motor.js: kaart-klaar). */
#stage .kaart-poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#stage .kaart-poster.is-geladen { opacity: 1; }
#stage.kaart-klaar .kaart-poster { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
/* met plaat geen leeg vlak met tekst, maar een klein label onderin */
#stage.heeft-poster .kaart-laden { inset: auto auto 14px 14px; place-content: start; padding: 8px 14px 8px 32px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(10, 27, 61, .12); font-size: 13px; font-weight: 700; }
#stage.heeft-poster .kaart-laden::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid rgba(2, 75, 185, .25); border-top-color: #024BB9; border-radius: 50%; animation: kaart-draai .8s linear infinite; }
@keyframes kaart-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #stage .kaart-poster, #stage.kaart-klaar .kaart-poster { transition: none; } #stage.heeft-poster .kaart-laden::before { animation: none; } }