/* Kern: voorkant (v-*), plek in de rij (rij-*), onderwerpen (hub*), rekenpagina's (kern-*), woningruil (ruil-*).
 * Hoort bij app/kern.js en de voorkant in app/publiek.js. Vlakke vlakken, lijnen van 1 px, geen schaduw. */

/* ───── Voorkant: kop ───── */
.v-kop { border-bottom: 1px solid var(--lijn); padding-block: clamp(28px, 5vw, 72px) clamp(32px, 5vw, 72px); }
.v-kop-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.v-kop .kicker { margin-bottom: 14px; }
.v-kop .w-h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); max-width: 11ch; line-height: .96; }
.v-kop .w-lead { max-width: 44ch; }
.v-punten { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--tekst); }
.v-punten li { display: flex; gap: 10px; align-items: flex-start; }
.v-punten svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--kans); }

/* ───── Plek in de rij ───── */
.rij { background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r); display: grid; }
.rij-velden { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; padding: 18px; border-bottom: 1px solid var(--lijn); }
.rij fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rij legend, .kern-form legend { padding: 0; font-size: .74rem; font-weight: 700; color: var(--zacht); letter-spacing: .02em; margin-bottom: 5px; }
.rij-datum { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; }
.rij .invoer { width: 100%; min-height: 46px; font-size: 1rem; }
.rij-uit { padding: 18px; display: grid; gap: 12px; min-height: 180px; align-content: start; }
.rij-leeg { color: var(--zacht); margin: 0; }
.rij-kop { display: grid; gap: 6px; }
.rij-zin { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.4; color: var(--inkt); margin: 0; }
.rij-zin b { font-weight: 600; background: var(--deurgeel-zacht); padding: 0 3px; }
.rij-tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rij-tabel th, .rij-tabel td { text-align: left; padding: 9px 10px 9px 0; border-top: 1px solid var(--lijn); vertical-align: top; }
.rij-tabel thead th { font-size: .72rem; font-weight: 600; color: var(--zacht); border-top: 0; padding-top: 0; }
.rij-tabel tbody th { font-weight: 600; color: var(--inkt); }
.rij-tabel td:last-child { width: 38%; padding-right: 0; }
.rij-tabel .getal { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rij-tabel small { display: block; color: var(--zacht); font-size: .76rem; }
.rij-balk { display: block; height: 8px; background: var(--vlak-2); border: 1px solid var(--lijn); margin: 5px 0 4px; }
.rij-balk i { display: block; height: 100%; background: var(--delft); }
.rij-noot { margin: 0; font-size: .9rem; }
.rij-uit .knop { justify-self: start; }
.rij-buiten { margin: 0; padding: 12px 18px; border-top: 1px solid var(--lijn); font-size: .86rem; color: var(--zacht); }

/* ───── Drie cijfers ───── */
.v-feiten { border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.v-feiten-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feit { padding: 22px 24px 22px 0; display: grid; gap: 4px; align-content: start; }
.feit + .feit { padding-left: 24px; border-left: 1px solid var(--lijn); }
.feit b { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; color: var(--inkt); letter-spacing: -.01em; }
.feit span { font-size: .9rem; color: var(--tekst); max-width: 34ch; }
.feit a { font-size: .76rem; color: var(--zacht); text-decoration: underline; text-underline-offset: 2px; justify-self: start; }

/* ───── Onderwerpen ───── */
.hubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--lijn-sterk); }
.hub { padding: 22px 22px 24px 0; display: grid; gap: 10px; align-content: start; }
.hub + .hub { padding-left: 22px; border-left: 1px solid var(--lijn); }
.hub h3 { font-family: var(--f-display); font-size: 1.45rem; letter-spacing: -.01em; }
.hub h3 a { color: var(--inkt); }
.hub p { font-size: .92rem; color: var(--zacht); min-height: 3.1em; }
.hub ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.hub li a { display: block; padding: 10px 0; border-top: 1px solid var(--lijn); font-size: .95rem; font-weight: 500; }
.hub-lijst { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--lijn-sterk); max-width: 820px; }
.hub-lijst a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; }
.hub-lijst a:hover { background: var(--vlak); }
.hub-lijst b { font-size: 1.1rem; color: var(--inkt); grid-column: 1; }
.hub-lijst span { grid-column: 1; color: var(--zacht); font-size: .93rem; }
.hub-lijst svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--delft); }
.hub-ander { color: var(--zacht); font-size: .92rem; padding-bottom: 56px; }

