/* Gedeelde opmaak van de verzekeringspagina's (tabs, hero, dekkingen, niveaus, tool, anker, keuzeknop).
   Overgenomen uit de designsandbox (git-tag website-template-2026-08-18) zonder de prototype-chrome
   (.proto*, .screen*); verder ongewijzigd, zelfde class-namen. */

/* =========================================================
   Alle CSS van de verzekeringspagina staat in dit ene bestand,
   gegroepeerd per component. Kleuren uitsluitend via de
   bestaande tokens uit main.css, altijd als rgba(var(--token), a).
   Nieuwe componenten: voorvoegsel .insurance-
   ========================================================= */

/* ---------- 0. BASIS / HULPKLASSEN ---------- */
[hidden] {
  display: none !important;
}
.insurance-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.insurance-page :focus-visible {
  outline: 3px solid rgba(var(--color-blue-primary), 1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 1. PRIMAIRE ACTIE ----------
   Hier staat bewust niets meer. De pagina had een eigen actiekleur (een warm
   oranje, met een eigen token) omdat blauw hier de kleur van álles was. Die
   tweede merkkleur bestaat niet meer: de site heeft één accentkleur en dat is
   --color-blue-primary. .btn-primary en .btn-primary-arrow dragen op deze
   pagina dus gewoon hun sitebrede stijl uit main.css — blauw vlak, witte
   tekst — en elke override hier zou dat weer uit elkaar laten lopen. */

/* ---------- 2. PAGINA-RAAMWERK ----------
   De pagina is zelf breedteloos. Gewone secties worden gecentreerd op
   1220px; een .insurance-band loopt met zijn achtergrond door tot de
   schermrand en centreert zijn eigen inhoud op diezelfde 1220px. Zo
   ontstaat het bandenritme van oomverzekeringen.nl zonder dat er ook
   maar iets van de content in een extra wikkel hoeft. */
/* De verzekeringspagina regelt zijn eigen breedtes. Daarom gaat de
   begrenzing van de bestaande .content-area (max-width 1260px + 20px
   padding, uit main.css) er voor deze pagina áf: anders kan een band
   nooit tot de schermrand lopen. De inhoud staat daarna nog steeds op
   exact dezelfde 1220px als nu. Grip mag dit ook oplossen met een
   modifier op de container in plaats van met :has(). */
.content-area:has(.insurance-page) {
  max-width: none;
  padding-inline: 0;
}
/* Eindigt de pagina met de gekleurde sluitband, dan sluit die rechtstreeks aan
   op de footer. Anders bleef de onderpadding van .content-area (60px, uit
   main.css) als lichte reststrook tussen twee gekleurde vlakken staan: dat
   leest als een gat, niet als een afsluiting. Het overzicht heeft geen
   sluitband en houdt zijn onderpadding dus gewoon. */
.content-area:has(.insurance-band--anker) {
  padding-bottom: 0;
}
/* De pagina is wit, niet grijs. De site-achtergrond (--color-grey-light uit
   main.css) hield de verzekeringspagina in een grijze bak waarin een wit
   leesvel moest drijven; dat vel is eruit (zie .insurance-panel) en het wit
   zit nu op de pagina zelf. Wat kleur draagt zijn de twee donkere banden
   (hero en sluitband) en de zachtgrijze vlakken in de inhoud. */
.insurance-page {
  --insurance-breedte: 1220px;
  background: rgba(var(--color-white), 1);
}
.insurance-page > * {
  width: 100%;
  max-width: var(--insurance-breedte);
  margin-inline: auto;
  padding-inline: 20px;
}
.insurance-band {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, var(--insurance-breedte));
  justify-content: center;
  padding-block: 34px;
}
.insurance-band--donker {
  background: rgba(var(--color-blue-dark), 1);
  color: rgba(var(--color-white), 1);
}
/* De hero grenst rechtstreeks aan de tabbalk — de pijlerstrook die er eerst
   tussen stond is vervallen. Onderin daarom meer lucht dan bovenin, zodat de
   donkere band niet tegen de tabs aan sluit maar er rustig in overloopt. */
.insurance-hero.insurance-band {
  padding-block: 34px 48px;
}
/* Sluitband: donker, met een verloop naar blauw-medium, zodat de pagina
   eindigt zoals hij begint — donkere hero boven, donkere conversieband onder,
   alles daartussen licht. */
.insurance-band--anker {
  /* Eén laag: de diagonale sluitkleur. De verticale overgang naar het
     footerblauw is eruit — die las als een lichte balk tussen de donkere
     band en de footer. De footer maakt de overgang zelf al met zijn eigen
     schuine punt (.site-footer__interaction::before), net als op
     expatverzekering.nl. */
  background:
    linear-gradient(
      128deg,
      rgba(var(--color-blue-dark), 1) 0%,
      rgba(var(--color-blue-dark), 1) 42%,
      rgba(var(--color-blue-medium), 1) 100%
    );
  color: rgba(var(--color-white), 1);
  margin-top: 44px;
  /* Onderin iets meer lucht dan bovenin: de band raakt de footer, dus de
     laatste regel mag er niet tegenaan liggen. */
  padding-block: 44px 60px;
}

/* --- hero --- */
/* Het verzekeraarslogo stond als losse witte plaat linksboven in de hero.
   Die plaat is eruit: het beeldmerk vult nu het beeldblok rechts (zie
   .insurance-hero__media). Eén wit vlak in plaats van twee, en de hero
   heeft altijd een rechterkolom — ook zonder beeldredactie. */
.insurance-hero__type {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-white), 0.75);
}
.insurance-hero__title {
  font-family: "Zilla Slab", serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.12;
  color: rgba(var(--color-white), 1);
  margin: 8px 0 16px;
}
.insurance-hero__intro {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--color-white), 0.88);
}
.insurance-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 24px;
}
.insurance-hero__actions .btn-text-arrow {
  color: rgba(var(--color-white), 1);
}
/* Beeldblok in de hero, 16:9. Twee vullingen, dezelfde plaat:
   --foto  = de aangeleverde foto voor deze verzekering (dekt het vlak);
   --merk  = de lege staat, met het beeldmerk van de verzekeraar erin.
   De lege staat is daarmee geen streepjeskader meer maar een afgemaakt
   vlak. De logo's hebben zelf een witte achtergrond, dus die witte plaat
   is meteen hun ondergrond; op hoogte uitgelijnd wegen een breed-en-laag
   logo (Goudse) en een bijna vierkant logo (ACS) even zwaar. */
.insurance-hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 26px;
  background: rgba(var(--color-white), 1);
  box-shadow: 0 18px 44px rgba(var(--color-black), 0.3);
}
.insurance-hero__media--foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vlak wit, geen verloop en geen tint: de logobestanden hebben zelf een
   witte achtergrond, dus elke andere ondergrond laat hun bijsnijkader als
   een rechthoek zien. */
.insurance-hero__media--merk {
  display: grid;
  place-items: center;
  padding: 9% 11%;
}
.insurance-hero__media--merk img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* --- kerngegevens: dezelfde velden uit blok 1.4, maar niet langer als
       eigen grijze strook onder de hero. Ze staan nu ín de hero, onder
       een haarlijn: kleiner, rustiger, en ze vullen de breedte die de
       hero toch al heeft. --- */
.insurance-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--color-white), 0.22);
}
.insurance-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.insurance-hero__fact dt {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-white), 0.62);
}
.insurance-hero__fact dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--color-white), 1);
  /* Een waarde mag over twee regels lopen ("Minimaal 1 jaar, daarna
     opzegbaar"). `balance` verdeelt die twee regels even lang in plaats van
     één los woord op de tweede regel achter te laten. */
  text-wrap: balance;
}
/* De pijlerrij onder de hero (.insurance-pillars, vier korte beloftes met een
   lijnicoon) is vervallen: hij herhaalde "waarom via JoHo" een derde keer, na
   blok 3.6 op de tab Aanvragen en het conversieanker onderaan. De hero loopt
   nu rechtstreeks door in de tabbalk. */
/* Kruimelpad. Stond op de lichte pagina-achtergrond en gaf zo een lichte
   strook tussen de zwarte navigatiebalk en de donkere hero. Het pad hoort nu
   bij de hero: zelfde donkere vlak, over de volle breedte, zodat de pagina
   direct onder de header donker begint. De negatieve bovenmarge schuift de
   band een stuk onder de vaste header (die is ondoorzichtig wit en dekt hem
   af), zodat er geen restspleet overblijft als de headerhoogte afwijkt van de
   bovenpadding van .content-area. */
