/* Methode-pagina's, nachtronde 21 oktober (bouwer "methode").
   Alleen voor /methode, /methode/funderingen, de vijf funderingspagina's, /methode/labonderzoek en /methode/oura-ring.
   Bouwt op bouwstenen.css: zelfde glazen kaart, zelfde balken, ronding 16, goud alleen als accent. Alle klassen beginnen met mn-. */

/* ---------- Het podium: een echt scherm uit de app met een glazen kaart ervoor, op een donker vlak met een zachte gloed
   in de kleur van de fundering (zoals de stappen op home, maar zonder foto) ---------- */
.mn-podium { --fc: var(--gold); position: relative; min-height: 520px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(70% 60% at 72% 30%, color-mix(in srgb, var(--fc) 20%, transparent), transparent 70%),
              radial-gradient(60% 60% at 0% 100%, rgba(13, 45, 13, 0.9), transparent 70%), #031a03; }
.light .mn-podium { box-shadow: 0 30px 60px rgb(var(--ink-rgb) / calc(0.16 * var(--sh))); }
.mn-podium picture { display: contents; }
.mn-tel { position: absolute; left: calc(50% - 10px); top: 40px; width: 270px; border-radius: 34px 34px 0 0; overflow: hidden; border: 6px solid #0d1a0d; border-bottom: 0; background: #011400; box-shadow: 0 24px 48px rgb(var(--shadow-rgb) / calc(0.35 * var(--sh))); }
.mn-tel img { display: block; width: 100%; height: auto; }
.mn-podium .mn-tel { bottom: 0; }
.mn-podium .mn-tel img { position: absolute; inset: 0 0 auto 0; }

/* De glazen kaart "Je plan": vijf funderingen, de fundering van deze pagina licht op */
.mn-plan { position: absolute; left: calc(50% - 300px); bottom: 48px; width: 320px; padding: 18px 20px; border-radius: 16px; color: var(--off); background: rgb(var(--glass-rgb) / calc(0.72 + var(--glass-plus))); border: 1px solid rgb(var(--off-rgb) / 0.14); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 24px 50px rgb(var(--shadow-rgb) / calc(0.45 * var(--sh))); font-family: var(--sans); }
.mn-plan small { display: block; font-size: 12px; font-weight: 600; color: var(--off-dim); margin: 0; }
.mn-plan ul { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid rgb(var(--off-rgb) / 0.12); display: grid; gap: 10px; }
.mn-plan li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 15px; color: var(--off); white-space: nowrap; }
.mn-plan li > i:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); }
.mn-plan.een li:not(.nu) { opacity: .5; }
.mn-plan li:not(.nu) { color: var(--off-dim); }
.mn-plan li em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--badge-fg); background: var(--badge-bg); border-radius: 999px; padding: 2px 8px; }

/* ---------- Funderingspagina: "Wat het traject beoogt" met het podium ernaast ---------- */
.mn-beoogt .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mn-beoogt h2 { margin: 0 0 var(--ruimte-inhoud); text-wrap: balance; }
.mn-beoogt .list { margin: 0; }
.mn-beoogt .list li { padding: 18px 0; }
.mn-beoogt .list b { font-size: var(--fs-item); }

/* ---------- Deurkaarten in 4:5, zoals de fotokaarten op home ---------- */
.mn-deuren.bs-deuren figure { aspect-ratio: 4 / 5; }
.mn-deuren.bs-deuren.vier figure { aspect-ratio: 4 / 5; }
#funderingen .bs-kop-rij .lede, #vijf .bs-kop-rij .lede { max-width: 620px; }