/* ───── Account ───── */
.v-account { background: var(--vlak); border-block: 1px solid var(--lijn); padding-block: clamp(40px, 6vw, 80px); }
.v-account-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px clamp(28px, 5vw, 72px); align-items: start; }
.v-account h2 { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; margin: 8px 0 12px; }
.v-account-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn-sterk); }
.v-account-lijst li { display: grid; grid-template-columns: 9.5ch minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--lijn); }
.v-account-lijst b { color: var(--inkt); }
.v-account-knop { grid-column: 1 / -1; display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; }

/* ───── Corporaties ───── */
.v-prof { border: 1px solid var(--lijn-sterk); border-radius: var(--r); padding: clamp(22px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; }
.v-prof h2 { font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.015em; margin: 6px 0 8px; }
.v-prof-links { display: grid; gap: 8px; justify-items: start; }

/* ───── Rekenpagina's ───── */
.kern-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.kern-onder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; padding-bottom: 64px; }
.kern-onder.breed { grid-template-columns: minmax(0, 1fr); }
.kern-onder.breed > .wl-kaart:first-child { grid-column: 1 / -1; }
.kern .invoer { width: 100%; min-height: 46px; font-size: 1rem; }
.kern .veld small { font-size: .8rem; }
.kern .segment button { min-height: 44px; padding-inline: 16px; }
.kern-vink { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
.kern-vink input { width: 20px; height: 20px; accent-color: var(--delft); flex: none; }
.kern-groot { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.kern-groot b { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--inkt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kern-groot span { color: var(--zacht); }
.kern-som summary { cursor: pointer; font-weight: 600; color: var(--inkt); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.kern-tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kern-tabel th, .kern-tabel td { text-align: left; padding: 9px 12px 9px 0; border-top: 1px solid var(--lijn); vertical-align: top; }
.kern-tabel thead th { font-size: .72rem; font-weight: 600; color: var(--zacht); border-top: 0; }
.kern-tabel tbody th { font-weight: 500; color: var(--inkt); }
.kern-tabel .getal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.kern-tabel thead th:last-child { text-align: right; padding-right: 0; }
.kern-tabel tr.som th, .kern-tabel tr.som td { border-top: 1px solid var(--lijn-sterk); font-weight: 700; color: var(--inkt); }
.kern-tabel small { color: var(--zacht); }
.kern-lijst { margin: 0; padding-left: 18px; display: grid; gap: 9px; }
.kern-stappen { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.kern-bron { display: inline-block; font-size: .76rem; font-weight: 400; color: var(--zacht); text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; }
.kern-knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kern-fout { color: var(--nee); background: var(--nee-zacht); padding: 10px 12px; margin: 0; border-left: 3px solid var(--nee); }
.kern-let { border: 1px solid var(--lijn-sterk); border-left: 3px solid var(--inkt); padding: 12px 14px; margin: 10px 0 14px; }
.kern-let p { margin: 0 0 8px; }
.kern-let p:last-child { margin-bottom: 0; }
.kern-ok { color: var(--kans); background: var(--kans-zacht); padding: 10px 12px; margin: 0; border-left: 3px solid var(--kans); }
.kern-form { display: grid; gap: 16px; }
.kern-form fieldset { border: 1px solid var(--lijn); border-radius: var(--r); margin: 0; padding: 14px; display: grid; gap: 12px; min-width: 0; }
.kern-form legend { padding: 0 6px; margin: 0; font-size: .8rem; }
.kern-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kern-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lijn); }
.kern-scroll:focus-visible { outline: 2px solid var(--delft); outline-offset: 2px; }
.kern-tabel.cijfers { min-width: 860px; }
.kern-tabel.cijfers th, .kern-tabel.cijfers td { padding: 10px 12px; }
.kern-tabel.cijfers thead th { background: var(--vlak-2); text-align: right; }
.kern-tabel.cijfers thead th:first-child { text-align: left; }
.kern-tabel.cijfers tbody th { max-width: 24ch; }
.kern-tabel.cijfers .kern-bron { display: block; margin: 2px 0 0; }
.kern h3 { font-size: 1.02rem; margin: 6px 0 0; }
.kern code { font-family: var(--f-cijfer); font-size: .86em; background: var(--vlak-2); padding: 1px 5px; }

/* ───── Woningruil ───── */
.ruil-ketens { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ruil-ketens li { border: 1px solid var(--lijn); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; justify-items: start; }
.ruil-pad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ruil-woning { display: grid; padding: 8px 10px; border: 1px solid var(--lijn); background: var(--vlak-2); font-size: .84rem; }
.ruil-woning b { color: var(--inkt); font-size: .95rem; }
.ruil-pijl { color: var(--zacht); }

/* ───── Smaller ───── */
@media (max-width: 1040px) {
  .hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub:nth-child(3) { padding-left: 0; border-left: 0; }
  .hub:nth-child(n+3) { border-top: 1px solid var(--lijn-sterk); }
  .hub p { min-height: 0; }
}
@media (max-width: 900px) {
  .v-kop-raster, .v-account-in, .kern-raster, .kern-onder, .v-prof { grid-template-columns: minmax(0, 1fr); }
  .v-kop .w-h1 { max-width: none; }
  .v-punten { margin-top: 18px; }
  .v-feiten-in { grid-template-columns: minmax(0, 1fr); }
  .feit, .feit + .feit { padding: 16px 0; border-left: 0; }
  .feit + .feit { border-top: 1px solid var(--lijn); }
  .feit { grid-template-columns: minmax(0, 9.5ch) minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
  .feit b { font-size: 1.35rem; }
  .feit a { grid-column: 2; }
}
@media (max-width: 560px) {
  .hubs { grid-template-columns: minmax(0, 1fr); }
  .hub, .hub + .hub { padding: 18px 0 8px; border-left: 0; }
  .hub + .hub { border-top: 1px solid var(--lijn-sterk); }
  .hub li a { padding: 13px 0; }
  .rij-velden { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .rij-uit { padding: 14px; }
  .rij-buiten { padding: 12px 14px; }
  .rij-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rij-tabel tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--lijn); }
  .rij-tabel th, .rij-tabel td { border: 0; padding: 0; }
  .rij-tabel td:last-child { grid-column: 1 / -1; width: auto; }
  .rij-tabel .getal { text-align: right; }
  .v-account-lijst li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kern .wl-kaart { padding: 16px; }
  .kern-tabel:not(.cijfers) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kern-tabel:not(.cijfers) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 9px 0; border-top: 1px solid var(--lijn); }
  .kern-tabel:not(.cijfers) th, .kern-tabel:not(.cijfers) td { border: 0; padding: 0; }
  .kern-tabel:not(.cijfers) td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--zacht); font-size: .8rem; }
  .kern-tabel:not(.cijfers) .getal { grid-column: 2; grid-row: 1; }
  .kern-tabel:not(.cijfers) tr.som { border-top: 1px solid var(--lijn-sterk); }
  .kern-knoppen .knop { flex: 1 1 100%; justify-content: center; }
}

/* ───── Telefoon: onderwerpen onder de bovenbalk, formulier direct onder de kop ───── */
.rij-tabel th, .rij-tabel td, .kern-tabel th, .kern-tabel td { border-bottom: 0; }
.m-onderwerpen { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid var(--lijn); background: var(--bg); padding-inline: max(8px, env(safe-area-inset-left, 0px)); }
.m-onderwerpen::-webkit-scrollbar { display: none; }
.m-onderwerpen a { flex: none; padding: 0 12px; min-height: 44px; display: flex; align-items: center; font-size: .92rem; font-weight: 500; color: var(--tekst); text-decoration: none; border-bottom: 2px solid transparent; }
.m-onderwerpen a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--delft); }
@media (max-width: 900px) {
  .v-kop { padding-top: 22px; }
  .v-kop-tekst { display: contents; }
  .v-kop-raster { gap: 0; }
  .v-kop .kicker { margin-bottom: 8px; }
  .v-kop .w-h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .v-kop .w-lead { margin-top: 12px; font-size: 1.02rem; }
  .v-kop-form { margin-top: 20px; }
  .v-punten { order: 3; margin-top: 20px; }
}