.insurance-crumbs {
  max-width: none;
  padding-inline: 0;
  margin-top: -24px;
  background: rgba(var(--color-blue-dark), 1);
}
.insurance-crumbs__inner {
  max-width: var(--insurance-breedte);
  margin-inline: auto;
  padding: 38px 20px 0;
  font-size: 13px;
  color: rgba(var(--color-white), 0.7);
}
.insurance-crumbs a {
  color: rgba(var(--color-white), 0.7);
}
.insurance-crumbs span {
  margin: 0 6px;
}
/* Eén kolom: de meescrollende zijkolom is vervallen. De tabinhoud
   gebruikt de volle breedte; lopende tekst blijft op leesbreedte. */
.insurance-tabsheet {
  margin-top: 28px;
}
/* Het paneel was een wit leesvel met een haarlijn eromheen, op een grijze
   pagina. De pagina is nu zelf wit, dus dat vel was wit op wit met alleen nog
   een rand die niets meer scheidde. Wat blijft is de verticale ruimte: de
   tabinhoud staat vlak op de pagina, links en rechts precies uitgelijnd met de
   tabbalk erboven (allebei kinderen van .insurance-tabsheet, dus geen van
   beide draagt eigen zijpadding). */
.insurance-panel {
  padding: 40px 0;
}
.insurance-panel > * + * {
  margin-top: 72px;
}
/* --- volle-breedte band binnen een tab (.insurance-block--band) ---
   Naar het voorbeeld van oomverzekeringen.nl, waar één blok in een gekleurde
   band staat die tot de schermrand doorloopt. Hier dragen twee blokken hem:
   Documenten (tab Service) en Waarom via JoHo (blok 3.6, tab Aanvragen).
   De hero en de sluitband zijn directe kinderen van .insurance-page en
   kunnen zich met max-width: none uitstrekken; een blok in een tabpaneel
   staat drie niveaus dieper en moet zich er met negatieve marges uit
   trekken. Geen voorouder klipt horizontaal (.insurance-tabs scrollt wel,
   maar dat is een zusje van het paneel, geen voorouder), dus de band loopt
   echt tot de rand. De band is precies 100vw breed; bij een klassieke,
   niet-overlappende schuifbalk (Windows, Linux) is dat de breedte van die
   balk méér dan de pagina. Daarom klipt .insurance-page (de breedteloze
   wortel, dus op schermbreedte) horizontaal met overflow-x: clip: geen
   scrollcontainer, dus sticky en de tabstrook werken gewoon door, en de
   vaste FAB wordt er niet door geraakt (fixed hangt aan het venster, niet
   aan een voorouder zonder transform). Niet op .insurance-tabsheet zetten:
   die is 1220px en zou de band precies daarop afknippen. De binnenpadding
   is precies de uitstulping, zodat de inhoud van de band op dezelfde lijn
   staat als de blokken erboven en eronder. */
.insurance-page {
  overflow-x: clip;
}
.insurance-block--band {
  background: rgba(var(--color-blue-primary), 0.06);
  padding-block: 56px;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
/* Het bandritme mag niet dubbelen met het haarlijnritme van het paneel
   (.insurance-panel > * + *, dat op desktop een lijn én 72px padding
   toevoegt). Direct vóór en ná een band staat dus geen haarlijn, en de band
   houdt zijn eigen padding-block (56px, 40px onder 720px) in plaats van de
   72px extra padding van die regel. De witruimte ervóór blijft wél het
   gewone blokritme: zonder marge raakt het vorige blok de tint en staat zijn
   laatste regel op de rand van de band. Zoals bij oomverzekeringen.nl loopt er
   dus eerst een stuk wit, dan pas de kleur. De `section` in de selector staat
   er om de mediaqueryregels te overstemmen: die staan verderop in het bestand,
   en bij gelijke specificiteit wint de laatste regel. De marge zit op een
   aparte, zusselecterende regel, zodat een band die tóch als eerste blok van
   een tab zou staan geen marge boven zich krijgt die het paneel niet geeft. */
.insurance-panel > section.insurance-block--band {
  margin-top: 0;
  padding-top: 56px;
  border-top: none;
}
.insurance-panel > * + section.insurance-block--band {
  margin-top: 72px;
}
.insurance-panel > .insurance-block--band + section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Is de band het laatste blok van een tab, dan moet hij tegen de onderrand
   van het paneel aan liggen; anders blijft er een witte strook onder de tint
   staan. Twee wegen: de band een negatieve margin-bottom geven, of de
   onderpadding van het paneel wegnemen. Het tweede is het minst breekbaar —
   een negatieve marge moet de paneelpadding naspiegelen en die staat op twee
   plekken (40px hier, 24px onder 720px), dus dat getal zou stil uit de pas
   gaan lopen. `:has()` wordt in dit bestand al gebruikt (zie
   .content-area:has(.insurance-page)). */
.insurance-panel:has(> .insurance-block--band:last-child) {
  padding-bottom: 0;
}
/* En dan staat er nog de 44px bovenmarge van de sluitband tussen die tint en
   het donkere anker: een dunne witte balk precies waar twee gekleurde vlakken
   op elkaar horen aan te sluiten. Die marge hoort bij de tabs die op wit
   eindigen (Informatie, Premie), dus hij mag niet zomaar weg — alleen als het
   zíchtbare paneel op een band eindigt. De vier panelen zijn zusjes binnen
   .insurance-tabsheet en insurance-page.js zet `hidden` op de drie die niet
   aan de beurt zijn, dus dat is precies wat `:not([hidden])` hier leest; het
   anker is het volgende zusje van de tabsheet zelf. Wisselt de bezoeker van
   tab, dan wisselt deze regel mee. */
.insurance-tabsheet:has(> .insurance-panel:not([hidden]) > .insurance-block--band:last-child)
  + .insurance-band--anker {
  margin-top: 0;
}
/* Vlakke rijen verdwijnen in de tint van de band. Documentgroepen en
   waarom-punten worden daarom witte kaarten met een haarlijn — hetzelfde
   recept als de kaart om de dekkingstabel. */
.insurance-block--band .insurance-docs__group,
.insurance-block--band .insurance-why__item {
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-blue-dark), 0.1);
  border-radius: 12px;
  padding: 18px 20px;
}
/* Eén blok smaller dan de rest. De pagina bestaat verder uit banden en
   blokken van 1180 px; de dekkingenlijst zou daarin de vierde volle-breedte
   kaartenstapel op rij zijn. OOM zet die lijst juist in een smallere,
   gecentreerde kolom (daar ongeveer 78% van de contentbreedte), en dat
   geeft de lange pagina een rustpunt: de lijst leest als een kolom in
   plaats van als nóg een vlak. De kop en de inleiding schuiven mee — dat
   is wat het als kolom laat lezen in plaats van als een uitlijnfout.
   Onder 940 px valt de begrenzing vanzelf weg, dus geen mediaquery. */
.insurance-section--smal {
  max-width: 940px;
  margin-inline: auto;
}
/* Sectiekoppen dragen de pagina: ze zijn een vijfde groter dan hiervoor en
   houden meer afstand tot hun eigen inhoud. Zilla Slab is hier ruim boven de
   20px-ondergrens, dus de display-letter mag. */
.insurance-block__title {
  font-family: "Zilla Slab", serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 20px;
}
/* Blokkop met merkteken: kop links, het JoHo-logo rechts op de kopregel.
   Alleen bij de premietool en de klantenservice — daar is JoHo de partij, dus
   het logo is daar informatie en geen versiering. Op smalle schermen valt het
   logo onder de kop; het krijgt geen eigen regelhoogte want de kop wikkelt daar
   toch al over twee regels. */
.insurance-blockhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 20px;
}
.insurance-blockhead .insurance-block__title {
  margin-bottom: 0;
}
.insurance-blockhead__brand {
  display: block;
  width: auto;
  height: 26px;
  flex: none;
}
.insurance-block__lead {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.8);
  margin-bottom: 18px;
}
/* Lopende tekst blijft op leesbreedte; kaarten, tabellen en gridjes
   gebruiken wél de volle kolom. */
