/* ───────────────────────────────────────────────────────────
   Groei door Spanning — platform-omhulsel
   Huisstijl overgenomen uit de originele bestanden.
   Alles is gescoped onder .gds-app zodat het thema niet botst.
   ─────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────
   CLS-fix: metric-aangepaste fallback-lettertypen.
   De tekst wordt eerst getoond in een systeemfont dat qua
   afmetingen (hoogte, breedte, regelval) bijna identiek is aan
   Montserrat resp. Lora. Wanneer het echte webfont binnenkomt en
   wordt verwisseld, verspringt de tekst daardoor nauwelijks of
   niet — dit haalt het grootste deel van de layout shift weg.
   ─────────────────────────────────────────────────────────── */
@font-face {
  font-family:'Montserrat Fallback';
  src:local('Arial');
  ascent-override:79%;
  descent-override:20.5%;
  line-gap-override:0%;
  size-adjust:111.5%;
}
@font-face {
  font-family:'Lora Fallback';
  src:local('Georgia');
  ascent-override:96%;
  descent-override:26%;
  line-gap-override:0%;
  size-adjust:103%;
}

.gds-app {
  --blauw:#5B9DB5; --blauw-d:#3D7A94; --blauw-dd:#2A5F78; --blauw-l:#E8F4F8;
  --geel:#F5C842; --geel-d:#D4A820;
  --comfort:#4d7c52; --weerstand:#a05a2c; --verkenning:#3D7A94; --verankering:#2A5F78;
  --zwart:#1A1A1A; --grijs:#5A5A5A; --rand:#C8DDE6; --wit:#fff; --bg:#edf4f7;
  --shadow:0 2px 16px rgba(61,122,148,.14);
  --gds-topbar-h:64px;
  --font-display:'Proxima Nova','Montserrat','Montserrat Fallback',system-ui,sans-serif;
  --font-body:'Proxima Nova','Montserrat','Montserrat Fallback',system-ui,sans-serif;
  --font-serif:'Lora','Lora Fallback',Georgia,serif;

  position:relative;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--zwart);
  min-height:100vh;
  /* Voorkomt dat de pagina na een overscroll-bounce naar boven blijft
     hangen (content + gele lijn zakken dan onder de header uit en veren
     niet terug). De bounce zelf blijft gewoon werken; hij veert alleen
     netjes terug naar de bovenkant. */
  overscroll-behavior-y:none;
}

/* Volledige schermbreedte: breekt uit de smalle thema-kolom.
   Gebruikt left:50% + translateX zodat het onafhankelijk is van
   de breedte of padding van de thema-container (Kadence/Elementor).
   Menu en paginatitel van het thema blijven gewoon bovenaan staan. */
.gds-app.gds-vol{
  position:relative;
  width:100vw;
  max-width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  /* GEEN overflow op .gds-app: een overflow-waarde anders dan visible
     maakt in WebKit/Safari een 'containing block' voor position:fixed
     descendants, waardoor de vaste topbar (en de gele lijn eronder) niet
     meer aan het viewport hangt maar meescrollt. De horizontale
     uitloop-bescherming staat daarom op .gds-main (zie hieronder), die
     de topbar niet omvat. */
}
/* Horizontale uitloop afvangen op de content-laag, NIET op .gds-app,
   zodat de fixed topbar buiten elke clip-context blijft. */
.gds-app .gds-main{overflow-x:clip}
.gds-app *,.gds-app *::before,.gds-app *::after{box-sizing:border-box;margin:0;padding:0}

/* ── Topbar ── */
/* Vast verankerd aan de bovenkant van het scherm (viewport), niet aan de
   thema-container. Daardoor sluit de header op ALLE pagina's strak tegen
   de bovenkant en ontstaat er geen witte kier meer tijdens het scrollen.
   De inhoud eronder krijgt padding-top ter compensatie (zie .gds-main). */
.gds-topbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:16px;
  background:var(--blauw);
  padding:12px max(20px, 4vw);
  height:var(--gds-topbar-h, 64px);
  min-height:var(--gds-topbar-h, 64px);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
  flex-wrap:nowrap;
}
.gds-logo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:pointer;font-family:var(--font-body);
  /* De titel is een echte link. Zonder deze regel zet het thema er zijn
     eigen onderstreping onder, die bij hover weer verdwijnt. */
  text-decoration:none;color:inherit}