/* ───── Oudere browsers (zonder color-mix, van voor 2023). Staat hier omdat dit bestand als laatste laadt:
   vaste balken krijgen een dichte achtergrond, zodat tekst er niet doorheen schuift. ───── */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .topbalk, .pub-nav, .m-plak, .al-zoekwoord, .m-pub-bar { background: var(--bg); }
  .tabbalk { background: var(--vlak); border-top: 1px solid var(--lijn); }
  .m-segment { background: var(--vlak-2); }
  .prov.t1, .prov.t2 { background: var(--delft-zacht); }
  .prov.t3, .prov.t4 { background: var(--delft); }
  .invoer:focus { box-shadow: 0 0 0 2px var(--delft); }
  .statusblok .eyebrow, .statusblok .zacht, .slot2 p { color: #d9e4dd; }
  .melding, .melding.blauw, .melding.goed { border-color: var(--lijn); }
}
/* Zonder :has (Firefox van voor 2024): de gekozen optie blijft herkenbaar. */
.vertel-keus input:checked + span { font-weight: 600; }

/* Rijkoppen in tabellen: gewone letters (de site-brede th-stijl is voor kolomkoppen bedoeld). */
.rij-tabel tbody th, .kern-tabel tbody th { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: inherit; background: none; color: var(--inkt); white-space: normal; }
.kern-tabel.cijfers tbody th { font-weight: 600; min-width: 20ch; }
.kern-tabel.cijfers tbody th small { display: block; font-weight: 400; }
.hub-lijst svg { transform: rotate(45deg); }

