/*
 * Stijl van de site, mobiel eerst.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

/* Tokens */
:root {
  --blauw: #0F6BFF;
  --blauw-d: #0A55D1;
  --blauw-z: #EDF3FF;
  --blauw-l: #CFDFFF;
  --blauw-op-donker: #8FB6FF;
  --ink: #0B182C;
  --tekst: #3A4250;
  --grijs: #72777E;
  --licht: #F8F8FA;
  --lijn: #EEEEEE;
  --lijn-d: #E2E4E8;
  --goed: #12805C;
  --goed-z: #E7F5EF;
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 24px;
  --sch-1: 0 1px 2px rgba(11, 24, 44, .06);
  --sch-2: 0 1px 2px rgba(11, 24, 44, .05), 0 6px 16px rgba(11, 24, 44, .07);
  --sch-3: 0 2px 6px rgba(11, 24, 44, .06), 0 24px 56px -12px rgba(11, 24, 44, .22);
  --snel: 160ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --kop-h: 68px;
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.55 Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.wrap.smal { max-width: 840px; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: var(--r-s); background: #fff; color: var(--ink); font-weight: 700; }
.skip:focus { left: 16px; }
.oog { color: var(--blauw); font-size: 15px; font-weight: 600; }
.h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }

/* Knoppen en labels */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-s); background: var(--blauw); color: #fff; font: 600 16px/1 Figtree, system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); }
.knop:hover { background: var(--blauw-d); }
.knop .ic { width: 18px; height: 18px; }
.knop.l { height: 56px; padding: 0 26px; font-size: 17px; }
.knop.s { height: 40px; padding: 0 16px; font-size: 15px; }
.knop.blok { width: 100%; }
.knop.wit { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lijn-d); }
.knop.wit:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.knop.op-blauw { background: #fff; color: var(--blauw); }
.knop.op-blauw:hover { background: var(--blauw-z); }
.tekstlink { display: inline-flex; align-items: center; gap: 6px; color: var(--blauw); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tekstlink .ic { width: 18px; height: 18px; transition: transform var(--snel) var(--ease); }
.tekstlink:hover .ic { transform: translateX(3px); }
.label { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.label.goed { background: var(--goed-z); color: var(--goed); }
.label.blauw { background: var(--blauw-z); color: var(--blauw); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 21px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.logo-merk { width: 32px; height: 32px; flex: none; color: var(--blauw); }

/* Kop */
.kop { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--lijn); background: #fff; color: var(--ink); }
.kop-in { display: flex; align-items: center; gap: 12px; height: var(--kop-h); }
.kop-nav { display: none; }
.kop-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kop .inloggen { display: none; padding: 0 12px; font-weight: 600; text-decoration: none; }
.kop .knop.s { display: none; }
.menu-knop { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: var(--r-s); background: var(--licht); color: inherit; cursor: pointer; }
.kop.over { position: fixed; left: 0; right: 0; border-bottom-color: transparent; background: transparent; color: #fff; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.kop.over .menu-knop { background: rgba(255, 255, 255, .16); }
.kop.over.gescrold { border-bottom-color: var(--lijn); background: rgba(255, 255, 255, .97); color: var(--ink); }
.kop.over.gescrold .menu-knop { background: var(--licht); }
.kop.vol .wrap { max-width: none; padding: 0 24px; }

/* Menu op de gsm */
.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 0 20px 24px; background: #fff; color: var(--ink); overflow-y: auto; }
.menu-kop { display: flex; align-items: center; justify-content: space-between; height: var(--kop-h); }
.menu nav { display: grid; margin-top: 8px; }
.menu nav a { padding: 16px 0; border-bottom: 1px solid var(--lijn); font-size: 22px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.menu-acties { display: grid; gap: 10px; margin-top: auto; padding-top: 32px; }

/* Taalkeuze: een link op publieke pagina's, elders een knop in een formulier; beide zien er hetzelfde uit. */
.taalkeuze-vorm { display: contents; }
.taal-kop, .taal-menu, .taal-voet { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.taal-kop { display: none; place-items: center; min-width: 40px; height: 40px; border-radius: var(--r-s); font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.taal-kop:hover { background: var(--licht); }
.kop.over:not(.gescrold) .taal-kop:hover { background: rgba(255, 255, 255, .14); }
.taal-menu { justify-self: center; margin-top: 6px; padding: 10px 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.taal-voet:hover { color: var(--ink); }

/* Hero */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 720px; padding: 120px 0 40px; color: #fff; isolation: isolate; }
.hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 24, 44, .55) 0%, rgba(11, 24, 44, .28) 35%, rgba(11, 24, 44, .84) 100%); }
.hero h1 { max-width: 13em; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem); }
.hero-sub { max-width: 32em; margin-top: 16px; color: rgba(255, 255, 255, .9); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.zoekkaart { display: grid; margin-top: 32px; padding: 8px; border-radius: var(--r-l); background: #fff; color: var(--ink); box-shadow: var(--sch-3); }
.veld { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border-radius: var(--r-m); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--snel) var(--ease); }
.veld:hover, .veld:focus-within { background: var(--licht); }
.veld + .veld { border-top: 1px solid var(--lijn); }
.veld > .ic { width: 22px; height: 22px; color: var(--blauw); }
.veld-tekst { display: grid; flex: 1; min-width: 0; }
.veld small { color: var(--grijs); font-size: 13px; font-weight: 600; }
.veld strong, .veld input, .veld select { overflow: hidden; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: 600 16.5px/1.35 Figtree, system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; outline: none; -webkit-appearance: none; appearance: none; }
.veld input::placeholder { color: var(--grijs); font-weight: 500; }
.veld select { cursor: pointer; }
.veld .pijltje { width: 18px; height: 18px; color: var(--grijs); }
.zoekkaart .knop { height: 56px; margin-top: 8px; font-size: 17px; }
.vertrouwen { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; color: rgba(255, 255, 255, .92); font-size: 15px; font-weight: 500; }
.vertrouwen span { display: inline-flex; align-items: center; gap: 8px; }
.vertrouwen .ic { width: 18px; height: 18px; color: var(--blauw-op-donker); stroke-width: 2.6; }

/* Secties */
.sectie { padding: 72px 0; }
.sectie.licht { background: var(--licht); }
.sectie-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.sectie-kop p { margin-top: 8px; color: var(--grijs); }

/* Advertenties */
.chips { display: flex; gap: 8px; margin: 0 -20px 24px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 9px 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn-d); color: var(--ink); font: 600 15px/1.2 Figtree, system-ui, sans-serif; cursor: pointer; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.kaarten { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; margin: 0 -20px; padding: 0 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; }
.kaarten::-webkit-scrollbar { display: none; }
.advertentie { scroll-snap-align: start; }
.advertentie > a { display: block; text-decoration: none; }
.foto { position: relative; overflow: hidden; border-radius: var(--r-m); background: var(--licht); }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms var(--ease); }
.advertentie > a:hover .foto img { transform: scale(1.04); }
.foto .label { position: absolute; left: 12px; top: 12px; box-shadow: var(--sch-1); }
.advertentie h3 { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.specs { margin-top: 2px; color: var(--grijs); font-size: 15px; }
.prijs { margin-top: 6px; font-size: 16px; font-weight: 600; }
.prijs span { color: var(--grijs); font-weight: 400; }
.zoekt { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); color: var(--tekst); font-size: 14.5px; line-height: 1.4; }
.zoekt .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--blauw); }

/* Zo werkt het */
.werk { display: grid; gap: 40px; }
.werk-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); }
.status { position: relative; margin: -56px 16px 0; padding: 18px; border-radius: var(--r-l); background: #fff; box-shadow: var(--sch-3); }
.status-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.status ol { margin: 0; padding: 0; list-style: none; }
.status li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--tekst); font-size: 15px; line-height: 1.35; }
.status li i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--goed); color: #fff; }
.status li i .ic { width: 14px; height: 14px; stroke-width: 3; }
.status li.bezig i { background: var(--blauw-z); box-shadow: inset 0 0 0 2px var(--blauw); }
.status li.later { color: var(--grijs); }
.status li.later i { background: #fff; box-shadow: inset 0 0 0 2px var(--lijn-d); }
.werk .intro { margin-top: 12px; color: var(--tekst); font-size: 1.08rem; }
.stappen { margin: 32px 0; padding: 0; list-style: none; }
.stappen li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 28px; }
.stappen li:last-child { padding-bottom: 0; }
.stappen li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 56px; bottom: 6px; width: 2px; background: var(--lijn-d); }
.stap-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-m); background: var(--blauw-z); color: var(--blauw); }
.stappen h3 { margin-top: 2px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.stappen p { margin-top: 4px; color: var(--tekst); font-size: 16px; }

/* Buurtband */
.band { padding: 72px 0; background: var(--ink); color: #fff; }
.band-grid { display: grid; gap: 40px; align-items: center; }
.band .oog { color: var(--blauw-op-donker); }
.band-tekst > p { margin-top: 12px; color: rgba(255, 255, 255, .78); font-size: 1.08rem; }
.band ul { display: grid; gap: 12px; margin: 24px 0 28px; padding: 0; list-style: none; }
.band li { display: flex; gap: 10px; color: rgba(255, 255, 255, .92); }
.band li .ic { color: var(--blauw-op-donker); stroke-width: 2.6; }
.kaartpaneel { padding: 12px; border-radius: var(--r-xl); background: #fff; color: var(--ink); }
.stadknoppen { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.stadknoppen button { padding: 8px 14px; border: 0; border-radius: var(--r-s); background: none; color: var(--tekst); font: 600 14.5px/1.2 Figtree, system-ui, sans-serif; cursor: pointer; }
.stadknoppen button:hover { background: var(--licht); }
.stadknoppen button[aria-selected="true"] { background: var(--ink); color: #fff; }
.plattegrond { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; }
.plattegrond path { fill: #EEF3FC; stroke: #fff; stroke-width: 2.5; cursor: pointer; transition: fill var(--snel) var(--ease); }
.plattegrond path:hover { fill: var(--blauw-l); }
.plattegrond path:focus { outline: none; }
.plattegrond path:focus-visible { outline: none; stroke: var(--ink); stroke-width: 3; }
.plattegrond path.aan { fill: var(--blauw); }
.plattegrond text { fill: var(--ink); font: 600 13px Figtree, system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.plattegrond text.aan { fill: #fff; }
.kaartpaneel-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 4px; padding: 12px 6px 4px; border-top: 1px solid var(--lijn); color: var(--grijs); font-size: 15px; }
.kaartpaneel-voet strong { color: var(--ink); }

/* Vragen */
.vragen-grid { display: grid; gap: 32px; }
.vragen-grid .intro { margin-top: 12px; color: var(--tekst); font-size: 1.08rem; }
.vragen { border-top: 1px solid var(--lijn-d); }
.vraag { border-bottom: 1px solid var(--lijn-d); }
.vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; font-size: 17.5px; font-weight: 600; line-height: 1.35; list-style: none; cursor: pointer; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary .ic { color: var(--blauw); transition: transform 220ms var(--ease); }
.vraag[open] summary .ic { transform: rotate(180deg); }
.vraag summary:hover { color: var(--blauw); }
.vraag p { max-width: 62ch; padding: 0 2px 22px; color: var(--tekst); }

/* Slot */
.slot { padding: 0 0 72px; }
.slot-in { display: grid; gap: 24px; align-items: center; padding: 40px 28px; border-radius: var(--r-xl); background: var(--blauw); color: #fff; }
.slot h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.slot p { margin-top: 8px; color: rgba(255, 255, 255, .85); }

/* Footer */
.voet { padding: 56px 0 28px; border-top: 1px solid var(--lijn); background: var(--licht); font-size: 15.5px; }
.voet-in { display: grid; gap: 32px; }
.voet-merk p { max-width: 36ch; margin-top: 14px; color: var(--tekst); }
.voet-kol h2 { margin-bottom: 10px; color: var(--grijs); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.voet-kol ul { margin: 0; padding: 0; list-style: none; }
.voet-kol a { display: inline-block; padding: 5px 0; font-weight: 500; text-decoration: none; }
.voet-kol a:hover { color: var(--blauw); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--lijn-d); color: var(--grijs); font-size: 14px; }
.voet-onder p { margin: 0; }
.voet-juridisch { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.voet-juridisch a { text-decoration: none; }
.voet-juridisch a:hover { color: var(--ink); }

/* Zoekapp */
.zoekapp { position: relative; height: calc(100svh - var(--kop-h)); min-height: 600px; }
/* Sterker dan .maplibregl-map uit de kaartbibliotheek, die anders position: relative zet. */
.zoekapp .zoekapp-kaart { position: absolute; inset: 0; background: #EEF0F3; }
.kaart-melding { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; gap: 10px; padding: 64px 24px; color: var(--grijs); font-size: 15px; font-weight: 600; text-align: center; }
.paneel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 58%; overflow-y: auto; padding: 0 16px 24px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: #fff; box-shadow: 0 -8px 32px rgba(11, 24, 44, .16); overscroll-behavior: contain; transition: max-height 300ms var(--ease); }
.paneel.groot { max-height: calc(100% - 48px); }
.greep { position: sticky; top: 0; z-index: 4; display: block; width: calc(100% + 32px); height: 28px; margin: 0 -16px 4px; border: 0; background: #fff; cursor: pointer; }
.greep::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--lijn-d); }
.paneel h1 { font-size: 1.6rem; letter-spacing: -.03em; }
.paneel-sub { margin-top: 6px; color: var(--tekst); font-size: 15.5px; }
.zoekveld { position: relative; margin-top: 16px; }
.zoekveld > .ic { position: absolute; left: 14px; top: 15px; color: var(--ink); pointer-events: none; }
.zoekveld input { width: 100%; height: 50px; padding: 0 14px 0 44px; border: 1px solid var(--lijn-d); border-radius: var(--r-m); background: #fff; color: var(--ink); font: 600 16px/1 Figtree, system-ui, sans-serif; -webkit-appearance: none; appearance: none; }
.zoekveld input::placeholder { color: var(--grijs); font-weight: 500; }
.zoekveld input:focus { border-color: var(--blauw); outline: none; box-shadow: 0 0 0 3px var(--blauw-z); }
.resultaten { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px; border: 1px solid var(--lijn-d); border-radius: var(--r-m); background: #fff; box-shadow: var(--sch-3); list-style: none; }
.resultaat { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px; border-radius: var(--r-s); font-weight: 600; line-height: 1.25; cursor: pointer; }
.resultaat:hover, .resultaat[aria-selected="true"] { background: var(--licht); }
.resultaat small { display: block; color: var(--grijs); font-size: 13px; font-weight: 500; }
.resultaat .ic { width: 18px; height: 18px; color: var(--grijs); }
.resultaat.aan .ic { color: var(--blauw); }
.resultaten .leeg { padding: 10px; color: var(--grijs); font-size: 14.5px; }
.gekozen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gekozen button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-s); background: var(--blauw); color: #fff; font: 600 14px/1 Figtree, system-ui, sans-serif; cursor: pointer; }
.gekozen button .ic { width: 14px; height: 14px; opacity: .85; }
.gekozen button.plus { padding: 0 12px; background: #fff; color: var(--blauw); box-shadow: inset 0 0 0 1px var(--blauw-l); }
.gekozen button.plus .ic { opacity: 1; }
.buurtlijst { margin-top: 12px; padding: 12px; border-radius: var(--r-m); background: var(--licht); }
.buurtlijst-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; }
.buurtlijst-kop button { padding: 4px 0; border: 0; background: none; color: var(--blauw); font: 600 14.5px/1 Figtree, system-ui, sans-serif; cursor: pointer; }
.buurtknoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.buurtknoppen button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--r-s); background: #fff; box-shadow: inset 0 0 0 1px var(--lijn-d); color: var(--ink); font: 600 14px/1.2 Figtree, system-ui, sans-serif; text-align: left; cursor: pointer; }
.buurtknoppen button[aria-pressed="true"] { background: var(--blauw); color: #fff; box-shadow: none; }
.filters { display: flex; gap: 8px; margin: 16px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { position: relative; display: inline-flex; flex: none; align-items: center; height: 40px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn-d); }
.filter:hover, .filter:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.filter > .ic { position: absolute; left: 14px; width: 16px; height: 16px; pointer-events: none; }
.filter select { height: 100%; padding: 0 16px 0 38px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 14.5px/1 Figtree, system-ui, sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none; outline: none; }
.resultaat-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.resultaat-kop strong { font-size: 16px; }
.resultaat-kop span { color: var(--grijs); font-size: 13.5px; white-space: nowrap; }
.woningen { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.woning { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 10px; border: 1px solid var(--lijn); border-radius: var(--r-m); cursor: pointer; transition: border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); }
.woning:hover, .woning.aan { border-color: var(--blauw-l); box-shadow: var(--sch-2); }
.woning img { width: 104px; height: 78px; border-radius: 8px; object-fit: cover; }
.woning h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.woning p { margin-top: 2px; color: var(--grijs); font-size: 13.5px; }
.woning .w-prijs { margin-top: 6px; color: var(--ink); font-size: 15px; font-weight: 600; }
.woning .w-zoekt { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--blauw); font-size: 13px; font-weight: 600; }
.woning .w-zoekt .ic { width: 14px; height: 14px; }
.geen-woningen { padding: 18px; border-radius: var(--r-m); background: var(--licht); color: var(--tekst); font-size: 15px; }
.geen-woningen strong { display: block; margin-bottom: 4px; color: var(--ink); }
.paneel-knop { margin-top: 16px; }
.paneel-noot { margin-top: 10px; color: var(--grijs); font-size: 13.5px; text-align: center; }
.prijspin { padding: 6px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 700 13.5px/1 Figtree, system-ui, sans-serif; box-shadow: 0 2px 8px rgba(11, 24, 44, .25); white-space: nowrap; cursor: pointer; transition: transform var(--snel) var(--ease); }
.prijspin:hover { transform: scale(1.06); }
.prijspin.aan { background: var(--ink); color: #fff; }
.uitgelicht { display: none; position: absolute; z-index: 2; top: 24px; width: 300px; overflow: hidden; border-radius: var(--r-l); background: #fff; box-shadow: var(--sch-3); }
.uitgelicht img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.uitgelicht-tekst { padding: 14px 16px 16px; }
.uitgelicht h3 { font-size: 16px; font-weight: 600; }
.uitgelicht p { margin-top: 2px; color: var(--grijs); font-size: 14px; }
.uitgelicht .rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.uitgelicht .rij strong { font-size: 16px; }
.uitgelicht .rij small { color: var(--grijs); font-weight: 400; }
.kaart-tip { pointer-events: none; }
.kaart-tip .maplibregl-popup-content { padding: 6px 10px; border-radius: var(--r-s); color: var(--ink); font: 600 14px/1.3 Figtree, system-ui, sans-serif; box-shadow: var(--sch-2); }
.kaart-tip .maplibregl-popup-tip { display: none; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-cooperative-gesture-screen { font-family: inherit; font-size: 17px; }

/* Formulieren */
.formulier { display: grid; gap: 6px; text-align: left; }
.veld-label { margin-top: 10px; font-size: 15px; font-weight: 600; }
.invoer { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--lijn-d); border-radius: var(--r-s); background: #fff; color: var(--ink); font: 500 16px/1 Figtree, system-ui, sans-serif; }
.invoer:focus { border-color: var(--blauw); outline: none; box-shadow: 0 0 0 3px var(--blauw-z); }
.invoer[aria-invalid="true"] { border-color: #C2362B; }
.invoer[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.invoer::-webkit-inner-spin-button, .invoer::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.hint { margin-top: 4px; color: var(--grijs); font-size: 14.5px; line-height: 1.45; }
.veld-fout { margin-top: 2px; color: #C2362B; font-size: 14.5px; font-weight: 500; }
.formulier .knop { margin-top: 18px; }

/* Inloggen en aanmelden */
.auth { display: grid; place-items: center; min-height: calc(100svh - var(--kop-h) - 80px); padding: 48px 20px; background: var(--licht); }
.auth-kaart { width: 100%; max-width: 440px; padding: 32px 24px; border: 1px solid var(--lijn); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sch-2); text-align: center; }
.auth-kaart h1 { font-size: 1.9rem; }
.auth-sub { margin: 10px 0 8px; color: var(--tekst); }
.auth-noot { margin-top: 20px; color: var(--grijs); font-size: 15px; }
.auth-noot a { color: var(--blauw); font-weight: 600; }

/* Meldingen */
.meldingen { position: fixed; left: 50%; top: calc(var(--kop-h) + 12px); z-index: 70; display: grid; gap: 8px; width: min(480px, calc(100% - 32px)); transform: translateX(-50%); animation: melding-weg 5s var(--ease) forwards; pointer-events: none; }
.melding { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-m); background: var(--ink); color: #fff; font-size: 15.5px; font-weight: 600; box-shadow: var(--sch-3); }
.melding .ic { width: 18px; height: 18px; color: var(--blauw-op-donker); stroke-width: 2.6; }
.melding.fout { background: #8E1F17; }
@keyframes melding-weg { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Kop: ingelogd */
.kop-account { gap: 8px; padding-left: 6px; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blauw); color: #fff; font-size: 13px; font-weight: 700; }
.kop.over:not(.gescrold) .kop-account { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

/* Gegevenslijst */
.gegevens { display: grid; gap: 0; margin: 24px 0 28px; border-top: 1px solid var(--lijn-d); }
.gegevens div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--lijn-d); }
.gegevens dt { color: var(--grijs); font-size: 14px; font-weight: 600; }
.gegevens dd { margin: 0; font-weight: 600; }

/* Aanmeldflow */
.stapscherm { display: grid; min-height: calc(100svh - var(--kop-h)); }
.stap-paneel { width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 20px 56px; }
.stap-paneel.breed { max-width: 720px; }
.stap-paneel h1 { margin-top: 18px; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); }
.stap-sub { margin: 10px 0 8px; color: var(--tekst); }
.stap-beeld, .stap-kaart { display: none; }
.stap-tip { display: flex; align-items: flex-start; gap: 10px; max-width: 380px; padding: 14px 16px; border-radius: var(--r-l); background: #fff; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; box-shadow: var(--sch-3); }
.stap-tip .ic { color: var(--blauw); margin-top: 1px; }
.stap-noot { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; color: var(--grijs); font-size: 14.5px; line-height: 1.45; }
.stap-noot .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--blauw); }
.stap-form { margin-top: 20px; }
.voortgang-tekst { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; color: var(--grijs); font-size: 14px; font-weight: 600; }
.terug { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.terug:hover { color: var(--blauw); }
.terug-ic { width: 16px; height: 16px; transform: rotate(180deg); }
.voortgang-balk { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: var(--lijn-d); }
.voortgang-balk span { display: block; height: 100%; border-radius: 3px; background: var(--blauw); }
.keuzegroep { min-width: 0; margin: 0; padding: 0; border: 0; }
.keuzegroep > legend { padding: 0; }
.segmenten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 4px; }
.segmenten.zes { grid-template-columns: repeat(6, 1fr); }
.segment input, .keuzekaart input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segment span { display: grid; place-items: center; height: 48px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--lijn-d); font-weight: 600; cursor: pointer; transition: background-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); }
.segment:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.segment input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.segment input:focus-visible + span, .keuzekaart input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }
.schuif-waarde { float: right; color: var(--blauw); font-weight: 700; }
.schuif { width: 100%; margin: 10px 0 2px; accent-color: var(--blauw); }
.schuif-grenzen { display: flex; justify-content: space-between; color: var(--grijs); font-size: 13px; }
.keuzekaarten { display: grid; gap: 8px; margin-top: 4px; }
.keuzekaart span { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--lijn-d); cursor: pointer; }
.keuzekaart strong { font-size: 16px; }
.keuzekaart small { color: var(--grijs); font-size: 14.5px; line-height: 1.4; }
.keuzekaart:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.keuzekaart input:checked + span { background: var(--blauw-z); box-shadow: inset 0 0 0 2px var(--blauw); }
.samenvat { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none; }
.samenvat li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: var(--r-s); background: var(--licht); font-size: 14.5px; font-weight: 600; }
.samenvat .ic { width: 16px; height: 16px; color: var(--blauw); }
.vinkregel { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; font-size: 15.5px; line-height: 1.45; cursor: pointer; }
.vinkregel input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blauw); }
.vinkregel a { color: var(--blauw); }
.kiesveld { position: relative; }
.kiesveld select { padding-right: 40px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.kiesveld .ic { position: absolute; right: 14px; top: 16px; color: var(--grijs); pointer-events: none; }
.veldrij { display: grid; gap: 0 12px; }
.eenheidveld { position: relative; }
.eenheidveld span { position: absolute; top: 15px; right: 14px; color: var(--grijs); font-weight: 600; pointer-events: none; }
.eenheidveld.voor span { right: auto; left: 14px; }
.eenheidveld.voor .invoer { padding-left: 34px; }
.uitleg { margin-top: 6px; font-size: 15px; }
.uitleg summary { color: var(--blauw); font-weight: 600; cursor: pointer; }
.uitleg p { margin-top: 6px; color: var(--tekst); line-height: 1.5; }
.adreszoeker { margin-top: 0; }
/* MapLibre zet zelf een transform op de speld; de schuine vorm zit daarom in een binnenelement. */
.adresspeld-vorm { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50% 50% 50% 4px; background: var(--blauw); color: #fff; box-shadow: 0 4px 12px rgba(11, 24, 44, .3); transform: rotate(-45deg); }
.adresspeld-vorm .ic { transform: rotate(45deg); }
.uploadvak { position: relative; margin-top: 20px; border: 2px dashed var(--blauw-l); border-radius: var(--r-l); background: var(--blauw-z); transition: border-color var(--snel) var(--ease), background-color var(--snel) var(--ease); }
.uploadvak.erboven, .uploadvak:hover { border-color: var(--blauw); }
.uploadvak-label { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; cursor: pointer; }
.uploadvak-label .tussen-ic { margin: 0 0 4px; background: #fff; }
.uploadvak-label small { color: var(--grijs); font-size: 14px; }
.uploadvak-invoer { position: absolute; width: 1px; height: 1px; opacity: 0; }
.uploadvak-invoer:focus-visible + noscript, .uploadvak:focus-within { outline: 3px solid var(--blauw); outline-offset: 2px; }
.uploadvak noscript .knop { margin: 0 0 16px; }
.uploadvak-bezig { display: grid; gap: 8px; padding: 0 16px 18px; color: var(--ink); font-size: 14.5px; font-weight: 600; text-align: center; }
.laadbalk { height: 6px; overflow: hidden; border-radius: 3px; background: #fff; }
.laadbalk span { display: block; width: 0; height: 100%; background: var(--blauw); transition: width 300ms var(--ease); }
.fotolijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.fotokaart { overflow: hidden; border: 1px solid var(--lijn); border-radius: var(--r-m); background: #fff; }
.fotokaart-beeld { position: relative; background: var(--licht); }
.fotokaart-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fotokaart-beeld form { margin: 0; }
.fotokaart-beeld .label, .fotochip { position: absolute; left: 8px; top: 8px; box-shadow: var(--sch-1); }
.fotochip { height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: #fff; color: var(--ink); font: 600 13px/1 Figtree, system-ui, sans-serif; cursor: pointer; }
.fotochip:hover { color: var(--blauw); }
.fotokaart-knoppen { display: flex; gap: 4px; padding: 6px; }
.fotokaart-knoppen form { margin: 0; }
.fotokaart-knoppen form:nth-child(3) { margin-left: auto; }
.fotoknop { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r-s); background: var(--licht); color: var(--ink); cursor: pointer; }
.fotoknop:hover { background: var(--blauw-z); color: var(--blauw); }
.fotoknop:disabled { background: none; color: var(--lijn-d); cursor: default; }
.fotoknop .ic { width: 18px; height: 18px; }
.fotoknop.omhoog .ic { transform: rotate(180deg); }
.fotoknop.rechts .ic { transform: scaleX(-1); }
.fotoknop.wis { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; background: #fff; box-shadow: var(--sch-1); }
.fotoknop.wis:hover { background: #FBEAE8; color: #C2362B; }
.kaartvlak { position: absolute; inset: 0; }
.aanmelden-kaart .paneel h1 { margin-top: 16px; }
/* Het paneel heeft 24px opvulling onderaan; zonder die marge plakt de knop er net boven. */
.aanmelden-kaart .stap-form { position: sticky; bottom: -24px; z-index: 2; margin: 16px -16px -24px; padding: 10px 16px 16px; background: #fff; box-shadow: 0 -1px 0 var(--lijn); }
.aanmelden-kaart .stap-form .hint { margin: 0 0 8px; }
.aanmelden-kaart .stap-form .knop { margin-top: 0; }
.adreskaart { height: 190px; margin-top: 8px; overflow: hidden; border-radius: var(--r-m); background: #EEF0F3; }

/* Mijn advertentie en mijn account */
.mijn-pagina { min-height: calc(100svh - var(--kop-h)); padding: 28px 0 72px; background: var(--licht); }
.mijn-wrap { max-width: 800px; }
.mijn-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mijn-labels .ic { width: 14px; height: 14px; }
.label.uit { background: var(--lijn-d); color: var(--tekst); }
.label .stip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mijn-kop-link { margin-top: 10px; }
.mijnmelding { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; margin-top: 20px; padding: 18px; border: 1px solid var(--blauw-l); border-radius: var(--r-xl); background: #fff; }
.mijnmelding h2 { margin-top: 2px; font-size: 1.1rem; }
.mijnmelding p { margin-top: 4px; color: var(--tekst); font-size: 15px; }
.mijnmelding form, .mijnmelding > .knop { grid-column: 1 / -1; }
.mijnmelding .knop { width: 100%; }
/* Op de gsm één kolom: woning, meter, onderdelen, zichtbaarheid en als laatste de voorstellen. */
.mijn { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.mijn-hoofd, .mijn-zij { display: contents; }
.mijn > * > * { order: 2; }
.mijn .mijnkaart, .mijn .meter-blok { order: 1; }
.mijn .mijn-voorstellen { order: 3; }
.mijnkaart { display: grid; overflow: hidden; margin-top: 20px; border: 1px solid var(--lijn); border-radius: var(--r-xl); background: #fff; }
.mijnkaart-beeld { background: var(--licht); }
.mijnkaart-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.geen-foto { display: grid; place-items: center; gap: 8px; height: 100%; min-height: 200px; color: var(--grijs); font-weight: 600; }
.geen-foto .ic { width: 32px; height: 32px; }
.mijnkaart-tekst { padding: 20px; }
.mijnkaart-tekst h2 { font-size: 1.3rem; }
.mijnkaart-tekst .oog { margin-bottom: 4px; }
.wens-kop { margin-top: 18px; font-size: 15.5px; font-weight: 600; }
.wens-kop + .samenvat { margin-top: 8px; }
.mijnkaart-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mijnblok { margin-top: 16px; padding: 20px; border: 1px solid var(--lijn); border-radius: var(--r-xl); background: #fff; }
.mijnblok h2 { margin-bottom: 4px; font-size: 1.15rem; }
.mijnblok .lijstchips { margin-top: 12px; }
.mijnblok-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
/* In de kolommen zorgt de tussenruimte van de flex of grid voor de afstand. */
.mijn .mijnkaart, .mijn .mijnblok { margin: 0; }
.beschrijving { display: grid; gap: 10px; margin-top: 8px; color: var(--tekst); line-height: 1.6; }
.plattegrond-mini { display: block; margin-top: 12px; padding: 12px; border: 1px solid var(--lijn); border-radius: var(--r-m); background: #fff; }
.plattegrond-mini img { width: 100%; max-height: 260px; object-fit: contain; }
.plattegrond-groot { margin: 20px 0 0; padding: 16px; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; }
.plattegrond-groot img { width: 100%; max-height: 480px; object-fit: contain; }
.gegevens.kort { margin: 10px 0 0; border-top: 0; }
.gegevens.kort div { padding: 10px 0; }
.gegevens.kort div:last-child { padding-bottom: 0; border-bottom: 0; }
.gegevens dd .lijstchips { margin-top: 6px; }
.gegevens .leeg { color: var(--grijs); font-weight: 500; }
.taken { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.taken li { display: grid; grid-template-columns: 48px 1fr; gap: 6px 14px; align-items: start; }
.taken h3 { margin-top: 2px; font-size: 16.5px; font-weight: 600; }
.taken p { margin-top: 2px; color: var(--tekst); font-size: 15px; }
.taken .knop { grid-column: 2; justify-self: start; }
.voorstel-tellers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.voorstel-tellers li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-m); background: var(--licht); }
.voorstel-tellers strong { color: var(--blauw); font-size: 1.6rem; line-height: 1.1; }
.voorstel-tellers span { color: var(--tekst); font-size: 14.5px; line-height: 1.35; }
.meter-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.meter-kop h2 { margin: 0; }
.meter-getal { color: var(--blauw); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.meter { height: 8px; margin: 12px 0 14px; overflow: hidden; border-radius: 4px; background: var(--blauw-z); }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--blauw); }
.meter-taken { display: grid; gap: 2px; margin: 10px -10px 0; padding: 0; list-style: none; }
.meter-taken a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 10px; border-radius: var(--r-m); color: inherit; text-decoration: none; transition: background-color var(--snel) var(--ease); }
.meter-taken a:hover { background: var(--licht); }
.meter-taken .stap-ic { width: 40px; height: 40px; border-radius: var(--r-s); }
.meter-taak-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.meter-taak-kop strong { color: var(--blauw); font-size: 15.5px; line-height: 1.3; }
.punten { color: var(--goed); font-size: 13px; font-weight: 700; white-space: nowrap; }
.meter-taak small { display: block; margin-top: 2px; color: var(--tekst); font-size: 14px; line-height: 1.4; }
.meter-klaar { display: flex; align-items: center; gap: 8px; color: var(--goed); font-weight: 600; }
.schakelaar { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 12px 0; cursor: pointer; }
.schakelaar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.schakelaar-baan { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--lijn-d); transition: background-color var(--snel) var(--ease); }
.schakelaar-baan::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(11, 24, 44, .25); transition: transform var(--snel) var(--ease); }
.schakelaar input:checked + .schakelaar-baan { background: var(--blauw); }
.schakelaar input:checked + .schakelaar-baan::after { transform: translateX(18px); }
.schakelaar input:focus-visible + .schakelaar-baan { outline: 3px solid var(--blauw); outline-offset: 2px; }
.schakelaar-tekst strong { display: block; font-size: 16px; line-height: 1.35; }
.schakelaar-tekst small { display: block; margin-top: 2px; color: var(--tekst); font-size: 14.5px; line-height: 1.45; }
.schakellijst { margin-top: 4px; }
.schakellijst .schakelaar + .schakelaar { border-top: 1px solid var(--lijn); }
.opgeslagen { margin-top: 4px; }
.zichtbaar-uit { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.zichtbaar-uit .knop { margin-top: 12px; }
/* Op de gsm komt de knop onder de uitleg; vanaf 480px staat hij naast het veld. */
.accountveld { margin-top: 8px; }
.accountveld > .knop { order: 1; justify-self: start; margin-top: 8px; }
.wachtmelding { display: grid; grid-template-columns: 20px 1fr; gap: 6px 10px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-m); background: var(--blauw-z); font-size: 15px; line-height: 1.45; }
.wachtmelding .ic { margin-top: 1px; color: var(--blauw); }
.wachtmelding form { grid-column: 2; }
.tekstknop { padding: 0; border: 0; background: none; color: var(--blauw); font: 600 15px/1.4 Figtree, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.knop.gevaar { background: #C2362B; }
.knop.gevaar:hover { background: #A52A20; }
.knop.wit.gevaar { background: #fff; color: #C2362B; }
.knop.wit.gevaar:hover { box-shadow: inset 0 0 0 1px #C2362B; }
.tussen-ic.gevaar { background: #FBEAE8; color: #C2362B; }
.auth-kaart.links { max-width: 520px; text-align: left; }
.auth-kaart.links .auth-noot { text-align: center; }
.verdwijnt { margin: 8px 0 0; padding-left: 20px; color: var(--tekst); line-height: 1.5; }
.verdwijnt li + li { margin-top: 4px; }

/* Bewerkschermen */
.tekstvak { height: auto; min-height: 220px; padding: 14px; font-weight: 400; line-height: 1.55; resize: vertical; }
.teller.te-veel { color: #C2362B; font-weight: 600; }
.tipslijst { margin: 8px 0 0; padding-left: 20px; color: var(--tekst); line-height: 1.5; }
.tipslijst li + li { margin-top: 4px; }
.optioneel { color: var(--grijs); font-weight: 500; }
/* Chrome zet een pijltje in een veld met suggesties; vrij typen mag, dus het is geen keuzelijst. */
.invoer[list]::-webkit-calendar-picker-indicator { display: none !important; }
.vinktegels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.vinktegel input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vinktegel span { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--lijn-d); font-size: 15px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); }
.vinktegel .ic { width: 20px; height: 20px; padding: 3px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1.5px var(--lijn-d); color: transparent; stroke-width: 3; }
.vinktegel:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.vinktegel input:checked + span { background: var(--blauw-z); box-shadow: inset 0 0 0 2px var(--blauw); }
.vinktegel input:checked + span .ic { background: var(--blauw); color: #fff; box-shadow: none; }
.vinktegel input:focus-visible + span { outline: 3px solid var(--blauw); outline-offset: 2px; }
.knoppenrij { display: grid; gap: 10px; }
.knoppenrij form { margin: 0; }

/* Ruillijst */
.ruil { position: relative; min-height: calc(100svh - var(--kop-h)); }
.ruil-lijst { min-width: 0; padding: 24px 20px 104px; }
.ruil-kop h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); }
.ruil-sub { margin-top: 6px; color: var(--tekst); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-bottom: 1px solid var(--lijn-d); }
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: -1px; padding: 10px 4px 12px; border-bottom: 2px solid transparent; color: var(--grijs); font-size: 14.5px; font-weight: 600; text-align: center; text-decoration: none; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { border-color: var(--blauw); color: var(--ink); }
.tab-naam .lang { display: none; }
.teller { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--licht); color: var(--tekst); font-size: 12.5px; font-weight: 700; }
.tabs a[aria-current="page"] .teller { background: var(--blauw); color: #fff; }
.ruil .filters { margin: 14px -20px 0; padding: 2px 20px 6px; }
.filter.aan { background: var(--blauw-z); box-shadow: inset 0 0 0 2px var(--blauw); }
.filter.aan select, .filter.aan > .ic { color: var(--blauw); }
.filter.vink input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filter.vink span { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px 0 12px; font: 600 14.5px/1 Figtree, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.filter.vink .ic { width: 18px; height: 18px; padding: 2px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1.5px var(--lijn-d); color: transparent; stroke-width: 3; }
.filter.vink input:checked + span .ic { background: var(--blauw); color: #fff; box-shadow: none; }
.filter.vink:focus-within { outline: 3px solid var(--blauw); outline-offset: 2px; }
.ruil-telling { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px; color: var(--tekst); font-size: 15px; }
.ruil-tegoed { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--grijs); font-size: 14px; }
.ruil-tegoed .ic, .actie-tegoed .ic { width: 16px; height: 16px; color: #D99A00; }
.ruilkaarten { display: grid; gap: 32px 20px; margin: 14px 0 0; padding: 0; list-style: none; }
.ruilkaart { display: flex; flex-direction: column; transition: opacity 300ms var(--ease), transform 300ms var(--ease), height 300ms var(--ease); }
.ruilkaart.weg { overflow: hidden; height: 0 !important; opacity: 0; transform: scale(.96); }
.ruilkaart-link { display: block; color: inherit; text-decoration: none; }
.ruilkaart .foto { transition: box-shadow var(--snel) var(--ease); }
.ruilkaart .foto img { aspect-ratio: 4 / 3; }
.ruilkaart-link:hover .foto img { transform: scale(1.04); }
.ruilkaart .geen-foto { aspect-ratio: 4 / 3; min-height: 0; }
.ruilkaart.aan .foto { box-shadow: 0 0 0 3px var(--blauw); }
.ruilkaart.is-match .foto { box-shadow: 0 0 0 3px var(--goed); }
.ruilkaart-labels { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ruilkaart-labels .label, .foto .ruilkaart-labels .label { position: static; box-shadow: var(--sch-1); }
.label .ic { width: 14px; height: 14px; }
.label.super { background: #FFF4D6; color: #8A5A00; }
.ruilkaart h3 { margin-top: 12px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ruilknoppen { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; margin-top: 12px; }
.ruilknoppen form { margin: 0; }
.ruilknop { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: #fff; box-shadow: inset 0 0 0 1px var(--lijn-d); color: var(--ink); font: 600 15px/1 Figtree, system-ui, sans-serif; white-space: nowrap; cursor: pointer; transition: background-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); }
.ruilknop .ic { width: 18px; height: 18px; }
.ruilknop:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ruilknop.super .ic { color: #D99A00; }
.ruilknop.interesse { background: var(--blauw); color: #fff; box-shadow: none; }
.ruilknop.interesse:hover { background: var(--blauw-d); }
.ruilknop.nee[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.ruilknop.super[aria-pressed="true"] { background: #FFF4D6; color: #8A5A00; box-shadow: inset 0 0 0 2px #E8B53A; }
.ruilknop.interesse[aria-pressed="true"] { background: var(--goed); }
.ruilknop:disabled { cursor: default; opacity: .55; }
.ruilknop.super[aria-pressed="true"]:disabled { opacity: 1; }
.paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 36px; color: var(--grijs); font-size: 15px; }
.ruil-leeg { margin-top: 20px; padding: 32px 20px; border-radius: var(--r-xl); background: var(--licht); text-align: center; }
.ruil-leeg h2 { font-size: 1.3rem; }
.ruil-leeg p { max-width: 460px; margin: 8px auto 0; color: var(--tekst); }
.ruil-leeg .mijnblok-links { justify-content: center; }
.ruil-kaart { display: none; background: #EEF0F3; }
.ruil-kaart .maplibregl-map { position: absolute; inset: 0; }
.ruil-kaart-dicht { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-s); background: #fff; color: var(--ink); box-shadow: var(--sch-2); cursor: pointer; }
.ruil-kaart-noot { position: absolute; left: 12px; top: 12px; z-index: 2; max-width: min(340px, calc(100% - 80px)); padding: 8px 12px; border-radius: var(--r-s); background: rgba(255, 255, 255, .95); color: var(--tekst); font-size: 13px; line-height: 1.4; box-shadow: var(--sch-1); }
.kaartknop { position: fixed; left: 50%; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-s); background: var(--ink); color: #fff; font: 600 16px/1 Figtree, system-ui, sans-serif; box-shadow: var(--sch-3); transform: translateX(-50%); cursor: pointer; }
.thuisspeld { display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid #fff; border-radius: 50%; background: var(--blauw); color: #fff; box-shadow: 0 2px 8px rgba(11, 24, 44, .35); }
.thuisspeld .ic { width: 18px; height: 18px; }
.toast { position: fixed; left: 50%; bottom: 84px; z-index: 70; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: var(--r-m); background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; box-shadow: var(--sch-3); transform: translateX(-50%); }
.toast-knop { padding: 0; border: 0; background: none; color: var(--blauw-op-donker); font: 700 15px/1.3 Figtree, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Woning in detail */
.woning-pagina { padding: 16px 0 160px; }
.woning-wrap { max-width: 1120px; }
.terugrij { margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.voorbeeldmelding { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r-m); background: var(--blauw-z); font-size: 15px; line-height: 1.45; }
.voorbeeldmelding .ic { margin-top: 1px; color: var(--blauw); }
.galerij-vak { position: relative; }
.galerij { display: flex; margin: 0 -20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerij::-webkit-scrollbar { display: none; }
.galerij-foto, .galerij-slot { position: relative; flex: 0 0 100%; padding: 0; border: 0; background: var(--licht); scroll-snap-align: start; cursor: zoom-in; }
.galerij-foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerij-meer { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 24, 44, .5); color: #fff; font-size: 18px; font-weight: 700; }
.galerij-slot { display: grid; place-content: center; justify-items: center; gap: 6px; aspect-ratio: 4 / 3; padding: 24px; background: var(--ink); color: #fff; text-align: center; text-decoration: none; cursor: pointer; }
.galerij-slot .ic { width: 28px; height: 28px; }
.galerij-slot span { max-width: 280px; color: rgba(255, 255, 255, .8); font-size: 14.5px; line-height: 1.45; }
.galerij-teller { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--r-s); background: rgba(11, 24, 44, .7); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
.galerij-leeg { display: flex; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 16 / 7; border-radius: var(--r-xl); background: var(--licht); color: var(--grijs); font-weight: 600; }
.woning-grid { display: grid; gap: 24px; margin-top: 20px; }
.woning-hoofd { min-width: 0; }
.woning-hoofd h1 { margin-top: 10px; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.woning-adres { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; color: var(--tekst); }
.woning-adres .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--blauw); }
.feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 20px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--lijn); border-radius: var(--r-l); background: var(--lijn); list-style: none; }
.feiten li { display: grid; gap: 2px; padding: 14px 16px; background: #fff; }
.feiten strong { font-size: 17px; }
.feiten span { color: var(--grijs); font-size: 14px; }
.woning-blok { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--lijn); }
.woning-blok h2 { margin-bottom: 12px; font-size: 1.3rem; }
.woning-blok .samenvat { margin-top: 0; }
.pastlijsten { display: grid; gap: 20px; }
.pastlijsten h3 + .pastlijst { margin-bottom: 4px; }
.pastlijsten h3 { margin-bottom: 8px; font-size: 15.5px; font-weight: 600; }
.pastlijst { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pastlijst li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; }
.pastlijst .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 3; }
.pastlijst .ja .ic { background: var(--goed-z); color: var(--goed); }
.pastlijst .nee { color: var(--grijs); }
.pastlijst .nee .ic { background: var(--licht); color: var(--grijs); }
.woning-noot { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--tekst); font-size: 15px; line-height: 1.45; }
.woning-noot .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--blauw); }
.woning-intro { margin-top: 8px; color: var(--tekst); }
.woning-subkop { margin-top: 18px; font-size: 1.15rem; }
.woning-blok .woning-subkop { margin-top: 0; }
.fotostrook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.fotostrook .galerij-foto, .fotostrook .galerij-slot { flex: none; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-s); }
.fotostrook img { aspect-ratio: 4 / 3; }
.galerij-slot.klein { gap: 2px; padding: 6px; font-size: 13px; }
.galerij-slot.klein .ic { width: 20px; height: 20px; }
.lijstchips.ruimte { margin-top: 14px; }
.woning-kaart { position: relative; height: 280px; overflow: hidden; border-radius: var(--r-l); background: #EEF0F3; }
button.plattegrond-mini { width: 100%; cursor: zoom-in; }
.actiekaart { padding: 20px; border: 1px solid var(--lijn); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sch-2); }
.actie-prijs { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.actie-prijs span { color: var(--grijs); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.actie-wie { margin-top: 2px; color: var(--grijs); font-size: 15px; }
.actie-status { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-m); background: var(--licht); font-size: 15px; font-weight: 600; line-height: 1.4; }
.actie-status .ic { width: 18px; height: 18px; margin-top: 1px; }
.actie-status.goed { background: var(--goed-z); color: var(--goed); }
.actie-status.blauw { background: var(--blauw-z); color: var(--blauw); }
.actie-status.super { background: #FFF4D6; color: #8A5A00; }
.actiekaart .hint { margin-top: 10px; }
.naar-gesprek { margin-top: 12px; }
.ruilknoppen.groot { margin-top: 16px; }
.ruilknoppen.groot .ruilknop { height: 50px; }
.actie-tegoed { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--grijs); font-size: 14px; }
.lichtbak { width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(11, 24, 44, .94); }
.lichtbak[open] { display: grid; place-items: center; }
.lichtbak::backdrop { background: rgba(11, 24, 44, .6); }
.lichtbak img { max-width: calc(100% - 32px); max-height: calc(100% - 140px); border-radius: var(--r-s); object-fit: contain; }
.lichtbak-knop { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--r-s); background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.lichtbak-knop:hover { background: rgba(255, 255, 255, .26); }
.lichtbak-knop.dicht { top: 16px; right: 16px; }
.lichtbak-knop.vorige { left: 16px; bottom: 24px; }
.lichtbak-knop.vorige .ic { transform: rotate(180deg); }
.lichtbak-knop.volgende { right: 16px; bottom: 24px; }
/* Op de gsm staan de knoppen onderaan vast, met alleen de stand erboven. */
@media (max-width: 999px) {
  .ruil-kaart.open { position: fixed; inset: var(--kop-h) 0 0; z-index: 60; display: block; }
  .actiekaart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -8px 24px rgba(11, 24, 44, .12); }
  .actie-prijs, .actie-wie, .actie-tegoed, .actiekaart .hint { display: none; }
  .actie-status { margin: 0 0 10px; padding: 0; background: none !important; font-size: 14px; }
  .ruilknoppen.groot { margin-top: 0; }
}

/* Matches, gesprek en meldingen */
.sr-weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.teller.nieuw { margin-left: 6px; background: var(--blauw); color: #fff; vertical-align: 1px; }
.bel { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-s); color: inherit; }
.bel:hover, .bel[aria-current="page"] { background: var(--licht); }
.bel-stip { position: absolute; top: 1px; right: -1px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 10px; background: #C2362B; color: #fff; font-size: 11px; font-weight: 700; }
.kop.over:not(.gescrold) .bel { color: #fff; }
.kop.over:not(.gescrold) .bel:hover { background: rgba(255, 255, 255, .14); }
.tabs.twee { grid-template-columns: repeat(2, 1fr); }
.gesprekken, .meldinglijst { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.gesprekrij, .meldingrij { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; color: inherit; text-decoration: none; transition: border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease); }
.meldingrij { grid-template-columns: 48px minmax(0, 1fr); }
.gesprekrij:hover, .meldingrij:hover { border-color: var(--blauw-l); box-shadow: var(--sch-2); }
.meldingrij.nieuw { border-color: var(--blauw-l); background: var(--blauw-z); }
.gesprek-foto { display: grid; flex: none; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: var(--r-s); background: var(--licht); color: var(--grijs); }
.gesprek-foto img { width: 100%; height: 100%; object-fit: cover; }
.gesprekrij .gesprek-foto { width: 56px; height: 56px; }
.gesprek-foto.groot { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.gesprek-tekst { display: grid; gap: 2px; min-width: 0; }
.gesprek-tekst small { color: var(--grijs); font-size: 13px; }
.gesprek-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gesprek-kop small { white-space: nowrap; }
.gesprek-woning { color: var(--grijs); font-size: 14px; }
.gesprek-laatste { overflow: hidden; color: var(--tekst); font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.gesprekrij.nieuw .gesprek-laatste { color: var(--ink); font-weight: 600; }
/* Op de gsm één kolom: balk, uitklapper met woning en stappen, berichten, schrijfvak onderaan vast. */
.gesprek { display: flex; flex-direction: column; min-height: calc(100svh - var(--kop-h)); background: #fff; }
.gesprek-hoofd { display: contents; }
.gesprek-balk { position: sticky; top: var(--kop-h); z-index: 5; order: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--lijn); background: #fff; }
.gesprek-balk .terug { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--r-s); }
.gesprek-balk .terug:hover { background: var(--licht); }
.gesprek-balk .terug-ic { width: 20px; height: 20px; }
.gesprek-wie { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.gesprek-wie-tekst { display: grid; min-width: 0; }
.gesprek-wie-tekst h1 { margin: 0; font-size: 16px; line-height: 1.3; }
.gesprek-wie-tekst small { overflow: hidden; color: var(--grijs); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.gesprek-zij { order: 2; border-bottom: 1px solid var(--lijn); background: var(--licht); }
/* Chrome maakt een scrollbaar vak focusbaar; na de sprong naar #stappen hoort daar geen rand omheen. */
.gesprek-zij:focus { outline: none; }
.gesprek-zij summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.gesprek-zij summary::-webkit-details-marker { display: none; }
.zij-inhoud { display: grid; gap: 12px; padding: 0 16px 16px; }
.zijkaart { padding: 16px; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; }
.zijkaart h2 { margin-bottom: 4px; font-size: 1.05rem; }
.zijkaart .woning-noot { margin-top: 10px; font-size: 14.5px; }
.zij-woning { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.zij-woning strong { font-size: 16px; }
.stappenlijst { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.stappenlijst li + li { border-top: 1px solid var(--lijn); }
.stappenlijst form { margin: 0; }
.stappenlijst .vinkregel { margin-top: 0; padding: 10px 0; }
.stappenlijst strong { display: block; font-size: 15.5px; }
.stappenlijst small { display: block; margin-top: 2px; color: var(--tekst); font-size: 14px; line-height: 1.4; }
.stappenlijst .gedaan strong { color: var(--goed); }
.afsluiten { display: grid; gap: 8px; margin-top: 10px; }
.afsluiten .knop { justify-self: start; }
.berichten { order: 3; display: flex; flex: 1; flex-direction: column; gap: 6px; margin: 0; padding: 16px; list-style: none; }
#laatste { order: 3; }
.dagscheiding { align-self: center; margin: 10px 0 4px; color: var(--grijs); font-size: 13px; font-weight: 600; }
.bericht { display: flex; flex-direction: column; gap: 2px; max-width: min(82%, 560px); }
.bericht p { margin: 0; padding: 10px 14px; border-radius: var(--r-l); font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bericht small { padding: 0 6px; color: var(--grijs); font-size: 12px; }
.bericht.ik { align-self: flex-end; align-items: flex-end; }
.bericht.ik p { border-bottom-right-radius: var(--r-xs); background: var(--blauw); color: #fff; }
/* De tekst komt uit --gelezen op de berichtenlijst, in de taal van de lezer. */
.bericht.ik.gelezen small::after { content: " · " var(--gelezen, "Gelezen"); }
.bericht.ander { align-self: flex-start; }
.bericht.ander p { border-bottom-left-radius: var(--r-xs); background: var(--licht); color: var(--ink); }
.bericht.systeem { align-self: center; max-width: 92%; text-align: center; }
.bericht.systeem p { padding: 8px 12px; border-radius: var(--r-m); background: var(--blauw-z); color: var(--tekst); font-size: 14px; }
.bericht.systeem small { display: none; }
.schrijfvak, .gesprek-dicht { position: sticky; bottom: 0; z-index: 5; order: 4; border-top: 1px solid var(--lijn); background: #fff; }
.schrijfvak { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.schrijfvak .invoer { height: 48px; min-height: 48px; max-height: 180px; padding: 13px 14px; font-weight: 400; line-height: 1.4; resize: none; }
.schrijfknop { width: 48px; height: 48px; padding: 0; }
.schrijfknop .ic { width: 20px; height: 20px; }
.schrijfvak .veld-fout, .schrijf-fout { grid-column: 1 / -1; margin: 0; color: #C2362B; font-size: 14.5px; font-weight: 500; }
.gesprek-dicht { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--licht); }
.gesprek-dicht p { display: flex; align-items: center; gap: 8px; color: var(--tekst); font-size: 15px; }
.gesprek-dicht .ic { width: 18px; height: 18px; color: var(--grijs); }

/* Premium, Boost, betalen en facturen */
.prijs-wrap { max-width: 880px; }
.mijnmelding.goed { border-color: #BFE3D4; }
.mijnmelding.goed .stap-ic, .tussen-ic.goed { background: var(--goed-z); color: var(--goed); }
.plannen-form { margin-top: 24px; }
.plannen { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.plan input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.plan-kaart { position: relative; display: grid; gap: 4px; height: 100%; padding: 18px 20px; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--lijn-d); cursor: pointer; transition: box-shadow var(--snel) var(--ease), background-color var(--snel) var(--ease); }
.plan:hover .plan-kaart { box-shadow: inset 0 0 0 1px var(--ink); }
.plan input:checked + .plan-kaart { background: var(--blauw-z); box-shadow: inset 0 0 0 2px var(--blauw); }
.plan input:focus-visible + .plan-kaart { outline: 3px solid var(--blauw); outline-offset: 2px; }
/* Het label zit als een tabje op de rand, zodat de kaarten op dezelfde hoogte beginnen. */
.plan-label { position: absolute; left: 16px; top: -13px; box-shadow: 0 0 0 3px var(--licht); }
.plan input:checked + .plan-kaart .plan-label { background: var(--blauw); color: #fff; }
.plannen { padding-top: 13px; }
.plan-naam { font-size: 17px; font-weight: 700; }
.plan-prijs { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.plan-prijs small { color: var(--grijs); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.plan-totaal { color: var(--tekst); font-size: 14.5px; }
.plannen-form .knop { margin-top: 18px; }
#super .mijnblok-links { display: grid; justify-items: start; gap: 12px; }
#super .vinkregel { margin-top: 0; font-size: 15px; }
.plannen-form .hint { margin-top: 10px; }
.vergelijk { margin-top: 28px; }
.vergelijk-tabel { margin-top: 12px; }
.vergelijk-rij { display: grid; grid-template-columns: minmax(0, 1fr) 64px 76px; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; }
.vergelijk-rij:last-child { border-bottom: 0; }
.vergelijk-rij.kop { padding-top: 0; color: var(--grijs); font-size: 13.5px; font-weight: 700; }
.vergelijk-rij > :not(:first-child) { text-align: center; }
.vergelijk-rij .ic { width: 20px; height: 20px; color: var(--goed); stroke-width: 2.6; }
.vergelijk-rij .nee .ic { color: var(--lijn-d); }
.vergelijk-rij .prem { font-weight: 600; }
.ster-ic { width: 18px; height: 18px; margin-right: 6px; color: #D99A00; vertical-align: -3px; }
.boost-punten { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.boost-punten li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.boost-punten h3 { margin-top: 2px; font-size: 16.5px; font-weight: 600; }
.boost-punten p { margin-top: 2px; color: var(--tekst); font-size: 15px; }
.boost-aan { display: flex; align-items: center; gap: 8px; color: #8A5A00; font-weight: 600; }
.boost-aan .ic { width: 18px; height: 18px; color: #D99A00; }
.zichtbaar-uit .knop .ic { width: 16px; height: 16px; color: #D99A00; }
.label.boost { background: #FFF4D6; color: #8A5A00; }
.ruil-grens { margin-top: 8px; color: var(--tekst); font-size: 14.5px; }
.ruil-grens .tekstlink { font-size: 14.5px; }
.uitgelicht-blok { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.uitgelicht-blok h2 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; }
.uitgelicht-blok h2 .ic { color: #D99A00; }
.premium-slot { justify-content: space-between; }
.testknoppen { margin-top: 20px; }
.tussen-noot { margin-top: 20px; }
.abonnement-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; }
.betaallijst { display: grid; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--lijn); list-style: none; }
.betaallijst li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.betaal-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.betaal-kop strong { font-size: 15.5px; font-weight: 600; }
.betaal-kop span { font-weight: 600; white-space: nowrap; }
.betaal-meer { color: var(--grijs); font-size: 14px; }
.betaal-meer .tekstlink { font-size: 14px; }
.betaal-status.betaald { color: var(--goed); }
.betaal-status.mislukt, .betaal-status.verlopen, .betaal-status.teruggedraaid { color: #C2362B; }
.factuur-pagina { padding: 24px 20px 64px; background: var(--licht); }
.factuur-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 760px; margin: 0 auto 16px; font-weight: 600; }
.factuur { max-width: 760px; margin: 0 auto; padding: 32px 24px; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; }
.factuur-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.factuur-kop h1 { font-size: 1.8rem; text-align: right; }
.factuur-kop p { margin-top: 4px; color: var(--tekst); text-align: right; }
.factuur-partijen { display: grid; gap: 20px; margin-top: 32px; }
.factuur-partijen h2 { margin-bottom: 4px; color: var(--grijs); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.factuur-partijen p { line-height: 1.6; }
.factuur-tabel { width: 100%; margin-top: 32px; border-collapse: collapse; font-size: 15.5px; }
.factuur-tabel th, .factuur-tabel td { padding: 10px 0; border-bottom: 1px solid var(--lijn); text-align: left; }
.factuur-tabel td:last-child, .factuur-tabel th:last-child { text-align: right; }
.factuur-tabel thead th { color: var(--grijs); font-size: 13px; }
.factuur-tabel tfoot th { font-weight: 500; }
.factuur-tabel .totaal th, .factuur-tabel .totaal td { border-bottom: 0; font-size: 17px; font-weight: 700; }
.factuur-noot { margin-top: 24px; color: var(--tekst); font-size: 14.5px; }
@media print {
  .kop, .menu, .factuur-acties, .meldingen { display: none !important; }
  .factuur-pagina { padding: 0; background: none; }
  .factuur { border: 0; }
}

/* Melden en blokkeren */
.melden-link { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 14.5px; }
.melden-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--grijs); }
.melden-link a:hover { color: var(--ink); }
.melden-link .ic { width: 16px; height: 16px; }
.keuzekaart.klein span { padding: 12px 14px; }
.tekstvak.klein { min-height: 110px; }
.knoppenrij.klein { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.knoppenrij.klein .knop .ic { width: 16px; height: 16px; }
.mijnmelding.gevaar { border-color: #F0C6C1; }
.mijnmelding.gevaar .stap-ic { background: #FBEAE8; color: #C2362B; }

/* Beheer */
.beheer { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - var(--kop-h)); background: var(--licht); }
.beheer-nav { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px; border-bottom: 1px solid var(--lijn); background: #fff; scrollbar-width: none; }
.beheer-nav::-webkit-scrollbar { display: none; }
.beheer-titel { display: none; }
.beheer-nav a { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-s); color: var(--tekst); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.beheer-nav a:hover { background: var(--licht); color: var(--ink); }
.beheer-nav a[aria-current="page"] { background: var(--blauw-z); color: var(--blauw); }
.beheer-nav .ic { width: 18px; height: 18px; }
.beheer-nav .teller.nieuw { margin-left: 0; background: #C2362B; }
.beheer-inhoud { min-width: 0; padding: 24px 16px 64px; }
.beheer-kop { margin-bottom: 16px; }
.beheer-kop h1 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
.beheer-kop p { margin-top: 4px; color: var(--tekst); }
.beheer-kop .mijn-labels { margin-top: 10px; }
.beheer-blok { margin: 0 0 16px; padding: 18px; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; }
.beheer-blok h2 { margin-bottom: 8px; font-size: 1.1rem; }
.beheer-twee { display: grid; gap: 0 16px; }
.beheer-twee .beheer-blok { min-width: 0; }
.beheer .mijnmelding { margin: 0 0 16px; }
.aandacht { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.aandacht a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border: 1px solid #F0C6C1; border-radius: var(--r-m); background: #fff; color: var(--ink); text-decoration: none; }
.aandacht a:hover { border-color: #C2362B; }
.aandacht .ic { color: #C2362B; }
.aandacht strong { flex: 1; min-width: 200px; font-size: 15px; font-weight: 600; }
.aandacht span { color: var(--blauw); font-size: 14.5px; font-weight: 600; }
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.tegels a, .tegels div { display: grid; gap: 2px; height: 100%; padding: 14px; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; color: inherit; text-decoration: none; }
.tegels a:hover { border-color: var(--blauw-l); box-shadow: var(--sch-2); }
.tegel-label { color: var(--grijs); font-size: 13.5px; font-weight: 600; }
.tegel-getal { font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.15; }
.tegel-onder { color: var(--tekst); font-size: 13.5px; line-height: 1.35; }
.grafieken { display: grid; gap: 16px; margin-bottom: 16px; }
.grafiek { margin: 0; padding: 18px; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; }
.grafiek figcaption { margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.grafiek-vlak { position: relative; padding-top: 18px; }
.grafiek-max { position: absolute; top: 0; left: 0; color: var(--grijs); font-size: 12px; }
.staven { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; height: 140px; border-bottom: 1px solid var(--lijn-d); background: linear-gradient(var(--lijn) 1px, transparent 1px) 0 0 / 100% 50%; }
.staaf { position: relative; display: flex; align-items: flex-end; height: 100%; cursor: default; }
.staaf > span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--blauw); }
.staaf:hover > span { background: var(--blauw-d); }
/* Verborgen met display: een onzichtbare tooltip telt anders mee voor de breedte van de pagina. */
.staaf::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 2; display: none; padding: 6px 10px; border-radius: var(--r-s); background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.staaf:first-child::after { left: 0; transform: none; }
.staaf:last-child::after { left: auto; right: 0; transform: none; }
.staaf:hover::after { display: block; }
.grafiek-as { display: flex; justify-content: space-between; margin-top: 6px; color: var(--grijs); font-size: 12px; }
.grafiek-tabel { margin-top: 10px; font-size: 14px; }
.grafiek-tabel summary { color: var(--blauw); font-weight: 600; cursor: pointer; }
.grafiek-tabel .btabel { margin-top: 8px; }
.beheer-lijst { display: grid; margin: 0; padding: 0; list-style: none; }
.beheer-lijst li + li { border-top: 1px solid var(--lijn); }
.beheer-lijst a, .beheer-lijst li > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.beheer-lijst a:hover strong { color: var(--blauw); }
.beheer-lijst strong { font-size: 15px; font-weight: 600; }
.beheer-lijst span { color: var(--grijs); font-size: 13.5px; }
.beheer-lijst.ruim { border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; }
.beheer-lijst.ruim a { padding: 14px 16px; }
.beheer-citaat { color: var(--tekst) !important; font-style: italic; }
.beheer-zoek { display: grid; gap: 8px; margin-bottom: 16px; }
.beheer-zoek .knop { margin: 0; }
.btabel { width: 100%; border-collapse: collapse; border: 1px solid var(--lijn); border-radius: var(--r-l); background: #fff; font-size: 14.5px; }
.btabel th, .btabel td { padding: 10px 12px; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.btabel thead th { color: var(--grijs); font-size: 13px; font-weight: 700; white-space: nowrap; }
.btabel tbody tr:last-child td { border-bottom: 0; }
.btabel td a { color: var(--ink); font-weight: 600; }
.btabel td a:hover { color: var(--blauw); }
.btabel small { display: block; color: var(--grijs); font-size: 13px; }
.btabel.klein { font-size: 14px; }
.label.gevaar { background: #FBEAE8; color: #C2362B; }
.beheer-actie { display: grid; gap: 8px; margin-top: 12px; }
.beheer-actie .knop { justify-self: start; margin: 0; }
.beheer-actie.inline { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0; }
.beheer-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.beheer-acties form { margin: 0; }
.invoer.kort, .eenheidveld.kort { max-width: 160px; }
.tekstknop.gevaar-tekst { color: #C2362B; }
.beheer-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.beheer-fotos li { position: relative; overflow: hidden; border-radius: var(--r-s); background: var(--licht); }
.beheer-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.beheer-fotos form { margin: 0; }
.beheer-gesprek { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.beheer-gesprek li { padding: 10px 12px; border-radius: var(--r-m); background: var(--licht); }
.beheer-gesprek li.systeem { background: var(--blauw-z); }
.beheer-gesprek span { color: var(--grijs); font-size: 13px; font-weight: 600; }
.beheer-gesprek p { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.citaat { margin: 0 0 16px; font-style: italic; color: var(--tekst); }
.instelgroep { min-width: 0; }
.instelgroep legend { float: left; width: 100%; padding: 0; }
.instelgroep legend + * { clear: both; }
.instelgroep .schakelaar + .schakelaar { border-top: 1px solid var(--lijn); }
.instelgroep .schakelaar.hoofd { margin-bottom: 4px; padding: 14px; border-radius: var(--r-m); background: var(--blauw-z); }
.instelveld { padding: 6px 0 10px; }
.instelveld .veld-label { display: block; margin-top: 4px; margin-bottom: 6px; }
.instel-opslaan { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--licht) 30%); }
/* Op de gsm worden tabellen kaartjes: elke cel krijgt de kop als label. */
@media (max-width: 759px) {
  .btabel thead { display: none; }
  .btabel, .btabel tbody, .btabel tr, .btabel td { display: block; }
  .btabel tr { padding: 10px 14px; border-bottom: 1px solid var(--lijn); }
  .btabel tr:last-child { border-bottom: 0; }
  .btabel td { padding: 3px 0; border: 0; }
  .btabel td::before { content: attr(data-label); display: block; color: var(--grijs); font-size: 12.5px; font-weight: 700; }
  .btabel td:empty { display: none; }
}

/* Tussenpagina's */
.tussen { padding: 72px 0 96px; text-align: center; }
.tussen-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: var(--r-l); background: var(--blauw-z); color: var(--blauw); }
.tussen-ic .ic { width: 28px; height: 28px; }
.tussen h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.tussen .wrap > p { max-width: 560px; margin: 14px auto 0; color: var(--tekst); font-size: 1.1rem; }
.samenvatting { max-width: 560px; margin: 32px auto; padding: 20px; border: 1px solid var(--lijn); border-radius: var(--r-l); text-align: left; }
.samenvatting-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-weight: 600; }
.samenvatting .leeg { color: var(--grijs); font-size: 15px; }
.lijstchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lijstchips li { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--r-s); background: var(--blauw-z); color: var(--blauw); font-size: 14px; font-weight: 600; }
.tussen-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tussen .wrap > p + .tussen-knoppen { margin-top: 28px; }

/* Tekstpagina's (voorwaarden, privacy, cookies) */
.juridisch { padding: 56px 0 88px; }
.juridisch h1 { margin-bottom: .3em; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.bijgewerkt { margin-bottom: 28px; color: var(--grijs); font-size: 15px; }
.tekst { max-width: 72ch; color: var(--tekst); }
.tekst p { margin-bottom: 1em; }
.tekst strong { color: var(--ink); }
.tekst a { color: var(--blauw); }
.tekst h2 { margin: 2em 0 .5em; color: var(--ink); font-size: 1.35rem; letter-spacing: -.01em; scroll-margin-top: calc(var(--kop-h) + 16px); }
.tekst ul, .tekst ol { margin: 0 0 1em; padding-left: 1.3em; }
.tekst li { margin-bottom: .35em; }
.tekst li::marker { color: var(--blauw); }
.tekst table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 15.5px; }
.tekst th, .tekst td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lijn-d); text-align: left; vertical-align: top; }
.tekst th { color: var(--ink); font-weight: 700; }
.tekst td { overflow-wrap: anywhere; }
.inhoud { margin: 0 0 8px; padding: 20px 24px; border-radius: var(--r-l); background: var(--licht); }
.inhoud strong { display: block; margin-bottom: 8px; }
.inhoud ul { margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 32px; }
.inhoud li { margin-bottom: 4px; break-inside: avoid; }
.inhoud a { text-decoration: none; }
.inhoud a:hover { color: var(--blauw); text-decoration: underline; }
mark.invullen { padding: 0 .3em; border-radius: var(--r-xs); background: #FDF1DE; color: #8A5300; font-weight: 700; }

/* Kleine gsm */
@media (max-width: 379px) {
  .logo { gap: 8px; font-size: 19px; }
  .logo-merk { width: 30px; height: 30px; }
}

@media (max-width: 479px) {
  .stadknoppen { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
  .plattegrond text { font-size: 24px; }
  .tekst thead { display: none; }
  .tekst tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--lijn-d); }
  .tekst td { display: block; padding: 2px 0; border: 0; }
  .tekst td::before { content: attr(data-label); display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
}

@media (min-width: 480px) {
  .kop .knop.s { display: inline-flex; }
  .accountveld { grid-template-columns: 1fr auto; column-gap: 8px; }
  .accountveld > * { grid-column: 1 / -1; }
  .accountveld > .invoer { grid-column: 1; }
  .accountveld > .knop { order: 0; grid-column: 2; grid-row: 2; height: 52px; margin-top: 0; }
}

@media (min-width: 560px) {
  .veldrij { grid-template-columns: 1fr 1fr; }
  .mijnkaart { grid-template-columns: 5fr 6fr; }
  /* De foto vult zijn vak; de tekst bepaalt de hoogte, ook bij een staande foto. */
  .mijnkaart-beeld { position: relative; min-height: 240px; }
  .mijnkaart-beeld img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .mijnmelding form, .mijnmelding > .knop { grid-column: 2; justify-self: start; }
  .mijnmelding .knop { width: auto; }
  .plannen { grid-template-columns: repeat(3, 1fr); }
  .tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .beheer-zoek { grid-template-columns: minmax(0, 1fr) auto auto; }
  .beheer-actie:not(.inline) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .vergelijk-rij { grid-template-columns: minmax(0, 1fr) 96px 110px; }
  .plannen.twee { grid-template-columns: repeat(2, 1fr); }
  .factuur { padding: 48px; }
  .factuur-partijen { grid-template-columns: 1fr 1fr; }
  .tabs { display: flex; gap: 4px; }
  .tabs a { flex-direction: row; gap: 8px; padding: 12px 14px; font-size: 15.5px; }
  .tab-naam .lang { display: inline; }
  .tab-naam .kort { display: none; }
  .ruilkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { flex-direction: row; align-items: center; gap: 16px; }
}

@media (min-width: 760px) {
  .galerij { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 210px 210px; gap: 8px; margin: 0; overflow: hidden; border-radius: var(--r-xl); }
  .galerij-foto, .galerij-slot { aspect-ratio: auto; }
  .galerij-foto img { aspect-ratio: auto; }
  .galerij > :first-child { grid-row: span 2; }
  .galerij.aantal-1 { grid-template-columns: 1fr; grid-template-rows: 460px; }
  .galerij.aantal-1 > :first-child { grid-row: auto; }
  .galerij.aantal-2 { grid-template-columns: 1fr 1fr; }
  .galerij.aantal-2 > :nth-child(2) { grid-row: span 2; }
  .galerij.aantal-2.met-slot { grid-template-columns: 2fr 1fr; }
  .galerij.aantal-3 { grid-template-columns: 2fr 1fr; }
  .galerij.aantal-4 > :nth-child(2) { grid-row: span 2; }
  .galerij-teller { display: none; }
  .feiten { grid-template-columns: repeat(4, 1fr); }
  .pastlijsten { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 32px; }
}

@media (min-width: 720px) {
  .zoekkaart { grid-template-columns: 1fr 1.1fr .8fr; align-items: center; }
  .veld + .veld { border-top: 0; box-shadow: -1px 0 0 var(--lijn); }
  .zoekkaart .knop { grid-column: 1 / -1; }
  .chips { margin: 0 0 24px; padding: 0; flex-wrap: wrap; overflow: visible; }
  .kaarten { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; overflow: visible; }
  .voet-in { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 900px) {
  .zoekapp { display: grid; grid-template-columns: 460px 1fr; height: calc(100vh - var(--kop-h)); max-height: 960px; }
  .zoekapp .zoekapp-kaart { position: relative; inset: auto; }
  .paneel { position: relative; z-index: 1; max-height: none; padding: 28px 28px 24px; border-right: 1px solid var(--lijn); border-radius: 0; box-shadow: none; }
  .paneel.groot { max-height: none; }
  .greep { display: none; }
  .paneel h1 { font-size: 2.1rem; }
  .aanmelden-kaart .stap-form { margin: 16px -28px -24px; padding: 12px 28px 24px; }
  .filters { flex-wrap: wrap; margin: 16px 0 0; padding: 0; overflow: visible; }
  .uitgelicht { display: block; left: 484px; }
}

@media (min-width: 1000px) {
  .stapscherm { grid-template-columns: minmax(520px, 1fr) 1fr; }
  .stap-paneel { padding: 40px 48px 64px; }
  .stap-beeld { position: sticky; top: var(--kop-h); display: block; height: calc(100svh - var(--kop-h)); overflow: hidden; }
  .stap-beeld img { width: 100%; height: 100%; object-fit: cover; }
  .stap-beeld .stap-tip { position: absolute; left: 32px; bottom: 32px; }
  .stap-kaart { position: sticky; top: var(--kop-h); display: block; height: calc(100svh - var(--kop-h)); background: #EEF0F3; }
  .stap-kaart .maplibregl-map { position: absolute; inset: 0; }
  .adreskaart { display: none; }
  .mijn-pagina { padding: 40px 0 96px; }
  .mijn-wrap { max-width: 1120px; }
  .mijn { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .mijn-hoofd, .mijn-zij { display: grid; gap: 16px; }
  .ruil { display: grid; grid-template-columns: minmax(0, 1fr) 42%; }
  /* Links gelijk met het logo in de kop. */
  .ruil-lijst { padding: 32px 32px 64px max(32px, calc((100vw - 1240px) / 2 + 20px)); }
  .ruil-kaart { position: sticky; top: var(--kop-h); display: block; height: calc(100svh - var(--kop-h)); }
  .ruil-kaart-dicht, .kaartknop { display: none; }
  .toast { bottom: 24px; }
  .woning-pagina { padding: 24px 0 96px; }
  .woning-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; margin-top: 28px; }
  .woning-zij { position: sticky; top: calc(var(--kop-h) + 24px); align-self: start; }
  .beheer { grid-template-columns: 230px minmax(0, 1fr); }
  .beheer-nav { position: sticky; top: var(--kop-h); align-self: start; flex-direction: column; gap: 2px; height: calc(100svh - var(--kop-h)); padding: 24px 14px; border-right: 1px solid var(--lijn); border-bottom: 0; overflow: visible; }
  .beheer-titel { display: block; margin: 0 12px 10px; color: var(--grijs); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .beheer-nav .teller.nieuw { margin-left: auto; }
  .beheer-inhoud { padding: 32px 40px 80px; }
  .beheer-twee { grid-template-columns: 1fr 1fr; }
  .grafieken { grid-template-columns: 3fr 2fr; }
  .gesprek { display: grid; grid-template-columns: minmax(0, 1fr) 360px; max-width: 1240px; margin: 0 auto; border-left: 1px solid var(--lijn); border-right: 1px solid var(--lijn); }
  .gesprek-hoofd { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--lijn); }
  .gesprek-balk { padding: 10px 20px; }
  .berichten { padding: 20px 24px; }
  .schrijfvak { padding: 12px 20px; }
  .gesprek-zij { position: sticky; top: var(--kop-h); align-self: start; max-height: calc(100svh - var(--kop-h)); overflow-y: auto; border-bottom: 0; background: #fff; }
  .gesprek-zij summary { display: none; }
  .zij-inhoud { padding: 20px; }
}

/* Alleen plakken als de zijkolom op het scherm past, anders valt de onderkant weg. */
@media (min-width: 1000px) and (min-height: 820px) {
  .mijn-zij { position: sticky; top: calc(var(--kop-h) + 24px); }
}

@media (min-width: 1000px) {
  :root { --kop-h: 76px; }
  .kop-nav { display: flex; gap: 28px; margin-left: auto; font-size: 15.5px; font-weight: 600; }
  .kop-nav a { text-decoration: none; opacity: .92; }
  .kop-nav a:hover, .kop-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .kop-rechts { margin-left: 16px; }
  .kop .inloggen { display: inline-flex; }
  .taal-kop { display: grid; }
  .menu-knop { display: none; }
  .hero { align-items: center; min-height: 780px; padding: 150px 0 104px; }
  .hero::before { background: linear-gradient(90deg, rgba(11, 24, 44, .82) 0%, rgba(11, 24, 44, .55) 42%, rgba(11, 24, 44, .05) 75%), linear-gradient(180deg, rgba(11, 24, 44, .35), transparent 30%); }
  .zoekkaart { max-width: 960px; grid-template-columns: 1.1fr 1.2fr .8fr auto; }
  .zoekkaart .knop { grid-column: auto; margin: 0 0 0 8px; padding: 0 28px; }
  .sectie, .band { padding: 112px 0; }
  .slot { padding-bottom: 112px; }
  .kaarten { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .werk { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .werk-beeld { position: relative; }
  .werk-beeld img { aspect-ratio: 4 / 5; }
  .status { position: absolute; right: -32px; bottom: 40px; width: 340px; margin: 0; }
  .band-grid { grid-template-columns: 5fr 7fr; gap: 80px; }
  .kaartpaneel { padding: 16px; }
  .vragen-grid { grid-template-columns: 4fr 7fr; gap: 80px; }
  .slot-in { grid-template-columns: 1fr auto; padding: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* Meldingen verdwijnen dan in één keer, zonder uitfaden. */
  .meldingen { animation: melding-weg 6s steps(1, end) forwards !important; }
}