/* I041 geo-vakman pagina — media1704 tokens, minimaal kaders, haarscheidings-scheidingslijnen */
.m1704geo { font-family: var(--font-body); color: var(--color-ink); }
/* full-bleed: de thema-contentcontainer is 720px; secties breken daaruit en geven zelf breedte */
@media (min-width: 761px) {
  .m1704geo .mg-hero, .m1704geo .mg-kern, .m1704geo .mg-toolband, .m1704geo .mg-split,
  .m1704geo .mg-breed, .m1704geo .mg-stappen-band, .m1704geo .mg-cta, .m1704geo .mg-faq, .m1704geo .mg-methode {
    width: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  }
}
.m1704geo .sr-only, .m1704geo .mg-checks legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m1704geo h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; margin: 0 0 1rem; }
.m1704geo h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 0.4rem; }
.m1704geo p { margin: 0 0 1rem; }
.m1704geo a { color: var(--color-accent); }
.m1704geo .mg-knop { display: inline-block; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; text-decoration: none; padding: 0.7rem 1.15rem; border-radius: 10px; border: 1px solid var(--color-line); background: var(--color-paper-3); color: var(--color-ink); cursor: pointer; }
.m1704geo .mg-knop:hover { border-color: var(--color-accent); }
.m1704geo .mg-knop--primair { background: var(--color-accent); border-color: var(--color-accent); color: #1a0b0f; }
.m1704geo .mg-knop--primair:hover { background: #ff6d82; border-color: #ff6d82; }
.m1704geo .mg-knop--stro { background: transparent; }

/* hero */
.m1704geo .mg-hero { background: var(--color-paper-2); border-bottom: 1px solid var(--color-line); padding: clamp(2.2rem, 5vw, 4rem) 0; }
.m1704geo .mg-hero-in, .m1704geo .mg-tool-in, .m1704geo .mg-split-in, .m1704geo .mg-breed-in, .m1704geo .mg-cta-in, .m1704geo .mg-methode-in { max-width: 1248px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
.m1704geo .mg-hero-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.m1704geo .mg-kruimel { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ink-dim); margin-bottom: 1.2rem; }
.m1704geo .mg-kruimel a { color: var(--color-ink-dim); text-decoration: none; }
.m1704geo .mg-kruimel a:hover { color: var(--color-accent); }
.m1704geo .mg-hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; margin: 0 0 1rem; }
.m1704geo .mg-lead { font-size: 1.0625rem; color: var(--color-ink); max-width: 58ch; }
.m1704geo .mg-meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ink-dim); margin-top: 1.4rem; }

/* app-vensters */
.m1704geo .mg-app, .m1704geo .mg-hero-venster, .m1704geo .mg-split-beeld { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; }
.m1704geo .mg-appbalk { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--color-line); background: var(--color-paper-2); }
.m1704geo .mg-appbalk span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-paper-3); }
.m1704geo .mg-appbalk em { font-style: normal; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-ink-dim); margin-left: 0.35rem; }
.m1704geo .mg-app-lichaam { padding: 1rem; }
.m1704geo figcaption { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-ink-dim); padding: 0.7rem 1rem 0.9rem; border-top: 1px solid var(--color-line); }

/* staafparen */
.m1704geo .mg-paar { margin-bottom: 1rem; }
.m1704geo .mg-paar:last-child { margin-bottom: 0; }
.m1704geo .mg-paar-kop { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-ink-dim); margin: 0 0 0.4rem; }
.m1704geo .mg-staven { display: flex; flex-direction: column; gap: 0.35rem; }
.m1704geo .mg-staafrij { display: grid; grid-template-columns: minmax(11rem, 15rem) 1fr; gap: 0.6rem; align-items: center; }
.m1704geo .mg-staafvisual { --w: 50%; width: var(--w); min-width: 3rem; height: 1.4rem; border-radius: 6px; display: block; }
.m1704geo .mg-staafvisual--aan { background: var(--color-accent); }
.m1704geo .mg-staafvisual--niet { background: var(--color-paper-3); border: 1px solid var(--color-line); }
.m1704geo .mg-staafvisual--aan.mg-staafvisual--score { background: #7a5560; }
.m1704geo .mg-staaf-label { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-ink); white-space: nowrap; }
.m1704geo .mg-staaf-label small { font-size: 0.7rem; color: var(--color-ink-dim); }

