/* Basis: kleuren, letters, onderdelen, voorkant, portaal (samengevoegd uit 8 bestanden op 12-11-2026, volgorde behouden).
 * Volgorde is betekenisvol: latere regels winnen. Bronnen: app.css, publiek.css, stijl.css, stijl-voorkant.css, stijl-warm.css, stijl-huis.css, stijl-reageren.css, stijl-extra.css. */

/* ═════ uit app.css ═════ */
/* Layout: app-shell — vaste zijbalk links (desktop) / tabbalk onder (telefoon), dashboard-raster rechts.
   Beeldtaal: Delfts blauw (vertrouwen, Nederlands), zonnig deurgeel (thuis, warmte), groen = kans. */
:root {
  --zijbalk: 248px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --schaduw: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --schaduw: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font: 15px/1.55 var(--f-tekst); -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--vlak);
}
a { color: var(--delft); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { color: var(--inkt); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h2 { font-size: 1.3rem; font-weight: 650; }
p { margin: 0; }
button { font: inherit; color: inherit; }
.cijfer, .getal { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-cijfer); font-size: .86em; }
.zacht { color: var(--zacht); }
.klein { font-size: .86rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ───── Shell ───── */
.shell { display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); min-height: 100vh; }
.zijbalk {
  position: sticky; top: env(safe-area-inset-top, 0px); height: calc(100vh - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 6px;
  padding-block: 22px 18px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: 16px;
  overflow: hidden;
}
.zijbalk::after { /* Delftse tegelmotief, heel subtiel */
  content: ""; position: absolute; inset: auto 0 0; height: 260px; opacity: .09; pointer-events: none;
  background-image: var(--tegel); background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent);
}
.merk { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; }
.merk:hover { text-decoration: none; }
.merk-teken { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.merk-naam { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.merk-naam small { display: block; font-weight: 500; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; transition: background .15s, color .15s;
}
.nav a svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav a[aria-current="page"] svg { opacity: 1; }
.nav-sep { height: 1px; margin: 10px 8px; }
.zijbalk-voet { margin-top: auto; position: relative; z-index: 1; display: grid; gap: 10px; }
.profielkaart { padding: 12px; font-size: .82rem; }
.profielkaart strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.themaknop {
  display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(255,255,255,.16); padding: 8px 10px; cursor: pointer; font-size: .82rem;
}
.themaknop svg { width: 16px; height: 16px; flex: none; }

.hoofd { min-width: 0; display: flex; flex-direction: column; }
.topbalk {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--lijn);
}
.topbalk-in { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-block: 10px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.kruimel { font-size: .85rem; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kruimel b { color: var(--inkt); font-weight: 650; }
.zoek { margin-left: auto; position: relative; width: min(380px, 46vw); }
.zoek input {
  width: 100%; border: 1px solid var(--lijn); background: var(--vlak); padding: 9px 14px 9px 38px;
  font: inherit; color: var(--tekst); box-shadow: 0 1px 0 rgba(14,26,51,.03);
}
.zoek svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--zacht); }
.zoek-resultaten {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 12px; box-shadow: var(--schaduw-hoog); padding: 6px; max-height: 360px; overflow: auto; z-index: 30;
}
.zoek-resultaten a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--tekst); }
.zoek-resultaten a:hover, .zoek-resultaten a.actief { background: var(--vlak-2); text-decoration: none; }
.zoek-resultaten .leeg { padding: 10px; color: var(--zacht); font-size: .9rem; }

.inhoud { padding-block: 28px 80px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); max-width: 1760px; width: 100%; margin-inline: auto; }
.voetregel { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--lijn); color: var(--zacht); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 6px 18px; }

.tabbalk { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { display: none; }
  .tabbalk {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0; z-index: 40;
    background: var(--vlak); border-top: 1px solid var(--lijn);
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  .tabbalk a { display: grid; justify-items: center; font-weight: 600; color: var(--zacht); text-decoration: none; }
  .tabbalk a svg { width: 21px; height: 21px; }
  .topbalk-in { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .inhoud { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: 110px; }
  .mobiel-merk { display: flex !important; }
  .kruimel { display: none; }
  .zoek { width: auto; flex: 1; }
}
.mobiel-merk { display: none; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; color: var(--inkt); }
.mobiel-merk .merk-teken { width: 30px; height: 30px; background: var(--delft-diep); }

/* ───── Bouwstenen ───── */
.paneel { background: var(--vlak); border-radius: var(--r); box-shadow: var(--schaduw); min-width: 0; }
.paneel-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; flex-wrap: wrap; }
.paneel-kop p { color: var(--zacht); font-size: .85rem; margin-top: 3px; }
.paneel-in { padding: 18px 20px 20px; }
.raster { display: grid; gap: 18px; }
.k-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 1180px) { .span-4, .span-5, .span-7, .span-8 { grid-column: span 12; } .span-6 { grid-column: span 6; } }
@media (max-width: 760px) { .span-6 { grid-column: span 12; } }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; font-size: .92rem;
}
.knop svg { width: 16px; height: 16px; }
.knop.stil { background: var(--vlak-2); color: var(--inkt); box-shadow: none; }
.knop.stil:hover { background: var(--vlak-3); }
.knop.klein { font-size: .84rem; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--vlak-2); color: var(--zacht); white-space: nowrap; line-height: 1.5;
}
.chip svg { width: 12px; height: 12px; }
.chip.blauw { background: var(--delft-zacht); color: var(--delft); }
.chip.groen { background: var(--kans-zacht); color: var(--kans); }
.chip.oranje { background: var(--let-op-zacht); color: var(--let-op); }
.chip.geel { background: var(--deurgeel-zacht); color: var(--let-op); }

/* ───── Hero / dashboard ───── */
.hero {
  position: relative; overflow: hidden; color: #dfe6ff;
  padding: clamp(22px, 3.4vw, 36px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; isolation: isolate;
}
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--tegel); background-size: 72px 72px; opacity: .07; z-index: -1; }
.hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(244,181,63,.28), transparent 62%); }
.hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.75rem); }
.hero .lead { font-size: 1.04rem; max-width: 56ch; margin-top: 12px; }
.hero-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero .knop.stil { background: rgba(255,255,255,.1); color: #fff; }
.hero .knop.stil:hover { background: rgba(255,255,255,.18); }
.hero-straat { justify-self: end; width: 100%; max-width: 440px; }
.hero-straat svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-straat { justify-self: center; max-width: 360px; } }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.kpi { padding: 18px 20px; display: grid; gap: 6px; position: relative; overflow: hidden; }
.kpi-kop { display: flex; align-items: center; gap: 10px; }
.kpi-icoon { width: 34px; height: 34px; border-radius: 10px; place-items: center; background: var(--delft-zacht); color: var(--delft); flex: none; }
.kpi-icoon svg { width: 18px; height: 18px; }
.kpi-icoon.geel { background: var(--deurgeel-zacht); color: var(--let-op); }
.kpi-icoon.groen { background: var(--kans-zacht); color: var(--kans); }
.kpi-icoon.oranje { background: var(--let-op-zacht); color: var(--let-op); }
.kpi-waarde { font-family: var(--f-display); color: var(--inkt); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-waarde small { font-size: .95rem; font-weight: 600; color: var(--zacht); letter-spacing: 0; }
.kpi-sub { font-size: .8rem; color: var(--zacht); }

/* Kaart van Nederland (cartogram) */
.nl-kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 640px) { .nl-kaart { grid-template-columns: minmax(0, 1fr); } }
.cartogram { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; aspect-ratio: 4 / 5; }
.prov {
  border: 0; cursor: pointer; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  background: var(--vlak-2); color: var(--inkt); transition: transform .15s, box-shadow .15s; position: relative; min-width: 0;
}
.prov .p-naam { font-size: .66rem; font-weight: 700; line-height: 1.15; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.prov .p-getal { font-family: var(--f-display); line-height: 1; }
.prov.t1 { background: color-mix(in srgb, var(--delft) 14%, var(--vlak)); }
.prov.t2 { background: color-mix(in srgb, var(--delft) 32%, var(--vlak)); }
.prov.t3 { background: color-mix(in srgb, var(--delft) 55%, var(--vlak)); color: #fff; }
.prov.t4 { background: color-mix(in srgb, var(--delft) 80%, var(--vlak)); color: #fff; }
.legenda { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--zacht); margin-top: 10px; flex-wrap: wrap; }
.legenda i { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
.prov-detail { display: grid; gap: 10px; align-content: start; }
.site-regel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--lijn); color: var(--tekst); background: var(--vlak); }
.site-regel:hover { border-color: color-mix(in srgb, var(--delft) 45%, var(--lijn)); text-decoration: none; background: var(--vlak-2); }
.site-regel b { color: var(--inkt); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-regel .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--inkt); }

/* Lijst sluit binnenkort */
.deadline { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.deadline:last-child { border-bottom: 0; }
.deadline .mini-gevel { width: 52px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--lucht); }
.deadline .mini-gevel svg { width: 100%; height: 100%; display: block; }
.deadline b { color: var(--inkt); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.aftel { font-family: var(--f-cijfer); font-size: .78rem; font-weight: 600; padding: 4px 8px; background: var(--vlak-2); color: var(--inkt); white-space: nowrap; }
.aftel.dringend { background: var(--let-op-zacht); color: var(--let-op); }

/* Grafieken */
.grafiek svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafiek text { fill: var(--zacht); font-family: var(--f-tekst); font-size: 11px; }
.grafiek .lbl { fill: var(--tekst); font-weight: 600; }
.grafiek .waarde { fill: var(--inkt); font-weight: 700; font-family: var(--f-cijfer); font-size: 10.5px; }
.grafiek .raster-lijn { stroke: var(--lijn); stroke-width: 1; }
.grafiek .balk.zacht { fill: color-mix(in srgb, var(--delft) 35%, var(--vlak)); }
.grafiek a:hover .balk { filter: brightness(1.15); }

/* Tabel */
.tabel-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--zacht); padding: 12px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak); position: sticky; top: 0; white-space: nowrap; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
th button:focus-visible { outline: 2px solid var(--delft); border-radius: 4px; }
td { padding: 12px 14px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--vlak-2); }
tbody tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.site-cel { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.monogram { width: 36px; height: 36px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; color: #fff; }
.meter { height: 6px; background: var(--vlak-3); overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; }
.meter i { display: block; height: 100%; background: var(--delft); }

/* Filters */
.filterbalk { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.veld { display: grid; gap: 5px; min-width: 0; }
.veld > span, .veld > label { font-size: .74rem; font-weight: 700; color: var(--zacht); letter-spacing: .02em; }
.invoer, select.invoer {
  font: inherit; color: var(--tekst); background: var(--vlak); border: 1px solid var(--lijn); padding: 9px 12px; width: 100%; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.invoer:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--delft) 18%, transparent); }
.segment { display: inline-flex; background: var(--vlak-2); padding: 3px; gap: 2px; flex-wrap: wrap; }
.segment button { border: 0; background: transparent; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: .84rem; color: var(--zacht); }
.segment button[aria-pressed="true"] { background: var(--vlak); color: var(--inkt); box-shadow: 0 1px 3px rgba(14,26,51,.12); }
.schakel { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: .88rem; font-weight: 550; user-select: none; }
.schakel input { appearance: none; width: 36px; height: 21px; border-radius: 999px; background: var(--vlak-3); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.schakel input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: translate .15s; }
.schakel input:checked { background: var(--delft); }
.schakel input:checked::after { translate: 15px 0; }
.schakel input:disabled { opacity: .45; cursor: not-allowed; }

/* Woningen */
.woningen-indeling { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.filterpaneel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 82px); max-height: calc(100vh - 100px); overflow: auto; }
.filterpaneel .paneel-in { display: grid; gap: 16px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filter-open { display: none; }
@media (max-width: 1000px) {
  .woningen-indeling { grid-template-columns: minmax(0, 1fr); }
  .filterpaneel { position: static; max-height: none; }
  .filterpaneel.dicht { display: none; }
  .filter-open { display: inline-flex; }
}
.woning-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; }
.woning { display: flex; flex-direction: column; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.woning:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hoog); }
.woning-beeld { position: relative; aspect-ratio: 16 / 10; background: var(--lucht); max-width: 100%; }
.woning-beeld > svg { width: 100%; height: 100%; display: block; }
.woning-beeld .chips { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.woning-beeld .chip { background: color-mix(in srgb, var(--vlak) 92%, transparent); }
.woning-beeld .aftel { position: absolute; right: 10px; bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.woning-in { padding: 14px 16px 16px; display: grid; gap: 8px; flex: 1; }
.prijs { font-family: var(--f-display); font-size: 1.45rem; font-weight: 700; color: var(--inkt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prijs small { font-family: var(--f-tekst); font-size: .78rem; font-weight: 500; color: var(--zacht); letter-spacing: 0; }
.adres { font-weight: 650; color: var(--inkt); }
.specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--zacht); }
.specs span { display: inline-flex; align-items: center; gap: 5px; }
.specs svg { width: 15px; height: 15px; }
.woning-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--lijn); }
.passend-balk { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 650; }