.insurance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 70ch;
}
.insurance-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.55;
}
.insurance-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 1);
}
/* Merktekens binnen een dekking. "Wat is verzekerd" en "wat is niet
   verzekerd" droegen allebei dezelfde blauwe stip, met een groene of rode
   badge in de subkop als enig verschil — twee keer hetzelfde signaal, ver
   van de regel waar het over gaat. Nu draagt elke regel zelf het teken:
   een groene schijf met een vinkje, of een gedempte schijf met een streep.
   Beide zijn met CSS getekend, dus geen iconenset en geen extra bestanden.
   De betekenis staat daarnaast in woorden in de subkop, dus kleur is nooit
   de enige drager. */
.insurance-list--gedekt li,
.insurance-list--niet-gedekt li {
  padding-left: 34px;
}
.insurance-list--gedekt li::before,
.insurance-list--niet-gedekt li::before {
  left: 0;
  top: 2px;
  width: 21px;
  height: 21px;
}
.insurance-list--gedekt li::before {
  background: rgba(var(--color-green), 1);
}
.insurance-list--niet-gedekt li::before {
  background: rgba(var(--color-blue-dark), 0.42);
}
.insurance-list--gedekt li::after,
.insurance-list--niet-gedekt li::after {
  content: "";
  position: absolute;
  background: transparent;
}
/* Vinkje: twee randen van een blokje, 45 graden gedraaid. */
.insurance-list--gedekt li::after {
  left: 5.5px;
  top: 9px;
  width: 10px;
  height: 5px;
  border-left: 2px solid rgba(var(--color-white), 1);
  border-bottom: 2px solid rgba(var(--color-white), 1);
  transform: rotate(-45deg);
}
/* Streep in plaats van een kruis: een uitsluiting is geen foutmelding. */
.insurance-list--niet-gedekt li::after {
  left: 6px;
  top: 11.5px;
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--color-white), 1);
}

/* ---------- 3. TABBALK ----------
   Onderstrepingstabs. Het waren mappenlipjes: de gekozen tab was een wit vlak
   met een rand, dat 1px in het witte leesvel eronder zakte zodat lipje en vel
   één blad werden. Dat vel is er niet meer (de pagina is wit), dus een witte
   lip op een witte pagina liet alleen nog een los randje zien.
   Nu draagt de balk zelf één haarlijn over de volle breedte en zet de gekozen
   tab daar een dikke blauwe streep overheen — het patroon dat iedereen als
   tabs leest. De rustende tabs zijn kale tekst zonder vlak of rand; hover
   maakt ze alleen donkerder, zodat kleur nooit het enige verschil is met de
   gekozen tab (die is bovendien zwaarder gezet). */
.insurance-tabbar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  border-bottom: 1px solid rgba(var(--color-blue-dark), 0.12);
}
.insurance-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  /* De strook zakt 1px omlaag, tot óver de haarlijn van de balk. Zo valt de
     streep van de gekozen tab precies op die lijn in plaats van er net boven.
     Dit zit op de strook en niet op de knop, want .insurance-tabs scrollt
     horizontaal en klipt daardoor ook verticaal — een ::after die onder de
     knop uitsteekt zou wegvallen. Om diezelfde reden is de streep een
     inset-schaduw: die blijft binnen de knop. */
  margin-bottom: -1px;
}
.insurance-tabs::-webkit-scrollbar {
  display: none;
}
.insurance-tabs__button {
  position: relative;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(var(--color-blue-dark), 0.7);
  border: none;
  border-radius: 0;
  padding: 14px 22px;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.insurance-tabs__button:hover {
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-tabs__button[aria-selected="true"] {
  color: rgba(var(--color-blue-primary), 1);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 rgba(var(--color-blue-primary), 1);
}
/* Merkteken rechts in de tabbalk. De pagina toont in de hero het logo van de
   verzekeraar; dit is het enige teken dat op alle vier de tabs zichtbaar blijft
   dat de polis via JoHo loopt. Bewust geen link: hij staat naast een tablist en
   een extra tabstop daar verwart de toetsenbordvolgorde. Onder 1024px verborgen
   (zie de mediaquery daar): de balk scrollt dan horizontaal. */
.insurance-tabbar__brand {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 9px;
  /* Zelfde onderpadding als een tab, zodat het merkteken op dezelfde regel
     eindigt als de tabteksten en niet los boven de haarlijn hangt. */
  padding-bottom: 14px;
  font-size: 13px;
  color: rgba(var(--color-blue-dark), 0.55);
  white-space: nowrap;
}
/* Iets meer dan de helft van de logohoogte in header en footer (44px). Kleiner
   dan dit valt "INSURANCES" onder de leesbaarheidsgrens en blijft er een blauwe
   vlek over; de ingetogenheid zit in de maat en de plek, niet in doorzichtigheid. */
.insurance-tabbar__brand img {
  display: block;
  width: auto;
  height: 26px;
}

/* ---------- 4. ASSISTENT (de agent) ----------
   De assistent is niet langer iets van deze pagina: hij is een
   script-embed van JoHo, net als de premietool (zie
   `handoff/embed-klantagent.md`). De container hieronder draagt alleen de
   productsleutel en een terugvaltekst; zodra `joho-klantagent.js` geladen
   is bouwt dat script er zijn eigen chatpaneel in, met zijn eigen
   stylesheet onder de prefix `.joho-klantagent__…`. Maat, kleur, het
   vergroten, de volledige-schermstand onder 900px en de privacyregel
   zitten dáár — hier hoort daar niets meer van te staan.

   Wat de pagina wél regelt: de container zit ín de zwevende knop (§15b),
   een flexkolom met een gap. Het paneel zweeft los (position: fixed), dus
   zodra het script het overneemt — het zet dan de klasse `joho-klantagent`
   op de container — mag de container zelf geen plek meer innemen.
   Vandaar `display: contents`: geen doos, geen gap, geen invloed op de
   knop eronder.

   Zolang het script niet geladen is (of de agent onbereikbaar is) blijft
   de terugvaltekst met de voorbeeldvragen staan; die krijgt hieronder net
   genoeg opmaak om als kaartje boven de knop te kunnen staan. */
.insurance-assistant {
  width: min(320px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(var(--color-blue-dark), 0.18);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(var(--color-blue-dark), 0.78);
}
.insurance-assistant p {
  margin: 0;
}
.insurance-assistant.joho-klantagent {
  display: contents;
}

/* ---------- 5. (vervallen) FILTERCHIPS ----------
   De chiprij Alles · Ziektekosten · Bevalling · Verenigde Staten · Eigen
   risico · Uitsluitingen is eruit. Bij negen onderdelen met een
   samenvattingszin in de dichte kop voegde filteren niets toe, en het
   kostte een nieuw contentveld (`themas`) per dekking dat nu vervalt. */

/* ---------- 6. DEKKINGSACCORDEON ---------- */
.insurance-coverages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Grijs vlak zonder rand. De dekkingen staan op de witte pagina, dus het
   lichte kaartje van hiervoor viel weg tegen de ondergrond en de rand eromheen
   was het enige dat het nog vasthield. Andersom werkt het: de kaart is
   zachtgrijs, de pagina eromheen wit, en de rand kan weg. */
.insurance-coverage {
  background: rgba(var(--color-grey-soft), 1);
  border: none;
  border-radius: 12px;
  overflow: hidden;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-coverage__heading {
  margin: 0;
}
.insurance-coverage__toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 18px 20px;
  cursor: pointer;
  font-family: Poppins, sans-serif;
}
.insurance-coverage__toggle:hover .insurance-coverage__name {
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-coverage__label {
  flex: 1 1 auto;
  min-width: 0;
}
.insurance-coverage__name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-coverage__summary {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(var(--color-blue-dark), 0.78);
}
.accordion-heading__icon {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 3px;
}
.accordion-heading__icon::before,
.accordion-heading__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(var(--color-blue-primary), 1);
  border-radius: 1px;
}
.accordion-heading__icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.accordion-heading__icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}
[aria-expanded="true"] .accordion-heading__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.insurance-coverage__panel {
  padding: 18px 20px 22px;
  border-top: 1px solid rgba(var(--color-blue-dark), 0.1);
}
.insurance-coverage__section + .insurance-coverage__section {
  margin-top: 22px;
}
/* De open dekking bestond uit vijf tekstblokken onder elkaar over de volle
   breedte, met opsommingen die op desktop over twee kolommen uitwaaierden.
   Zes ongelijke regels in twee kolommen lopen nooit gelijk uit, en dat is
   wat de uitgeklapte dekking rommelig maakte. Nu heeft het paneel twee
   vaste kolommen met elk een eigen rol: links wat er wel en niet gedekt is
   (één kolom, dus de regels lopen recht onder elkaar), rechts een blok met
   de bedragen, de aandachtspunten en de verzekeringskaart. De opsomming
   zelf waaiert niet meer uit; de breedte wordt gebruikt door de inhoud te
   verdelen in plaats van door de regels te versnipperen. */
/* Het blok met de bedragen is wit ín de grijze kaart — precies omgekeerd aan
   de pagina eromheen. Twee grijstinten op elkaar zouden niets meer scheiden. */
.insurance-coverage__aside {
  margin-top: 22px;
  background: rgba(var(--color-white), 1);
  border-radius: 12px;
  padding: 18px 20px;
}
/* In een kolom van ~290 px past label en waarde niet naast elkaar; daar
   staat de waarde onder het label in plaats van erachter af te breken. */
.insurance-coverage__aside .insurance-facts div {
  display: block;
  padding: 8px 0;
}
.insurance-coverage__aside .insurance-facts dt {
  font-size: 13.5px;
  color: rgba(var(--color-blue-dark), 0.6);
}
.insurance-coverage__aside .insurance-facts dd {
  margin-top: 1px;
}
/* De zijkolom is zelf een wit kaartje; daarin valt hetzelfde grijs-zachte
   vlak als elders gewoon op, dus hoeft er geen zijlijn omheen. Alleen wat
   krapper: in een kolom van ~290 px is de ruimte schaarser. */
.insurance-coverage__aside .insurance-notice {
  padding: 14px 15px;
}
.insurance-coverage__aside .insurance-notice__text {
  font-size: 14.5px;
}
/* De verzekeringskaart is de laatste regel in het blok; daar hoeft geen
   scheidingslijn meer onder. */
.insurance-coverage__aside .pagelink-item:last-child {
  border-bottom: none;
}
.insurance-coverage__aside .pagelink-item a {
  padding-bottom: 0;
}
/* Subkoppen binnen een dekking zijn nu labels: klein, in kapitalen en
   gedempt. Ze markeren het blok zonder met de dekkingsnaam in de kop te
   concurreren, en ze dragen het woord dat de betekenis vasthoudt nu de
   badge weg is. */
.insurance-coverage__subtitle {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-dark), 0.55);
  margin-bottom: 10px;
}
/* .badge* bestaat al in assets/ui-reference.html; hier overgenomen. */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.badge--available {
  background: rgba(var(--color-green), 0.12);
  color: rgba(var(--color-green), 1);
}
.badge--unavailable {
  background: rgba(var(--color-red), 0.12);
  color: rgba(var(--color-red), 1);
}
.badge--website {
  background: rgba(var(--color-blue-primary), 0.12);
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-facts {
  margin: 0;
  display: grid;
  gap: 2px 20px;
  font-size: 15px;
}
.insurance-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--color-grey-medium), 0.7);
}
.insurance-facts dt {
  color: rgba(var(--color-blue-dark), 0.8);
}
.insurance-facts dd {
  margin: 0;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
}