/* ---------- /methode/funderingen: opening met het podium, vijf kaarten in één rij ---------- */
.hero-media.mn-hero-vis { background: radial-gradient(60% 60% at 60% 45%, rgb(var(--gold-rgb) / calc(0.14 * var(--glow))), transparent 70%), var(--bg); }
.hero-media.mn-hero-vis::after { background: linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 22%); }
.mn-hero-vis .mn-buhne { position: absolute; right: 64px; width: 560px; top: 112px; bottom: 0; }
.mn-hero-vis .mn-tel { left: auto; right: 0; top: 0; bottom: 0; width: 264px; }
.mn-hero-vis .mn-tel img { position: absolute; inset: 0 0 auto 0; }
.mn-hero-vis .mn-plan { left: 0; top: 300px; bottom: auto; }
.mn-vijf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.mn-vijf li { min-width: 0; }
.mn-vijf a { display: block; color: var(--off); text-decoration: none; }
.mn-vijf figure { position: relative; margin: 0 0 16px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--panel); }
.mn-vijf figure picture { display: contents; }
.mn-vijf img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.mn-vijf a:hover img { transform: scale(1.03); }
.mn-vijf .mn-chip { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(var(--glass-rgb) / calc(0.72 + var(--glass-plus))); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--fc); border: 1px solid rgb(var(--off-rgb) / 0.16); }
.mn-vijf .mn-chip svg { width: 18px; height: 18px; }
.mn-vijf b { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); }
.mn-vijf b svg { width: 16px; height: 16px; color: var(--accent-text); flex: none; transition: transform .25s ease; }
.mn-vijf a:hover b svg { transform: translateX(3px); }
.mn-vijf span.mn-regel { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.mn-vijf a:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 16px; }

/* ---------- Telefoon ---------- */
@media (max-width: 900px) {
  .mn-beoogt .wrap { grid-template-columns: 1fr; gap: 32px; }
  .mn-podium { min-height: 500px; }
  .mn-podium .mn-tel { left: 50%; right: auto; top: 24px; width: 200px; transform: translateX(-50%); border-width: 5px; border-radius: 28px 28px 0 0; }

  .mn-plan li { font-size: 13px; }
  .mn-vijf { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .mn-vijf li:first-child { grid-column: 1 / -1; }
  .mn-vijf li:first-child figure { aspect-ratio: 4 / 3; }
  .mn-vijf span.mn-regel { font-size: 14px; }
}
@media (max-width: 820px) {
  .hero-media.mn-hero-vis { aspect-ratio: auto; height: 420px; max-height: none; }
  .hero-media.mn-hero-vis::after { background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 80%, var(--bg) 100%); }
  .mn-hero-vis .mn-buhne { left: 20px; right: 20px; width: auto; top: 76px; }
  .mn-hero-vis .mn-tel { right: 0; width: 186px; border-width: 5px; border-radius: 28px 28px 0 0; }
  .mn-hero-vis .mn-plan { top: auto; bottom: 36px; width: 236px; padding: 12px 14px; }
  .mn-hero-vis .mn-plan li { font-size: 12.5px; }
  .mn-hero-vis .mn-plan ul { margin-top: 8px; padding-top: 8px; gap: 7px; }
  .hero:has(.mn-hero-vis) .hero-copy { margin-top: 8px; }
}

/* ---------- /methode: "Hoe we kijken" met een foto en de glazen kaart, de vier uitgangspunten als rijen ---------- */
.mn-kijken .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mn-fotokaart { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--panel); }
.mn-fotokaart picture { display: contents; }
.mn-fotokaart > picture img, .mn-fotokaart > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mn-kijken-tekst h2 { margin: 0 0 var(--ruimte-inhoud); }
.mn-rijen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.mn-rijen li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.mn-rijen .mn-ic { color: var(--accent-text); padding-top: 4px; }
.mn-rijen .mn-ic svg { width: 22px; height: 22px; display: block; }
.mn-rijen h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); margin: 0 0 8px; color: var(--off); text-wrap: balance; }
.mn-rijen p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
@media (max-width: 900px) {
  .mn-kijken .wrap { grid-template-columns: 1fr; gap: 0; }
  .mn-kijken-tekst { display: contents; }
  .mn-kijken .label { order: 0; }
  .mn-kijken h2 { order: 1; margin-bottom: var(--ruimte-inhoud); }
  .mn-kijken .mn-fotokaart { order: 2; aspect-ratio: 4 / 5; margin-bottom: 8px; }
  .mn-kijken .mn-rijen { order: 3; border-top: 0; }
  .mn-rijen li { padding: 20px 0; gap: 14px; }
  .mn-rijen p { font-size: 16px; }
}