/* Kansencheck */
.kans-indeling { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 980px) { .kans-indeling { grid-template-columns: minmax(0, 1fr); } }
.form-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stepper { display: flex; align-items: center; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--vlak); }
.stepper button { border: 0; background: var(--vlak-2); width: 40px; height: 40px; cursor: pointer; font-size: 1.1rem; font-weight: 700; color: var(--inkt); flex: none; }
.stepper input { border: 0; text-align: center; width: 100%; min-width: 0; font: inherit; font-weight: 650; background: transparent; color: var(--inkt); }
.prov-kiezer { display: flex; flex-wrap: wrap; gap: 6px; }
.prov-kiezer button { border: 1px solid var(--lijn); background: var(--vlak); border-radius: 999px; padding: 6px 11px; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--zacht); }
.prov-kiezer button[aria-pressed="true"] { background: var(--delft); border-color: var(--delft); color: var(--op-delft); }
.oordeel { display: flex; gap: 16px; align-items: flex-start; padding: 22px; }
.oordeel.ja { background: var(--kans-zacht); }
.oordeel.nee { background: var(--nee-zacht); }
.oordeel-icoon { width: 46px; height: 46px; display: grid; place-items: center; flex: none; color: #fff; }
.oordeel.ja .oordeel-icoon { background: var(--kans); }
.oordeel.nee .oordeel-icoon { background: var(--nee); }
.oordeel h2 { font-size: 1.25rem; }
.schaal { position: relative; padding-top: 34px; padding-bottom: 40px; }
.schaal-baan { height: 14px; border-radius: 999px; display: flex; overflow: hidden; }
.schaal-baan i { display: block; height: 100%; }
.schaal-pin { position: absolute; top: 0; translate: -50% 0; display: grid; justify-items: center; gap: 3px; transition: left .5s cubic-bezier(.2,.8,.2,1); }
.schaal-pin b { background: var(--inkt); color: var(--bg); font-size: .75rem; padding: 3px 8px; border-radius: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.schaal-pin::after { content: ""; width: 3px; height: 26px; background: var(--inkt); border-radius: 2px; }
.schaal-merk { position: absolute; bottom: 0; translate: -50% 0; font-size: .7rem; color: var(--zacht); text-align: center; white-space: nowrap; }
.schaal-merk::before { content: ""; display: block; width: 1px; height: 10px; background: var(--zacht); margin: 0 auto 3px; }
.huurlat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .huurlat { grid-template-columns: minmax(0, 1fr); } .form-raster { grid-template-columns: minmax(0, 1fr); } }
.huurvak { border-radius: 12px; padding: 14px; border: 1px solid var(--lijn); }
.huurvak.actief { border-color: var(--delft); background: var(--delft-zacht); }
.huurvak .bedrag { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: var(--inkt); font-variant-numeric: tabular-nums; }

/* Site-detail */
.site-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
@media (max-width: 700px) { .site-hero { grid-template-columns: auto minmax(0, 1fr); } .site-hero .knop { grid-column: 1 / -1; } }
.site-hero .monogram { width: 64px; height: 64px; border-radius: 18px; font-size: 1.3rem; }
.regel { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.regel:last-child { border-bottom: 0; }
.regel-icoon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--delft-zacht); color: var(--delft); }
.regel-icoon svg { width: 15px; height: 15px; }
.bron { font-size: .76rem; color: var(--zacht); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.bron a { color: var(--zacht); text-decoration: underline; text-decoration-color: var(--lijn); text-underline-offset: 2px; }
.open-lijst { display: grid; gap: 8px; }
.open-lijst div { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--zacht); }
.open-lijst svg { width: 16px; height: 16px; color: var(--let-op); flex: none; }

/* Uitleg */
.modellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.model { padding: 20px; display: grid; gap: 10px; align-content: start; }
.model-icoon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--delft-zacht); color: var(--delft); }
.model-icoon svg { width: 22px; height: 22px; }
.stappen { display: grid; gap: 0; counter-reset: stap; }
.stap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 22px; }
.stap::before { counter-increment: stap; content: counter(stap); width: 40px; height: 40px; border-radius: 50%; background: var(--delft); color: var(--op-delft); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; z-index: 1; }
.stap::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--lijn); }
.stap:last-child::after { display: none; }
.stap h3 { margin-top: 9px; }

.melding { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--deurgeel-zacht); border: 1px solid color-mix(in srgb, var(--deurgeel) 45%, transparent); font-size: .88rem; }
.melding svg { width: 18px; height: 18px; flex: none; color: var(--let-op); margin-top: 2px; }
.melding.blauw { background: var(--delft-zacht); border-color: color-mix(in srgb, var(--delft) 30%, transparent); }
.melding.blauw svg { color: var(--delft); }
.melding.goed { background: color-mix(in srgb, var(--kans) 12%, var(--vlak)); border-color: color-mix(in srgb, var(--kans) 35%, transparent); }
.paginakop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.paginakop p { color: var(--zacht); margin-top: 6px; max-width: 70ch; }
.leegte { padding: 48px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; color: var(--zacht); }
.leegte svg { width: 64px; height: 64px; color: var(--lijn); }

.view { animation: in .35s ease-out both; }
@keyframes in { from { transform: translateY(6px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Mijn zoektocht, vergelijken, kaartknoppen */
.nav-teller { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; font-size: .7rem; font-weight: 800; display: inline-grid; place-items: center; }
.nav-teller:empty, .nav-teller[hidden] { display: none; }
.woning-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.ikoonknop {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--zacht); padding: 5px 9px; font-size: .76rem; font-weight: 650; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.ikoonknop svg { width: 14px; height: 14px; }
.ikoonknop:hover { background: var(--vlak-2); color: var(--inkt); }
.ikoonknop.aan { background: var(--delft-zacht); border-color: color-mix(in srgb, var(--delft) 40%, transparent); color: var(--delft); }
.ikoonknop.aan[data-fav] { background: var(--nee-zacht); border-color: color-mix(in srgb, var(--nee) 35%, transparent); color: var(--nee); }
.ikoonknop.aan[data-fav] svg { fill: currentColor; }
.ikoonknop.aan[data-gereageerd] { background: var(--kans-zacht); border-color: color-mix(in srgb, var(--kans) 35%, transparent); color: var(--kans); }
.vergelijkbalk {
  position: fixed; z-index: 45; left: 50%; translate: -50% 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px; background: var(--inkt); color: var(--bg); padding: 8px 8px 8px 16px; border-radius: 14px; box-shadow: var(--schaduw-hoog);
  font-size: .88rem; max-width: calc(100vw - 32px); white-space: nowrap;
}
.vergelijkbalk svg { width: 16px; height: 16px; vertical-align: -3px; }
.vergelijkbalk .ikoonknop { background: transparent; border-color: color-mix(in srgb, var(--bg) 25%, transparent); color: var(--bg); }
@media (max-width: 900px) { .vergelijkbalk { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 901px) { .vergelijkbalk { left: calc(50% + var(--zijbalk) / 2); } }
.vergelijk-tabel td { vertical-align: top; }
.tabbalk a { position: relative; }

/* Brede schermen */
@media (min-width: 1600px) {
  body { font-size: 15.5px; }
  .woningen-indeling { grid-template-columns: 310px minmax(0, 1fr); }
  .woning-raster { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .hero { padding: 40px 44px; }
}
@media (min-width: 2200px) {
  :root { --zijbalk: 272px; }
  body { font-size: 16.5px; }
  .inhoud { max-width: 2100px; }
}

.cartogram { max-width: 440px; }
@media (min-width: 1600px) { .nl-kaart { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } }

/* Functies per site, wachttijdmeter, status, checklists, linkcheck */
.functie-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; margin-bottom: 10px; }
.functie { display: flex; gap: 8px; align-items: center; padding: 9px 11px; border-radius: 10px; background: var(--vlak-2); color: var(--zacht); font-size: .86rem; }
.functie svg { width: 16px; height: 16px; flex: none; }
.functie.aan { background: var(--kans-zacht); color: var(--inkt); }
.functie.aan svg { color: var(--kans); }
.wachtmeter { display: grid; gap: 4px; min-width: 180px; }
.wachtmeter .meter { width: 100%; height: 8px; }
.mini-invoer { width: 70px; padding: 4px 8px; font-size: .8rem; border-radius: 7px; }
.status-select { padding: 4px 8px; font-size: .78rem; border-radius: 7px; width: auto; }
.checklist { display: grid; gap: 6px; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: .9rem; }
.checklist label:hover { background: var(--vlak-2); }
.checklist input { margin-top: 3px; accent-color: var(--kans); width: 16px; height: 16px; flex: none; }
.checklist input:checked + span { color: var(--zacht); text-decoration: line-through; }
.linkcheck-uit { padding: 14px 16px; border-radius: 12px; display: flex; gap: 12px; align-items: flex-start; }
.linkcheck-uit svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.linkcheck-uit.ok { background: var(--kans-zacht); } .linkcheck-uit.ok svg { color: var(--kans); }
.linkcheck-uit.nee { background: var(--nee-zacht); } .linkcheck-uit.nee svg { color: var(--nee); }
.linkcheck-uit.twijfel { background: var(--let-op-zacht); } .linkcheck-uit.twijfel svg { color: var(--let-op); }
.prijsoordeel { font-size: .74rem; font-weight: 700; }
.matrix td, .matrix th { text-align: center; } .matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix .ja { color: var(--kans); font-weight: 800; } .matrix .nee { color: var(--zacht); } .matrix .deels { color: var(--let-op); font-weight: 700; }
.matrix th.wij, .matrix td.wij { background: var(--delft-zacht); }

.bron svg { width: 13px; height: 13px; flex: none; }
.regel-icoon svg, .open-lijst svg, .model-icoon svg, .melding svg { flex: none; }

/* Na onderzoek webgedrag (reports/Webgedrag en afhaken voorkomen.md) */
.mini { font-size: .8rem; }
.statusblok { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 20px 22px; }
.status-zin { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; color: var(--inkt); margin: 4px 0 2px; letter-spacing: -.01em; }
.conclusie { font-size: .95rem; color: var(--tekst); margin: 0 0 12px; max-width: 70ch; }
.conclusie b { color: var(--inkt); }

/* ═════ uit publiek.css ═════ */
/* Publiek deel: voorkant, registreren/inloggen, startwizard. Bouwt op de tokens uit app.css. */
.pub { min-height: 100vh; background: var(--bg); }
.pub-wrap { max-width: 1240px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Navigatie */
.pub-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.pub-nav .pub-wrap { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.pub-logo { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; color: var(--inkt); }
.pub-logo:hover { text-decoration: none; }
.pub-logo .merk-teken { width: 36px; height: 36px; display: grid; place-items: center; }
.pub-links { display: flex; gap: 4px; margin-left: 12px; }
.pub-links button { background: none; border: 0; cursor: pointer; padding: 8px 12px; font-size: .92rem; }
.pub-links button:hover { color: var(--inkt); background: var(--vlak-2); }
.pub-acties { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.knop.omlijnd { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.knop.omlijnd:hover { box-shadow: inset 0 0 0 1.5px var(--zacht); }
@media (max-width: 880px) { .pub-acties .knop.omlijnd { padding: 9px 12px; } }

/* Hero */
.pub-hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
.pub-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--delft) 14%, transparent), transparent 65%); pointer-events: none; }
.pub-hero .pub-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; }
@media (max-width: 960px) { .pub-hero .pub-wrap { grid-template-columns: minmax(0, 1fr); } }
.aankondiging { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); font-size: .85rem; font-weight: 600; color: var(--tekst); box-shadow: var(--schaduw); }
.aankondiging b { background: var(--deurgeel); color: #2a1d02; border-radius: 999px; padding: 3px 10px; font-size: .75rem; }
.pub-h1 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); line-height: 1.02; letter-spacing: -.035em; margin-top: 22px; font-weight: 700; }
.pub-h1 em { font-style: normal; color: var(--delft); position: relative; white-space: nowrap; }
.pub-h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .2em; background: color-mix(in srgb, var(--deurgeel) 70%, transparent); z-index: -1; border-radius: 4px; }
.pub-lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; }
.pub-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.vinkrij { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: .88rem; font-weight: 600; color: var(--tekst); }
.vinkrij span { display: inline-flex; align-items: center; gap: 7px; }
.vinkrij svg { width: 18px; height: 18px; color: var(--kans); background: var(--kans-zacht); border-radius: 50%; padding: 3px; }

.hero-beeld { position: relative; aspect-ratio: 4 / 4.4; max-width: 100%; }
.hero-foto { position: absolute; inset: 0 0 0 8%; border-radius: 28px; overflow: hidden; box-shadow: var(--schaduw-hoog); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 18, 40, .45)); }
.zweef { position: absolute; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; box-shadow: var(--schaduw-hoog); padding: 14px 16px; display: grid; gap: 6px; min-width: 210px; animation: zweef 6s ease-in-out infinite; }
.zweef .eyebrow { font-size: .64rem; }
.zweef b { font-family: var(--f-display); color: var(--inkt); font-size: 1.15rem; letter-spacing: -.02em; }
.zweef .meter { width: 100%; height: 7px; }
.zweef-1 { left: 0; top: 12%; }
.zweef-2 { right: -4%; top: 44%; animation-delay: -2s; }
.zweef-3 { left: 4%; bottom: 7%; animation-delay: -4s; }
.zweef-rij { display: flex; align-items: center; gap: 10px; }
.zweef-icoon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.zweef-icoon svg { width: 18px; height: 18px; }
@keyframes zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 560px) { .zweef { min-width: 0; padding: 10px 12px; } .zweef-2 { right: 0; } .hero-foto { inset: 0; } }

/* Bronnenbalk */
.bronbalk { border-block: 1px solid var(--lijn); }
.bronbalk .pub-wrap { display: flex; align-items: center; gap: 14px 34px; flex-wrap: wrap; padding-block: 22px; justify-content: center; }
.bronbalk .eyebrow { margin-right: 6px; }
.woordmerk { font-size: 1.02rem; letter-spacing: -.01em; }

