/* De prelaunch-landingspagina ("binnenkort live").
   De waarden komen uit het aangeleverde design: Poppins voor de tekst, Roboto Slab voor de koppen,
   het groen #214D0D als accent. De lettertypen staan lokaal in /fonts: dan gaat er geen verzoek
   naar Google en hoeft de beveiligingskop van de Worker niets extra's toe te staan.
   Eén stylesheet voor mobiel en breed: de mobiele stand is de basis, vanaf 900px komt de
   tweekoloms opzet uit het desktopontwerp. */

@font-face { font-family: "Poppins"; src: url("/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url("/fonts/roboto-slab-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url("/fonts/roboto-slab-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url("/fonts/roboto-slab-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --accent: #214D0D;
  --accent-diep: #10260A;
  --accent-donker: #2E6716;
  --groen: #63AC42;
  --groen-licht: #EFF7EC;
  --groen-zacht: #E0EED9;
  --blauw: #47ADE8;
  --blauw-licht: #E1F4FF;
  --blauw-diep: #0E3A57;
  --ink: #25262C;
  --grijs: #5A5B61;
  --rand-voet: #3F7A25;

  --tekst: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kop: "Roboto Slab", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

body.binnenkort {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 16.5px/1.6 var(--tekst);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* :where() houdt deze regel op de laagste specificiteit: anders wint hij van de marge onder een
   kop in een kaart (.kaart-groen h2) en klopt de tussenruimte niet meer. */
:where(body.binnenkort) h1,
:where(body.binnenkort) h2,
:where(body.binnenkort) h3 { margin: 0; }

:where(body.binnenkort) p { margin: 0; }

/* :where() houdt de specificiteit op één element, zodat elke knop of link met een eigen klasse
   deze kleur overschrijft. Zonder dat wint deze regel van .privacy-link en wordt de link in de
   groene voet donkergroen op donkergroen. */
:where(body.binnenkort) a { color: var(--accent); }
:where(body.binnenkort) a:hover { color: var(--accent-diep); }

body.binnenkort :focus-visible {
  outline: 3px solid #1D6FB8;
  outline-offset: 3px;
  border-radius: 6px;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: #fff;
  font-weight: 600;
  border-radius: 0 0 12px 0;
}
.overslaan:focus { left: 0; }

/* ---------------------------------------------------------------- opening */

.hero {
  position: relative;
  background: var(--groen-licht);
  overflow-x: clip;
}

.decor { position: absolute; border-radius: 50%; pointer-events: none; }
.hero > .decor-groot {
  top: -90px; right: -110px; width: 280px; height: 280px; background: var(--groen-zacht);
}
.hero > .decor-ring {
  top: 150px; right: -40px; width: 90px; height: 90px;
  border: 3px solid var(--groen); opacity: .55;
}
.hero > .decor-ring-laag { display: none; }

.hero-binnen { position: relative; }

.site-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.merk-teken {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg);
}
.merk-naam { display: flex; flex-direction: column; line-height: 1.15; }
.merk-naam b {
  font-family: var(--kop);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
}
.merk-naam small { font-size: 13px; color: var(--ink); }

.testlabel {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7A4E08;
  background: #FDF4E4;
  border: 1px solid #EBD7B2;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.testlabel[hidden] { display: none; }

.vws { display: flex; align-items: center; gap: 14px; }
/* Wat alleen een schermlezer of crawler hoeft te horen, staat wel in de pagina maar niet in beeld.
   Zo blijft de volledige naam van het ministerie aanwezig zonder dat hij dubbel naast het logo
   staat (het logo draagt die naam zelf al). */
.alleen-voor-lezers,
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Op de telefoon is er geen ruimte naast het logo; de regel blijft wel voor schermlezers staan. */
.vws-tekst {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Het echte logo van het ministerie: een liggend beeld met een witte achtergrond, dus het staat
   op een wit vlak in plaats van in het gestippelde kader uit het ontwerp. */
.vws-logo {
  flex: 0 0 auto;
  display: block;
  width: 132px;
  height: auto;
  margin-left: auto;
}

.hero-vlak {
  padding: 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-tekst { display: flex; flex-direction: column; gap: 20px; }

.badge-lancering {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 12px;
  border-radius: 999px;
  background: #fff;
  transform: rotate(-2deg);
}
.badge-teken {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--groen);
  display: flex; align-items: center; justify-content: center;
}
.badge-teksten { display: flex; flex-direction: column; line-height: 1.2; }
.badge-teksten span { font-size: 13px; font-weight: 500; color: var(--accent); }
.badge-teksten b {
  font-family: var(--kop);
  font-size: 19px;
  font-weight: 700;
  color: var(--accent-diep);
}

.hero h1 {
  font-family: var(--kop);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
}
.hero h1 .markeer {
  display: inline-block;
  margin-top: 6px;
  padding: 0 12px 2px;
  border-radius: 12px;
  background: var(--groen);
  color: var(--accent-diep);
  transform: rotate(-2deg);
}

.lead {
  font-family: var(--kop);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--accent-diep);
}

/* Het aanmeldformulier: het adres gaat naar de maildienst, niet naar de database. */
.aanmelden {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aanmelden-label { font-size: 16px; font-weight: 600; color: var(--accent-diep); }
.aanmelden-rij { display: flex; flex-wrap: wrap; gap: 12px; }

.aanmelden-veld {
  flex: 1 1 100%;
  /* Zonder min-width: 0 houdt het veld de intrinsieke breedte van het invoerveld vast en loopt het
     op een smalle telefoon buiten de marge. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent);
}
.aanmelden-veld input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--tekst);
  font-size: 17px;
  color: var(--ink);
}
.aanmelden-veld input::placeholder { color: var(--grijs); }
.aanmelden-veld.fout { border-color: #B3261E; background: #FDECEA; }
.aanmelden-veld:focus-within { box-shadow: 0 0 0 3px #1D6FB8; }

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-decoration: none;
  font-family: var(--tekst);
  font-size: 18.5px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
}
.knop-primair {
  flex: 1 1 100%;
  height: 60px;
  padding: 0 7px 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.knop-primair:hover { background: var(--accent-diep); color: #fff; }
.knop-primair[disabled] { opacity: .7; cursor: default; }

.knop-pijl {
  flex: 0 0 46px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--groen);
  display: flex; align-items: center; justify-content: center;
}

.aanmelden-noot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent);
}
.aanmelden-noot svg { flex: 0 0 18px; margin-top: 2px; }

.aanmelden-status { display: none; font-size: 16px; font-weight: 500; }
.aanmelden-status.toon { display: block; }
.aanmelden-status.goed { color: var(--accent); }
.aanmelden-status.fout { color: #B3261E; }

/* Het honingveld staat buiten het beeld en buiten de tabvolgorde. */
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* De vier beloftes onder het formulier. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}
/* Alleen op een breed scherm: op de telefoon staan er drie beloftes, op het brede scherm vier.
   De regel voor .pills li is specifieker, dus deze moet er ook bij. */
.alleen-breed,
.pills .alleen-breed { display: none; }

/* Het beeld met de productscene. Op mobiel steekt de kaart onder het groene vlak uit. De scene
   binnen de kaart heeft de vaste maten uit het ontwerp (600 bij 560) en wordt als geheel
   geschaald: zo blijft de verhouding kloppen en schuift er niets buiten de kaart. */
.hero-beeld {
  position: relative;
  z-index: 2;
  height: 300px;
  border-radius: 28px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: -125px;
  --beeld-schaal: .5;
}
.beeld-decor { position: absolute; border-radius: 50%; }
.beeld-decor-groot { bottom: -60px; left: -40px; width: 180px; height: 180px; background: var(--accent-donker); }
.beeld-decor-stip { display: none; }

.beeld-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 560px;
  transform: translate(-50%, -50%) scale(var(--beeld-schaal));
  transform-origin: 50% 50%;
  color: var(--accent-diep);
  line-height: 1.2;
}

/* De verpakking incontinentieverband, met het losse verband ernaast. */
.scene-verband { position: absolute; left: 0; top: 0; width: 360px; height: 300px; }
.verband-doos {
  position: absolute;
  left: 128px;
  top: 30px;
  width: 212px;
  height: 250px;
  transform: rotate(6deg);
}
.verband-krimp {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 18px;
  border-radius: 6px 6px 2px 2px;
  background: repeating-linear-gradient(90deg, #3A2268 0 5px, #4B2E83 5px 10px);
}
.verband-lijf {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  bottom: 0;
  border-radius: 26px 26px 18px 18px;
  background: linear-gradient(165deg, #FFFFFF 0%, #F3EFFC 50%, #E4DCF6 100%);
  overflow: hidden;
  box-shadow: 0 24px 44px rgba(0, 0, 0, .38);
}
.verband-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 54px;
  background: #4B2E83;
  border-radius: 0 0 50% 50% / 0 0 24px 24px;
}
.verband-merk {
  position: absolute;
  right: 16px;
  top: 13px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #4B2E83;
}
.verband-glans {
  position: absolute;
  left: 24px;
  top: 0;
  width: 24px;
  height: 100%;
  background: rgba(255, 255, 255, .55);
  transform: skewX(-10deg);
}
.verband-naam {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 64px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.02;
  color: #2E1A55;
}
.verband-beeld { position: absolute; right: 18px; top: 104px; transform: rotate(-12deg); }
.verband-aantal {
  position: absolute;
  left: 40px;
  top: 118px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.verband-druppels { display: flex; gap: 3px; }
.verband-x { margin-top: 6px; font-size: 26px; font-weight: 800; line-height: 1; color: #2E1A55; }
.verband-eenheid { font-size: 12px; font-weight: 600; line-height: 1.2; color: #2E1A55; }
.verband-voet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  padding: 0 16px;
  background: #4B2E83;
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #FFFFFF;
}
.verband-los {
  position: absolute;
  left: 22px;
  top: 58px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .35));
}

/* Het doosje metoprolol, schuin over de onderkant van de verpakking. */
.scene-doosje {
  left: 30px;
  top: 276px;
  width: 330px;
  height: 200px;
  padding: 18px 20px;
  border-radius: 10px;
  border-top: 8px solid #DDE4EA;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
  transform: rotate(-9deg);
}
.doosje-band {
  position: absolute;
  right: -40px;
  top: -20px;
  width: 120px;
  height: 260px;
  background: #F26B3A;
  transform: rotate(18deg);
}
.doosje-lijn {
  position: absolute;
  right: 16px;
  top: 0;
  width: 6px;
  height: 100%;
  background: #1E3A8A;
  transform: skewX(18deg);
}
.doosje-tekst {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
}
.doosje-naam { font-size: 21px; font-weight: 700; line-height: 1.1; color: #1E3A8A; }
.doosje-sterkte { font-size: 17px; font-weight: 700; line-height: 1.2; color: #1E3A8A; }
.doosje-sterkte b { color: #D93A1E; }
.doosje-detail { font-size: 11.5px; line-height: 1.35; color: #3A4B6B; }
.doosje-sterkte + .doosje-detail { margin-top: 8px; }
.doosje-aantal { margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.25; color: #1E3A8A; }

/* Het losse etiket met de streepjescode. */
.scene-barcode {
  position: absolute;
  left: 190px;
  top: 456px;
  padding: 8px 12px 5px;
  border-radius: 10px;
  background: #FFFFFF;
  transform: rotate(-9deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scene-barcode span { font-size: 9px; letter-spacing: .12em; color: var(--accent-diep); }

/* De telefoon met het scanscherm. */
.scene-telefoon {
  position: absolute;
  right: 44px;
  top: 58px;
  width: 210px;
  height: 440px;
  padding: 11px;
  border-radius: 38px;
  background: var(--accent-diep);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .3);
}
.telefoon-scherm {
  height: 100%;
  border-radius: 28px;
  background: var(--groen-licht);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.telefoon-kop { font-size: 13px; font-weight: 600; color: var(--accent); }
.telefoon-scan {
  position: relative;
  width: 168px;
  height: 124px;
  border-radius: 14px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.telefoon-hoeken { position: absolute; inset: 0; }
.telefoon-vink {
  margin-top: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--groen);
  display: flex;
  align-items: center;
  justify-content: center;
}
.telefoon-status { font-size: 15px; font-weight: 700; color: var(--accent-diep); }
.telefoon-kaart {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.telefoon-naam { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--accent-diep); }
.telefoon-detail { font-size: 12px; line-height: 1.3; color: var(--accent); }

@media (max-width: 380px) {
  .hero-beeld { --beeld-schaal: .42; }
}

/* ------------------------------------------------------------ voor wie */

.voor-wie { padding: 189px 24px 56px; }
.voor-wie-binnen { display: flex; flex-direction: column; gap: 14px; }

.kaart-groen {
  position: relative;
  padding: 28px 24px;
  border-radius: 28px;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
}
.kaart-ring {
  position: absolute;
  top: -50px; right: -50px;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 22px solid var(--accent-donker);
}
.kaart-groen h2,
.kaart-groen p { position: relative; }
.kaart-groen h2 {
  margin-bottom: 12px;
  font-family: var(--kop);
  font-size: 25px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}
.kaart-groen p { color: #fff; }
.kaart-label {
  margin-top: 14px !important;
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--groen);
  color: var(--accent-diep) !important;
  font-size: 15px;
  font-weight: 600;
}

/* Op de telefoon staan de twee kaarten naast elkaar, op een breed scherm onder elkaar in de
   rechterkolom; dat is dezelfde volgorde als in het ontwerp. */
.mini-stapel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stap-tekst { min-width: 0; }
.mini {
  padding: 22px 18px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-blauw { background: var(--blauw-licht); color: var(--blauw-diep); }
.mini-groen { background: var(--groen-zacht); color: var(--accent-diep); }
.mini h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.mini p { font-size: 15.5px; line-height: 1.5; }

/* ------------------------------------------------------------- stappen */

.stappen { padding: 8px 24px 56px; }
.stappen-binnen { display: flex; flex-direction: column; }

.eyebrow {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.stappen h2 {
  margin: 0 0 20px;
  font-family: var(--kop);
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--accent);
}

.stappen-lijst {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stappen-lijst li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  border-radius: 22px;
  background: var(--groen-licht);
}
.stap-nummer {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--groen);
  color: var(--accent-diep);
  font-size: 19px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.stappen-lijst h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--accent-diep); }
.stappen-lijst p { margin-top: 6px; }

/* ----------------------------------------------------------------- faq */

.faq {
  padding: 8px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-kop { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.faq h2 {
  margin-bottom: 12px;
  font-family: var(--kop);
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--accent);
}

.faq-lijst { display: flex; flex-direction: column; gap: 12px; }

.faq details {
  border-radius: 20px;
  border: 2px solid var(--groen-zacht);
  background: #fff;
}
.faq details[open] { background: var(--groen-licht); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 18px 22px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-diep);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: -3px; }
.plus {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--groen);
  display: flex; align-items: center; justify-content: center;
}
.plus-v { transition: opacity .15s ease; }
details[open] .plus-v { opacity: 0; }

.faq details p { padding: 0 22px 20px; }

.faq-knop { align-self: stretch; }
/* Op de telefoon is dit een gewone tekstlink; op een breed scherm een knop met een rand. */
.knop-lijn {
  display: flex;
  justify-content: center;
  height: 56px;
  margin-top: 8px;
  gap: 10px;
  padding: 0;
  font-size: 16.5px;
  color: var(--accent);
  background: transparent;
}

/* -------------------------------------------------------------- afsluit */

.afsluit {
  position: relative;
  padding: 56px 24px 40px;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
}
.afsluit > .decor-groot { top: -70px; left: -70px; width: 200px; height: 200px; background: var(--accent-donker); }
.afsluit > .decor-stip { top: 40px; right: 28px; width: 18px; height: 18px; background: var(--groen); }
.afsluit > .decor-ring-voet { display: none; }

.afsluit-binnen { position: relative; display: flex; flex-direction: column; gap: 18px; }

.afsluit-rij { display: flex; flex-direction: column; gap: 18px; }
.afsluit-tekst { display: flex; flex-direction: column; gap: 6px; }
.afsluit h2 {
  font-family: var(--kop);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}
.afsluit p { color: #fff; }

.afsluit-knoppen { display: flex; flex-direction: column; gap: 4px; }
.knop-licht {
  height: 68px;
  padding: 0 8px 0 28px;
  border-radius: 999px;
  background: var(--groen);
  color: var(--accent-diep);
  font-size: 18.5px;
}
.knop-licht:hover { background: #6FBE4C; color: var(--accent-diep); }
.knop-pijl-donker { background: var(--accent-diep); }

.privacy-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.privacy-link:hover { color: var(--groen-zacht); }

.afsluit-voet {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--rand-voet);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  color: var(--groen-zacht);
}
.afsluit-voet > p { color: var(--groen-zacht); }
.vws-voet { flex-direction: column; align-items: flex-start; gap: 10px; }
.vws-voet p { color: var(--groen-zacht); line-height: 1.4; }
/* In de voet staat het logo op een wit vlak: het bestand is transparant en de tekst is
   doorschijnend zwart, dus op het donkergroen zou hij wegvallen. Het vlak loopt mee met de
   breedte van de voet. */
.vws-voet { width: 100%; }
/* Ongeveer even groot als het CareCycle-logo ernaast: dezelfde kaart, dezelfde hoogte. */
.vws-voet .vws-logo { height: 72px; width: auto; max-width: 100%; padding: 7px 9px; border-radius: 8px; background: #fff; }
/* Het logo van CareCycle is donkergrijs op groen: het staat daarom op een wit vlak. */
/* Op de telefoon staat het logo boven de regel, op een breed scherm ernaast. */
.initiatief { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.initiatief p { color: var(--groen-zacht); }
.carecycle-logo {
  flex: 0 0 auto;
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fff;
}

/* ------------------------------------------------------- breed scherm */

@media (min-width: 900px) {
  /* Het ontwerp zet de broodtekst op een breed scherm een punt groter dan op de telefoon. */
  body.binnenkort { font-size: 17px; }

  .alleen-breed { display: block; }
  .pills .alleen-breed { display: inline-flex; }

  .hero { padding: 0 24px 140px; }
  .hero > .decor-groot { top: -220px; right: -160px; width: 620px; height: 620px; }
  .hero > .decor-ring { top: 380px; right: 6%; width: 140px; height: 140px; }
  .hero > .decor-ring-laag {
    display: block;
    bottom: 60px;
    left: -60px;
    width: 160px;
    height: 160px;
    border: 3px solid var(--groen);
    opacity: .35;
  }

  .hero-binnen { max-width: 1200px; margin: 0 auto; }

  .site-kop { padding: 28px 0; gap: 20px; }
  .merk-teken { width: 54px; height: 54px; border-radius: 16px; }
  .merk-teken svg { width: 28px; height: 28px; }
  .merk-naam b { font-size: 23px; }
  .merk-naam small { font-size: 14px; }
  /* De regel "In opdracht van het Ministerie van Volksgezondheid, Welzijn en Sport" staat naast
     het logo, zoals in het ontwerp. */
  .vws-tekst {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: block;
    font-size: 14px;
    color: var(--ink);
    text-align: right;
    line-height: 1.35;
  }
  .vws-logo { width: 190px; margin-left: 0; }

  .hero-vlak {
    display: grid;
    /* De verhouding uit het ontwerp: de tekstkolom is iets breder dan de kolom met het beeld. */
    grid-template-columns: 1.11fr 1fr;
    align-items: center;
    gap: 64px;
    padding: 40px 0 0;
  }
  .hero-tekst { gap: 24px; }

  .badge-lancering { padding: 12px 24px 12px 14px; gap: 14px; }
  .badge-teken { flex: 0 0 46px; width: 46px; height: 46px; }
  .badge-teksten span { font-size: 14px; }
  .badge-teksten b { font-size: 22px; }

  .hero h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.08; }
  .hero h1 .markeer { margin-top: 8px; padding: 0 18px 6px; border-radius: 18px; }

  .lead { font-size: clamp(22px, 2vw, 29px); max-width: 520px; }

  /* Het e-mailveld over de volle breedte van de kolom; de knop eronder houdt zijn eigen
     breedte, zoals in het ontwerp. */
  .aanmelden { max-width: none; }
  .aanmelden-rij { flex-direction: column; align-items: stretch; }
  .aanmelden-label { font-size: 17px; }
  .aanmelden-veld { flex: 0 0 auto; width: 100%; height: 64px; padding: 0 22px; }
  .aanmelden-veld input { font-size: 18px; }
  .knop-primair { flex: 0 0 auto; align-self: flex-start; height: 64px; }
  .aanmelden-noot { font-size: 15px; }

  .pills { margin-top: 20px; }
  .pills li { padding: 8px 16px; font-size: 16px; }

  .hero-beeld {
    height: 540px;
    border-radius: 36px;
    margin-bottom: 0;
    --beeld-schaal: .9;
  }
  .beeld-decor-groot { bottom: -100px; left: -80px; width: 320px; height: 320px; }
  .beeld-decor-stip {
    display: block;
    top: 40px; left: 40px; width: 18px; height: 18px;
    background: var(--groen);
  }

  .voor-wie { padding: 0 24px 104px; }
  .voor-wie-binnen {
    max-width: 1200px;
    margin: -72px auto 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
  }
  .kaart-groen { padding: 44px; border-radius: 36px; }
  .kaart-ring { top: -80px; right: -80px; width: 240px; height: 240px; border-width: 32px; }
  .kaart-groen h2 { font-size: 33px; margin-bottom: 14px; }
  .kaart-groen p { font-size: 18px; max-width: 560px; }
  .kaart-label { margin-top: 20px !important; padding: 8px 16px; font-size: 16px; }

  .mini-stapel { display: flex; flex-direction: column; gap: 20px; }
  .mini { flex: 1; padding: 28px; border-radius: 30px; }
  .mini h3 { font-size: 19px; }
  .mini p { font-size: 16.5px; }

  .stappen { padding: 0 24px 104px; }
  .stappen-binnen {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px;
    border-radius: 36px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 38, 10, .10);
  }
  .stappen h2 { margin: 4px 0 0; font-size: 35px; }
  .stappen-lijst {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .stappen-lijst li { flex-direction: column; gap: 14px; padding: 28px; border-radius: 26px; }
  .stap-nummer { flex: 0 0 48px; width: 48px; height: 48px; font-size: 20px; }
  .stappen-lijst h3 { font-size: 20px; line-height: 1.35; }
  .stappen-lijst p { margin-top: 0; }

  .faq {
    /* 1200 plus de twee marges van 24: de inhoud is dan net als in het ontwerp 1200 breed, en de
       kop van de vragen past op één regel. */
    max-width: 1248px;
    margin: 0 auto;
    padding: 0 24px 112px;
    display: grid;
    /* De verhouding uit het ontwerp (links 401, rechts 751 op 1440): met 1fr 2fr brak de kop van
       de vragen in twee regels. De tweede rij krijgt de rest van de hoogte, zodat de knop direct
       onder de kop staat en niet halverwege de lijst. */
    grid-template-columns: 401fr 751fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "kop lijst" "knop lijst";
    align-items: start;
    gap: 16px 48px;
  }
  .faq-kop { grid-area: kop; gap: 16px; }
  .faq h2 { font-size: 35px; margin-bottom: 0; }
  .faq-lijst { grid-area: lijst; }
  .faq-knop { grid-area: knop; align-self: start; }
  .knop-lijn {
    display: inline-flex;
    height: 56px;
    padding: 0 24px;
    margin-top: 0;
    border: 2px solid var(--accent);
    border-radius: 999px;
  }
  .faq summary { padding: 19px 20px 19px 26px; font-size: 18px; gap: 16px; }
  .plus { flex: 0 0 40px; width: 40px; height: 40px; }
  .faq details { border-radius: 22px; }
  .faq details p { padding: 0 26px 24px; max-width: 680px; }

  .afsluit { padding: 96px 24px 48px; }
  .afsluit > .decor-groot { top: -140px; left: -120px; width: 380px; height: 380px; }
  .afsluit > .decor-stip { top: 72px; right: 12%; width: 22px; height: 22px; }
  .afsluit > .decor-ring-voet {
    display: block;
    bottom: -90px; right: -60px; width: 220px; height: 220px;
    border: 3px solid var(--groen); opacity: .4;
  }
  .afsluit-binnen { max-width: 1200px; margin: 0 auto; gap: 64px; }
  .afsluit-rij {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .afsluit-tekst { flex: 1 1 420px; gap: 4px; }
  .afsluit h2 { font-size: 40px; line-height: 1.15; margin-bottom: 10px; }
  .afsluit p { font-size: 18px; }
  .afsluit-knoppen { flex: 0 1 auto; align-items: center; gap: 8px; }
  .knop-licht { gap: 18px; height: 62px; }
  .privacy-link { height: 48px; font-size: 16px; }
  .afsluit-voet {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  /* Op een breed scherm staat de tekst links en het logo rechts, op de telefoon andersom. */
  /* De voet is op een breed scherm één rij met twee blokken. In elk blok staat het logo naast de
     regel die erbij hoort, zodat het ministerie niet los aan de andere kant hangt. */
  .afsluit-voet { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .vws-voet { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; width: auto; }
  .vws-voet p { text-align: right; order: 0; }
  .vws-voet .vws-logo { height: 72px; width: auto; }
  .initiatief { flex-direction: row; align-items: center; gap: 16px; }
}

/* ------------------------------------------------------- het invoerveld als één vlak */

/* Het hele vlak is het veld: je kunt overal in de pil klikken en er is geen tweede kader of
   focusrand binnen het vlak. De invoer zelf heeft geen eigen rand en geen eigen focuslijn. */
.aanmelden-veld {
  cursor: text;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.aanmelden-veld:hover { border-color: var(--groen); }
.aanmelden-veld input:focus,
.aanmelden-veld input:focus-visible { outline: none; box-shadow: none; }
.aanmelden-veld:focus-within {
  border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(99, 172, 66, .32);
}

/* ------------------------------------------------------------------- beweging */

.knop {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.knop:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16, 38, 10, .16); }
.knop:active { transform: translateY(0); box-shadow: none; }
.knop-pijl { transition: transform .18s ease, background-color .18s ease; }
.knop:hover .knop-pijl { transform: translateX(2px); }

.pills li { transition: transform .18s ease, box-shadow .18s ease; }
.pills li:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(16, 38, 10, .10); }

.mini { transition: transform .2s ease, box-shadow .2s ease; }
.mini:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 38, 10, .10); }

.faq details {
  transition: background-color .22s ease, border-color .22s ease;
  overflow: hidden;
}
.faq details:hover { border-color: #BBD6A8; box-shadow: 0 6px 18px rgba(16, 38, 10, .06); }
.faq details[open] { border-color: #CFE3C2; }
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--accent); }
.faq summary:hover .plus { background: #74B855; }
/* Het antwoord schuift open: het script zet de hoogte, de css doet de beweging. */
.antwoord { overflow: hidden; transition: height .3s ease; }
.plus { transition: background-color .2s ease; }
details[open] .plus { background: var(--accent); }
details[open] .plus path { stroke: #fff; }



/* --------------------------------------------------------------- stapeling */

/* De kaarten, de stappen en de vragen liggen altijd boven de decoratie van de secties eromheen;
   de illustratiekaart mag met zijn negatieve marge over de sectiegrens heen vallen, maar niet
   over de kaarten. */
.voor-wie, .stappen, .faq { position: relative; z-index: 1; }
.voor-wie-binnen, .mini, .stappen-binnen, .faq-lijst { position: relative; }

/* ------------------------------------------------------------ het vraagformulier in een popup */

.vraag-popup {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 24px 22px 26px;
  border: 0;
  border-radius: 26px;
  background: var(--groen-licht);
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(16, 38, 10, .32);
  margin: auto;
}
.vraag-popup::backdrop { background: rgba(16, 38, 10, .58); }
.vraag-popup[open] { animation: vraag-in .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes vraag-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.vraag-popup-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.vraag-popup h2 {
  margin: 0;
  font-family: var(--kop);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
}
.vraag-sluit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 38, 10, .07);
  color: var(--accent-diep);
  cursor: pointer;
  transition: background .18s ease;
}
.vraag-sluit:hover { background: rgba(16, 38, 10, .14); }
.vraag-sluit:focus-visible { outline: 3px solid rgba(99, 172, 66, .55); outline-offset: 2px; }

.vraag-inleiding { margin: 0 0 18px; font-size: 16px; color: var(--ink); }
.vraagvorm { display: flex; flex-direction: column; gap: 16px; }
.veldgroep { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.veldgroep label { font-size: 16px; font-weight: 600; color: var(--accent-diep); }

.vraagveld {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent);
  cursor: text;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.vraagveld:hover { border-color: var(--groen); }
.vraagveld:focus-within { border-color: var(--groen); box-shadow: 0 0 0 3px rgba(99, 172, 66, .32); }
.vraagveld input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--tekst);
  font-size: 17px;
  color: var(--ink);
}
.vraagveld input::placeholder { color: var(--grijs); }
/* De eigen ring op het hele veld is genoeg; de blauwe standaardring van de browser gaat eruit. */
.vraagveld input:focus,
.vraagveld input:focus-visible,
.vraagvorm textarea:focus-visible { outline: none; box-shadow: none; }

.vraagvorm textarea {
  width: 100%;
  min-height: 116px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 2px solid var(--accent);
  background: #fff;
  font-family: var(--tekst);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.vraagvorm textarea::placeholder { color: var(--grijs); }
.vraagvorm textarea:focus {
  outline: none;
  border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(99, 172, 66, .32);
}
.vraagvorm textarea.fout, .vraagveld.fout { border-color: #B3261E; background: #FDECEA; }
.vraag-onder { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.vraag-onder .knop-primair { width: 100%; }

body.popup-open { overflow: hidden; }

@media (min-width: 900px) {
  .vraag-popup { padding: 34px 36px 32px; border-radius: 32px; }
  .vraag-popup h2 { font-size: 31px; }
  .vraag-onder { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .vraag-onder .knop-primair { width: auto; }
}

/* De scene krimpt mee met de kolom: tussen 900 en 1152 px is de beeldkolom smaller dan de scene in
   het ontwerp, en zonder deze trappen zou de telefoon tegen de rand van de kaart plakken. */
@media (min-width: 900px) and (max-width: 1023px) {
  .hero-beeld { --beeld-schaal: .62; }
}
@media (min-width: 1024px) and (max-width: 1151px) {
  .hero-beeld { --beeld-schaal: .7; }
}
@media (min-width: 1152px) {
  .hero-beeld { --beeld-schaal: .86; }
}

/* De hero is één rasterafbeelding. Het groene vlak erachter komt uit de css en niet uit het bestand:
   zo blijft de kaart dezelfde kleur als de rest van de huisstijl en kan het beeld zelf transparant
   zijn. De vaste beeldverhouding houdt de compositie uit het ontwerp overeind. */
.hero-beeld {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1800 / 1680;
  margin: 0 0 -125px;
  border-radius: 28px;
  background: var(--accent);
  overflow: hidden;
}
.hero-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 900px) {
  .hero-beeld {
    height: auto;
    margin: 0;
    border-radius: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knop, .knop-pijl, .pills li, .mini, .faq details, .faq summary, .plus,
  .aanmelden-veld, .antwoord { transition: none !important; }
  .knop:hover, .pills li:hover, .mini:hover { transform: none; }
}

.faq summary { touch-action: manipulation; }