/* ---------- Labonderzoek ---------- */
/* opening: de buisjes heel in beeld */
.hero-media.mn-labhero img { object-position: 50% 88%; }
/* "Wat we onderzoeken": het rapport en de intake als glazen kaarten op het podium (geen tweede buisjesfoto) */

@media (min-width: 901px) { #onderzoek .wrap.bs-twee-kol { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
/* "In drie stappen": geen kaart in kaart. Het scherm staat direct op het vlak, het nummer zonder stip, de coach naast zijn naam */
.mn-stappen .bs-wanneer::before { display: none; }
.mn-check { width: min(100%, 280px); font-family: var(--sans); }
.mn-check small { display: block; font-size: 13px; font-weight: 600; color: var(--off-dim); margin-bottom: 14px; }
.mn-check .bs-check { gap: 12px; }
.mn-check .bs-check li { font-size: 15px; color: var(--off); }
.mn-stappen .mn-check .bs-check li.af svg { width: 20px; height: 20px; }

/* "Wat je eraan hebt": de lijst naast het podium */
.mn-waarde .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mn-waarde h2 { text-wrap: balance; margin-bottom: var(--ruimte-inhoud); }
.mn-waarde .list { margin: 0; }
.mn-waarde .list li { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
.mn-waarde .list b { font-size: var(--fs-item); }
/* De twee kaarten: gelijke hoogte, kop op kaartmaat */
#regels .wrap { align-items: stretch; }
#regels .wrap > div h2 { font-size: var(--fs-stap); line-height: var(--lh-stap); margin-bottom: var(--ruimte-lede); }

/* ---------- Oura Ring ---------- */
.mn-meet .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mn-meet .mn-podium { min-height: 560px; }
.mn-meet .mn-podium .mn-tel { left: 50%; right: auto; transform: translateX(-50%); top: 48px; width: 300px; }
.mn-meet h2 { margin-bottom: var(--ruimte-inhoud); }
.mn-zeven { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--light-line); }
.mn-zeven li { display: grid; gap: 4px; align-content: start; padding: 16px 0; border-bottom: 1px solid var(--light-line); }
.mn-zeven b { font-family: var(--sans); font-weight: 500; font-size: var(--fs-item); line-height: var(--lh-item); color: var(--light-ink); }
.mn-zeven span { font-size: 15px; line-height: 1.45; color: var(--light-muted); }
@media (min-width: 901px) { .mn-zien .wrap.bs-twee-kol { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; } }

@media (max-width: 900px) {

  .mn-waarde .wrap, .mn-meet .wrap { grid-template-columns: 1fr; gap: 32px; }
  .mn-meet .mn-podium { min-height: 460px; }
  .mn-meet .mn-podium .mn-tel { width: 240px; top: 32px; }
  .mn-zeven { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .mn-zeven span { font-size: 14px; }
}

/* Telefoon: kop, dan het beeld, dan de lijst (het eerste wat je na de opening ziet is beeld) */
@media (max-width: 900px) {
  .mn-beoogt .wrap, .mn-waarde .wrap, .mn-meet .wrap { gap: 0; }
  .mn-beoogt .wrap > div:not(.mn-podium), .mn-waarde .wrap > div:not(.mn-podium), .mn-meet .wrap > div:not(.mn-podium) { display: contents; }
  .mn-beoogt .label, .mn-waarde .label, .mn-meet .label { order: 0; }
  .mn-beoogt h2, .mn-waarde h2, .mn-meet h2 { order: 1; margin-bottom: var(--ruimte-inhoud); }
  .mn-beoogt .mn-podium, .mn-waarde .mn-podium, .mn-meet .mn-podium { order: 2; margin-bottom: 8px; }
  .mn-beoogt .list, .mn-waarde .list, .mn-meet .mn-zeven { order: 3; }
  .mn-beoogt .list li:first-child, .mn-waarde .list li:first-child { border-top: 0; }
  .mn-meet .mn-zeven { border-top: 0; }
}
@media (max-width: 900px) {
  /* de foto bij "Hoe we kijken": de handen en de ring boven de glazen kaart */
  .mn-kijken .mn-fotokaart { aspect-ratio: 3 / 4; }
  .mn-kijken .mn-fotokaart > picture img, .mn-kijken .mn-fotokaart > img { object-position: center 70%; }
  /* drie deurkaarten: liggend, niet drie keer een vol scherm */
  .mn-deuren.bs-deuren:not(.vier) figure { aspect-ratio: 16 / 10; }
}

/* Oura, je gegevens: de drie feiten naast elkaar, elk met een teken */
.mn-gegevens .wrap { display: block; }
.mn-gegevens .bs-kop { margin-bottom: var(--ruimte-inhoud); }
.mn-feiten { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mn-feiten li { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line-2); }
.mn-feiten .mn-ic { color: var(--accent-text); }
.mn-feiten .mn-ic svg { width: 24px; height: 24px; display: block; }
.mn-feiten p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--off); max-width: 34ch; }
@media (max-width: 900px) { .mn-feiten { grid-template-columns: 1fr; gap: 0; } .mn-feiten li { grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 16px 0; } .mn-feiten p { font-size: 16px; } }
/* Oura, "Dezelfde data": op de telefoon alleen de grafieken uit het venster, groot genoeg om te lezen */
/* Oura, "Dezelfde data": op de telefoon het datascherm uit de app in plaats van het brede venster (te klein om te lezen) */

