/* Van het Slot — responsive laag.
   De pagina-inhoud stylet zichzelf met inline style-attributen (die zijn voor de
   desktopweergave gemaakt). In een inline style past geen media query, dus de
   mobiele en tablet-aanpassingen staan hier en overschrijven gericht.
   Vandaar het gebruik van attribuutselectors en !important: dat is hier geen
   luiheid maar de enige manier om een inline style te verslaan. */

/* ============================================================
   1. Basis — geldt op elk formaat
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%; /* iOS mag tekst niet eigenhandig opblazen */
}

body {
  overflow-x: hidden; /* vangnet tegen horizontaal slepen */
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Lange e-mailadressen, URL's en samenstellingen mogen niet uit de kaart lopen. */
p,
li,
h1,
h2,
h3,
h4,
a,
td {
  overflow-wrap: break-word;
}

/* Zichtbare focus voor toetsenbord- en screenreadergebruikers. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #00706C;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respecteer de systeeminstelling voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   2. Header en navigatie
   ============================================================ */

/* Overslaan-link: alleen zichtbaar zodra hij focus krijgt. */
.vhs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: #0f2a2a;
  color: #fff;
  border-radius: 0 0 12px 0;
}

.vhs-skip:focus {
  left: 0;
  color: #fff;
}

.vhs-bar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.vhs-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vhs-logo img {
  height: 38px;
  width: auto;
  display: block;
}

.vhs-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* --- Hoofdmenu-items met uitklapmenu --- */

.vhs-navitem {
  position: relative;
}

.vhs-navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #3a5453;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

.vhs-navlink:hover,
.vhs-navitem:focus-within > .vhs-navlink {
  color: #00706c;
  background: rgba(0, 149, 144, 0.1);
}

/* De actieve sectie krijgt een streep in de merkkleur, niet alleen een tint. */
.vhs-navlink.is-actief {
  color: #00706c;
  background: rgba(0, 149, 144, 0.12);
}

.vhs-navlink.is-actief::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: #009590;
}

.vhs-chev {
  width: 10px;
  height: 7px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.vhs-navitem:hover .vhs-chev,
.vhs-navitem:focus-within .vhs-chev {
  transform: rotate(180deg);
}

.vhs-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 290px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(15, 42, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

/* Onzichtbare brug, zodat het menu niet dichtklapt tussen knop en paneel. */
.vhs-drop::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.vhs-navitem:focus-within .vhs-drop,
.vhs-navitem.is-open .vhs-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Openen op hover alleen waar een muis is. Op een touchscreen bestaat hover
   niet echt en zou het menu blijven hangen na een tik. */
@media (hover: hover) and (pointer: fine) {
  .vhs-navitem:hover .vhs-drop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.vhs-navitem.is-open .vhs-chev {
  transform: rotate(180deg);
}

.vhs-sublink {
  display: block;
  padding: 11px 14px;
  border-radius: 12px;
  color: #0f2a2a;
  transition: background 0.15s;
}

.vhs-sublink:hover,
.vhs-sublink:focus-visible {
  background: #e4f3ee;
  color: #00706c;
}

.vhs-sublink.is-actief {
  background: #e4f3ee;
  box-shadow: inset 3px 0 0 #009590;
}

.vhs-sublabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.vhs-subomschrijving {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: #3a5453;
}

.vhs-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #4fc8af;
  color: #0f2a2a;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vhs-cta {
  margin-left: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #009590;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.18s;
}

.vhs-cta:hover {
  background: #0f2a2a;
  color: #fff;
}

/* --- Sectiebalk met tabbladen --- */

.vhs-tabbalk {
  border-top: 1px solid rgba(15, 42, 42, 0.08);
  background: #e4f3ee;
}

/* Klikbaar: brengt je terug naar de hoofdpagina van de sectie. */
.vhs-tablabel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00706c;
  padding: 0 12px 0 0;
  border-right: 1px solid rgba(15, 42, 42, 0.14);
  margin-right: 8px;
  white-space: nowrap;
}

.vhs-tablabel:hover {
  color: #009590;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Staat de bezoeker op de hoofdpagina zelf, dan is dit de actieve tab. */
.vhs-tablabel.is-actief {
  color: #0f2a2a;
  text-decoration: underline;
  text-decoration-color: #009590;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Tabbladen zien er nu uit als tabbladen: een actieve krijgt een witte kaart
   met een streep in de merkkleur eronder. */
.vhs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 10px 15px;
  border-radius: 10px 10px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: #3a5453;
  transition: background 0.15s, color 0.15s;
}

.vhs-tab:hover {
  color: #00706c;
  background: rgba(255, 255, 255, 0.6);
}

.vhs-tab.is-actief {
  background: #fff;
  color: #00706c;
  font-weight: 700;
  box-shadow: 0 -2px 10px rgba(15, 42, 42, 0.05);
}

.vhs-tab.is-actief::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #009590;
}

/* De hamburgerknop bestaat alleen op smalle schermen. */
.vhs-burger {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(15, 42, 42, 0.14);
  border-radius: 14px;
  background: #fff;
  color: #0f2a2a;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.vhs-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.vhs-subbar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 52px;
}

/* --- Onder 1040px past de volledige navigatie niet meer naast het logo. --- */
@media (max-width: 1040px) {
  .vhs-burger {
    display: flex;
  }

  .vhs-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    /* Niet laten afbreken naar een tweede kolom.
       De navigatie mag naast het logo wél over meer regels lopen, maar hier
       staat hij onder elkaar met een maximale hoogte. Bleef wrap aan staan,
       dan zette flexbox alles wat niet paste in een kolom rechts naast het
       menu, buiten het scherm. Tarieven en Contact waren zo alleen te zien
       door opzij te schuiven, wat vrijwel niemand doet. Nu loopt het door
       en kun je gewoon naar beneden scrollen. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 12px 16px 20px;
    background: #faf7f2;
    border-top: 1px solid rgba(15, 42, 42, 0.1);
    border-bottom: 1px solid rgba(15, 42, 42, 0.1);
    box-shadow: 0 18px 40px rgba(15, 42, 42, 0.12);
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
  }

  .vhs-menu-open .vhs-nav {
    display: flex;
  }

  /* In het uitklapmenu staat alles open: geen verstopte niveaus, want juist
     die waren volgens de feedback niet te vinden. */
  .vhs-navitem {
    width: 100%;
  }

  .vhs-navlink {
    min-height: 52px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 15px;
  }

  .vhs-navlink.is-actief::after {
    display: none;
  }

  .vhs-chev {
    display: none;
  }

  .vhs-drop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 2px 0 8px 14px;
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 2px solid rgba(0, 149, 144, 0.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .vhs-navitem:hover .vhs-drop,
  .vhs-navitem:focus-within .vhs-drop {
    transform: none;
  }

  .vhs-sublink {
    min-height: 46px;
    padding: 9px 12px;
  }

  .vhs-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10px 0 0;
    min-height: 52px;
    align-items: center;
    font-size: 15px;
  }

  /* Op een telefoon geen tabbalk.
     Eerst schoof hij opzij, maar dan zag je alleen de eerste twee tabbladen
     en niet dat er meer was; stond je op UNLOCK3D, dan viel juist die tab
     buiten beeld. Daarna gestapeld, maar dan nam hij drie regels en bleef
     hij bij het scrollen boven in beeld staan. Het uitklapmenu toont
     dezelfde pagina's al, mét een regel uitleg eronder, dus hier is die
     balk dubbelop. */
  .vhs-tabbalk {
    display: none;
  }

  .vhs-menu-open .vhs-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .vhs-menu-open .vhs-burger span:nth-child(2) {
    opacity: 0;
  }
  .vhs-menu-open .vhs-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .vhs-subbar {
    gap: 4px;
    padding: 10px 20px;
  }

  .vhs-subbar > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .vhs-bar {
    padding: 0 20px;
    min-height: 68px;
    gap: 12px;
  }
  .vhs-logo img {
    height: 32px;
  }
  .vhs-nav {
    max-height: calc(100dvh - 68px);
  }
}

/* ============================================================
   2a. Hero op de homepagina
   De oude versie was zwarte letters op een neutrale achtergrond. Nu een
   gekleurd merkvlak met het logo, zodat de pagina meteen kleur bekent.
   ============================================================ */

.vhs-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f2a2a 0%, #00706c 58%, #009590 100%);
  color: #fff;
  isolation: isolate;
}

