@charset "UTF-8";
/* Stijl van de resultaatkaart, met de tokens uit design/README.md en de opmaak uit het Claude
   Design-ontwerp (Verzekermaatje Site.dc.html, 16-09-2026). Alleen wat de testpagina en de kaart
   nodig hebben; de rest van de site komt later. */

:root {
  --ink: #0D0C22;
  --ink-hover: #24223B;
  --tekst-secundair: #3D3D4E;
  --tekst-tertiair: #6E6D7A;
  --tekst-grijs: #8B8892;
  --stip-grijs: #8E8C97;
  --rand: #E7E7E9;
  --rand-licht: #EDEDF0;
  --zacht: #F8F7F8;
  --vlak: #F3F3F4;
  --roze: #EA4C89;
  --roze-hover: #D33A75;
  --roze-zacht: #FCE9F1;
  --roze-rand: #F6DAE6;
  --roze-donker: #C4366D;   /* linkkleur: tussen het knoproze en het oude bordeaux (#A6265A) in; besluit eigenaar 21-09-2026 */
  --goedkoper: #1C7A4F;
  --goedkoper-bg: #E8F6EE;
  --goedkoper-rand: #CBE9D8;
  --duurder: #B42318;
  --duurder-bg: #FDECEA;
  --duurder-rand: #F5CFCA;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
a, input, select, button, textarea { font-family: inherit; }
/* Links worden nergens onderstreept (eigenaar 21-09-2026); kleur en gewicht maken ze herkenbaar. Uitzondering: op de
   resultaatkaart de verwijzingen naar vergoedingen ("zelf nakijken") en de zorgzoeker, die blijven onderstreept. */
a { text-decoration: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 28px) 64px; }
h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.intro { color: var(--tekst-secundair); max-width: 62ch; margin: 0 0 24px; }

/* ---- zoekbalk (alleen voor de testpagina) ---- */
.zoekbalk {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end;
  background: var(--zacht); border: 1px solid var(--rand); border-radius: 18px; padding: 18px 20px;
}
.zoekbalk label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tekst-tertiair); }
.zoekbalk label.vink { flex-direction: row; align-items: center; gap: 8px; }
.zoekbalk input[type=number], .zoekbalk select {
  border: 1px solid var(--rand); border-radius: 999px; padding: 8px 14px; font-size: 14.5px; color: var(--ink);
  background: #fff; min-width: 110px;
}
.zoekbalk select { padding-right: 22px; }
.zoekbalk button {
  background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 11px 22px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.zoekbalk button:hover { background: var(--ink-hover); }
.uitgangspunten { color: var(--tekst-tertiair); font-size: 14px; margin: 22px 0 18px; }

/* ---- lijstkop: "Dit past bij jouw wensen" met de maand/jaar-schakelaar ---- */
.lijstkop {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1120px; margin: 8px 0 20px;
}
/* De lijn tussen de kop en de schakelaar, zoals in het ontwerp. */
.lijstkop .lijn { flex: 1 1 80px; border-top: 1px solid var(--rand); }
.lijstkop h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.lijstkop p { margin: 2px 0 0; color: var(--tekst-secundair); font-size: 14.5px; }
.periode { display: inline-flex; background: var(--vlak); border-radius: 999px; padding: 3px; }
.periode a {
  text-decoration: none; color: var(--tekst-secundair); font-size: 14px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px;
}
.periode a.actief { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13, 12, 34, .08); }

/* ---- resultaatkaart ---- */
/* Volgnummer: een zwart blokje "1e" voor de merknaam (eigenaar 23-09-2026). */
.nummer {
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;
  border-radius: 8px; padding: 3px 9px; line-height: 1.4;
}
.polis {
  display: flex; max-width: 1120px; border: 1px solid var(--rand); border-radius: 18px;
  overflow: hidden; margin-bottom: 18px; background: #fff;
}
.dekkingblok { width: 712px; flex: 0 0 712px; padding: 22px 24px 22px 24px; }
.kop { display: flex; align-items: center; gap: 28px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rand); }
.logo { width: 120px; height: 75px; object-fit: contain; flex: none; }
.logotekst {
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  color: var(--tekst-secundair); background: var(--vlak); border-radius: 12px; text-align: center; padding: 6px;
}
.kopregels { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.naamregel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.merk { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.polisnaam { color: var(--tekst-grijs); font-size: 17px; font-weight: 500; }
.badge {
  background: var(--roze); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 999px; padding: 3px 9px; line-height: 1.4;
}
/* Kopregel: label grijs, waarde vet, zodat je de polis in een blik leest. */
/* Eén regel, altijd naast het logo. Wordt hij toch te lang, dan eindigt hij in een beletselteken
   in plaats van uit de kaart te lopen. */
.meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; color: var(--tekst-secundair); }
.meta .metapaar { display: inline; margin-right: 14px; }
.meta .metapaar:last-child { margin-right: 0; }
.meta .metalabel { color: var(--tekst-tertiair); }
.meta b { color: var(--ink); font-weight: 700; }

/* De links op de kaart naar de zorgverzekeringskaart ("Alle dekkingen basisverzekering", "Alle aanvullende
   dekkingen", "Alle tanddekkingen") en de zorgzoeker: bescheiden, altijd onderstreept, niet dik, in de tekstkleur.
   Rood of roze zou ze als knop laten lezen en dat zijn ze niet; het is de bron (eigenaar 21-09-2026). */
.voorwaarden {
  display: inline-block; font-size: 14px; color: var(--tekst-secundair); font-weight: 400;
  text-decoration: underline; text-underline-offset: 2px; margin-top: 10px;
}
.voorwaarden:hover { color: var(--roze-donker); }
.voorwaarden.zorgzoeker { display: inline-block; }
/* De twee bronlinks van de basisverzekering naast elkaar; op een smal scherm vallen ze onder elkaar (10-10-2026). */
.basislinks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 10px; }
.basislinks .voorwaarden { margin-top: 0; }
.basislinks .scheider { color: var(--tekst-grijs); font-size: 14px; }
.kopregels .voorwaarden { margin-top: 2px; align-self: flex-start; }

.modules { display: flex; align-items: flex-start; }
/* Allebei de modules even breed, ongeacht wat erin staat: twee kaarten onder elkaar horen dezelfde
   indeling te hebben. */
.module { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.plus { color: #C6C4CC; font-size: 30px; font-weight: 300; margin: 0 40px; align-self: center; line-height: 1; }
/* Een product dat aanvullend en tand allebei bevat, krijgt geen twee kolommen maar de volle breedte. */
.modules.een .module { flex: 1 1 100%; }

/* Modulekop: stipje, korte titel en pakketnaam op één regel. Een lange naam wordt afgekapt met een
   beletselteken in plaats van te wikkelen, zodat de dekkingsregels van beide modules op dezelfde
   hoogte beginnen; de volledige naam staat in de premieopbouw rechts. */
.modulekop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 30px; }
.moduletitel { font-size: 16.5px; font-weight: 700; line-height: 1.3; flex: none; }
.modulenaam { color: var(--tekst-grijs); font-weight: 500; font-size: 15.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.stip.grijs { background: var(--stip-grijs); }
.stip.roze { background: var(--roze); }
.stip.ink { background: var(--ink); }

.dekkingen { list-style: none; margin: 0; padding: 0; }
.dekkingen li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: baseline; padding: 4px 0;
  font-size: 14.5px; color: var(--ink);
}
/* De waarde mag afbreken als hij lang is; rechts uitgelijnd zodat de getallen onder elkaar staan. */
.dekkingen li b { color: var(--ink); font-weight: 600; text-align: right; }
/* De bijzonderheid onder een dekking (eigen bijdrage, wachttijd, dagmaximum): een regel over de volle breedte (16-10-2026). */
.dekkingen li small.bijzonder { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.35; color: var(--tekst-tertiair); margin-top: -2px; }
.dekkingen li.gevraagd small.bijzonder { color: var(--roze-donker); }
/* Waar de bezoeker naar vroeg: een roze regel, zodat het antwoord op zijn vraag direct te vinden
   is, ook als dat antwoord "Niet gedekt" is. */
.dekkingen li.gevraagd {
  background: var(--roze-zacht); color: var(--roze-donker); font-weight: 600;
  border-radius: 8px; padding: 6px 10px; margin: 2px -10px;
}
.dekkingen li.gevraagd b { color: var(--roze-donker); font-weight: 700; }
.dekkingen li.gevraagd b.niet_vergoed, .dekkingen li.gevraagd b.onbekend { color: var(--roze-donker); font-weight: 500; }
.dekkingen li.gevraagd span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--roze); margin-right: 8px; vertical-align: 1px;
}
/* "deels gedekt" is geen getal en hoort er ook niet als getal uit te zien. */
.dekkingen li b.deels { color: var(--tekst-grijs); font-weight: 600; }
/* Drie toestanden per dekkingsregel. Leeg is niet hetzelfde als nul: "Niet vermeld" betekent dat wij
   het niet weten, "Niet gedekt" dat het er echt niet in zit. Allebei niet vet: een bezoeker
   vergelijkt op wat er WEL in zit. "Niet vermeld" een tint lichter, want dat is geen uitspraak. */
.dekkingen b.niet_vergoed { color: var(--tekst-tertiair); font-weight: 400; font-style: italic; }
.dekkingen b.onbekend     { color: #9A99A5; font-weight: 400; font-style: italic; }
/* De tussenkop die binnen een combinatieproduct het tanddeel aankondigt. */
.dekkingen li.subkop {
  display: block; border-bottom: 0; padding: 12px 0 2px; font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-grijs);
}
/* De zin onder het koppercentage ("Geldt voor alle behandelingen, behalve:"). Een toelichting,
   geen dekking op zichzelf; geen randlijn eronder. */
.dekkingen li.samenvatting {
  display: block; border-bottom: 0; padding: 4px 0 2px; font-size: 14px; color: var(--tekst-tertiair);
}

/* De zin "Niet gedekt: ... en 4 andere" klapt open naar de losse regels. */
.dekkingen li.samenvatting.uitklap { padding: 2px 0; }
.dekkingen li.samenvatting.uitklap summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; padding: 2px 0;
}
.dekkingen li.samenvatting.uitklap summary::-webkit-details-marker { display: none; }
.dekkingen li.samenvatting.uitklap summary::after {
  content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin: 0 0 3px 2px; transition: transform .15s;
}
.dekkingen li.samenvatting.uitklap details[open] summary::after { transform: rotate(-135deg); margin-bottom: -1px; }
.dekkingen li.samenvatting.uitklap summary:hover { color: var(--roze-donker); }
.ul-link { display: inline-block; margin: -2px 0 10px; font-size: 14px; color: var(--roze-donker); font-weight: 600; }
.ul-link::after { content: " ↗"; }
.dekkingen li.samenvatting.uitklap.gevraagd > details > summary { color: var(--roze-donker); font-weight: 600; }
.dekkingen li.samenvatting.uitklap .dekkingen { padding-left: 12px; border-left: 2px solid var(--rand); margin: 4px 0 6px; }
/* Een uitklap met een gevraagde behandeling erin is zelf geen roze regel (16-10-2026): de roze vlakken horen bij de
   regels binnenin. Anders schoof de zin "Per behandeling: 7 wijken af" tien pixels naar links (negatieve marge, geen
   binnenruimte) en staken de roze regels binnenin rechts buiten de kaart. */
.dekkingen li.samenvatting.uitklap.gevraagd { background: none; margin: 0; padding: 2px 0; border-radius: 0; font-weight: 400; color: var(--tekst-tertiair); }
.dekkingen li.samenvatting.uitklap .dekkingen li.gevraagd { margin: 2px 0; }