/* --- "Vraag hierover": de agent binnen de dekking zelf. Staat hidden in
       de markup en wordt door JS getoond, net als de vraagbalk: zonder JS
       (of met de agent uit) hoort hij er niet te staan. --- */
.insurance-coverage__footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--color-blue-dark), 0.1);
}
.insurance-coverage__ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(var(--color-blue-primary), 0.5);
  border-radius: 30px;
  background: transparent;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(var(--color-blue-primary), 1);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.insurance-coverage__ask:hover {
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-white), 1);
}

/* ---------- 7. AANDACHTSPUNTEN ----------
   Waren rode `.alert--error`-kaarten (rode rand, rode vulling, rode kop).
   Vijf rode vlakken onder elkaar lezen als vijf storingsmeldingen. Daarna
   kregen ze een gekleurde zijrand (blauw of gedempt rood); ook dat las nog
   als een melding zodra er één losse kaart tussen gewone tekst stond.
   Nu is er één stijl voor élk aandachtspunt: het grijs-zachte vlak met ronde
   hoeken en een rond icoonvlak dat eerder alleen de variant `--info-cards`
   had. Geen zijrand en geen kleuraccent meer, dus ook geen kleurverschil
   tussen informatie en een aandachtspunt: het onderscheid draagt alleen nog
   het icoon (`_macros.html` kiest een schild bij `type: waarschuwing` en een
   cirkel-i bij `type: info`; zonder titel is er geen icoon en blijft alleen de
   tekst over). */
.insurance-notices {
  display: grid;
  gap: 12px;
}
.insurance-notice {
  background: rgba(var(--color-grey-soft), 1);
  border: none;
  border-radius: 12px;
  padding: 19px 20px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-coverage__section > .insurance-notice + .insurance-notice {
  margin-top: 10px;
}
.insurance-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.1);
  color: rgba(var(--color-blue-primary), 1);
  margin-bottom: 12px;
}
.insurance-notice__icon svg {
  display: block;
}
.insurance-notice__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 6px;
}
.insurance-notice__text {
  color: rgba(var(--color-blue-dark), 0.78);
  font-size: 15px;
  line-height: 1.55;
}

/* Variant `--info-cards`, alleen voor het blok "Waar u op moet letten". Nu de
   kaartstijl de basis is, draagt de variant nog één ding: daar staan vijf
   punten in een raster naast elkaar en die hebben iets meer lucht nodig dan
   de losse kaarten in de tabinhoud. De klasse blijft bestaan omdat de
   templates hem gebruiken en `web/` de spec voor Grip is. */
.insurance-notices--info-cards {
  gap: 16px;
}

/* ---------- 8. FAQ / SERVICEVRAGEN (.menu-faq* bestaat live bij Grip) ---------- */
.menu-faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-faq-list__item {
  background: rgba(var(--color-grey-soft), 1);
  border: none;
  border-radius: 12px;
  overflow: hidden;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.menu-faq-question {
  margin: 0;
}
.menu-faq-question button {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 16px 20px;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(var(--color-blue-dark), 1);
  line-height: 1.4;
}
.menu-faq-question button:hover {
  color: rgba(var(--color-blue-primary), 1);
}
.menu-faq-answer {
  padding: 0 20px 20px;
}
/* ---------- 9. DEKKINGSNIVEAUS ----------
   Beeldtaal overgenomen uit de dekkingsvergelijkings-PDF
   (src/pdf/dekkingsvergelijking/templates/dekkingsoverzicht.html.j2):
   kolommen als kaarten, waardekolommen als één getint segment, ✓/✗ in
   plaats van de woorden "Gedekt"/"Niet gedekt", een blauwe chip voor
   voorwaarden en een omlijnde badge voor losse modules. De categoriekoppen
   (Medische zorg · Bevalling en gezin · Hulpmiddelen) zijn eruit: de tabel
   is nu één doorlopend geheel, zoals gevraagd. Dat scheelt tegelijk een
   redactiekeuze per verzekering, want die indeling was zelf verzonnen.
   De PDF rekent in mm en pt en gebruikt DejaVu; dit is dezelfde
   opzet in px met Poppins en Zilla Slab. Kleuren komen uit de bestaande
   tokens: waar de PDF #E6EEF6 / #F3F7FA / #DCE8F4 gebruikt staat hier
   --color-grey-soft. Kop en kolom hebben dezelfde tint — de tabel is één
   grijs segment op de witte pagina en de kop wordt gedragen door de dikke
   donkerblauwe lijn eronder, niet door een tweede kleur. */
.insurance-levels__picker {
  display: flex;
  /* Vanaf vier niveaus passen de knoppen niet meer op één regel (Global Health
     Journey); zonder wrap steken ze buiten de pil. Bij drie niveaus verandert er
     niets, want dan wordt er niet gewrapt. */
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 14px;
}
.insurance-levels__picker .view-toggle__btn {
  flex: 1;
  justify-content: center;
}
.table-container {
  overflow-x: auto;
}
/* De tabel staat in één witte kaart. Daarvoor waren het losse grijze
   kolommen op een witte pagina met een donkerblauwe streep erboven: dat las
   als losse stroken in plaats van als één overzicht. De kaart bindt de
   kolommen samen; de kleur zit in de koprij (lichtblauw vlak met een blauwe
   streep eronder) en in de niveaunaam, niet in de cellen. */
.insurance-levels .table-container {
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-blue-dark), 0.1);
  border-radius: 12px;
  /* Onderaan minder lucht: de laatste rij heeft zelf al geen scheidingslijn
     meer, dus 8px is genoeg om de kolomsegmenten van de rand te houden. */
  padding: 16px 20px 8px;
}
.insurance-levels__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px 0;
  table-layout: fixed;
  font-size: 15px;
}
/* --- kolomkoppen --- */
/* De hoekcel ("ONDERDEEL") hoort bij de koprij, niet bij de labelkolom
   eronder: zelfde lichtblauwe tint en zelfde blauwe streep als de
   kolomkoppen. Beide bovenhoeken rond en niet alleen linksboven, want de
   kolommen staan 6px uit elkaar (border-spacing) — de hoekcel is daardoor een
   eigen segment, precies zoals de koppen ernaast. */