/* kerncijfers */
.m1704geo .mg-kern { padding: clamp(1.8rem, 4vw, 2.8rem) 0; }
.m1704geo .mg-kern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-line); border-block: 1px solid var(--color-line); }
.m1704geo .mg-kern > div { max-width: 400px; padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
.m1704geo .mg-kern > div { background: var(--color-paper); padding: 1.4rem clamp(1rem, 3vw, 2rem); }
.m1704geo .mg-kern strong { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.m1704geo .mg-kern span { display: block; margin-top: 0.35rem; font-size: 0.875rem; color: var(--color-ink-dim); max-width: 34ch; }

/* toolband */
.m1704geo .mg-toolband { background: var(--color-paper-2); border-block: 1px solid var(--color-line); padding: clamp(2.2rem, 5vw, 3.6rem) 0; scroll-margin-top: 90px; }
.m1704geo .mg-tool-intro { max-width: 68ch; color: var(--color-ink-dim); }
.m1704geo .mg-app { max-width: 760px; margin-top: 1.2rem; }
.m1704geo .mg-checks { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.55rem; }
.m1704geo .mg-checks label { display: block; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.m1704geo .mg-checks label > input { float: left; margin-right: 0.6rem; }
.m1704geo .mg-checks .mg-geg { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--color-ink-dim); font-family: var(--font-mono); }
.m1704geo .mg-checks input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--color-accent); flex: none; }
.m1704geo .mg-checks input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.m1704geo .mg-toolknoppen { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.m1704geo .mg-melding { margin: 1rem 0 0; padding: 0.85rem 1rem; border-left: 3px solid var(--color-accent); background: var(--color-paper-2); border-radius: 0 8px 8px 0; }
.m1704geo .mg-melding:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.m1704geo .mg-uitslag { margin: 1rem 0 0; padding: 0.95rem 1rem; border-left: 3px solid var(--color-accent); background: var(--color-paper-2); border-radius: 0 8px 8px 0; }
.m1704geo .mg-uitslag:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.m1704geo .mg-uitslag-teller { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.5rem; }
.m1704geo .mg-uitslag-lijst { margin: 0; padding-left: 1.1rem; }
.m1704geo .mg-uitslag-lijst li { margin-bottom: 0.4rem; font-size: 0.9375rem; }
.m1704geo .mg-toolvoet { font-size: 0.875rem; color: var(--color-ink-dim); margin-top: 1rem; }

/* splits */
.m1704geo .mg-split { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.m1704geo .mg-split:nth-of-type(even) { background: var(--color-paper-2); }
.m1704geo .mg-split-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.m1704geo .mg-split--rev .mg-split-tekst { order: 2; }
.m1704geo .mg-split--rev .mg-split-beeld { order: 1; }
.m1704geo .mg-split-tekst p { max-width: 60ch; }

/* raster */
.m1704geo .mg-raster { display: grid; gap: 0.45rem; }
.m1704geo .mg-raster-rij { display: grid; grid-template-columns: minmax(9rem, 11.5rem) 1fr auto; gap: 0.6rem; align-items: center; }
.m1704geo .mg-raster-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-ink-dim); }
.m1704geo .mg-balkvisual { --w: 50%; width: var(--w); height: 1.1rem; border-radius: 5px; background: var(--color-accent); display: block; }
.m1704geo .mg-raster-waarde { font-size: 0.78rem; color: var(--color-ink); font-family: var(--font-mono); }