/* "Meer dekkingen": een gewone details/summary, dus zonder JavaScript. Ingeklapt staat er alleen de
   regel met het aantal; opengeklapt volgt dezelfde lijst als erboven. */
.meer { margin-top: 2px; }
.meer summary {
  cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--tekst-secundair);
  padding: 8px 0 2px; display: flex; align-items: center; gap: 6px;
}
.meer summary::-webkit-details-marker { display: none; }
.meer summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin: -3px 2px 0; transition: transform .15s;
}
.meer[open] summary::before { transform: rotate(-135deg); margin-top: 3px; }
.meer summary:hover { color: var(--roze-donker); }
.meer .dekkingen { padding-top: 4px; }

.toevoegen {
  border: 1px dashed #D3D2D8; background: #fff; color: var(--tekst-tertiair); border-radius: 999px;
  padding: 9px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
}
.toevoegen .plusje { color: var(--roze); font-weight: 800; font-size: 15px; }
.toevoegen:hover { border-color: var(--roze); color: var(--roze-donker); }
.voorwaarde { margin: 14px 0 0; font-size: 14px; color: var(--tekst-tertiair); }

/* ---- premieblok ---- */
.premieblok {
  flex: 1; background: #FDF3F8; border-left: 1px solid var(--roze-rand);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.prijsregel { display: flex; align-items: baseline; gap: 8px; }
.prijs { display: inline-flex; align-items: baseline; letter-spacing: -0.035em; line-height: 1; }
.prijs .euro { font-size: 24px; font-weight: 700; margin-right: 3px; }
.prijs .heel { font-size: clamp(38px, 4.2vw, 46px); font-weight: 800; }
.prijs .cent { font-size: 22px; font-weight: 700; align-self: flex-start; margin-top: 4px; }
.per { font-size: 16px; font-weight: 700; color: var(--ink); }
.jaarregel { font-size: 14px; color: var(--tekst-secundair); margin: -2px 0 0; line-height: 1.45; text-wrap: pretty; }

/* Verrekende korting (DATAMODEL-BRUG 14): onder het grote bedrag een roze notitie die uitlegt
   waarom de prijs lager is dan de brutosom. */
.kortingsnotitie {
  display: flex; align-items: center; gap: 7px;
  margin: -4px 0 0; font-size: 14.5px; font-weight: 600; color: var(--roze-donker);
}
.pctblok {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 4px; background: var(--tekst-grijs);
  color: #fff; font-size: 8.5px; font-weight: 800; font-style: normal;
}
.pctblok.roze { width: 14px; height: 14px; border-radius: 5px; background: var(--roze); font-size: 9px; }

/* Verschilchip: alleen als de huidige polis bekend is. Kleur is nooit de enige drager. */
.verschil {
  display: inline-flex; align-items: baseline; gap: 6px; align-self: flex-start;
  border: 1px solid var(--rand); border-radius: 12px; padding: 8px 14px; font-size: 14.5px; font-weight: 600;
  color: var(--tekst-secundair); background: #fff;
}
.verschil span { color: inherit; font-weight: 600; }
.verschil.goedkoper { color: var(--goedkoper); }
.verschil.duurder { color: var(--duurder); }

/* De opbouw: een wit kader met een regel per onderdeel en het totaal onderaan. */
.opsplitsing {
  list-style: none; margin: 4px 0 0; padding: 10px 14px; background: #fff;
  border: 1px solid var(--rand); border-radius: 12px;
}
.opsplitsing li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 14.5px; color: var(--tekst-secundair); padding: 5px 0;
}
.opsplitsing li > span { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.opsplitsing li > span .stip, .opsplitsing li > span .pctblok { align-self: center; }
.opsplitsing li b { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Kortingen in het roze, inclusief het procentblokje: eigen risico, jaarbetaling, pakketkorting. */
.opsplitsing .kortingregel, .opsplitsing .kortingregel b { color: var(--roze-donker); font-weight: 600; }
.opsplitsing .kortingregel .pctblok { background: var(--roze); }
.opsplitsing .leeftijdregel { color: var(--tekst-tertiair); font-size: 12.5px; padding-top: 0; margin-top: -2px; }
.opsplitsing .leeftijdregel > span { display: block; white-space: normal; padding-left: 17px; }
td.premie small.leeftijd { display: block; font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--tekst-tertiair); white-space: normal; max-width: 15em; }
.opsplitsing .totaal { border-top: 1px solid var(--rand-licht); margin-top: 6px; padding-top: 9px; font-weight: 700; color: var(--ink); }
.opsplitsing .totaal b { font-weight: 800; font-size: 15.5px; }
/* Het overzicht van een rekenvraag: de polissen naast elkaar, alleen financieel. */
/* Breder dan een gewone ballon (eigenaar 27-09-2026): twee polissen krijgen elk 330px, vier elk ~180px; de tabel schuift binnen zijn kader als het niet past. */
.ballon.rekenballon { white-space: normal; max-width: min(980px, 96%); width: fit-content; }
.rekentekst { margin: 0 0 12px; white-space: pre-line; }
.rekentabel-omhulsel { overflow-x: auto; width: fit-content; max-width: 100%; border: 1px solid var(--rand-licht); border-radius: 20px; background: #fff; }
/* Zo breed als de inhoud: een vaste kolom per polis, zodat twee polissen niet uit elkaar getrokken worden. */
.rekentabel { width: auto; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; }
/* Kolombreedte naar het aantal polissen: twee passen ruim, vier worden smaller maar blijven binnen de ballon. */
.rekentabel thead th.rt-polis, .rekentabel td { width: clamp(150px, calc((900px - 170px) / var(--kolommen)), 330px); }
.rekentabel th, .rekentabel td { text-align: left; vertical-align: top; padding: 9px 14px; border-top: 1px solid var(--rand-licht); }
.rekentabel thead th { border-top: 0; vertical-align: top; padding-top: 18px; padding-bottom: 16px; }
.rekentabel thead .rt-hoek { vertical-align: bottom; }
.rekentabel thead th + th, .rekentabel td { border-left: 1px solid var(--rand-licht); }
.rekentabel .rt-hoek { width: 170px; font-size: 12.5px; font-weight: 700; color: var(--tekst-tertiair); text-transform: uppercase; letter-spacing: .05em; }
.rt-polis { font-weight: 400; position: relative; }
/* De huidige polis (overstapflow): de hele kolom zacht roze, met een label bovenin. */
.rekentabel col.rt-huidig, .rekentabel th.rt-huidig { background: var(--roze-zacht); }
.rt-huidiglabel {
  display: inline-block !important; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--roze); color: #fff; font-size: 13px; font-weight: 700;
}
/* Het premiejaar als grijs ballonnetje rechtsboven in de kolom. */
.rt-polis .rt-jaar {
  position: absolute; top: 14px; right: 14px; display: inline-block;
  background: var(--vlak); color: var(--tekst-secundair); border-radius: 999px;
  padding: 3px 10px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rt-polis > * { display: block; }
.rt-logo { height: 36px; margin-bottom: 8px; padding-right: 58px; }
.rt-logo .logo { width: 80px; max-width: 100%; height: 36px; object-position: left center; }
/* Vaste hoogtes in de kop, zodat de premies in elke kolom op dezelfde hoogte staan: het merk krijgt twee regels, de
   korting en het verschil elk een vak dat er ook is als het leeg blijft; de samenstelling staat onderaan. */
.rt-merk { font-size: 17px; color: var(--ink); line-height: 1.15; min-height: 2.3em; }
.rt-samenstelling { font-size: 14.5px; color: var(--tekst-secundair); margin-top: 8px; }
.rt-kortingnotitie { min-height: 20px; }
.rt-kortingnotitie.leeg { visibility: hidden; }
.rt-chipvak { display: block; min-height: 36px; }
.rt-prijs { font-size: 14px; color: var(--tekst-secundair); }
.rt-prijs b { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rt-kortingnotitie { display: flex !important; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--roze-donker); margin-top: 4px; }
.rt-polis .verschil { display: inline-flex; margin-top: 6px; padding: 5px 12px; font-size: 13.5px; border-radius: 999px; }
.rt-polis .verschil.goedkoper { background: #E9F7EF; border-color: #BFE6CF; }
.rt-polis .verschil.duurder { background: #FDECEE; border-color: #F6C9CF; }
.rekentabel tbody th[scope="row"] { font-weight: 500; color: var(--tekst-secundair); width: 170px; }
.rekentabel td { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-sectie th { background: var(--vlak); font-size: 12px; font-weight: 700; color: var(--tekst-secundair); text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px; }
.rt-totaal th, .rt-totaal td { font-weight: 700; color: var(--ink) !important; }
.rt-korting { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--roze-donker); }
.rt-korting .pctblok { background: var(--roze); }
.rt-leeg { color: var(--tekst-tertiair); }
.rt-noot { display: block; font-size: 13px; color: var(--tekst-tertiair); font-weight: 400; margin-top: 2px; }
.rt-noot.rt-goedkoper { color: var(--goedkoper); font-weight: 700; }
.rt-noot.rt-duurder { color: var(--duurder); font-weight: 700; }
.kortingsmelding { font-size: 14px; color: var(--tekst-secundair); margin: 0; line-height: 1.45; text-wrap: pretty; }

.knoppen { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.aanvragen {
  width: 100%; background: var(--roze); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 20px; font-size: 16px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  text-decoration: none; text-align: center; font-family: inherit; line-height: 1.2;
}
.aanvragen:hover { background: var(--roze-hover); color: #fff; }
.bewaren {
  width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--rand); border-radius: 999px;
  padding: 13px 18px; font-size: 15.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.bewaren:hover { border-color: var(--ink); }
.bewaren .ster { color: var(--roze); font-size: 15px; }
.bewaren.bewaard { border-color: var(--roze-rand); background: var(--roze-zacht); color: var(--roze-donker); cursor: default; }
.bewaren:disabled:not(.bewaard) { opacity: .6; cursor: wait; }
.leeg { color: var(--tekst-tertiair); }

/* Onder 760px zakt het premieblok onder de dekkingen, zoals in de handoff beschreven. */
@media (max-width: 760px) {
  .polis { flex-direction: column; }
  .dekkingblok { width: auto; flex: none; padding: 18px 16px; }
  .kop { flex-wrap: wrap; }
  .logo { width: 96px; height: 60px; }
  .premieblok { border-left: 0; border-top: 1px solid var(--roze-rand); padding: 18px 16px; }
  .modules { flex-direction: column; gap: 18px; }
  .plus { margin: 0; align-self: flex-start; }
  .modulekop { min-height: 0; }
}

/* ==== chatpagina ==== */
body.chatpagina { background: var(--zacht); }
/* Breed genoeg voor een kaart van 1100px binnen de ballon van het maatje (met de avatar ernaast en
   de marges van ballon en venster), anders knijpt het premieblok. */
.chatvenster {
  max-width: 1270px; margin: 0 auto; min-height: 100vh; background: #fff;
  border-left: 1px solid var(--rand-licht); border-right: 1px solid var(--rand-licht);
  display: flex; flex-direction: column;
}
.chatkop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 13px;
  padding: 16px clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--rand-licht);
  position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); z-index: 2;
}
.avatar { position: relative; flex: none; }
.avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--vlak); display: block; }
.avatar .online {
  position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: #1FBF6B; border: 2px solid #fff;
}
.chatkop-naam { font-size: 16px; font-weight: 700; }
.chatkop-sub { font-size: 13px; color: var(--tekst-tertiair); }
/* Het naamveld: een wit invulveld met een potlood en een kopje erboven, zodat het leest als "hier
   typ je iets" en niet als een grijs label. Op focus kleurt de rand roze. */
.gespreksnaam {
  margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 12px;
  border-radius: 14px; background: var(--roze); border: 1px solid var(--roze); cursor: text; color: #fff;
}
.gespreksnaam:hover { background: var(--roze-hover); border-color: var(--roze-hover); }
.gespreksnaam:focus-within { border-color: #fff; box-shadow: 0 0 0 3px var(--roze-zacht); }
.gespreksnaam .potlood { color: #fff; font-size: 17px; line-height: 1; flex: none; }
.gespreksnaam-tekst { display: flex; flex-direction: column; gap: 1px; }
.gespreksnaam-kop { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.gespreksnaam input {
  width: 220px; border: 0; outline: none; background: transparent; font-size: 15.5px; font-weight: 600;
  color: #fff; padding: 0;
}
.gespreksnaam input::placeholder { color: rgba(255,255,255,.75); font-weight: 500; }
.gespreksnaam .jaar { font-size: 12.5px; color: rgba(255,255,255,.85); padding-right: 6px; white-space: nowrap; }

.berichten {
  flex: 1; padding: clamp(18px, 3vw, 28px) clamp(14px, 3vw, 32px) 12px;
  display: flex; flex-direction: column; gap: 18px;
}
.bericht { display: flex; gap: 12px; align-items: flex-end; max-width: 100%; }
.bericht.klant { justify-content: flex-end; }
.avatar-klein { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--vlak); flex: none; }
.ballon {
  max-width: min(720px, 80%); padding: 14px 20px; font-size: 15.5px; line-height: 1.55;
  background: var(--vlak); color: var(--ink); border-radius: 18px 18px 18px 5px; white-space: pre-line;
}
.bericht.klant .ballon { background: var(--ink); color: #fff; border-radius: 18px 18px 5px 18px; }
.ballon.stippen { display: flex; gap: 6px; padding: 16px 18px; }
.ballon.stippen i { width: 7px; height: 7px; border-radius: 50%; background: var(--roze); animation: vm-dot 1.4s ease-in-out infinite; }
.ballon.stippen i:nth-child(2) { animation-delay: .18s; }
.ballon.stippen i:nth-child(3) { animation-delay: .36s; }
@keyframes vm-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ballon.stippen i { animation: none; opacity: .7; } }

/* De kaarten staan als eigen rij in het gesprek, over de volle breedte. */
.resultaten { width: 100%; margin: 4px 0 6px; }
.resultaten .lijstkop { margin-bottom: 14px; }
.resultaten .polis { margin-left: 0; }

.invoerbalk {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--rand-licht);
  padding: 14px clamp(14px, 3vw, 32px) 20px; display: flex; flex-direction: column; gap: 12px; z-index: 2;
}
.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chips:empty { display: none; }
.chip {
  padding: 10px 15px; border: 1px solid var(--rand); border-radius: 999px; font-size: 14.5px; font-weight: 500;
  color: var(--ink); cursor: pointer; background: #fff; text-align: left;
}
.chip:hover { background: var(--zacht); border-color: #D9D9DE; }
.invoer {
  display: flex; gap: 10px; align-items: center; padding: 7px 7px 7px 18px;
  border: 1px solid var(--rand); border-radius: 999px; background: #fff;
}
.invoer:focus-within { border-color: #C6C4CC; }
.invoer input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15.5px; color: var(--ink); background: transparent; padding: 8px 0; }
.invoer button {
  flex: none; padding: 11px 20px; border: 0; border-radius: 999px; background: var(--roze); color: #fff;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.invoer button:hover { background: var(--roze-hover); }
.invoer button:disabled { opacity: .5; cursor: default; }
.disclaimer { margin: 0; font-size: 12px; color: var(--tekst-grijs); text-wrap: pretty; }
.disclaimer a { color: inherit; font-weight: 600; }
.disclaimer a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .gespreksnaam { margin-left: 0; width: 100%; }
  .gespreksnaam input { flex: 1; width: auto; }
  .ballon { max-width: 88%; }
}

/* Onder de kaarten: de knop voor de volgende pagina, of de melding dat alles er staat. */
.meer-resultaten { max-width: 1120px; display: flex; justify-content: center; padding: 4px 0 8px; }
.toon-meer {
  background: var(--roze-zacht); color: var(--roze-donker); border: 1px solid var(--roze-rand); border-radius: 999px;
  padding: 13px 26px; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.toon-meer:hover { background: #F9DCE8; border-color: var(--roze); }
.toon-meer { font-weight: 400; }
.toon-meer b { font-weight: 700; }
.toon-meer .rest { color: var(--tekst-secundair); }
.alles-getoond { margin: 0; font-size: 14px; color: var(--tekst-secundair); }

/* Keuzeblok in de tekstballon: aanvinkbare keuzes bij een doorvraag. */
.ballon.keuzeblok { max-width: min(720px, 92%); padding: 16px 20px 14px; }
.ballon.keuzeblok form { display: flex; flex-direction: column; gap: 14px; }
.keuzetitel { margin: 0 0 -4px; font-size: 17px; font-weight: 700; color: var(--ink); }
.keuzegroep { border: 0; margin: 0; padding: 0; min-width: 0; }
.keuzegroep legend { font-size: 13px; font-weight: 700; color: var(--tekst-tertiair); text-transform: uppercase; letter-spacing: .05em; padding: 0; margin-bottom: 6px; }
.keuze { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; cursor: pointer; }
.keuze input { accent-color: var(--roze); width: 17px; height: 17px; margin: 0; flex: none; }
.keuzeknop {
  align-self: flex-start; background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 20px; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.keuzeknop:hover { background: var(--ink-hover); }
.ballon.keuzeblok.ingevuld { opacity: .6; }
.ballon.keuzeblok.ingevuld .keuzeknop { display: none; }

.keuzevraag { margin: 0 0 14px; }
.ballon.keuzeblok.ingevuld .keuzevraag { opacity: 1; }

/* Toegepaste filters boven het zoekresultaat, met een kruisje om ze weg te laten. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 1120px; margin: -6px 0 16px; }
.filters:empty { display: none; }
.filterlabel { font-size: 14.5px; color: var(--tekst-secundair); margin-right: 2px; }
.filter {
  display: inline-flex; align-items: center; gap: 10px; background: var(--roze-zacht); border: 1px solid var(--roze-rand);
  border-radius: 999px; padding: 6px 8px 6px 14px;
}
.filtertekst { display: flex; flex-direction: column; line-height: 1.2; }
.filtertekst b { font-size: 15px; color: var(--ink); font-weight: 700; }
.filtertekst small { font-size: 13.5px; color: var(--ink); font-weight: 400; }
.filterweg {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--roze-rand); background: #fff;
  color: var(--roze-donker); font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 0 2px;
}
.filterweg:hover { background: var(--roze); color: #fff; border-color: var(--roze); }
/* De waarde van een filter is aan te passen: een knop die eruitziet als de tekst, met een stippellijn eronder. */
.filterwaarde { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 13.5px; color: var(--roze-donker); text-align: left;
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; line-height: 1.2; }
.filterwaarde:hover { color: var(--roze); }
.filter.bewerken { gap: 6px; padding-right: 8px; }
.filterbewerker { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.filterbewerker .fb-kind { font-size: 12.5px; color: var(--tekst-secundair); }
.filterbewerker .fb-eenheid { font-size: 13px; color: var(--ink); font-weight: 600; }
.filterbewerker input, .filterbewerker select { font: inherit; font-size: 14px; width: 5.5em; padding: 4px 8px; border: 1px solid var(--roze-rand); border-radius: 8px; background: #fff; }
.filterbewerker select { width: auto; }
.filterok { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.filterok:hover { background: var(--roze); border-color: var(--roze); }

/* De resultaatkaarten in een tekstballon van het maatje. De ballon neemt de volle breedte; de
   kaarten zelf houden hun maten (1100px, dekkingblok 712px). */
.resultaatrij { align-items: flex-end; }
.ballon.resultaatballon {
  max-width: 100%; flex: 1 1 auto; min-width: 0; padding: 18px 16px 14px; white-space: normal;
  border-radius: 18px 18px 18px 5px;
}
.resultaatballon .resultaten { margin: 0; }
.resultaatballon .lijstkop { margin: 0 0 14px; }
.resultaatballon .polis { background: #fff; }
.resultaatballon .filters { margin: -2px 0 14px; }
/* Zelf een filter erbij, zonder het maatje iets te hoeven typen. Dezelfde stippellijn als de knoppen
   "Aanvullende verzekering toevoegen" op een kaart, maar kleiner: hij staat tussen de chips. */
.filtererbij {
  border: 1px dashed #D3D2D8; background: #fff; color: var(--tekst-secundair); border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.filtererbij .plusje { color: var(--roze); font-weight: 800; font-size: 15px; }
.filtererbij:hover { border-color: var(--roze); color: var(--roze-donker); }
.filterkiezer {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; background: #fff;
  border: 1px solid var(--roze-rand); border-radius: 999px; padding: 5px 8px 5px 12px;
}
.filterkiezer select { font: inherit; font-size: 14px; padding: 4px 8px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; max-width: 15em; }
.filterkiezer .fk-kind { font-size: 13px; color: var(--ink); max-width: 8em; }   /* keuzelijst minstens / precies */
.filterbewerker select.fb-kind { font: inherit; font-size: 13px; color: var(--ink); padding: 3px 6px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }
.filterbundel { display: inline-block; }
.filterbundel summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--rand); border-radius: 999px; padding: 6px 7px 6px 14px;
}
.filterbundel summary::-webkit-details-marker { display: none; }
.filterbundel summary:hover { border-color: var(--ink); }
.bundelpijl { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; line-height: 1; flex: none; transition: transform .15s, background .15s; }
.filterbundel summary:hover .bundelpijl { background: var(--roze); }
.filterbundel[open] { flex-basis: 100%; }
.filterbundel[open] .bundelpijl { transform: rotate(180deg); }
.bundelinhoud { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px 12px; margin-left: 10px; border-left: 2px solid var(--rand); }
.bundelinhoud .filter { background: var(--zacht); }
.resultaatballon .filter { background: #fff; border-color: var(--rand); }
.resultaatballon .filterweg { background: #fff; border-color: var(--rand); color: var(--ink); }
.resultaatballon .filterweg:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.antwoordtekst { margin: 0 0 18px; white-space: pre-line; }
.resultaatballon .periode { background: #fff; }
.resultaatballon .periode a.actief { background: var(--ink); color: #fff; }
.resultaatballon .toon-meer { background: #fff; color: var(--ink); border-color: var(--rand); }
.resultaatballon .toon-meer:hover { background: #fff; border-color: var(--ink); }
.resultaatballon .verschil, .resultaatballon .opsplitsing { background: #fff; }

/* De samenvatting voor het zoeken: kopjes zoals in het keuzeblok, roze bullets. */
.ballon.samenvatting { white-space: normal; max-width: min(720px, 92%); }
.sv-aanhef { margin: 0 0 14px; white-space: pre-line; }
.sv-blok { margin: 0 0 14px; }
.sv-kop { font-size: 13px; font-weight: 700; color: var(--tekst-tertiair); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.sv-regels { list-style: none; margin: 0; padding: 0; }
.sv-regels li { position: relative; padding: 4px 0 4px 20px; font-size: 15px; }
.sv-regels li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--roze); }
.sv-slot { margin: 4px 0 0; }
/* De uitleg over vergoedingen: per vergoeding de naam vet boven de bullets. */
.ballon.uitleg .sv-blok:last-child { margin-bottom: 0; }
.ul-naam { margin: 8px 0 2px; font-weight: 700; font-size: 15px; }
.sv-kop + .ul-naam { margin-top: 0; }

/* Gevraagde vergoedingen die niet in de vergelijking zitten: roze regels onder de modules, met link. */
.nakijken { margin-top: 16px; }
.nakijkenkop { font-size: 12px; font-weight: 700; color: var(--tekst-tertiair); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.nakijken .dekkingen li.gevraagd b a { color: var(--roze-donker); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.nakijken .dekkingen li.gevraagd b a:hover { color: var(--ink); }

/* ==== beginpagina ==== */
.sitekop {
  position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand-licht);
}
.sitekop-in { max-width: 1270px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 28px); display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; }
.woordmerk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.woordmerk img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.woordmerk i { font-style: normal; color: var(--roze); }
.sitenav { display: flex; gap: 22px; margin-left: 8px; }
.sitenav a { color: var(--tekst-secundair); text-decoration: none; font-weight: 600; font-size: 15px; }
.sitenav a:hover { color: var(--ink); }
.sitekop-acties { margin-left: auto; display: flex; gap: 10px; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.knop.zwart { background: var(--ink); color: #fff; }
.knop.zwart:hover { background: var(--ink-hover); }
.knop.roze { background: var(--roze); color: #fff; }
.knop.roze:hover { background: var(--roze-hover); }
.knop.omrand { background: #fff; color: var(--ink); border-color: var(--rand); }
.knop.omrand:hover { border-color: var(--ink); }
.knop.omrand-licht { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.knop.omrand-licht:hover { border-color: #fff; }
.knop.klein { padding: 9px 16px; font-size: 14px; }
/* Inloggen / Je account in de menubalk: de lichte rand viel weg tegen het wit. */
.sitekop-acties .knop.omrand { border-color: var(--ink); }

.hero { max-width: 1270px; margin: 0 auto; padding: clamp(16px, 4vw, 52px) clamp(16px, 4vw, 28px) clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 540px); gap: 32px; align-items: center; }
.seizoen { display: inline-flex; align-items: center; gap: 8px; background: var(--roze-zacht); color: var(--roze-donker); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.seizoen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--roze); }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 16px; text-wrap: balance; }
.hero h1 i { font-style: normal; color: var(--roze); }
.hero .intro { font-size: 17px; max-width: 66ch; margin: 0 0 24px; }
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.vertrouwen { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--tekst-secundair); }
.vertrouwen li::before { content: "\2713"; color: var(--roze); font-weight: 800; margin-right: 8px; }
.hero-beeld { position: relative; min-height: clamp(400px, 52vw, 580px); display: flex; align-items: flex-end; justify-content: flex-end; }
.hero-beeld .cirkel { position: absolute; border-radius: 50%; background: var(--zacht); width: min(420px, 80%); aspect-ratio: 1; right: 8%; bottom: 0; }
.hero-beeld .cirkel.klein { background: var(--roze-zacht); width: clamp(80px, 9vw, 120px); left: 0; right: auto; bottom: 6%; }
.hero-beeld img { position: relative; height: clamp(340px, 44vw, 560px); width: auto; max-width: 62vw; margin-right: clamp(0px, 1.5vw, 18px); }
.spraak { position: absolute; left: auto; right: 215px; top: 6%; width: max-content; max-width: min(330px, calc(100% - 230px)); background: #fff; border: 1px solid var(--rand); border-radius: 22px; padding: 14px 16px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 12px 34px -20px rgba(13,12,34,.4); text-wrap: pretty; }
.spraak::before { content: ""; position: absolute; right: -14px; bottom: 22px; border-style: solid; border-width: 10px 0 10px 14px; border-color: transparent transparent transparent var(--rand); }
.spraak::after { content: ""; position: absolute; right: -12px; bottom: 23px; border-style: solid; border-width: 9px 0 9px 12px; border-color: transparent transparent transparent #fff; }

.strip { background: var(--zacht); border-top: 1px solid var(--rand-licht); border-bottom: 1px solid var(--rand-licht); }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.strip-in { max-width: 1270px; margin: 0 auto; padding: clamp(26px, 4vw, 40px) clamp(16px, 4vw, 28px); }
.sectiekop { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; }
.sectie-intro { color: var(--tekst-secundair); max-width: 86ch; margin: 0 0 28px; font-size: 16px; }
.stappen { display: flex; flex-wrap: wrap; gap: 20px; }
.stap { flex: 1 1 260px; display: flex; gap: 14px; align-items: flex-start; }
.stap .nr { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stap.roze .nr { background: var(--roze); }
.stap h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.stap p { margin: 0; color: var(--tekst-secundair); font-size: 14.5px; line-height: 1.5; text-wrap: balance; }

.goedkoopst { max-width: 1270px; margin: 0 auto; padding: clamp(36px, 5vw, 60px) clamp(16px, 4vw, 28px); }
.goedkoopst .kopregel { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.peildatum { font-size: 13px; color: var(--tekst-tertiair); background: var(--vlak); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 8px; }
.blok { border: 1px solid var(--rand); border-radius: 18px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
/* De drie blokken naast elkaar lezen als één tabel: de prijs, de regel eronder, de vinkjes en de
   knoppen staan bij alle drie op dezelfde hoogte. Met subgrid delen de blokken de rijen van hun
   ouder, zodat de hoogste kop of de langste regel de rij bepaalt voor alle drie. Elk onderdeel krijgt
   zijn eigen rij toegewezen; ontbreekt er een (een blok zonder aanvraagknop), dan blijft die rij leeg
   in plaats van dat alles daaronder opschuift. Browsers zonder subgrid houden de flex-opmaak. */
@supports (grid-template-rows: subgrid) {
  .blokken { grid-template-rows: auto auto auto 1fr auto auto; }
  .blok { display: grid; grid-template-rows: subgrid; grid-row: span 6; }
  .blok > .blok-kop { grid-row: 1; }
  .blok > .blok-prijs { grid-row: 2; align-self: end; }
  .blok > .grondslag { grid-row: 3; }
  .blok > .vinkjes { grid-row: 4; }
  .blok > .knop { grid-row: 5; }
  .blok > .overleg { grid-row: 6; }
}
.blok.uitgelicht { border-color: var(--roze); box-shadow: 0 0 0 3px var(--roze-zacht); }
.labelpill { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--vlak); color: var(--tekst-secundair); border-radius: 999px; padding: 4px 10px; }
.blok.uitgelicht .labelpill { background: var(--roze); color: #fff; }
.blok-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.blok-kop > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.blok-figuur { height: clamp(104px, 12vw, 128px); width: auto; flex: none; margin: -6px -6px 0 0; }
.blok-polis { display: flex; align-items: center; gap: 12px; }
.blok-polis img { width: 104px; height: 54px; object-fit: contain; }
.blok-polis .merknaam { font-weight: 700; }
.blok-polis .polisnaam { color: var(--tekst-grijs); font-size: 14px; }
.blok-prijs { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.blok-prijs .euro { font-size: 22px; font-weight: 700; }
.blok-prijs .bedrag { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.blok-prijs .bedrag small { font-size: 22px; font-weight: 700; vertical-align: top; }
.blok-prijs .per { font-size: 15px; color: var(--tekst-tertiair); font-weight: 600; }
.grondslag { font-size: 14px; color: var(--tekst-secundair); margin: 0; }
.vinkjes { list-style: none; margin: 4px 0 6px; padding: 0; font-size: 14.5px; color: var(--tekst-secundair); display: flex; flex-direction: column; gap: 6px; }
.vinkjes li::before { content: "\2713"; color: var(--roze); font-weight: 800; margin-right: 8px; }
.blok .knop { margin-top: auto; }
.blok .overleg { font-size: 14px; font-weight: 600; color: var(--tekst-secundair); text-align: center; text-decoration: none; }
.blok .overleg:hover { color: var(--ink); }

.cta { max-width: 1270px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px) clamp(52px, 8vw, 90px); color: #fff; }
.cta-in { background: var(--ink); border-radius: 26px; padding: clamp(28px, 4.5vw, 48px) clamp(22px, 4.5vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 32px; align-items: center; }
.cta-in > div:first-child { align-self: start; }
.cta h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 12px; }
.cta p { color: rgba(255,255,255,.72); font-size: 16.5px; line-height: 1.6; max-width: 56ch; margin: 0 0 24px; }
.cta .cta-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.cta img { display: block; height: clamp(180px, 24vw, 240px); width: auto; max-width: 100%; margin: 0 auto; }

.voet { background: var(--ink); color: #fff; }
.voet .woordmerk { color: #fff; font-size: 19px; }
.voet .woordmerk img { background: #fff; width: 36px; height: 36px; }
.voet-in { max-width: 1270px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 28px) 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.voet h4 { margin: 0 0 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.45); }
.voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.voet a { color: rgba(255,255,255,.8); text-decoration: none; }
.voet a:hover { color: #fff; }
.voet p { margin: 0; color: rgba(255,255,255,.65); font-size: 14.5px; line-height: 1.6; max-width: 300px; text-wrap: pretty; }
.voet .contactlink { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 700; color: #fff; text-decoration: none; }
.voet .contactlink:hover { color: var(--roze); }
.voet-onder { max-width: 1270px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 28px) 34px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.5); }
/* Menubalk boven het gesprek: niet plakkend, zodat de gesprekskop bovenaan blijft staan bij het scrollen. */
body.chatpagina .sitekop { position: static; background: #fff; }
body.chatpagina .sitekop-in { padding-top: 10px; padding-bottom: 10px; }
body.chatpagina .chatvenster { min-height: calc(100vh - 61px); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-beeld { min-height: 360px; order: -1; }
  .hero-beeld img { height: clamp(300px, 70vw, 420px); }
  .spraak { right: 170px; max-width: min(300px, calc(100% - 180px)); }
  .cta-in { grid-template-columns: 1fr; }
  .cta img { height: 180px; }
  .sitenav { order: 3; width: 100%; margin-left: 0; }
}

/* ==== infopagina's, veelgestelde vragen en contact ==== */
body.infopagina { background: var(--zacht); }
.sitenav a.actief { color: var(--ink); }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tekst-tertiair); margin: 0 0 12px; }
.info-kop h1 { margin: 0 0 12px; font-size: clamp(29px, 4.4vw, 42px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-wrap: pretty; }
.info-intro { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--tekst-secundair); text-wrap: pretty; }
.info-in { max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 28px) 80px; display: flex; flex-direction: column; gap: 24px; }
.info-blokken { display: flex; flex-direction: column; gap: 14px; }
.info-blok { background: #fff; border: 1px solid var(--rand-licht); border-radius: 18px; padding: 24px 26px; }
.info-blok h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; text-wrap: pretty; }
.info-blok p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--tekst-secundair); text-wrap: pretty; }
.info-blok a { color: var(--roze-donker); font-weight: 600; }
.info-blok p + p { margin-top: 10px; }
.info-blok ul { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.info-blok li { font-size: 15.5px; line-height: 1.55; color: var(--tekst-secundair); text-wrap: pretty; }
.info-blok li strong { color: var(--ink); }
.info-blok ul + p { margin-top: 12px; }
/* Het maatje met het bordje. Hij houdt op bij zijn middel, dus hij mag niet in het luchtledige hangen:
   de afbeelding sluit precies aan op de onderrand van het zwarte vlak, zodat het vlak hem afsnijdt en hij
   erachter lijkt te staan. Daarom onderaan geen padding en overflow: hidden. */
.info-beeld {
  margin: 0; padding: clamp(16px, 4vw, 26px) clamp(12px, 3vw, 24px) 0;
  background: var(--ink); border: 1px solid var(--ink); border-radius: 22px;
  display: flex; justify-content: center; align-items: flex-end; overflow: hidden;
}
.info-beeld img { display: block; width: 100%; max-width: 720px; height: auto; margin-bottom: -1px; }
.info-datum { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst-secundair); text-wrap: pretty; }   /* hele breedte (eigenaar 27-09-2026) */
.info-datum a, .info-datum a:visited { color: var(--roze); font-weight: 700; }
.info-datum a:hover { color: var(--roze-hover); }
.info-datum .bronregel-staart { display: block; margin-top: 6px; }   /* laatst gecontroleerd + fout melden op een eigen regel */
.info-knoppen { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }

/* ==== account: inloggen, registreren, je gegevens ==== */
.account-in { max-width: 640px; }
.account-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.account-kop form { margin: 0; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--rand); margin: -6px 0 20px; }
.tabs a { padding: 10px 14px; font-size: 15px; font-weight: 700; color: var(--tekst-tertiair); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.actief { color: var(--ink); border-bottom-color: var(--roze); }
.account-formulier .knop { width: auto; align-self: flex-start; }
.account-formulier .veld .kleine-tekst { margin-top: 2px; }
/* De veldnamen op de accountpagina's zijn de kopjes van het formulier; 13px las als bijschrift. */
.account-formulier .veld label { font-size: 15.5px; }
/* Live terugkoppeling (assets/formulier.js): een regel onder het veld en een gekleurde rand. */
.veldstatus { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tekst-tertiair); min-height: 0; }
.veldstatus:empty { display: none; }
.veld.goed .veldstatus { color: var(--goedkoper); }
.veld.goed .veldstatus::before { content: '✓  '; font-weight: 700; }
.veld.fout .veldstatus { color: var(--duurder); }
.veld.goed input { border-color: var(--goedkoper-rand); }
.veld.fout input { border-color: var(--duurder-rand); }
.eisen { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--tekst-tertiair); }
.eisen li::before { content: '○  '; color: var(--stip-grijs); }
.eisen li.goed { color: var(--goedkoper); }
.eisen li.goed::before { content: '✓  '; color: var(--goedkoper); font-weight: 700; }
.eisen li.open { color: var(--tekst-secundair); }
/* De meldingen op de accountpagina's zijn de hoofdboodschap, niet een bijzin. */
.account-in .melding, .ac-in .melding { font-size: 16px; line-height: 1.55; padding: 14px 18px; }
.vink { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--tekst-secundair); }
.vink input { margin: 4px 0 0; flex: none; accent-color: var(--roze); }
.vink a { color: var(--roze-donker); font-weight: 600; }
.account-onder { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.account-onder form { margin: 0; }
.tekstknop { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--roze-donker);
  cursor: pointer; }
.tekstknop:hover { color: var(--roze); }
.gegevens { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 15.5px; }
.gegevens div { display: contents; }
.gegevens dt { color: var(--tekst-tertiair); }
.gegevens dd { margin: 0; color: var(--ink); font-weight: 600; }
.bundeljaar { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-tertiair); }
.bundel { border: 1px solid var(--rand-licht); border-radius: 14px; padding: 12px 14px; margin-top: 8px; }
.bundel-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.bundel-kop form { margin: 0; }
.bpolis { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand-licht); flex-wrap: wrap; }
.bpolis-tekst { flex: 1 1 220px; min-width: 0; }
.bpolis-naam { font-weight: 700; font-size: 15px; color: var(--ink); }
.bpolis-sub { font-size: 13.5px; color: var(--tekst-tertiair); }
.bpolis-premie { font-weight: 800; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bpolis-premie span { font-weight: 500; font-size: 12.5px; color: var(--tekst-tertiair); }
.bpolis-acties { display: flex; align-items: center; gap: 12px; }
.bpolis-acties form { margin: 0; }
/* ==== de accountpagina naar het ontwerp: kopkaart, genummerde secties, bundels, poliskaarten ==== */
.ac-in { max-width: 1120px; }
.ac-kop { background: #fff; border: 1px solid var(--rand-licht); border-radius: 22px; padding: 22px 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ac-avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; background: var(--vlak); flex: none; }
.ac-wie { flex: 1 1 260px; min-width: 0; }
.ac-wie h1 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.ac-wie p { margin: 4px 0 0; color: var(--tekst-tertiair); font-size: 15px; overflow-wrap: anywhere; }
.ac-tabs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ac-tabs form { margin: 0; }
/* De tabbladen in de kopkaart: het actieve zwart met witte letters, de rest wit met dezelfde donkere
   rand als Inloggen / Je account in de menubalk. */
.ac-tabs .knop.omrand { border-color: var(--ink); }
.ac-sectie { display: flex; flex-direction: column; gap: 14px; }
.ac-sectiekop { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rand-licht); }
.ac-nummer { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.ac-sectiekop h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.ac-sectiekop p { margin: 2px 0 0; color: var(--tekst-tertiair); font-size: 15px; }
.ac-leeg { background: #fff; border: 1px solid var(--rand-licht); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ac-leeg p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--tekst-secundair); max-width: 70ch; text-wrap: pretty; }
.ac-jaar { display: inline-flex; align-items: center; gap: 10px; background: var(--vlak); border-radius: 999px; padding: 6px 14px; font-size: 15px; align-self: flex-start; }
.ac-jaar span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-tertiair); }
.ac-bundels { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-bundel { position: relative; background: #fff; border: 1px solid var(--rand-licht); border-radius: 16px; min-width: 260px; }
.ac-bundel-link { display: flex; flex-direction: column; gap: 3px; padding: 14px 42px 14px 18px; color: var(--ink); text-decoration: none; border-radius: 16px; }
.ac-bundel-link strong { font-size: 16px; }
.ac-bundel-link span { font-size: 13.5px; color: var(--tekst-tertiair); }
.ac-bundel.actief { background: var(--ink); border-color: var(--ink); }
.ac-bundel.actief .ac-bundel-link, .ac-bundel.actief .ac-bundel-link span { color: #fff; }
.ac-bundel.actief .ac-bundel-link span { opacity: .75; }
.ac-kruis { position: absolute; top: 8px; right: 8px; margin: 0; }
.ac-kruis button { background: none; border: 0; font-size: 18px; line-height: 1; padding: 6px; cursor: pointer; color: var(--tekst-grijs); border-radius: 8px; }
.ac-kruis button:hover { color: var(--duurder); background: var(--vlak); }
.ac-bundel.actief .ac-kruis button { color: rgba(255,255,255,.7); }
.ac-bundel.actief .ac-kruis button:hover { color: #fff; background: rgba(255,255,255,.12); }
.ac-eerder { margin: 0; }
.ac-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; margin-top: 6px; }
.ac-polis { position: relative; background: #fff; border: 1px solid var(--rand-licht); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.ac-polis-kop { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.ac-logo { width: 96px; height: 60px; object-fit: contain; flex: none; }
.ac-merk { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.ac-pakket { font-size: 14.5px; color: var(--tekst-tertiair); }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chips span { background: var(--vlak); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: var(--tekst-secundair); }
.ac-prijs strong { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ac-prijs span { font-size: 15px; color: var(--ink); }
.ac-polis-acties { margin-top: auto; padding-top: 4px; }
.ac-polis-acties .knop { width: 100%; }
.ac-profiel { display: flex; flex-direction: column; gap: 14px; }
.ac-blok { background: #fff; border: 1px solid var(--rand-licht); border-radius: 20px; padding: 24px 28px; }
.ac-blok h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.02em; }
.ac-sub { margin: 0 0 16px; color: var(--tekst-tertiair); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.ac-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.ac-rij .veld { max-width: none; }
.ac-knoppen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.ac-weg { border-color: var(--roze-rand); }
.ac-weg p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--tekst-secundair); text-wrap: pretty; }
.ac-weg-form { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.ac-weg-form .vink { flex: 1 1 320px; }
.knop:disabled { opacity: .45; cursor: not-allowed; }
/* De huidige polis in het account: het roze blok uit het gesprek, met logo, jaar en knoppen. */
.ac-huidig { max-width: none; padding: 18px 22px 16px; margin: 0; }
/* Het jaartal als grijze bol, zoals de jaarchips bij de bewaarde polissen. */
.ac-jaarbol { display: inline-flex; align-items: center; background: var(--vlak); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.ac-huidig.verouderd { border-color: var(--duurder-rand); }
.ac-huidig-rij { display: flex; gap: 20px; align-items: flex-start; }
.ac-huidig-logo { width: 120px; height: 75px; object-fit: contain; flex: none; background: #fff; border-radius: 12px; padding: 6px; }
.ac-huidig .hp-gegevens { flex: 1; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; }
.ac-huidig .hp-gegevens dd.ac-deel { font-size: 13px; font-weight: 500; color: var(--roze-donker); }
.ac-huidig-onder { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F1CBDD; }
.ac-herinnering { margin: 0; font-size: 13.5px; color: var(--roze-donker); max-width: 60ch; text-wrap: pretty; }
.ac-huidig-knoppen { display: flex; gap: 10px; }
.ac-huidig-knoppen form { margin: 0; }
/* Naast elkaar: de selectiebalk, de knop op de kaart en de tabel. */
/* De keuzeknop "Naast elkaar bekijken": een open cirkel die bij selectie roze wordt met een wit vinkje. */
.knop.kies { background: #fff; color: var(--ink); border-color: var(--rand); gap: 10px; }
.knop.kies:hover { border-color: var(--ink); }
.knop.kies .vinkrond { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--stip-grijs); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.knop.kies.aan { background: var(--roze-zacht); color: var(--roze-donker); border-color: var(--roze-rand); }
.knop.kies.aan .vinkrond { background: var(--roze); border-color: var(--roze); }
.knop.kies.aan .vinkrond::before { content: '✓'; }
.ac-polis-acties { display: flex; gap: 10px; }
.ac-polis-acties .knop { flex: 1; width: auto; }
/* De werkbank: twee vakken die je vult vanaf de kaarten; de tabel klapt eronder open. */
.werkbank { background: #fff; border: 1px solid var(--rand-licht); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.werkbank-kop h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.werkbank-kop p { margin: 2px 0 0; font-size: 14.5px; color: var(--tekst-tertiair); }
.werkbank-vakken { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.werkbank-en { align-self: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-grijs); padding: 0 4px; }
.vak { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--roze-rand); background: var(--roze-zacht); border-radius: 14px; padding: 12px 40px 12px 14px; min-height: 76px; }
.vak img { width: 64px; height: 40px; object-fit: contain; flex: none; background: #fff; border-radius: 8px; padding: 3px; }
.vak-tekst { display: flex; flex-direction: column; min-width: 0; }
.vak-tekst strong { font-size: 15px; color: var(--ink); }
.vak-tekst span { font-size: 13px; color: var(--tekst-secundair); }
.vak-tekst small { font-size: 12.5px; color: var(--roze-donker); margin-top: 2px; }
.vak-kruis { position: absolute; top: 8px; right: 10px; color: var(--roze-donker); text-decoration: none; font-size: 18px; padding: 4px 6px; }
.vak.leeg { border: 2px dashed var(--rand); background: var(--zacht); flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 12px 14px; }
.vak.leeg p { margin: 0; font-size: 14px; color: var(--tekst-tertiair); }
/* Het rechtervak zonder keuze: een gedimde voorproef van je huidige polis, met dezelfde cirkelknop als op de kaart. */
.vak.voorproef { gap: 10px; }
.vak-rij { display: flex; align-items: center; gap: 12px; opacity: .55; }
.vak-rij img { width: 64px; height: 40px; object-fit: contain; flex: none; background: #fff; border-radius: 8px; padding: 3px; filter: grayscale(1); }
.vak.leeg .vak-tekst small { color: var(--tekst-tertiair); }
.werkbank-wis { align-self: flex-start; }
.naast-blok { display: flex; flex-direction: column; gap: 12px; }
.naast-blok-kop h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.naast-blok-kop p { margin: 2px 0 0; font-size: 14.5px; color: var(--tekst-tertiair); }
@media (max-width: 640px) { .werkbank-vakken { grid-template-columns: 1fr; } .werkbank-en { justify-self: center; } }
.ac-selectie { background: #fff; border: 1px solid var(--rand-licht); border-radius: 18px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ac-selectie-tekst p { margin: 0 0 8px; font-size: 15px; color: var(--tekst-secundair); }
.ac-selectie-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-selchip { display: inline-flex; align-items: center; gap: 10px; background: var(--roze-zacht); border: 1px solid var(--roze-rand); border-radius: 999px; padding: 6px 8px 6px 14px; color: var(--roze-donker); }
.ac-selchip strong { font-size: 14px; color: var(--ink); }
.ac-selchip small { font-size: 12.5px; }
.ac-selchip a { color: var(--roze-donker); text-decoration: none; font-size: 16px; padding: 0 6px; }
.naast-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--rand-licht); border-radius: 20px; }
table.naast { width: 100%; border-collapse: collapse; font-size: 15px; }
table.naast th, table.naast td { text-align: left; padding: 12px 18px; border-top: 1px solid var(--rand-licht); vertical-align: top; }
table.naast thead th { border-top: 0; vertical-align: bottom; }
table.naast tbody th[scope=row] { font-weight: 500; color: var(--tekst-secundair); width: 26%; }
table.naast td { color: var(--ink); font-weight: 600; }
table.naast td .stil { color: var(--tekst-grijs); font-weight: 500; font-style: italic; }
table.naast td.ruimer { color: var(--roze-donker); }
.ruimer-pill { display: inline-block; margin-left: 8px; background: var(--roze-zacht); color: var(--roze-donker); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; vertical-align: middle; }
tr.naast-groep th { background: var(--zacht); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-secundair); padding: 10px 18px; }
.naast-hoek { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-tertiair); }
.naast-kop { width: 37%; }
.naast-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.naast-kop-rij img { width: 110px; height: 56px; object-fit: contain; object-position: left; }
.naast-merk { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; min-height: 2.3em; }
.naast-pakketten { font-size: 14px; font-weight: 500; color: var(--tekst-tertiair); margin-top: 8px; }
.naast-chipvak { display: block; min-height: 36px; }
.naast-prijs strong { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.naast-prijs span { font-size: 14px; font-weight: 500; color: var(--ink); }
.naast-sub { font-size: 13px; font-weight: 500; color: var(--tekst-tertiair); margin-top: 2px; min-height: 18px; }
.ac-verschil { display: inline-block; margin-top: 8px; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; }
.ac-verschil.goedkoper { background: var(--goedkoper-bg); color: var(--goedkoper); border: 1px solid var(--goedkoper-rand); }
.ac-verschil.duurder { background: var(--duurder-bg); color: var(--duurder); border: 1px solid var(--duurder-rand); }
.naast-melding { font-weight: 500; color: var(--tekst-secundair); }
tr.naast-knoppen td { padding: 16px 18px 20px; }
tr.naast-knoppen .knop { width: 100%; }
.naast-voet { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.naast-voet p { margin: 6px 0 0; flex: 1 1 320px; font-size: 14px; line-height: 1.55; color: var(--tekst-tertiair); text-wrap: pretty; }
.ac-terug { margin: 0; }
.ac-terug a { color: var(--tekst-tertiair); text-decoration: none; font-weight: 600; font-size: 14px; }
.ac-terug a:hover { color: var(--ink); }
.ac-groep { border: 0; padding: 0; margin: 0 0 18px; }
.ac-groep legend { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; padding: 0; }
.ac-radios { display: flex; flex-direction: column; gap: 6px; }
/* De schuif voor de collectiviteitskorting (accountpagina en gesprek): waarde ernaast, de premie eronder. */
.schuif { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; max-width: 520px; }
.schuif input[type=range] { width: 100%; accent-color: var(--roze); margin: 0; }
.schuif output { font-weight: 800; font-size: 17px; min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.schuif .schuif-uitleg { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.45; color: var(--tekst-secundair); }
.schuif .schuif-uitleg:empty { display: none; }
.schuif .schuif-bedrag { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--tekst-secundair); }
.schuif .schuif-bedrag input { width: 7.5em; font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid var(--rand); border-radius: 10px; }
.schuif .schuif-bedrag span { font-weight: 700; color: var(--ink); }
.ac-groep[hidden], .keuzegroep[hidden] { display: none; }
.ac-radio { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--tekst-secundair); cursor: pointer; }
.ac-radio input { margin: 4px 0 0; accent-color: var(--roze); flex: none; }
.ac-radio:has(input:checked) span { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .ac-huidig-rij { flex-direction: column; } }
@media (max-width: 720px) {
  .ac-kaarten { grid-template-columns: 1fr; }
  .ac-kop { padding: 18px; }
  .ac-blok { padding: 20px; }
  .ac-polis-acties .knop { width: 100%; }
}

.faq-in { max-width: 1270px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 28px) 80px; display: flex; gap: clamp(20px, 4vw, 40px); align-items: flex-start; flex-wrap: wrap; }
.faq-lijst { flex: 1 1 620px; min-width: min(300px, 100%); display: flex; flex-direction: column; gap: 22px; }
.faq-lijst .info-intro { max-width: 560px; font-size: 17px; }
.faq-items { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--rand-licht); border-radius: 16px; padding: 0 22px; }
.faq-item:hover { border-color: #D9D9DE; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; font-size: 16.5px; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span:first-child { flex: 1; min-width: 0; }
.faq-item .teken { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--vlak); position: relative; }
.faq-item .teken::before, .faq-item .teken::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); border-radius: 2px; }
.faq-item .teken::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .teken::after { display: none; }
.faq-item p { margin: 0; padding: 0 36px 20px 0; font-size: 15.5px; line-height: 1.6; color: var(--tekst-secundair); text-wrap: pretty; }   /* tot 10px voor het sluiticoon (26px) */
.faq-zij { flex: 1 1 300px; min-width: min(280px, 100%); display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.faq-donker { background: var(--ink); border-radius: 20px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; color: #fff; }
.faq-donker img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #fff; }
.faq-donker h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.025em; text-wrap: pretty; }
.faq-donker p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.68); text-wrap: pretty; }
.faq-donker .knop { align-self: stretch; }
.faq-wit { background: #fff; border: 1px solid var(--rand-licht); border-radius: 16px; padding: 20px 22px; font-size: 14.5px; line-height: 1.55; color: var(--tekst-secundair); }
.faq-wit a { font-weight: 700; color: var(--roze); text-decoration: none; }

.contact-in { max-width: 1270px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 28px) 80px; display: flex; flex-direction: column; gap: 24px; }
.contact-in .info-kop { max-width: 760px; }
.contact-in .info-intro { font-size: 17px; }
.contact-kolommen { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.contact-links { flex: 1 1 520px; min-width: min(280px, 100%); display: flex; flex-direction: column; gap: 20px; }
.contact-rechts { flex: 1 1 300px; min-width: min(280px, 100%); display: flex; flex-direction: column; gap: 16px; }
/* Het maatje staat midden in het zwarte blok en niet op de onderrand: het blok is hoger dan hij is,
   dus onderaan uitlijnen liet hem onderin hangen met lucht boven zijn hoofd. */
.contact-donker { background: var(--ink); color: #fff; border-radius: 20px; padding: 26px clamp(20px, 4vw, 34px); display: flex; gap: 20px; align-items: center; }
.contact-donker > div { flex: 1; min-width: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pill-licht { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.contact-donker h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: pretty; }
.contact-donker p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.68); text-wrap: pretty; }
.contact-donker img { height: clamp(160px, 22vw, 230px); width: auto; flex: none; display: block; margin: 0 clamp(4px, 3vw, 34px); }
.contact-formulier { background: #fff; border: 1px solid var(--rand-licht); border-radius: 20px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.contact-formulier .kicker { color: var(--ink); margin-bottom: 6px; }
.contact-formulier .uitleg { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tekst-secundair); text-wrap: pretty; }
.contact-formulier form { display: flex; flex-direction: column; gap: 14px; }
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld.verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.veld label { font-size: 13px; font-weight: 700; color: var(--ink); }
.veld input, .veld select, .veld textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink); background: #fff; }
.veld textarea { resize: vertical; min-height: 120px; }
/* Het pijltje van een keuzelijst tekent de browser binnen de padding; met wat meer ruimte rechts
   staat het niet meer tegen de rand aan. */
.veld select { padding-right: 22px; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--roze); outline-offset: 1px; border-color: var(--roze); }
.contact-formulier .knop { width: 100%; }
.kleine-tekst { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tekst-grijs); text-wrap: pretty; }
.melding { border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.melding.goed { background: #EAF6EE; border: 1px solid #BFE3CB; color: #1F5F35; }
.melding.fout { background: var(--roze-zacht); border: 1px solid #F1CBDD; color: var(--roze-donker); }
.melding.vervaagt { opacity: 0; transition: opacity .7s ease; }
.melding[hidden] { display: none; }
/* Elk blok precies zo hoog als zijn tekst, en ze sluiten van boven af op elkaar aan. Met flex: 1
   rekten ze mee met de hoogte van de kolom ernaast, waardoor er veel wit boven en onder de tekst
   kwam te staan. */
.contact-blok { flex: 0 0 auto; background: #fff; border: 1px solid var(--rand-licht); border-radius: 20px; padding: 22px 26px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.contact-blok .kicker { color: var(--ink); margin: 0; }
.contact-blok h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.contact-blok p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tekst-secundair); text-wrap: pretty; }
.contact-blok a { font-weight: 700; color: var(--roze); text-decoration: none; }
.roze-link { align-self: flex-start; margin-top: 6px; font-size: 14.5px; }
@media (max-width: 700px) {
  .contact-donker { flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .contact-donker img { margin: 0 auto; }
  .faq-zij { position: static; }
}

/* ==== overstapflow: huidige polis, keuzelijsten, foto ==== */
.huidige-polis { max-width: 1120px; background: var(--roze-zacht); border: 1px solid #F6DAE6; border-radius: 16px; padding: 14px 18px 12px; margin: 0 0 16px; }
/* De zin onder de kop van de huidige polis als hij is omgezet naar de jaargang van de site (nu / straks). */
.hp-noot { margin: -4px 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--roze-donker); }
.hp-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hp-pill { background: var(--roze); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.hp-premie { margin-left: auto; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
/* Het logo van de verzekeraar naast de gegevens van de huidige polis, in een wit vak zoals in het account. */
.hp-rij { display: flex; align-items: flex-start; gap: 16px; }
.hp-logovak { flex: none; width: 96px; height: 60px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 6px; }
.hp-logo { max-width: 84px; max-height: 48px; object-fit: contain; }
.hp-rij .hp-gegevens { flex: 1; min-width: 0; }
@media (max-width: 560px) { .hp-rij { flex-direction: column; gap: 10px; } }
.hp-gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.hp-gegevens div { min-width: 0; }
.hp-gegevens dt { font-size: 11.5px; font-weight: 700; color: var(--tekst-tertiair); text-transform: uppercase; letter-spacing: .05em; }
.hp-gegevens dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.keuzelijst { width: 100%; max-width: 420px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 12px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; margin: 4px 0 2px; }
.keuzelijst:focus { outline: 2px solid var(--roze); outline-offset: 1px; border-color: var(--roze); }
.ballon.uploadvak { white-space: normal; }
.ballon.uploadvak input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.uploadknop { display: inline-flex; align-items: center; justify-content: center; background: var(--roze); color: #fff; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 15px; cursor: pointer; }
.uploadknop:hover { background: var(--roze-hover); }
.ballon.uploadvak.ingevuld .uploadknop { display: none; }
.uploadstatus { margin: 10px 0 0; font-size: 13px; color: var(--tekst-secundair); }
/* Verschil met de huidige polis per dekkingsregel: groen dekt meer, roze dekt minder. Het pijltje
   staat erbij zodat kleur niet de enige drager is. */
.dekkingen li.beter b, .dekkingen li.gevraagd.beter b { color: var(--goedkoper); }
.dekkingen li.minder b, .dekkingen li.gevraagd.minder b { color: var(--roze-donker); }
.dekkingen li.beter b::after { content: " ▲"; font-size: 10px; }
.dekkingen li.minder b::after { content: " ▼"; font-size: 10px; }
.hp-dekking { margin-top: 12px; padding-top: 10px; border-top: 1px solid #F1CBDD; }
.hp-dekkingkop { font-size: 11.5px; font-weight: 700; color: var(--tekst-tertiair); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.hp-dekking ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hp-dekking li { font-size: 13.5px; color: var(--tekst-secundair); }
.hp-dekking li b { color: var(--ink); font-weight: 600; margin-left: 6px; }
.hp-dekking li b.niet_vergoed, .hp-dekking li b.onbekend { color: var(--tekst-grijs); font-weight: 500; }
.hp-dekking li.hp-samenvatting { color: var(--tekst-tertiair); font-style: italic; }
/* De tandbehandelingen in een uitklap, zoals de bundels bij de filters. */
.hp-dekking li.hp-uitklap { flex-basis: 100%; }
.hp-dekking li.hp-uitklap summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--roze-rand); border-radius: 999px; padding: 5px 6px 5px 14px; }
.hp-dekking li.hp-uitklap summary::-webkit-details-marker { display: none; }
.hp-dekking li.hp-uitklap summary:hover { border-color: var(--ink); }
.hp-dekking li.hp-uitklap summary .bundelpijl { width: 22px; height: 22px; font-size: 13px; font-style: normal; }
.hp-dekking li.hp-uitklap details[open] summary .bundelpijl { transform: rotate(180deg); }
.hp-dekking li.hp-uitklap details ul { margin-top: 8px; padding: 8px 0 2px 12px; margin-left: 10px; border-left: 2px solid var(--roze-rand); }
.hp-legenda { margin: 6px 0 0; font-size: 12px; color: var(--tekst-tertiair); }
.lijstkop-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 6px 0 10px; }
.lijstkop-rechts .hp-legenda { margin: 0; text-align: right; white-space: nowrap; background: #fff; border: 1px solid var(--rand-licht);
  border-radius: 999px; padding: 8px 14px; font-size: 12.5px; }
.hp-legenda b.beter { color: var(--goedkoper); font-weight: 700; }
.hp-legenda b.minder { color: var(--roze-donker); font-weight: 700; }

/* ==== telefoon ==== */
@media (max-width: 760px) {
  /* Menubalk: woordmerk en knop op één regel, de links eronder in één scrollbare rij. */
  .sitekop-in { padding: 8px 16px 0; gap: 8px 12px; }
  .sitekop-in .woordmerk { font-size: 18px; }
  .sitekop-in .woordmerk img { width: 34px; height: 34px; }
  .sitekop-acties .knop.klein { padding: 8px 13px; font-size: 13.5px; }
  .sitenav { order: 3; width: 100%; margin: 0 -16px; padding: 4px 16px 10px; gap: 16px; overflow-x: auto;
             white-space: nowrap; scrollbar-width: none; box-sizing: content-box; }
  .sitenav::-webkit-scrollbar { display: none; }
  .sitenav a { font-size: 14px; flex: none; }
  body.chatpagina .sitekop-in { padding-top: 6px; }
  body.chatpagina .chatvenster { min-height: calc(100vh - 88px); }

  /* Gesprekskop: het naamveld doet nog niets en kost een hele regel. */
  .chatkop { padding: 10px 14px; gap: 10px; }
  .gespreksnaam { display: none; }
  .berichten { padding: 14px 10px 10px; gap: 14px; }
  .bericht { gap: 8px; }
  .avatar-klein { width: 28px; height: 28px; }
  .ballon { max-width: 88%; padding: 12px 15px; font-size: 15px; }

  /* De kaarten: geen avatar ernaast, de ballon en de kaart over de volle breedte. */
  .resultaatrij .avatar-klein { display: none; }
  .ballon.resultaatballon { padding: 12px 8px 10px; border-radius: 14px; }
  .lijstkop { flex-wrap: wrap; gap: 8px 12px; }
  .lijstkop h2 { font-size: 19px; }
  .dekkingblok { padding: 16px 14px; }
  .kop { gap: 14px; padding-bottom: 14px; margin-bottom: 14px; }
  .logo { width: 84px; height: 52px; }
  .merk { font-size: 18px; }
  .polisnaam { font-size: 15.5px; }
  .meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
  .meta .metapaar { display: block; margin-right: 0; }
  .premieblok { padding: 16px 14px 18px; }
  .prijs .heel { font-size: 38px; }
  .opsplitsing { padding: 8px 12px; }
  .opsplitsing li { flex-wrap: wrap; font-size: 14px; padding: 4px 0; }
  .opsplitsing li > span { flex-wrap: wrap; overflow-wrap: anywhere; }
  .meer-resultaten { padding: 2px 0 4px; }
  .toon-meer { width: 100%; padding: 12px 16px; font-size: 15px; }

  /* Invoerbalk: chips in één rij die je opzij schuift, zodat het invoerveld niet naar beneden zakt. */
  .invoerbalk { padding: 10px 12px 10px; gap: 10px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; font-size: 13.5px; padding: 8px 12px; color: var(--tekst-secundair); }
  .ballon.keuzeblok { max-width: 100%; padding: 14px 14px 12px; }
  .huidige-polis { padding: 12px 14px 10px; }
  .hp-premie { margin-left: 0; width: 100%; }
  .keuzelijst { max-width: 100%; }
  .invoer { padding: 6px 6px 6px 16px; }
  .invoer input { font-size: 16px; }   /* onder 16px zoomt iOS het veld in bij focus */
  .invoer button { padding: 10px 16px; }
  .disclaimer { font-size: 11.5px; line-height: 1.4; }
}

/* ---- Polissen naast elkaar (naast_dekkingen in kaart.php, 27-09-2026) --------------------------------------
   Uitklappen zonder JavaScript: een vinkje in een regel opent de regels eronder via tbody:has(). nd-a hoort bij
   "Alle dekkingen" (gesprek), nd-b bij "Per behandeling" (tandverzekering). Een browser zonder :has() laat
   alles open, zoals het eerst was. */
.nd-knop { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--roze-donker); position: relative; }
.nd-knop input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nd-knop:has(input:focus-visible) { outline: 2px solid var(--roze); outline-offset: 3px; border-radius: 4px; }
.nd-knop small { font-weight: 500; color: var(--tekst-tertiair); }
.nd-pijl { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 2px 3px; transition: transform .15s; }
.nd-knop input:checked ~ .nd-pijl { transform: rotate(-135deg); margin-bottom: -3px; }
@media (prefers-reduced-motion: reduce) { .nd-pijl { transition: none; } }
@supports selector(:has(*)) {
  tbody.nd-groep tr.nd-a, tbody.nd-groep tr.nd-b { display: none; }
  tbody.nd-groep:has(.nd-open-a:checked) tr.nd-a { display: table-row; }
  tbody.nd-groep:has(.nd-open-b:checked) tr.nd-b { display: table-row; }
  tbody.nd-groep:has(.nd-open-a):not(:has(.nd-open-a:checked)) tr.nd-b { display: none; }
}
tr.nd-kind > th { padding-left: 30px !important; }
.nd-toggle td { background: #fff; border-top: 1px solid var(--roze-rand); }
/* De tussenkoppen van de rekentabel zoals in de werkbank van het account (tr.naast-groep): --zacht met grijze kapitalen.
   Eerst --vlak, de kleur van de tekstballon eromheen; daarna een eigen tint; nu gelijk aan het account (eigenaar
   27-09-2026). */
.rekentabel .rt-sectie th { background: var(--zacht); color: var(--tekst-secundair); letter-spacing: .06em; padding: 10px 14px; }
/* De knoppen "Aanvragen bij ..." onder elke polis, zoals in het account. Een lange naam mag over twee regels. */
.rekentabel tr.rt-knoppen td { padding: 14px; vertical-align: top; }
.rekentabel tr.rt-knoppen .knop { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding: 10px 14px; }
/* "Aanvragen bij" op de eerste regel, het merk altijd op de tweede (eigenaar 27-09-2026), in het gesprek en in het account. */
.knop.aanvragen-bij { flex-direction: column; gap: 0; line-height: 1.2; padding-top: 9px; padding-bottom: 9px; white-space: normal; }
.knop.aanvragen-bij span { font-size: inherit; font-weight: inherit; }
.rekentabel td.ruimer { color: var(--roze-donker); }
/* In de roze kolom van de huidige polis (altijd de eerste poliskolom) is roze op roze onleesbaar: witte bol. */
.rekentabel.met-huidig td:nth-child(2) .ruimer-pill { background: #fff; }
/* Zoals table.naast in het account: wat er niet is, grijs en cursief. */
.rekentabel .stil, .rekentabel .rt-leeg { color: var(--tekst-grijs); font-weight: 500; font-style: italic; }
.rt-gevraagd th { background: var(--roze-zacht) !important; color: var(--roze-donker) !important; }

/* De knop op de kaart (dezelfde .knop.kies als in het account) en de kaart met de keuze boven de chips, in de vorm
   van de werkbank: roze vakken met logo, naam, pakketten en premie. */
.naastkies { width: 100%; }
/* Op het roze blok "Je huidige polis": naast de pill, niet over de volle breedte. */
.hp-kop .naastkies { width: auto; padding: 6px 14px; font-size: 13.5px; }
.naastbalk .vak-huidig { border-color: var(--roze); }
/* De keuzekaart licht kort op als er een polis bij komt, en de kop telt mee. */
.naastbalk-kop h3 .telpill { display: inline-block; margin-left: 8px; background: var(--roze-zacht); color: var(--roze-donker); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.naastbalk.pulse { animation: vm-naast-pulse 1.2s ease-out; }
@keyframes vm-naast-pulse { 0% { box-shadow: 0 0 0 0 rgba(234, 76, 137, .55); border-color: var(--roze); } 100% { box-shadow: 0 0 0 14px rgba(234, 76, 137, 0); } }
@media (prefers-reduced-motion: reduce) { .naastbalk.pulse { animation: none; border-color: var(--roze); } }
.naastbalk { background: #fff; border: 1px solid var(--rand-licht); border-radius: 18px; padding: 16px 18px; margin: 10px 0; display: flex; flex-direction: column; gap: 12px; }
.naastbalk-kop h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.naastbalk-kop p { margin: 2px 0 0; font-size: 14px; color: var(--tekst-tertiair); }
/* Twee vaste vakken met "en" ertussen, zoals de werkbank in het account; onder 560px onder elkaar. */
.naastbalk-vakken { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
@media (max-width: 560px) { .naastbalk-vakken { grid-template-columns: 1fr; } .naastbalk .werkbank-en { display: none; } }
.naastbalk .vak { padding-right: 44px; }
.naastbalk .vak-tekst strong { overflow-wrap: anywhere; }
.naastbalk .vak.leeg .knop.kies { margin-top: 6px; }
.naastbalk .vak { min-height: 64px; }
.naastbalk .vak img { width: 56px; height: 36px; object-fit: contain; flex: none; background: #fff; border-radius: 8px; padding: 3px; }
.naastbalk .vak-kruis { background: none; border: 0; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; }
.naastbalk-onder { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.naastbalk-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.naastbalk-melding { font-size: 14px; color: var(--roze-donker); font-weight: 600; max-width: 360px; text-align: right; }
@media (max-width: 640px) { .naastbalk-melding { text-align: left; max-width: none; } }

/* De samenvatting van een reeks filterwijzigingen: kopjes per verzekering en bullets (27-09-2026). */
.ballon.filtersamenvatting { white-space: normal; }
.filtersamenvatting p { margin: 0 0 4px; }
.filtersamenvatting .fs-kop { font-weight: 700; margin-top: 10px; }
.filtersamenvatting .fs-groep { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-tertiair); margin: 8px 0 2px; }
.filtersamenvatting .fs-lijst { margin: 0 0 4px; padding-left: 18px; }
.filtersamenvatting .fs-lijst li { margin: 2px 0; }
.filtersamenvatting .fs-lijst small { color: var(--tekst-tertiair); font-size: 13px; }
.filtersamenvatting .fs-stand { margin-top: 10px; }

/* Instagram in de voet: een wit logootje voor het account (27-09-2026). */
.voet .voet-insta { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.voet .voet-insta svg { width: 18px; height: 18px; flex: none; }
.voet .voet-insta span { text-decoration: none; }
.voet .voet-insta:hover { color: var(--roze); }   /* geen streep bij mouseover, wel roze (eigenaar 27-09-2026) */

/* SEO-ronde 27-09-2026: de ondertitel op de beginpagina, "In het kort" en de stappen op een onderwerppagina, de
   vergoedingen per dekking op een merkpagina. */
.hero .hero-sub { margin: -6px 0 16px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.hero h1 .roze-woord, .hero .hero-sub .roze-woord { color: var(--roze); font-style: normal; }
.ow-blok.ow-kort > p { color: var(--ink); }   /* zelfde witte blok als de rest (eigenaar 27-09-2026) */
.ow-stappen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px !important; font-size: 14.5px; }
.ow-stappen span { color: var(--tekst-tertiair); margin-right: 4px; }
.ow-stappen a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rand); background: #fff; color: var(--ink) !important; font-weight: 600; text-decoration: none; }
.ow-stappen a:hover { border-color: var(--roze); }
.ow-stappen a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.mk-dekkingen h3 { margin: 18px 0 4px; font-size: 16px; letter-spacing: -0.01em; }
.mk-dekkingen p { margin: 0 0 6px; }

/* De uitnodiging voor een account in het gesprek (27-09-2026): knop en tekstlink onder de ballon. */
.ballon .account-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; }
.ballon .account-links .knop.klein { padding: 8px 14px; font-size: 14px; }
.ballon .account-links .tekstlink { font-weight: 700; color: var(--roze); text-decoration: none; }
.ballon .account-links .tekstlink:hover { text-decoration: underline; }
.ballon .account-noot { margin: 8px 0 0; font-size: 13px; color: var(--tekst-tertiair); }

/* De datapagina's /vrijwillig-eigen-risico en /korting-jaarbetaling (27-09-2026): dezelfde bouwstenen als de premie-index. */
.dp-in { max-width: 1160px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 28px) 80px; display: flex; flex-direction: column; gap: 28px; }
.dp-in .info-kop { max-width: 820px; }
.dp-blok { background: #fff; border: 1px solid var(--rand-licht); border-radius: 18px; padding: 24px 26px; min-width: 0; }
.dp-blok h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-wrap: pretty; }
.dp-blok > p, .dp-blok li { font-size: 16px; line-height: 1.6; color: var(--tekst-secundair); text-wrap: pretty; }
.dp-blok > p { margin: 0 0 10px; } .dp-blok > p:last-child { margin-bottom: 0; }
.dp-blok a { color: var(--roze); font-weight: 600; }
.dp-blok.dp-kort > p { color: var(--ink); }
.dp-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dp-tegel { background: #fff; border: 1px solid var(--rand-licht); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.dp-tegel .label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-tertiair); }
.dp-tegel .getal { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.dp-tegel .getal small { font-size: 16px; font-weight: 600; color: var(--tekst-secundair); }
.dp-tegel .bij { font-size: 15px; color: var(--tekst-secundair); line-height: 1.45; }
table.dp-tabel { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 12px; }
table.dp-tabel th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-tertiair); padding: 0 12px 10px 0; border-bottom: 1px solid var(--rand); font-weight: 700; }
table.dp-tabel td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rand-licht); vertical-align: middle; }
table.dp-tabel td.getal, table.dp-tabel th.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dp-tabel td.merk { font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.35; }   /* de algemene .merk (20px, kaarten) geldt hier niet */
table.dp-tabel td.merk small { font-size: 13.5px; color: var(--tekst-secundair); margin-top: 1px; }
table.dp-tabel td.korting { font-weight: 700; color: var(--goedkoper, #1C8C6A); }   /* niet 'verschil': dat is de pil van het gesprek */
table.dp-tabel td.logo, table.dp-tabel th.logo { width: 96px; padding-right: 8px; }
table.dp-tabel td.logo img { width: 84px; height: 44px; object-fit: contain; display: block; }
table.dp-tabel td.logo span { font-size: 13.5px; font-weight: 700; }
table.dp-tabel td small { display: block; color: var(--tekst-tertiair); font-weight: 500; font-size: 13.5px; }
.dp-noot { margin: 12px 0 0; font-size: 14px; color: var(--tekst-tertiair); }
.dp-lees ul { margin: 6px 0 0; padding-left: 20px; }
.dp-lees li { margin: 4px 0; }
.dp-cta { background: var(--ink); color: #fff; border-radius: 18px; padding: 26px 28px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dp-cta p { margin: 0; font-size: 16px; line-height: 1.5; max-width: 60ch; flex: 1 1 320px; }
.dp-cta img { width: 56px; height: 56px; border-radius: 50%; background: #fff; object-fit: cover; flex: none; }
.dp-cta .knop { margin-left: auto; }
@media (max-width: 760px) {
  .dp-blok { padding: 18px; }
  table.dp-tabel thead { display: none; }
  table.dp-tabel, table.dp-tabel tbody { display: block; }
  table.dp-tabel tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--rand-licht); }
  table.dp-tabel td { display: block; padding: 0; border: 0; }
  table.dp-tabel td.merk, table.dp-tabel td.naam, table.dp-tabel td.logo { grid-column: 1 / -1; width: auto; }
  table.dp-tabel td.merk { font-size: 15px; }
  table.dp-tabel td.getal { text-align: left; }
  table.dp-tabel td[data-k]::before { content: attr(data-k); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-tertiair); font-weight: 700; }
}

/* De terugkeerlink linksboven op een pagina onder een overzicht (onderwerp, merk, premies); 27-09-2026 centraal. */
.pg-terug { margin: 0 0 8px; font-size: 16.5px; }
.pg-terug a { display: inline-flex; align-items: center; gap: 9px; color: var(--roze); font-weight: 700; }
.pg-terug a:hover { color: var(--roze-donker); }
.pg-terug span { font-size: 19px; line-height: 1; }

/* Niet-gecontracteerde zorg op de kaart (29-09-2026): het algemene percentage als samenvatting, de zorgsoorten in een
   uitklap eronder. Gevraagd = roze, zoals de dekkingsregels. */
.kopregels details.ngz { font-size: 13.5px; color: var(--tekst-secundair); margin-top: -2px; }
.kopregels details.ngz summary { cursor: pointer; list-style: none; display: inline-flex; align-items: baseline; gap: 5px; }
.kopregels details.ngz summary::-webkit-details-marker { display: none; }
.kopregels details.ngz summary b { color: var(--ink); font-weight: 700; }
.kopregels details.ngz .ngz-pijl { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 3px; transition: transform .15s; }
.kopregels details.ngz[open] .ngz-pijl { transform: translateY(0) rotate(-135deg); }
.kopregels details.ngz.gevraagd summary .metalabel, .kopregels details.ngz.gevraagd summary b { color: var(--roze-donker); }
.kopregels .ngz-lijst { list-style: none; margin: 4px 0 0; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; background: var(--zacht); border-radius: 10px; }
.kopregels .ngz-lijst li { display: inline-flex; gap: 5px; align-items: baseline; }
.kopregels .ngz-lijst li b { color: var(--ink); font-weight: 700; }
.kopregels .ngz-lijst li b.onbekend { color: var(--tekst-tertiair); font-weight: 500; font-style: italic; }
.kopregels .ngz-lijst li.gevraagd span, .kopregels .ngz-lijst li.gevraagd b { color: var(--roze-donker); }
.kopregels .ngz-lijst li.gevraagd { background: var(--roze-zacht); border-radius: 6px; padding: 0 6px; margin: 0 -6px; }
@media (prefers-reduced-motion: reduce) { .kopregels details.ngz .ngz-pijl { transition: none; } }

/* De beheerbalk in het gesprek (alleen met de beheercookie, 04-10-2026): tokens per beurt en per gesprek, rapporteren. */
.beheerbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; padding: 8px 12px; border: 1px dashed #B8B7C2; border-radius: 12px; background: #F4F3F7; font-size: 12.5px; color: var(--tekst-secundair); font-variant-numeric: tabular-nums; }
.beheerbalk .bb-label { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: var(--ink); }
.beheerbalk .bb-som { color: var(--tekst-tertiair); }
.beheerbalk .bb-knop { margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }
.beheerbalk .bb-knop:disabled { opacity: .5; cursor: default; }
.beheerbalk .bb-vorm { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.beheerbalk .bb-vorm textarea { flex: 1 1 320px; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 8px; resize: vertical; }
.beheerbalk .bb-vorm .bb-knop { margin-left: 0; }
.beheerbalk .bb-weg { font: inherit; font-size: 16px; line-height: 1; border: 0; background: none; color: var(--tekst-tertiair); cursor: pointer; padding: 4px; }
.beheerbalk .bb-uitkomst { flex: 1 1 100%; color: var(--ink); }
.beheerbalk .bb-uitkomst a { color: var(--roze); font-weight: 700; }

/* Links onder een maatjeballon (de zorgzoeker), 16-10-2026 */
.ballon-links { margin-top: .6em; }
.ballon-links a { font-weight: 600; color: var(--roze-donker); }
.ballon-links a:hover { color: var(--roze-hover); }