@media (max-width: 900px) {
  .mn-zien .bs-venster { display: none; }

}

/* Verder lezen met drie deuren: kop links, drie kaarten rechts (compact, niet drie schermvullende foto's) */
@media (min-width: 901px) {
  .mn-verder .wrap { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .mn-verder .bs-kop-rij { margin: 0; }
  .mn-verder .bs-kop-rij h2 { text-wrap: balance; }
  .mn-verder .bs-deuren { gap: 20px; }
  .mn-verder .bs-deuren span { font-size: 14px; line-height: 1.45; }
}
/* /methode: het bospad onder "Hoe we kijken" */
.mn-kijken .mn-fotokaart > picture img, .mn-kijken .mn-fotokaart > img { object-position: center 55%; }

/* De vier andere funderingen met dezelfde kleurchip als op /methode/funderingen en home: één set */
.mn-deuren figure { position: relative; }
.mn-deuren .mn-chip { position: absolute; margin: 0; left: 14px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(var(--glass-rgb) / calc(0.72 + var(--glass-plus))); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--fc); border: 1px solid rgb(var(--off-rgb) / 0.16); }
.mn-deuren .mn-chip svg { width: 18px; height: 18px; }
/* Labonderzoek, "In drie stappen": het beeld op dezelfde linkerlijn als het nummer en de titel; het telefoonscherm loopt zacht uit */
.mn-stappen .bs-beeld { justify-items: start; padding-left: 0; padding-right: 0; }

/* Labonderzoek, de twee afspraken: open kolommen met een haarlijn en een teken, zoals "Je gegevens" op de Oura-pagina (geen dozen) */
body:not(.home) #regels .wrap > div { border: 0; border-top: 1px solid var(--line-2); border-radius: 0 !important; background: none; padding: 24px 0 0; }
#regels .mn-ic { display: block; color: var(--accent-text); margin-bottom: 16px; }
#regels .mn-ic svg { width: 24px; height: 24px; display: block; }

/* Minder lettermaten (hooguit 11 per pagina): kaarttitels 20, regels eronder 14 */
.mn-deuren.bs-deuren span:not(.mn-chip) { font-size: 14px; line-height: 1.45; }

/* ---------- Funderingspagina, "Je eigen app & portaal" (tweede versie, 21 oktober): het Mijn data-scherm met de coachkaart links,
   de tekst rechts (gespiegeld ten opzichte van het crème blok erboven). Geen chatscherm (Ryan, 19 oktober). ---------- */