/* breed + mix */
.m1704geo .mg-breed { padding: clamp(2.2rem, 5vw, 3.6rem) 0; border-top: 1px solid var(--color-line); }
.m1704geo .mg-breed > h2 { max-width: 1248px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
.m1704geo .mg-breed-in { max-width: 820px; }
.m1704geo .mg-mix-balk { display: flex; border-radius: 8px; overflow: hidden; min-height: 1.3rem; }
.m1704geo .mg-mix-deel { --w: 30%; width: var(--w); display: block; }
.m1704geo .mg-mix-deel--maps { background: var(--color-accent); }
.m1704geo .mg-mix-deel--eigen { background: #7a5560; }
.m1704geo .mg-mix-deel--plat { background: var(--color-paper-3); }
.m1704geo .mg-mix-deel--onbekend { background: #4d3d47; }
.m1704geo .mg-mix-legenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding: 0.7rem 1rem; font-size: 0.8125rem; color: var(--color-ink); }
.m1704geo .mg-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: -1px; }
.m1704geo .mg-dot--maps { background: var(--color-accent); }
.m1704geo .mg-dot--eigen { background: #7a5560; }
.m1704geo .mg-dot--plat { background: var(--color-paper-3); border: 1px solid var(--color-line); }
.m1704geo .mg-dot--onbekend { background: #4d3d47; }
.m1704geo .mg-mix { border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; margin: 0 0 1.2rem; }
.m1704geo .mg-mix figcaption { border-top: 1px solid var(--color-line); }

/* stappen */
.m1704geo .mg-stappen-band { background: var(--color-paper-2); border-block: 1px solid var(--color-line); padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.m1704geo .mg-stappen-band > h2 { max-width: 1248px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
.m1704geo .mg-stappen { max-width: 1248px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.m1704geo .mg-stap { border-top: 2px solid var(--color-accent); padding-top: 0.8rem; }
.m1704geo .mg-stap-nr { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-accent); }
.m1704geo .mg-stap-nr::before { content: "stap "; color: var(--color-ink-dim); }
.m1704geo .mg-stap p { font-size: 0.9rem; }
.m1704geo .mg-stap-bron { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-ink-dim); }

/* mythes-lijst */
.m1704geo .mg-mythes p { font-size: 0.9rem; margin-bottom: 0.75rem; padding-left: 0.9rem; border-left: 2px solid var(--color-paper-3); }
.m1704geo .mg-mythes p:last-child { margin-bottom: 0; }
.m1704geo .mg-mythes b { color: var(--color-ink); }

/* cta */
.m1704geo .mg-cta { background: var(--color-accent); color: #1a0b0f; padding: clamp(2.4rem, 5vw, 3.8rem) 0; text-align: center; }
.m1704geo .mg-cta-zin { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.3; max-width: 44ch; margin: 0 auto 1.4rem; }
.m1704geo .mg-cta .mg-knop { background: #1a0b0f; border-color: #1a0b0f; color: var(--color-ink); }
.m1704geo .mg-cta .mg-knop:hover { background: #2b1118; border-color: #2b1118; }

/* faq */
.m1704geo .mg-faq { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.m1704geo .mg-faq > h2 { max-width: 848px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
.m1704geo .mg-faq details { max-width: 848px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--color-line); }
.m1704geo .mg-faq details:last-of-type { border-bottom: 1px solid var(--color-line); }
.m1704geo .mg-faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; padding: 1rem 0; list-style: none; position: relative; padding-right: 2rem; }
.m1704geo .mg-faq summary::-webkit-details-marker { display: none; }
.m1704geo .mg-faq summary::after { content: "+"; position: absolute; right: 0; top: 0.95rem; font-family: var(--font-mono); color: var(--color-accent); }
.m1704geo .mg-faq details[open] summary::after { content: "-"; }
.m1704geo .mg-faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.m1704geo .mg-faq details p { padding-bottom: 1.1rem; max-width: 68ch; }

/* methodenoot */
.m1704geo .mg-methode { background: var(--color-paper-2); border-top: 1px solid var(--color-line); padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.6rem, 5vw, 4rem); }
.m1704geo .mg-methode > h2, .m1704geo .mg-methode-in { max-width: 848px; margin-inline: auto; padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
.m1704geo .mg-methode > h2 { font-size: 1.3rem; padding-inline: clamp(1rem, 3vw, 2rem); }
.m1704geo .mg-methode-in p { font-size: 0.875rem; color: var(--color-ink-dim); margin-bottom: 0.8rem; }
.m1704geo .mg-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; margin: 0; }
.m1704geo figure.mg-feiten { border-radius: 14px; }
.m1704geo .mg-feiten figcaption, .m1704geo figure.mg-feiten figcaption { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-ink-dim); padding: 0.6rem 1rem; border-top: 1px solid var(--color-line); }
.m1704geo .mg-feit { background: var(--color-paper-2); padding: 0.9rem 1rem; }
.m1704geo .mg-feit-k { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.m1704geo .mg-feit-w { display: block; font-family: var(--font-display); font-weight: 600; color: var(--color-accent); margin-top: 0.2rem; }
.m1704geo .mg-feit-b { display: block; font-size: 0.8125rem; color: var(--color-ink-dim); margin-top: 0.25rem; }
.m1704geo .mg-methode-lijst { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.m1704geo .mg-methode-lijst li { font-size: 0.875rem; color: var(--color-ink-dim); margin-bottom: 0.7rem; }
.m1704geo .mg-methode-lijst b { color: var(--color-ink); font-weight: 600; }
.m1704geo .mg-methode-in b { color: var(--color-ink); font-weight: 600; }

/* motion: alleen staafgroei en uitslag-verschijnen, alles stil bij reduce */
@media (prefers-reduced-motion: no-preference) {
  .m1704geo .mg-staafvisual, .m1704geo .mg-balkvisual, .m1704geo .mg-mix-deel { animation: mg-groei 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .m1704geo .mg-uitslag:not([hidden]) { animation: mg-verschijn 300ms ease-out both; }
}
@keyframes mg-groei { from { width: 12%; } to { width: var(--w); } }
@keyframes mg-verschijn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* mobiel */
@media (max-width: 860px) {
  .m1704geo .mg-hero-in, .m1704geo .mg-split-in { grid-template-columns: 1fr; }
  .m1704geo .mg-split--rev .mg-split-tekst { order: 1; }
  .m1704geo .mg-split--rev .mg-split-beeld { order: 2; }
  .m1704geo .mg-kern { grid-template-columns: 1fr; }
  .m1704geo .mg-kern > div { max-width: none; }
  .m1704geo .mg-stappen { grid-template-columns: 1fr; gap: 1.5rem; }
  .m1704geo .mg-staafrij { grid-template-columns: 1fr; gap: 0.2rem; }
  .m1704geo .mg-staaf-label { white-space: normal; font-size: 0.8125rem; }
  .m1704geo .mg-feiten { grid-template-columns: 1fr; }
  .m1704geo .mg-raster-rij { grid-template-columns: 1fr auto; gap: 0.2rem 0.5rem; }
  .m1704geo .mg-raster-rij .mg-balkvisual { grid-column: 1 / -1; }
}