/* =========================================================
   MIJN ENERGIEVOLLEDIG, de klantomgeving
   Staat op zichzelf: geen stijl.css nodig. Kleuren komen uit
   Bedrijfs-info/02 Brandguidelines.md, de beelden uit
   assets/mijn/ (gemaakt door _maak-mijn-portaal.py in
   Marketing & Groei/Beeld/Afgeleid). De adviseur gebruikt dit
   ook, in portaal/klanten.php, met klanten.css erbovenop.
   ========================================================= */

:root{
  --navy:#0D1B4B; --navy-2:#13235C; --navy-deep:#060F2E;
  --gold:#C9A84C; --gold-deep:#8A6D1E; --gold-soft:#EAD9A8; --gold-bright:#E6C868; --cream:#FBF7EC;
  --paper:#FFFFFF; --soft:#F5F6FA; --tint:#E8ECF5; --line:#E6E9F2;
  --body:#333333; --muted:#5A6178; --faint:#8A90A6;
  --green:#2E8B57; --green-soft:#E4F1EA; --red:#C0392B; --red-soft:#FBEAE7;

  --r:22px; --r-s:14px;
  --schaduw:0 1px 2px rgba(13,27,75,.04), 0 10px 30px -12px rgba(13,27,75,.16);
  --schaduw-hoog:0 2px 6px rgba(13,27,75,.06), 0 28px 60px -24px rgba(13,27,75,.34);
  --krachtig:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.m{
  margin:0; min-height:100vh; background:var(--soft); color:var(--body);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
.m a{ color:inherit; text-decoration:none; }
.m img{ display:block; max-width:100%; }
.m h1,.m h2,.m h3{ color:var(--navy); margin:0; letter-spacing:-.025em; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.m :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:8px; }

/* ---------- binnenkomen ---------- */
@keyframes m-op{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes m-van-rechts{ from{ opacity:0; transform:translateX(40px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes m-vul{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes m-vul-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes m-ring{ from{ stroke-dashoffset:var(--omtrek); } }
@keyframes m-puls{ 0%{ box-shadow:0 0 0 0 rgba(201,168,76,.55); } 70%{ box-shadow:0 0 0 14px rgba(201,168,76,0); } 100%{ box-shadow:0 0 0 0 rgba(201,168,76,0); } }
@keyframes m-zweef{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.op{ animation:m-op .8s var(--krachtig) both; animation-delay:calc(var(--i,0) * 80ms); }

/* ---------- bovenbalk ---------- */
.m-top{
  position:sticky; top:0; z-index:20; height:68px; padding:0 max(16px, calc((100% - 1160px) / 2 + 16px));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid rgba(13,27,75,.07);
}
.m-merk{ display:flex; align-items:center; gap:12px; min-width:0; }
.m-merk img{ height:34px; width:auto; }
.m-merk b{ font-weight:800; color:var(--navy); font-size:17px; letter-spacing:-.02em; }
/* De naam van de omgeving naast het logo: geen label meer, maar rustige
   kapitalen achter een dun lijntje (15-10-2026, Hasan: badges ogen goedkoop). */
.m-merk em{ display:inline-flex; align-items:center; height:16px; padding-left:12px; border-left:1px solid rgba(13,27,75,.16);
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:var(--gold-deep); white-space:nowrap; }
.m-ik{ display:flex; align-items:center; gap:12px; }
.m-ik .ev-rl-help{ border-radius:99px; }
.m-ik-naam{ font-size:14px; font-weight:600; color:var(--navy); text-align:right; line-height:1.25; }
.m-ik-naam small{ display:block; font-weight:500; color:var(--muted); font-size:12px; }
.m-uit{ font:inherit; font-size:13.5px; font-weight:600; color:var(--navy); background:var(--paper);
  border:1px solid var(--line); border-radius:99px; padding:0 18px; min-height:44px; cursor:pointer; transition:border-color .2s, background .2s; }
.m-uit:hover{ border-color:var(--gold); background:var(--cream); }

.m-wrap{ max-width:1160px; margin:0 auto; padding:28px 16px 24px; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }

/* ---------- held ---------- */
.m-held{
  position:relative; border-radius:var(--r); isolation:isolate; margin-top:28px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(230,200,104,.30) 0%, rgba(230,200,104,0) 55%),
    linear-gradient(160deg, #FFFFFF 0%, var(--cream) 70%);
  border:1px solid rgba(201,168,76,.28);
  box-shadow:var(--schaduw-hoog);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); min-height:460px;
}
.m-held::before{ /* zachte stroomlijnen op de achtergrond */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background:
    radial-gradient(circle at 78% 120%, transparent 0 220px, rgba(201,168,76,.22) 221px 222px, transparent 223px),
    radial-gradient(circle at 78% 120%, transparent 0 300px, rgba(201,168,76,.16) 301px 302px, transparent 303px),
    radial-gradient(circle at 78% 120%, transparent 0 380px, rgba(201,168,76,.10) 381px 382px, transparent 383px);
}
.m-held-tekst{ padding:44px 0 40px 48px; display:flex; flex-direction:column; min-width:0; }
.m-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.m-chip{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:10px;
  background:var(--paper); border:1px solid var(--line); box-shadow:0 1px 2px rgba(13,27,75,.05);
  font-size:13px; font-weight:600; color:var(--navy); }
.m-chip img{ width:28px; height:28px; object-fit:contain; background:var(--cream); border-radius:7px; padding:3px; }
.m-chip.tekst{ padding-left:12px; min-height:38px; }
.m-stap-label{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:14px; }
.m-stap-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); animation:m-puls 2.4s 3; }
.m-held h1{ font-size:clamp(34px, 4.4vw, 54px); line-height:1.02; font-weight:800; letter-spacing:-.04em; }
.m-held .m-titel{ font-size:clamp(18px, 1.8vw, 22px); color:var(--navy); font-weight:600; margin:14px 0 0; letter-spacing:-.015em; }

.m-tegels{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:26px; }
.m-dag{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:14px 20px 14px 14px;
  border-radius:var(--r-s); color:#fff; min-width:0;
  background:linear-gradient(140deg, var(--navy-2) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  box-shadow:0 18px 40px -18px rgba(6,15,46,.7);
}
.m-dag::after{ content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, rgba(230,200,104,.35), rgba(230,200,104,0) 70%); }
.m-dag img{ width:54px; height:54px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.m-dag span{ display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); }
.m-dag strong{ display:block; font-size:17px; white-space:nowrap; font-weight:700; letter-spacing:-.015em; line-height:1.25; }
.m-dag small{ display:block; font-size:13.5px; color:rgba(255,255,255,.72); margin-top:2px; }
.m-ringtegel{ display:flex; align-items:center; gap:12px; padding:12px 20px 12px 12px; border-radius:var(--r-s);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--schaduw); }
.m-ring{ width:62px; height:62px; flex:0 0 auto; transform:rotate(-90deg); }
.m-ring circle{ fill:none; stroke-width:6; }
.m-ring .baan{ stroke:var(--tint); }
.m-ring .vol{ stroke:var(--gold); stroke-linecap:round; animation:m-ring 1.4s var(--krachtig) .3s both; }
.m-ring-wrap{ position:relative; }
.m-ring-wrap b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--navy); font-weight:800; }
.m-ringtegel strong{ display:block; color:var(--navy); font-size:15.5px; }
.m-ringtegel small{ display:block; color:var(--muted); font-size:13px; }

.m-held-figuur{ position:relative; display:flex; align-items:flex-end; justify-content:flex-end; min-height:100%; }
/* Het figuur stapt naar voren: voeten of heupen op de onderrand, hoofd en
   schouders boven de kaart uit, vóór de rand (sinds 13-10-2026). */
/* Vaste hoogte (14-10-2026): in procenten groeide het figuur mee met de tekst. */
.m-held-figuur img{ position:absolute; right:6%; bottom:0; height:560px; width:auto; max-width:none; z-index:2;
  filter:drop-shadow(-10px 18px 22px rgba(13,27,75,.22)) drop-shadow(0 2px 3px rgba(13,27,75,.12)); animation:m-van-rechts 1s var(--krachtig) .15s both; }
.m-bubbel{
  position:relative; margin-top:22px; max-width:440px; padding:16px 20px 17px;
  background:var(--paper); border:1px solid rgba(201,168,76,.35); border-radius:var(--r-s);
  box-shadow:var(--schaduw);
}
.m-bubbel::after{ /* het puntje, naar Clara toe */
  content:""; position:absolute; right:-9px; top:30px; width:16px; height:16px; background:var(--paper);
  border-right:1px solid rgba(201,168,76,.35); border-top:1px solid rgba(201,168,76,.35); transform:rotate(45deg); border-radius:0 4px 0 0;
}
.m-bubbel span{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
  color:var(--gold-deep); margin-bottom:6px; }
.m-bubbel span::before{ content:""; width:18px; height:2px; background:var(--gold); border-radius:2px; }
.m-bubbel p{ margin:0; font-size:16px; color:var(--navy); line-height:1.55; }

/* ---------- bericht van de adviseur ---------- */
.m-bericht{ display:flex; gap:18px; align-items:flex-start; padding:22px 26px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--schaduw); position:relative; overflow:hidden; }
.m-bericht::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--gold-bright), var(--gold)); }
.m-bericht-kop{ font-size:13px; color:var(--muted); margin-bottom:4px; }
.m-bericht-kop b{ color:var(--navy); }
.m-bericht p{ margin:0; font-size:17px; color:var(--navy); line-height:1.55; font-weight:500; }

/* ---------- avatar van de adviseur (foto of letters) ---------- */
.m-av{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; object-fit:cover; background:var(--navy);
  color:var(--gold-bright); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px;
  box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--gold-soft); }
.m-av.groot{ width:76px; height:76px; font-size:24px; box-shadow:0 0 0 4px rgba(255,255,255,.12), 0 0 0 6px rgba(201,168,76,.6); }

/* ---------- kaarten ---------- */
.m-kaart{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--schaduw); padding:30px; }
.m-kop{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; }
.m-kop h2{ font-size:24px; font-weight:800; }
.m-kop p{ margin:4px 0 0; color:var(--muted); font-size:16px; }
/* Labels in de stijl van assets/label.css, iets groter want dit leest de klant. */
.m-teller{ display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; vertical-align:middle;
  font-size:12.5px; font-weight:600; line-height:1; color:var(--navy); background:var(--tint); border:1px solid rgba(13,27,75,.10); white-space:nowrap; }

/* ---------- de route ---------- */
.m-route{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; position:relative; }
.m-route::before, .m-route::after{ /* de baan en het gevulde deel, door het midden van de iconen */
  content:""; position:absolute; top:46px; left:calc(100% / 12); right:calc(100% / 12); height:4px; border-radius:4px; background:var(--tint); }
.m-route::after{ right:auto; width:calc((100% - 100% / 6) * var(--voortgang, 0));
  background:linear-gradient(90deg, var(--gold-soft), var(--gold) 60%, var(--gold-bright));
  transform-origin:left; animation:m-vul 1.4s var(--krachtig) .4s both; }