.mn-app .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mn-app-tekst h2 { margin: 0 0 var(--ruimte-lede); }
.mn-app-tekst .lede { margin: 0 0 var(--ruimte-inhoud); }
.mn-app-tekst .list { margin: 0; }
.mn-app-tekst .list li { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
.mn-app-tekst .list b { font-size: var(--fs-item); }
.mn-app-tekst .textlink { margin-top: 24px; display: inline-flex; }
.mn-podium.mn-donker { background: radial-gradient(60% 60% at 60% 40%, rgb(var(--gold-rgb) / calc(0.12 * var(--glow))), transparent 70%), #031a03; border: 1px solid rgb(var(--off-rgb) / 0.08); }
.mn-podium .mn-coach { position: absolute; left: calc(50% - 300px); bottom: 56px; width: 330px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 18px; border-radius: 16px; color: var(--off); background: rgb(var(--glass-rgb) / calc(0.72 + var(--glass-plus))); border: 1px solid rgb(var(--off-rgb) / 0.14); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 24px 50px rgb(var(--shadow-rgb) / calc(0.45 * var(--sh))); font-family: var(--sans); }
.mn-podium .mn-coach img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 25%; position: static !important; }
.mn-podium .mn-coach small { display: block; font-size: 12px; font-weight: 600; color: var(--off-dim); margin-bottom: 4px; }
.mn-podium .mn-coach p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--off); max-width: none; }
@media (max-width: 900px) {
  .mn-app .wrap { grid-template-columns: 1fr; gap: 0; }
  .mn-app-tekst { display: contents; }
  .mn-app .label { order: 0; }
  .mn-app h2 { order: 1; }
  .mn-app .lede { order: 2; margin-bottom: var(--ruimte-inhoud); }
  .mn-app .mn-podium { order: 3; margin-bottom: 8px; }
  .mn-app .list { order: 4; }
  .mn-app .list li:first-child { border-top: 0; }
  .mn-app .textlink { order: 5; justify-self: start; }
  .mn-podium .mn-coach { left: 50%; transform: translateX(-50%); bottom: 16px; width: min(320px, calc(100% - 32px)); padding: 14px 16px; }
  .mn-podium .mn-coach p { font-size: 14px; }
}
/* /methode/funderingen: het productbeeld in de opening midden in de rechterhelft, ook op 1920 (stond tegen de rand met een leeg midden) */
@media (min-width: 821px) {
  .mn-hero-vis .mn-buhne { left: 50%; right: auto; width: min(600px, 88%); transform: translateX(-46%); top: 50%; bottom: auto; height: 640px; margin-top: -250px; }
  .mn-hero-vis .mn-plan { top: 300px; }
}

/* /methode, opening (tweede versie, 21 oktober): het portaal met de modules als frameloos venster, de kaart "Je plan" ervoor.
   Geen foto meer: het ochtendlicht is de opening van home en de truifoto hoort bij burn-out. */
.mn-portaal .mn-venster { position: absolute; right: 0; top: 0; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgb(var(--off-rgb) / 0.12); background: #011400; box-shadow: 0 30px 70px rgb(var(--shadow-rgb) / calc(0.5 * var(--sh))); }
.mn-portaal .mn-venster img { display: block; width: 100%; height: auto; }
.mn-portaal .mn-venster picture { display: contents; }
.mn-portaal .bs-venster-balk { display: flex; gap: 6px; padding: 9px 12px; background: #062006; }
.mn-portaal .bs-venster-balk i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--off-rgb) / 0.22); }
@media (min-width: 821px) {
  .mn-hero-vis .mn-buhne.mn-portaal { width: clamp(640px, 44vw, 860px); transform: translateX(-30%); height: 560px; margin-top: -210px; }

}
@media (max-width: 820px) {
  .mn-portaal .mn-venster { width: 150%; right: auto; left: 0; }
  .mn-hero-vis .mn-buhne.mn-portaal { overflow: hidden; border-radius: 12px 0 0 12px; right: 0; }

}
/* De coachkaart op een foto (Hoe we kijken) */

