/* MARSS x e-Government Suriname, samenwerkingsverkenning.
   Twee werelden, strikt gescheiden: de delen over MARSS in de MARSS-stijl (zwart, roze, Platform),
   de delen over e-Gov in hun eigen stijl (groen van gov.sr, Fira Sans, kwaststreep). */

@font-face { font-family: "Platform"; src: url("../fonts/Platform-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Platform"; src: url("../fonts/Platform-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Platform"; src: url("../fonts/Platform-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --kop: "Platform", "Helvetica Neue", Arial, sans-serif;
  --tekst: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --eg-kop: "Fira Sans", "Helvetica Neue", Arial, sans-serif;

  /* MARSS */
  --zwart: #0A0A0A;
  --zwart-2: #141414;
  --roze: #FDBFCA;
  --roze-fel: #F9A8BB;
  --roze-zacht: #FDE3E9;
  --wit: #fff;
  --lijn-licht: rgba(255, 255, 255, .14);
  --lijn-donker: rgba(10, 10, 10, .1);
  --licht: #F6F5F2;

  /* e-Gov, gemeten op gov.sr */
  --eg-groen: #387C3C;
  --eg-donker: #1F4A22;
  --eg-mid: #70A074;
  --eg-licht: #D6E2D6;
  --eg-mist: #EEF3EE;
  --eg-rood: #B4062A;
  --eg-geel: #ECC81A;
  --eg-tekst: #4B4B50;

  /* hero en login */
  --sr-nacht: #0C1F15;
  --sr-goud: #E8B71A;
  --hero-groen: #8FCB92;

  --sidebar: 400px;
  --pad: 56px;
  --uit: cubic-bezier(.16, 1, .3, 1);
  --veer: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { font-family: var(--tekst); background: var(--zwart); color: var(--zwart); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }

/* ---------- Merktekens ---------- */
.egov-mark { display: inline-flex; align-items: baseline; gap: .35em; font-family: var(--eg-kop); font-weight: 700; font-size: 15px; white-space: nowrap; }
.egov-mark span { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .62em; opacity: .8; }
.egov-logo { display: inline-flex; align-items: stretch; gap: 5px; height: 34px; }
.egov-logo b { display: grid; place-content: center; padding: 0 11px; border-radius: 0 7px 7px 0; background: var(--eg-groen); color: #fff; font: 700 16px var(--eg-kop); }
.vlag { position: relative; width: 52px; background: linear-gradient(180deg, var(--eg-groen) 0 20%, #fff 20% 30%, var(--eg-rood) 30% 70%, #fff 70% 80%, var(--eg-groen) 80%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.vlag::after { content: "\2605"; position: absolute; inset: 0; display: grid; place-content: center; color: var(--eg-geel); font-size: 13px; line-height: 1; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: flex; flex-direction: column; background: url("../images/hero.jpg") center / cover no-repeat; position: relative; color: #fff; font-family: var(--tekst); }
.login::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12, 31, 21, .86), rgba(12, 31, 21, .45)); }
.login > * { position: relative; z-index: 1; }
.login__logo { display: flex; align-items: center; gap: 16px; padding: 36px var(--pad); }
.login__marss { height: 30px; filter: brightness(0) invert(1); }
.login__x { opacity: .45; font-size: 20px; }
.login .egov-mark, .login .egov-mark span { color: #fff; }
.login__vak { flex: 1; display: grid; align-content: center; max-width: 560px; padding: 0 var(--pad) 80px; }
.login__kicker { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: var(--sr-goud); margin-bottom: 18px; }
.login__titel { font-family: var(--kop); font-size: clamp(38px, 5vw, 60px); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 18px; }
.login__sub { font-size: 16px; line-height: 1.6; opacity: .88; margin-bottom: 34px; }
.login__form { display: grid; gap: 12px; }
.login__input { padding: 17px 22px; font: 500 16px var(--tekst); border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); backdrop-filter: blur(10px); color: #fff; outline: none; transition: border-color .2s; }
.login__input:focus { border-color: var(--sr-goud); }
.login__input::placeholder { color: rgba(255, 255, 255, .5); }
.login__knop { padding: 17px 22px; font: 700 16px var(--kop); border: 0; border-radius: 10px; background: var(--sr-goud); color: var(--zwart); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.login__knop:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.login__fout { margin-top: 14px; color: #ffc2c2; font-size: 14px; }

/* ---------- Shell: licht, zoals een voorstel ---------- */
.badge { position: fixed; top: 0; right: 40px; z-index: 1000; background: #fff; padding: 18px 20px 20px; border-radius: 0 0 14px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .2); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); height: 100vh; background: var(--licht); color: var(--zwart); z-index: 100; display: flex; flex-direction: column; border-right: 1px solid var(--lijn-donker); }
.sidebar-header { padding: 40px var(--pad) 36px; border-bottom: 1px solid var(--lijn-donker); display: grid; gap: 16px; }
.sidebar-logo { display: block; aspect-ratio: 466 / 101; background: var(--roze); -webkit-mask: url("../images/marss-logo.png") center / contain no-repeat; mask: url("../images/marss-logo.png") center / contain no-repeat; }
.sidebar-logo { width: 168px; background: var(--zwart); }
.sidebar-met { font: 600 15px/1.4 var(--eg-kop); color: var(--eg-groen); max-width: 24ch; }
.sidebar-nav { flex: 1; padding: 44px var(--pad); overflow-y: auto; }
.nav-section { position: relative; padding-left: 26px; }
.nav-progress-bar { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--lijn-donker); margin-left: 3px; }
.nav-progress-fill { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; background: var(--eg-groen); border-radius: 50%; box-shadow: 0 0 0 5px rgba(56, 124, 60, .16); transition: top .5s var(--uit); }
.nav-item { display: block; font-family: var(--kop); font-weight: 500; font-size: 22px; line-height: 1.25; color: rgba(10, 10, 10, .38); text-decoration: none; margin-bottom: 14px; transition: color .25s, transform .4s var(--uit); }
.nav-item:hover { color: rgba(10, 10, 10, .75); }
.nav-item.active { color: var(--zwart); transform: translateX(4px); }
.sidebar-footer { padding: 30px var(--pad); display: grid; gap: 14px; }
.btn-side { display: block; padding: 16px 24px; background: var(--zwart); color: #fff; text-align: center; text-decoration: none; font: 700 15px var(--kop); border-radius: 999px; transition: transform .3s var(--uit), background .2s; }
.btn-side:hover { background: var(--eg-groen); transform: translateY(-2px); }
.sidebar-klein { font-size: 12px; color: rgba(10, 10, 10, .45); text-align: center; }

.mobile-nav { display: none; position: fixed; bottom: 15px; left: 16px; right: 16px; z-index: 100; flex-direction: column-reverse; opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; pointer-events: none; }
.mobile-nav.visible { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 16px 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); color: var(--zwart); border: 1px solid var(--lijn-donker); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); cursor: pointer; }
.mobile-nav.open .mobile-nav-toggle { border-radius: 0 0 18px 18px; }
.hamburger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 12px; }
.hamburger-line { display: block; height: 2px; background: var(--eg-groen); transition: all .3s; }
.mobile-nav.open .hamburger-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mobile-nav.open .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-nav.open .hamburger-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav-current { font: 700 14px var(--kop); }
.mobile-nav-dropdown { display: none; flex-direction: column; background: rgba(255, 255, 255, .98); border: 1px solid var(--lijn-donker); border-bottom: 0; border-radius: 18px 18px 0 0; overflow: hidden; }
.mobile-nav.open .mobile-nav-dropdown { display: flex; }
.mobile-nav-item { padding: 15px 22px; font: 500 15px var(--kop); color: rgba(10, 10, 10, .6); text-decoration: none; border-bottom: 1px solid var(--lijn-donker); }
.mobile-nav-item.active { color: var(--eg-groen); }

.main-content { margin-left: var(--sidebar); position: relative; width: calc(100% - var(--sidebar)); }

/* ---------- Hero (kleuren van Suriname) ---------- */
.hero { position: fixed; top: 0; left: var(--sidebar); right: 0; height: 100vh; overflow: hidden; background: var(--sr-nacht); z-index: 0; }
.hero__beelden { position: absolute; inset: 0; animation: heroIn 1.6s var(--uit) both; }
.hero__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: 0; transition: opacity 2.8s ease-in-out; animation: heroZoom 26s ease-in-out infinite alternate; }
.hero__beeld.is-zicht { opacity: 1; }
.hero__beeld--stad { object-position: 62% 60%; }
.hero .btn-outline::before { background: var(--eg-rood); box-shadow: 0 0 0 3px rgba(180, 6, 42, .3); }
.hero__waas { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 22, 14, .9) 0%, rgba(8, 22, 14, .62) 42%, rgba(8, 22, 14, .1) 100%), linear-gradient(0deg, rgba(8, 22, 14, .55), transparent 40%); }
.hero__inhoud { position: relative; z-index: 2; height: 100%; display: grid; align-content: center; padding: 0 var(--pad); max-width: 920px; color: #fff; }
.hero__kicker { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--hero-groen); margin-bottom: 22px; animation: kom .9s var(--uit) .3s both; }
.hero__titel { font-family: var(--kop); font-weight: 700; font-size: clamp(42px, 5.4vw, 80px); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 28px; animation: kom 1s var(--uit) .45s both; }
.hero__titel em { font-style: normal; color: var(--hero-groen); }
.hero__sub { font-size: 18px; line-height: 1.65; max-width: 600px; color: rgba(255, 255, 255, .9); margin-bottom: 40px; animation: kom 1s var(--uit) .6s both; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 16px; animation: kom 1s var(--uit) .75s both; }
.hero__voet { position: absolute; left: var(--pad); bottom: 32px; z-index: 2; display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .7); animation: kom 1s var(--uit) .9s both; }
.hero__voet b { color: #fff; }
.hero__label { position: absolute; right: 24px; bottom: 24px; z-index: 2; }
.hero-spacer { height: 100vh; }
@keyframes heroIn { from { opacity: 0; filter: blur(14px); transform: scale(1.08); } }
@keyframes heroZoom { to { transform: scale(1.07); } }
@keyframes kom { from { opacity: 0; transform: translateY(18px); } }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; font: 500 14px var(--tekst); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: 999px; cursor: pointer; border: 0; transition: transform .3s var(--uit), background .2s, color .2s; }
.btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--sr-goud); color: var(--zwart); }
.btn-outline { color: #fff; border: 1px solid rgba(255, 255, 255, .7); }
.btn-outline:hover { background: #fff; color: var(--zwart); }
.btn-zwart { background: var(--zwart); color: #fff; }
.btn-zwart::before { background: var(--roze); }
.label { display: inline-block; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--zwart); font: 700 10.5px var(--tekst); letter-spacing: .1em; text-transform: uppercase; }

/* Onthullen, zoals marss.amsterdam */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--uit), transform 1.1s var(--uit); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }

/* =====================================================================
   e-Gov-stijl: wit, lichtgroen, de diagonale vlakken en de kwaststreep van gov.sr
   ===================================================================== */
.eg { position: relative; z-index: 2; background: #fff; color: var(--eg-tekst); padding: 120px var(--pad); overflow: hidden; }
.section--eerste { box-shadow: 0 -24px 48px rgba(0, 0, 0, .18); }
.eg__vlakken, .laagvak__vlakken { position: absolute; inset: 0 0 auto 0; height: 420px; pointer-events: none; }
.eg__vlakken i, .laagvak__vlakken i { position: absolute; top: 0; height: 100%; background: var(--eg-licht); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
.eg__vlakken i:nth-child(1) { right: 6%; width: 34%; opacity: .55; }
.eg__vlakken i:nth-child(2) { right: -8%; width: 30%; opacity: .9; }
.eg__vlakken i:nth-child(3) { right: 26%; width: 16%; height: 60%; opacity: .35; }
.eg__kicker { font: 600 13px var(--eg-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--eg-groen); margin-bottom: 18px; }
.eg__titel, .paneel__titel { position: relative; display: inline-block; font: 700 clamp(36px, 4vw, 56px)/1.08 var(--eg-kop); color: #3f3f44; letter-spacing: -.01em; margin-bottom: 40px; max-width: 18ch; }
.kwast { position: absolute; left: -4px; bottom: -22px; width: min(260px, 70%); height: 22px; overflow: visible; }
.kwast path { fill: none; stroke: var(--eg-groen); stroke-linecap: round; stroke-width: 4.5; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.2s var(--uit) .35s; }
.kwast path + path { stroke-width: 2.5; opacity: .7; transition-delay: .55s; }
.in .kwast path { stroke-dashoffset: 0; }
.eg__intro { font-size: 18px; line-height: 1.75; max-width: 64ch; margin: 18px 0 56px; }
.eg__noot { font-size: 12.5px; color: #8a8a90; margin: 14px 0 70px; }

.eg-quote { display: grid; grid-template-columns: 6px 1fr; gap: 0 28px; margin-bottom: 56px; max-width: 860px; }
.eg-quote::before { content: ""; grid-row: span 2; background: linear-gradient(var(--eg-groen) 0 50%, var(--eg-rood) 50% 75%, var(--eg-geel) 75%); border-radius: 3px; }
.eg-quote blockquote { font: 600 clamp(22px, 2.2vw, 30px)/1.35 var(--eg-kop); color: var(--eg-donker); margin-bottom: 14px; }
.eg-quote figcaption { font-size: 14px; color: #77777d; }
.eg-quote figcaption b { color: var(--eg-groen); margin-right: 6px; }

/* Cijfers als beeld */
.eg-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.eg-cijfer { background: var(--eg-mist); border-radius: 8px; padding: 32px 30px 30px; display: grid; align-content: start; gap: 12px; position: relative; overflow: hidden; }
.eg-cijfer::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--eg-groen); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--uit) .3s; }
.eg-cijfer.in::after { transform: none; }
.eg-cijfer h3 { font: 700 20px var(--eg-kop); color: #3f3f44; margin-top: 10px; }
.eg-cijfer p { font-size: 14.5px; line-height: 1.6; }
.eg-cijfer p b { color: var(--eg-groen); }
.donut, .klok { position: relative; width: 170px; aspect-ratio: 1; }
.donut svg, .klok svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut__baan { fill: none; stroke: #F2CDD4; stroke-width: 14; }
.donut__deel { fill: none; stroke: var(--eg-groen); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 2s var(--uit) .3s; }
.in .donut__deel { stroke-dashoffset: calc(314.16 * (1 - var(--deel))); }
.donut__midden, .klok__midden { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut__midden b, .klok__midden b { font: 700 40px/1 var(--eg-kop); color: var(--eg-donker); }
.donut__midden span, .klok__midden span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #7a7a80; margin-top: 4px; }
.legenda { display: grid; gap: 6px; font-size: 14px; }
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda i { width: 10px; height: 10px; border-radius: 50%; }
.legenda i.groen { background: var(--eg-groen); }
.legenda i.rood { background: #E9A9B5; }
.legenda b { font-family: var(--eg-kop); color: #3f3f44; }
.klok__baan { fill: #fff; stroke: #E2EAE2; stroke-width: 8; }
.klok__deel { fill: none; stroke: var(--eg-rood); stroke-width: 8; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.8s var(--uit) .4s; }
.in .klok__deel { stroke-dashoffset: calc(314.16 * (1 - 10 / 60)); }
.klok__streepjes line { stroke: #B9C8B9; stroke-width: 2; stroke-linecap: round; }
.klok__wijzer { stroke: var(--eg-rood); stroke-width: 3; stroke-linecap: round; transform-origin: 60px 60px; transform: rotate(90deg); transition: transform 1.8s var(--uit) .4s; }
.in .klok__wijzer { transform: rotate(150deg); }
.klok__as { fill: var(--eg-rood); }
.klok__midden { padding-top: 40px; }
.klok__midden b { font-size: 30px; }
.mensen { display: grid; gap: 14px; min-height: 170px; align-content: center; }
.mensen__drie { display: flex; gap: 8px; }
.mensen__drie svg { width: 26px; fill: var(--eg-groen); }
.mensen__stippen { display: grid; grid-template-columns: repeat(23, 1fr); gap: 4px; max-width: 250px; }
.mensen__stippen i { aspect-ratio: 1; border-radius: 50%; background: var(--eg-mid); opacity: 0; transform: scale(0); transition: opacity .4s, transform .5s var(--veer); transition-delay: calc(.4s + var(--d) * 9ms); }
.in .mensen__stippen i { opacity: .75; transform: none; }

.eg-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.eg-kaart { border: 1px solid var(--eg-licht); border-radius: 8px; padding: 28px 28px 30px; background: #fff; transition: border-color .3s, transform .5s var(--uit), box-shadow .5s var(--uit); }
.eg-kaart:hover { border-color: var(--eg-mid); transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(31, 74, 34, .35); }
.eg-kaart__nr { font: 700 13px var(--eg-kop); color: var(--eg-mid); letter-spacing: .1em; }
.eg-kaart h3 { font: 700 21px var(--eg-kop); color: #3f3f44; margin: 8px 0 10px; }
.eg-kaart p { font-size: 15px; line-height: 1.65; }
.dvs { background: var(--eg-groen); color: #fff; border-radius: 8px; padding: 28px 30px; margin-bottom: 20px; }
.dvs__kop { font: 500 15px var(--eg-kop); margin-bottom: 18px; color: rgba(255, 255, 255, .8); }
.dvs__kop b { color: #fff; }
.dvs__sporen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dvs__sporen div { display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, .1); border-radius: 6px; padding: 14px 16px; font-size: 14px; line-height: 1.45; }
.dvs__sporen span { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-content: center; background: #fff; color: var(--eg-groen); font: 700 15px var(--eg-kop); }
.meegegeven { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.meegegeven__kop { font: 600 14px var(--eg-kop); color: var(--eg-groen); margin-right: 6px; }
.meegegeven ul { display: flex; flex-wrap: wrap; gap: 8px; }
.meegegeven li { padding: 8px 15px; border-radius: 99px; background: var(--eg-mist); border: 1px solid var(--eg-licht); font-size: 13.5px; }

/* =====================================================================
   MARSS-stijl: zwart, roze, Platform, rechte hoeken, pillen
   ===================================================================== */
.ms { position: relative; z-index: 2; background: var(--zwart); color: #fff; padding: 130px var(--pad); overflow: hidden; }
.ms__kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 13px var(--tekst); letter-spacing: .24em; text-transform: uppercase; color: var(--roze); margin-bottom: 26px; }
.ms__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ms__titel { font: 700 clamp(40px, 5vw, 76px)/1.02 var(--kop); letter-spacing: -.025em; max-width: 16ch; margin-bottom: 30px; }
.ms__titel--groot { font-size: clamp(44px, 6vw, 92px); max-width: 14ch; }
.ms__titel em { font-style: normal; color: var(--roze); }
.ms__intro { font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .72); max-width: 60ch; margin-bottom: 70px; }
.ms__intro b { color: #fff; }
.ms__link { color: var(--roze); text-decoration: underline; text-underline-offset: 3px; }
.ms__sub { font: 700 30px var(--kop); margin: 110px 0 30px; }

/* De raket: de raket en de vlam van Torarica, zes lagen, groot in het midden */
@keyframes adem { 50% { transform: scale(1.12); opacity: .7; } }
.ms--raket { padding-bottom: 100px; }
.podium { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 42%) 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.tr-rocket-svg { position: relative; }
.tr-rocket-svg svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; overflow: visible; }
.tr-flame-gl { position: absolute; left: 32%; top: 81.2%; width: 36%; height: 18.8%; z-index: 0; pointer-events: none; display: block; }
.tr-flames { transform-box: fill-box; transform-origin: 50% 0%; }
.tr-flames .fl-body { animation: flameWag .32s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0%; }
.tr-flames .fl-glow { animation: flameGlow .55s ease-in-out infinite; }
.tr-flames .fl-spark { animation: flameSpark .4s ease-in-out infinite; }
.tr-flames.boost .fl-body { animation-duration: .11s; }
.tr-flames.boost .fl-glow { animation-duration: .16s; fill: #F9C7D2; }
.tr-flames.boost .fl-out { fill: #F9C7D2 !important; }
.tr-flames.boost .fl-mid { fill: #F4AFC2 !important; }
.tr-flames.boost .fl-core { fill: #fff !important; }
.tr-flames.boost .fl-spark { animation-duration: .1s; fill: #F9C7D2; }
@keyframes flameWag { 0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); } 25% { transform: scaleY(1.06) scaleX(.86) rotate(-2.2deg); } 50% { transform: scaleY(.97) scaleX(1.06) rotate(1.8deg); } 75% { transform: scaleY(1.04) scaleX(.9) rotate(-1.2deg); } }
@keyframes flameGlow { 0%, 100% { opacity: .28; } 50% { opacity: .5; } }
@keyframes flameSpark { 0%, 100% { opacity: .15; transform: translateY(0); } 50% { opacity: .95; transform: translateY(4px); } }
.tr-stage { cursor: pointer; outline: none; transition: opacity .2s ease, scale .45s var(--veer), translate .6s var(--uit); transform-box: fill-box; transform-origin: center; }
.tr-stage .fill-shape { transition: fill .25s ease, stroke .25s ease; }
.tr-stage.dim { opacity: .7; }
.tr-stage.active { scale: 1.07; }
.tr-stage.active .fill-shape { fill: var(--roze); }
/* Opbouw zoals op marss.amsterdam: laag voor laag, daarna de vlam */
.podium .tr-stage, .podium .raket__vinnen, .podium .tr-flames, .podium .beugel { opacity: 0; translate: 0 14px; transition: opacity .5s var(--uit), translate .6s var(--uit), scale .45s var(--veer); }
.podium.in .tr-stage, .podium.in .raket__vinnen { opacity: 1; translate: none; transition-delay: calc(.3s + var(--i, 1.5) * .28s); }
.podium.in .tr-stage.dim { opacity: .7; transition-delay: 0s; }
.podium.in .tr-stage.active { transition-delay: 0s; }
.podium.in .tr-flames { opacity: 1; translate: none; transition-delay: 1.8s; }
.podium.in .beugel { opacity: 1; translate: none; transition-delay: 2s; }
.tr-flame-gl { opacity: 0; transition: opacity .6s 1.8s; }
.podium.in .tr-flame-gl { opacity: 1; }
.beugel line { stroke: #F9C7D2; stroke-width: 2; stroke-dasharray: 4 4; opacity: .6; transition: opacity .3s; }
.beugel line + line, .beugel line + line + line { stroke-dasharray: none; }
.beugel text { font: 500 10px var(--tekst); letter-spacing: 2px; fill: #F9C7D2; text-anchor: middle; transition: opacity .3s; }
.beugel--ai line, .beugel--ai text { stroke-opacity: .9; }
.beugel--ai text { fill: #fff; opacity: .7; }
.beugel--ai line { stroke: rgba(255, 255, 255, .6); }

/* De lagen als tekst naast de raket, zoals op marss.amsterdam */
.lagen { display: grid; gap: 10px; }
.laag-kaart { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 22px; text-align: left; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .03); color: #fff; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .4s var(--uit); }
.laag-kaart:hover { background: rgba(255, 255, 255, .08); }
.laag-kaart.active { background: #fff; color: var(--zwart); border-color: #fff; transform: translateX(-6px); }
.laag-kaart__nr { font: 700 22px/1 var(--kop); color: var(--roze); }
.laag-kaart.active .laag-kaart__nr { color: #b0607c; }
.laag-kaart__tekst b { display: block; font: 700 18px/1.25 var(--kop); margin-bottom: 4px; }
.laag-kaart__tekst span { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .65); }
.laag-kaart.active .laag-kaart__tekst span { color: rgba(10, 10, 10, .7); }
.laag-kaart__open { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); color: var(--roze); font: 600 12.5px var(--tekst); white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.laag-kaart__open em { font-style: normal; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .45s var(--uit), opacity .3s, margin .45s var(--uit); }
.laag-kaart__open i { font-style: normal; font-size: 15px; transition: transform .4s var(--veer); }
.laag-kaart:hover .laag-kaart__open, .laag-kaart.active .laag-kaart__open { background: var(--roze); border-color: var(--roze); color: var(--zwart); }
.laag-kaart.active .laag-kaart__open { background: var(--eg-groen); border-color: var(--eg-groen); color: #fff; }
.laag-kaart:hover .laag-kaart__open em, .laag-kaart.active .laag-kaart__open em { max-width: 160px; opacity: 1; margin-right: 8px; }
.laag-kaart:hover .laag-kaart__open i, .laag-kaart.active .laag-kaart__open i { transform: translateX(2px); }

/* Klik: een grotere pop-up in e-Gov-stijl */
.laagpop { position: fixed; inset: 0 0 0 var(--sidebar); z-index: 1100; display: grid; place-items: center; padding: 4vh 4vw; }
.laagpop[hidden] { display: none; }
.laagpop__waas { position: absolute; inset: 0; background: rgba(10, 10, 10, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s; }
.laagpop.is-open .laagpop__waas { opacity: 1; }
.laagpop__kaart { position: relative; width: min(1040px, 100%); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--eg-tekst); border-radius: 20px; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.3); transition: transform .6s var(--uit), opacity .35s; }
.laagpop.is-open .laagpop__kaart { opacity: 1; transform: none; }
.laagpop__kaart .laagvak__vlakken { height: 260px; }
.laagvak__vlakken i:nth-child(1) { right: 4%; width: 30%; opacity: .6; }
.laagvak__vlakken i:nth-child(2) { right: -10%; width: 28%; }
.laagpop__sluit { position: sticky; top: 18px; float: right; margin: 18px 18px 0 0; z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--eg-groen); cursor: pointer; transition: transform .4s var(--veer), background .2s; }
.laagpop__sluit:hover { transform: rotate(90deg); background: var(--eg-donker); }
.laagpop__sluit span { position: absolute; left: 15px; right: 15px; top: 23px; height: 2px; background: #fff; transform: rotate(45deg); }
.laagpop__sluit span + span { transform: rotate(-45deg); }
.laagpop__inhoud { position: relative; z-index: 2; padding: 48px 52px 36px; }
.laagpop__inhoud > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--uit), transform .7s var(--uit); }
.laagpop.is-open .laagpop__inhoud > * { opacity: 1; transform: none; transition-delay: .25s; }
.laagpop.is-open .laagpop__inhoud > :nth-child(3) { transition-delay: .35s; }
.laagpop.is-open .laagpop__inhoud > :nth-child(4) { transition-delay: .45s; }
.laagpop.is-open .kwast path { stroke-dashoffset: 0; }
.laagpop__voet { margin-top: 26px; font-size: 13.5px; color: #7a7a80; }
.laag-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.laag-kop .eg__kicker { margin: 0; }
.laag-route { padding: 5px 12px; border-radius: 99px; background: var(--zwart); color: var(--roze); font: 500 11px var(--tekst); letter-spacing: .12em; text-transform: uppercase; }
.paneel__titel { margin: 22px 0 50px; font-size: clamp(32px, 3vw, 44px); }
.paneel__duo { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; }
.paneel__duo h4 { font: 600 12.5px var(--eg-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--eg-groen); margin-bottom: 16px; }
.paneel__hoorden { background: var(--eg-mist); border-radius: 8px; padding: 24px; align-self: start; }
.paneel__hoorden li { position: relative; padding: 0 0 12px 20px; font-size: 15px; line-height: 1.55; }
.paneel__hoorden li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--eg-groen); }
.paneel__kansen { counter-reset: kans; }
.kans { display: grid; gap: 3px; padding: 14px 0 14px 54px; border-bottom: 1px solid var(--eg-licht); position: relative; counter-increment: kans; }
.kans::before { content: counter(kans); position: absolute; left: 0; top: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; background: var(--eg-groen); color: #fff; font: 700 15px var(--eg-kop); }
.kans b { font: 700 18px var(--eg-kop); color: #3f3f44; }
.kans span { font-size: 14.5px; line-height: 1.55; }
.paneel__voet { padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--eg-licht); }
.paneel__voet p { font-size: 13.5px; color: #7a7a80; }
.paneel__voet div { display: flex; gap: 8px; }
.paneel__knop { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--eg-groen); background: #fff; color: var(--eg-groen); font: 600 13.5px var(--eg-kop); cursor: pointer; transition: background .2s, color .2s; }
.paneel__knop:hover, .paneel__knop--vol { background: var(--eg-groen); color: #fff; }
.paneel__knop--vol:hover { background: var(--eg-donker); }

/* Schetsen per laag: half zichtbaar, zodat het een indruk blijft */
.schetsen { position: relative; margin: 36px -52px 0; padding: 30px 52px 44px; background: var(--eg-mist); }
.schetsen__kop { font: 600 12.5px var(--eg-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--eg-groen); margin-bottom: 20px; }
.schetsen__rij { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.schets { position: relative; flex: 0 0 auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 50px -28px rgba(31, 74, 34, .5), 0 0 0 1px rgba(31, 74, 34, .06); overflow: hidden; }
.schets:nth-child(2) { margin-top: 30px; }
.laagpop.is-open .schets { animation: kom .9s var(--uit) .5s both; }
.laagpop.is-open .schets:nth-child(2) { animation-delay: .65s; }
.schets__kop { font: 600 11px var(--eg-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--eg-groen); margin-bottom: 12px; }
.schets__label { position: absolute; right: 52px; bottom: 16px; z-index: 5; font: 600 10.5px var(--eg-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--eg-mid); }
.waas { filter: blur(1.6px); opacity: .75; }
.waas-balk { display: block; height: 8px; border-radius: 4px; background: var(--eg-licht); margin-top: 7px; }
.waas-balk.kort { width: 60%; }
.egov-logo--klein { height: 22px; gap: 3px; }
.egov-logo--klein .vlag { width: 32px; }
.egov-logo--klein .vlag::after { font-size: 9px; }
.egov-logo--klein b { font-size: 11px; padding: 0 7px; border-radius: 0 4px 4px 0; }
.kaartje { padding: 20px 20px 22px; }
.kaartje--breed { width: 320px; }
.kaartje--smal { width: 250px; }
.kaartje--verhaal { border-left: 5px solid var(--eg-groen); }
.groot { display: block; font: 700 19px/1.25 var(--eg-kop); color: #3f3f44; margin-bottom: 8px; }
.kaartje p:not(.schets__kop) { font-size: 13.5px; line-height: 1.5; }

.tel { width: 210px; aspect-ratio: 9 / 17; border-radius: 28px; border: 6px solid #111; background: #111; }
.tel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }
.tel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(8, 22, 14, .85)); }
.tel__boven { position: absolute; left: 12px; top: 14px; z-index: 2; }
.tel__onder { position: absolute; left: 14px; right: 14px; bottom: 30px; z-index: 2; color: #fff; }
.tel__onder small { font-size: 11px; opacity: .8; }
.tel__onder b { display: block; font: 700 19px/1.15 var(--eg-kop); margin: 4px 0 8px; }
.tel__onder .waas-balk { background: rgba(255, 255, 255, .35); filter: blur(2px); }
.tel__voortgang { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 3px; background: rgba(255, 255, 255, .25); border-radius: 2px; z-index: 2; overflow: hidden; }
.tel__voortgang i { display: block; height: 100%; background: #fff; transform-origin: left; animation: voortgang 6s linear infinite; }
@keyframes voortgang { from { transform: scaleX(0); } }
.district, .toon, .toegang { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--eg-mist); font-size: 13px; }
.district b, .toon b, .toegang b { font: 600 13.5px var(--eg-kop); color: #3f3f44; }
.district .waas-balk { margin: 0; }
.toon { grid-template-columns: 1fr auto; }
.toon span { padding: 4px 10px; border-radius: 99px; background: var(--eg-mist); color: var(--eg-groen); font: 600 12px var(--eg-kop); }
.toegang { grid-template-columns: 100px 1fr 14px; }
.toegang span { color: #8a8a90; }
.slot-i { width: 12px; height: 10px; border-radius: 2px; background: var(--eg-groen); position: relative; margin-top: 4px; }
.slot-i::before { content: ""; position: absolute; left: 2px; top: -6px; width: 6px; height: 6px; border: 2px solid var(--eg-groen); border-bottom: 0; border-radius: 4px 4px 0 0; }
.echt { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: var(--eg-mist); margin-bottom: 10px; }
.echt i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; background: var(--eg-groen); color: #fff; font-style: normal; font-size: 14px; }
.echt b { font: 600 13.5px var(--eg-kop); color: #3f3f44; }
.meter { display: grid; gap: 6px; padding: 9px 0; border-top: 1px solid var(--eg-mist); }
.meter b { font: 600 13.5px var(--eg-kop); color: #3f3f44; }
.meter span { display: block; height: 8px; border-radius: 4px; background: var(--eg-mist); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--eg-groen); transform-origin: left; transform: scaleX(var(--w)); transition: transform 1.4s var(--uit) .8s; }
.laagpop:not(.is-open) .meter i { transform: scaleX(0); }
.chat { width: 300px; display: flex; flex-direction: column; }
.chat--groot { width: 400px; }
.chat--groot .chat__berichten { height: 440px; overflow: hidden; align-content: end; scroll-behavior: smooth; }
.bericht ol { margin: 6px 0 2px 18px; display: grid; gap: 3px; list-style: decimal; }
.bericht small { display: block; margin-top: 7px; font-size: 11.5px; color: #7a7a80; }
.chat__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; background: #fff; border-top: 1px solid var(--eg-licht); }
.chat__tags span { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--eg-licht); font: 500 12px var(--eg-kop); color: var(--eg-donker); transition: background .3s, color .3s, border-color .3s; }
.chat__tags span.is-aan { background: var(--eg-groen); border-color: var(--eg-groen); color: #fff; }
.chat__berichten > * { animation: bericht .45s var(--veer) both; }
@keyframes bericht { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.overdracht { justify-self: center; padding: 6px 12px; border-radius: 99px; background: var(--eg-licht); color: var(--eg-donker); font: 600 12px var(--eg-kop); }
.chat__kop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--eg-groen); color: #fff; }
.chat__kop b { display: block; font: 600 14.5px var(--eg-kop); }
.chat__kop small { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .85; }
.chat__kop small i { width: 7px; height: 7px; border-radius: 50%; background: #9fe0a3; }
.chat__berichten { display: grid; gap: 9px; padding: 16px; background: #F7FAF7; align-content: start; }
.bericht { max-width: 84%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: #fff; font-size: 13.5px; line-height: 1.45; box-shadow: 0 0 0 1px var(--eg-licht); }
.bericht--ik { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--eg-groen); color: #fff; box-shadow: none; }
.bericht .waas-balk { margin: 4px 0; width: 170px; }
.bericht .waas-balk.kort { width: 100px; }
.typen { display: inline-flex; gap: 4px; padding: 11px 13px; background: #fff; border-radius: 14px; justify-self: start; box-shadow: 0 0 0 1px var(--eg-licht); }
.typen i { width: 6px; height: 6px; border-radius: 50%; background: var(--eg-mid); animation: typen 1.2s ease-in-out infinite; }
.typen i:nth-child(2) { animation-delay: .15s; }
.typen i:nth-child(3) { animation-delay: .3s; }
@keyframes typen { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .4; } }
.intake { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--eg-mist); }
.intake b { display: block; font: 600 13px var(--eg-kop); color: #3f3f44; }
.intake small { font-size: 11.5px; color: #8a8a90; }
.intake em { font-style: normal; font: 600 10.5px var(--eg-kop); padding: 4px 8px; border-radius: 99px; background: var(--eg-mist); color: var(--eg-groen); }
.stip { width: 10px; height: 10px; border-radius: 50%; background: var(--eg-rood); box-shadow: 0 0 0 4px rgba(180, 6, 42, .12); }
.stip--bezig { background: var(--eg-geel); box-shadow: none; }
.stip--klaar { background: var(--eg-groen); box-shadow: none; }
.stem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stem div { display: grid; gap: 6px; }
.stem__beeld { aspect-ratio: 3 / 4; border-radius: 8px; }
.s1 { background: linear-gradient(160deg, #ECC81A, #B4062A); }
.s2 { background: linear-gradient(160deg, #70A074, #1F4A22); }
.s3 { background: linear-gradient(160deg, #D6E2D6, #387C3C); }
.stem b { font: 600 12px var(--eg-kop); color: #3f3f44; }
.stem button { border: 0; border-radius: 99px; padding: 6px; background: var(--eg-groen); color: #fff; font: 600 11.5px var(--eg-kop); }

/* De reis: een raket langs de drie stops */
.ms--reis { padding-bottom: 110px; }
.reis { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.reis__kaart { display: block; width: 100%; height: auto; overflow: visible; }
.reis__spoor { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.reis__gedaan { fill: none; stroke: var(--roze); stroke-width: 2.5; stroke-linecap: round; }
.reis__planeet { transform-box: fill-box; transform-origin: center; transition: transform .8s var(--veer), opacity .6s; opacity: .45; transform: scale(.88); }
.reis__planeet.is-bereikt { opacity: 1; transform: none; }
.reis__gloed { fill: rgba(253, 191, 202, .14); opacity: 0; transition: opacity .8s; }
.reis__planeet.is-bereikt .reis__gloed { opacity: 1; animation: adem 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.reis__ring { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; }
.reis__stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; padding: 30px var(--pad) 0; }
.stop { opacity: .4; transition: opacity .6s, transform .8s var(--uit); transform: translateY(10px); }
.stop.is-bereikt { opacity: 1; transform: none; }
.stop span { font: 500 12px var(--tekst); letter-spacing: .2em; text-transform: uppercase; color: var(--roze); }
.stop h4 { font: 700 26px/1.15 var(--kop); margin: 10px 0; }
.stop p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .65); max-width: 30ch; margin: 0 auto; }

/* Hoe nu verder: klein en licht */
.slot { position: relative; z-index: 2; background: var(--licht); color: var(--zwart); padding: 70px var(--pad) 60px; }
.slot__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; margin-bottom: 30px; }
.slot__kop h2 { font: 700 30px var(--kop); letter-spacing: -.01em; }
.slot__kop p { font-size: 14.5px; color: rgba(10, 10, 10, .6); max-width: 46ch; }
.slot__lijn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--lijn-donker); margin-bottom: 36px; }
.slot__lijn li { position: relative; padding: 22px 20px 0 0; display: grid; gap: 4px; }
.slot__lijn li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--zwart); }
.slot__lijn li:first-child::before { background: var(--eg-groen); box-shadow: 0 0 0 4px rgba(56, 124, 60, .18); }
.slot__lijn span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(10, 10, 10, .5); }
.slot__lijn b { font: 500 16px/1.35 var(--kop); }
.slot__contact { display: flex; flex-wrap: wrap; gap: 20px 44px; padding-top: 26px; border-top: 1px solid var(--lijn-donker); }
.persoon { display: flex; align-items: center; gap: 14px; }
.persoon img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.persoon b { display: block; font: 700 15px var(--kop); }
.persoon a { font-size: 13.5px; color: rgba(10, 10, 10, .6); text-decoration: none; }
.persoon a:hover { color: var(--eg-groen); }

/* Verslag van het gesprek */
.verslag { display: grid; grid-template-columns: 280px 1fr; gap: 40px; margin-bottom: 90px; align-items: start; }
.verslag__meta { position: sticky; top: 40px; background: var(--eg-groen); color: #fff; border-radius: 8px; padding: 28px; }
.verslag__label { font: 600 12px var(--eg-kop); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.verslag__datum { font: 700 26px/1.15 var(--eg-kop); margin: 6px 0 20px; }
.verslag__meta dl { display: grid; gap: 4px; font-size: 14px; line-height: 1.5; }
.verslag__meta dt { font: 600 11.5px var(--eg-kop); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-top: 12px; }
.verslag__punten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.verslag__punt { padding: 24px 0 26px; border-top: 1px solid var(--eg-licht); }
.verslag__punt span { font: 700 13px var(--eg-kop); color: var(--eg-mid); letter-spacing: .1em; }
.verslag__punt h3 { font: 700 21px var(--eg-kop); color: #3f3f44; margin: 6px 0 8px; }
.verslag__punt p { font-size: 15px; line-height: 1.7; }
.eg__sub { font: 700 24px var(--eg-kop); color: #3f3f44; margin-bottom: 22px; }
.voet { position: relative; z-index: 2; background: var(--licht); color: rgba(10, 10, 10, .45); font-size: 12.5px; padding: 26px var(--pad); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--lijn-donker); }

/* ---------- Responsief ---------- */
@media (max-width: 1500px) {
  :root { --sidebar: 320px; --pad: 44px; }
  .nav-item { font-size: 19px; }
}
@media (max-width: 1200px) {
  .eg-cijfers, .eg-drie, .dvs__sporen { grid-template-columns: 1fr; }
  .eg-cijfer { grid-template-columns: 170px 1fr; align-items: center; column-gap: 30px; }
  .eg-cijfer > :first-child { grid-row: span 3; }
  .paneel__duo, .verslag { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; }
  .tr-rocket-svg { max-width: 300px; margin: 0 auto; width: 100%; }
  .verslag__meta { position: static; }
}
@media (max-width: 960px) {
  :root { --sidebar: 0px; }
  .sidebar, .badge { display: none; }
  .main-content { margin-left: 0; width: 100%; }
  .hero { left: 0; }
  .mobile-nav { display: flex; }
  .voet { padding-bottom: 100px; }
}
@media (max-width: 768px) {
  :root { --pad: 22px; }
  .eg, .ms { padding: 84px var(--pad); }
  .eg__titel, .paneel__titel { font-size: 34px; }
  .eg__intro, .ms__intro { font-size: 16px; margin-bottom: 44px; }
  .ms__titel { font-size: 40px; }
.ms__sub { margin-top: 70px; }
  .hero__inhoud { align-content: end; padding-bottom: 120px; }
  .hero__titel { font-size: 36px; margin-bottom: 16px; }
  .hero__sub { font-size: 15px; margin-bottom: 22px; }
  .hero__voet { display: none; }
  .hero__knoppen .btn { width: 100%; justify-content: center; }
  .eg-cijfer { grid-template-columns: 1fr; }
  .eg-cijfer > :first-child { grid-row: auto; }
  .tr-rocket-svg { max-width: 240px; }
  .laag-kaart { padding: 16px; grid-template-columns: 26px 1fr auto; }
  .laagpop { padding: 0; place-items: end center; }
  .laagpop__kaart { max-height: 92vh; border-radius: 20px 20px 0 0; }
  .laagpop__inhoud { padding: 30px var(--pad) 30px; }
  .schetsen { margin-inline: calc(var(--pad) * -1); padding: 24px var(--pad) 44px; }
  .schets:nth-child(2) { margin-top: 0; }
  .schets__label { right: var(--pad); }
  .kaartje--breed, .kaartje--smal, .chat { width: 100%; }
      .verslag__punten, .slot__lijn { grid-template-columns: 1fr; }
  .reis__stops { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .slot__kop { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}