/* Het slot uit het logo, groot en zacht, als merkpatroon op de achtergrond. */
.vhs-hero::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -110px;
  width: 520px;
  height: 586px;
  background: url("slot-icoon-wit.png") no-repeat center / contain;
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
}

.vhs-hero::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -220px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 200, 175, 0.32) 0%, rgba(79, 200, 175, 0) 68%);
  z-index: -1;
  pointer-events: none;
}

.vhs-hero-binnen {
  max-width: 1240px;
  margin: 0 auto;
  padding: 76px 24px 84px;
  display: grid;
  /* De foto krijgt bewust meer ruimte dan de tekst. */
  grid-template-columns: 0.76fr 1.24fr;
  gap: 44px;
  align-items: center;
}

/* De kop is het logo zelf; een losse tekstkop erboven werd te zwaar. */
.vhs-hero-kop {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.vhs-hero-logo {
  width: min(440px, 94%);
  height: auto;
  display: block;
}

.vhs-hero-intro {
  margin: 28px 0 0;
  max-width: 46ch;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.vhs-hero-knoppen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.vhs-knop-primair,
.vhs-knop-secundair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.vhs-knop-primair {
  background: #fff;
  color: #00706c;
}

.vhs-knop-primair:hover {
  background: #4fc8af;
  color: #0f2a2a;
}

.vhs-knop-secundair {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}

.vhs-knop-secundair:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

.vhs-hero-locaties {
  margin: 26px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

/* Een andere fotovorm dan de oude boog: liggend en zacht afgerond. */
.vhs-hero-beeld {
  position: relative;
}

.vhs-hero-beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 26px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
  .vhs-hero-binnen {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 52px 22px 56px;
  }
  .vhs-hero-logo {
    width: min(340px, 86%);
  }
  .vhs-hero-intro {
    margin-top: 22px;
    font-size: 18px;
  }
  .vhs-hero-beeld img {
    aspect-ratio: 4 / 3;
  }
  .vhs-knop-primair,
  .vhs-knop-secundair {
    flex: 1 1 auto;
  }
}

/* ============================================================
   2a1. Uitgelicht blok (UNLOCK3D)
   Het nieuwste aanbod moet volgens de feedback goed vindbaar zijn, dus
   krijgt het een eigen blok op de homepagina.
   ============================================================ */

.vhs-uitgelicht-sectie {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.vhs-uitgelicht {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  border-radius: 28px;
  background: #0f2a2a;
  color: #e4f3ee;
}

.vhs-uitgelicht-beeld img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

.vhs-uitgelicht-tekst {
  padding: 48px 46px 50px;
  align-self: center;
}

.vhs-uitgelicht-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #4fc8af;
  color: #0f2a2a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vhs-uitgelicht-kop {
  margin: 18px 0 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.vhs-uitgelicht-intro {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.62;
  color: rgba(228, 243, 238, 0.82);
}

.vhs-uitgelicht-punten {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.vhs-uitgelicht-punten li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 16px;
  color: #e4f3ee;
}

.vhs-uitgelicht-punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4fc8af;
}

.vhs-uitgelicht-knoppen {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.vhs-knop-donker,
.vhs-knop-rand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.vhs-knop-donker {
  background: #4fc8af;
  color: #0f2a2a;
}

.vhs-knop-donker:hover {
  background: #fff;
  color: #0f2a2a;
}

.vhs-knop-rand {
  border: 1.5px solid rgba(228, 243, 238, 0.45);
  color: #e4f3ee;
}

.vhs-knop-rand:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 900px) {
  .vhs-uitgelicht {
    grid-template-columns: 1fr;
  }
  .vhs-uitgelicht-beeld img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .vhs-uitgelicht-tekst {
    padding: 30px 24px 34px;
  }
  .vhs-uitgelicht-sectie {
    padding-bottom: 56px;
  }
  .vhs-knop-donker,
  .vhs-knop-rand {
    flex: 1 1 auto;
  }
}

/* ============================================================
   2a2. Themalijst met slotjes in plaats van opsommingsbolletjes
   ============================================================ */

.vhs-themaregel {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 20px 8px;
  border-bottom: 1px solid rgba(15, 42, 42, 0.12);
  font-size: 17px;
  color: #0f2a2a;
}

/* Het slot uit het eigen logo als opsommingsteken. Via een masker in plaats
   van een gewone afbeelding, zodat het de kleur van de tekst overneemt en
   dus ook op donkere vlakken klopt. */
.vhs-slot {
  display: inline-block;
  width: 20px;
  height: 23px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("slot-icoon.png") no-repeat center / contain;
  mask: url("slot-icoon.png") no-repeat center / contain;
}

.vhs-themaregel .vhs-slot {
  color: #009590;
}

/* Opsommingen die eerder een liggend streepje gebruikten. */
.vhs-slotregel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 42, 42, 0.14);
  font-size: 16px;
  line-height: 1.55;
  color: #0f2a2a;
}