.m-route li{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:0 4px; animation:m-op .7s var(--krachtig) both; animation-delay:calc(.25s + var(--i) * 90ms); }
.m-pod{ position:relative; width:96px; height:96px; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--schaduw); transition:transform .4s var(--krachtig); }
.m-pod img{ width:66px; height:66px; object-fit:contain; }
.m-pod i{ position:absolute; right:-6px; top:-6px; width:26px; height:26px; border-radius:50%; font-style:normal;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  background:var(--paper); color:var(--faint); border:1px solid var(--line); }
.m-route .klaar .m-pod{ background:var(--cream); border-color:var(--gold-soft); }
.m-route .klaar .m-pod i{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.m-route .nu .m-pod{ transform:translateY(-6px) scale(1.08); border:2px solid var(--gold);
  box-shadow:0 0 0 6px rgba(201,168,76,.16), var(--schaduw-hoog); }
.m-route .nu .m-pod i{ background:var(--navy); border-color:var(--navy); color:#fff; animation:m-puls 2.4s 3; }
.m-route .straks .m-pod img{ filter:grayscale(1) opacity(.42); }
.m-route .straks .m-pod{ background:var(--soft); box-shadow:none; }
.m-route .tx{ display:flex; flex-direction:column; align-items:inherit; gap:2px; }
.m-route .t{ font-weight:700; font-size:15px; color:var(--navy); line-height:1.25; }
.m-route .straks .t{ color:var(--muted); font-weight:600; }
.m-route .d{ font-size:13px; color:var(--muted); }
.m-route .nu .d{ color:var(--gold-deep); font-weight:600; }

/* Wat er nu gebeurt */
.m-nu{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.m-nu > div{ display:flex; gap:14px; padding:18px 20px; border-radius:var(--r-s); background:var(--soft); border:1px solid var(--line); }
.m-nu > div.jij{ background:var(--cream); border-color:var(--gold-soft); }
.m-nu b{ display:block; color:var(--navy); font-size:14px; margin-bottom:2px; }
.m-nu p{ margin:0; font-size:16px; line-height:1.5; }
.m-nu .bol{ width:36px; height:36px; flex:0 0 auto; border-radius:var(--r-s); display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--gold-bright); }
.m-nu .jij .bol{ background:var(--gold); color:var(--navy); }
.m-nu svg{ width:18px; height:18px; }

/* ---------- twee kolommen ---------- */
.m-twee{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; align-items:start; }

/* Documenten */
.m-docs{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.m-doc{ display:flex; align-items:center; gap:14px; padding:14px 16px 14px 14px; border-radius:var(--r-s); border:1px solid var(--line);
  background:var(--paper); transition:transform .3s var(--krachtig), box-shadow .3s, border-color .3s; height:100%; }
.m-doc:hover{ transform:translateY(-3px); border-color:var(--gold-soft); box-shadow:var(--schaduw-hoog); }
.m-doc .ic{ width:58px; height:58px; flex:0 0 auto; border-radius:var(--r-s); background:linear-gradient(150deg, var(--cream), #fff);
  border:1px solid var(--gold-soft); display:flex; align-items:center; justify-content:center; }
.m-doc .ic img{ width:42px; height:42px; object-fit:contain; transition:transform .4s var(--krachtig); }
.m-doc:hover .ic img{ transform:scale(1.1) rotate(-4deg); }
.m-doc .tx{ min-width:0; flex:1; }
.m-doc .s{ display:block; font-size:13px; font-weight:600; color:var(--gold-deep); }
.m-doc .n{ display:block; font-weight:650; color:var(--navy); line-height:1.3; overflow-wrap:anywhere; }
.m-doc .d{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.m-doc .pijl{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--soft); color:var(--navy); transition:background .3s, color .3s; }
.m-doc:hover .pijl{ background:var(--navy); color:#fff; }
.m-doc .pijl svg{ width:16px; height:16px; }
.m-leeg{ display:flex; align-items:center; gap:18px; padding:22px; border-radius:var(--r-s); border:1.5px dashed var(--gold-soft); background:var(--cream); }
.m-leeg img{ width:64px; height:64px; object-fit:contain; flex:0 0 auto; }
.m-leeg p{ margin:0; color:var(--navy); }

/* Aanspreekpunt */
.m-contact{ position:relative; overflow:hidden; border-radius:var(--r); padding:30px; color:#fff;
  background:linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 50%, var(--navy-deep) 100%); box-shadow:var(--schaduw-hoog); }
.m-contact::before{ content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,.32), rgba(201,168,76,0) 65%); }
.m-contact > img.ic{ position:absolute; right:18px; top:18px; width:78px; height:78px; object-fit:contain; opacity:.95;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.m-contact .k{ font-size:14px; font-weight:600; color:var(--gold-bright); }
.m-contact h2{ color:#fff; font-size:22px; margin:6px 0 22px; max-width:15ch; }
.m-persoon{ display:flex; align-items:center; gap:16px; }
.m-persoon strong{ display:block; font-size:19px; letter-spacing:-.015em; }
.m-persoon small{ display:block; color:rgba(255,255,255,.66); font-size:14px; }
.m-knoppen{ display:grid; gap:10px; margin:24px 0 18px; }
.m-knop{ display:flex; align-items:center; justify-content:center; gap:10px; border-radius:var(--r-s); padding:15px 18px;
  font-weight:700; font-size:15.5px; transition:transform .2s, background .2s, box-shadow .2s; }
.m-knop svg{ width:18px; height:18px; }
.m-knop.goud{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:var(--navy);
  box-shadow:0 10px 24px -10px rgba(201,168,76,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.m-knop.goud:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(201,168,76,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.m-knop.rand{ color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); }
.m-knop.rand:hover{ background:rgba(255,255,255,.1); border-color:var(--gold); }
.m-knop.licht{ background:var(--paper); color:var(--navy); border:1.5px solid var(--line); cursor:pointer; font-family:inherit; }
.m-knop.licht:hover{ border-color:var(--gold); background:var(--cream); }
.m-knop.groot{ min-height:56px; padding:0 28px; font-size:17px; border:0; cursor:pointer; font-family:inherit; white-space:nowrap; }
.m-knop.licht.groot{ border:1.5px solid var(--line); }
.m-contact .klein{ margin:0; font-size:15px; color:rgba(255,255,255,.66); }
.m-contact .klein a{ color:#fff; font-weight:700; border-bottom:1px solid var(--gold); }

/* Jouw installatie */
.m-install{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }
.m-prod{ position:relative; overflow:hidden; border-radius:var(--r-s); padding:22px 20px 20px; min-height:150px;
  background:linear-gradient(160deg, #fff, var(--cream)); border:1px solid var(--gold-soft);
  display:flex; flex-direction:column; justify-content:flex-end; transition:transform .35s var(--krachtig), box-shadow .35s; }
.m-prod:hover{ transform:translateY(-3px); box-shadow:var(--schaduw-hoog); }
.m-prod img{ position:absolute; right:8px; top:8px; width:104px; height:104px; object-fit:contain;
  filter:drop-shadow(0 14px 16px rgba(13,27,75,.16)); transition:transform .5s var(--krachtig); }
.m-prod:hover img{ transform:scale(1.06) rotate(-3deg); }
.m-prod b{ position:relative; color:var(--navy); font-size:17px; letter-spacing:-.015em; }
.m-prod small{ position:relative; color:var(--muted); font-size:13px; }

/* Goed om te weten */
.m-weten{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
.m-weten > img{ width:96px; height:96px; object-fit:contain; }
.m-weten ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.m-weten li{ font-size:16px; line-height:1.55; padding-left:16px; border-left:2px solid var(--gold-soft); }
.m-weten li b{ display:block; color:var(--navy); margin-bottom:2px; }
.m-weten a{ color:var(--navy); font-weight:700; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }

.m-voet{ max-width:1160px; margin:0 auto; padding:8px 16px 40px; display:flex; justify-content:space-between; gap:16px;
  color:var(--muted); font-size:13px; }
.m-voet a{ color:var(--navy); font-weight:600; }

/* ---------- navigatie onder de bovenbalk ---------- */
html{ scroll-behavior:smooth; scroll-padding-top:130px; }
.m-sub{ position:sticky; top:68px; z-index:19; display:flex; gap:6px; justify-content:center; padding:10px 16px;
  background:rgba(245,246,250,.86); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(13,27,75,.06); overflow-x:auto; scrollbar-width:none; }
.m-sub::-webkit-scrollbar{ display:none; }
.m-sub a{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:99px; font-size:14.5px; font-weight:650;
  color:var(--muted); white-space:nowrap; transition:background .2s, color .2s; }
.m-sub a:hover{ background:var(--paper); color:var(--navy); }
.m-bol{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
  font-style:normal; display:inline-flex; align-items:center; justify-content:center; }
.m-teller.rood{ background:var(--red-soft); color:var(--red); border-color:rgba(192,57,43,.18); }

/* ---------- het gesprek (klant en adviseur, zie assets/mijn-chat.js) ---------- */
.m-gesprek{ display:flex; flex-direction:column; }
.m-chat{ position:relative; height:420px; overflow-y:auto; padding:18px; border-radius:var(--r-s);
  background:linear-gradient(180deg, var(--soft), #fff 70%); border:1px solid var(--line); overscroll-behavior:contain; }
.m-chat-lijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.m-chat-dag{ align-self:center; display:inline-flex; align-items:center; height:24px; font-size:12px; font-weight:600; color:var(--muted); background:var(--paper); border:1px solid var(--line);
  border-radius:6px; padding:0 9px; margin:10px 0 4px; }
.m-bel{ max-width:78%; display:flex; flex-direction:column; gap:3px; animation:m-op .4s var(--krachtig) both; }
.m-bel p{ margin:0; padding:11px 15px; border-radius:var(--r-s); font-size:16px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.m-bel .wie{ font-size:12.5px; font-weight:700; color:var(--gold-deep); padding-left:4px; }
.m-bel .meta{ font-size:12px; color:var(--muted); padding:0 4px; }
.m-bel.ander{ align-self:flex-start; }
.m-bel.ander p{ background:var(--paper); color:var(--navy); border:1px solid var(--line); border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(13,27,75,.05); }
.m-bel.mijn{ align-self:flex-end; align-items:flex-end; }
.m-bel.mijn p{ background:linear-gradient(150deg, var(--navy-2), var(--navy)); color:#fff; border-bottom-right-radius:4px; }
.m-chat-leeg{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; color:var(--muted); padding:20px; }
.m-chat-leeg img{ width:72px; height:72px; object-fit:contain; }
.m-chat-leeg p{ margin:0; max-width:36ch; }
.m-chat-form{ display:flex; gap:10px; align-items:flex-end; margin-top:12px; flex-wrap:wrap; }
.m-chat-form textarea{ flex:1; min-width:0; font:inherit; font-size:16px; color:var(--navy); resize:none; min-height:52px; max-height:180px;
  padding:14px 16px; border-radius:var(--r-s); border:1.5px solid var(--line); background:var(--soft); line-height:1.45; }
.m-chat-form textarea:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 5px rgba(201,168,76,.18); }
.m-chat-form .m-knop{ min-height:52px; padding:0 20px; border:0; cursor:pointer; font-family:inherit; }
.m-chat-form .m-knop svg{ width:18px; height:18px; }
.m-chat-fout{ flex-basis:100%; margin:0; color:var(--red); font-weight:600; font-size:15px; }
.m-chat-hint{ margin:8px 0 0; font-size:13.5px; color:var(--muted); }

/* ---------- wat er al gedaan is ---------- */
.m-takenlijst{ margin-top:18px; border-radius:var(--r-s); border:1px solid var(--line); background:var(--paper); }
.m-takenlijst summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; min-height:52px; font-weight:700; color:var(--navy); }
.m-takenlijst summary::-webkit-details-marker{ display:none; }
.m-takenlijst summary > span:first-child{ display:flex; align-items:center; gap:10px; }
.m-takenlijst summary > span:first-child::before{ content:""; width:8px; height:8px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(-45deg); transition:transform .2s; }
.m-takenlijst[open] summary > span:first-child::before{ transform:rotate(45deg); }
.m-takenstap{ padding:4px 18px 14px; }
.m-takenstap > b{ display:block; font-size:13.5px; color:var(--muted); margin-bottom:6px; }
.m-takenstap.nu > b{ color:var(--gold-deep); }
.m-takenstap ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.m-takenstap li{ display:flex; align-items:center; gap:12px; font-size:16px; color:var(--muted); }
.m-takenstap li.af{ color:var(--navy); }
.m-takenstap li small{ margin-left:auto; font-size:13px; color:var(--muted); white-space:nowrap; }
.m-takenstap .vk{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; }
.m-takenstap li.af .vk{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.m-takenstap .vk svg{ width:13px; height:13px; }

/* ---------- de installatiedag ---------- */
.m-installatie{ display:grid; grid-template-columns:auto 1fr; gap:20px 28px; align-items:start; }
.m-installatie .m-dag{ grid-row:span 2; }
.m-installatie .m-dag small{ color:var(--gold-soft); }
.m-inst-feiten{ display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.m-inst-feiten div{ padding:12px 16px; border-radius:var(--r-s); background:var(--soft); border:1px solid var(--line); min-width:150px; }
.m-inst-feiten dt{ font-size:13px; font-weight:600; color:var(--muted); }
.m-inst-feiten dd{ margin:2px 0 0; font-weight:700; color:var(--navy); font-size:16px; }
.m-inst-kop{ display:block; color:var(--navy); margin-bottom:8px; }
.m-inst-klaar small{ display:block; margin-top:8px; font-size:13.5px; color:var(--muted); }
.m-klaar{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.m-klaar li{ font-size:16px; color:var(--navy); }
.m-klaar label{ display:flex; gap:12px; align-items:center; cursor:pointer; padding:10px 14px; border-radius:var(--r-s); background:var(--cream); border:1px solid var(--gold-soft); min-height:48px; }
.m-klaar input{ width:20px; height:20px; accent-color:var(--navy); flex:0 0 auto; margin:0; }
.m-klaar input:checked + span{ text-decoration:line-through; text-decoration-color:var(--gold); color:var(--muted); }

/* ---------- laatste nieuws ---------- */
.m-nieuws-lijst{ list-style:none; margin:0; padding:0; position:relative; display:grid; gap:16px; }
.m-nieuws-lijst::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--gold-soft); }
.m-nieuws-lijst li{ position:relative; display:flex; gap:14px; }
.m-nieuws-lijst .stip{ width:14px; height:14px; flex:0 0 auto; margin-top:4px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--paper); z-index:1; }
.m-nieuws-lijst b{ display:block; color:var(--navy); font-weight:650; }
.m-nieuws-lijst small{ font-size:13.5px; color:var(--muted); }
.m-leeg-tekst{ margin:0; color:var(--muted); }

/* =========================================================
   INLOGGEN (index.php en code.php)
   ========================================================= */
body.m-auth{ background:var(--paper); }
.m-split{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.m-podium{ position:relative; overflow:hidden; isolation:isolate; padding:40px 48px 0; display:flex; flex-direction:column;
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(230,200,104,.32), rgba(230,200,104,0) 60%),
    linear-gradient(170deg, #FFFFFF 0%, var(--cream) 60%, #F6EED7 100%);
  border-right:1px solid rgba(201,168,76,.25); }
.m-podium::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.7;
  background:
    radial-gradient(circle at 50% 118%, transparent 0 260px, rgba(201,168,76,.24) 261px 262px, transparent 263px),
    radial-gradient(circle at 50% 118%, transparent 0 360px, rgba(201,168,76,.15) 361px 362px, transparent 363px),
    radial-gradient(circle at 50% 118%, transparent 0 460px, rgba(201,168,76,.09) 461px 462px, transparent 463px); }
.m-podium .m-merk img{ height:40px; }
.m-podium-tekst{ margin-top:clamp(32px, 7vh, 72px); max-width:38ch; animation:m-op .8s var(--krachtig) both; }
.m-podium .k{ font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.m-podium h1{ font-size:clamp(34px, 3.6vw, 50px); line-height:1.04; font-weight:800; letter-spacing:-.04em; margin:12px 0 0; }
.m-beloften{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px; }
.m-beloften li{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--navy); font-size:16px;
  animation:m-op .7s var(--krachtig) both; animation-delay:calc(.2s + var(--i) * 90ms); }
.m-beloften img{ width:40px; height:40px; flex:0 0 auto; object-fit:contain; padding:4px; background:#fff; border-radius:var(--r-s); border:1px solid var(--gold-soft); }
.m-podium-beeld{ margin-top:auto; display:flex; justify-content:center; padding-top:24px; }
.m-podium-beeld img{ width:min(560px, 100%); height:auto; filter:drop-shadow(0 30px 40px rgba(13,27,75,.16));
  animation:m-op 1s var(--krachtig) .2s both; }
.m-podium-beeld figcaption{ display:none; }
.m .m-mobielbeeld{ display:none; } /* .m img zet alles op block, dus hier met .m ervoor */

.m-formvlak{ display:flex; align-items:center; justify-content:center; padding:48px 24px; background:var(--paper); }
.m-form{ width:100%; max-width:420px; animation:m-op .8s var(--krachtig) .1s both; }
.m-form .m-mobielmerk{ display:none; }
.m-form h2{ font-size:32px; font-weight:800; letter-spacing:-.035em; line-height:1.12; }
.m-form .sub{ color:var(--muted); margin:10px 0 28px; font-size:16px; }
.m-form .sub strong{ color:var(--navy); overflow-wrap:anywhere; }
.m-veld{ display:grid; gap:8px; margin-bottom:16px; }
.m-veld label{ font-size:13.5px; font-weight:700; color:var(--navy); }
.m-veld input{ font:inherit; font-size:17px; color:var(--navy); width:100%; padding:16px 18px; border-radius:var(--r-s);
  border:1.5px solid var(--line); background:var(--soft); transition:border-color .2s, background .2s, box-shadow .2s; }
.m-veld input::placeholder{ color:var(--faint); }
.m-veld input[aria-invalid="true"]{ border-color:var(--red); background:#fff; }
.m-veld input:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 5px rgba(201,168,76,.18); }
.m-veld input.code{ font-size:30px; font-weight:800; letter-spacing:.42em; text-align:center; padding:16px 10px 16px calc(10px + .42em);
  font-variant-numeric:tabular-nums; }
.m-form .m-knop{ width:100%; border:0; cursor:pointer; font-family:inherit; }
.m-onthoud{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--body); margin:2px 0 20px; cursor:pointer; line-height:1.45; }
.m-onthoud input{ width:20px; height:20px; margin:0; flex:0 0 auto; accent-color:var(--navy); }
.m-fout{ display:flex; gap:10px; align-items:flex-start; background:var(--red-soft); color:var(--red); border-radius:var(--r-s);
  padding:12px 14px; font-size:15px; font-weight:600; margin:2px 0 4px; }
.m-hulp{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--muted); display:grid; gap:6px; }
.m-hulp a{ color:var(--navy); font-weight:700; }
.m-veilig{ display:flex; align-items:center; gap:8px; margin-top:18px; font-size:12.5px; color:var(--muted); }
.m-veilig svg{ width:15px; height:15px; color:var(--green); flex:0 0 auto; }

/* ---------- de offertestap: Ja, ik wil door (sinds 13-10-2026) ---------- */
.m-ja{ margin-top:auto; padding-top:28px; display:grid; gap:14px; max-width:540px; }
.m-ja-knoppen{ display:flex; flex-wrap:wrap; gap:10px; }
.m-ja-knoppen .m-knop{ min-height:56px; }
.m-ja-knoppen .m-knop.goud{ flex:1 1 240px; }
.m-ja-klein{ margin:0; font-size:16px; color:var(--muted); line-height:1.5; }
.m-ja-klein a{ color:var(--navy); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.m-ja-door{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--r-s); background:var(--paper);
  border:1px solid var(--gold-soft); box-shadow:var(--schaduw); }
.m-ja-door img{ width:48px; height:48px; object-fit:contain; flex:0 0 auto; }
.m-ja-door b{ display:block; color:var(--navy); font-size:17px; }
.m-ja-door span{ display:block; color:var(--muted); font-size:16px; }
.m-linkknop{ background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.m-ja-fout{ margin:0; color:var(--red); font-weight:600; }

.m-dialoog{ border:0; padding:0; border-radius:var(--r); width:min(580px, calc(100% - 24px)); max-height:calc(100dvh - 24px);
  background:var(--paper); color:var(--body); box-shadow:var(--schaduw-hoog); }
.m-dialoog::backdrop{ background:rgba(6,15,46,.5); backdrop-filter:blur(3px); }
.m-dialoog form{ padding:28px; }
.m-dialoog-kop{ display:flex; gap:14px; align-items:flex-start; }
.m-dialoog-kop img{ width:52px; height:52px; object-fit:contain; flex:0 0 auto; }
.m-dialoog h2{ font-size:24px; font-weight:800; }
.m-dialoog-kop p{ margin:6px 0 0; color:var(--muted); }
.m-weken{ border:0; margin:22px 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.m-weken label{ display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px; border-radius:var(--r-s); border:1.5px solid var(--line);
  font-weight:600; color:var(--navy); cursor:pointer; transition:border-color .2s, background .2s; }
.m-weken label.zsm{ grid-column:1 / -1; font-weight:700; }
.m-weken label:hover{ border-color:var(--gold-soft); }
.m-weken label:has(input:checked){ border-color:var(--gold); background:var(--cream); }
.m-weken span{ display:flex; flex-direction:column; line-height:1.3; }
.m-weken small{ font-size:14px; font-weight:500; color:var(--muted); }
.m-weken input{ accent-color:var(--gold-deep); width:18px; height:18px; flex:0 0 auto; margin:0; }
.m-dialoog-knoppen{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.m-dialoog-knoppen .m-knop.goud{ flex:1 1 240px; }
.m-plak{ display:none; }
.m-slot{ display:flex; align-items:center; gap:20px; padding:26px 30px; border-radius:var(--r); background:linear-gradient(140deg, var(--navy-2), var(--navy) 60%, var(--navy-deep));
  color:#fff; box-shadow:var(--schaduw-hoog); }
.m-slot img{ width:64px; height:64px; object-fit:contain; flex:0 0 auto; }
.m-slot div{ flex:1; min-width:0; }
.m-slot h2{ color:#fff; font-size:24px; font-weight:800; }
.m-slot p{ margin:4px 0 0; color:rgba(255,255,255,.75); }

/* =========================================================
   KLEINER SCHERM
   ========================================================= */
@media (max-width:980px){
  .m-bubbel{ max-width:none; }
  .m-bubbel::after{ display:none; }
  .m-held{ grid-template-columns:minmax(0,1fr); min-height:0; margin-top:0; overflow:hidden; }
  .m-held-tekst{ padding:32px 28px 0; }
  .m-held-figuur{ min-height:340px; }
  .m-held-figuur img{ height:330px; right:4%; }
  .m-tegels{ padding-top:26px; }
  .m-twee{ grid-template-columns:minmax(0,1fr); }
  .m-weten{ grid-template-columns:minmax(0,1fr); }
  .m-weten > img{ display:none; }
  .m-split{ grid-template-columns:minmax(0,1fr); }
  .m-podium{ display:none; }
  .m-form .m-mobielmerk{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:28px; }
  .m .m-mobielbeeld{ display:block; width:100%; max-width:380px; height:auto; margin:28px auto 0; filter:drop-shadow(0 20px 26px rgba(13,27,75,.14)); }
}
@media (max-width:760px){
  html{ scroll-padding-top:120px; }
  /* Op de telefoon blijft Ja, ik wil door onderaan in beeld. */
  .m-plak{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); }
  .m-plak .m-knop{ width:100%; }
  body:has(.m-plak){ padding-bottom:84px; }
  .m-weken{ grid-template-columns:minmax(0,1fr); }
  .m-dialoog form{ padding:22px 18px; }
  .m-ja-knoppen .m-knop{ flex:1 1 100%; }
  .m-slot{ display:none; }
  .m-sub{ top:60px; justify-content:flex-start; padding:8px 12px; }
  .m-chat{ height:360px; padding:12px; }
  .m-bel{ max-width:88%; }
  .m-chat-form .m-knop span{ display:none; }
  .m-chat-form .m-knop{ padding:0 16px; }
  .m-installatie{ grid-template-columns:minmax(0,1fr); }
  .m-installatie .m-dag{ grid-row:auto; }
  .m-inst-feiten div{ flex:1; }
  .m-top{ height:60px; }
  .m-merk img{ height:30px; }
  .m-merk b{ font-size:15.5px; }
  .m-ik-naam{ display:none; }
  .m-merk em{ display:none; }   /* ruimte voor Uitleg en Uitloggen */
  .m-wrap{ padding:16px 12px 16px; gap:16px; }
  .m-held{ border-radius:var(--r); }
  .m-held-tekst{ padding:26px 20px 0; }
  .m-chips{ margin-bottom:20px; }
  .m-tegels{ flex-direction:column; align-items:stretch; }
  .m-held-figuur{ min-height:270px; }
  .m-held-figuur img{ height:262px; right:50%; transform:translateX(50%); animation:none; }
  .m-kaart, .m-contact{ padding:22px 18px; }
  .m-kop{ flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:18px; }
  .m-kop h2{ font-size:21px; }
  /* Staande route: iconen links, lijn ertussen */
  .m-route{ grid-template-columns:minmax(0,1fr); gap:0; }
  .m-route::before, .m-route::after{ top:40px; bottom:40px; left:38px; right:auto; width:4px; height:auto; }
  .m-route::after{ height:calc((100% - 80px) * var(--voortgang, 0)); bottom:auto; transform-origin:top; animation-name:m-vul-y; }
  .m-route li{ flex-direction:row; text-align:left; gap:16px; padding:6px 0; }
  .m-pod{ width:80px; height:80px; border-radius:var(--r); }
  .m-pod img{ width:54px; height:54px; }
  .m-route .nu .m-pod{ transform:scale(1.04); }
  .m-route .d{ margin-top:2px; }
  .m-route .tx{ align-items:flex-start; }
  .m-nu{ grid-template-columns:minmax(0,1fr); margin-top:20px; }
  .m-docs{ grid-template-columns:minmax(0,1fr); }
  .m-weten ul{ grid-template-columns:minmax(0,1fr); }
  .m-install{ grid-template-columns:1fr 1fr; gap:10px; }
  .m-prod{ min-height:150px; padding:16px; }
  .m-prod img{ width:84px; height:84px; }
  .m-voet{ flex-direction:column; align-items:center; text-align:center; }
  .m-formvlak{ align-items:flex-start; padding:28px 18px 40px; }
  .m-form h2{ font-size:28px; }
}
@media (max-width:360px){
  .m-merk b{ display:none; }
  .m-install{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* Inloggen: met je code of met je mailadres (sinds 14-10-2026) */
.m-wissel{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:18px 0 0; background:var(--soft); border:1px solid var(--line); border-radius:14px; }
.m-wissel a{ display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:10px; font-size:15px; font-weight:700; color:var(--muted); text-decoration:none; transition:background .15s, color .15s; }
.m-wissel a:hover{ color:var(--navy); }
.m-wissel a.aan{ background:#fff; color:var(--navy); box-shadow:0 1px 2px rgba(13,27,75,.08), 0 4px 12px -6px rgba(13,27,75,.2); }
.m-form .m-wissel + .sub{ margin-top:18px; }
.m-veld input.code.vast{ font-size:26px; letter-spacing:.2em; padding-left:calc(10px + .2em); text-transform:uppercase; }
.m-veld input.code.vast::placeholder{ letter-spacing:.2em; }

/* ---------- De eerste keer binnen en je account (sinds 14-10-2026) ---------- */
.m-keuzeblok{ display:grid; gap:14px; padding:20px; border-radius:var(--r); background:var(--paper); border:1px solid var(--gold-soft);
  box-shadow:0 1px 2px rgba(13,27,75,.04), 0 12px 28px -18px rgba(13,27,75,.25); }
.m-keuzeblok.licht{ border-color:var(--line); box-shadow:none; background:var(--soft); }
.m-keuzeblok .m-veld{ margin-bottom:0; }
.m-keuzekop{ display:flex; align-items:center; gap:14px; }
.m-keuzekop img{ width:44px; height:44px; object-fit:contain; flex:0 0 auto; }
.m-keuzekop b{ display:block; font-size:16.5px; font-weight:800; color:var(--navy); }
.m-keuzekop span{ display:block; font-size:14.5px; color:var(--muted); line-height:1.45; margin-top:2px; overflow-wrap:anywhere; }
.m-of{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--faint); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.m-of::before, .m-of::after{ content:""; flex:1; height:1px; background:var(--line); }
.m-hint{ display:block; font-size:13px; color:var(--muted); line-height:1.45; }
.m-wrap.m-smal{ max-width:760px; }
.m-terug{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--navy); text-decoration:none; }
.m-terug svg{ width:17px; height:17px; }
.m-terug:hover{ color:var(--gold-deep); }
.m-pagkop{ font-size:clamp(30px,4vw,40px); font-weight:800; letter-spacing:-.03em; margin-top:-8px; }
.m-goed{ padding:14px 18px; border-radius:var(--r-s); background:var(--green-soft); color:#1E6E42; font-weight:600; font-size:15px; }
.m-account .m-kop{ align-items:flex-start; }
.m-status{ flex:0 0 auto; display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; line-height:1;
  font-size:12.5px; font-weight:600; background:var(--soft); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.m-status.aan{ background:var(--cream); color:var(--gold-deep); border-color:var(--gold-soft); }
.m-velden2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.m-acties{ display:flex; justify-content:flex-end; margin-top:18px; }
.m-acties .m-knop{ border:0; cursor:pointer; font-family:inherit; min-width:220px; }
.m-account .m-fout{ margin-top:12px; }
.m-gastvak{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.m-gastuitleg{ flex:1 0 100%; margin:0 0 2px; font-size:15px; color:var(--muted); }
.m-gastuitleg b{ color:var(--navy); }
.m-gastvak input{ flex:1; min-width:0; font:inherit; font-size:15px; padding:13px 14px; border-radius:var(--r-s); border:1.5px solid var(--line); background:var(--soft); }
.m-gastvak .m-knop{ flex:0 0 auto; }
a.m-ik-naam{ text-decoration:none; border-radius:10px; padding:4px 8px; margin:-4px 0; transition:background .15s; }
a.m-ik-naam:hover{ background:var(--soft); }
@media (max-width:640px){
  .m-velden2{ grid-template-columns:1fr; }
  .m-acties .m-knop{ width:100%; }
  .m-gastvak{ flex-direction:column; align-items:stretch; }
}
.m-door{ display:grid; gap:14px; padding:18px 20px; border-radius:var(--r-s); background:var(--cream); border:1px solid var(--gold-soft); }
.m-door p{ margin:0; font-size:15.5px; color:var(--body); line-height:1.55; }
.m-door b{ color:var(--navy); }
.m-door .m-knop{ border:1.5px solid var(--line); }

/* ---------- inloggen op één scherm (sinds 14-10-2026) ----------
   Hasan: alles in één beeld, niet naar beneden scrollen. Op een laptop
   krimpt het beeld links mee met de hoogte van het venster, en wordt het
   formulier compacter als het venster laag is. Ook voor de medewerkers. */
@media (min-width:981px){
  .m-split{ height:100vh; height:100dvh; min-height:560px; }
  .m-podium{ min-height:0; padding-top:32px; }
  .m-podium-tekst{ margin-top:clamp(20px, 4.5vh, 56px); }
  /* De groep staat links op één lijn met de tekst en recht op de onderrand,
     even groot als de ruimte toelaat (fig-klanten en fig-team). */
  .m-podium-beeld{ flex:1 1 0; min-height:0; margin:0; padding-top:20px; justify-content:flex-start; align-items:flex-end; }
  .m-podium-beeld img{ height:100%; width:100%; max-width:100%; max-height:520px; object-fit:contain; object-position:0 100%;
    filter:drop-shadow(0 18px 30px rgba(13,27,75,.14)); }
  .m-formvlak{ overflow-y:auto; padding:28px 24px; }
}
@media (min-width:981px) and (max-height:860px){
  .m-podium h1{ font-size:clamp(30px, 3vw, 42px); }
  .m-beloften{ margin-top:18px; gap:8px; }
  .m-beloften li{ font-size:15px; }
  .m-beloften img{ width:34px; height:34px; }
  .m-form h2{ font-size:28px; }
  .m-form .sub{ margin:8px 0 18px; font-size:15px; }
  .m-form .m-wissel + .sub{ margin-top:14px; }
  .m-veld{ margin-bottom:12px; }
  .m-veld input{ padding:13px 16px; }
  .m-veld input.code{ font-size:26px; padding:12px 10px 12px calc(10px + .42em); }
  .m-onthoud{ margin-bottom:16px; font-size:14.5px; }
  .m-hulp{ margin-top:18px; padding-top:16px; font-size:14px; gap:4px; }
  .m-veilig{ margin-top:12px; }
}
@media (min-width:981px) and (max-height:740px){
  .m-form h2{ font-size:26px; }
  .m-form .sub{ margin-bottom:12px; }
  .m-veld{ gap:6px; margin-bottom:10px; }
  .m-onthoud{ margin-bottom:12px; }
  .m-hulp{ margin-top:14px; padding-top:12px; gap:2px; }
  .m-formvlak{ padding:14px 24px; }
  .m-veld input{ padding:11px 16px; }
}
/* Een vol formulier (zoals het keuzescherm) begint bovenaan in plaats van
   aan beide kanten af te vallen. */
.m-auth .m-formvlak{ align-items:flex-start; }
.m-auth .m-form{ margin-block:auto; }
.m-wwpaar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.m-wwpaar .m-veld{ margin-bottom:6px; }
.m-keuzeblok .m-hint{ display:block; margin:-8px 0 0; }
.m-gast{ display:flex; align-items:center; gap:14px; }
.m-gast .m-keuzekop{ flex:1; margin:0; }
.m-gast .m-knop{ width:auto !important; flex:none; padding-inline:18px; }
@media (max-width:480px){
  .m-wwpaar{ gap:10px; }
  .m-auth .m-keuzeblok{ padding:16px; gap:12px; }
  .m-auth .m-keuzekop img{ width:34px; height:34px; }
  .m-auth .m-keuzeblok:not(.m-gast) .m-keuzekop span{ display:none; }
  .m-auth .m-of{ margin:10px 0; }
  .m-gast{ gap:10px; }
  .m-gast .m-keuzekop span{ font-size:13.5px; }
  .m-gast .m-keuzekop img{ display:none; }
}
/* Op de telefoon: geen extra beeld onder het formulier, zodat het past. */
@media (max-width:980px){
  .m-auth .m-mobielbeeld{ display:none !important; }
  .m-auth .m-form .m-mobielmerk{ margin-bottom:18px; gap:0; }
}
@media (max-width:760px){
  .m-auth .m-formvlak{ padding:14px 18px 16px; }
  .m-auth .m-form .m-mobielmerk{ margin-bottom:12px; }
  .m-auth .m-form h2{ font-size:26px; }
  .m-auth .m-form .sub{ margin:8px 0 16px; font-size:15px; }
  .m-auth .m-veld{ margin-bottom:12px; }
  .m-auth .m-veld input{ padding:13px 16px; }
  .m-auth .m-veld input.code{ font-size:24px; padding:12px 8px 12px calc(8px + .42em); }
  .m-auth .m-onthoud{ margin-bottom:14px; font-size:14px; }
  .m-auth .m-hulp{ margin-top:16px; padding-top:14px; font-size:14px; gap:4px; }
  .m-auth .m-veilig{ margin-top:10px; }
}

/* =========================================================
   HET OVERZICHT VAN DE KLANT, RUSTIG (sinds 14-10-2026)
   Hasan: "te druk en niet duidelijk genoeg, minimalistischer, voor
   elke doelgroep vriendelijk en duidelijk". Vier blokken, veel lucht,
   grote letter (17 tot 18 pixels), knoppen van minstens 56 hoog, geen
   bewegende elementen. Klassen met mr- staan alleen op mijn/home.php.
   ========================================================= */
body.mr{ font-size:17px; background:var(--soft); }
/* Kop en voet op dezelfde lijn als de blokken (880 breed). */
body.mr .m-top{ padding:0 max(16px, calc((100% - 880px) / 2 + 16px)); }
body.mr .m-voet{ max-width:880px; }
.mr-wrap{ max-width:880px; margin:0 auto; padding:32px 16px 40px; display:grid; gap:20px; }
.mr-kaart{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:32px; }
.mr-kaart h2{ font-size:24px; font-weight:800; margin-bottom:20px; }
.mr-noot{ margin:12px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }
.mr-noot a{ color:var(--navy); font-weight:700; }

/* 1. de kop: één zin, één ding om te doen */
.mr-held{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:16px; align-items:end;
  background:linear-gradient(170deg, #FFFFFF 0%, var(--cream) 100%); border:1px solid var(--gold-soft); border-radius:var(--r);
  padding:36px 32px 0; overflow:hidden; }
.mr-held-tekst{ padding-bottom:36px; min-width:0; }
.mr-stap{ margin:0 0 10px; font-size:15px; font-weight:700; color:var(--gold-deep); }
.mr-held h1{ font-size:clamp(34px, 5vw, 46px); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
.mr-titel{ margin:10px 0 0; font-size:22px; font-weight:700; color:var(--navy); line-height:1.3; }
.mr-uitleg{ margin:12px 0 0; font-size:18px; line-height:1.6; color:var(--body); max-width:46ch; }
.mr-held .m-ja{ padding-top:24px; margin-top:0; }
.mr-held-figuur{ align-self:end; height:300px; display:flex; justify-content:center; }
.mr-held-figuur{ min-width:0; }
.mr-held-figuur img{ height:100%; width:100%; max-width:100%; object-fit:contain; object-position:50% 100%; }
.mr-dag{ display:flex; align-items:center; gap:16px; margin-top:24px; padding:16px 20px; border-radius:var(--r-s);
  background:var(--navy); color:#fff; max-width:440px; }
.mr-dag img{ width:52px; height:52px; object-fit:contain; flex:0 0 auto; }
.mr-dag span{ display:block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); }
.mr-dag strong{ display:block; font-size:21px; line-height:1.25; }
.mr-dag small{ display:block; font-size:16px; color:rgba(255,255,255,.8); margin-top:2px; }

/* 2. de zes stappen */
.mr-route{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); position:relative; }
.mr-route li{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; position:relative; }
.mr-route li::before{ content:""; position:absolute; top:19px; left:-50%; width:100%; height:3px; background:var(--line); z-index:0; }
.mr-route li:first-child::before{ display:none; }
.mr-route li.klaar::before, .mr-route li.nu::before{ background:var(--gold); }
.mr-route .bol{ position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:16px; background:var(--paper); color:var(--muted); border:2px solid var(--line); }
.mr-route .bol svg{ width:20px; height:20px; }
.mr-route li.klaar .bol{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.mr-route li.nu .bol{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 0 0 5px rgba(201,168,76,.35); }
.mr-route .t{ font-size:15px; font-weight:600; color:var(--muted); line-height:1.3; }
.mr-route li.nu .t{ color:var(--navy); font-weight:800; }
.mr-route li.klaar .t{ color:var(--navy); }
.mr-nu{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; align-items:start; }
.mr-nu > div{ padding:20px; border-radius:var(--r-s); background:var(--soft); }
.mr-nu > div.jij{ background:var(--cream); border:1px solid var(--gold-soft); }
.mr-nu b{ display:block; color:var(--navy); font-size:17px; margin-bottom:4px; }
.mr-nu p{ margin:0; font-size:17px; line-height:1.55; }
.mr-klaar{ margin-top:14px; }
.mr-gedaan{ margin-top:20px; border-top:1px solid var(--line); padding-top:6px; }
.mr-gedaan summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
  min-height:48px; font-weight:700; color:var(--navy); font-size:16px; }
.mr-gedaan summary::-webkit-details-marker{ display:none; }
.mr-gedaan summary::after{ content:"+"; font-size:22px; font-weight:600; color:var(--muted); margin-left:8px; }
.mr-gedaan[open] summary::after{ content:"−"; }
.mr-gedaan summary span{ margin-left:auto; font-size:14px; font-weight:600; color:var(--muted); }
.mr-gedaan .m-takenstap{ padding:4px 0 12px; }

/* 3. vragen: adviseur en berichten in één blok */
.mr-vragen{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:32px; }
.mr-adv h2{ margin-bottom:16px; }
.mr-persoon{ display:flex; align-items:center; gap:14px; }
.mr-persoon .m-av.groot{ width:64px; height:64px; box-shadow:none; }
.mr-persoon strong{ display:block; color:var(--navy); font-size:18px; }
.mr-persoon small{ display:block; color:var(--muted); font-size:15px; }
.mr-notitie{ margin:16px 0 0; padding:14px 16px; border-left:3px solid var(--gold); background:var(--cream); border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:16px; line-height:1.55; color:var(--navy); }
.mr-knoppen{ display:grid; gap:10px; margin-top:18px; }
.mr-knoppen .m-knop.groot{ width:100%; }
.mr-chat h3{ font-size:18px; font-weight:800; margin:4px 0 12px; display:flex; align-items:center; gap:10px; }
.mr-chat .m-chat{ height:320px; }
.mr-chat .m-chat:has(#chatLeeg){ height:170px; }
.mr-chat .m-chat-leeg{ height:100%; display:grid; place-items:center; text-align:center; }
.mr-chat .m-chat-leeg p{ margin:0; max-width:30ch; color:var(--muted); font-size:16px; }

/* 4. documenten */
.mr-docs{ list-style:none; margin:0; padding:0; display:grid; }
.mr-docs a{ display:flex; align-items:center; gap:16px; padding:14px 4px; border-top:1px solid var(--line); min-height:64px; }
.mr-docs li:first-child a{ border-top:0; }
.mr-docs img{ width:40px; height:40px; object-fit:contain; flex:0 0 auto; }
.mr-docs b{ display:block; color:var(--navy); font-size:17px; font-weight:650; }
.mr-docs small{ display:block; color:var(--muted); font-size:15px; }
.mr-docs em{ margin-left:auto; font-style:normal; font-weight:700; color:var(--navy); font-size:15px; padding:8px 14px; border-radius:10px; border:1.5px solid var(--line); white-space:nowrap; }
.mr-docs a:hover em{ border-color:var(--gold); }
.mr-voetnoot{ margin:4px 0 0; text-align:center; font-size:14px; color:var(--muted); line-height:1.55; padding:0 8px; }

@media (max-width:760px){
  .mr-wrap{ padding:20px 12px 32px; gap:14px; }
  .mr-kaart{ padding:22px 18px; }
  .mr-kaart h2{ font-size:21px; margin-bottom:16px; }
  .mr-held{ grid-template-columns:1fr; padding:26px 20px 0; }
  .mr-held-tekst{ padding-bottom:4px; }
  .mr-held-figuur{ height:200px; }
  .mr-held .m-ja-knoppen{ display:grid; }
  .mr-route{ grid-template-columns:1fr; gap:0; }
  .mr-route li{ flex-direction:row; text-align:left; gap:14px; padding:6px 0; }
  .mr-route li::before{ left:19px; top:-50%; width:3px; height:100%; }
  .mr-route .t{ font-size:16px; }
  .mr-nu{ grid-template-columns:1fr; gap:10px; margin-top:18px; }
  .mr-vragen{ grid-template-columns:1fr; gap:24px; }
  .mr-docs em{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .mr-route .bol{ transition:none; } }

/* ---------- breder en warmer (sinds 15-10-2026) ----------
   Hasan: de rustige versie was "te saai en krap". Breder (1100), een
   groter figuur, de producten en de stappen met hun 3D-icoon, en rechts
   de mensen: de adviseur in een donkere kaart, daaronder de berichten. */
.mr-wrap{ max-width:1100px; }
body.mr .m-top{ padding:0 max(16px, calc((100% - 1100px) / 2 + 16px)); }
body.mr .m-voet{ max-width:1100px; }
.mr-held{ grid-template-columns:minmax(0,1fr) 340px; padding:44px 40px 0; }
.mr-held-tekst{ padding-bottom:44px; }
.mr-held-figuur{ height:380px; }
.mr-uitleg{ max-width:52ch; }
.mr-prod{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.mr-prod span{ display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 5px; border-radius:10px; background:#fff;
  border:1px solid var(--gold-soft); font-size:15px; font-weight:650; color:var(--navy); }
.mr-prod img{ width:30px; height:30px; object-fit:contain; }

.mr-twee{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px; align-items:start; }
.mr-links, .mr-rechts{ display:grid; gap:20px; min-width:0; }
.mr-rechts{ position:sticky; top:88px; }

/* de stappen met icoon */
.mr-route li::before{ top:27px; }
.mr-route .bol{ width:56px; height:56px; border-radius:16px; background:var(--soft); border:2px solid var(--line); position:relative; }
.mr-route .bol img{ width:38px; height:38px; object-fit:contain; filter:grayscale(1) opacity(.45); }
.mr-route .bol i{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:11px; font-weight:800; background:#fff; color:var(--muted); border:1.5px solid var(--line); }
.mr-route .bol i svg{ width:12px; height:12px; }
.mr-route li.klaar .bol{ background:var(--cream); border-color:var(--gold-soft); }
.mr-route li.klaar .bol img{ filter:none; }
.mr-route li.klaar .bol i{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.mr-route li.nu .bol{ background:#fff; border-color:var(--gold); box-shadow:0 0 0 5px rgba(201,168,76,.22); }
.mr-route li.nu .bol img{ filter:none; }
.mr-route li.nu .bol i{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* de adviseur: donker en persoonlijk */
.mr-adv{ border-radius:var(--r); padding:28px; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%, rgba(230,200,104,.22), rgba(230,200,104,0) 55%), linear-gradient(160deg, var(--navy), var(--navy-deep)); }
.mr-adv-k{ display:block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); }
.mr-adv h2{ color:#fff; font-size:23px; font-weight:800; margin:6px 0 18px; line-height:1.25; }
.mr-adv .mr-persoon strong{ color:#fff; }
.mr-adv .mr-persoon small{ color:rgba(255,255,255,.7); }
.mr-adv .mr-persoon .m-av.groot{ width:68px; height:68px; box-shadow:0 0 0 3px rgba(255,255,255,.15), 0 0 0 5px rgba(201,168,76,.7); }
.mr-adv .mr-notitie{ background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--gold); }
.mr-adv .mr-noot{ color:rgba(255,255,255,.7); }
.mr-adv .mr-noot a{ color:#fff; }
.mr-chat h2{ display:flex; align-items:center; gap:10px; }
.mr-chat .m-chat{ height:300px; }

@media (max-width:980px){
  .mr-twee{ grid-template-columns:minmax(0,1fr); }
  .mr-rechts{ position:static; }
  .mr-held{ grid-template-columns:minmax(0,1fr) 240px; }
  .mr-held-figuur{ height:300px; }
}
@media (max-width:760px){
  .mr-held{ grid-template-columns:1fr; padding:26px 20px 0; }
  .mr-held-figuur{ height:220px; }
  .mr-route .bol{ width:44px; height:44px; border-radius:13px; }
  .mr-route .bol img{ width:30px; height:30px; }
  .mr-route li::before{ left:21px; }
  .mr-adv{ padding:22px 18px; }
}

/* ---------- de klantpagina zoals het klantscherm van de adviseur (sinds 15-10-2026) ----------
   Hasan: het klantscherm in Mijn klanten is mooi, de pagina van de klant
   zelf nog te basic en niet goed uitgelijnd. Nu dezelfde opbouw: een
   donkerblauwe kop, de stappen als kaarten over de volle breedte, en twee
   kolommen eronder. Breder (1240), alles op één raster. */
.mr-wrap.mk{ max-width:1240px; gap:20px; }
body.mr .m-top{ padding:0 max(16px, calc((100% - 1240px) / 2 + 16px)); }
body.mr .m-voet{ max-width:1240px; }

/* de kop */
.mk-held{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:24px; align-items:end;
  padding:40px 0 0 44px; border-radius:var(--r); color:#fff; box-shadow:var(--schaduw-hoog);
  background:radial-gradient(70% 120% at 100% 100%, rgba(230,200,104,.20), rgba(230,200,104,0) 60%), linear-gradient(150deg, var(--navy-2, #13235C) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.mk-held::before{ content:""; position:absolute; left:-120px; top:-140px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,0) 70%); z-index:-1; }
.mk-held-tekst{ padding-bottom:40px; min-width:0; }
.mk-balk{ display:flex; gap:6px; max-width:300px; margin-bottom:12px; }
.mk-balk i{ flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.16); }
.mk-balk i.af{ background:var(--gold); }
.mk-balk i.nu{ background:linear-gradient(90deg, var(--gold) 50%, rgba(255,255,255,.16) 50%); }
.mk-stap{ margin:0; font-size:15px; color:rgba(255,255,255,.72); }
.mk-stap b{ color:#fff; font-weight:700; }
.mk-held h1{ color:#fff; margin:14px 0 0; font-size:clamp(34px, 4.6vw, 48px); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
.mk-titel{ margin:10px 0 0; font-size:22px; font-weight:700; color:var(--gold-bright); line-height:1.3; }
.mk-uitleg{ margin:10px 0 0; font-size:18px; line-height:1.6; color:rgba(255,255,255,.82); max-width:52ch; }
.mk-prod{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.mk-prod span{ display:inline-flex; align-items:center; gap:9px; padding:5px 14px 5px 5px; border-radius:10px; font-size:15px; font-weight:650;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; }
.mk-prod span.tekst{ padding-left:14px; min-height:44px; }
.mk-prod img{ width:32px; height:32px; object-fit:contain; background:#fff; border-radius:7px; padding:3px; }
.mk-dag{ display:inline-flex; align-items:center; gap:16px; margin-top:24px; padding:14px 22px 14px 14px; border-radius:var(--r-s);
  background:rgba(255,255,255,.07); border:1px solid rgba(230,200,104,.45); }
.mk-dag img{ width:52px; height:52px; object-fit:contain; flex:none; background:var(--cream); border-radius:12px; padding:5px; }
.mk-dag span{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); }
.mk-dag strong{ display:block; font-size:21px; line-height:1.25; color:#fff; }
.mk-dag small{ display:block; font-size:15.5px; color:rgba(255,255,255,.78); margin-top:2px; }
/* de offertestap op donker */
.mk-held .m-ja{ margin-top:0; padding-top:24px; }
.mk-held .m-knop.licht{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.28); }
.mk-held .m-knop.licht:hover{ background:rgba(255,255,255,.12); border-color:var(--gold); }
.mk-held .m-ja-klein{ color:rgba(255,255,255,.72); }
.mk-held .m-ja-klein a, .mk-held .m-linkknop{ color:#fff; }
.mk-held .m-ja-door{ background:rgba(255,255,255,.07); border-color:rgba(230,200,104,.45); color:#fff; }
.mk-held .m-ja-door b{ color:#fff; }
.mk-held .m-ja-door span{ color:rgba(255,255,255,.78); }
.mk-held .m-ja-fout{ background:#fff; }
/* het figuur staat in een warme lichtvlek, zodat het donkerblauw van de
   kleding niet wegvalt tegen de kop */
.mk-held-figuur{ position:relative; align-self:end; height:400px; display:flex; justify-content:center; min-width:0; }
.mk-gloed{ position:absolute; left:50%; bottom:-120px; width:420px; height:420px; transform:translateX(-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(230,200,104,.50) 0%, rgba(230,200,104,.22) 38%, rgba(230,200,104,0) 68%); }
.mk-held-figuur img{ height:100%; width:100%; object-fit:contain; object-position:50% 100%; filter:drop-shadow(0 18px 30px rgba(6,15,46,.35)); }

/* de zes stappen als kaarten */
.mk-stappen{ min-width:0; }
.mk-route{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; }
.mk-route li{ padding:18px 10px 16px; border-radius:var(--r-s); background:var(--paper); border:1px solid var(--line); box-shadow:var(--schaduw); gap:6px; }
.mk-route li::before{ display:none; }
.mk-route .bol{ width:64px; height:64px; border-radius:18px; margin-bottom:4px; }
.mk-route .bol img{ width:44px; height:44px; }
.mk-route .t{ font-size:15px; }
.mk-route .d{ font-size:13px; color:var(--muted); font-weight:600; }
.mk-route li.klaar .d{ color:var(--gold-deep); }
.mk-route li.nu{ border-color:var(--gold); background:var(--cream); box-shadow:0 0 0 4px rgba(201,168,76,.16), var(--schaduw); }
.mk-route li.nu .bol{ box-shadow:none; }
.mk-route li.nu .d{ color:var(--navy); font-weight:700; }
.mk-route li.straks{ background:var(--soft); box-shadow:none; }

/* de kop van een kaart: titel links, een klein label rechts */
.mk-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.mk-kop h2{ margin:0 !important; }
.mk-kop span{ display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; line-height:1;
  font-size:12.5px; font-weight:600; color:var(--gold-deep); background:var(--cream); border:1px solid var(--gold-soft); white-space:nowrap; }

/* wat er nu gebeurt: twee even hoge vakken met een icoon */
.mk-nu .mr-nu{ margin-top:0; align-items:stretch; }
.mk-nu .mr-nu > div{ display:flex; flex-direction:column; padding:22px; border:1px solid var(--line); }
.mk-nu .mr-nu > div.jij{ border-color:var(--gold-soft); }
.mk-nu .mr-nu img{ width:44px; height:44px; object-fit:contain; margin-bottom:12px; }
.mk-nu .mr-nu b{ font-size:18px; margin-bottom:6px; }
.mk-wie{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; }
.mk-wie span{ width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; flex:none; }
.mk-wie p{ font-size:15.5px !important; color:var(--muted); }
.mk-wie p strong{ display:block; color:var(--navy); font-size:16px; }

.mr-rechts .mr-kaart{ padding:28px; }
.mr-chat .m-chat{ height:320px; }

@media (max-width:1100px){
  .mk-held{ grid-template-columns:minmax(0,1fr) 300px; padding-left:32px; }
  .mk-held-figuur{ height:340px; }
  .mk-route{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:760px){
  .mk-held{ grid-template-columns:1fr; padding:26px 20px 0; gap:0; }
  .mk-held-tekst{ padding-bottom:8px; }
  .mk-held-figuur{ height:230px; }
  .mk-gloed{ width:300px; height:300px; bottom:-90px; }
  .mk-dag{ display:flex; }
  .mk-route{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .mk-route li{ flex-direction:column; text-align:center; padding:14px 8px; }
  .mk-route .bol{ width:52px; height:52px; }
  .mk-route .bol img{ width:36px; height:36px; }
  .mk-nu .mr-nu{ grid-template-columns:1fr; }
}

/* ---------- strak voor live (15-10-2026) ----------
   Kleine rechtzettingen in de klantomgeving. Alles hier is gescoped
   (m-klant, m-acc, mk-, mr-), zodat het inlogscherm voor medewerkers
   en het klantscherm van de adviseur (portaal/klanten.php) niet
   veranderen. */

/* Inloggen: de kop staat op elke manier op dezelfde hoogte, ook als je
   tussen Code en Wachtwoord wisselt (eerst sprong hij mee met de lengte). */
@media (min-width:981px){
  .m-auth.m-klant .m-form{ margin-top:max(24px, calc(50vh - 340px)); margin-bottom:auto; }
}
.m-klant .m-veilig{ align-items:flex-start; }
.m-klant .m-veilig svg{ margin-top:1px; }

/* De kop: de tekst in het midden naast het figuur, ook als er weinig staat. */
.mk-held-tekst{ align-self:center; }

/* Berichten: een kort gesprek staat onderaan, bij het tekstvak. */
.mr-chat .m-chat:not(:has(#chatLeeg)) .m-chat-lijst{ min-height:100%; justify-content:flex-end; }
/* Geen dubbele ruimte onder de kop van een lege kaart. */
.mk-kop + .mr-noot{ margin-top:0; }
/* De gouden ring om de adviseur valt binnen de rand van de kaart. */
.mr-adv .mr-persoon .m-av.groot{ margin-left:5px; }

/* Op 1024: de zes stappen blijven op één rij, de rechterkolom iets smaller. */
@media (max-width:1100px){
  .mk-route{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; }
  .mr-twee{ grid-template-columns:minmax(0,1fr) 340px; }
}
@media (max-width:900px){
  .mk-route{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:980px){
  .mr-twee{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .mk-route{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mr-rechts .mr-kaart{ padding:22px 18px; }
  .mk-prod{ gap:6px; }
  .mk-prod span{ font-size:14px; padding-right:12px; gap:7px; }
  .mk-prod img{ width:28px; height:28px; }
  /* De keuze voor de week: de twee knoppen even breed. */
  .m-dialoog-knoppen .m-knop{ flex:1 1 100%; }
}

/* Je account: de kop op dezelfde plek als op het overzicht, en de lichte
   knop met zijn rand (die viel weg, waardoor hij op een link leek). */
body.m-acc .m-top{ padding:0 max(16px, calc((100% - 1240px) / 2 + 16px)); }
.m-acc .m-acties .m-knop.licht{ border:1.5px solid var(--line); }
.m-acc .m-acties .m-knop.licht:hover{ border-color:var(--gold); }
/* Berichten in de smalle rechterkolom: het tekstvak over de hele breedte,
   Versturen eronder. Ernaast bleef er te weinig ruimte om te typen. */
@media (min-width:761px){
  .mr-chat .m-chat-form textarea{ flex:1 1 100%; }
  .mr-chat .m-chat-form .m-knop{ flex:1 1 100%; }
}
/* Verder als gast rechts, net als de andere knoppen op deze pagina. */
@media (min-width:641px){ .m-acc .m-gastvak .m-knop{ margin-left:auto; } }

/* =========================================================
   TELEFOON: ALLES EEN TIKJE KLEINER (15-10-2026)
   Hasan: "op mobiel is alles een beetje te groot, mag kleiner".
   Koppen, kaarten, iconen en ruimtes ongeveer 10 tot 15 procent
   kleiner, het ritme gelijk. Grenzen: leestekst niet onder 14 px,
   knoppen minstens 40 hoog, invulvelden 16 px (anders zoomt iOS in).
   Alleen onder 600 breed. Per groep gescoped: .m-auth (alle
   inlogschermen, ook voor medewerkers), .mr (het overzicht van de
   klant), en de gedeelde onderdelen die ook Mijn klanten gebruikt
   (daar zet klanten.css de rest).
   ========================================================= */
@media (max-width:600px){
  html{ scroll-padding-top:108px; }
  /* bovenbalk */
  .m-top{ height:56px; }
  .m-sub{ top:56px; }
  .m-merk{ gap:10px; }
  .m-merk img{ height:27px; }
  .m-merk b{ font-size:14.5px; }
  .m-uit{ min-height:40px; padding:0 14px; }

  /* gedeelde onderdelen */
  .m-wrap{ gap:14px; }
  .m-kaart, .m-contact{ padding:18px 16px; }
  .m-kop{ margin-bottom:14px; gap:6px; }
  .m-kop h2{ font-size:19px; }
  .m-kop p{ font-size:15px; }
  .m-knop{ padding:13px 16px; font-size:15px; }
  .m-knop svg{ width:17px; height:17px; }
  .m-knop.groot{ min-height:48px; padding:0 20px; font-size:16px; }
  .m-ja-knoppen .m-knop{ min-height:48px; }
  .m-ja{ padding-top:20px; gap:12px; }
  .m-ja-klein{ font-size:15px; }
  .m-ja-door{ padding:12px 14px; gap:12px; }
  .m-ja-door img{ width:40px; height:40px; }
  .m-ja-door b{ font-size:16px; }
  .m-ja-door span{ font-size:15px; }
  .m-plak{ padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  body:has(.m-plak){ padding-bottom:72px; }
  .m-av{ width:46px; height:46px; font-size:15px; }
  .m-av.groot{ width:64px; height:64px; font-size:21px; }
  .m-chip{ font-size:13px; }
  .m-chip img{ width:24px; height:24px; }
  .m-dag{ gap:12px; padding:12px 16px 12px 12px; }
  .m-dag img{ width:46px; height:46px; }
  .m-dag strong{ font-size:16px; }
  .m-doc{ gap:12px; padding:12px 14px 12px 12px; }
  .m-doc .ic{ width:50px; height:50px; }
  .m-doc .ic img{ width:36px; height:36px; }
  .m-doc .pijl{ width:30px; height:30px; }
  .m-leeg{ padding:18px; gap:14px; }
  .m-leeg img{ width:54px; height:54px; }
  .m-nu > div{ padding:14px 16px; gap:12px; }
  .m-nu p{ font-size:15px; }
  .m-nu .bol{ width:32px; height:32px; }
  .m-prod{ min-height:130px; padding:14px; }
  .m-prod img{ width:72px; height:72px; }
  .m-prod b{ font-size:16px; }
  .m-weten li{ font-size:15px; }
  .m-takenstap li{ font-size:15px; }
  .m-inst-feiten div{ padding:10px 14px; }
  .m-inst-feiten dd{ font-size:15px; }
  .m-klaar li{ font-size:15px; }
  .m-klaar label{ min-height:44px; padding:8px 12px; }
  .m-chat-form{ gap:8px; margin-top:10px; }
  .m-chat-form textarea{ min-height:46px; padding:11px 14px; }
  .m-chat-form .m-knop{ min-height:46px; padding:0 14px; }
  .m-bel p{ font-size:15px; padding:9px 13px; }
  .m-chat-leeg img{ width:60px; height:60px; }
  .m-dialoog form{ padding:20px 16px; }
  .m-dialoog-kop img{ width:44px; height:44px; }
  .m-dialoog h2{ font-size:21px; }
  .m-weken{ margin:18px 0; }
  .m-weken label{ min-height:46px; padding:8px 12px; }
  .m-terug{ font-size:14.5px; }
  .m-pagkop{ font-size:26px; }
  .m-goed{ padding:12px 14px; font-size:14.5px; }
  .m-keuzeblok{ padding:16px; gap:12px; }
  .m-keuzekop{ gap:12px; }
  .m-keuzekop img{ width:38px; height:38px; }
  .m-keuzekop b{ font-size:15.5px; }
  .m-keuzekop span{ font-size:14px; }
  .m-gastvak input{ font-size:16px; padding:11px 14px; }   /* 15 px liet iOS inzoomen */
  .m-voet{ padding:4px 16px 32px; }

  /* inloggen (klant en medewerker, alle varianten) */
  .m-auth .m-formvlak{ padding:12px 16px 16px; }
  .m-auth .m-form .m-mobielmerk{ margin-bottom:10px; }
  .m-auth .m-form h2{ font-size:23px; }
  .m-auth .m-wissel{ margin-top:14px; }
  .m-auth .m-wissel a, .m-auth .m-wissel span.aan{ min-height:40px; font-size:14.5px; }
  .m-auth .m-form .m-wissel + .sub{ margin-top:14px; }
  .m-auth .m-form .sub{ margin:6px 0 14px; font-size:14.5px; }
  .m-auth .m-veld{ gap:6px; margin-bottom:10px; }
  .m-auth .m-veld input{ font-size:16px; padding:11px 14px; }
  .m-auth .m-veld input.code{ font-size:22px; padding:10px 8px 10px calc(8px + .42em); }
  .m-auth .m-veld input.code.vast{ font-size:21px; padding-left:calc(8px + .2em); }
  .m-auth .m-pw input{ padding-right:48px; }
  .m-auth .m-pw button{ bottom:4px; right:4px; }
  .m-auth .m-onthoud{ margin-bottom:12px; gap:10px; }
  .m-auth .m-fout{ padding:10px 12px; font-size:14.5px; }
  .m-auth .m-hulp{ margin-top:14px; padding-top:12px; }
  .m-auth .m-veilig{ margin-top:8px; }
  .m-auth .m-wwpaar{ gap:8px; }
  .m-auth .m-of{ margin:8px 0; }

  /* het overzicht van de klant (mijn/home.php) */
  body.mr{ font-size:15.5px; }
  .mr-wrap{ padding:16px 12px 28px; gap:12px; }
  .mr-wrap.mk{ gap:12px; }
  .mr-kaart, .mr-rechts .mr-kaart{ padding:18px 16px; }
  .mr-kaart h2{ font-size:19px; margin-bottom:14px; }
  .mr-noot{ font-size:15px; }
  .mk-held{ padding:22px 18px 0; }
  .mk-balk{ margin-bottom:10px; }
  .mk-stap{ font-size:14px; }
  .mk-held h1{ font-size:29px; margin-top:10px; }
  .mk-titel{ font-size:19px; margin-top:8px; }
  .mk-uitleg{ font-size:16px; margin-top:8px; }
  .mk-prod{ margin-top:16px; }
  .mk-prod img{ width:26px; height:26px; }
  .mk-dag{ gap:12px; margin-top:18px; padding:12px 16px 12px 12px; }
  .mk-dag img{ width:44px; height:44px; border-radius:11px; }
  .mk-dag strong{ font-size:18px; }
  .mk-dag small{ font-size:14.5px; }
  .mk-held .m-ja{ padding-top:20px; }
  .mk-held-figuur{ height:200px; }
  .mk-gloed{ width:260px; height:260px; bottom:-80px; }
  .mk-route{ gap:8px; }
  .mk-route li{ padding:12px 8px; gap:4px; }
  .mk-route .bol{ width:46px; height:46px; border-radius:13px; }
  .mk-route .bol img{ width:32px; height:32px; }
  .mk-route .t{ font-size:14.5px; }
  .mk-kop{ margin-bottom:14px; }
  .mk-nu .mr-nu > div{ padding:16px; }
  .mk-nu .mr-nu img{ width:38px; height:38px; margin-bottom:10px; }
  .mk-nu .mr-nu b{ font-size:16px; }
  .mr-nu p{ font-size:15.5px; }
  .mk-wie{ gap:10px; padding-top:12px; }
  .mk-wie span{ width:36px; height:36px; }
  .mk-wie p{ font-size:14.5px !important; }
  .mk-wie p strong{ font-size:15px; }
  .mr-adv{ padding:18px 16px; }
  .mr-adv h2{ font-size:20px; margin:4px 0 14px; }
  .mr-adv .mr-persoon .m-av.groot{ width:56px; height:56px; font-size:19px; }
  .mr-persoon{ gap:12px; }
  .mr-persoon strong{ font-size:16.5px; }
  .mr-persoon small{ font-size:14px; }
  .mr-notitie{ margin-top:14px; padding:12px 14px; font-size:15px; }
  .mr-knoppen{ margin-top:14px; gap:8px; }
  .mr-chat .m-chat{ height:280px; }
  .mr-chat .m-chat:has(#chatLeeg){ height:150px; }
  .mr-chat .m-chat-leeg p{ font-size:15px; }
  .mr-gedaan summary{ min-height:44px; font-size:15px; }
  .mr-docs a{ min-height:56px; padding:12px 4px; gap:12px; }
  .mr-docs img{ width:34px; height:34px; }
  .mr-docs b{ font-size:15.5px; }
  .mr-docs small{ font-size:14px; }
}

/* =========================================================
   Het figuur stapt uit de kop (16-10-2026, Hasan)
   ---------------------------------------------------------
   Net als Johan op de portaalhome van de adviseur: de voeten op de
   onderrand, hoofd en schouders boven de kaart uit, vóór de rand.
   De lichtvlekken blijven binnen de kaart. De naam staat erbij
   (merkboek). Op de telefoon blijft het figuur binnen de kaart.
   ========================================================= */
@media (min-width:761px){
  .mr-wrap.mk{ padding-top:72px; }
  .mk-held{ overflow:visible; }
  .mk-held::before{ left:0; top:0; width:100%; height:100%; border-radius:inherit;
    background:radial-gradient(360px circle at 60px 40px, rgba(255,255,255,.06), rgba(255,255,255,0) 70%); }
  .mk-held-figuur{ align-self:stretch; height:auto; min-height:340px; }
  .mk-gloed{ clip-path:inset(0 0 120px 0); }
  .mk-held-figuur img{ position:absolute; right:-24px; bottom:0; width:auto; height:calc(100% + 108px); max-height:600px; max-width:none; z-index:2;
    object-fit:contain; object-position:50% 100%; filter:drop-shadow(-10px 18px 22px rgba(6,15,46,.35)) drop-shadow(0 2px 3px rgba(6,15,46,.15)); }
  .mk-figuurnaam{ position:absolute; right:22px; bottom:18px; z-index:3; display:inline-flex; align-items:center; height:26px; padding:0 10px; line-height:1;
    border-radius:8px; background:rgba(255,255,255,.94); color:var(--navy); font-size:12.5px; font-weight:700; box-shadow:0 4px 12px rgba(6,15,46,.25); }
}
@media (max-width:760px){
  .mk-figuurnaam{ position:absolute; right:12px; bottom:12px; z-index:3; display:inline-flex; align-items:center; height:24px; padding:0 9px;
    border-radius:8px; background:rgba(255,255,255,.94); color:var(--navy); font-size:12px; font-weight:700; }
}

/* =========================================================
   Na het tekenen en na de oplevering (16-10-2026)
   ========================================================= */
.mk-klant, .mk-review{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px 24px; padding:24px 28px; border-radius:var(--r);
  background:linear-gradient(135deg, #FBF7EC, #fff 70%); border:2px solid var(--gold-soft, #EAD9A8); box-shadow:var(--schaduw, 0 10px 30px -14px rgba(13,27,75,.18)); }
.mk-klant-ic{ width:72px; height:72px; object-fit:contain; }
.mk-klant-l{ margin:0; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep, #8A6D1E); }
.mk-klant h2, .mk-review h2{ margin:4px 0 6px; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--navy); line-height:1.2; }
.mk-klant-t p:last-child, .mk-review-t p:last-child{ margin:0; font-size:16.5px; line-height:1.55; color:var(--body, #5A6178); max-width:60ch; }
.mk-klant .m-knop{ white-space:nowrap; }
.mk-review{ grid-template-columns:minmax(0,1fr) auto; }
.mk-review-k{ display:flex; flex-direction:column; gap:10px; min-width:260px; }
.mk-rev{ display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 18px 10px 12px; border-radius:14px; border:1.5px solid var(--line, #E6E9F2); background:#fff;
  text-decoration:none; color:var(--navy); transition:border-color .15s, transform .15s; }
.mk-rev:hover{ border-color:var(--gold); transform:translateY(-1px); }
.mk-rev:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(201,168,76,.55); }
.mk-rev-logo{ width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:20px; font-weight:800; color:#fff; }
.mk-rev.google .mk-rev-logo{ background:#4285F4; }
.mk-rev.trustpilot .mk-rev-logo{ background:#00B67A; }
.mk-rev b{ display:block; font-size:16px; }
.mk-rev small{ display:block; font-size:13.5px; color:var(--muted, #6B7289); }
.mk-ww .m-velden2{ margin-top:16px; }
.mk-ww-uitleg{ margin:16px 0 4px; font-size:16px; line-height:1.55; color:var(--body, #5A6178); }
.mk-ww .mk-ww-kop{ display:none; }
.mk-ww[data-voor="ja"] .mk-ww-kop[data-kop="ja"], .mk-ww:not([data-voor="ja"]) .mk-ww-kop[data-kop="los"]{ display:block; }
.mk-ww-code{ margin-top:16px; }
.mk-ww-code input{ font-size:22px; letter-spacing:.3em; font-variant-numeric:tabular-nums; max-width:220px; }
.mk-ww .m-fout{ margin-top:14px; }
.mk-ww-opnieuw{ margin-top:10px; text-align:center; }
.m-account .mk-ww-uitleg:first-child{ margin-top:0; }
@media (max-width:760px){
  .mk-klant{ grid-template-columns:56px minmax(0,1fr); padding:20px 18px; gap:14px; }
  .mk-klant-ic{ width:56px; height:56px; }
  .mk-klant .m-knop{ grid-column:1 / -1; justify-content:center; }
  .mk-review{ grid-template-columns:minmax(0,1fr); padding:20px 18px; }
  .mk-review-k{ min-width:0; }
  .mk-klant h2, .mk-review h2{ font-size:20px; }
}
/* Het welkomstvenster: kop en uitleg op dezelfde rand als het formulier. */
.mk-ww > .m-dialoog-kop{ padding:28px 28px 0; }
.mk-ww > .mk-ww-uitleg{ padding:0 28px; }
.mk-ww form{ padding-top:18px; }
@media (max-width:760px){ .mk-ww > .m-dialoog-kop{ padding:22px 18px 0; } .mk-ww > .mk-ww-uitleg{ padding:0 18px; } }

/* =========================================================
   Wachtwoord maken (21-10-2026)
   De balk staat bovenaan het overzicht zolang er geen wachtwoord is.
   Op de laptop steekt de merkfiguur 108 px boven de kop uit, dus houdt
   de balk die ruimte vrij. Op welkom.php staat hetzelfde formulier
   zonder venster eromheen.
   ========================================================= */
@media (min-width:761px){
  .mr-wrap.mk:has(> .mk-klant-boven){ padding-top:32px; }
  .mk-klant-boven{ margin-bottom:92px; }
}
.m-welkom-ww > .mk-ww-uitleg{ padding:0; margin-top:4px; }
.m-welkom-ww .m-dialoog-knoppen{ margin-bottom:6px; }
.m-welkom-later{ margin:6px 0 18px; font-size:15px; }
.m-welkom-later a{ color:var(--navy); font-weight:600; text-underline-offset:3px; }
#herDialoog .m-dialoog-kop{ margin-bottom:22px; }

/* =========================================================
   De offerte bevestigen (21-10-2026)
   Het venster achter Ja, ik wil door en de pagina met het bewijs.
   ========================================================= */
.mk-bevestig{ width:min(640px, calc(100% - 24px)); }
.mb-offerte{ display:flex; align-items:center; gap:14px; margin:18px 0 6px; padding:14px 16px; border-radius:var(--r-s); background:var(--soft); border:1px solid var(--line); }
.mb-offerte img{ width:44px; height:44px; object-fit:contain; flex:none; }
.mb-offerte div{ flex:1; min-width:0; }
.mb-offerte b{ display:block; color:var(--navy); font-size:16px; overflow-wrap:anywhere; }
.mb-offerte span{ font-size:13.5px; color:var(--muted); }
.mb-offerte a{ flex:none; font-weight:700; color:var(--navy); text-underline-offset:3px; }
.m .mb-kop{ margin:22px 0 10px; font-size:16px; font-weight:800; color:var(--navy); }
.mb-week-uitleg{ margin:8px 0 0; }
.mb-naamveld{ margin-bottom:8px; }
.mb-handtekening{ padding:10px 16px 6px; border-bottom:1.5px solid var(--navy); min-height:56px; display:flex; align-items:flex-end; }
.mb-handtekening span{ font-family:"Snell Roundhand","Segoe Script","Bradley Hand","Brush Script MT",cursive; font-size:36px; line-height:1.2; color:var(--navy); overflow-wrap:anywhere; }
.mb-tekenaan{ margin:10px 0 0; font-size:14.5px; }
.mb-tekenvak{ margin-top:10px; }
.mb-tekenvak canvas{ display:block; width:100%; height:auto; aspect-ratio:600 / 180; border:1.5px dashed var(--line); border-radius:var(--r-s); background:#fff; touch-action:none; cursor:crosshair; }
.mb-tekenvak .m-linkknop{ margin-top:6px; font-size:14px; }
.mb-akkoord{ display:flex; gap:12px; align-items:flex-start; margin:22px 0 18px; padding:14px 16px; border-radius:var(--r-s); background:var(--cream); border:1px solid var(--gold-soft); font-size:14.5px; line-height:1.5; color:var(--navy); cursor:pointer; }
.mb-akkoord input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--navy); }
.mb-akkoord a{ color:var(--navy); font-weight:700; text-underline-offset:3px; }
.m-ja-wacht{ margin-top:4px; }
.mb-tabel{ width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:15px; }
.mb-tabel th, .mb-tabel td{ text-align:left; vertical-align:top; padding:11px 0; border-bottom:1px solid var(--line); }
.mb-tabel th{ width:34%; padding-right:16px; font-weight:600; color:var(--muted); }
.mb-tabel td{ color:var(--navy); overflow-wrap:anywhere; }
.mb-tabel small{ color:var(--muted); font-size:13px; }
.mb-tabel code{ font-size:12px; word-break:break-all; }
.mb-tabel a{ color:var(--navy); font-weight:600; }
.mb-naam{ display:block; font-family:"Snell Roundhand","Segoe Script","Bradley Hand","Brush Script MT",cursive; font-size:30px; line-height:1.25; }
.mb-teken{ display:block; max-width:280px; width:100%; height:auto; margin-top:8px; }
@media (max-width:640px){
  .mb-tabel th{ width:auto; display:block; padding-bottom:2px; border-bottom:0; }
  .mb-tabel td{ display:block; padding-top:0; }
  .mb-handtekening span{ font-size:26px; }
}
@media print{
  .m-top, .m-terug, .m-acties{ display:none !important; }
  body{ background:#fff; }
  .mb-bewijs{ box-shadow:none; border:0; }
}

.mb-betaal{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mb-betaal div{ padding:14px 16px; border-radius:var(--r-s); background:var(--soft); border:1px solid var(--line); }
.mb-betaal b{ display:block; font-size:24px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.mb-betaal span{ font-size:14px; color:var(--muted); }

/* ---------- documenten per soort, met foto's (sinds 21-10-2026) ----------
   Hasan: documenten goed verdeeld, te filteren, en technische fiches en
   foto's op een eigen plek. Het filter staat er alleen bij meer dan één
   soort; foto's staan als raster en openen groot in .mr-licht. */
.mr-filter{ display:flex; gap:8px; margin:0 0 18px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.mr-filter::-webkit-scrollbar{ display:none; }
.mr-filter button{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:99px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:650; color:var(--navy); background:var(--paper); border:1.5px solid var(--line); white-space:nowrap; }
.mr-filter button span{ font-size:13px; font-weight:700; color:var(--muted); }
.mr-filter button:hover{ border-color:var(--gold-soft); }
.mr-filter button.aan{ background:var(--navy); border-color:var(--navy); color:#fff; }
.mr-filter button.aan span{ color:var(--gold-soft); }
.mr-groep + .mr-groep{ margin-top:22px; }
.mr-groep h3{ font-size:14px; font-weight:700; color:var(--gold-deep); letter-spacing:0; margin:0 0 6px; }
.mr-groep .mr-docs + .mr-fotos{ margin-top:12px; }
.mr-fotos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:12px; }
.mr-fotos a{ display:block; }
.mr-fotos img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-s); background:var(--soft); border:1px solid var(--line); transition:transform .3s var(--krachtig), box-shadow .3s var(--krachtig); }
.mr-fotos a:hover img{ transform:translateY(-2px); box-shadow:var(--schaduw-hoog); }
.mr-fotos span{ display:block; margin-top:6px; font-size:14px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mr-licht{ width:min(1000px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:var(--r); background:var(--navy-deep); color:#fff; overflow:hidden; }
.mr-licht::backdrop{ background:rgba(6,15,46,.78); }
.mr-licht[open]{ display:flex; flex-direction:column; }
.mr-licht-kop{ display:flex; align-items:center; gap:12px; padding:14px 14px 14px 20px; }
.mr-licht-kop > span{ flex:1; min-width:0; }
.mr-licht-kop b{ display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-licht-kop small{ display:block; font-size:13px; color:rgba(255,255,255,.66); }
.mr-licht-kop a{ font-size:14px; font-weight:700; padding:8px 14px; border-radius:10px; border:1.5px solid rgba(255,255,255,.24); }
.mr-licht-kop a:hover{ border-color:var(--gold); }
.mr-licht-kop button, .mr-licht-pijl{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.1); }
.mr-licht-kop button:hover, .mr-licht-pijl:hover{ background:rgba(255,255,255,.2); }
.mr-licht-beeld{ position:relative; display:flex; align-items:center; justify-content:center; min-height:0; flex:1; padding:0 12px 12px; }
.mr-licht-beeld img{ max-width:100%; max-height:calc(100vh - 120px); object-fit:contain; border-radius:var(--r-s); }
.mr-licht-pijl{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(6,15,46,.6); }
#lichtVorige{ left:20px; } #lichtVolgende{ right:20px; }
.mr-licht.een .mr-licht-pijl{ display:none; }
@media (max-width:760px){
  .mr-filter{ margin-right:-18px; padding-right:18px; }
  .mr-fotos{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .mr-fotos span{ font-size:12.5px; }
  .mr-licht{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .mr-licht-beeld{ padding:0 0 12px; }
  .mr-licht-beeld img{ max-height:calc(100dvh - 90px); border-radius:0; }
  #lichtVorige{ left:8px; } #lichtVolgende{ right:8px; }
}