/* Secties */
.sectie { padding-block: clamp(56px, 8vw, 110px); }
.sectie-kop { max-width: 760px; margin-bottom: 40px; }
.sectie-kop.midden { margin-inline: auto; text-align: center; }
.sectie-kop h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.sectie-kop p { font-size: 1.08rem; margin-top: 14px; }
.pijn { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .pijn { grid-template-columns: minmax(0, 1fr); } }
.pijn-kaart { padding: 28px; border-radius: 22px; background: var(--vlak); border: 1px solid var(--lijn); display: grid; gap: 10px; align-content: start; }
.pijn-kaart.groot { background: var(--delft-diep); color: #c9d4fb; border: 0; position: relative; overflow: hidden; }
.pijn-kaart.groot::after { content: ""; position: absolute; inset: 0; background-image: var(--tegel); background-size: 64px; opacity: .06; }
.pijn-getal { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.6rem); letter-spacing: -.04em; line-height: 1; color: var(--inkt); }
.pijn-kaart.groot .pijn-getal { color: var(--deurgeel); }
.pijn-kaart.groot p { color: #c9d4fb; }
.pijn-kaart.groot .bron a, .pijn-kaart.groot .bron { color: #9fb0ee; }

.fotoband { position: relative; overflow: hidden; display: grid; align-items: end; }
.fotoband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fotoband::before { content: ""; position: absolute; inset: 0; }
.fotoband-in { position: relative; padding: clamp(28px, 5vw, 56px); max-width: 640px; color: #e3e9ff; display: grid; gap: 14px; }
.fotoband-in h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.fotocredit { right: 14px; bottom: 10px; font-size: .68rem; color: rgba(255,255,255,.75); }
.fotocredit a { color: inherit; }

/* Functies (bento) */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.bento > * { grid-column: span 2; }
.bento > .breed { grid-column: span 3; }
@media (max-width: 960px) { .bento > *, .bento > .breed { grid-column: span 3; } }
@media (max-width: 640px) { .bento > *, .bento > .breed { grid-column: span 6; } }
.bento-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 22px; padding: 24px; display: grid; gap: 12px; align-content: start; transition: transform .2s, box-shadow .2s; }
.bento-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-hoog); }
.bento-kaart h3 { font-size: 1.18rem; }
.bento-kaart p { color: var(--zacht); font-size: .95rem; }
.bento-icoon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--delft-zacht); color: var(--delft); }
.bento-icoon svg { width: 22px; height: 22px; }
.mini-ui { background: var(--vlak-2); border-radius: 14px; padding: 14px; display: grid; gap: 8px; font-size: .82rem; margin-top: 4px; }
.mini-ui .rij { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mini-ui b { color: var(--inkt); }

/* Mini kansencheck */
.proef { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--schaduw-hoog); background: var(--vlak); }
@media (max-width: 900px) { .proef { grid-template-columns: minmax(0, 1fr); } }
.proef-links { padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; align-content: start; }
.proef-rechts { padding: clamp(24px, 4vw, 44px); color: #c9d4fb; display: grid; gap: 14px; align-content: start; position: relative; overflow: hidden; }
.proef-rechts::after { content: ""; position: absolute; inset: 0; background-image: var(--tegel); background-size: 64px; opacity: .06; pointer-events: none; }
.proef-rechts h3 { color: #fff; font-size: 1.4rem; }
.proef-uitkomst { display: grid; gap: 10px; position: relative; z-index: 1; }
.proef-regel { display: flex; gap: 12px; align-items: center; border: 1px solid rgba(255,255,255,.1); padding: 12px 14px; transition: background .3s; }
.proef-regel svg { width: 20px; height: 20px; flex: none; }
.proef-regel .groot { color: #fff; font-size: 1.3rem; }
.groot-bedrag { font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 700; color: var(--inkt); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
input[type="range"].schuif { width: 100%; height: 28px; }

/* Stappen */
.stap3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: s; }
@media (max-width: 860px) { .stap3 { grid-template-columns: minmax(0, 1fr); } }
.stap3 > div { display: grid; gap: 10px; align-content: start; }
.stap3 > div::before { counter-increment: s; content: counter(s); display: grid; place-items: center; font-size: 1.2rem; }
.stap3 p { color: var(--zacht); }

/* Nieuws */
.nieuws { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 960px) { .nieuws { grid-template-columns: minmax(0, 1fr); } }
.nieuws-groot { position: relative; overflow: hidden; min-height: 460px; display: grid; align-items: end; color: #fff; }
.nieuws-groot:hover { text-decoration: none; }
.nieuws-groot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.nieuws-groot:hover img { transform: scale(1.04); }
.nieuws-groot::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.nieuws-groot-in { position: relative; z-index: 2; padding: 28px; display: grid; gap: 10px; }
.nieuws-groot h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; }
.nieuws-groot p { color: #d8e0f7; }
.nieuws-lijst { display: grid; gap: 12px; align-content: start; }
.nieuws-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; color: var(--tekst); transition: border-color .15s, transform .15s; }
.nieuws-item:hover { text-decoration: none; }
.nieuws-thumb { width: 92px; height: 78px; overflow: hidden; display: grid; place-items: center; }
.nieuws-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nieuws-thumb svg { width: 28px; height: 28px; }
.nieuws-item h4 { line-height: 1.3; margin: 4px 0; color: var(--inkt); letter-spacing: -.01em; }
.nieuws-meta { font-size: .74rem; color: var(--zacht); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nieuws-meer { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 18px; }

/* Eerlijk + FAQ */
.belofte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 760px) { .belofte { grid-template-columns: minmax(0, 1fr); } }
.belofte > div { display: grid; gap: 12px; align-content: start; }
.belofte ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.belofte li { display: flex; gap: 12px; align-items: flex-start; }
.belofte li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.faq { margin-inline: auto; display: grid; gap: 10px; }
.faq details { padding: 0; }
.faq summary { list-style: none; cursor: pointer; color: var(--inkt); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--delft); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--zacht); }

.slot { position: relative; border-radius: 30px; overflow: hidden; padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 72px); color: #fff; display: grid; gap: 18px; justify-items: start; box-shadow: var(--schaduw-hoog); }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 38, 110, .95), rgba(18, 38, 110, .6) 60%, rgba(18, 38, 110, .25)); }
.slot > *:not(img) { position: relative; }
.slot h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.03em; max-width: 18ch; }
.slot p { color: #d4ddfb; max-width: 52ch; font-size: 1.08rem; }

.pub-voet { padding-block: 48px 40px; }
.pub-voet-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 800px) { .pub-voet-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pub-voet h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--f-tekst); margin-bottom: 10px; }
.pub-voet a, .pub-voet button.link { display: block; font-size: .92rem; padding: 3px 0; background: none; border: 0; cursor: pointer; text-align: left; }
.pub-voet small { display: block; margin-top: 28px; font-size: .78rem; line-height: 1.6; }

/* Auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth-beeld { display: none; } }
.auth-form { display: grid; align-content: center; justify-items: center; padding-block: 40px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.auth-kaart { width: min(100%, 440px); display: grid; gap: 18px; }
.auth-kaart h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); letter-spacing: -.03em; }
.auth-kaart .veld > span { font-size: .8rem; }
.auth-kaart .invoer { padding: 12px 14px; font-size: 1rem; border-radius: 12px; }
.wachtwoord-veld { position: relative; }
.wachtwoord-veld button { position: absolute; right: 8px; top: 50%; translate: 0 -50%; background: none; border: 0; cursor: pointer; color: var(--zacht); font-size: .8rem; font-weight: 700; padding: 6px; }
.sterkte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.sterkte i { height: 5px; border-radius: 3px; background: var(--vlak-3); transition: background .25s; }
.foutmelding { color: var(--nee); font-size: .86rem; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.foutmelding svg { width: 16px; height: 16px; }
.auth-beeld { position: relative; overflow: hidden; }
.auth-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.auth-beeld::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 26, 80, .2), rgba(12, 26, 80, .9)); z-index: 1; }
.auth-beeld-in { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 48px; color: #fff; display: grid; gap: 16px; }
.auth-beeld-in h2 { color: #fff; font-size: 2rem; letter-spacing: -.03em; max-width: 20ch; }
.auth-voordelen { display: grid; gap: 10px; }
.auth-voordelen div { display: flex; gap: 10px; align-items: center; color: #dbe3fb; }
.auth-voordelen svg { width: 20px; height: 20px; flex: none; }
.laden { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: draai .7s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.scheiding { display: flex; align-items: center; gap: 12px; color: var(--zacht); font-size: .8rem; }
.scheiding::before, .scheiding::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }

/* Startwizard */
.wizard { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.wizard-kop { border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.wizard-kop .pub-wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.voortgang { flex: 1; height: 8px; background: var(--vlak-3); overflow: hidden; max-width: 520px; margin-left: auto; }
.voortgang i { display: block; height: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.wizard-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; padding-block: clamp(28px, 5vw, 60px); align-items: start; }
@media (max-width: 960px) { .wizard-body { grid-template-columns: minmax(0, 1fr); } }
.wizard-stap { display: grid; gap: 22px; max-width: 640px; animation: in .4s ease-out both; }
.wizard-stap h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; }
.wizard-stap > p { color: var(--zacht); font-size: 1.05rem; }
.wizard-knoppen { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.keuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.keuze { border: 1.5px solid var(--lijn); background: var(--vlak); border-radius: 14px; padding: 14px; text-align: left; cursor: pointer; display: grid; gap: 4px; transition: border-color .15s, background .15s, transform .12s; color: var(--tekst); }
.keuze:hover { border-color: color-mix(in srgb, var(--delft) 45%, var(--lijn)); transform: translateY(-1px); }
.keuze b { color: var(--inkt); font-size: .95rem; }
.keuze span { font-size: .78rem; color: var(--zacht); }
.ins-lijst { display: grid; gap: 8px; }
.ins-rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--lijn); border-radius: 14px; background: var(--vlak); }
.ins-rij input[type="date"] { width: 160px; }
.samenvat { position: sticky; top: 90px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 22px; padding: 22px; box-shadow: var(--schaduw); display: grid; gap: 14px; }
.samenvat-rij { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; padding-bottom: 10px; border-bottom: 1px dashed var(--lijn); }
.samenvat-rij:last-child { border-bottom: 0; padding-bottom: 0; }
.samenvat-rij b { color: var(--inkt); text-align: right; }
.samenvat-rij.leeg b { color: var(--zacht); font-weight: 500; }
.compleet { display: flex; align-items: center; gap: 12px; }
.ring { width: 54px; height: 54px; flex: none; }
.ring circle { fill: none; stroke-width: 6; }
.ring .bg { stroke: var(--vlak-3); }
.ring .vg { stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); transform: rotate(-90deg); transform-origin: 50% 50%; }
.feest { display: grid; gap: 26px; justify-items: center; text-align: center; padding-block: 40px; animation: in .5s ease-out both; }
.feest-badge { width: 92px; height: 92px; border-radius: 28px; background: var(--kans); display: grid; place-items: center; color: #fff; box-shadow: 0 18px 40px -16px var(--kans); animation: plop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.feest-badge svg { width: 46px; height: 46px; }
@keyframes plop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.feest h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; max-width: 20ch; }
.inzicht { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(100%, 980px); text-align: left; }
@media (max-width: 860px) { .inzicht { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inzicht > div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 18px; padding: 18px; display: grid; gap: 6px; animation: in .5s ease-out both; }
.inzicht > div:nth-child(2) { animation-delay: .1s; } .inzicht > div:nth-child(3) { animation-delay: .2s; } .inzicht > div:nth-child(4) { animation-delay: .3s; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

/* Account-chip in portaal */
.gebruiker { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.gebruiker-naam { min-width: 0; font-size: .82rem; line-height: 1.3; }
.gebruiker-naam b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gebruiker button { margin-left: auto; background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 8px; }
.gebruiker button svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .zweef { animation: none; } }

/* Fixes na visuele controle */
.fotoband img, .slot img { z-index: 0; }
.fotoband::before, .slot::before { z-index: 1; }
.fotoband-in, .slot > *:not(img), .fotocredit { position: relative; z-index: 2; }
.fotocredit { position: absolute; }
@media (max-width: 520px) {
  .pub-nav .pub-wrap { gap: 10px; }
  .pub-nav .pub-logo { font-size: 0; gap: 0; }
  .pub-nav .pub-logo .merk-teken { font-size: 1rem; }
  .pub-acties .knop { padding: 8px 11px; font-size: .82rem; white-space: nowrap; }
}
@media (max-width: 900px) { .auth-form { align-content: start; padding-top: 32px; } }

/* Na onderzoek webgedrag */
.pub-sublinks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; }
.tekstlink { background: none; border: 0; padding: 4px 0; min-height: 32px; cursor: pointer; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; }
.tekstlink:hover { text-decoration-color: currentColor; }
.waarom { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--zacht); background: var(--vlak-2); padding: 12px 14px; margin: 0; }
.waarom svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.veld-hint { font-size: .8rem; color: var(--zacht); }
.veld-ok { font-size: .8rem; color: var(--kans); font-weight: 650; display: flex; gap: 5px; align-items: center; }
.veld-ok svg { width: 14px; height: 14px; }
.invoer.fout { border-color: var(--nee); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nee) 15%, transparent); }

.pub-h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }

/* ───── Woonlasten-check en nieuwe voorkantblokken (11-WEBSITE-INDELING §4.1, §4.3) ───── */
.pub-links a { text-decoration: none; font: inherit; }
.pub-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.w-drie-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .w-drie-raster { grid-template-columns: minmax(0, 1fr); } }
.w-drie-blok { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 22px; display: grid; gap: 8px; align-content: start; }
.w-drie-blok > svg { width: 28px; height: 28px; color: var(--delft); }
.w-drie-blok h3 { margin: 0; }
.w-drie-blok p { margin: 0; color: var(--zacht); }
.w-drie-blok .tekstlink { justify-self: start; }
.w-nietzijn { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: var(--r); background: var(--delft-zacht); color: var(--inkt); }
.w-nietzijn svg { width: 22px; height: 22px; flex: none; color: var(--delft); margin-top: 2px; }