/* Regiocijfers op de telefoon: elke regio een blok, elk getal met zijn naam ervoor (geen tabel die opzij schuift). */
@media (max-width: 700px) {
  .kern-scroll { overflow: visible; border: 0; }
  .kern-tabel.cijfers { min-width: 0; }
  .kern-tabel.cijfers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kern-tabel.cijfers tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 14px 0; border-top: 1px solid var(--lijn-sterk); }
  .kern-tabel.cijfers th, .kern-tabel.cijfers td { border: 0; padding: 0; }
  .kern-tabel.cijfers tbody th { grid-column: 1 / -1; font-size: 1.05rem; margin-bottom: 8px; }
  .kern-tabel.cijfers td { display: contents; }
  .kern-tabel.cijfers td::before { content: attr(data-kop); color: var(--zacht); font-size: .88rem; padding: 5px 0; border-top: 1px solid var(--lijn); }
  .kern-tabel.cijfers td > span { text-align: right; padding: 5px 0; border-top: 1px solid var(--lijn); font-variant-numeric: tabular-nums; }
}
.kern-tabel.cijfers thead th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.kern-tabel.cijfers th, .kern-tabel.cijfers td { padding: 10px; }
@media (max-width: 700px) { .kern-tabel.cijfers td::before { text-align: left; } .kern-tabel.cijfers th, .kern-tabel.cijfers td { padding: 0; } .kern-tabel.cijfers tbody th { padding-bottom: 0; } }

