/* Pagina Alles wat je kunt doen (mogelijkheden.html) */
/* Pagina 'Alles wat je kunt doen': per bouwer een eigen kleur, zoals op de website */
.mg{--k:var(--c1);--kt:var(--c1)}
.mg-top{padding-block:44px 8px}
.mg-top h1{font:400 clamp(44px,8vw,96px)/.95 var(--f-disp);text-transform:uppercase;margin:6px 0 18px}
.mg-top h1 span{color:var(--c1)}
.mg-top .lead{max-width:44em;font-size:20px;color:var(--paper);margin:0}
.mg-back{font:600 15px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.mg-back:hover{color:var(--paper)}
.mg-nav{position:sticky;top:calc(var(--head-h) + env(safe-area-inset-top,0px));z-index:10;background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line);margin-top:28px}
.mg-nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:12px 0;list-style:none}
.mg-nav a{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--k);color:var(--paper);text-decoration:none;font:600 15px var(--f-cond);letter-spacing:.05em;text-transform:uppercase}
.mg-nav a:hover{background:color-mix(in srgb,var(--k) 22%,transparent)}
.mg-nav i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--k);color:#fff;font:700 13px/1 var(--f-cond);font-style:normal}
.k1{--k:var(--c1);--kt:var(--c1)}.k1 .mg-nav i,.k1 i.n{color:var(--ink)}
.k2{--k:var(--c2);--kt:#5aa0ee}.k3{--k:var(--c3);--kt:var(--c3-text)}
.k4{--k:#e0661b;--kt:#f0915a}.k5{--k:#d13f8f;--kt:#ee7ab8}.k6{--k:#7c8a8f;--kt:#c9d2d5}
.mg-sec{padding:56px 0 8px;scroll-margin-top:calc(var(--head-h) + 70px)}
.mg-kop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:center;padding:0 0 22px;margin-bottom:26px;border-bottom:3px solid var(--k)}
.mg-kop i.n{grid-row:span 2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--k);color:#fff;font:400 30px/1 var(--f-disp);font-style:normal}
.mg-kop h2{font:400 clamp(36px,5vw,60px)/1 var(--f-disp);text-transform:uppercase;color:var(--kt);margin:0}
.mg-kop p{margin:0;font-size:19px;color:var(--paper);max-width:48em}
.mg-groep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.mg-blok{background:linear-gradient(180deg,color-mix(in srgb,var(--k) 12%,var(--panel)) 0%,var(--panel) 60%);border:2px solid color-mix(in srgb,var(--k) 45%,var(--line));border-radius:18px;padding:22px 24px 20px;min-width:0}
.mg-blok h3{font:600 23px/1.2 var(--f-cond);letter-spacing:.04em;text-transform:uppercase;color:var(--kt);margin:0 0 4px}
.mg-blok > p{margin:0 0 12px;font-size:16px;color:var(--muted)}
.mg-blok ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.mg-blok li{padding-left:14px;border-left:3px solid var(--k);font-size:16px;line-height:1.5;color:var(--muted)}
.mg-blok li b{display:block;color:var(--paper);font-weight:600;font-size:17px}
.mg-blok.breed{grid-column:1/-1}
.mg-blok.breed ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.mg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mg-tags span{font:500 12.5px/1 var(--f-mono);letter-spacing:.04em;padding:6px 8px;border-radius:6px;background:var(--raised);border:1px solid var(--line);color:var(--paper)}
.mg-eind{margin:64px 0 72px;padding:30px 24px;border:3px solid var(--paper);border-radius:22px 28px 20px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.mg-eind h2{font:400 clamp(30px,4vw,44px)/1 var(--f-disp);text-transform:uppercase;margin:0}
.mg-eind p{margin:0;color:var(--muted);max-width:40em}
.mg-eind .btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.mg-eind a:not(.btn){color:var(--c1);text-underline-offset:3px}
.mg-head-btn{min-height:42px;padding:0 16px;font-size:15px}
@media (max-width:900px){.mg-groep,.mg-blok.breed ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .mg-top{padding-block:28px 8px}.mg-top .lead{font-size:18px}
  .mg-nav ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:10px 2px;scrollbar-width:none}
  .mg-nav ul::-webkit-scrollbar{display:none}
  .mg-nav a{flex:none;min-height:38px;font-size:14px;padding:0 12px}
  .mg-sec{padding-top:40px}
  .mg-kop i.n{width:46px;height:46px;font-size:24px}
  .mg-kop p{font-size:17px}
  .mg-blok{padding:18px 16px 16px}
  .mg-eind{padding:24px 16px}.mg-eind .btn-row{display:grid;width:100%}.mg-eind .btn{width:100%}
  .mg-head-btn{display:none}
}
@media (min-width:1500px){.mg .wrap{max-width:1320px}}
.mg-blok li a{color:var(--c1);text-underline-offset:3px}
.mg-foot a{color:inherit}
/* Over ATM: gegevens helemaal onderaan */
.mg-eind:has(+ .ov-geg){margin-bottom:28px}
.ov-geg{margin:0 0 72px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.ov-geg h2{font:600 20px var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.ov-geg dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin:0}
.ov-geg dl > div{display:grid;align-content:center;padding:18px 16px;border-radius:14px;background:var(--panel);border:2px solid var(--line);min-width:0}
.ov-geg dt{font:600 15px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--c1);margin-bottom:6px}
.ov-geg dd{margin:0;font-size:17px;line-height:1.5;color:var(--paper);overflow-wrap:anywhere}
.ov-geg a{color:var(--paper);text-underline-offset:3px}
.ov-geg a:hover{color:var(--c1)}
@media (max-width:760px){.ov-geg dl{grid-template-columns:minmax(0,1fr)}}
.ov-geg dd img{display:block;margin:0 auto;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}