.vhs-slotregel .vhs-slot {
  width: 18px;
  height: 21px;
  margin-top: 1px;
  color: #009590;
}

/* Bepalingen in de voorwaarden en de privacyverklaring hebben hun eigen
   nummering ("a.", "1."). Daar zou een slotje ernaast dubbelop zijn. */
.vhs-wetregel {
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 42, 42, 0.14);
  font-size: 16px;
  line-height: 1.55;
  color: #0f2a2a;
}

/* Op een donker vlak neemt het slotje de accentkleur aan. */
.vhs-slotregel.op-donker {
  border-bottom-color: rgba(228, 243, 238, 0.2);
  color: #e4f3ee;
}

.vhs-slotregel.op-donker .vhs-slot {
  color: #4fc8af;
}

/* ============================================================
   2a3. Lijstvormen
   De pagina Kind en jeugd had drie lijsten met streepjes onder elkaar.
   Elke lijst heeft nu een eigen vorm, zodat de pagina meer ritme krijgt.
   ============================================================ */

/* Losse labels — voor korte kenmerken. */
.vhs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.vhs-chip {
  display: inline-block;
  padding: 10px 17px;
  border-radius: 999px;
  background: #e4f3ee;
  border: 1px solid rgba(0, 149, 144, 0.22);
  font-size: 15px;
  line-height: 1.35;
  color: #0f2a2a;
}

/* Genummerd — voor een opsomming van situaties. */
.vhs-genummerd {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: vhsnr;
}

.vhs-genummerd li {
  counter-increment: vhsnr;
  position: relative;
  padding: 11px 0 11px 44px;
  font-size: 16px;
  line-height: 1.55;
  color: #0f2a2a;
}

.vhs-genummerd li::before {
  content: counter(vhsnr);
  position: absolute;
  left: 0;
  top: 9px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #009590;
  color: #fff;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* Vinkjes — voor wat het oplevert. */
.vhs-vinklijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vhs-vinklijst li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 11px 0;
  font-size: 16px;
  line-height: 1.55;
  color: #0f2a2a;
}

.vhs-vinklijst svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 3px;
  color: #4fc8af;
}

/* ============================================================
   2b. Themakaarten
   Vervangen de tekstafbeeldingen die eerder op Hulpvragen stonden. Zelfde
   uitstraling als het origineel, maar als echte tekst: leesbaar op elk
   formaat, vindbaar via zoekmachines en voorleesbaar door een screenreader.
   ============================================================ */

.vhs-themaraster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.vhs-themakaart {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px 32px;
  border-radius: 20px;
  background: #009590;
  color: #fff;
  isolation: isolate;
}

/* Het slot uit het logo, groot en subtiel — zoals op de originele beelden. */
.vhs-themakaart::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 190px;
  height: 214px;
  background: url("slot-icoon-wit.png") no-repeat center / contain;
  opacity: 0.11;
  z-index: -1;
  pointer-events: none;
}

/* Om de zes kaarten wat ritme te geven wisselt de tint. */
.vhs-themakaart:nth-child(3n + 2) {
  background: #0f2a2a;
}

.vhs-themakaart:nth-child(3n) {
  background: #00706c;
}

.vhs-themakop {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.vhs-thematekst {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 900px) {
  .vhs-themaraster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .vhs-themaraster {
    grid-template-columns: 1fr;
  }
  .vhs-themakaart {
    padding: 24px 22px 26px;
  }
  .vhs-themakop {
    font-size: 21px;
  }
}

/* ============================================================
   2c. Behandelvormen
   Kwamen eerder uit twee platte afbeeldingen; nu vier losse kaarten.
   ============================================================ */

.vhs-vormkaart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vhs-vormkaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 42, 42, 0.11);
}

.vhs-vormfoto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: #e4f3ee;
}

.vhs-vorminhoud {
  padding: 24px 26px 28px;
}

.vhs-vormafk {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #009590;
}

.vhs-vormnaam {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f2a2a;
}

.vhs-vormtekst {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.62;
  color: #3a5453;
}

@media (max-width: 620px) {
  .vhs-vorminhoud {
    padding: 20px 20px 22px;
  }
  .vhs-vormafk {
    font-size: 22px;
  }
}

/* ============================================================
   2c2. Werkvormen en trajecten (volwassenen)
   ============================================================ */

.vhs-werkvormen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.vhs-werkvorm {
  position: relative;
  padding: 26px 24px 28px;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 18px;
  border-top: 3px solid #4fc8af;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vhs-werkvorm:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 42, 42, 0.1);
}

.vhs-werkvorm-nr {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #4fc8af;
}

.vhs-werkvorm-kop {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-werkvorm-tekst {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3a5453;
}

/* Trajectkaarten op het donkere vlak. */
.vhs-trajecten {
  display: grid;
  gap: 16px;
}

.vhs-traject {
  padding: 26px 26px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(228, 243, 238, 0.22);
}

.vhs-trajectnaam {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}

.vhs-trajectprijs {
  margin: 8px 0 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: #4fc8af;
}

.vhs-trajecttekst {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(228, 243, 238, 0.82);
}

/* ============================================================
   2c3. Teamkaarten
   De bio's verschillen sterk in lengte, waardoor kaarten eerder halfleeg
   stonden. Ze worden nu ingekort weergegeven met een knop om uit te klappen:
   alle kaarten even hoog, en niemands tekst gaat verloren.
   ============================================================ */

.vhs-teamkaart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 24px;
}