.insurance-levels__rowhead {
  text-align: left;
  vertical-align: bottom;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-dark), 0.55);
  background: rgba(var(--color-blue-primary), 0.08);
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid rgba(var(--color-blue-primary), 1);
  padding: 14px 14px 12px;
}
.insurance-levels__table thead th.insurance-levels__cell {
  background: rgba(var(--color-blue-primary), 0.08);
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid rgba(var(--color-blue-primary), 1);
  padding: 14px 14px 12px;
  text-align: left;
  vertical-align: bottom;
}
.insurance-levels__product {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
  margin-bottom: 4px;
}
.insurance-levels__name {
  display: block;
  font-family: "Zilla Slab", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  color: rgba(var(--color-blue-primary), 1);
}
/* premie_vanaf is leeg in beide contentbestanden; staat er wél een bedrag,
   dan landt het hier — net als de regel .lvl-meta in de PDF. */
.insurance-levels__meta {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--color-blue-dark), 0.7);
  margin-top: 4px;
}
/* --- itemrijen --- */
.insurance-levels__row th {
  text-align: left;
  vertical-align: top;
  padding: 11px 16px 11px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(var(--color-blue-dark), 1);
  /* Rijscheiding in blauw-donker op 10%: dezelfde lijn als de rand van de
     kaart eromheen. Het oude grey-medium was een tweede, koeler grijs. */
  border-bottom: 1px solid rgba(var(--color-blue-dark), 0.1);
}
.insurance-levels__table td.insurance-levels__cell {
  background: rgba(var(--color-grey-soft), 1);
  border-bottom: 1px solid rgba(var(--color-blue-dark), 0.1);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(var(--color-blue-dark), 1);
  vertical-align: top;
  text-align: center;
}
/* Het kolomsegment rondt boven- en onderaan één keer af: de tabel is één
   doorlopend blok, zonder tussenkopjes. */
.insurance-levels__group .insurance-levels__row:first-of-type td.insurance-levels__cell {
  border-radius: 10px 10px 0 0;
}
.insurance-levels__group .insurance-levels__row:last-of-type td.insurance-levels__cell {
  border-radius: 0 0 10px 10px;
  border-bottom: none;
}
.insurance-levels__group .insurance-levels__row:last-of-type th {
  border-bottom: none;
}
/* --- markers, chips en badges --- */
.insurance-levels__mark {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.insurance-levels__mark--ja {
  color: rgba(var(--color-green), 1);
}
.insurance-levels__mark--nee {
  color: rgba(var(--color-blue-dark), 0.35);
}
/* Chip: informatief, niet alarmerend — voor voorwaarden en beperkingen. */
.insurance-levels__chip {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(var(--color-blue-primary), 0.14);
  color: rgba(var(--color-blue-medium), 1);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.insurance-levels__sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(var(--color-blue-dark), 0.6);
  margin-top: 3px;
}
/* Noot onder een vinkje ("tot € 5.000", "20 behandelingen"): de dekking staat
   vast, dit is de begrenzing erbij. Zelfde grijstint als de wachttijdregel
   hierboven, maar iets steviger — het is een bedrag, geen voetnoot. */
.insurance-levels__note {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(var(--color-blue-dark), 0.72);
  margin-top: 3px;
}
/* Streepje voor een veld dat op dit niveau niet van toepassing is. Bewust
   lichter dan het kruisje: "hier staat niets" is iets anders dan "niet gedekt". */
.insurance-levels__dash {
  display: inline-block;
  font-weight: 400;
  color: rgba(var(--color-blue-dark), 0.4);
}
/* Badge: apart bij te kopen module. Een lichte omlijning in plaats van een
   vulling. Blijft daarmee anders van vorm dan de blauwe chip — omlijnd
   tegenover gevuld — zonder een derde kleurvlak. */
.insurance-levels__badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(var(--color-blue-dark), 0.28);
  border-radius: 20px;
  background: transparent;
  color: rgba(var(--color-blue-dark), 0.72);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Legenda en disclaimer staan onder de kaart, niet erin: het zijn voetnoten
   bij de tabel, geen tabelinhoud. De eigen haarlijn erboven is eruit — de
   onderrand van de kaart scheidt ze al, en twee lijnen op 14px van elkaar
   lezen als een fout. */
.insurance-levels__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(var(--color-blue-dark), 0.65);
}
.insurance-levels__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.insurance-levels__disclaimer {
  margin-top: 10px;
  max-width: 90ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(var(--color-blue-dark), 0.55);
}
.insurance-levels--gekozen .insurance-levels__cell:not(.is-actief) {
  display: none;
}

/* ---------- 10. PREMIETOOL-RESERVERING EN VERWIJSBLOK ---------- */
/* De reservering is nu de terugvalstaat van de échte premietool: staat
   het script uit of is de API niet bereikbaar, dan blijft dit blok staan
   zoals het was. Zodra de tool laadt vervangt hij de inhoud en zet hij de
   klasse `joho-premietool` erbij; de streepjesrand en de vaste hoogte
   moeten dan wég, want de tool brengt zijn eigen kader mee. */
.insurance-tool {
  /* Streepjesrand: het teken dat hier iets hoort te staan wat er nog niet is.
     Neutraal donkerblauw in plaats van blauw-primair — die blauwe tint deed
     mee als vlak en dat is precies wat deze pagina niet meer doet. */
  border: 1px dashed rgba(var(--color-blue-dark), 0.28);
  border-radius: 12px;
  background: rgba(var(--color-grey-soft), 1);
  padding: 24px 20px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: var(--header-height-minimized, 130px);
  /* Afstand tot de bovenrand van het venster voor het meescrollende
     zijpaneel van de premietool; de tool leest dit token zelf uit. De
     site-header is position: fixed (main.css, §SITE HEADER), maar hij is niet
     altijd even hoog: base.html hangt er bij scrollY > 120 de klasse
     .site-header--minimized aan en dan krimpt hij. Onaangeraakt is hij 136px,
     geminimaliseerd 62px. Wat hier telt is de gekrompen maat: de premietool
     staat ver onder die 120px-drempel, dus tegen de tijd dat het zijpaneel
     begint te plakken is de header altijd al geminimaliseerd. Met de volle
     136px hing "Uw premie" bij omhoogscrollen 90px onder de header in de lucht.
     Opbouw van die 62px (main.css, §SITE HEADER, blok "Minimized state"):
     .site-header--minimized .site-header__top krijgt max-height 0 en padding 0,
     dus van de toplinkbalk blijft alleen haar 1px onderrand over;
     .site-header--minimized .site-header__bar heeft padding 0 20px, dus die
     balk is precies zo hoog als zijn navigatielinks: 23px padding boven + 14px
     regelhoogte + 23px padding onder = 60px; plus de 1px onderrand van
     .site-header zelf. 1 + 60 + 1 = 62. Plus 16px lucht = 78px. */
  --jpt-sticky-top: 78px;
}
.insurance-tool.joho-premietool {
  border: none;
  background: none;
  padding: 0;
  min-height: 0;
  display: block;
}
.insurance-tool__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
}
.insurance-tool__title {
  font-family: "Zilla Slab", serif;
  font-size: 26px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-tool__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
  max-width: 62ch;
}
.insurance-tool__specs {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.65);
  border-top: 1px dashed rgba(var(--color-blue-dark), 0.24);
  padding-top: 12px;
}
/* Verwijsblok naar de vergelijkingstool. Eén grijs vlak zonder rand, met een
   gevulde ronde medaillon links: het is het enige echte actieblok op de
   Premie-tab en het wordt gedragen door de oranje knop erin, niet door een
   eigen kleurvlak. Zelfde opbouw als het lichte blok bij OOM: rond icoon,
   serif-kop, één alinea, gevulde knop. */