/* Funderingspagina, app-blok (derde versie): op de computer het portaal (Mijn data) als venster dat rechts uit beeld loopt, zodat
   dit blok niet dezelfde vorm heeft als de telefoon in het crème blok erboven; op de telefoon het Mijn data-scherm. */

/* De coachkaart bovenin de bosfoto, zodat het pad (het onderwerp) vrij blijft */

/* Labonderzoek op de telefoon: het scherm van stap 02 groot en bovenaan uitgesneden (een algemene regel in bouwstenen.css maakte het vak een blok, waardoor het scherm tot 120 breed kromp) */

/* Openingen met een productbeeld (/methode en /methode/funderingen): de kop op dezelfde maat als /traject en /traject/app, één familie (admin 07:15) */
@media (min-width: 821px) {
  .hero:has(.mn-hero-vis) .hero-copy > * { max-width: 560px; }
  .hero:has(.mn-hero-vis) .hero-copy h1 { font-size: var(--fs-h1); }
}
/* /methode, opening: alleen het bovenste deel van het portaalscherm (de onderste rij noemt een datum voor de volgende module, de site zegt "elke vrijdag"; admin 07:20) */
.mn-portaal .mn-venster picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mn-portaal .mn-venster picture img { width: 143%; max-width: none; height: auto; }
@media (min-width: 821px) { .hero:has(.mn-hero-vis) .hero-copy > h1 { max-width: 680px; } }
/* "Je plan" zonder pil waar het scherm ernaast die module als voltooid toont (funderingspagina's, /methode/funderingen):
   de fundering van de pagina licht op; zonder uitgelichte fundering staan alle vijf even sterk */
.mn-plan:not(:has(.nu)) li { color: var(--off); }