.wl-kop { padding-block: clamp(36px, 6vw, 72px) 12px; }
.wl-kop h1 { margin: 6px 0 10px; }
.wl-snel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wl-snel a { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); text-decoration: none; font-weight: 600; }
.wl-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-block: 18px 30px; }
@media (max-width: 860px) { .wl-raster { grid-template-columns: minmax(0, 1fr); } }
.wl-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r); padding: 22px; display: grid; gap: 14px; align-content: start; scroll-margin-top: 90px; }
.wl-kaart h2 { display: flex; gap: 10px; align-items: center; font-size: 1.2rem; margin: 0; }
.wl-kaart h2 svg { width: 24px; height: 24px; color: var(--delft); flex: none; }
.wl-kaart p { margin: 0; }
.wl-vraag { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-vraag legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.wl-vraag .segment button { min-height: 44px; padding-inline: 16px; }
.wl-bedragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .wl-bedragen { grid-template-columns: minmax(0, 1fr); } }
.wl-uit { display: grid; gap: 10px; }
.wl-uit:empty { display: none; }
.wl-uitslag { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-klein); border: 1px solid var(--lijn); }
.wl-uitslag p { margin: 4px 0 0; }
.wl-uitslag.goed { background: var(--kans-zacht); }
.wl-uitslag.let { background: var(--let-op-zacht); }
.wl-uitslag.vraag { background: var(--delft-zacht); }
.wl-teken { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--delft); }
.wl-uitslag.goed .wl-teken { background: var(--kans); }
.wl-uitslag.let .wl-teken { background: var(--let-op); }
.wl-hulplijst { display: grid; gap: 8px; margin-top: 10px; }
.wl-hulp { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-klein); background: var(--vlak); border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; }
.wl-hulp span { color: var(--zacht); font-size: .9rem; }
.wl-cijfer a { color: inherit; }
.wl-wacht { display: grid; gap: 10px; align-content: start; min-width: min(100%, 320px); }

/* ═════ uit stijl.css ═════ */
/* ─────────────────────────────────────────────────────────────────────────────
   Huurpad — huisstijl "Paleis voor de woningzoeker"
   Art direction: Amsterdamse School (Het Schip, 1919–1921: sociale woningbouw voor woningbouwvereniging
   Eigen Haard) op een streng raster in de geest van Crouwel / Total Design.
   - Kleur: baksteen + Amsterdams kozijngroen op kalkwit. Geen overheidsblauw, geen NS-geel.
   - Letter: één familie, IBM Plex (mede getekend door de Nederlandse foundry Bold Monday). Condensed voor
     koppen en cijfers ("huisnummers"), Sans voor tekst, Mono voor labels.
   - Vorm: lijnen in plaats van schaduwen, hoeken 2–6px, geen zwevende kaarten, geen badges.
   - Bron: onderbouwing/reports/Ontwerp dat niet op AI lijkt.md
   Deze laag overschrijft app.css en publiek.css.
   ───────────────────────────────────────────────────────────────────────────── */