.insurance-referral {
  position: relative;
  background: rgba(var(--color-grey-soft), 1);
  border: none;
  border-radius: 12px;
  padding: 26px 22px;
}
.insurance-referral__medallion {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-white), 1);
}
.insurance-referral__text {
  margin: 8px 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.88);
  max-width: 62ch;
}

/* ---------- 11. PREMIEFACTOREN EN KORTINGEN ---------- */
/* Premiefactoren en kortingen deelden één opmaak: negen blokken met boven
   elke kop dezelfde dikke blauwe streep. Negen keer hetzelfde accent leest
   als negen keer hetzelfde blok — de Premie-tab werd er eentonig van, en
   het verschil tussen "wat maakt de premie hoger" en "wat maakt hem lager"
   verdween. Ze zijn nu uit elkaar getrokken:
     · factoren  — genummerd, dunne grijze scheidingslijn, rustig raster;
     · kortingen — grijze kaart met het percentage als kop, want dat is het
                   enige getal op deze tab dat de bezoeker meeneemt.
   De blauwe streep is daarmee weg uit beide. */
.insurance-factors {
  display: grid;
  gap: 26px 40px;
  counter-reset: premiefactor;
}
.insurance-factor {
  padding-top: 14px;
  border-top: 1px solid rgba(var(--color-grey-medium), 1);
  scroll-margin-top: var(--header-height-minimized, 130px);
}
/* Het volgnummer is decoratie, geen rangorde: het geeft het raster ritme
   zonder dat er een tweede regel tekst bij komt. Gedempt donkerblauw en niet
   blauw-primair — dat is de kleur van links en van wat je aan kunt klikken. */
.insurance-factor__title::before {
  counter-increment: premiefactor;
  content: counter(premiefactor, decimal-leading-zero);
  display: block;
  font-family: "Zilla Slab", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  color: rgba(var(--color-blue-dark), 0.45);
  margin-bottom: 9px;
}
.insurance-factor__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 6px;
}
.insurance-factor__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
}
/* Kortingen. Het percentage stond midden in de lopende tekst; hier staat
   het bovenaan als getal. Dat vraagt wél een nieuw contentveld per korting
   (`accent`, bijvoorbeeld "20%" met bijschrift "of 10% in dure regio's").
   Staat dat veld leeg, dan valt alleen het getal weg en blijft de kaart
   staan — zie de derde korting, die geen percentage heeft. */
.insurance-discounts {
  display: grid;
  gap: 18px;
}
.insurance-discount {
  background: rgba(var(--color-grey-soft), 1);
  border-radius: 12px;
  padding: 22px 24px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-discount__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 9px;
  font-family: "Zilla Slab", serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  color: rgba(var(--color-green), 1);
  margin-bottom: 10px;
}
.insurance-discount__figure--woord {
  font-size: 23px;
}
.insurance-discount__note {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(var(--color-blue-dark), 0.7);
}
.insurance-discount__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 6px;
}
.insurance-discount__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
}

/* ---------- 12. AANVRAAGSTAPPEN, BENODIGDHEDEN, ACTIE ---------- */
.insurance-steps {
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
}
.insurance-steps li {
  counter-increment: stap;
  position: relative;
  padding-left: 52px;
}
.insurance-steps li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-white), 1);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insurance-steps__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  padding-top: 4px;
}
.insurance-steps__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
  margin-top: 2px;
}
/* Zelfde vlak als .insurance-referral en .insurance-contact: alle actie- en
   contactblokken op de pagina delen één grijze ondergrond zonder rand. Ze
   waren licht blauw getint; op de witte pagina gaven die tinten er een
   tweede kleurtemperatuur zonder er iets mee te zeggen. */
.insurance-action {
  background: rgba(var(--color-grey-soft), 1);
  border: none;
  border-radius: 12px;
  padding: 24px 22px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-action__meta {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(var(--color-blue-dark), 0.7);
}
.insurance-needs {
  scroll-margin-top: var(--header-height-minimized, 130px);
}

/* ---------- 13. WAAROM VIA JOHO (uitgebreid) ----------
   Geen kaart: dit blok staat vlak op de pagina, met een haarlijn erboven en
   per punt een rond blauw schijfje met het vinkje erin. De sluitband eronder
   noemt dezelfde punten nog eens; twee vlakken op rij zou dat verdubbelen. */
.insurance-why {
  border-top: 1px solid rgba(var(--color-blue-dark), 0.14);
  padding-top: 26px;
}
.insurance-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.insurance-why__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.insurance-why__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.1);
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-why__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-why__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(var(--color-blue-dark), 0.85);
}

/* ---------- 14. SERVICE: ALARMCENTRALE, CONTACT, DOCUMENTEN ---------- */
.insurance-contact {
  background: rgba(var(--color-grey-soft), 1);
  border: none;
  border-radius: 12px;
  padding: 24px 22px;
  scroll-margin-top: var(--header-height-minimized, 130px);
}
.insurance-contact__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--color-blue-dark), 0.12);
  font-size: 15px;
}
.insurance-contact__row:last-child {
  border-bottom: none;
}
.insurance-contact__label {
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  flex: 0 0 130px;
}
.insurance-contact__value {
  flex: 1 1 200px;
  color: rgba(var(--color-blue-dark), 0.85);
}
.insurance-docs__search {
  max-width: 420px;
}
.insurance-docs__group {
  margin-top: 22px;
}
.insurance-docs__group-title {
  font-size: 17px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 8px;
}
/* .pagelinks-container / .pagelink-item bestaan live bij Grip;
   hier minimaal nagebouwd zodat de naam blijft kloppen. */
.pagelinks-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagelink-item {
  border-bottom: 1px solid rgba(var(--color-grey-medium), 0.7);
}
.pagelink-item a {
  display: block;
  position: relative;
  padding: 11px 0 11px 34px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(var(--color-blue-primary), 1);
  text-decoration: none;
}
.pagelink-item a:hover {
  text-decoration: underline;
}
.pagelink-item--download a::before,
.pagelink-item--external a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.12);
}
.pagelink-item--download a::after,
.pagelink-item--external a::after {
  position: absolute;
  left: 6px;
  top: 11px;
  font-size: 13px;
  line-height: 22px;
  color: rgba(var(--color-blue-primary), 1);
}
.pagelink-item--download a::after {
  content: "\2193";
  left: 7px;
}
.pagelink-item--external a::after {
  content: "\2197";
}
.pagelink-item__meta {
  color: rgba(var(--color-blue-dark), 0.6);
  font-size: 13px;
}

/* ---------- 15. CONVERSIEANKER ----------
   Het anker plakt niet meer mee: het staat als band onder de tabinhoud
   en is daardoor op elke tab het sluitstuk. De permanente prikkel is de
   zwevende keuzeknop hieronder (§15b), die tegelijk open punt O5 sluit:
   één knop rechtsonder in plaats van een agentbubbel náást de
   WhatsApp-knop. */
.insurance-anchor {
  display: grid;
  gap: 22px 40px;
  align-items: start;
}
.insurance-anchor__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
}
.insurance-anchor__title {
  font-family: "Zilla Slab", serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
  margin: 6px 0 16px;
}
.insurance-anchor__price {
  font-family: "Zilla Slab", serif;
  font-size: 28px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 12px;
}
.insurance-anchor__primary {
  display: inline-block;
  text-align: center;
  padding: 13px 28px;
}
.insurance-anchor__secondary {
  display: inline-block;
  margin-left: 18px;
}
/* Het anker op de donkere sluitband. */
.insurance-band--anker .insurance-anchor__kicker {
  color: rgba(var(--color-white), 0.66);
}
.insurance-band--anker .insurance-anchor__title,
.insurance-band--anker .insurance-anchor__price {
  color: rgba(var(--color-white), 1);
}
.insurance-band--anker .btn-text-arrow {
  color: rgba(var(--color-white), 1);
}