.gds-app .gds-logo:hover,.gds-app .gds-logo:focus{text-decoration:none;opacity:.85}
.gds-app .gds-logo:focus-visible{outline:2px solid var(--geel);outline-offset:3px}
.gds-logo-label{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;line-height:1.2}
.gds-logo-titel{font-size:16px;font-weight:700;color:#fff;font-family:var(--font-body);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gds-acties{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.gds-btn-login,.gds-btn-koop,.gds-nav-toggle,.gds-badge-toegang{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;box-sizing:border-box;line-height:1;
  font-family:var(--font-body);font-weight:700;white-space:nowrap;text-decoration:none;border-radius:6px;
}
.gds-btn-login,.gds-btn-koop,.gds-nav-toggle{cursor:pointer}
.gds-btn-login{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:0 14px;font-size:12px}
.gds-btn-login:hover{background:rgba(255,255,255,.28)}
.gds-btn-koop{background:var(--geel);border:none;color:var(--zwart);padding:0 16px;font-size:12px;font-weight:800;gap:7px}
.gds-btn-koop:hover{background:var(--geel-d)}
.gds-btn-koop .gds-cart-ico{font-size:14px;line-height:1;display:inline-flex;align-items:center}
.gds-btn-koop .gds-cart-aantal{display:inline-flex;align-items:center;gap:7px}
.gds-btn-koop .gds-cart-aantal::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(0,0,0,.45)}
.gds-badge-toegang{color:#fff;font-size:12px;background:rgba(255,255,255,.18);padding:0 14px;border:1px solid rgba(255,255,255,.25)}
/* Account-dropdown (ingelogde gebruiker): zelfde stijl als de Menu-knop. */
.gds-account{position:relative;display:inline-flex}
.gds-account-knop{cursor:pointer;gap:8px;position:relative;padding:0 14px}
.gds-account-knop .gds-chevron{transition:transform .2s}
.gds-account-knop[aria-expanded="true"] .gds-chevron{transform:rotate(180deg)}
.gds-account-knop:hover{background:rgba(255,255,255,.28)}
.gds-account-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:120;
  min-width:200px;background:#fff;border:1px solid var(--rand);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.gds-account-menu[hidden]{display:none}
.gds-account-naam{padding:8px 12px 6px;font-size:12px;color:var(--grijs);font-weight:700;
  border-bottom:1px solid var(--rand);margin-bottom:4px;white-space:nowrap}
.gds-account-uitloggen{display:block;padding:9px 12px;border-radius:6px;text-decoration:none;
  color:var(--zwart);font-size:13px;font-weight:700;font-family:var(--font-body)}
.gds-account-uitloggen:hover{background:var(--blauw-l, #E8F4F8)}
.gds-nav-toggle{position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:0 26px !important;font-size:12px;min-width:120px}
.gds-nav-toggle .gds-chevron{position:absolute !important;right:12px;top:50%;transform:translateY(-50%)}
.gds-nav-toggle.open .gds-chevron{transform:translateY(-50%) rotate(180deg)}
.gds-nav-toggle-label{display:block;width:100%;text-align:center;line-height:1}
.gds-nav-toggle:hover{background:rgba(255,255,255,.28)}
.gds-chevron{font-size:9px;line-height:1;transition:transform .2s}

/* ── Drawer ── */
.gds-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;backdrop-filter:blur(2px)}
.gds-nav-overlay.open{display:block}
.gds-nav-drawer{
  position:fixed;top:0;right:0;height:100vh;width:300px;max-width:85%;
  background:var(--wit);z-index:100;transform:translateX(100%);transition:transform .25s ease;
  box-shadow:-4px 0 20px rgba(0,0,0,.15);overflow-y:auto;padding-bottom:32px;
}
.gds-nav-drawer.open{transform:translateX(0)}
.gds-nav-juridisch{margin-top:8px;border-top:1px solid var(--rand);background:#fbfdfe}
.gds-nav-jlink{display:block;padding:9px 10px;border-radius:6px;text-decoration:none;color:var(--blauw-dd);font-size:13px;font-weight:600}
.gds-nav-jlink:hover{background:var(--blauw-l)}
.gds-drawer-kop{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--rand);font-family:var(--font-display);font-weight:700;color:var(--blauw-dd);position:sticky;top:0;background:#fff}
.gds-drawer-sluit{background:none;border:none;font-size:18px;cursor:pointer;color:var(--grijs)}
.gds-nav-groep{padding:12px 12px 4px}
.gds-nav-groep-titel{display:block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--grijs);font-weight:700;padding:6px 8px}

/* ── Inklapbare menugroep (bv. de veertien emoties) ── */
.gds-nav-groep-kop{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-body);text-align:left;border-radius:6px;transition:background .15s}
.gds-nav-groep-kop:hover{background:var(--blauw-l)}
.gds-nav-groep-kop .gds-nav-groep-titel{flex:1 1 auto;padding:8px 8px}
.gds-nav-aantal{flex:0 0 auto;font-size:10px;font-weight:800;color:var(--blauw-d);background:var(--blauw-l);border-radius:999px;min-width:20px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.gds-nav-vouwpijl{flex:0 0 auto;font-size:11px;color:var(--blauw-d);margin-right:8px;transition:transform .2s ease;line-height:1}
.gds-nav-vouwbaar .gds-nav-inklap{display:none}
.gds-nav-vouwbaar.gds-open .gds-nav-inklap{display:block}
.gds-nav-vouwbaar.gds-open .gds-nav-vouwpijl{transform:rotate(90deg)}
.gds-nav-groep-kop:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

.gds-app .gds-nav-item{display:flex !important;align-items:center !important;gap:10px;width:100%;text-align:left;background:none;border:none;font-family:var(--font-body);font-size:14px;line-height:1.3;color:var(--zwart);padding:11px 10px;border-radius:6px;cursor:pointer;min-height:0}
/* Menu-items zijn soms een knop (wisselen binnen de app) en soms een link
   (onderdeel met een eigen pagina). Ze horen er identiek uit te zien. */
.gds-app a.gds-nav-item{text-decoration:none;color:var(--zwart)}
.gds-app a.gds-nav-item.gds-vergrendeld{color:var(--grijs)}
.gds-nav-item:hover{background:var(--blauw-l)}
.gds-nav-item.gds-actief{background:var(--blauw-l);font-weight:700;color:var(--blauw-dd)}
.gds-app .gds-nav-nr{display:inline-flex;align-items:center;font-size:11px;font-weight:800;color:var(--blauw-d);min-width:30px;line-height:1.3;flex:0 0 auto}
.gds-app .gds-nav-emoji{display:inline-flex;align-items:center;justify-content:center;width:24px;line-height:1.3;flex:0 0 auto;color:var(--blauw-d)}
.gds-app .gds-nav-emoji .gds-ico-svg{display:block;width:22px;height:22px}
.gds-nav-item.gds-actief .gds-nav-emoji{color:var(--blauw-dd)}
.gds-app .gds-nav-titel{display:inline-flex;align-items:center;line-height:1.3;flex:1 1 auto;min-width:0}
.gds-nav-item.gds-vergrendeld{color:var(--grijs)}
.gds-nav-item.gds-vergrendeld .gds-nav-emoji{color:var(--grijs)}
.gds-slot{margin-left:auto;font-size:12px;opacity:.7}

/* ── Main / views ── */
/* De topbar is position:fixed en valt dus buiten de flow. Zonder compensatie
   zou de bovenste inhoud achter de header verdwijnen. Daarom schuiven we de
   inhoud met de headerhoogte naar beneden. Op de overige pagina's hoort de
   gele lijn (.gds-main::before) bij de inhoud en scrollt zo mee weg achter
   de vaste header — precies het gewenste gedrag. */
.gds-main{position:relative;padding-top:var(--gds-topbar-h, 64px)}
/* Gele accentstreep boven de inhoud — scrollt mee omhoog terwijl de
   headerbalk vast blijft staan (zelfde gedrag als op de juridische
   pagina's). Over de volledige breedte, uniform op alle schermen.
   Dit is het gedrag op de OVERZICHTSPAGINA (landing): de lijn zit in de
   flow en scrollt mee. */
.gds-main::before{content:'';display:block;height:6px;background:var(--geel)}

/* Op de OVERIGE pagina's (hoofdstuk-frames, binnenkort) plakt de gele
   lijn vast tegen de onderkant van de vaste header en scrolt het scherm
   erachter langs. We verbergen dan de mee-scrollende flow-lijn en tonen
   in plaats daarvan een vaste lijn, exact op de headerhoogte. Zo blijft
   de lijn nooit onder de header hangen (ook niet bij de Safari-bounce). */
.gds-app.gds-view-overig .gds-main{padding-top:calc(var(--gds-topbar-h, 64px) + 6px)}
.gds-app.gds-view-overig .gds-main::before{display:none}
.gds-app.gds-view-overig .gds-topbar::after{
  content:'';position:absolute;left:0;right:0;top:100%;
  height:6px;background:var(--geel);
  pointer-events:none;
}
/* Is de bezoeker ingelogd, dan staat de WordPress-adminbalk vast bovenin.
   De topbar schuift daaronder, zodat hij niet half achter die balk verdwijnt.
   De gele lijn hangt aan de topbar vast en volgt dus vanzelf. */
body.admin-bar .gds-topbar{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .gds-topbar{top:46px}
}
.gds-view{display:none}
.gds-view.gds-actief{display:block}

/* Hero */
.gds-hero{text-align:center;padding:44px 24px 28px;background:linear-gradient(180deg,#fff,var(--bg))}
.gds-hero h1{font-family:var(--font-display);font-size:34px;color:var(--blauw-dd);margin-bottom:14px;line-height:1.15}
.gds-hero-sub{max-width:580px;margin:0 auto 22px;color:var(--grijs);font-size:16px;line-height:1.6}
.gds-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gds-btn-primair,.gds-btn-secundair,.gds-btn-bestel{font-family:var(--font-body);cursor:pointer;border-radius:8px;font-weight:700;font-size:15px;padding:12px 22px;text-decoration:none;border:none}
.gds-btn-primair,.gds-btn-bestel{background:var(--geel);color:var(--zwart);font-weight:800}
.gds-btn-primair:hover,.gds-btn-bestel:hover{background:var(--geel-d)}
.gds-btn-secundair{background:#fff;color:var(--blauw-dd);border:1.5px solid var(--blauw)}
.gds-btn-secundair:hover{background:var(--blauw-l)}

.gds-sectie-titel{font-family:var(--font-display);font-size:24px;color:var(--blauw-dd);text-align:center;margin:36px 0 18px}

/* Curve-knop: klikbaar blok met curve-tekening + zoneband */
.gds-curve-blok{padding:0 24px}
.gds-curve-knop{display:block;width:100%;max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--rand);border-radius:14px;padding:20px 20px 16px;cursor:pointer;font-family:var(--font-body);transition:transform .12s,box-shadow .12s}
.gds-curve-knop:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gds-curve-svg{display:block;width:100%;height:150px}
.gds-curve-zones{display:flex;gap:6px;margin-top:10px;border-radius:8px;overflow:hidden}
.gds-zone{flex:1;text-align:center;padding:12px 8px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.4px}
.gds-zone-comfort{background:var(--comfort)}
.gds-zone-weerstand{background:var(--weerstand)}
.gds-zone-verkenning{background:var(--verkenning)}
.gds-zone-verankering{background:var(--verankering)}
.gds-curve-cta{display:block;text-align:center;margin-top:14px;color:var(--blauw-d);font-weight:700;font-size:14px}

/* Kaarten */
/* Kaarten — compact en professioneel */
.gds-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start;gap:14px;max-width:1080px;margin:0 auto;padding:0 24px 8px}
.gds-kaart{align-self:start !important;height:auto !important;min-height:0 !important;max-height:none;position:relative;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;align-items:flex-start !important;gap:8px !important;background:#fff;border:1px solid var(--rand);border-left-width:4px;border-radius:10px;padding:16px 18px !important;cursor:pointer;font-family:var(--font-body);text-align:left;transition:transform .12s,box-shadow .12s}
.gds-kaart:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gds-kaart.gds-zone-comfort{border-left-color:var(--comfort)}
.gds-kaart.gds-zone-weerstand{border-left-color:var(--weerstand)}
.gds-kaart.gds-zone-verkenning{border-left-color:var(--verkenning)}
.gds-kaart.gds-zone-verankering{border-left-color:var(--verankering)}
.gds-kaart-nr{font-size:12px;font-weight:800;letter-spacing:.5px;color:var(--blauw-d);margin:0 !important;flex:0 0 auto}
.gds-kaart-titel{font-family:var(--font-body);font-size:18px;font-weight:700;color:var(--zwart);line-height:1.2;margin:0 !important;flex:0 0 auto}
.gds-kaart-tag{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--grijs);background:var(--blauw-l);padding:3px 9px;border-radius:10px;margin:0 !important;flex:0 0 auto}
.gds-kaart.gds-betaald .gds-kaart-tag{background:#f3e6c6;color:var(--geel-d)}

/* Koop-blok */
.gds-koop-blok{text-align:center;background:var(--blauw-dd);color:#fff;margin:32px 24px;padding:32px 24px;border-radius:12px}
.gds-koop-blok h2{font-family:var(--font-display);font-size:24px;margin-bottom:8px}
.gds-koop-blok p{opacity:.85;margin-bottom:18px}

/* iframe-view — naadloos: groeit mee met de inhoud, geen modulerand */
.gds-view[data-view="frame"]{height:auto;background:var(--bg)}

/* "Binnenkort"-pagina (getoond als er nog geen winkel is) */
.gds-binnenkort{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:64px 6vw;background:var(--bg)}
.gds-binnenkort-kaart{max-width:640px;width:100%;text-align:center;background:#fff;border:1px solid var(--rand);border-radius:20px;padding:48px 40px;box-shadow:0 22px 60px rgba(42,95,120,.14)}
.gds-binnenkort-ico{font-size:40px;line-height:1;margin-bottom:18px}
.gds-binnenkort-kaart h2{font-family:var(--font-body);font-size:clamp(26px,3.4vw,38px);line-height:1.12;color:var(--blauw-d);margin:0 0 16px;font-weight:800}
.gds-binnenkort-kaart p{font-size:17px;line-height:1.6;color:var(--grijs);margin:0 auto 14px;max-width:520px}
.gds-binnenkort-acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.gds-binnenkort-knop{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:10px;background:var(--geel);color:var(--zwart);font-weight:800;font-size:15px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s;box-shadow:0 10px 24px rgba(245,200,66,.36)}
.gds-binnenkort-knop:hover{transform:translateY(-2px)}
.gds-binnenkort-terug{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:10px;background:#fff;color:var(--blauw-d);font-weight:700;font-size:15px;border:2px solid var(--rand);cursor:pointer;font-family:var(--font-body);transition:border-color .18s}
.gds-binnenkort-terug:hover{border-color:var(--blauw)}
.gds-frames{position:relative;width:100%}
.gds-frame{width:100%;height:600px;border:none;display:block;background:transparent}

@media(max-width:600px){
  .gds-hero h1{font-size:26px}
  .gds-zone{font-size:10px;padding:10px 4px;letter-spacing:0}
  .gds-logo-titel{font-size:13px}
  .gds-logo-label{font-size:9px}
  .gds-curve-svg{height:110px}
  .gds-kaarten{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ───────────────────────────────────────────────────────────
   Veranderprofiel-landingspagina (vp-) — gescoped onder .gds-app
   ─────────────────────────────────────────────────────────── */
.gds-app .vp-land{--roest:#B66A3C;--groen:#6E9A67;--zacht:#F7FBFC;--shadow-strong:0 14px 34px rgba(42,95,120,.18)}
.gds-app .vp-hero{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);padding:56px 24px 36px;position:relative}
.gds-app .vp-hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.12fr .88fr;gap:34px;align-items:center}
.gds-app .vp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;color:var(--blauw-d);background:var(--blauw-l);border:1px solid var(--rand);border-radius:999px;padding:7px 13px;margin-bottom:18px}
.gds-app .vp-h1{font-family:var(--font-display);font-size:46px;line-height:1.08;color:var(--blauw-dd);font-weight:700;margin:0 0 16px}
.gds-app .vp-hero-sub{color:var(--grijs);font-size:17px;line-height:1.75}
.gds-app .vp-hero-note{font-size:13px;color:var(--grijs);margin-top:16px}
.gds-app .vp-hero-time{font-weight:700;color:var(--blauw-dd);margin-top:8px}
.gds-app .vp-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.gds-app .vp-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-weight:900;font-size:15px;padding:13px 24px;border:0;cursor:pointer;font-family:var(--font-body)}
.gds-app .vp-btn-primary{background:var(--geel);color:var(--zwart);box-shadow:0 8px 18px rgba(212,168,32,.22)}
.gds-app .vp-btn-primary:hover{background:var(--geel-d)}
.gds-app .vp-btn-secondary{background:#fff;color:var(--blauw-dd);border:1.5px solid var(--blauw)}
.gds-app .vp-btn-secondary:hover{background:var(--blauw-l)}
.gds-app .vp-hero-panel{background:#fff;border:1px solid var(--rand);border-radius:18px;box-shadow:var(--shadow-strong);padding:26px;position:relative;overflow:hidden;min-height:300px}
.gds-app .vp-hero-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--geel)}
.gds-app .vp-panel-title{font-family:var(--font-display);font-size:25px;color:var(--blauw-dd);line-height:1.2;margin-bottom:14px}
.gds-app .vp-mini-list{display:grid;gap:12px}
.gds-app .vp-mini-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--rand);background:var(--zacht);border-radius:11px;padding:13px}
.gds-app .vp-mini-icon{width:30px;height:30px;border-radius:999px;background:var(--blauw);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.gds-app .vp-mini-item strong{display:block;color:var(--zwart);font-size:14.5px;margin-bottom:1px}
.gds-app .vp-mini-item span{display:block;color:var(--grijs);font-size:13.5px;line-height:1.45}
.gds-app .vp-shell{max-width:1120px;margin:0 auto;padding:0 24px 50px}
.gds-app .vp-section{margin:42px 0}
.gds-app .vp-section-title{font-family:var(--font-display);font-size:30px;line-height:1.2;color:var(--blauw-dd);margin-bottom:12px;text-align:center}
.gds-app .vp-section-intro{max-width:760px;margin:0 auto 24px;color:var(--grijs);font-size:16px;text-align:center}
.gds-app .vp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.gds-app .vp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.gds-app .vp-info-card{background:#fff;border:1px solid var(--rand);border-radius:13px;padding:34px 36px !important;box-shadow:var(--shadow);height:100%}
.gds-app .vp-info-card h3{font-size:19px;line-height:1.3;margin:0 0 10px !important;color:var(--blauw-dd)}
.gds-app .vp-info-card p{color:var(--grijs);font-size:15px;line-height:1.55;margin:0 0 10px !important}
.gds-app .vp-info-card p:last-child{margin-bottom:0 !important}
.gds-app .vp-quote-card{background:var(--blauw-dd);color:#fff;border-radius:13px;padding:36px 38px !important;box-shadow:var(--shadow-strong);position:relative;overflow:hidden;height:100%}
.gds-app .vp-quote-card::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--geel)}
.gds-app .vp-quote-card h2{font-family:var(--font-display);font-size:26px;margin:0 0 10px !important;line-height:1.2;color:#fff !important}
.gds-app .vp-quote-card p{opacity:.92;font-size:16px;line-height:1.55;margin:0 !important}
.gds-app .vp-target-card{background:#fff;border:1px solid var(--rand);border-radius:13px;padding:26px 24px !important;box-shadow:var(--shadow);height:100%;display:flex;flex-direction:column}
.gds-app .vp-target-icon{width:46px;height:46px;border-radius:12px;background:var(--blauw-l);border:1px solid var(--rand);display:flex;align-items:center;justify-content:center;color:var(--blauw-dd);font-size:22px;line-height:1;margin-bottom:12px}
.gds-app .vp-target-icon .gds-ico-svg{display:block;width:24px;height:24px}
.gds-app .vp-target-card h3{color:var(--blauw-dd);font-size:17px;margin:0 0 8px !important}
.gds-app .vp-target-card p{color:var(--grijs);font-size:14px;line-height:1.55;margin:0 !important}
.gds-app .vp-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.gds-app .vp-check{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--rand);border-radius:10px;padding:14px;color:var(--zwart);font-size:14px;box-shadow:var(--shadow)}
.gds-app .vp-check span{color:var(--blauw-d);font-weight:900;line-height:1.2}
.gds-app .vp-check strong{display:block;color:var(--zwart);margin-bottom:1px}
.gds-app .vp-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}

/* ── Tools-blok op het overzicht ── */
.gds-app .vp-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;align-items:stretch}
.gds-app .vp-tool-card{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:24px;box-shadow:var(--shadow);height:100%;display:flex;flex-direction:column}
.gds-app .vp-tool-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gds-app .vp-tool-icon{font-size:26px;line-height:1;color:var(--blauw-d);display:inline-flex}
.gds-app .vp-tool-icon .gds-ico-svg{display:block;width:26px;height:26px}
.gds-app .vp-tool-gratis{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#1a7d3c;background:#e7f4ec;border-radius:20px;padding:4px 12px}
.gds-app .vp-tool-slot{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--blauw-dd);background:var(--blauw-l);border-radius:20px;padding:4px 12px}
.gds-app .vp-tool-card h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--blauw-dd);margin:0 0 8px}
.gds-app .vp-tool-card p{color:var(--grijs);font-size:14px;line-height:1.55;margin:0 0 16px;flex:1 1 auto}
.gds-app .vp-tool-btn{width:100%;margin-top:auto}
.gds-app .vp-step{background:#fff;border:1px solid var(--rand);border-radius:12px;padding:22px 20px;box-shadow:var(--shadow);min-height:152px}
.gds-app .vp-step-nr{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blauw);color:#fff;font-weight:900;font-size:13px;margin-bottom:12px}
.gds-app .vp-step h3{font-size:15px;color:var(--blauw-dd);line-height:1.25;margin-bottom:7px}
.gds-app .vp-step p{font-size:13px;color:var(--grijs);line-height:1.5}
.gds-app .vp-curve-section{background:#fff;border:1px solid var(--rand);border-radius:18px;box-shadow:var(--shadow);padding:28px}
.gds-app .vp-curve-content{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.gds-app .vp-curve-copy h3{font-family:var(--font-display);font-size:26px;color:var(--blauw-dd);line-height:1.2;margin-bottom:10px}
.gds-app .vp-curve-copy p{color:var(--grijs);font-size:15px;margin-bottom:10px}
.gds-app .vp-curve-visual{background:var(--zacht);border:1px solid var(--rand);border-radius:14px;padding:20px}
.gds-app .vp-curve-svg{display:block;width:100%;height:210px;aspect-ratio:900 / 260}
.gds-app .vp-zone-row{display:grid;grid-template-columns:1fr 1.35fr 1.25fr;gap:8px;margin-top:14px}
.gds-app .vp-zone{background:#fff;border:1px solid var(--rand);border-top:5px solid;color:var(--zwart);text-align:left;font-weight:800;font-size:12px;padding:10px;border-radius:10px}
.gds-app .vp-zone span{display:block;font-weight:700;color:var(--grijs);font-size:11px;margin-top:2px;line-height:1.35}
.gds-app .vp-z1{border-top-color:#5E8F36}
.gds-app .vp-z2{border-top-color:#D94300}
.gds-app .vp-z3{border-top-color:#00749E}
.gds-app .vp-final-cta{text-align:center;background:var(--blauw-dd);color:#fff;margin:42px 0 0;padding:36px 24px;border-radius:15px;box-shadow:var(--shadow-strong)}
.gds-app .vp-final-cta h2{font-family:var(--font-display);font-size:30px;margin-bottom:8px;color:#fff !important}
.gds-app .vp-final-cta p{opacity:.87;max-width:640px;margin:0 auto 20px}
.gds-app .vp-final-cta .vp-btn-primary{box-shadow:none}
.gds-app .vp-koop-inline{margin-top:14px}
.gds-app .vp-toegang-belofte{margin:12px auto 0;max-width:560px;font-size:13px;line-height:1.5;color:#E8F4F8;opacity:.92}
.gds-app .vp-privacy-note{max-width:640px;margin:20px auto 0;padding:16px 18px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:14px;line-height:1.6;text-align:left}
.gds-app .vp-privacy-note strong{color:#fff}
.gds-app .vp-final-cta .vp-btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.gds-app .vp-final-cta .vp-btn-secondary:hover{background:rgba(255,255,255,.12)}
.gds-app .vp-shell .gds-kaarten{padding-left:0;padding-right:0}

@media(max-width:930px){
  .gds-app .vp-hero-inner,.gds-app .vp-curve-content,.gds-app .vp-grid-2{grid-template-columns:1fr}
  .gds-app .vp-grid-4{grid-template-columns:1fr 1fr}
  .gds-app .vp-steps{grid-template-columns:1fr 1fr}
  .gds-app .vp-hero{padding-top:42px}
  .gds-app .vp-h1{font-size:36px}
  .gds-app .vp-curve-svg{height:180px}
}
@media(max-width:600px){
  .gds-app .vp-hero{padding:32px 18px 24px}
  .gds-app .vp-h1{font-size:29px}
  .gds-app .vp-hero-sub{font-size:15px}
  .gds-app .vp-shell{padding:0 16px 38px}
  .gds-app .vp-grid-4,.gds-app .vp-check-grid,.gds-app .vp-steps,.gds-app .vp-tools-grid{grid-template-columns:1fr}
  .gds-app .vp-section-title{font-size:24px}
  .gds-app .vp-info-card,.gds-app .vp-quote-card,.gds-app .vp-curve-section{padding:24px 22px}
  .gds-app .vp-curve-visual{padding:14px}
  .gds-app .vp-curve-svg{height:140px}
  .gds-app .vp-zone-row{grid-template-columns:1fr}
  .gds-app .vp-btn{width:100%}
}

/* ── Footer met juridische links onderaan het platform ── */
.gds-app .gds-platform-footer{background:var(--blauw-dd);color:#fff;padding:30px 24px;text-align:center;margin-top:0}
.gds-app .gds-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:14px}
.gds-app .gds-footer-links a{color:var(--blauw-l);text-decoration:none;font-size:14px;font-weight:600}
.gds-app .gds-footer-links a:hover{color:var(--geel)}
.gds-app .gds-footer-onder{font-size:12px;color:#9fc2d0}

/* ── Slotkaart voor een onderdeel dat rechtstreeks in de pagina staat ──
   (onderdelen in een iframe hebben hun eigen slotpagina) */
.gds-app .gds-slot-kaart{
  background:#fff; border:1px solid var(--blauw-l2,#C8DDE6); border-radius:14px;
  max-width:480px; margin:48px auto; padding:44px 34px; text-align:center;
  box-shadow:0 2px 16px rgba(61,122,148,.14);
}
.gds-app .gds-slot-icoon{font-size:44px; line-height:1; margin-bottom:14px;}
.gds-app .gds-slot-kaart h2{
  font-family:var(--font-display,Georgia,serif); font-size:23px;
  color:var(--blauw-dd,#2A5F78); margin:0 0 10px;
}
.gds-app .gds-slot-kaart p{color:#5A5A5A; line-height:1.6; margin:0 0 22px;}
.gds-app .gds-slot-knop{
  display:inline-block; background:var(--geel,#F5C842); color:var(--zwart,#1A1A1A);
  font-weight:800; padding:13px 24px; border-radius:6px; text-decoration:none; font-size:15px;
}
.gds-app .gds-slot-knop:hover{background:var(--geel-d,#D4A820);}

/* ── Teamscan binnen de platformschil ── */
.gds-app .gds-teamscan{margin:0;}
.gds-app .gds-teamscan-fout{
  margin:40px auto; max-width:520px; padding:18px 20px; border-radius:10px;
  background:#fff4f4; border:1px solid #e0b4b4; color:#7a2b2b;
}