.vhs-teamfoto {
  aspect-ratio: 1 / 1;
  background: #e4f3ee;
}

.vhs-teamfoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vhs-teaminhoud {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}

/* Vaste hoogte voor twee regels, zodat alles onder de naam op dezelfde hoogte
   begint ongeacht of een naam en functie op één of twee regels passen. */
.vhs-teamnaam {
  display: flex;
  align-items: flex-start;
  min-height: 2.5em;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-teamlocatie {
  margin: 8px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #009590;
  font-weight: 700;
}

/* Ingeklapt tonen we een vast aantal regels, met een zachte overgang. */
.vhs-teambio {
  position: relative;
  overflow: hidden;
  max-height: 10.4em;
  margin-top: 12px;
  transition: max-height 0.3s ease;
}

.vhs-teambio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.6em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
  transition: opacity 0.2s;
}

.vhs-teamkaart.is-open .vhs-teambio {
  max-height: 200em;
}

.vhs-teamkaart.is-open .vhs-teambio::after {
  opacity: 0;
}

.vhs-teamover p {
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.62;
  color: #3a5453;
}

.vhs-teamover p:last-child {
  margin-bottom: 0;
}

.vhs-teamover h3 {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #0f2a2a;
}

.vhs-teamover ul,
.vhs-teamover ol {
  margin: 0 0 11px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.62;
  color: #3a5453;
}

.vhs-teammeer {
  align-self: flex-start;
  margin-top: 10px;
  padding: 7px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #00706c;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vhs-teammeer:hover {
  color: #009590;
}

/* Verbergen als de tekst toch al helemaal past. */
.vhs-teammeer[hidden] {
  display: none;
}

.vhs-teamcontact {
  margin: auto 0 0;
  padding-top: 16px;
  font-size: 14.5px;
  color: #0f2a2a;
  font-weight: 600;
}

/* ============================================================
   2d. De drie lagen van een re-integratietraject
   ============================================================ */

.vhs-lagen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: laag;
}

.vhs-laag {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 20px;
  border-top: 4px solid #009590;
}

.vhs-laagfoto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #e4f3ee;
}

.vhs-laaginhoud {
  padding: 22px 24px 26px;
}

/* Het nummer maakt de opbouw in één oogopslag duidelijk. */
.vhs-laagnummer {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e4f3ee;
  color: #00706c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vhs-laagkop {
  margin: 12px 0 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-laagtekst {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.62;
  color: #3a5453;
}

@media (max-width: 900px) {
  .vhs-lagen {
    grid-template-columns: 1fr;
  }
  .vhs-laagfoto {
    aspect-ratio: 21 / 9;
  }
}

/* ============================================================
   2e. Voettekst
   Was een ongelijk driekolomsblok waarin het linkerdeel scheef oogde.
   Nu vier kolommen die op één lijn beginnen, met de locaties als
   aanklikbare kaartlinks.
   ============================================================ */

.vhs-voetraster {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.05fr;
  gap: 44px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(228, 243, 238, 0.14);
}

.vhs-voetkolom {
  min-width: 0;
}

.vhs-voetlogo {
  width: 186px;
  max-width: 100%;
  height: auto;
  display: block;
}

.vhs-voetpitch {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(228, 243, 238, 0.68);
}

.vhs-voetcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 22px;
  padding: 13px 30px;
  border-radius: 999px;
  background: #009590;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background 0.18s, color 0.18s;
}

.vhs-voetcta:hover {
  background: #4fc8af;
  color: #0f2a2a;
}

.vhs-voetcontact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}

.vhs-voetregel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-size: 16px;
  color: #e4f3ee;
}

.vhs-voetregel svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #4fc8af;
}

.vhs-voetregel:hover {
  color: #4fc8af;
}

.vhs-socials {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.vhs-social {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid rgba(228, 243, 238, 0.24);
  border-radius: 999px;
  font-size: 13px;
  color: #e4f3ee;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.vhs-social:hover {
  background: #009590;
  border-color: #009590;
  color: #fff;
}

.vhs-voetkop {
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4fc8af;
  font-weight: 700;
  /* Zelfde hoogte als de logoregel ernaast, zodat de kolommen uitlijnen. */
  min-height: 46px;
  display: flex;
  align-items: flex-start;
}

/* --- Locaties --- */

.vhs-voetlocatie {
  display: block;
  margin-bottom: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(228, 243, 238, 0.18);
  border-radius: 14px;
  color: #e4f3ee;
  transition: background 0.16s, border-color 0.16s;
}

.vhs-voetlocatie:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #4fc8af;
  color: #e4f3ee;
}

.vhs-voetplaats {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
}

.vhs-voetadres {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  color: rgba(228, 243, 238, 0.7);
}

.vhs-voetroute {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #4fc8af;
}

.vhs-voetroute svg {
  width: 13px;
  height: 13px;
}

/* --- Openingstijden --- */

.vhs-tijdregel {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(228, 243, 238, 0.1);
  font-size: 15px;
}

.vhs-dag {
  font-weight: 600;
  color: #fff;
}

.vhs-tijd {
  color: rgba(228, 243, 238, 0.7);
  white-space: nowrap;
}

.vhs-voetnoot {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(228, 243, 238, 0.6);
}

/* --- Logo's van aangesloten organisaties --- */

.vhs-partners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vhs-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
}

.vhs-partner img {
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
  display: block;
}

@media (max-width: 1040px) {
  .vhs-voetraster {
    grid-template-columns: 1fr 1fr;
    gap: 38px;
  }
  .vhs-voetkop {
    min-height: 0;
    margin-bottom: 14px;
  }
}

@media (max-width: 620px) {
  .vhs-voetraster {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 36px;
  }
  .vhs-voetcta {
    width: 100%;
  }
}

/* ============================================================
   2e2. UNLOCK3D: feitenkaarten, startmomenten en thema's
   ============================================================ */

.vhs-infokaart {
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 20px;
  padding: 30px 30px 32px;
}

.vhs-infokaart.is-merk {
  background: #009590;
  border-color: #009590;
  color: #fff;
}

