/* Mijn omgeving – opmaak in de huisstijl van de website (Montserrat, kleuren, merkcombinatie).
   Geen goedgekeurd ontwerp: visueel ter goedkeuring. Geen stijlen in de pagina zelf (CSP). */
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/montserrat-variabel/montserrat-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/montserrat-variabel/montserrat-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.mo { margin: 0; background: #FFFFFF; color: #0D1B2A; font-family: 'Montserrat', Verdana, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.65; }
.mo *, .mo *::before, .mo *::after { box-sizing: border-box; }
.mo a { color: #0D1B2A; text-underline-offset: 3px; }
.mo h1, .mo h2, .mo h3, .mo h4, .mo p { margin: 0; }
.mo .testband { margin: 0; padding: 6px 16px; background: #FFF3CD; border-bottom: 1px solid #E0C060; font-size: 13px; font-weight: 600; color: #3D4955; }
.mo sup.vl { color: #B07E00; font-weight: 700; margin-left: 1px; }
.mo .klein { font-size: 14px; font-weight: 400; }
.mo-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid #DDE2E7; background: #FFFFFF; }
.mo-merk { display: inline-flex; min-height: 44px; align-items: center; }
.mo-merk img { display: block; width: 314px; height: auto; max-width: 62vw; }
.mo-nav { display: flex; gap: 20px; }
.mo-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; }
.mo-main { max-width: 760px; margin: 0 auto; padding: 32px 20px 72px; }
.mo-voet { background: #0D1B2A; color: #FFFFFF; padding: 28px 24px; font-size: 14px; }
.mo-voet a { color: #FFFFFF; }
.mo-context { display: flex; flex-direction: column; gap: 32px; }
.mo-boven { font-size: 14px; font-weight: 600; color: #3D4955; letter-spacing: .02em; }
.mo-zoekcode { font-variant-numeric: tabular-nums; }
.mo h1 { font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.mo h2 { font-size: 26px; line-height: 1.25; font-weight: 700; margin-bottom: 10px; text-wrap: balance; }
.mo h3 { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3D4955; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.mo h4 { font-size: 14px; font-weight: 700; letter-spacing: .06em; margin-bottom: 4px; }
.mo-blok { display: flex; flex-direction: column; gap: 12px; }
.mo-blok + .mo-blok { padding-top: 32px; border-top: 1px solid #DDE2E7; }
.mo-lead { font-size: 21px; line-height: 1.5; font-weight: 600; }
.mo-zacht { color: #3D4955; font-size: 15px; }
.mo-melding { background: #EEF4FB; border-radius: 8px; padding: 12px 16px; font-size: 15px; }
.mo-kernvraag { font-size: 20px; font-weight: 700; line-height: 1.4; padding-left: 16px; border-left: 4px solid #2E7D32; }
.mo-situatieduiding { color: #3D4955; }
.mo-werkvorm { background: #F3F5F7; border-radius: 12px; padding: 24px; border: 1px solid #DDE2E7; }
.mo-blok.mo-werkvorm + .mo-blok, .mo-blok + .mo-blok.mo-werkvorm { margin-top: 0; }
.mo-knop { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 52px; padding: 0 26px; border-radius: 8px; border: 1px solid #0D1B2A; background: #0D1B2A; color: #FFFFFF !important; font: 600 17px 'Montserrat', Verdana, sans-serif; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mo-knop:hover { background: #22344A; }
.mo-knop.mo-licht { background: #FFFFFF; color: #0D1B2A !important; }
.mo-knop.mo-licht:hover { background: #F3F5F7; }
.mo-knop.mo-uit { background: #8A949E; border-color: #8A949E; cursor: not-allowed; }
.mo-knop:focus-visible, .mo a:focus-visible, .mo summary:focus-visible { outline: 3px solid #1565C0; outline-offset: 3px; }
.mo-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.mo-knoppen form { margin: 0; }
.mo-lagen { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.mo-laag { padding-left: 14px; border-left: 4px solid #DDE2E7; }
.mo-laag.l1 { border-color: #2E7D32; } .mo-laag.l2 { border-color: #F4B400; } .mo-laag.l3 { border-color: #E53935; } .mo-laag.l4 { border-color: #1565C0; }
.mo-stip { width: 12px; height: 12px; border-radius: 50%; background: #8A949E; flex: 0 0 12px; }
.l1 .mo-stip { background: #2E7D32; } .l2 .mo-stip { background: #F4B400; } .l3 .mo-stip { background: #E53935; } .l4 .mo-stip { background: #1565C0; }
.mo-laagvraag { font-weight: 600; text-transform: none; letter-spacing: 0; color: #0D1B2A; font-size: 16px; }
.mo-quick { font-weight: 700; font-size: 18px; }
.mo-diep { margin: 4px 0 0; padding-left: 20px; }
.mo-diep li { margin: 4px 0; }
.mo-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mo-route { background: #F3F5F7; border-radius: 8px; padding: 14px 16px; font-size: 15px; }
.mo-basiszin { font-style: italic; }
.mo-kernboodschap { font-weight: 600; padding: 14px 16px; border: 1px dashed #8A949E; border-radius: 8px; }
.mo-achter { border: 1px solid #DDE2E7; border-radius: 10px; padding: 0 16px; }
.mo-achter[open] { padding-bottom: 16px; }
.mo-achter summary { min-height: 52px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.mo-achter > * + * { margin-top: 12px; }
.mo-spiegelzin { font-weight: 600; }
.mo-binnenkort .mo-label, .mo-label { display: inline-block; align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border: 1px dashed #8A949E; border-radius: 4px; color: #3D4955; }
.mo-vormen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mo-vorm { border: 1px solid #DDE2E7; border-radius: 10px; padding: 16px; }
.mo-concept { font-size: 12px; font-weight: 700; color: #B00020; text-transform: none; letter-spacing: 0; }
.mo-beeld { width: 100%; height: auto; border-radius: 8px; }
.plaatshouder { border: 2px dashed #E0C060; background: #FFFBEA; border-radius: 8px; padding: 12px 14px; font-size: 15px; color: #3D4955; }
.mo-terug { margin-bottom: 16px; font-weight: 600; }
.mo-terug a { display: inline-flex; min-height: 44px; align-items: center; }
.mo-kaartregel { border: 1px solid #DDE2E7; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mo-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.mo-tabel th, .mo-tabel td { border-bottom: 1px solid #DDE2E7; padding: 8px 6px; text-align: left; vertical-align: top; }
/* Lange bestandsnamen en codes mogen afbreken: anders wordt de pagina op een telefoon breder dan het scherm. */
.mo-tabel td, .mo-tabel th, code { overflow-wrap: anywhere; word-break: break-word; }
.mo-ok { color: #2E7D32; font-weight: 700; } .mo-nee { color: #B00020; font-weight: 700; }
.mo-voorbeeld { display: grid; grid-template-columns: 390px 1fr; gap: 20px; align-items: start; }
.mo-voorbeeld iframe { width: 100%; height: 1400px; border: 1px solid #8A949E; border-radius: 8px; background: #FFFFFF; }
.mo-voorbeeld .mo-tel iframe { width: 390px; }
.mo-main.breed { max-width: 1400px; }
.mo-form-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mo input[type=text], .mo textarea { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid #8A949E; border-radius: 6px; }
@media (max-width: 700px) {
  body.mo { font-size: 16px; }
  .mo h1 { font-size: 32px; }
  .mo h2 { font-size: 23px; }
  .mo-kop { padding: 10px 16px; }
  .mo-main { padding: 24px 16px 56px; }
  .mo-routes { grid-template-columns: 1fr; }
  .mo-knop { width: 100%; }
  .mo-knoppen form { width: 100%; }
  .mo-voorbeeld { grid-template-columns: 1fr; }
}
/* Werkvorm: opmaak van Probeer het zelf 2.5 (website src/styles/probeer.css), ongewijzigd, plus de kaartregel en 'Verder onderzoeken'. */
.phz {
  --ink: #0D1B2A; --ink-2: #3D4955; --line: #DDE2E7; --tint: #F3F5F7; --paper: #FFFFFF; --hover: #22344A; --dash: #8A949E;
  --l1: #2E7D32; --l2: #F4B400; --l3: #E53935; --l4: #1565C0;
  --font: 'Montserrat', Verdana, 'Segoe UI', sans-serif;
  color-scheme: light;
  background: var(--tint); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.65;
  padding-inline: 16px; padding-block: 40px 72px;
}
.phz * { box-sizing: border-box; }
.phz [hidden] { display: none !important; }
.phz-vel { max-width: 720px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 40px 44px 36px; }
.phz h1, .phz h2 { margin: 0; letter-spacing: -.01em; text-wrap: balance; line-height: 1.2; }
.phz h1 { font-size: 44px; font-weight: 700; }
.phz h2 { font-size: 30px; font-weight: 700; }
.phz p { margin: 0; text-wrap: pretty; }
.phz [tabindex="-1"]:focus { outline: none; }
.phz-stack { display: flex; flex-direction: column; gap: 20px; }
.phz-lead { font-size: 20px; line-height: 1.6; }
.phz-zacht { color: var(--ink-2); font-size: 16px; }
.phz-model { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 20px 0; }
.phz-model img { width: 180px; height: 180px; flex: 0 0 auto; }
.phz-lagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 260px; }
.phz-lagen li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.phz-stip { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; }
.phz-s1 { background: var(--l1); } .phz-s2 { background: var(--l2); } .phz-s3 { background: var(--l3); } .phz-s4 { background: var(--l4); }
.phz label { font-weight: 600; font-size: 16px; }
.phz-veld { display: flex; flex-direction: column; gap: 8px; }
.phz input[type=text], .phz textarea { width: 100%; font: inherit; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--paper); border: 1px solid var(--dash); border-radius: 8px; padding: 12px 14px; }
.phz textarea { min-height: 168px; resize: vertical; }
.phz input[type=text]:focus-visible, .phz textarea:focus-visible { outline: 3px solid var(--l4); outline-offset: 1px; border-color: var(--ink); }
.phz-knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.phz-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: #FFFFFF; font: 600 17px var(--font); cursor: pointer; }
.phz-knop:hover { background: var(--hover); }
.phz-knop.phz-licht { background: var(--paper); color: var(--ink); }
.phz-knoppen .phz-knop { min-width: 164px; }
.phz-knop.phz-licht:hover { background: var(--tint); }
.phz-tekstknop { min-height: 48px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 600 16px var(--font); text-decoration: underline; text-underline-offset: 6px; cursor: pointer; }
.phz button:focus-visible { outline: 3px solid var(--l4); outline-offset: 3px; }
.phz-voortgang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.phz-voortgang span { height: 6px; border-radius: 3px; background: var(--line); }
.phz-voortgang .phz-aan.phz-s1 { background: var(--l1); } .phz-voortgang .phz-aan.phz-s2 { background: var(--l2); } .phz-voortgang .phz-aan.phz-s3 { background: var(--l3); } .phz-voortgang .phz-aan.phz-s4 { background: var(--l4); }
.phz-laagnaam { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.phz-laagnaam .phz-laagnr { text-transform: none; letter-spacing: 0; }
.phz-vraag { font-size: 30px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.phz label.phz-vraag { font-size: 30px; font-weight: 700; }
.phz-toelichting { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.phz-situatie-kort { padding: 14px 16px; background: var(--tint); border-radius: 8px; font-size: 15px; color: var(--ink-2); }
.phz-situatie-kort strong { color: var(--ink); }
/* Herstelpunt 2 (F10, akkoord 17 okt 10:00): woorden zonder spaties breken binnen de breedte af, zoals al bij de antwoorden
   in het overzicht. Gewone tekst met spaties verandert niet. */
.phz-situatie-kort, #phz-ovmeta { overflow-wrap: anywhere; }
.phz-overzicht { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.phz-blok { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.phz-blok h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.phz-blok .phz-q { font-weight: 700; font-size: 18px; }
.phz-blok .phz-a { white-space: pre-wrap; overflow-wrap: anywhere; }
.phz-leeg { color: var(--ink-2); font-style: italic; }
.phz-reflectie { padding: 20px; border: 1px dashed var(--dash); border-radius: 10px; }
.phz label.phz-reflectievraag { font-weight: 600; font-size: 17px; }
.phz-reflectie textarea { min-height: 120px; }
.phz-melding { font-size: 15px; color: var(--ink-2); }
.phz-opslagmelding:not(:empty) { margin-bottom: 20px; }
.phz-bevestig { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); }
.phz-knop.phz-knop--klein { min-height: 48px; }
.phz-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.phz-privacy svg { flex: 0 0 20px; margin-top: 3px; }
.phz-bewaren { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); }
.phz-bewaren .phz-privacy { color: var(--ink); }
.phz label.phz-vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; cursor: pointer; }
.phz-vink input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 20px; }
.phz-zacht.phz-klein { font-size: 14px; margin: 0 0 0 30px; }
@media (max-width: 600px) {
  .phz { font-size: 17px; padding-block: 24px 48px; }
  .phz-vel { padding: 28px 20px 24px; border-radius: 10px; }
  .phz h1 { font-size: 34px; }
  .phz h2, .phz-vraag, .phz label.phz-vraag { font-size: 25px; }
  .phz-lead { font-size: 18px; }
  .phz-model img { width: 150px; height: 150px; }
  .phz-knop { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) { .phz-stap { animation: phz-in .25s ease-out; } @keyframes phz-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
.phz-kaart { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.phz-kernvraag { font-size: 19px; font-weight: 700; line-height: 1.4; padding-left: 14px; border-left: 4px solid var(--l1); }
.phz-verder { border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; font-size: 16px; }
.phz-verder summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.phz-verder ul { margin: 0 0 12px; padding-left: 20px; }
.phz-verder li { margin: 4px 0; }
.mo-main .phz { margin: 0 -20px; border-radius: 12px; }
@media (max-width: 700px) { .mo-main .phz { margin: 0 -16px; } }
/* Formulierschermen (registreren, inloggen, code, meldingen) – teksten 1–11 ongewijzigd. */
.mo-formulier { max-width: 560px; }
.mo-formulier h1 { font-size: 32px; margin-bottom: 12px; }
.mo-formulier p { margin: 10px 0; }
.mo-formulier form { margin: 16px 0; }
.mo-formulier form label { display: block; margin: 14px 0; font-weight: 600; font-size: 16px; }
.mo-formulier input[type=email], .mo-formulier input[name=voornaam], .mo-formulier input[name=code] { font: inherit; font-size: 17px; padding: 12px 14px; width: 100%; border: 1px solid #8A949E; border-radius: 8px; font-weight: 400; margin-top: 6px; }
.mo-formulier .vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
.mo-formulier .vink input { margin-top: 5px; width: 18px; height: 18px; flex: 0 0 18px; }
.mo-formulier button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 8px; border: 1px solid #0D1B2A; background: #0D1B2A; color: #FFFFFF; font: 600 17px 'Montserrat', Verdana, sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mo-formulier button.tweede { background: #FFFFFF; color: #0D1B2A; }
.mo-formulier a.knop { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 8px; background: #0D1B2A; color: #FFFFFF; text-decoration: none; font-weight: 600; }
.mo-formulier .fout { color: #B00020; font-weight: 600; }
.mo-formulier .melding-groot { font-size: 21px; line-height: 1.45; font-weight: 600; margin: 24px 0 16px; }
.mo-formulier details { margin-top: 20px; border-top: 1px solid #DDE2E7; padding-top: 12px; }
.mo-formulier summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.mo-formulier .technisch { color: #666; font-size: 13px; }
.mo-formulier table { border-collapse: collapse; width: 100%; font-size: 14px; }
.mo-formulier td, .mo-formulier th { border: 1px solid #DDE2E7; padding: 6px; text-align: left; }
@media (max-width: 700px) { .mo-formulier button { width: 100%; } }
@media (max-width: 700px) {
  .mo-kop { flex-wrap: wrap; gap: 4px 12px; }
  .mo-merk img { width: 210px; }
  .mo-nav { gap: 14px; }
  .mo-nav a { font-size: 14px; }
}

/* Bediening onder de contextpagina: duidelijk gescheiden van de inhoud, Mijn pagina als knop (geen los onderstreept woord). */
.mo-bediening { margin-top: 32px; padding-top: 32px; border-top: 1px solid #DDE2E7; }

/* ---- Structuur 0–8 (fase H1): Entree, kaarten, neutrale beeldplaatshouder ---- */
.mo-entree { display: grid; gap: 20px; }
.mo-hero { margin: 0; }
.mo-hero .mo-beeld, .mo-hero .mo-beeldplaats { aspect-ratio: 16 / 9; object-fit: cover; }
.mo-entree-B { grid-template-columns: 1fr; }
@media (min-width: 900px) { .mo-entree-B { grid-template-columns: 1fr 1fr; align-items: center; } .mo-entree-B .mo-hero .mo-beeld, .mo-entree-B .mo-hero .mo-beeldplaats { aspect-ratio: 4 / 3; } }
.mo-entree-C { position: relative; }
.mo-entree-C .mo-hero .mo-beeld, .mo-entree-C .mo-hero .mo-beeldplaats { aspect-ratio: 16 / 10; min-height: 320px; }
@media (min-width: 700px) {
  .mo-entree-C .mo-entreetekst { position: absolute; left: 24px; right: 24px; bottom: 24px; max-width: 560px; background: rgba(13, 27, 42, .82); color: #FFFFFF; border-radius: 8px; padding: 20px 24px; }
  .mo-entree-C .mo-entreetekst h2, .mo-entree-C .mo-entreetekst p { color: #FFFFFF; }
  .mo-entree-C .mo-entreetekst .mo-knop { background: #FFFFFF; color: #0D1B2A !important; border-color: #FFFFFF; }
  .mo-entree-C .plaatshouder { color: #3D4955; }
}
.mo-entreetekst { display: flex; flex-direction: column; gap: 12px; }
.mo-introkop { margin: 0; }
.mo-beeldplaats { width: 100%; border-radius: 8px; background: #E6EAEE; display: flex; align-items: flex-end; justify-content: flex-end; aspect-ratio: 16 / 9; }
.mo-beeldplaats span { font-size: 12px; color: #5A6672; padding: 6px 10px; }
.mo-paginanav { padding: 0; }
.mo-paginanav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.mo-paginanav a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 14px; border: 1px solid #DDE2E7; border-radius: 22px; color: #0D1B2A; text-decoration: none; font-weight: 600; font-size: 16px; background: #FFFFFF; }
.mo-paginanav a:hover { background: #F3F5F7; }
.mo-navkop { font-size: 14px; margin: 0 0 8px; letter-spacing: .06em; text-transform: uppercase; }
.mo-kaarten2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .mo-kaarten2 { grid-template-columns: 1fr 1fr; } }
.mo-vormkaart { display: flex; flex-direction: column; gap: 10px; border: 1px solid #DDE2E7; border-radius: 10px; padding: 18px; background: #FFFFFF; }
.mo-vormkaart h3 { margin: 0; font-size: 19px; }
.mo-vormkaart p { margin: 0; }
.mo-kaartbeeld { aspect-ratio: 16 / 9; object-fit: cover; }
.mo-soortlabel { font-size: 12px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3D4955; }
.mo-voorbeeld-item + .mo-voorbeeld-item { padding-top: 20px; border-top: 1px solid #DDE2E7; }
.mo-blok[id] { scroll-margin-top: 16px; }
/* ---- Werkruimte AI-assistentie (beheer) ---- */
.mo-werkruimtes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.mo-werkruimtes a, .mo-werkruimtes span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #DDE2E7; border-radius: 6px; text-decoration: none; color: #0D1B2A; font-weight: 600; font-size: 15px; background: #FFFFFF; }
.mo-werkruimtes .mo-actief { background: #0D1B2A; color: #FFFFFF; border-color: #0D1B2A; }
.mo-ai { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1100px) { .mo-ai { grid-template-columns: minmax(320px, 2fr) 3fr; align-items: start; } }
.mo-ai-links, .mo-ai-rechts { display: flex; flex-direction: column; gap: 16px; }
.mo-ai textarea, .mo-ai input[type=text] { width: 100%; font: inherit; font-size: 16px; border: 1px solid #8A949E; border-radius: 8px; padding: 10px 12px; box-sizing: border-box; }
.mo-ai fieldset { border: 1px solid #DDE2E7; border-radius: 8px; padding: 10px 14px; margin: 0; }
.mo-ai legend { font-weight: 600; font-size: 15px; }
.mo-ai label { font-size: 15px; display: flex; gap: 8px; align-items: center; min-height: 32px; }
.mo-ronde { border-left: 3px solid #DDE2E7; padding: 4px 0 4px 12px; font-size: 15px; }
.mo-ronde.mo-jij { border-color: #1565C0; }
.mo-ronde.mo-ai-ronde { border-color: #2E7D32; }
.mo-ronde p { margin: 4px 0; }
.mo-gk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mo-beeldplaats { max-width: 100%; }
@media (max-width: 699px) { .mo-entree-C .mo-hero .mo-beeldplaats { aspect-ratio: auto; height: 320px; } }

/* ---- Herstelronde H1b (akkoord René 29 okt 2026 12:58): uitklapblokken, beelden per plaatsing, praktijkraster ---- */
.mo-verder { display: flex; flex-direction: column; gap: 12px; }
.mo-verderkop { margin: 0 0 4px; }
.mo-verder .mo-blok + .mo-blok { padding-top: 0; border-top: 0; }
.mo-uitklap { border: 1px solid #DDE2E7; border-radius: 10px; background: #FFFFFF; gap: 0; }
.mo-uitklapkop { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 18px; }
summary.mo-uitklapkop { cursor: pointer; list-style: none; border-radius: 10px; }
summary.mo-uitklapkop::-webkit-details-marker { display: none; }
summary.mo-uitklapkop::after { content: ''; flex: none; width: 12px; height: 12px; margin-right: 4px; border-right: 2px solid #0D1B2A; border-bottom: 2px solid #0D1B2A; transform: rotate(45deg) translateY(-3px); }
details[open] > summary.mo-uitklapkop::after { transform: rotate(-135deg) translateY(-3px); }
summary.mo-uitklapkop:hover { background: #F3F5F7; }
.mo summary:focus-visible, .mo a:focus-visible, .mo button:focus-visible { outline: 3px solid #1565C0; outline-offset: 2px; }
.mo-uitklaptitels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mo .mo-uitklaptitel { font-size: 21px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #0D1B2A; margin: 0; display: block; }
.mo-ondertitel { display: block; color: #3D4955; font-size: 15px; line-height: 1.45; }
.mo-uitklapinhoud { display: flex; flex-direction: column; gap: 16px; padding: 4px 18px 20px; }
.mo-binnenkort .mo-uitklapkop { color: #3D4955; }
.mo-binnenkort .mo-label { flex: none; }
.mo-inleiding { display: grid; gap: 14px; }
@media (min-width: 760px) { .mo-inleiding.mo-metbeeld { grid-template-columns: 5fr 6fr; align-items: center; } }
.mo-inleidingtekst { display: flex; flex-direction: column; gap: 10px; }
.mo .mo-vormkaart h4, .mo .mo-rasterkaart h4 { font-size: 19px; letter-spacing: 0; margin: 0; line-height: 1.3; }
.mo-vormkaart.mo-metbeeld { padding: 0 0 18px; overflow: hidden; }
.mo-vormkaart.mo-metbeeld > :not(.mo-kaartbeeld) { margin-left: 18px; margin-right: 18px; }
.mo-vormkaart.mo-metbeeld > .mo-kaartbeeld { border-radius: 0; }
.mo-vormkaart.mo-werkvorm.mo-metbeeld { padding: 0 0 24px; }
/* Beeldverhouding per plaatsing (uitsnede in de URL; het vak houdt dezelfde verhouding, ook voor de plaatshouder). */
.mo-beeld { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 8px; }
.mo-v-16x9 { aspect-ratio: 16 / 9; }
.mo-v-4x3 { aspect-ratio: 4 / 3; }
.mo-v-3x2 { aspect-ratio: 3 / 2; }
.mo-v-1x1 { aspect-ratio: 1 / 1; }
/* Praktijkvoorbeelden: raster, twee kolommen op brede schermen, één op de telefoon. */
.mo-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .mo-raster { grid-template-columns: 1fr 1fr; } }
.mo-rasterkaart { display: flex; flex-direction: column; border: 1px solid #DDE2E7; border-radius: 10px; overflow: hidden; background: #FFFFFF; }
.mo-rasterkaart > .mo-kaartbeeld { border-radius: 0; }
.mo-rastertekst { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.mo-lees > summary { cursor: pointer; font-weight: 600; font-size: 15px; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.mo-lees[open] > summary { margin-bottom: 6px; }
.mo-lees p + p { margin-top: 10px; }
.mo-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mo-uitklap[id] { scroll-margin-top: 16px; }
@media (max-width: 699px) {
  .mo-uitklapkop { padding: 12px 14px; }
  .mo-uitklapinhoud { padding: 4px 14px 18px; }
  .mo .mo-uitklaptitel { font-size: 19px; }
}
/* Knop in een beeldkaart: binnen de kaartmarge blijven (op de telefoon volle breedte minus marge). */
.mo-vormkaart.mo-metbeeld > .mo-knop, .mo-kaarttekst > .mo-knop { width: auto; max-width: calc(100% - 36px); }
@media (max-width: 700px) { .mo-vormkaart.mo-metbeeld > .mo-knop, .mo-kaarttekst > .mo-knop { align-self: stretch; } }
/* Tekstdeel van een werkvormkaart: zelfde ruimte tussen de regels als voorheen. */
.mo-kaarttekst { display: flex; flex-direction: column; gap: 10px; }
.mo-kaarttekst > .mo-knop { max-width: 100%; }
/* Eén digitale werkvorm (akkoord René 29 okt 18:31): op de computer één kaart over de volle breedte, beeld links en tekst
   met de knop rechts. Op de telefoon blijft het beeld boven de tekst. Meerdere werkvormen houden twee kolommen. */
/* Aan de slag (René 29 okt 20:51): op de computer de kaarten Alleen en Samen onder elkaar, elk met het beeld naast de tekst. */
@media (min-width: 760px) {
  .mo-aandeslag .mo-kaarten2 { grid-template-columns: 1fr; }
  .mo-digitaal .mo-kaarten2 > .mo-vormkaart.mo-metbeeld:only-child,
  .mo-aandeslag .mo-kaarten2 > .mo-vormkaart.mo-metbeeld { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; padding: 24px; }
  .mo-digitaal .mo-kaarten2 > .mo-vormkaart.mo-metbeeld:only-child > .mo-kaartbeeld,
  .mo-aandeslag .mo-kaarten2 > .mo-vormkaart.mo-metbeeld > .mo-kaartbeeld { border-radius: 8px; align-self: center; }
  .mo-digitaal .mo-kaarten2 > .mo-vormkaart.mo-metbeeld:only-child > .mo-kaarttekst,
  .mo-aandeslag .mo-kaarten2 > .mo-vormkaart.mo-metbeeld > .mo-kaarttekst { margin: 0; }
}
/* ---- Herstel AI-werkruimte (W1–W3): plaatsingen en selectie in het formulier ---- */
.mo-plaatsing { display: grid; gap: 6px; border: 1px solid #DDE2E7; border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.mo-plaatsing input[type=number] { width: 8em; font: inherit; font-size: 15px; border: 1px solid #8A949E; border-radius: 6px; padding: 6px 8px; }
.mo-plaatsing select, .mo-ai select { font: inherit; font-size: 15px; border: 1px solid #8A949E; border-radius: 6px; padding: 6px 8px; max-width: 100%; }
.mo-keuze { border-top: 1px solid #DDE2E7; padding-top: 8px; margin-top: 8px; }