/* ===== Keuring Fable 21 oktober 07:35 (via admin 07:50) ===== */
/* 2. Het app-blok staat alleen nog op Slaap & Bioritme, met het scherm Uitgerustheid; telefoon loopt onderin zacht uit */
.mn-slaapdata .mn-tel { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.mn-slaapdata .mn-coach { z-index: 2; }
/* 1. Op de telefoon de coachkaart onder de telefoon (stond op x -113) */
@media (max-width: 900px) {
  .mn-app .mn-slaapdata { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px 16px; }
  .mn-app .mn-slaapdata .mn-tel { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: 220px; height: 340px; }
  .mn-app .mn-slaapdata .mn-coach { position: static; transform: none; width: 100%; }
}
/* 3. Zonder plankaart: de telefoon midden op het podium (Wat het traject beoogt, Wat je eraan hebt) */
@media (min-width: 901px) {
  .mn-beoogt .mn-podium .mn-tel, .mn-waarde .mn-podium .mn-tel { left: 50%; right: auto; transform: translateX(-50%); }
}
/* 3. /methode/funderingen: op de telefoon de plankaart onder de telefoon in plaats van erover */
@media (max-width: 820px) {
  .hero-media.mn-hero-vis:has(.mn-plan) { height: 476px; }
  .hero-media.mn-hero-vis:has(.mn-plan)::after { background: none; }
  .mn-hero-vis .mn-buhne:has(.mn-plan) { top: 72px; bottom: 0; }
  .mn-hero-vis .mn-buhne:has(.mn-plan) .mn-tel { left: 50%; right: auto; top: 0; bottom: auto; transform: translateX(-50%); width: 170px; height: 200px; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .mn-hero-vis .mn-buhne:has(.mn-plan) .mn-plan { left: 50%; right: auto; top: 212px; bottom: auto; transform: translateX(-50%); width: min(300px, 100%); }
}
/* 4. /methode, opening: het portaalvenster heel binnen de kolom (liep 370 px van het scherm), zonder plankaart */
@media (min-width: 821px) {
  .mn-hero-vis .mn-buhne.mn-portaal { --r: calc((100vw - min(100vw - 2 * var(--gutter), var(--content))) / 2); left: auto; right: var(--r); width: min(660px, calc(100% - var(--r) - 125px)); transform: none; top: 50%; bottom: auto; height: 380px; margin-top: -150px; }
  .hero:has(.mn-hero-vis) .hero-copy > h1 { max-width: 11.6em; }
}
@media (max-width: 820px) {
  .hero-media.mn-hero-vis:has(.mn-portaal) { height: 330px; }
  .mn-hero-vis .mn-buhne.mn-portaal { top: 84px; left: 20px; right: 20px; bottom: auto; height: 240px; overflow: visible; border-radius: 0; }
  .mn-portaal .mn-venster { width: 100%; left: 0; right: auto; }
}
/* 7. Labonderzoek, In drie stappen: de telefoon met vaste hoogte en een verloop onderaan; stap 03 de kaart "Volgende call" */
.mn-labtel { width: 250px; height: 250px; overflow: hidden; border-radius: 26px 26px 0 0; border: 5px solid #0d1a0d; border-bottom: 0; background: #011400; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.mn-labtel img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .mn-labtel { height: 290px; } }
.mn-stappen .bs-beeld .bs-call small { display: block; font-size: 12px; font-weight: 600; color: var(--off-dim); }
@media (min-width: 821px) {
  .mn-stappen .bs-beeld .bs-call { height: auto; align-self: flex-start; width: min(100%, 300px); }
}
/* 10. Alle openingen van de methodepagina's op de kopmaat van /traject (60 op 1304), zodat label, kop, tekst, knoppen en bewijsregel in één scherm passen */
@media (min-width: 821px) { .hero .hero-copy > h1 { font-size: var(--fs-h1); } }

.mn-stappen .mn-check { padding-left: 2px; }
/* bouwstenen.css (Lezer 07:20) maakt routebeelden even hoog als hun inhoud en kaarten 206 hoog; in de drie labstappen staat lijst, telefoon en kaart, dus hier één vaste hoogte zodat 01, 02 en 03 op één lijn staan */
@media (min-width: 821px) {
  .mn-stappen .bs-fasen .bs-beeld { height: 256px !important; }
  .mn-stappen .bs-fasen .bs-beeld .gk.bs-ui.bs-call { min-height: 0 !important; width: 100% !important; max-width: 300px; }
}
/* 6. Labonderzoek, Wat we onderzoeken: de labkaart op het echte portaalscherm Labuitslagen (stond met de intakekaart op een leeg vlak); de intake als rij onder de tekst */
.mn-labscherm { position: relative; padding-bottom: 170px; }
.mn-labscherm .mn-venster { position: relative; width: 88%; margin-left: auto; border-radius: 12px; overflow: hidden; border: 1px solid rgb(var(--ink-rgb) / 0.14); background: #011400; box-shadow: 0 30px 60px rgb(var(--ink-rgb) / calc(0.22 * var(--sh))); }
.mn-labscherm .bs-venster-balk { display: flex; gap: 6px; padding: 9px 12px; background: #062006; }
.mn-labscherm .bs-venster-balk i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--off-rgb) / 0.22); }
.mn-labscherm .mn-venster picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.mn-labscherm .mn-venster img { display: block; width: 135%; max-width: none; height: auto; }
.mn-labscherm .gk { position: absolute; left: 0; bottom: 0; width: 320px; padding: 18px 20px; border-radius: 16px; color: var(--off); background: rgb(var(--glass-rgb) / calc(0.95 + var(--glass-plus))); border: 1px solid rgb(var(--off-rgb) / 0.14); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 24px 48px rgb(var(--ink-rgb) / calc(0.35 * var(--sh))); }
.mn-labscherm .gk small { display: block; font-size: 12px; font-weight: 600; color: var(--off-dim); margin-bottom: 10px; }
.mn-labscherm .mn-lab .bs-cats li { grid-template-columns: minmax(0, 1fr) 84px; font-size: 15px; }
.mn-intakerij { margin-top: var(--ruimte-inhoud); padding-top: 20px; border-top: 1px solid rgb(var(--ink-rgb) / 0.12); }
.mn-intakerij small { display: block; font-size: 13px; font-weight: 600; color: var(--light-muted); margin-bottom: 12px; }
.mn-intakerij ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.mn-intakerij li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--light-ink); }
.mn-intakerij svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--check-bg); color: var(--check-fg); flex: none; }
@media (max-width: 900px) {
  .mn-labscherm { padding-bottom: 0; margin-top: 8px; }
  .mn-labscherm .mn-venster { width: 100%; }
  .mn-labscherm .gk { position: relative; left: auto; bottom: auto; width: calc(100% - 32px); margin: -40px auto 0; padding: 16px; }
  .mn-labscherm .mn-lab .bs-cats li { grid-template-columns: minmax(0, 1fr) 64px; font-size: 13px; }
}
/* 9. Oura, Dezelfde data, samen bekeken: op de telefoon hetzelfde venster als op de computer (toonde een ander, afgesneden scherm) */
@media (max-width: 900px) { .mn-zien .bs-venster { display: block; } }
/* 11. Oura, Zeven dingen: de telefoon zonder vlak eromheen, onderin zacht uitlopend */
.mn-meet .mn-podium { background: none; border: 0; box-shadow: none; }
.mn-meet .mn-podium .mn-tel { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
/* Labstappen op de telefoon: elk beeld zo hoog als zijn inhoud (geen lege ruimte onder "Voor je begint") */
@media (max-width: 820px) { .mn-stappen .bs-fasen .bs-beeld { aspect-ratio: auto !important; height: auto !important; padding: 8px 0 0 !important; } }
/* 12. Verder lezen: titel, regel en pijl van de drie deuren op één lijn, ook als een titel over twee regels loopt ("De Vijf Funderingen" op 1304) */
@media (min-width: 901px) {
  .mn-verder .bs-deuren { grid-template-rows: auto auto auto; row-gap: 0; }
  .mn-verder .bs-deuren > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .mn-verder .bs-deuren > li > a { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}

/* ===== Richting A (Ryan, 21 oktober): op de beelden hooguit één echt element uit de app of één feit ===== */
/* /methode/funderingen, opening: de plankaart is weg; de telefoon (Modules, 6 van 9 afgerond) staat alleen, vanaf 1101 midden in het beeld (smaller blijft hij rechts, anders raakt hij de tekst) */
@media (min-width: 1101px) { .mn-hero-vis .mn-buhne:not(.mn-portaal):not(:has(.gk)) .mn-tel { left: 50%; right: auto; transform: translateX(-50%); } }
/* /methode/labonderzoek: het feit links onder over de rand van het portaalvenster Labuitslagen (de hoge labkaart had 170 px ruimte nodig) */
.mn-labscherm:has(.gk-feit) { padding-bottom: 56px; }
/* /methode/slaap-en-bioritme: de tegel Uitgerustheid links naast de telefoon (waar de coachkaart stond), zonder de regels op het scherm af te dekken */
.mn-slaapdata .gk.gk-ui-score { position: absolute; left: max(16px, calc(50% - 238px)); bottom: 64px; z-index: 2; }
@media (max-width: 900px) {
  .mn-labscherm .gk.gk-feit { width: fit-content; margin: -36px 0 0 16px; padding: 12px 16px 11px; }
  .mn-app .mn-slaapdata .gk.gk-ui-score { position: relative; left: auto; bottom: auto; width: 180px; margin-top: -84px; }
}
@media (max-width: 820px) {
  .hero-media.mn-hero-vis:not(:has(.mn-portaal)):not(:has(.gk)) { height: 340px; }
  .mn-hero-vis .mn-buhne:not(.mn-portaal):not(:has(.gk)) { top: 72px; bottom: 0; }
  .mn-hero-vis .mn-buhne:not(.mn-portaal):not(:has(.gk)) .mn-tel { left: 50%; right: auto; top: 0; bottom: auto; transform: translateX(-50%); width: 186px; height: 252px; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
}
/* De tegel valt over de rand van de telefoon, zoals op /traject (admin, 21 oktober) */
@media (min-width: 821px) { .mn-slaapdata .gk.gk-ui-score { translate: 54px 0; } }