/* ---------- 15b. ZWEVENDE KEUZEKNOP ----------
   Eén knop rechtsonder met alle contactroutes eronder. Op de echte site
   staat daar nu de WhatsApp-knop; die gaat hierin op, zodat er nooit
   twee zwevende knoppen naast elkaar staan (open punt O5). Staat de
   agent voor deze verzekering uit, dan valt alleen die ene regel weg. */
.insurance-page > .insurance-fab {
  width: max-content;
  max-width: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.insurance-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.insurance-fab__menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  width: min(310px, calc(100vw - 40px));
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-grey-medium), 1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(var(--color-blue-dark), 0.18);
}
.insurance-fab__menu[hidden] {
  display: none;
}
.insurance-fab__option {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  gap: 0 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  color: rgba(var(--color-blue-dark), 1);
  cursor: pointer;
}
.insurance-fab__option:hover {
  background: rgba(var(--color-grey-soft), 1);
}
/* De toelichting hoort ónder het label, niet ernaast: als flexregel-item
   kwam hij naast de tekst te staan en wrong hij het label in twee regels. */
.insurance-fab__option small {
  flex: 1 0 100%;
  padding-left: 46px;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(var(--color-blue-dark), 0.65);
}
.insurance-fab__icon {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--color-blue-primary), 0.1);
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-fab__icon--whatsapp {
  background: rgba(var(--color-green-chat), 0.16);
  color: rgb(18, 140, 70);
}
/* Groter en duidelijker dan eerst: dit is op elke tab de enige permanente
   prikkel én de enige ingang naar de agent, dus mag hij zwaarder wegen.
   Sinds deze ronde draagt hij twee regels — wat het is (de actie) en wat
   het kost (niets) — met het icoon in een eigen ronde plaat, zodat de knop
   niet als een generieke chatbubbel leest.
   Hij draagt dezelfde kleur als de primaire knoppen in de pagina — blauw met
   witte tekst — want dit ís een primaire actie. De slagschaduw blijft: dit is
   het enige element dat echt boven de pagina zweeft. */
.insurance-fab__toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 14px 16px;
  border: none;
  border-radius: 999px;
  background: rgba(var(--color-blue-primary), 1);
  color: rgba(var(--color-white), 1);
  font-family: Poppins, sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(var(--color-blue-dark), 0.38);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.insurance-fab__toggle:hover {
  filter: brightness(0.93);
  transform: translateY(-1px);
}
/* Lichte plaat op het blauw: het icoon staat in een eigen schijfje zodat het
   niet als losse glyph in de knop hangt. Wit met een lage dekking, zodat het
   verschil met de knop zelf zacht blijft. */
.insurance-fab__toggle-icon {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--color-white), 0.18);
}
.insurance-fab__toggle-label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
.insurance-fab__toggle-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(var(--color-white), 0.85);
}
/* Compacte stand. Op mobiel rendert de premietool (tab Premie) onderin een
   sticky totaalbalk met het bedrag en "Aanvragen via JoHo"; de brede knop
   stond daar overheen. Zodra die balk in beeld is zet JavaScript deze
   klasse en krimpt de knop tot alleen het ronde icoon — zelfde blauw,
   zelfde schaduw. De tekst wordt alleen visueel verborgen (sr-only), zodat
   de knop zijn toegankelijke naam "Hulp of aanvragen" houdt. Is het menu
   open, dan zet JavaScript de klasse niet: de opties moeten leesbaar zijn. */
.insurance-fab--compact .insurance-fab__toggle {
  width: 56px;
  height: 56px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.insurance-fab--compact .insurance-fab__toggle-icon {
  flex-basis: auto;
  height: auto;
  background: transparent;
}
.insurance-fab--compact .insurance-fab__toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Aanspreekbubbel boven de knop. Eén keer zichtbaar bij het openen van de
   pagina, sluitbaar, en weg zodra het menu of de assistent opengaat: hij
   moet vertellen dát er hulp is, niet in de weg blijven zitten. Wordt door
   JavaScript getoond, net als de rest van deze stapel. */
.insurance-fab__hint {
  position: relative;
  width: min(300px, calc(100vw - 40px));
  padding: 14px 34px 14px 16px;
  background: rgba(var(--color-white), 1);
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 12px 30px rgba(var(--color-blue-dark), 0.2);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(var(--color-blue-dark), 0.85);
}
.insurance-fab__hint strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: rgba(var(--color-blue-dark), 1);
  margin-bottom: 2px;
}
.insurance-fab__hint-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: rgba(var(--color-blue-dark), 0.55);
  cursor: pointer;
}
.insurance-fab__hint-close:hover {
  background: rgba(var(--color-grey-soft), 1);
}
/* De naar-boven-knop schuift boven de keuzeknop: één stapel rechtsonder,
   geen twee losse knoppen naast elkaar. */
.go-to-top {
  bottom: 100px;
}

/* ---------- 16. MARKERING VAN HET GEVONDEN ANTWOORD ---------- */
.insurance-page .insurance-hit {
  position: relative;
  background: rgba(var(--color-blue-primary), 0.09);
  box-shadow: inset 4px 0 0 rgba(var(--color-blue-primary), 1);
  border-radius: 10px;
  padding: 10px 14px 10px 16px;
}
/* Het gevonden onderdeel draagt ook een woord, niet alleen een kleur. */
.insurance-page .insurance-hit::before {
  content: "Antwoord op uw vraag";
  position: static;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-medium), 1);
  margin-bottom: 4px;
}
/* Is de gevonden regel een dekkingsregel, dan neemt het label de plek van
   het merkteken in (`::before`); dan moet het vinkje of het streepje uit
   `::after` er ook niet meer overheen liggen. */
.insurance-page li.insurance-hit::after {
  content: none;
}
.insurance-page li.insurance-hit {
  padding-left: 16px;
}

/* ---------- 17. DESKTOP (min-width: 1024px) ----------
   PROTOTYPE-ONLY: de voorvoegsels staan er
   alleen zodat de mobiel-knop boven de pagina ook op een breed scherm
   de smalle weergave laat zien. Grip laat die voorvoegsels weg. */