.vhs-infokop {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.is-merk .vhs-infokop {
  color: #fff;
}

/* Losse feiten onder elkaar met een stippellijn ertussen, in plaats van
   alles achter elkaar in één lap tekst. */
.vhs-feiten {
  margin: 18px 0 0;
}

/* Label boven de waarde, altijd.
 *
 * Eerder stonden ze naast elkaar, met de waarde rechts. Een lang
 * e-mailadres paste daar niet naast en zakte naar de regel eronder,
 * waardoor de ene regel naast elkaar stond en de andere onder elkaar. Dat
 * oogde als losgeschoven tekst. Zo staat alles op dezelfde manier, en past
 * het ook op een smal scherm. */
.vhs-feiten > div {
  padding: 11px 0;
  border-bottom: 1px solid rgba(15, 42, 42, 0.12);
  min-width: 0;
}

.is-merk .vhs-feiten > div {
  border-bottom-color: rgba(255, 255, 255, 0.24);
}

.vhs-feiten dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7d8b8a;
  min-width: 0;
}

.is-merk .vhs-feiten dt {
  color: rgba(255, 255, 255, 0.82);
}

.vhs-feiten dd {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f2a2a;
  min-width: 0;
  /* Laatste redmiddel voor als de kaart smaller wordt dan het adres zelf. */
  overflow-wrap: anywhere;
}

.is-merk .vhs-feiten dd {
  color: #fff;
}

.vhs-prijs {
  margin: 16px 0 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.vhs-prijs span {
  display: block;
  margin-top: 7px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.vhs-infonoot {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #3a5453;
}

.is-merk .vhs-infonoot {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Startmomenten --- */

.vhs-startdata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.vhs-startkaart {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 24px 24px;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 18px;
  border-left: 4px solid #4fc8af;
}

.vhs-startmaand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-startgroep {
  font-size: 15px;
  color: #3a5453;
}

.vhs-startplek {
  margin-top: 7px;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.vhs-startplek.is-vrij {
  background: #e4f3ee;
  color: #00706c;
}

.vhs-startplek.is-bijna-vol {
  background: #fff3dc;
  color: #8a5b00;
}

/* --- Thema's --- */

.vhs-themablok {
  background: rgba(228, 243, 238, 0.07);
  border: 1px solid rgba(228, 243, 238, 0.16);
  border-radius: 20px;
  padding: 30px 28px 32px;
}

.vhs-themablok-kop {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #4fc8af;
}

.vhs-themablok-wat {
  margin: 8px 0 0;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
}

.vhs-themablok-tekst {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(228, 243, 238, 0.82);
}

@media (max-width: 620px) {
  .vhs-infokaart {
    padding: 24px 22px 26px;
  }
  .vhs-prijs {
    font-size: 34px;
  }
}

/* ============================================================
   2f. Beheerde tekst (blogs en vacatures)
   Deze inhoud komt uit content.json en wordt opgemaakt door de lichte
   opmaaktaal in app.js: ## wordt een kop, een lege regel een alinea.
   ============================================================ */

.vhs-tekst h3 {
  margin: 38px 0 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f2a2a;
}

.vhs-tekst h3:first-child {
  margin-top: 0;
}

.vhs-tekst p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: #3a5453;
}

/* Een alinea die alleen uit vetgedrukte tekst bestaat is een aanhef boven de
   alinea eronder, zoals bij de genummerde punten in de blog. */
.vhs-tekst p > strong:only-child {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  color: #00706c;
}

.vhs-tekst ul,
.vhs-tekst ol {
  margin: 14px 0 0;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.7;
  color: #3a5453;
}

.vhs-tekst li {
  margin-bottom: 7px;
}

.vhs-tekst em {
  font-style: italic;
}

/* Melding wanneer er nog niets gepubliceerd is. */
.vhs-leegmelding {
  margin: 32px 0 0;
  padding: 22px 26px;
  border: 1px dashed rgba(15, 42, 42, 0.24);
  border-radius: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: #3a5453;
  background: #fff;
}

/* --- Vacaturekaart --- */

.vhs-vacature {
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 28px;
  padding: 44px;
  margin-bottom: 24px;
}

.vhs-vacaturekop {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #0f2a2a;
}

.vhs-vacature-intro p {
  font-size: 17.5px;
  color: #3a5453;
}

/* Een kolom: zo blijft elke tussenkop bij zijn eigen tekst staan. */
.vhs-vacature-body {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(15, 42, 42, 0.12);
  max-width: 76ch;
}

.vhs-vacature-body h3 {
  margin-top: 26px;
  font-size: 19px;
  color: #00706c;
}

.vhs-vacature-body p,
.vhs-vacature-body li {
  font-size: 16px;
}

.vhs-vacature-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 30px;
  padding: 14px 30px;
  border-radius: 999px;
  background: #009590;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.18s;
}

.vhs-vacature-knop:hover {
  background: #0f2a2a;
  color: #fff;
}

@media (max-width: 760px) {
  .vhs-vacature {
    padding: 26px 22px 28px;
  }
  .vhs-vacature-body {
    grid-template-columns: 1fr;
  }
  .vhs-vacature-knop {
    width: 100%;
  }
}

/* ============================================================
   2f2. Aanpakkaarten (ouders en gezin)
   De koppen verschillen in lengte; met een vaste hoogte voor twee regels
   begint de tekst in elke kaart op dezelfde hoogte.
   ============================================================ */

.vhs-aanpakkaart {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 20px;
  padding: 28px 26px 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vhs-aanpakkaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.12);
}

.vhs-aanpakkop {
  display: flex;
  align-items: flex-start;
  min-height: 2.6em;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #00706c;
}

.vhs-aanpaktekst {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #3a5453;
}

@media (max-width: 900px) {
  /* Onder elkaar heeft een vaste kophoogte geen zin meer. */
  .vhs-aanpakkop {
    min-height: 0;
  }
}

/* ============================================================
   2f3. Scholen: genummerde stappen
   ============================================================ */

.vhs-schoolraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.vhs-schoolkaart {
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 20px;
  padding: 26px 26px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vhs-schoolkaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.12);
}

.vhs-schoolnr {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #4fc8af;
}