/* Voet: zeven kolommen op de computer (merk + zes lijstjes), twee op de telefoon. */
@media (min-width: 801px) { .pub-voet-raster { grid-template-columns: minmax(0, 1.5fr) repeat(6, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 801px) and (max-width: 1100px) { .pub-voet-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pub-voet-raster > :first-child { grid-column: 1 / -1; } }

/* ═════ Voorkant, versie 12-11-2026 (Younes: "eerste blik aantrekkelijk, het huis met de ramen terug") ═════
 * Kop = avond: donker kozijngroen, maan, de gevel met één raam per woningsite. Daaronder het formulier.
 * Staat onderaan zodat het eerdere regels overschrijft. Geen color-mix: werkt ook in oudere browsers. */
.v-held { background: var(--delft-diep); color: #dfe8e2; overflow: hidden; border-bottom: 1px solid #0f1f1a; }
.v-held-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: end; padding-top: clamp(36px, 6vw, 84px); }
.v-held-tekst { align-self: center; padding-bottom: clamp(40px, 6vw, 96px); }
.v-held-kicker { margin: 0 0 18px; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #a9c2b6; }
.v-held-h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.7rem, 6.2vw, 5.2rem); line-height: .94; letter-spacing: -.028em; color: #ffffff; max-width: 10.5ch; }
.v-held-h1 em { font-style: normal; color: var(--raam-licht); }
.v-held-lead { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.5; color: #cfdbd4; }
.v-held-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v-held .knop.geel { background: var(--raam-licht); color: #1d1a10; }
.v-held .knop.geel:hover { background: #f7d67e; }
.v-held .knop.geel svg { color: inherit; transform: rotate(135deg); }
.v-held .v-knop-licht { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); }
.v-held .v-knop-licht:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px #ffffff; }
.v-held-punten { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: #bccbc3; }
.v-held-punten li { display: flex; gap: 8px; align-items: center; }
.v-held-punten svg { width: 16px; height: 16px; flex: none; color: var(--raam-licht); }
.v-held :focus-visible { outline: 2px solid var(--raam-licht); outline-offset: 3px; }

.v-held-gevel { margin: 0; width: 100%; max-width: 430px; justify-self: center; position: relative; }
.v-held-gevel::before { content: ""; position: absolute; top: 4px; right: -6px; width: 44px; height: 44px; border-radius: 50%; background: #efe6cf; box-shadow: 0 0 46px rgba(239, 230, 207, .3); }
.v-gevel-svg { position: relative; }
.v-gevel-svg svg { display: block; width: 100%; height: auto; }
.v-held .gv-stoep { fill: #132a22; }
.v-held .gv-raam:hover .gv-rand, .v-held .gv-raam.gekozen .gv-rand { stroke: #ffffff; }
.v-held .gv-raam:focus-visible .gv-rand { stroke: #ffffff; }
.v-gevel-bij { background: #132a22; margin: 0; padding: 4px 18px 20px; min-height: 92px; display: grid; gap: 2px; align-content: start; text-align: center; justify-items: center; }
.v-gevel-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #93ad9f; }
.v-gevel-bij b { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: #ffffff; line-height: 1.2; }
.v-gevel-sub { font-size: .88rem; color: #b3c4bb; }
.v-gevel-link { margin-top: 4px; display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; font-weight: 600; color: var(--raam-licht); text-underline-offset: 3px; }
.v-gevel-link svg { width: 14px; height: 14px; }

/* Formulier "Hoe lang sta jij al ingeschreven?" */
.v-rij { padding-block: clamp(40px, 6vw, 88px); border-bottom: 1px solid var(--lijn); }
.v-rij-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.v-rij h2 { margin: 8px 0 14px; font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.04; letter-spacing: -.02em; color: var(--inkt); }
.v-rij-intro > p { max-width: 42ch; color: var(--tekst); margin: 0; }
.v-rij-stappen { list-style: none; counter-reset: stap; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.v-rij-stappen li { counter-increment: stap; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.v-rij-stappen li::before { content: counter(stap); grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-cijfer); font-size: .8rem; font-weight: 600; background: var(--delft-diep); color: var(--raam-licht); }
.v-rij-stappen b { color: var(--inkt); }
.v-rij-stappen span { font-size: .9rem; color: var(--zacht); }
.v-rij-form .rij { background: var(--vlak); box-shadow: 0 1px 0 rgba(22, 24, 26, .04), 0 22px 44px -30px rgba(22, 24, 26, .4); }

/* Vier onderwerpen als kaarten */
.hubs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 0; }
.hub, .hub + .hub { padding: 22px 22px 14px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); gap: 10px; }
.hub:hover { border-color: var(--zacht); }
.hub-ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--delft-zacht); color: var(--delft); }
.hub-ic svg { width: 21px; height: 21px; }
.hub li:last-child a { padding-bottom: 6px; }

@media (max-width: 1100px) {
  .hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub:nth-child(3), .hub:nth-child(n+3) { padding-left: 22px; border: 1px solid var(--lijn); }
}
@media (max-width: 900px) {
  .v-held-raster, .v-rij-raster { grid-template-columns: minmax(0, 1fr); }
  .v-held-raster { padding-top: 30px; gap: 8px; }
  .v-held-tekst { padding-bottom: 8px; }
  .v-held-h1 { max-width: none; font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .v-held-lead { margin-top: 16px; font-size: 1.04rem; }
  .v-held-knoppen { margin-top: 22px; }
  .v-held-knoppen .knop { flex: 1 1 auto; justify-content: center; }
  .v-held-punten { margin-top: 20px; }
  .v-held-gevel { max-width: 330px; margin-top: 18px; }
  .v-held-gevel::before { width: 34px; height: 34px; right: 0; }
  .v-rij-stappen { display: none; }
}
@media (max-width: 640px) {
  .hubs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hub, .hub + .hub, .hub:nth-child(n+3) { padding: 18px 18px 10px; border: 1px solid var(--lijn); }
}
#rij-blok { scroll-margin-top: 88px; }