@media (min-width: 1024px) {
  .insurance-band {
    padding-block: 52px;
  }
  /* De sluitband raakt de footer: onderin iets meer lucht dan bovenin. */
  .insurance-band--anker {
    padding-block: 52px 64px;
  }
  /* Zelfde reden als bij de basisregel: de hero sluit hier direct op de
     tabbalk aan. Deze regel moet mee in de mediaquery, want de selector
     (.insurance-hero.insurance-band) weegt zwaarder dan .insurance-band. */
  .insurance-hero.insurance-band {
    padding-block: 52px 68px;
  }
  .insurance-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 48px;
    align-items: center;
  }
  /* In het raster zorgt de kolomafstand voor de ruimte; de marge is er
     alleen voor de gestapelde weergave. */
  .insurance-hero__media {
    margin-top: 0;
  }
  .insurance-hero__title {
    font-size: 52px;
  }
  /* De kerngegevens lopen als één rij onder de hero door, over beide
     kolommen. Het zijn er altijd precies vijf (KERNGEGEVEN_LABELS in het
     schema), dus vijf gelijke kolommen — auto-fit maakte er kolommen van die
     met de tekstlengte meebewogen, waardoor de rij scheef las. De ruimte
     tussen de vakken komt van een kolomgap, niet van padding met een
     haarlijn ertussen: die scheidingslijntjes maakten de rij onrustig. Zonder
     padding-links begint het eerste vak precies op de lijn van de hero-tekst
     en blijven de vijf vakken exact even breed. */
  .insurance-hero__facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 24px;
    margin-top: 34px;
  }
  /* Anker: tekst en knoppen links, de vijf redenen rechts in twee
     kolommen. Zo vult de band de breedte in plaats van een smalle
     kaart te blijven. */
  /* Sinds de puntenlijst "waarom via JoHo" uit het anker is (2026-09-07)
     heeft de band één kolom: tekst en acties, niets ernaast. */
  .insurance-anchor {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
  .insurance-block__title {
    font-size: 36px;
  }
  /* De tabs hebben hier geen eigen maat meer nodig: de basisregels staan al op
     16px met 22px zijpadding, en de balk scrolt daaronder gewoon horizontaal. */
  /* Vanaf hier vullen de vier tabs nog geen halve balk; het merkteken kan er
     rechts naast staan zonder de balk te laten scrollen. */
  .insurance-tabbar__brand {
    display: flex;
  }

  /* --- De schermbreedte gebruiken, tweede poging -------------------------
     De vorige ronde zette de bloktitel in een eigen kolom van 280 px en
     de inhoud in 840 px ernaast. Dat vulde de breedte wel, maar het gaf
     elke sectie een halflege linkerkolom en drukte de inhoud in een
     smallere strook dan daarvoor — per saldo minder mooi.
     Deze ronde doet het zoals oomverzekeringen.nl: de kop staat gewoon
     boven zijn sectie over de volle breedte, en het is de ínhoud die in
     kolommen valt. Elke rij hieronder is één blok dat op mobiel weer
     onder elkaar valt, want al deze regels staan in deze media query.
     Verder ligt het ritme in de ruimte tussen de secties en in een
     haarlijn ertussen, in plaats van in kaders om de blokken heen. */
  .insurance-panel > * + * {
    margin-top: 72px;
    padding-top: 72px;
    border-top: 1px solid rgba(var(--color-blue-dark), 0.1);
  }
  .insurance-block__lead {
    font-size: 18px;
  }
  /* Opsommingen buiten een dekking (benodigdheden, wat u krijgt) staan op
     desktop in twee kolommen: vijf korte regels vragen geen volle 1180 px.
     Binnen een dekking gebeurt dat bewust niet meer — daar staan de regels
     al in de smallere linkerkolom en moeten ze recht onder elkaar lopen. */
  .insurance-list:not(.insurance-list--gedekt):not(.insurance-list--niet-gedekt) {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 48px;
  }
  .insurance-list--gedekt,
  .insurance-list--niet-gedekt {
    max-width: 62ch;
  }
  /* Aanvraagstappen naast elkaar in twee kolommen. */
  .insurance-steps {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 48px;
  }
  /* Documentgroepen in twee kolommen, zoals OOM zijn polisvoorwaarden en
     overige informatie naast elkaar zet. Kolommen (`columns`) in plaats
     van een grid, omdat de groepen sterk in lengte verschillen: zo vult
     de browser de twee kolommen zelf uit en blijft een groep heel
     (`break-inside: avoid`). Bij één groep verandert er niets. */
  .insurance-docs__groups {
    columns: 2;
    column-gap: 48px;
  }
  .insurance-docs__group {
    break-inside: avoid;
  }
  .insurance-coverage__toggle {
    padding: 20px 26px;
  }
  /* Twee kolommen in de open dekking: de tekst links, de harde gegevens
     rechts. `align-items: start` houdt het rechterblok bij de bovenkant
     in plaats van het uit te rekken tot de hoogte van de linkerkolom. */
  .insurance-coverage__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 0 40px;
    align-items: start;
    padding: 24px 26px 26px;
  }
  .insurance-coverage__main {
    grid-column: 1;
  }
  .insurance-coverage__aside {
    grid-column: 2;
    margin-top: 0;
  }
  .insurance-coverage__footer {
    grid-column: 1 / -1;
  }
  .insurance-levels__picker {
    display: none;
  }
  /* Zelfde specificiteit als de mobiele verbergregel (`:not(.is-actief)`);
     een media query telt niet mee in de cascade, dus zonder de `:not()`
     hier verloor deze regel en bleef er ook op desktop één kolom over. */
  .insurance-levels--gekozen .insurance-levels__cell:not(.is-actief) {
    display: table-cell;
  }
  .insurance-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* In de smalle rechterkolom past geen tweede kolom bedragen. */
  .insurance-coverage__aside .insurance-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Drie kolommen in plaats van twee: zes premiefactoren staan zo in twee
     rijen van drie in plaats van drie rijen van twee, en dat is precies
     het verschil tussen "de breedte gebruiken" en "de breedte vullen". */
  .insurance-factors,
  .insurance-discounts,
  .insurance-why__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .insurance-why__list {
    gap: 26px 40px;
  }
  .insurance-notices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .insurance-tool,
  .insurance-referral,
  .insurance-action,
  .insurance-contact {
    padding: 30px;
  }
  .insurance-tool {
    min-height: 560px;
  }
  /* Het verwijsblok als brede band: medaillon links, kop en uitleg in het
     midden, de knop rechts. Gestapeld (zoals op mobiel) zou het over de
     volle kolom een vlak met veel lucht zijn. Er is geen extra markup
     voor nodig; de vier bestaande elementen worden hier geplaatst. */
  .insurance-referral {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: center;
  }
  .insurance-referral__medallion {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .insurance-referral .insurance-tool__title {
    grid-column: 2;
    grid-row: 1;
  }
  .insurance-referral__text {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 0 0;
    max-width: 78ch;
  }
  .insurance-referral > a {
    grid-column: 3;
    grid-row: 1 / span 2;
    white-space: nowrap;
  }
}

@media (min-width: 1220px) {
  .insurance-hero__inner {
    gap: 64px;
  }
  /* Aandachtspunten in drie kolommen zodra er ruimte voor is; vanaf
     1024 px staan ze al naast elkaar in twee. */
  .insurance-notices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 17b. SMALLE SCHERMEN (max-width: 720px) ----------
   De enige plek in dit bestand waar naar bóven wordt afgebakend: op een
   telefoon staat er anders meer lucht dan tekst op het scherm — zowel boven en
   onder de tabinhoud als tussen de secties onderling. */
@media (max-width: 720px) {
  .insurance-panel {
    padding-block: 24px;
  }
  .insurance-panel > * + * {
    margin-top: 48px;
  }
  /* Zelfde selectors als de regels die de paneelpadding overstemmen: met alleen
     .insurance-block--band zouden die zwaardere selectors hier winnen. De marge
     boven de band volgt hetzelfde ritme als de blokken (48px in plaats van 72). */
  .insurance-panel > section.insurance-block--band {
    padding-block: 40px;
  }
  .insurance-panel > * + section.insurance-block--band {
    margin-top: 48px;
  }
}

/* ---------- 18. BEWEGING BEPERKEN ---------- */
@media (prefers-reduced-motion: reduce) {
  .insurance-page * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   19. OVERZICHTSPAGINA /verzekeringen (alleen overzicht.html)
   Kaart per verzekering; hergebruikt hero, crumbs en tokens
   van de verzekeringspagina hierboven.
   ========================================================= */
/* Zonder de puntenstrook staat de kop direct onder de hero; de bovenmarge
   geeft dezelfde lucht die de strook eerst innam. */
.insurance-overview__heading {
  margin: 40px 0 0;
  font-family: "Zilla Slab", serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-overview__group {
  margin-top: 36px;
}
.insurance-overview__group:last-of-type {
  margin-bottom: 48px;
}
.insurance-overview__group-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--color-grey-medium), 1);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-overview__grid {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
/* De kaart is wit op een witte pagina; wat hem afbakent is de haarlijn. Die is
   donkerblauw met een lage dekking in plaats van een grijstint, zodat hij bij
   dezelfde lichtheid koeler oogt dan de zachtgrijze vlakken in de inhoud. */
.insurance-overview__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(var(--color-white), 1);
  border: 1px solid rgba(var(--color-blue-dark), 0.1);
  border-radius: 12px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
/* De kaart licht op met zijn rand in plaats van met een slagschaduw: schaduwen
   staan op deze pagina's alleen nog onder wat écht zweeft. De rand wordt dan
   vol blauw-primair — de enige accentkleur van de site. */
.insurance-overview__link:hover,
.insurance-overview__link:focus-visible {
  border-color: rgba(var(--color-blue-primary), 1);
  transform: translateY(-2px);
}
.insurance-overview__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 18px 24px;
  background: rgba(var(--color-white), 1);
  border-bottom: 1px solid rgba(var(--color-blue-dark), 0.1);
}
.insurance-overview__logo img {
  max-width: 200px;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.insurance-overview__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px 22px;
  flex: 1;
}
.insurance-overview__type {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--color-blue-dark), 0.6);
}
.insurance-overview__name {
  font-family: "Zilla Slab", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(var(--color-blue-dark), 1);
}
.insurance-overview__intro {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(var(--color-blue-dark), 0.78);
}
.insurance-overview__price {
  margin-top: 4px;
  font-weight: 600;
  color: rgba(var(--color-blue-primary), 1);
}
.insurance-overview__more {
  margin-top: auto;
  padding-top: 12px;
}