.vhs-schoolkop {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-schooltekst {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #3a5453;
}

/* Regeltje dat aangeeft wanneer een thema past. */
.vhs-schoolwanneer {
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #4fc8af;
}

/* ============================================================
   2f4. Sleutel tot verandering (homepagina)
   Was één lap tekst op een donker vlak. De kern staat nu apart en groter,
   de rest is ingekort en aangevuld met drie kerngetallen.
   ============================================================ */

.vhs-sleutel-kern {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
  max-width: 34ch;
}

.vhs-sleutel-tekst {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(228, 243, 238, 0.82);
}

.vhs-sleutel-punten {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(228, 243, 238, 0.22);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vhs-sleutel-punten > div {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  color: rgba(228, 243, 238, 0.88);
}

.vhs-sleutel-punten span {
  flex-shrink: 0;
  width: 42px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #4fc8af;
}

@media (max-width: 900px) {
  .vhs-sleutel-kern {
    font-size: 18.5px;
    max-width: none;
  }
}

/* ============================================================
   2f5. Pagina-opening en scanbare blokken
   De sectiepagina's begonnen met vier of vijf alinea's achter elkaar. Ze
   openen nu met een korte kernboodschap naast een foto, en de uitleg staat
   in blokken die los van elkaar te lezen zijn.
   ============================================================ */

.vhs-opening {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
}

.vhs-openingkop {
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #0f2a2a;
  max-width: 16ch;
}

.vhs-openingtekst {
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: #3a5453;
  max-width: 46ch;
}

.vhs-openingknoppen {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.vhs-knop-groen,
.vhs-knop-licht {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.vhs-knop-groen {
  background: #009590;
  color: #fff;
}

.vhs-knop-groen:hover {
  background: #0f2a2a;
  color: #fff;
}

.vhs-knop-licht {
  border: 1.5px solid rgba(15, 42, 42, 0.22);
  color: #0f2a2a;
}

.vhs-knop-licht:hover {
  border-color: #009590;
  color: #00706c;
}

.vhs-openingbeeld {
  margin: 0;
}

.vhs-openingbeeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

/* Melding over wachttijd of iets anders dat opvalt zonder te schreeuwen. */
.vhs-attentie {
  margin: 34px 0 0;
  padding: 16px 22px;
  border-radius: 14px;
  border-left: 4px solid #4fc8af;
  background: #fff3dc;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
  color: #0f2a2a;
}

/* Drie korte blokken naast elkaar in plaats van twee lange alinea's. */
.vhs-waaromraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.vhs-waaromkaart {
  padding: 28px 26px 30px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-top: 3px solid #4fc8af;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vhs-waaromkaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.11);
}

.vhs-waaromkop {
  display: flex;
  align-items: flex-start;
  min-height: 2.6em;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-waaromtekst {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #3a5453;
}

@media (max-width: 900px) {
  .vhs-opening {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .vhs-openingkop {
    max-width: none;
  }
  .vhs-waaromkop {
    min-height: 0;
  }
  .vhs-knop-groen,
  .vhs-knop-licht {
    flex: 1 1 auto;
  }
}

/* ============================================================
   2f6. Beeldband
   Een brede foto tussen twee tekstsecties, zodat een lange pagina ergens
   adem haalt.
   ============================================================ */

.vhs-beeldband {
  position: relative;
  max-width: 1240px;
  margin: 80px auto 0;
  padding: 0 24px;
}

.vhs-beeldband img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  /* Iets hoger uitsnijden, anders vallen de gezichten buiten beeld. */
  object-position: center 20%;
  display: block;
  border-radius: 24px;
}

.vhs-beeldband-tekst {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 34px;
  margin: 0;
  max-width: 26ch;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

@media (max-width: 760px) {
  .vhs-beeldband {
    margin-top: 52px;
    padding: 0 20px;
  }
  .vhs-beeldband img {
    aspect-ratio: 3 / 2;
  }
  .vhs-beeldband-tekst {
    left: 34px;
    right: 34px;
    bottom: 24px;
  }
}

/* ============================================================
   2f6b. Kop van de re-integratiepagina
   De pagina opende met een kale titel en twee kolommen platte tekst.
   Voor mensen die zijn uitgevallen is dat te veel om door te komen,
   dus staat de kern nu naast een foto en zijn de feiten losse kaarten.
   ============================================================ */

.vhs-reintkop {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 24px 0;
}

.vhs-reintkop-binnen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.vhs-reintkop-titel {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.vhs-reintkop-onder {
  margin: 14px 0 0;
  font-size: 22px;
  font-style: italic;
  color: #009590;
}

.vhs-reintkop-lead {
  margin: 26px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: #0f2a2a;
  max-width: 46ch;
}

.vhs-reintkop-beeld {
  margin: 0;
}

.vhs-reintkop-beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

/* Let op: niet .vhs-feiten noemen. Die naam is al in gebruik voor de
   definitielijsten in de contact- en UNLOCK3D-kaarten; een tweede
   definitie daarvan duwt de inhoud van die kaarten naar buiten. */
.vhs-reintfeitensectie {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

.vhs-reintfeiten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vhs-reintfeit {
  min-width: 0;
  padding: 26px 26px 28px;
  border-radius: 20px;
  background: #e4f3ee;
  border-left: 4px solid #009590;
}

.vhs-reintfeit-kop {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00706c;
}

.vhs-reintfeit-tekst {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #0f2a2a;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .vhs-reintkop {
    padding-top: 44px;
  }
  .vhs-reintkop-binnen {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .vhs-reintkop-lead {
    font-size: 18px;
    max-width: none;
  }
  .vhs-reintfeiten {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .vhs-reintfeit {
    padding: 22px;
  }
}

/* ============================================================
   2f6c. Bereikbaarheid naast het aanmeldformulier
   Stond eerst als drie losse regels tekst onder elkaar. Nu twee regels
   waar je op kunt tikken, met een pictogram en een label erboven.
   ============================================================ */

.vhs-bereikbaar {
  background: #e4f3ee;
  border-radius: 24px;
  padding: 28px;
}

.vhs-bereikbaar-kop {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00706c;
  font-weight: 600;
}

.vhs-bereikbaar-regel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.vhs-bereikbaar-regel + .vhs-bereikbaar-regel {
  margin-top: 10px;
}

.vhs-bereikbaar-regel:hover,
.vhs-bereikbaar-regel:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 42, 42, 0.12);
}

.vhs-bereikbaar-icoon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #009590;
  color: #fff;
}

.vhs-bereikbaar-icoon svg {
  width: 21px;
  height: 21px;
}

/* min-width nul, anders duwt een lang e-mailadres de kaart open. */
.vhs-bereikbaar-tekst {
  min-width: 0;
}

.vhs-bereikbaar-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3a5453;
  font-weight: 600;
}

.vhs-bereikbaar-waarde {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  color: #0f2a2a;
  overflow-wrap: anywhere;
}

.vhs-bereikbaar-noot {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #3a5453;
}

/* ============================================================
   2f6d. De manieren waarop de behandeling vergoed kan worden
   Vier kaarten: zorgverzekering, werkgever, UWV en gemeente. Met een
   automatisch raster viel de vierde alleen op een tweede rij, wat rommelig
   staat. Daarom vaste stappen: vier naast elkaar op een breed scherm,
   twee bij twee daaronder, en één per regel op een telefoon.
   ============================================================ */

.vhs-vergoedingen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.vhs-vergoedingen > div {
  min-width: 0;
}

@media (max-width: 1100px) {
  .vhs-vergoedingen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .vhs-vergoedingen {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ============================================================
   2f7. Trajectkaarten op de tarievenpagina
   ============================================================ */

.vhs-trajectraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.vhs-trajectkaart {
  padding: 34px 32px 36px;
  border-radius: 24px;
  background: #e4f3ee;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* De tweede kaart valt op als het uitgebreide aanbod. */
.vhs-trajectkaart:nth-child(even) {
  background: #0f2a2a;
  color: #e4f3ee;
}

.vhs-trajectkaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.14);
}

.vhs-trajectkop {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-trajectkaart:nth-child(even) .vhs-trajectkop {
  color: #fff;
}

.vhs-trajectkaart .vhs-trajectprijs {
  margin: 14px 0 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: #00706c;
}

.vhs-trajectkaart:nth-child(even) .vhs-trajectprijs {
  color: #4fc8af;
}

.vhs-trajectkaart .vhs-trajectprijs span {
  display: block;
  margin-top: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #3a5453;
}

.vhs-trajectkaart:nth-child(even) .vhs-trajectprijs span {
  color: rgba(228, 243, 238, 0.8);
}

.vhs-trajecttoelichting {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #3a5453;
}

.vhs-trajectkaart:nth-child(even) .vhs-trajecttoelichting {
  color: rgba(228, 243, 238, 0.82);
}

/* ============================================================
   2f8. Beeld binnen een tekstkolom
   Kleiner dan een beeldband over de volle breedte, bedoeld om een kolom te
   laten ademen zonder de aandacht op te eisen.
   ============================================================ */

.vhs-tekstbeeld {
  margin: 8px 0 0;
}

.vhs-tekstbeeld img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.vhs-tekstbeeld figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #3a5453;
  font-style: italic;
}

/* Foto naast een tekstkolom. */
.vhs-tekstmetbeeld {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}

.vhs-zijbeeld {
  margin: 0;
}

.vhs-zijbeeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 22px;
}

/* Foto over de breedte van een sectie, rustiger dan een beeldband. */
.vhs-breedbeeld {
  margin: 40px 0 0;
}

.vhs-breedbeeld img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  border-radius: 22px;
}

@media (max-width: 900px) {
  .vhs-tekstmetbeeld {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .vhs-breedbeeld img {
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================
   2f9. Percelen (re-integratie)
   De naam van de module staat nu als titel, met de uitleg eronder.
   ============================================================ */

.vhs-percelen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.vhs-perceel {
  padding: 28px 28px 30px;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 20px;
  border-left: 4px solid #009590;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vhs-perceel:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.11);
}

.vhs-perceelnr {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e4f3ee;
  color: #00706c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vhs-perceelnaam {
  margin: 14px 0 0;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0f2a2a;
}

.vhs-perceeltekst {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #3a5453;
}

/* ============================================================
   2f10. Contactpagina
   ============================================================ */

.vhs-contactlocaties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.vhs-contactlocatie {
  display: block;
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 20px;
  border-top: 3px solid #4fc8af;
  color: #0f2a2a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vhs-contactlocatie:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.11);
  color: #0f2a2a;
}

.vhs-contactplaats {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.vhs-contactadres {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: #3a5453;
}

.vhs-contactroute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: #00706c;
}

.vhs-contactroute svg {
  width: 14px;
  height: 14px;
}

.vhs-contactraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.vhs-contactkaart {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 32px;
  background: #fff;
  border: 1px solid rgba(15, 42, 42, 0.1);
  border-radius: 22px;
}

.vhs-contactkaart.is-donker {
  background: #0f2a2a;
  border-color: #0f2a2a;
  color: #e4f3ee;
}

.vhs-contactkop {
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00706c;
  font-weight: 700;
  margin-bottom: 6px;
}

.is-donker .vhs-contactkop {
  color: #4fc8af;
}

.vhs-contactkaart .vhs-feiten dd a {
  color: #00706c;
}

.is-donker .vhs-feiten dt {
  color: rgba(228, 243, 238, 0.78);
}

.is-donker .vhs-feiten dd {
  color: #fff;
}

.is-donker .vhs-feiten > div {
  border-bottom-color: rgba(228, 243, 238, 0.22);
}

.vhs-contactnoot {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(228, 243, 238, 0.82);
}

.vhs-contactnoot a {
  color: #4fc8af;
}

/* De openingstijden staan op de contactpagina op een licht vlak. */
.vhs-tijden-licht .vhs-dag {
  color: #0f2a2a;
}

.vhs-tijden-licht .vhs-tijd {
  color: #3a5453;
}

.vhs-tijden-licht .vhs-tijdregel {
  border-bottom-color: rgba(15, 42, 42, 0.12);
}

.vhs-contactkaart .vhs-knop-groen {
  align-self: flex-start;
  margin-top: auto;
}

/* ============================================================
   2g. Kaarten komen omhoog bij aanwijzen
   Dit effect stond alleen bij de werkvormen op de volwassenenpagina en is
   nu overal toegepast waar een blok als losse kaart leest.
   ============================================================ */

.vhs-themakaart,
.vhs-laag,
.vhs-teamkaart,
.vhs-infokaart,
.vhs-startkaart,
.vhs-themablok,
.vhs-voetlocatie,
.vhs-vacature {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.vhs-themakaart:hover,
.vhs-laag:hover,
.vhs-teamkaart:hover,
.vhs-infokaart:hover,
.vhs-startkaart:hover,
.vhs-themablok:hover,
.vhs-vacature:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 42, 42, 0.12);
}

/* Op de donkere vlakken werkt een schaduw niet; daar lichten we de rand op. */
.vhs-themablok:hover {
  box-shadow: none;
  border-color: rgba(79, 200, 175, 0.6);
}

.vhs-themakaart:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

/* Wie liever geen beweging ziet, krijgt die ook niet. */
@media (prefers-reduced-motion: reduce) {
  .vhs-themakaart:hover,
  .vhs-laag:hover,
  .vhs-teamkaart:hover,
  .vhs-infokaart:hover,
  .vhs-startkaart:hover,
  .vhs-themablok:hover,
  .vhs-vacature:hover,
  .vhs-werkvorm:hover,
  .vhs-vormkaart:hover {
    transform: none;
  }
}

/* ============================================================
   3. Layout — meerkoloms rasters worden één kolom
   ============================================================ */

/* Rasters met repeat(auto-fit/auto-fill, minmax(...)) passen zichzelf al aan;
   die laten we met rust. Alle andere vaste kolomdefinities worden gestapeld. */
@media (max-width: 900px) {
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }

  /* Bij het stapelen valt de reden voor grote kolomafstanden weg. */
  [style*="gap:56px"],
  [style*="gap:64px"],
  [style*="gap:72px"] {
    gap: 32px !important;
  }
}

/* Ook de zelf-aanpassende rasters krijgen op een telefoon één kolom, behalve de
   kleine logo-rasters — die staan prima naast elkaar. */
@media (max-width: 560px) {
  [style*="minmax(240px"],
  [style*="minmax(250px"],
  [style*="minmax(260px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   4. Ruimte en typografie
   ============================================================ */

@media (max-width: 760px) {
  /* Grid- en flexitems krijgen standaard min-width:auto en weigeren daardoor
     smaller te worden dan hun langste woord. Een e-mailadres in een kop duwde
     zo de hele kolom breder dan het scherm. */
  main div,
  main section,
  main article,
  main li,
  main p,
  main h1,
  main h2,
  main h3,
  main h4 {
    min-width: 0;
  }

  /* break-word telt niet mee bij het berekenen van de minimale breedte,
     anywhere wel — pas dan mag de kolom echt krimpen. */
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  a,
  td {
    overflow-wrap: anywhere;
  }

  /* Koppen met een vaste maat schalen niet mee met clamp(). */
  [style*="font-size:28px"] {
    font-size: 22px !important;
  }
  [style*="font-size:26px"] {
    font-size: 21px !important;
  }
  [style*="font-size:24px"] {
    font-size: 20px !important;
  }

  /* De secties zijn met ruime desktopmarges opgezet; op een telefoon kost dat
     alleen maar scrollwerk. */
  main section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }

  /* Kaarten en formulierpanelen. */
  [style*="padding:48px"] {
    padding: 24px !important;
  }
  [style*="padding:40px"] {
    padding: 22px !important;
  }
  [style*="padding:36px"] {
    padding: 22px !important;
  }
  [style*="padding:32px"] {
    padding: 20px !important;
  }
  [style*="padding:28px"] {
    padding: 20px !important;
  }

  /* Grote afgeronde hoeken ogen te log op een klein scherm. */
  [style*="border-radius:28px"],
  [style*="border-radius:32px"] {
    border-radius: 20px !important;
  }
}

@media (max-width: 600px) {
  /* De koppen gebruiken clamp() met een vw-component; op een telefoon valt die
     terug op de ondergrens, en die is voor desktop gekozen. */
  h1[style*="clamp"] {
    font-size: clamp(29px, 8.4vw, 46px) !important;
    line-height: 1.08 !important;
  }
  h2[style*="clamp"] {
    font-size: clamp(24px, 6.6vw, 34px) !important;
    line-height: 1.15 !important;
  }
  h3[style*="clamp"] {
    font-size: clamp(20px, 5.4vw, 28px) !important;
  }

  /* Introparagrafen. */
  [style*="font-size:21px"] {
    font-size: 17px !important;
  }
  [style*="font-size:19px"] {
    font-size: 16.5px !important;
  }
  [style*="font-size:18px"] {
    font-size: 16px !important;
  }

  /* Een regellengte in ch die voor desktop klopt, knelt hier alleen maar. */
  [style*="max-width:34ch"],
  [style*="max-width:70ch"],
  [style*="max-width:20ch"],
  [style*="max-width:24ch"],
  [style*="max-width:30ch"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   4b. Formulierstatus en spamval
   ============================================================ */

/* Onzichtbaar veld dat alleen bots invullen. Niet display:none, want dat
   slaan sommige bots juist over. */
.vhs-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vhs-formstatus {
  margin: 20px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.vhs-formstatus:empty {
  display: none;
}

.vhs-formstatus.is-bezig {
  padding: 15px 19px;
  border-radius: 14px;
  background: #f3f0ea;
  color: #3a5453;
}

.vhs-formstatus.is-goed {
  padding: 15px 19px;
  border-radius: 14px;
  background: #e4f3ee;
  color: #00706c;
}

.vhs-formstatus.is-fout {
  padding: 15px 19px;
  border-radius: 14px;
  background: #fdecec;
  color: #a3302b;
}

/* ============================================================
   5. Formulieren en aanraakbediening
   ============================================================ */

/* Onder 16px zoomt iOS het formulier automatisch in bij focus. */
input,
select,
textarea {
  font-size: 16px;
  max-width: 100%;
}

@media (max-width: 760px) {
  input,
  select,
  textarea {
    width: 100%;
  }

  /* Knoppen en links moeten met een duim te raken zijn (WCAG 2.5.8). */
  button,
  a[style*="border-radius:999px"] {
    min-height: 44px;
  }

  button[style*="padding:16px"],
  a[style*="padding:18px 34px"] {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Rijen met knoppen naast elkaar stapelen. */
  [style*="display:flex"][style*="gap:14px"] {
    gap: 12px !important;
  }
}

/* ============================================================
   6. Printen
   ============================================================ */

@media print {
  .vhs-header,
  .vhs-burger,
  .vhs-nav {
    display: none !important;
  }
  body {
    background: #fff;
  }
}