:root {          /* kalkwit */
  --vlak: #ffffff;
  --vlak-3: #dfdfd8;
  --tekst: #25282b;
  --zacht: #5b5f64;
  --lijn: #d6d6cf;
  --lijn-sterk: #16181a;
  --delft: #2f5d50;       /* rustig kozijngroen (accent, was baksteenrood: "rood ziet er gevaarlijk uit", Younes 11-11-2026) */
  --delft-zacht: #e4ede8;
  --delft-diep: #1e3a31;  /* Amsterdams kozijngroen: donkere vlakken */
  --groen-licht: #d9e4dd;
  --deurgeel: #e9b44c;    /* licht achter het raam — alleen voor "aan" */
  --deurgeel-zacht: #f8edd6;
  --kans: #2e6a4e; --kans-zacht: #dcebe2;
  --let-op: #9a5a12; --let-op-zacht: #f6e8d4;
  --nee: #a3372e; --nee-zacht: #f6e0dc;
  --muur-1: #a3432a; --muur-2: #8a3722; --muur-3: #b9583c;
  --voeg: #e3d7cc;
  --dak: #1e3a31;
  --raam: #2b3337; --raam-licht: #f2c75c; --kozijn: #f4f4f1;
  --lucht: #e8ecec;
  --op-delft: #ffffff;
  --schaduw: none;
  --schaduw-hoog: 0 1px 0 rgba(22, 24, 26, .06), 0 18px 40px -28px rgba(22, 24, 26, .35);
  --f-display: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-tekst: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-cijfer: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease-uit: cubic-bezier(.3, .7, .4, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111312; --vlak: #181b1a; --vlak-2: #202422; --vlak-3: #2a2f2c; --tekst: #dcddd7; --zacht: #9da19c;
    --lijn: #2f3431; --lijn-sterk: #f1f1ec; --delft: #7fbfa6; --delft-zacht: #1c2d27; --delft-diep: #12251f; --groen-licht: #1f342c;
    --deurgeel: #f0c060; --deurgeel-zacht: #3a2e14; --kans: #6cc196; --kans-zacht: #173328; --let-op: #e7a65a; --let-op-zacht: #3a2810;
    --nee: #ef8a7e; --nee-zacht: #3d1d19; --muur-1: #8f3c26; --muur-2: #73301e; --muur-3: #a24c33; --voeg: #3a302a; --dak: #0c1a15;
    --raam: #1c2326; --raam-licht: #f0c060; --kozijn: #d9d6cc; --lucht: #1a1f1e; --op-delft: #111312;
    --schaduw-hoog: 0 18px 40px -28px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] { --vlak: #181b1a; --vlak-3: #2a2f2c; --tekst: #dcddd7; --zacht: #9da19c;
  --lijn: #2f3431; --lijn-sterk: #f1f1ec; --delft: #7fbfa6; --delft-zacht: #1c2d27; --delft-diep: #12251f; --groen-licht: #1f342c;
  --deurgeel: #f0c060; --deurgeel-zacht: #3a2e14; --kans: #6cc196; --kans-zacht: #173328; --let-op: #e7a65a; --let-op-zacht: #3a2810;
  --nee: #ef8a7e; --nee-zacht: #3d1d19; --muur-1: #8f3c26; --muur-2: #73301e; --muur-3: #a24c33; --voeg: #3a302a; --dak: #0c1a15;
  --raam: #1c2326; --raam-licht: #f0c060; --kozijn: #d9d6cc; --lucht: #1a1f1e; --op-delft: #111312;
  --schaduw-hoog: 0 18px 40px -28px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ───── Typografie ───── */
body { font-family: var(--f-tekst); font-size: 16px; line-height: 1.55; font-feature-settings: "kern"; background: var(--bg); color: var(--tekst); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.012em; line-height: 1.04; }
h1 { font-weight: 700; letter-spacing: -.02em; }
h3 { font-family: var(--f-tekst); font-weight: 600; letter-spacing: 0; line-height: 1.3; font-size: 1.02rem; }
p { text-wrap: pretty; }
.eyebrow { color: var(--zacht); }
.kpi-waarde, .stat, .prijs, .groot-bedrag, .pijn-getal, .p-getal, .bedrag, .status-zin b {
  font-family: var(--f-display); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum";
}
.mono, .aftel, .mini-label { font-family: var(--f-cijfer); }

/* ───── Vorm: lijnen, geen schaduwen ───── */
.paneel, .kaart, .bento-kaart, .pijn-kaart, .stap3 > div, .belofte > div, .faq details, .nieuws-item, .site-regel, .keuze, .ins-rij, .samenvat, .huurvak, .functie, .proef, .inzicht > div {
  border-radius: var(--r) !important; box-shadow: none !important;
}
.paneel { border: 1px solid var(--lijn); }
.woning:hover, .bento-kaart:hover { transform: none; box-shadow: none; border-color: var(--lijn-sterk); }
.chip { padding: 3px 7px; }
.monogram { border-radius: 3px; font-family: var(--f-display); }
.invoer, select.invoer { border-radius: 4px; border-color: var(--lijn); }
.invoer:focus { border-color: var(--lijn-sterk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inkt) 10%, transparent); }

/* ───── Knoppen (Comeau/Kowalski: indrukken 34ms naar .97, hover 150ms, ease-out) ───── */
.knop { box-shadow: none; font-family: var(--f-tekst); font-weight: 600;
  letter-spacing: .005em; min-height: 46px; padding: 11px 18px; position: relative;
  transition: background-color 150ms var(--ease-uit), color 150ms var(--ease-uit), transform 120ms var(--ease-uit);
}
.knop:hover { filter: none; transform: none; background: color-mix(in srgb, var(--inkt) 86%, var(--delft)); text-decoration: none; }
.knop:active { transform: scale(.97); transition-duration: 34ms; }
.knop svg { transition: transform 150ms var(--ease-uit); }
.knop:hover svg { transform: translateX(2px); }
.knop.geel { box-shadow: none; }
.knop.geel:hover { background: color-mix(in srgb, var(--delft) 86%, #000); }
.knop.stil, .knop.omlijnd { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn); }
.knop.stil:hover, .knop.omlijnd:hover { background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--zacht); }
.knop.klein { min-height: 36px; padding: 7px 12px; }
.knop.groot { min-height: 52px; padding: 14px 22px; font-size: 1rem; border-radius: 4px; }
.ikoonknop { border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .knop, .knop svg { transition: background-color 200ms linear; } .knop:active { transform: none; } }

/* ───── Portaal: zijbalk licht met lijn ───── */
.zijbalk { background: var(--vlak); color: var(--tekst); border-right: 1px solid var(--lijn); }
.zijbalk::after { display: none; }
.merk { color: var(--inkt); }
.merk-teken { background: var(--delft) !important; border-radius: 3px; }
.merk-naam small { color: var(--zacht); font-family: var(--f-cijfer); font-size: .64rem; letter-spacing: .03em; }
.nav a { color: var(--zacht); border-radius: 3px; font-weight: 500; }
.nav a:hover { background: var(--vlak-2); color: var(--inkt); }
.nav a[aria-current="page"] { background: var(--vlak-2); color: var(--inkt); box-shadow: none; font-weight: 600; }
.nav a[aria-current="page"] svg { color: var(--delft); }
.nav-sep { background: var(--lijn); }
.nav-teller { background: var(--delft); color: #fff; border-radius: 2px; font-family: var(--f-cijfer); }
.profielkaart { background: var(--vlak-2); border: 0; color: var(--zacht); border-radius: var(--r); }
.profielkaart strong { color: var(--inkt); }
.profielkaart a { color: var(--delft) !important; }
.gebruiker { background: transparent; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; padding: 0 0 10px; }
.gebruiker-naam { color: var(--zacht); } .gebruiker-naam b { color: var(--inkt); }
.gebruiker button { color: var(--zacht); } .gebruiker button:hover { background: var(--vlak-3); color: var(--inkt); }
.avatar { background: var(--delft); color: #fff; border-radius: 3px; }
.themaknop { border-color: var(--lijn); color: var(--zacht); border-radius: 3px; }
.themaknop:hover { background: var(--vlak-2); color: var(--inkt); }
.topbalk { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.zoek input { border-radius: 4px; }
.tabbalk a[aria-current="page"] { color: var(--delft); }

/* Portaal-hero: kozijngroen, geen tegelpatroon of gloed */
.hero { background: var(--delft-diep); border-radius: var(--r); box-shadow: none; }
.hero::before, .hero::after { display: none; }
.hero h1 { color: #f4f4f1; font-weight: 700; }
.hero h1 em { font-style: normal; }
.hero .lead { color: #c9d3cd; }
.hero .eyebrow { color: #9fb3a9; }
.hero .g-m1 { fill: #a3432a; } .hero .g-m2 { fill: #8a3722; } .hero .g-m3 { fill: #b9583c; }
.hero .g-raam-nacht { fill: #23302c; } .hero .g-deur-nacht { fill: #12251f; } .hero .g-kade { fill: #0c1a15; } .hero .g-golf { stroke: #46705f; }

/* KPI's: één strook met verticale lijnen, geen icoonvierkantjes */
.kpi-icoon { display: none !important; }
.kpis { gap: 0; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); overflow: hidden; }
.kpis > .kpi { border: 0; border-radius: 0 !important; border-right: 1px solid var(--lijn); }
.kpis > .kpi:last-child { border-right: 0; }
@media (max-width: 1100px) { .kpis > .kpi:nth-child(2n) { border-right: 0; } .kpis > .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--lijn); } }
@media (max-width: 480px) { .kpis > .kpi { border-right: 0; border-bottom: 1px solid var(--lijn); } }
.kpi-waarde { font-size: 2.6rem; font-weight: 600; letter-spacing: -.02em; }
.kpi-kop .eyebrow { font-size: .68rem; }

/* Statusregel: geen gekleurde linkerrand, maar een rustige volle band */
.statusblok { border: 0; border-left: 0; background: var(--inkt); color: var(--bg); border-radius: var(--r); box-shadow: none; }
.statusblok .eyebrow { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.statusblok .zacht { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.statusblok .knop { background: var(--delft); color: #fff; }

/* Kaart van NL en grafieken */
.prov { border-radius: 2px; }
.prov:hover { transform: none; box-shadow: inset 0 0 0 2px var(--inkt); }
.prov[aria-pressed="true"] { outline: 2px solid var(--inkt); outline-offset: 2px; }
.prov .p-getal { font-weight: 600; font-size: 1.5rem; }
.grafiek .balk { fill: var(--delft); }
.grafiek .balk.geel { fill: var(--delft-diep); }
.meter { border-radius: 1px; } .meter i { border-radius: 1px; }
.aftel { border-radius: 2px; }
.woning-beeld .chip { backdrop-filter: none; box-shadow: none; }

/* Melding / oordeel */
.melding { border-radius: var(--r); }
.oordeel { border-radius: var(--r); }
.oordeel-icoon { border-radius: 3px; }
.regel-icoon, .model-icoon, .bento-icoon { border-radius: 3px; }

/* ───── De gevel ───── */
.gevel { width: 100%; height: auto; display: block; max-width: 100%; }
.gv-voeg { fill: var(--voeg); }
.gv-steen { fill: var(--muur-1); }
.gv-steen-b { fill: var(--muur-2); }
.gv-plint { fill: var(--muur-2); }
.gv-band, .gv-lijst { fill: var(--kozijn); stroke: var(--kozijn); stroke-width: 6; }
.gv-oog-rand { fill: var(--kozijn); } .gv-oog { fill: var(--raam); }
.gv-jaartal { font-family: var(--f-cijfer); font-size: 11px; fill: var(--kozijn); letter-spacing: .2em; }
.gv-dorpel { fill: var(--kozijn); opacity: .9; }
.gv-kozijn { fill: var(--kozijn); }
.gv-glas { fill: var(--raam); transition: fill 600ms var(--ease-uit); }
.gv-roede { stroke: var(--kozijn); stroke-width: 1.6; fill: none; }
.gv-rand { fill: none; stroke: transparent; stroke-width: 3; }
.gv-raam { cursor: pointer; outline: none; }
.gv-raam.aan .gv-glas { fill: var(--raam-licht); }
.gv-raam:hover .gv-rand, .gv-raam.gekozen .gv-rand { stroke: var(--inkt); }
.gv-raam:focus-visible .gv-rand { stroke: var(--inkt); stroke-dasharray: 4 3; }
.gv-boog { fill: var(--kozijn); } .gv-deur { fill: var(--dak); } .gv-roede-deur { stroke: var(--kozijn); stroke-width: 2; }
.gv-nummer { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .04em; fill: #e3c26a; }
.gv-stoep { fill: var(--vlak-3); }
@media (prefers-reduced-motion: reduce) { .gv-glas { transition: none; } }

/* ═════ uit stijl-voorkant.css ═════ */
/* Huurpad — voorkant, inloggen en startwizard in de huisstijl "Paleis voor de woningzoeker". Komt na stijl.css. */
.pub, .pub-nav { background: var(--bg); }
.pub-nav { border-bottom: 1px solid var(--lijn); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pub-logo { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; }
.pub-logo .merk-teken { background: var(--delft); border-radius: 3px; }
.pub-links button { border-radius: 3px; font-weight: 500; color: var(--tekst); }
.kicker { margin: 0; }
.mini-label { font-family: var(--f-cijfer); font-size: .7rem; letter-spacing: .03em; color: var(--zacht); text-transform: uppercase; }

/* Hero: grote letter links, de gevel rechts */
.pub-hero2 { padding-block: clamp(32px, 6vw, 76px) clamp(36px, 6vw, 72px); border-bottom: 1px solid var(--lijn); }
.hero2-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
@media (max-width: 900px) { .hero2-raster { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.hero2-h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 8.4vw, 7.2rem); line-height: .92; letter-spacing: -.035em; color: var(--inkt); margin: 22px 0 0; hyphens: manual; }
.pub-lead { color: var(--tekst); font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 44ch; margin-top: 26px; }
.pub-cta { margin-top: 30px; }
.tekstlink { color: var(--inkt); text-decoration-color: var(--delft); text-decoration-thickness: 2px; font-weight: 600; }
.tekstlink:hover { color: var(--delft); }
.hero2-eerlijk { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: .85rem; color: var(--zacht); max-width: 56ch; }
.hero2-gevel { margin: 0; display: grid; gap: 14px; }
.hero2-gevel #hero-gevel { max-width: 460px; width: 100%; justify-self: end; }
@media (max-width: 900px) { .hero2-gevel #hero-gevel { justify-self: center; max-width: 380px; } }
.bijschrift { padding-top: 10px; display: grid; gap: 2px; min-height: 92px; }
.bijschrift b { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--inkt); line-height: 1.15; }
.bijschrift span:not(.mini-label) { font-size: .9rem; color: var(--zacht); }
.bijschrift .tekstlink { justify-self: start; min-height: 0; margin-top: 4px; font-size: .9rem; }
.bronbalk { background: transparent; border-top: 0; }
.woordmerk { font-family: var(--f-display); font-weight: 600; color: var(--zacht); opacity: 1; }

/* Secties: lijnen in plaats van kaarten */
.sectie-kop h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -.025em; font-weight: 700; line-height: .98; margin-top: 12px; }
.sectie-kop p { color: var(--tekst); }
.kop-rij { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; max-width: none; }
.feit-getal { font-family: var(--f-display); font-weight: 700; font-size: clamp(3.2rem, 6vw, 5rem); line-height: .9; letter-spacing: -.03em; color: var(--delft); font-variant-numeric: tabular-nums; }
.bronlink { font-family: var(--f-cijfer); font-size: .72rem; color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; }
.fotoband { border-radius: var(--r); box-shadow: none; min-height: 420px; }
.fotoband::before { background: linear-gradient(90deg, rgba(22, 18, 14, .86), rgba(22, 18, 14, .35) 62%, transparent); }
.fotoband-in h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em; }

.index-lijst { border-top: 2px solid var(--inkt); }
.index-rij { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.index-rij h3 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.index-rij p { color: var(--zacht); margin: 0; max-width: 52ch; }
@media (max-width: 760px) { .index-rij { grid-template-columns: minmax(0, 1fr); } }
.voetnoot { margin-top: 18px; font-size: .88rem; color: var(--zacht); max-width: 70ch; }

.proef { border: 1px solid var(--lijn); }
.proef-rechts { background: var(--delft-diep); }
.proef-rechts::after { display: none; }
.proef-regel { border-radius: 3px; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.proef-regel .groot { font-family: var(--f-display); font-weight: 600; }
input[type="range"].schuif { accent-color: var(--delft); }
.segment { border-radius: 4px; }

/* Stappen met emaille huisnummerbordjes */
.stap3 { gap: 0; border-top: 2px solid var(--inkt); }
.stap3 > div { background: transparent; border: 0; border-right: 1px solid var(--lijn); border-radius: 0 !important; padding: 24px 24px 24px 0; }
.stap3 > div + div { padding-left: 24px; }
.stap3 > div:last-child { border-right: 0; }
.stap3 > div::before { background: var(--delft-diep); color: #f4f4f1; border-radius: 3px; width: 46px; height: 34px; font-family: var(--f-display); font-weight: 700; box-shadow: inset 0 0 0 2px var(--delft-diep), inset 0 0 0 3.5px #f4f4f1; }
@media (max-width: 860px) { .stap3 > div, .stap3 > div + div { border-right: 0; border-bottom: 1px solid var(--lijn); padding-left: 0; } }

/* Nieuws */
.nieuws-groot { border-radius: var(--r); box-shadow: none; }
.nieuws-groot::before { background: linear-gradient(180deg, transparent 30%, rgba(18, 15, 12, .92)); }
.nieuws-groot h3 { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; }
.nieuws-item { border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0 !important; background: transparent; padding: 14px 0; }
.nieuws-item:hover { transform: none; border-color: var(--inkt); }
.nieuws-thumb { border-radius: 2px; background: var(--vlak-2); color: var(--zacht); }
.nieuws-item h4 { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; }
.nieuws-meta .chip { background: transparent; padding: 0; color: var(--delft); }
.datum-blok { display: grid; place-content: center; text-align: center; background: var(--delft-diep) !important; color: #f4f4f1 !important; }
.datum-blok b { font-family: var(--f-display); font-size: 1.6rem; line-height: 1; }
.datum-blok span { font-family: var(--f-cijfer); font-size: .7rem; text-transform: uppercase; }

.belofte > div { background: transparent; border: 0; border-top: 2px solid var(--inkt); border-radius: 0 !important; padding: 20px 0; }
.faq { max-width: none; margin: 0; }
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0 !important; }
.faq details:first-child { border-top: 2px solid var(--inkt); }
.faq summary { padding: 18px 0; font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; }
.faq details p { padding: 0 0 18px; max-width: 64ch; }

.slot2 { background: var(--inkt); color: var(--bg); border-radius: var(--r); padding: clamp(36px, 7vw, 88px) clamp(24px, 6vw, 72px); display: grid; gap: 18px; justify-items: start; }
.slot2 h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 5.6vw, 4.6rem); letter-spacing: -.03em; line-height: .95; max-width: 14ch; }
.slot2 p { color: color-mix(in srgb, var(--bg) 70%, transparent); font-size: 1.1rem; }

/* Inloggen / registreren / startwizard */
.auth-beeld { background: var(--delft-diep); display: grid; place-items: center; }
.auth-beeld::before { display: none; }
.auth-gevel { width: min(72%, 420px); margin-bottom: 120px; }
.auth-beeld-in { background: linear-gradient(180deg, transparent, rgba(10, 22, 18, .92) 35%); }
.auth-beeld-in h2 { font-family: var(--f-display); font-weight: 700; }
.auth-voordelen svg { color: var(--deurgeel); }
.voortgang { border-radius: 1px; } .voortgang i { background: var(--delft); border-radius: 1px; }
.keuze { border-width: 1px; }
.keuze[aria-pressed="true"] { border-color: var(--inkt); background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--inkt); }
.ins-rij.aan { border-color: var(--inkt); background: var(--vlak-2); }
.waarom { border-radius: 3px; }
.waarom svg { color: var(--delft); }
.ring .vg { stroke: var(--delft); }
.feest-gevel { width: min(320px, 70vw); }
.feest h1 { font-family: var(--f-display); font-weight: 700; }

/* Portaal: jouw gevel */
.mijn-gevel { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 22px; }
@media (max-width: 640px) { .mijn-gevel { grid-template-columns: minmax(0, 1fr); } .mijn-gevel-svg { max-width: 220px; } }
.mijn-gevel-tekst { display: grid; gap: 10px; align-content: start; }
.mijn-gevel-kop { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.02em; line-height: 1; margin: 0; }
.mijn-gevel-kop span { color: var(--delft); font-variant-numeric: tabular-nums; }
.mijn-gevel .bijschrift { max-width: 520px; min-height: 84px; }

.hero2-h1 { font-size: clamp(2.8rem, 7.2vw, 5.6rem); }

.hero h1 em { color: inherit; }

/* ═════ uit stijl-warm.css ═════ */
/* ─────────────────────────────────────────────────────────────────────────────
   Warme laag (komt als laatste). Doel: minder krant, meer welkom.
   - Zachtere lijnen, rondere hoeken (8–14px), groene vlakken in plaats van zwarte.
   - Smalle Plex alleen voor de grote kop en cijfers; tussenkoppen in gewone Plex.
   ───────────────────────────────────────────────────────────────────────────── */
:root { --r: 10px; --r-klein: 6px; --inkt: #1d2023; }
:root[data-theme="dark"] { --inkt: #f1f1ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --inkt: #f1f1ec; } }

/* Koppen: gewone Plex, warm en leesbaar */
h2, .sectie-kop h2, .paneel-kop h2, .faq summary, .index-rij h3, .nieuws-item h4 {
  font-family: var(--f-tekst); font-weight: 600; letter-spacing: -.012em; line-height: 1.18;
}
.sectie-kop h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.paneel-kop h2 { font-size: 1.15rem; }
.paginakop h1 { font-family: var(--f-display); font-weight: 700; }
.kicker { font-family: var(--f-tekst); font-weight: 600; font-size: .9rem; letter-spacing: 0; color: var(--delft); }
.eyebrow { font-family: var(--f-tekst); font-weight: 600; letter-spacing: .02em; font-size: .72rem; text-transform: uppercase; }
.chip { border-radius: 6px; font-family: var(--f-tekst); font-weight: 600; font-size: .72rem; letter-spacing: 0; }

/* Zachte lijnen in plaats van zwarte strepen */
.feiten, .index-lijst, .stap3, .belofte > div, .faq details:first-child, .pub-voet { border-top: 1px solid var(--lijn); }
.bijschrift { border-top: 1px solid var(--lijn); }

/* Knoppen: warm groen standaard, baksteen voor de hoofdactie */
.knop { border-radius: 8px; background: var(--delft-diep); color: #f4f4f1; }
.knop:hover { background: color-mix(in srgb, var(--delft-diep) 85%, #000); }
.knop.geel { background: var(--delft); }
.knop.stil, .knop.omlijnd { border-radius: 8px; }
.ikoonknop, .invoer, select.invoer, .segment { border-radius: 8px; }
.segment button { border-radius: 6px; }
.monogram, .avatar, .merk-teken { border-radius: 8px !important; }

/* Vlakken */
.statusblok, .slot2 { background: var(--delft-diep); color: #f4f4f1; }
.statusblok .status-zin { color: #f4f4f1; font-family: var(--f-tekst); font-weight: 600; }
.statusblok .zacht, .statusblok .eyebrow { color: #b9c9c0; }
.slot2 h2 { color: #f4f4f1; }
.paneel { border-color: var(--lijn); }

/* ───── Voorkant: welkom ───── */
.w-hero { padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.w-hero-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 960px) { .w-hero-raster { grid-template-columns: minmax(0, 1fr); } }
.w-groet { font-family: var(--f-tekst); font-weight: 600; color: var(--delft); font-size: 1.05rem; margin: 0 0 10px; }
.w-h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -.025em; color: var(--inkt); margin: 0; max-width: 18ch; }
.w-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--tekst); margin: 18px 0 0; max-width: 48ch; }

.startkaart { margin-top: 26px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 20px;
  box-shadow: 0 1px 0 rgba(29, 32, 35, .04), 0 24px 48px -32px rgba(29, 32, 35, .35); }
.sk-vraag { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.sk-nr { width: 34px; height: 28px; border-radius: 4px; background: var(--delft-diep); color: #f4f4f1; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; box-shadow: inset 0 0 0 2px var(--delft-diep), inset 0 0 0 3px #f4f4f1; }
.sk-label { display: block; font-weight: 600; color: var(--inkt); font-size: 1rem; margin-bottom: 10px; }
.sk-provs { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-prov { border: 1px solid var(--lijn); background: var(--bg); color: var(--tekst); border-radius: 8px; padding: 8px 12px; min-height: 38px; font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: background-color 150ms var(--ease-uit), border-color 150ms var(--ease-uit), color 150ms var(--ease-uit); }
.sk-prov:hover { border-color: var(--zacht); }
.sk-prov:active { transform: scale(.97); }
.sk-prov[aria-pressed="true"] { background: var(--delft-diep); border-color: var(--delft-diep); color: #f4f4f1; }
.sk-inkomen { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sk-bedrag { font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; color: var(--inkt); font-variant-numeric: tabular-nums; }
.sk-uitkomst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
@media (max-width: 520px) { .sk-uitkomst { grid-template-columns: minmax(0, 1fr); } .sk-res + .sk-res { border-left: 0 !important; border-top: 1px solid var(--lijn); } }
.sk-res { padding: 14px 12px 14px 0; display: grid; gap: 2px; }
.sk-res + .sk-res { padding-left: 14px; border-left: 1px solid var(--lijn); }
.sk-getal { font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--delft); font-variant-numeric: tabular-nums; }
.sk-res span:last-child { font-size: .84rem; color: var(--zacht); }
.sk-actie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.w-eerlijk { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--zacht); margin-top: 16px; max-width: 60ch; }
.w-eerlijk svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--kans); }

.w-gevel { margin: 0; display: grid; gap: 14px; position: sticky; top: 90px; }
@media (max-width: 960px) { .w-gevel { position: static; } }
.w-avond { background: var(--delft-diep); border-radius: 16px; padding: 34px 34px 0; overflow: hidden; position: relative; }
.w-avond::before { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%; top: 26px; right: 30px; background: #efe6cf; opacity: .9; box-shadow: 0 0 40px rgba(239, 230, 207, .35); }
.w-avond #hero-gevel { max-width: 400px; margin: 0 auto; position: relative; }
.w-avond .gv-stoep { fill: #16302a; }
.w-gevel .bijschrift { min-height: 84px; }
.gv-gloed { fill: var(--raam-licht); opacity: 0; transition: opacity 600ms var(--ease-uit); pointer-events: none; }
.gv-raam.aan .gv-gloed { opacity: .32; }
.gv-raam:hover .gv-gloed, .gv-raam.gekozen .gv-gloed { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .gv-gloed { transition: none; } }

.w-band { background: var(--groen-licht); }
.w-band-in { padding-block: 26px; display: grid; gap: 8px; }
.w-band-zin { font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--inkt); max-width: 62ch; margin: 0; line-height: 1.4; }
.w-band-zin b { font-family: var(--f-display); color: var(--delft); font-size: 1.3em; }

.voorproef { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .voorproef { grid-template-columns: minmax(0, 1fr); } }
.vp-kaart { display: grid; gap: 12px; align-content: start; }
.vp-titel { font-weight: 600; color: var(--inkt); font-size: 1.08rem; margin: 0; }
.vp-ui { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; display: grid; gap: 10px; min-height: 132px; align-content: start; }
.vp-status { background: var(--delft-diep); border-color: var(--delft-diep); color: #f4f4f1; }
.vp-status .mini-label { color: #b9c9c0; }
.vp-status b { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.vp-status span:last-child { color: #c9d6cf; font-size: .9rem; }
.vp-rij { display: flex; gap: 10px; align-items: center; } .vp-rij b { display: block; color: var(--inkt); } .vp-rij span { font-size: .86rem; color: var(--zacht); }
.vp-melding { display: flex; gap: 8px; align-items: center; font-size: .86rem; background: var(--deurgeel-zacht); color: var(--tekst); border-radius: 8px; padding: 8px 10px; }
.vp-melding svg { width: 16px; height: 16px; color: var(--let-op); flex: none; }
.vp-rij2 { display: flex; justify-content: space-between; font-size: .9rem; color: var(--zacht); } .vp-rij2 b { color: var(--inkt); }
.vp-tekst { color: var(--zacht); margin: 0; font-size: .95rem; }

.slot-warm { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; border-radius: 16px; }
@media (max-width: 760px) { .slot-warm { grid-template-columns: minmax(0, 1fr); } }
.slot-warm h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 18ch; }
.slot-warm p { color: #c9d6cf; }
.slot-acties { display: grid; gap: 12px; justify-items: start; }
.tekstlink.licht { color: #f4f4f1; text-decoration-color: rgba(244, 244, 241, .5); }

.meer { padding-top: clamp(40px, 6vw, 72px); }
.meer > .pub-wrap > details { border-bottom: 1px solid var(--lijn); }
.meer > .pub-wrap > details:first-child { border-top: 1px solid var(--lijn); }
.meer > .pub-wrap > details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 0; font-size: 1.25rem; font-weight: 600; color: var(--inkt); }
.meer > .pub-wrap > details > summary::-webkit-details-marker { display: none; }
.meer > .pub-wrap > details > summary::after { content: "+"; font-size: 1.6rem; color: var(--delft); font-weight: 400; margin-left: 12px; }
.meer > .pub-wrap > details[open] > summary::after { content: "–"; }
.meer > .pub-wrap > details > summary .mini-label { margin-left: auto; }
.meer > .pub-wrap > details > div { padding-bottom: 28px; }
.meer .faq details:first-child { border-top: 1px solid var(--lijn); }

/* ───── Portaal: rustiger bovenkant ───── */
.top-rij { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; margin-bottom: 18px; }
@media (max-width: 1000px) { .top-rij { grid-template-columns: minmax(0, 1fr); } }
.top-rij .statusblok { margin: 0 !important; height: 100%; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.top-gevel { background: var(--delft-diep); border-radius: var(--r); padding: 18px 22px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: end; color: #f4f4f1; text-decoration: none; overflow: hidden; }
.top-gevel:hover { text-decoration: none; }
.top-gevel .gevel { width: 110px; }
.top-gevel b { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; color: var(--deurgeel); }
.top-gevel span { font-size: .88rem; color: #c9d6cf; display: block; padding-bottom: 18px; }

/* ───── Logo ───── */
.merk-teken, .pub-logo .merk-teken, .mobiel-merk .merk-teken { background: transparent !important; width: 34px !important; height: 34px !important; box-shadow: none !important; }
.merk-naam, .pub-logo { font-family: var(--f-display); font-weight: 700; letter-spacing: -.015em; }
.merk-naam { font-size: 1.2rem; }

/* ───── Achtergrond: warme avondlucht + vervagend metselwerk ───── */
.w-hero { position: relative; isolation: isolate; background:
  radial-gradient(900px 420px at 88% -8%, color-mix(in srgb, var(--groen-licht) 85%, transparent), transparent 72%),
  radial-gradient(700px 360px at -5% 110%, color-mix(in srgb, var(--delft-zacht) 70%, transparent), transparent 70%), var(--bg); }
.w-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%23a3432a' stroke-width='1.2'%3E%3Cpath d='M0 .5h48M0 12.5h48M.5 0v12M24.5 0v12M12.5 12v12M36.5 12v12'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
#functies { background: var(--vlak); border-block: 1px solid var(--lijn); }
.meer { background: var(--bg); }

.sk-pers { display: flex; align-items: center; gap: 10px; }
.sk-pers .segment button { min-width: 40px; }

/* ═════ uit stijl-huis.css ═════ */
/* ─────────────────────────────────────────────────────────────────────────────
   Huiselijke laag: gordijnen, plantjes, lampjes, de kat, de fiets, de deurmat,
   de lucht die met de klok meegaat, de deur die opengaat, het straatje en de stillevens.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --gordijn: #c45a3a; --gordijn-b: #6f8f6a; --pot: #b5603d; --blad: #4f7a5a; --blad-d: #355c42;
  --kat: #1d2023; --lamp: #fff2c8; --mat: #6b4a2f; --fiets: #1e3a31; --hout: #7a5536; --stof: #3f6b5a; --stof-d: #2f5546;
}

/* In de gevel */
.gv-gordijn { fill: var(--gordijn); opacity: .88; }
.gv-raam:nth-child(odd) .gv-gordijn { fill: var(--gordijn-b); }
.gv-lamp { fill: var(--lamp); opacity: 0; transition: opacity 600ms var(--ease-uit); }
.gv-snoer { stroke: var(--kozijn); stroke-width: 1; opacity: 0; }
.gv-raam.aan .gv-lamp, .gv-raam.aan .gv-snoer { opacity: 1; }
.gv-kat ellipse, .gv-kat circle, .gv-kat path:not(.gv-kat-staart) { fill: var(--kat); }
.gv-kat-staart { fill: none; stroke: var(--kat); stroke-width: 2; stroke-linecap: round; }
.gv-pot { fill: var(--pot); }
.gv-blad { fill: var(--blad); }
.gv-plantje .gv-blad:nth-of-type(2n) { fill: var(--blad-d); }
.gv-klink { fill: #c9a24a; }
.gv-brievenbus { fill: #c9a24a; }
/* De voordeur: twee bladen die naar binnen opendraaien (2D, dus overal even scherp) */
.gv-binnen { fill: #ffd98a; }
.gv-gang { fill: #e3ad55; }
.gv-achterwand { fill: #f6cf7c; }
.gv-loper { fill: var(--gordijn); opacity: .85; }
.gv-ganglamp { stroke: var(--dak); stroke-width: 1; }
.gv-ganglamp-bol { fill: #fff6d8; }
.gv-bovenlicht { fill: var(--dak); }
.gv-spaak { stroke: var(--kozijn); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.gv-kalf { fill: var(--kozijn); }
.gv-paneel { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.2; }
.gv-bel { fill: var(--kozijn); } .gv-belknop { fill: #c9a24a; }
.gv-blad-l, .gv-blad-r { transform-box: fill-box; transition: transform 900ms cubic-bezier(.65, 0, .25, 1), filter 900ms cubic-bezier(.65, 0, .25, 1); }
.gv-blad-l { transform-origin: 0 50%; } .gv-blad-r { transform-origin: 100% 50%; }
.deur-open .gv-blad-l, .deur-open .gv-blad-r { transform: scaleX(.14); filter: brightness(.7); }
.gv-lichtval { fill: #ffd98a; opacity: 0; transition: opacity 700ms ease 200ms; pointer-events: none; }
.deur-open .gv-lichtval { opacity: .45; }
.gv-deurlamp { fill: var(--lamp); stroke: var(--dak); stroke-width: 1.5; }
.gv-deurgloed { fill: #ffe7a3; opacity: .55; }
.gv-beugel { fill: none; stroke: var(--dak); stroke-width: 2; }
.gv-mat { fill: var(--mat); }
.gv-mat-tekst { font-family: var(--f-cijfer); font-size: 6px; fill: #e9d9c0; letter-spacing: .12em; }
.gv-fiets { fill: none; stroke: var(--fiets); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gv-fiets circle { stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) { .gv-blad-l, .gv-blad-r, .gv-lichtval, .gv-lamp { transition: none; } }

/* De lucht volgt de klok */
.w-avond { transition: background-color 600ms linear; }
.w-avond.ochtend { background: linear-gradient(180deg, #f3d9b8 0%, #e9e4d6 55%, #dfe6e1 100%); }
.w-avond.dag { background: linear-gradient(180deg, #bcd3dc 0%, #dbe6e6 70%, #e6ebe5 100%); }
.w-avond.avond { background: linear-gradient(180deg, #24443a 0%, #1e3a31 60%, #1a332b 100%); }
.w-avond.nacht { background: linear-gradient(180deg, #0f1c19 0%, #13241f 100%); }
.w-avond.ochtend::before { background: #ffd58a; box-shadow: 0 0 60px rgba(255, 196, 102, .6); top: 60%; right: 18px; }
.w-avond.dag::before { background: #fff3c4; box-shadow: 0 0 60px rgba(255, 236, 160, .7); }
.w-avond.nacht::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 8%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 72% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 86% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 52% 22%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 22% 34%, #fff 50%, transparent);
  opacity: .8; }
.w-avond.ochtend .gv-stoep, .w-avond.dag .gv-stoep { fill: #c9c7bd; }
.dagdeel-label { font-family: var(--f-cijfer); font-size: .7rem; letter-spacing: .03em; color: #e9e2d0; position: absolute; left: 22px; top: 18px; z-index: 1; }
.w-avond.ochtend .dagdeel-label, .w-avond.dag .dagdeel-label { color: #4d5a55; }

/* Straatje boven de voettekst */
.straatje-wrap { margin-top: clamp(40px, 6vw, 80px); line-height: 0; overflow: hidden; }
.straatje { width: 100%; height: clamp(90px, 12vw, 150px); display: block; }
.st-1 { fill: var(--muur-1); } .st-2 { fill: var(--muur-2); } .st-3 { fill: var(--muur-3); }
.st-aan { fill: var(--raam-licht); } .st-uit { fill: var(--raam); } .st-deur { fill: var(--delft-diep); } .st-kade { fill: var(--delft-diep); }
.pub-voet { margin-top: 0; border-top: 0; background: var(--delft-diep); color: #c9d6cf; }
.pub-voet h4 { color: #9fb3a9; }
.pub-voet a, .pub-voet button.link { color: #eef0ea; }
.pub-voet small { color: #9fb3a9; }
.pub-voet .zacht { color: #b9c9c0 !important; }
.pub-voet .pub-logo { color: #f4f4f1; }

/* Stillevens */
.stilleven { width: 112px; height: auto; display: block; }
.sl-stof { fill: var(--stof); } .sl-stof-d { fill: var(--stof-d); }
.sl-hout { stroke: var(--hout); stroke-width: 3; fill: none; stroke-linecap: round; }
rect.sl-hout { fill: var(--hout); stroke: none; }
.sl-kap { fill: var(--deurgeel); } .sl-licht { fill: #ffe7a3; opacity: .45; }
.sl-boek { fill: var(--delft); } .sl-boek2 { fill: var(--delft-diep); }
.sl-metaal { stroke: #9b8e7c; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.sl-sleutel { fill: none; stroke: #c9a24a; stroke-width: 3; }
.sl-label { fill: var(--delft); }
.sl-hart { fill: var(--delft); }
.sl-pot { fill: var(--pot); } .sl-blad { fill: var(--blad); stroke: var(--blad-d); stroke-width: 1.5; }
.sl-vloer { stroke: var(--lijn); stroke-width: 2; }
.leegte .stilleven { margin: 0 auto 4px; }

/* "Wat je krijgt": zigzag in plaats van drie gelijke kaarten */
.zigzag { display: grid; gap: clamp(28px, 4vw, 56px); }
.zz-rij { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.zz-rij:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.zz-rij:nth-child(even) .zz-tekst { order: 2; }
@media (max-width: 820px) { .zz-rij, .zz-rij:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .zz-rij:nth-child(even) .zz-tekst { order: 0; } }
.zz-tekst { display: grid; gap: 10px; align-content: start; }
.zz-tekst .stilleven { width: 96px; }
.zz-tekst h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.zz-tekst p { color: var(--zacht); margin: 0; max-width: 46ch; }
.zz-beeld { background: var(--bg); border: 1px solid var(--lijn); border-radius: 14px; padding: clamp(16px, 2.4vw, 28px); }
.zz-beeld .vp-ui { box-shadow: 0 20px 40px -30px rgba(29, 32, 35, .4); }
.zz-rij:nth-child(2) .zz-beeld { transform: rotate(-.6deg); }
.zz-rij:nth-child(3) .zz-beeld { transform: rotate(.5deg); }
@media (prefers-reduced-motion: reduce) { .zz-beeld { transform: none !important; } }

/* Warme groet in het portaal */
.groet-rij { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.groet-rij h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.02em; margin: 0; }
.groet-rij p { color: var(--zacht); margin: 0; }

.slot-warm h2 { line-height: 1.02; margin: 0 0 14px; }
.slot-warm p { margin: 0; }

/* ═════ uit stijl-reageren.css ═════ */
/* Reageerhulp */
.re-opdracht { margin-bottom: 18px; border-color: var(--inkt); }
.re-opdracht h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; margin: 0; }
.re-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.re-site-kop { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.re-site-kop b { display: block; color: var(--inkt); text-overflow: ellipsis; }
.re-instel { display: grid; gap: 10px; }
.chip.rood { background: var(--nee-zacht); color: var(--nee); }
.re-systeem { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--lijn); }
.re-overzicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.re-sys { border: 1px solid var(--lijn); border-radius: 12px; padding: 14px; display: grid; gap: 8px; align-content: start; background: var(--bg); }
.re-sys-kop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.re-sys-kop b { color: var(--inkt); }
.re-sys-sites { display: flex; flex-wrap: wrap; gap: 5px; }

.re-site-kop b { white-space: normal; overflow: visible; }

/* ── Botkaart (Mijn zoektocht) en uitleg (Reageerhulp) ── */
.bot-aan { border-left: 4px solid var(--kans); }
.bot-test, .bot-pauze { border-left: 4px solid var(--let-op); }
.bot-los { border-top: 1px solid var(--lijn); }

/* ── Mijn zoektocht: groepen en springmenu ── */
.springmenu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.springmenu .chip { cursor: pointer; border: 1px solid var(--lijn); background: var(--vlak); font: inherit; font-size: .88rem; padding: 6px 12px; }
.springmenu .chip:hover, .springmenu .chip:focus-visible { border-color: var(--kans); color: var(--kans); }
.groep-kop { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--inkt); scroll-margin-top: 84px; }
.groep-kop:first-child { margin-top: 0; }
.groep-kop h2 { margin: 0; font-size: 1.35rem; }
.groep-kop p { margin: 4px 0 0; color: var(--zacht); font-size: .92rem; }

/* ── Reageerhulp, eenvoudig (11-11-2026): keuzes, sites, Start met klein venster ── */

/* ═════ uit stijl-extra.css ═════ */
/* Extra portaalonderdelen (app/extra.js): abonnement, posities, risicobevestiging.
   Gebruikt de bestaande tokens uit stijl.css: baksteen (--delft), kozijngroen (--delft-diep), kalkwit (--bg).
   Alleen nieuwe klassen met voorvoegsel ex-, zodat niets in de rest van de site verandert. */

.ex-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ex-raster { gap: 18px; margin-top: 18px; }
.ex-raster > .span-6, .ex-raster > .span-5, .ex-raster > .span-7 { min-width: 0; }
@media (max-width: 900px) { .ex-raster > [class*="span-"] { grid-column: span 12; } }
.stapel { display: grid; gap: 14px; }
.paginakop h1:focus { outline: none; }

/* Abonnement */
.ex-breed { flex-basis: 100%; margin: 0; }
.ex-tabel td { white-space: nowrap; }
.ex-tabel td svg, .ex-tabel .knop svg { width: 15px; height: 15px; }

/* Posities */
.ex-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; }
.ex-form .veld { grid-column: span 1; } .ex-form .ex-breed-2 { grid-column: span 2; }
.ex-form-knop { grid-column: span 1; }
.ex-form .ex-breed { grid-column: 1 / -1; }
@media (max-width: 900px) { .ex-form { grid-template-columns: 1fr 1fr; } .ex-form .ex-breed-2 { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ex-form { grid-template-columns: 1fr; } .ex-form .veld, .ex-form-knop { grid-column: 1 / -1; } }
.ex-fout { color: var(--nee); font-weight: 600; margin: 0; min-height: 0; }
.ex-fout:empty { display: none; }
.invoer[aria-invalid="true"] { border-color: var(--nee); }

.ex-trend { font-size: .82rem; padding: 5px 10px; }
.ex-trend svg { width: 14px; height: 14px; }
.ex-nu { display: grid; gap: 0; }
.ex-nu b { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--inkt); font-variant-numeric: tabular-nums; }
.ex-grafiek { margin: 0; }
.ex-grafiek svg { width: 100%; height: auto; display: block; }
.ex-as { stroke: var(--lijn); stroke-width: 1; stroke-dasharray: 3 4; }
.ex-astekst { font-size: 11px; fill: var(--zacht); font-family: var(--f-tekst); }
.ex-lijn { fill: none; stroke: var(--delft); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ex-punt { fill: var(--vlak); stroke: var(--delft); stroke-width: 2; }
.ex-punt.laatste { fill: var(--delft); }
.ex-details summary { cursor: pointer; font-weight: 600; color: var(--inkt); padding: 6px 0; }
.ex-details table { margin-top: 8px; }

/* Risico */

/* Losse voorbeeldpagina (extra.html) */
.ex-pagina { max-width: 1200px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left, 0px)) 80px; }
.ex-kop { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 14px 0 18px; border-bottom: 1px solid var(--lijn); margin-bottom: 24px; }
.ex-merk { font-family: var(--f-display); font-weight: 700; color: var(--inkt); font-size: 1.1rem; }
.ex-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-tabs a { padding: 8px 14px; border-radius: 8px; color: var(--inkt); font-weight: 600; text-decoration: none; }
.ex-tabs a:hover { background: var(--vlak-2); }
.ex-tabs a[aria-current="page"] { background: var(--delft-diep); color: #f4f4f1; }
.ex-skip { position: absolute; left: -999px; top: 8px; }
.ex-skip:focus { left: 16px; z-index: 99; background: var(--vlak); padding: 8px 12px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .knop, .view { transition: none !important; animation: none !important; } }

/* Reageerhulp: echte koppelingen met de engine (app/reageren.js, alleen met de server) */
.re-eng-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.re-eng-site { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--bg); }
.re-eng-kop { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.re-eng-kop b { color: var(--inkt); margin-right: 4px; }
.re-engine h3 { font-size: 1rem; }
#ww-opslag-melding[hidden] { display: none; }
.re-eng-site > .knop, .re-eng-site > button.knop { justify-self: start; }

/* ── Prijzen op de voorkant (publiek.js, prijsSectie) ── */
.w-prijs { background: var(--vlak); border-block: 1px solid var(--lijn); }
.w-plannen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .w-plannen { grid-template-columns: minmax(0, 1fr); } }
.w-plan { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px 24px; border: 1px solid var(--lijn); border-radius: 14px; background: var(--bg); }
.w-plan.uitgelicht { border: 2px solid var(--delft); background: var(--vlak); box-shadow: var(--schaduw); }
.w-plan-label { position: absolute; top: -12px; left: 22px; background: var(--delft); color: #fff; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.w-plan h3 { font-size: 1.25rem; color: var(--inkt); }
.w-plan-prijs b { display: block; font-family: var(--f-display); font-size: 2.4rem; line-height: 1; color: var(--inkt); font-variant-numeric: tabular-nums; }
.w-plan-prijs span { color: var(--zacht); font-size: .9rem; }
.w-plan-wat { color: var(--tekst); }
.w-plan-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w-plan-lijst li { display: flex; gap: 8px; align-items: flex-start; }
.w-plan-lijst svg { width: 18px; height: 18px; flex: none; color: var(--kans); margin-top: 3px; }
.w-plan .knop { justify-self: stretch; margin-top: 6px; }
.w-prijs-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
@media (max-width: 900px) { .w-prijs-info { grid-template-columns: minmax(0, 1fr); } }
.w-prijs-info h3 { font-size: 1.08rem; color: var(--inkt); margin-bottom: 10px; }
.w-sites { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.w-sites li { background: var(--vlak-2); color: var(--inkt); border-radius: 6px; padding: 4px 9px; font-size: .86rem; font-weight: 600; }
.w-stappen, .w-weten { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; line-height: 1.5; }
/* Binnenkort: wachtlijst voor producten die nog niet te koop zijn */
.w-binnenkort { margin-top: 40px; padding: 22px; border: 1px dashed var(--lijn, #c9c2b8); border-radius: 12px; display: grid; gap: 16px; }
.w-binnenkort h3 { font-size: 1.08rem; color: var(--inkt); margin-bottom: 6px; }
.w-bk-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .w-bk-lijst { grid-template-columns: minmax(0, 1fr); } }
.w-bk-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--vlak-2); border-radius: 8px; cursor: pointer; }
.w-bk-item input { margin-top: 4px; flex: none; }
.w-bk-item > span { display: grid; gap: 2px; min-width: 0; }
.w-bk-prijs { font-weight: 600; color: var(--inkt); }
.w-bk-actie { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.w-bk-actie .veld { flex: 1 1 240px; }

/* ── Abonnement kiezen (extra.js) ── */
.re-eng-plan { margin: 0; }
/* Mail-meldingen (app.js meldingenPaneel) */
.ml-sites { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ml-sites legend { margin-bottom: 6px; }

/* Menu op de voorkant ook op de telefoon zichtbaar (WA-regel 12): schuifbare rij onder de kop. */
.pub-links a { padding: 8px 12px; border-radius: 8px; color: var(--tekst, var(--zacht)); font-weight: 500; font-size: .92rem; white-space: nowrap; }
.pub-links a:hover { color: var(--inkt); background: var(--vlak-2); }
/* Menu-items breken nooit af ("Wat je krijgt" op drie regels). Te smal: menu als eigen rij onder de kop. */
.pub-links { flex-wrap: nowrap; min-width: 0; }
.pub-links > * { white-space: nowrap; flex: none; }
@media (max-width: 1180px) {
  .pub-nav .pub-wrap { flex-wrap: wrap; row-gap: 0; }
  /* Alle vijf zichtbaar: over twee regels in plaats van een verborgen schuifrij. */
  .pub-links { display: flex; order: 3; width: 100%; margin-left: -12px; flex-wrap: wrap; overflow: visible; padding-bottom: 8px; }
}
@media (max-width: 880px) {
  .pub-nav .pub-wrap { flex-wrap: wrap; row-gap: 0; }
  .pub-links { display: flex; order: 3; width: 100%; margin-left: -8px; flex-wrap: wrap; overflow: visible; padding-bottom: 8px; }
  .pub-links button, .pub-links a { white-space: nowrap; min-height: 44px; }
}

/* Woonlasten in het portaal: jaarkalender en onderwerpen */
.lasten-kalender { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.lasten-kalender li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: var(--r-klein); border: 1px solid var(--lijn); }
.lasten-kalender li.nu { border-color: var(--delft); background: var(--delft-zacht); }
.lasten-kalender li div { display: grid; gap: 2px; }
.lasten-maand { font-weight: 600; text-transform: capitalize; color: var(--delft); }
.lasten-onderwerpen { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.lasten-onderwerpen a { display: grid; gap: 2px; padding: 12px; min-height: 44px; border-radius: var(--r-klein); border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; }
.lasten-onderwerpen a:hover { border-color: var(--delft); }

/* ───── Toegankelijkheid (13-STEM §2 punt 13) ───── */
/* Duidelijke focusrand voor toetsenbordgebruikers (WCAG 2.4.7/2.4.11); wint van eerdere zachtere varianten. */
:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; border-radius: 4px; }
.naar-inhoud { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 12px 16px; border-radius: 8px; border: 2px solid var(--inkt); background: var(--vlak); color: var(--inkt); font-weight: 700; }
.naar-inhoud:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ───── Voorkant: Dit horen we / Vertel het ons ───── */
.horen-lijst { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.horen-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 20px; border-radius: var(--r); background: var(--vlak); border: 1px solid var(--lijn); }
@media (max-width: 760px) { .horen-item { grid-template-columns: minmax(0, 1fr); } }
.horen-item blockquote { margin: 0; }
.horen-item blockquote p { margin: 0; font-size: 1.25rem; line-height: 1.35; font-weight: 600; color: var(--inkt); }
.horen-item blockquote footer { margin-top: 8px; font-size: .88rem; }
.horen-item blockquote footer a { color: var(--zacht); }
.horen-doen { border-left: 3px solid var(--kans); padding-left: 14px; display: grid; gap: 4px; align-content: start; }
.horen-doen p { margin: 0; }
.horen-doen .tekstlink { justify-self: start; }
.vertel-kaart { display: grid; gap: 16px; padding: clamp(20px, 4vw, 36px); border-radius: var(--r); background: var(--delft-zacht); border: 1px solid var(--lijn); max-width: 860px; }
.vertel-kaart h2 { margin: 4px 0 6px; }
.vertel-kaart p { margin: 0; }
.vertel-keuzes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vertel-keus { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); cursor: pointer; }
.vertel-keus:has(input:checked) { border-color: var(--delft); box-shadow: inset 0 0 0 1px var(--delft); font-weight: 600; }
.vertel-keus:has(input:focus-visible) { outline: 3px solid var(--inkt); outline-offset: 2px; }

/* ───── Hulp en routes ───── */
.hulp-stapel { display: grid; gap: 18px; padding-block: 18px 40px; max-width: 900px; }
.hulp-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hulp-lijst li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-klein); border: 1px solid var(--lijn); }
.hulp-lijst a { color: var(--inkt); }
.hulp-zwaar { border-color: var(--delft); }
.brief-form { display: grid; gap: 14px; }
.brief-tekst { font-family: Georgia, 'Times New Roman', serif; line-height: 1.5; min-height: 22em; }
.brief-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.wl-hulp-actie { border-color: var(--delft); background: var(--delft-zacht); }

/* Hoofdknop: tekstkleur volgt het thema (wit op donkergroen in licht, donker op lichtgroen in donker). */
.knop.geel { color: var(--op-delft, #fff); }

/* ───── Prijzen: voorkant-knop en pagina #prijzen ───── */
.w-prijs-meer { margin-top: 28px; display: flex; justify-content: center; }
.w-prijzen .sectie { padding-top: clamp(32px, 5vw, 64px); }

/* ───── Binnenkort (per doel gegroepeerd) ───── */
.bk { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--lijn); display: grid; gap: 28px; }
.bk-intro { max-width: 720px; }
.bk-intro h2 { margin: 6px 0 8px; }
.bk-intro p { margin: 0; color: var(--tekst); }
.bk-groep h3 { font-size: 1.05rem; margin: 0 0 12px; color: var(--inkt); }
.bk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.bk-kaart { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r); background: var(--vlak); border: 1px solid var(--lijn); }
.bk-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-kop h4 { margin: 0; font-size: 1.08rem; color: var(--inkt); }
.bk-prijs { color: var(--zacht); font-size: .9rem; white-space: nowrap; }
.bk-prijs b { color: var(--inkt); font-size: 1.05rem; }
.bk-zin { margin: 0; font-weight: 600; color: var(--inkt); }
.bk-kaart .mini { margin: 0; }
.bk-voordeel { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--kans-zacht); color: var(--inkt); font-size: .85rem; font-weight: 600; }
.bk-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bk-punten li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--tekst); }
.bk-punten svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--kans); }
.bk-kies { align-self: flex-start; margin-top: auto; min-height: 44px; }
.bk-kies .bk-kies-aan { display: none; align-items: center; gap: 6px; }
.bk-kies .bk-kies-aan svg { width: 16px; height: 16px; }
.bk-kies[aria-pressed="true"] { background: var(--delft); color: var(--op-delft, #fff); box-shadow: none; }
.bk-kies[aria-pressed="true"] .bk-kies-uit { display: none; }
.bk-kies[aria-pressed="true"] .bk-kies-aan { display: inline-flex; }
.bk-kaart:has(.bk-kies[aria-pressed="true"]) { border-color: var(--delft); box-shadow: inset 0 0 0 1px var(--delft); }
.bk-form { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--r); background: var(--vlak); border: 1px solid var(--lijn); box-shadow: var(--schaduw-hoog); }
.bk-gekozen { margin: 0; color: var(--tekst); }

/* ── Account aanmaken: akkoordvak (11-11-2026) ── */
.auth-kop p { margin-top: 10px; line-height: 1.55; }
.veld-hint:empty { display: none; }
.akkoord { border: 1px solid var(--lijn); border-radius: 10px; padding: 14px 16px; background: var(--vlak); transition: border-color .15s; }
.akkoord.fout { border-color: var(--nee); }
.vink { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: .92rem; line-height: 1.5; color: var(--tekst); position: relative; }
.vink input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.vink-vak { width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--lijn-sterk, var(--zacht)); border-radius: 5px; background: var(--bg); display: grid; place-items: center; transition: background .12s, border-color .12s; }
.vink-vak::after { content: ""; width: 5px; height: 10px; border: solid var(--op-delft); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; opacity: 0; transition: opacity .12s; }
.vink input:checked + .vink-vak { background: var(--delft); border-color: var(--delft); }
.vink input:checked + .vink-vak::after { opacity: 1; }
.vink input:focus-visible + .vink-vak { outline: 2px solid var(--delft); outline-offset: 2px; }
.akkoord.fout .vink-vak { border-color: var(--nee); }
.vink a { color: var(--delft); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.akkoord-uitleg { margin: 10px 0 0 32px; font-size: .8rem; line-height: 1.5; color: var(--zacht); }

/* ── Algemene voorwaarden en privacyverklaring ── */
.jur { background: var(--bg); color: var(--tekst); }
.jur-wrap { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.jur-kopblok { display: grid; gap: 10px; padding-bottom: 28px; border-bottom: 1px solid var(--lijn); }
.jur-kopblok h1 { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.03em; line-height: 1.1; }
.jur-intro { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }
.jur-acties { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: .9rem; }
.jur-acties .link { color: var(--delft); font-weight: 600; background: none; border: 0; padding: 0; min-height: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: inherit; }
.jur-inhoud { margin: 28px 0 8px; padding: 18px 20px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); font-size: .9rem; }
.jur-inhoud ol { margin: 10px 0 0; padding-left: 1.4em; columns: 2; column-gap: 32px; }
.jur-inhoud li { break-inside: avoid; padding: 2px 0; }
.jur-inhoud a { color: var(--tekst); text-decoration: none; }
.jur-inhoud a:hover { color: var(--delft); text-decoration: underline; }
@media (max-width: 600px) { .jur-inhoud ol { columns: 1; } }
.jur-art { padding-top: 32px; scroll-margin-top: 80px; }
.jur-art h2 { display: flex; gap: 12px; align-items: baseline; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: 10px; outline: none; }
.jur-nr { font-family: var(--f-cijfer, monospace); font-size: .85rem; color: var(--zacht); min-width: 1.6em; }
.jur-art p, .jur-lijst li { line-height: 1.65; max-width: 68ch; }
.jur-art p + p { margin-top: 10px; }
.jur-art a, .jur-model a { color: var(--delft); text-decoration: underline; }
.jur-lijst { margin: 8px 0 10px; padding-left: 1.3em; display: grid; gap: 4px; }
.jur-tabel { margin: 8px 0; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; font-size: .86rem; }
.jur-rij { display: grid; grid-template-columns: 1.6fr 1.3fr .9fr 1.2fr; }
.jur-rij span { padding: 10px 12px; line-height: 1.45; border-top: 1px solid var(--lijn); }
.jur-rij span + span { border-left: 1px solid var(--lijn); }
.jur-kop span { font-weight: 600; background: var(--vlak-2); border-top: 0; }
@media (max-width: 700px) {
  .jur-kop { display: none; }
  .jur-rij { grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--lijn); }
  .jur-rij:nth-child(2) { border-top: 0; }
  .jur-rij span { border: 0 !important; padding: 2px 14px; }
  .jur-rij span::before { content: attr(data-kop) ": "; font-weight: 600; }
  .jur-rij span:first-child { font-weight: 600; }
  .jur-rij span:first-child::before { content: none; }
}
.jur-model { margin-top: 40px; padding: 20px; border: 1px dashed var(--lijn-sterk, var(--lijn)); border-radius: 10px; }
.jur-model h3 { margin-bottom: 8px; }
@media print {
  .pub-nav, .pub-kop, .pub-voet, .straatje-wrap, .jur-acties, .jur-inhoud { display: none !important; }
  .jur-wrap { padding: 0; max-width: none; }
  .jur-art { break-inside: avoid-page; }
}

/* ── Overzicht, rustiger (11-11-2026): eerst wat voor jou telt ── */
.groet-rij h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.statusblok { margin-top: 0 !important; }
.statusblok .status-zin { font-size: 1.2rem; }
.ov-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 16px; }
@media (max-width: 800px) { .ov-kaarten { grid-template-columns: minmax(0, 1fr); } }
.ov-kaart { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border: 1px solid var(--lijn); border-radius: var(--r, 10px); background: var(--vlak); color: inherit; text-decoration: none; transition: border-color .15s; }
.ov-kaart:hover { border-color: var(--delft); }
.ov-label { font-size: .78rem; font-weight: 600; color: var(--zacht); }
.ov-waarde { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; }
.ov-waarde small { font-family: var(--f-tekst); font-weight: 500; font-size: .85rem; color: var(--zacht); letter-spacing: 0; }
.ov-waarde .ov-tekst { font-size: 1.15rem; }
.ov-sub { font-size: .84rem; color: var(--zacht); }
.ov-ja { display: inline-flex; align-items: center; gap: 5px; color: var(--kans); font-weight: 600; font-size: .82rem; }
.ov-ja svg { width: 14px; height: 14px; }
.ov-bron { margin-top: 18px; }
@media (max-width: 800px) {
  .ov-kaarten { gap: 0; border: 1px solid var(--lijn); border-radius: var(--r, 10px); background: var(--vlak); overflow: hidden; }
  .ov-kaart { border: 0; border-radius: 0; padding: 12px 16px; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .ov-kaart + .ov-kaart { border-top: 1px solid var(--lijn); }
  .ov-label { grid-column: 1; }
  .ov-waarde { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.25rem; text-align: right; }
  .ov-waarde .ov-tekst { font-size: .95rem; }
  .ov-sub { grid-column: 1; }
}

/* Provinciekaart in Mijn zoektocht: site-regels met "Ik sta hier ingeschreven" */
.ins-regel a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; }
.ins-regel a:hover b { text-decoration: underline; }
.ins-regel .tekstlink { font-weight: 600; color: var(--delft); background: none; border: 0; padding: 0; cursor: pointer; text-align: right; }
@media (max-width: 600px) {
  .ins-regel { grid-template-columns: minmax(0, 1fr) auto; }
  .ins-regel b { white-space: normal; }
  .ins-regel > .mini { grid-column: 1 / -1; }
  .ins-regel > .r:last-child { grid-column: 1 / -1; text-align: left; }
}


/* ── 11-11-2026: iconen nooit groter dan de tekst als niets anders hun maat zet (de grote pijl bij Woonlasten) ── */
:where(svg.ic) { width: 1em; height: 1em; vertical-align: -.14em; flex: none; }

/* ── Linksonder alleen foto, naam en e-mail; alles over je situatie staat in Profiel ── */
.profielkaart.alleen-gebruiker { padding: 10px; }
.profielkaart.alleen-gebruiker .gebruiker { border: 0; padding: 0; }
.avatar { overflow: hidden; text-decoration: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-groot { width: 72px !important; height: 72px !important; font-size: 1.3rem !important; }
.foto-kiezer { display: flex; align-items: center; gap: 16px; }
.foto-kiezer label.knop { cursor: pointer; }
.situatie { display: grid; gap: 0; margin: 0; }
.situatie > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.situatie > div:last-child { border-bottom: 0; }
.situatie dt { color: var(--zacht); font-size: .9rem; }
.situatie dd { margin: 0; font-weight: 600; text-align: right; }


/* ── Overzicht: hoe je ervoor staat, per onderwerp (11-11-2026) ── */
.stand { margin-top: 16px; }
.stand-lijst { list-style: none; margin: 0; padding: 0 0 4px; }
.stand-rij { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px 20px; border-top: 1px solid var(--lijn); }
.stand-stip { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--vlak-3, #cfd4cc); }
.stand-rij.goed .stand-stip, .stand-legenda .goed i { background: var(--kans); }
.stand-rij.let .stand-stip, .stand-legenda .let i { background: var(--deurgeel, #e0a92e); }
.stand-legenda .leeg i { background: var(--vlak-3, #cfd4cc); }
.stand-tekst { display: grid; gap: 2px; min-width: 0; }
.stand-tekst > b { color: var(--inkt); }
.stand-tekst > span { color: var(--zacht); font-size: .92rem; }
.stand-tekst > span b { color: var(--inkt); font-weight: 600; }
.stand-link { white-space: nowrap; font-size: .88rem; font-weight: 600; color: var(--delft); text-decoration: none; padding-top: 2px; }
.stand-link:hover { text-decoration: underline; }
.stand-sub { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.stand-sub li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--vlak-2); }
.stand-let { color: var(--let-op); font-weight: 600; }
.stand-legenda { display: flex; gap: 14px; flex-wrap: wrap; }
.stand-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.stand-legenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 700px) {
  .stand-rij { grid-template-columns: 12px minmax(0, 1fr); padding: 12px 14px; }
  .stand-link { grid-column: 2; }
  .stand-sub li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}


/* ── Mail-meldingen: klein, onderaan Mijn zoektocht ── */
.ml-klein { padding: 12px 16px; display: grid; gap: 6px; box-shadow: none; }
.ml-kop { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--inkt); }
.ml-kop svg { color: var(--zacht); }
.ml-klein p { margin: 0; }
.ml-klein .schakel.mini { font-size: .88rem; }

.profielkaart a.avatar { color: #fff !important; }