/* Basis: pagina, zones, balk, kruimels, melding, knop, veld, sluitknop, bronvermelding. */
* { box-sizing: border-box; }
html { font-size: var(--tekst-basis); background: #eef0ea; } /* IMP-281: kaartkleur, geen bleekroze band onder/boven de kaart */ /* basis 17 px, zoals het ontwerpsysteem */
html, body { margin: 0; height: 100%; overflow: hidden; }
/* IMP-254 (iPhone gebruikte niet de hele schermhoogte): `100%` is in Safari de kleine viewport (werkbalken uitgeklapt).
   Klappen de werkbalken in (liggend, na scrollen, iOS 26 met zwevende balk), dan bleef eronder een lege strook.
   100dvh volgt de zichtbare hoogte, met en zonder adresbalk, staand en liggend en als app op het beginscherm.
   Browsers zonder dvh houden 100%. */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
/* IMP-329 (opdrachtgever 21-10, schermafdruk Safari-tabblad): iOS 26 Safari tekent fixed-inhoud niet onder de zwevende werkbalk
   en dvh eindigt boven die balk; daar bleef een lichte band. De pagina is daarom zo hoog als het grote scherm (lvh: werkbalk
   weggedacht, in iOS 26 tot de schermrand) en de kaart is gewone inhoud daarbinnen (#kaart absolute, hieronder). Op de computer
   is lvh gelijk aan de vensterhoogte. Terugval: browsers zonder lvh houden dvh, zonder dvh 100% (100vh blijft verboden). */
@supports (height: 100lvh) { html, body { height: 100lvh; } }
body {
  position: relative; /* IMP-329: body (100lvh) is het blok van #kaart; anders meet absolute aan het beginblok (kleine viewport) */
  background: #eef0ea; /* IMP-377: kaartkleur; Safari 26 trekt deze door onder statusbalk en Safari-balk (was roze --kleur-pagina) */
  color: var(--kleur-tekst);
  font: var(--gewicht-normaal) var(--tekst-basis)/var(--regelhoogte) var(--letter);
  -webkit-font-smoothing: antialiased;
}
/* IMP-291 (opdrachtgever 20-10: "In de interfaces wil ik niet kunnen zoomen. Alleen kaart"): knijpen en dubbeltik zoomen alleen de
   kaart. Alles naast #kaart (balk, vellen, kaartje, panelen, knoppen) krijgt touch-action: manipulation (scrollen en tikken
   blijven, knijp- en dubbeltikzoom van de pagina niet). :where() houdt de specificiteit nul: eigen regels (pan-y, none) winnen.
   De kaart zelf wordt niet geraakt; MapLibre houdt knijp-, wiel- en dubbeltikzoom (versterkt, IMP-288). */
:where(body > :not(#kaart), body > :not(#kaart) *) { touch-action: manipulation; }
/* Invoervelden ≥ 16 px: iOS zoomt anders in bij focus. */
input:not([type="checkbox"], [type="radio"]), select, textarea { font-size: max(16px, 1rem); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Laden: alleen een dunne lijn bovenaan, geen tekst. */
#laadlijn { position: fixed; z-index: 5; top: 0; left: 0; width: 30%; height: 3px; background: var(--kleur-merk); animation: laden 1.2s ease-in-out infinite; }
@keyframes laden { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { #laadlijn { width: 100%; animation: none; opacity: .5; } }
/* IMP-377 (besluit opdrachtgever 22-10, ± 16:20: "banden accepteren, eenvoudig"): standaard en eenvoudig. De kaart is weer fixed, inset 0
   (zoals IMP-281); de IMP-329-omweg (absolute in een 100lvh-pagina) hielp in de simulator niet. Safari 26 tekent fixed-inhoud niet onder
   statusbalk en zwevende Safari-balk, maar trekt de effen kleur van de pagina door: die is nu de kaartkleur (html en body), niet roze.
   Eigen stapellaag (z-index 0): vellen, kaartje en knoppen (fixed, z ≥ 1) blijven erboven en houden env(safe-area-inset-*). */
#kaart { position: fixed; inset: 0; z-index: 0; }

/* ── Vaste zones: balk, kruimels, melding linksboven; rechtsonder alleen de bron; kaartje en vellen erboven. ── */
#boven {
  position: fixed; z-index: 2;
  top: max(var(--ruimte-kaartrand), env(safe-area-inset-top));
  left: max(var(--ruimte-kaartrand), env(safe-area-inset-left));
  right: max(var(--ruimte-kaartrand), env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: var(--stap-1);
  pointer-events: none;
}
#boven > * { pointer-events: auto; }
/* IMP-376: of de Filters-knop in de balk staat of als lipje eronder, hangt af van de filters uit de link of de bewaarde zoekopdracht; die kent de
   pagina pas als de app start. De balk wordt daarom pas getoond (zacht, 200 ms) als de app zijn eerste stand heeft (html.rust-klaar, rust.js), zodat
   er na het laden niets verspringt. Vangnet: gaat er iets mis, dan staat de balk er na 2,5 s alsnog. */
html:not(.rust-klaar) #boven { opacity: 0; animation: balk-vangnet 1ms 2.5s forwards; }
html.terug-wacht #boven { opacity: 0; pointer-events: none; } /* IMP-413: balk pas als bekend is of het rondje "Sinds je vorige bezoek" erbij hoort (terugkomst.js, hooguit 2,5 s) */
@keyframes balk-vangnet { to { opacity: 1; } }

/* IMP-051 balk */
/* Zone 1: Plaats · Budget · Filters · ♥ als iOS-capsules. Vast raster: niets verspringt bij kiezen. */
/* IMP-059: vier gelijke capsules; de balk staat precies in het midden (telefoon: rand tot rand met gelijke marges). */
/* IMP-267 (besluit 20-10): in rust drie knoppen: Filters (neemt de rest), Prijswijzigingen (eigen breedte) en ♥ (rond, even hoog als breed). */
.balk { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--capsule-hoogte); gap: var(--capsule-tussen); width: min(100%, var(--balk-breedte)); align-self: center; }
.capsule {
  height: var(--capsule-hoogte); min-width: 0; padding: var(--capsule-padding);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--capsule-hoek); border: 2px solid transparent; /* IMP-128: 2 px, zie .knop */ background: var(--capsule-bg);
  -webkit-backdrop-filter: var(--capsule-materiaal); backdrop-filter: var(--capsule-materiaal); box-shadow: var(--capsule-schaduw);
  color: var(--capsule-tekstkleur); font: var(--capsule-gewicht) var(--capsule-tekst)/1.2 var(--ios-letter); letter-spacing: -.01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  /* IMP-199 (kleurflits): alleen de beweging veert. Kiezen wisselt vlak, rand en tekst in hetzelfde beeld; met een
     kleurovergang op het vlak werd de tekst meteen wit op een nog licht vlak (even te weinig contrast). Samen laten
     overgaan helpt niet: halverwege zijn tekst en vlak allebei middentonen. */
  transition: transform var(--veer-terug);
}
.capsule .tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capsule .extra { flex: none; white-space: nowrap; }
/* IMP-317: de smallere spaties van IMP-314 (#pil-filters word-spacing) zijn weg: zonder "+n" past "Delft · € 500k" ook zo, vanaf 320 px. */
.capsule.gekozen { background: var(--capsule-gekozen-bg); border-color: var(--capsule-gekozen-rand); }
.capsule--rond { font-size: var(--tekst-l); color: var(--kleur-merk); }
@media (hover: hover) { .capsule:hover { background: rgba(255, 255, 255, .96); } .capsule.gekozen:hover { background: var(--capsule-gekozen-bg); } }
/* Druk-reactie: indrukken 94 %, loslaten met doorveren. */
.capsule:active, .knop:active, .rij:active, .kruimel__wis:active, .blokje button:active {
  transform: scale(var(--druk-schaal)); transition: transform var(--druk-in);
}
.capsule:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }
/* IMP-143: zichtbaar 44, raakvlak hoofdactie 56 (peutertoets) — onzichtbaar, alleen verticaal: 8 px omhoog, 4 omlaag,
   zodat het niet overlapt met de kleine bediening eronder (die neemt 4 van de 8 px tussenruimte). */
.balk { position: relative; z-index: 1; } /* bij afronding (rand 1–1,5 px) wint het raakvlak van de hoofdactie */
.balk .capsule { position: relative; --rand: 2px; } /* --rand = de rand van .capsule (2 px, IMP-128) */
.balk .capsule::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--maat) - var(--maat-tik) - (var(--maat-klein) - var(--maat)) / 2 - var(--rand, 0px)); bottom: calc((var(--maat-klein) - var(--maat)) / 2 - var(--rand, 0px)); }
/* IMP-051 balk (einde) */

/* Zone 2 en 3: één rij kruimels, en één rij melding; horizontaal scrollbaar, nooit een tweede regel. */
.kruimels {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--ruimte-2);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: var(--stap-1); margin: calc(-1 * var(--stap-1)); /* ruimte voor de schaduw, zonder de rand te verschuiven */
}
.kruimels::-webkit-scrollbar { display: none; }
.kruimels:empty { display: none; }
@media (min-width: 769px) {
  .kruimels { align-self: center; width: max-content; max-width: calc(100% + 2 * var(--stap-1)); }
}

/* Bouwsteen: knop (2.2). */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--maat); padding: 0 var(--stap-2); border-radius: var(--hoek-bediening);
  border: 2px solid var(--kleur-merk); background: var(--kleur-merk); color: #f8f8f8;
  /* IMP-128: geen haarlijnen (≥ 1,5 px). 2 px en niet 1,5: Chrome en Safari op een gewoon scherm (1x) ronden 1,5 af naar 1 px (gemeten). */
  font: var(--gewicht-half) var(--tekst-m)/1.2 var(--letter); cursor: pointer;
  transition: transform var(--veer-terug), background var(--tijd-kleur); flex: none; white-space: nowrap;
}
.knop:hover { background: var(--kleur-merk-hover); }
.knop:active { background: var(--kleur-merk-actief); }
.knop:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }
.kruimels .knop { min-height: var(--maat-klein); height: var(--maat-klein); box-shadow: var(--capsule-schaduw); font: var(--gewicht-half) var(--tekst-s)/1.2 var(--ios-letter); }

/* Bouwsteen: kruimel (2.3), in iOS-stijl (IMP-051). */
.kruimel {
  flex: none; display: inline-flex; align-items: center; height: var(--maat-klein); padding-left: var(--stap-2);
  border-radius: var(--hoek-rond); background: var(--capsule-bg);
  -webkit-backdrop-filter: var(--capsule-materiaal); backdrop-filter: var(--capsule-materiaal); box-shadow: var(--capsule-schaduw);
  color: var(--kleur-merk-donker); font: 600 var(--tekst-s) var(--ios-letter); white-space: nowrap;
}
.kruimel__wis {
  border: 0; background: transparent; color: var(--kleur-merk);
  width: var(--maat-klein); height: var(--maat-klein); margin-left: calc(-1 * var(--stap-1));
  font: var(--gewicht-vet) var(--tekst-m)/1 var(--ios-letter); cursor: pointer; transition: transform var(--veer-terug);
}
.kruimel__wis:hover { color: var(--kleur-merk-donker); }
.kruimel__wis:focus-visible { outline: 2px solid var(--kleur-focus); border-radius: var(--hoek-rond); }
/* IMP-143: kleine bediening zichtbaar 36, raakvlak 44 (4 px onzichtbaar rondom). */
.kruimel__wis, .kruimels .knop { position: relative; }
.kruimels .knop { --rand: 2px; }
.kruimel__wis::after, .kruimels .knop::after { content: ''; position: absolute; inset: calc((var(--maat-klein) - var(--maat)) / 2 - var(--rand, 0px)); }
/* Korte melding (geen huizen, fout, terugkomst): stijl van de lege staat (2.6). */
.melding {
  flex: none; display: inline-flex; align-items: center; height: var(--maat-klein); padding: 0 var(--stap-2); border-radius: var(--hoek-bediening);
  border: 2px solid rgba(120,47,64,.3); background: rgba(255,251,251,.96); /* IMP-128: 2 px, zie .knop */
  color: var(--kleur-merk-donker); font: 500 var(--tekst-s)/1.3 var(--ios-letter); box-shadow: var(--schaduw-melding); white-space: nowrap;
}
.melding a { color: var(--kleur-merk); }

/* Bouwsteen: invoerveld (2.4/2.5). */
.veld {
  width: 100%; min-width: 0; min-height: var(--maat); padding: 0 var(--stap-2);
  border-radius: var(--hoek-bediening); border: 2px solid var(--kleur-rand-veld); /* IMP-128: 2 px, zie .knop */
  background: var(--kleur-kaartje); font: var(--tekst-invoer) var(--letter); color: var(--kleur-tekst-veld);
  -webkit-appearance: none; appearance: none;
}
.veld:focus-visible { outline: 2px solid var(--kleur-focus); border-color: var(--kleur-merk); } /* IMP-101: alleen :focus-visible */
.veld::placeholder { color: var(--kleur-tekst-zacht); }

.sluit {
  flex: none; width: var(--maat); height: var(--maat); margin: 0; border: 0; border-radius: var(--hoek-bediening);
  background: transparent; color: var(--kleur-tekst-ghost); font: var(--tekst-kop)/1 var(--letter); cursor: pointer;
}
.sluit:hover { background: var(--kleur-zacht); }
.sluit:focus-visible { outline: 2px solid var(--kleur-focus); }

/* IMP-307 (opdrachtgever 20-10: "Vergeet de onderste knoppen nu niet te verlagen"): de bronregel staat verticaal rechts (IMP-277),
   dus onderin is de strook vrij. De onderste knoppen (steun, ⓘ, 3D; kompas erboven) staan 16 px (de zijmarge van de computer)
   plus de safe-area onderin (thuisbalk iPhone) van de onderrand, telefoon en computer. Was: max(kaartrand, safe-area) + 24 px.
   Eén variabele voor alle drie: ze blijven op één lijn. Een open vel verandert hier niets aan (niets verspringt). */
:root { --knoppen-onder: calc(var(--stap-2) + env(safe-area-inset-bottom, 0px)); }
/* IMP-100: 3D aan/uit, rond, rechtsonder boven de licentieregel; rechts op dezelfde kaartrand als de balk.
   Uit = wit (zoals ♥), aan = gevuld bordeaux. Onder vellen, kaartje en panelen (z-index 1).
   IMP-113: op de computer is een paneel rechts (advertentie) een obstakel: de knop staat dan op de rechterrand van het
   vrije kaartvlak, met dezelfde marge (--rechts-ruimte uit computer.css: paneel + marge aan beide kanten; anders 0). */
.knop-3d {
  position: fixed; z-index: 1; width: var(--maat); height: var(--maat); padding: 0;
  right: max(var(--ruimte-kaartrand), env(safe-area-inset-right), var(--rechts-ruimte, 0px));
  bottom: var(--knoppen-onder);
  font-size: var(--capsule-tekst); color: var(--capsule-tekstkleur);
}
.knop-3d.gekozen, .knop-3d.gekozen:hover { background: var(--kleur-merk); border-color: var(--kleur-merk); color: #fff; }
/* IMP-113: kompas, 44 px, zelfde glas als 3D; midden boven de 3D-knop, 8 px ertussen. De naald wijst naar het noorden
   (--draai, gezet door drieD.js). Alleen zichtbaar in 3D als de kaart gedraaid is. */
.knop-kompas {
  position: fixed; z-index: 1; width: 44px; height: 44px; padding: 0;
  right: calc(max(var(--ruimte-kaartrand), env(safe-area-inset-right), var(--rechts-ruimte, 0px)) + (var(--maat) - 44px) / 2);
  bottom: calc(var(--knoppen-onder) + var(--maat) + var(--stap-1));
}
.knop-kompas[hidden], .knop-3d[hidden] { display: none; }
/* IMP-280/330: telefoon, huis open: de balkknoppen bovenin klappen in (omhoog weg, niet meer te tikken; de kop van het huis staat dan
   op hun plek, kaartje.css); sluiten klapt ze terug. Alleen waar het kaartje de kop bovenin zet (ook kaartje.css: ≥ 560 px hoog).
   IMP-376 (besluit opdrachtgever 22-10 15:05, onderdeel 2): ook op tablet en computer (≥ 769 px) gaat de balk uit beeld zolang een huis
   of de aanbodpagina open is; terug via ×, Esc of een tik op de kaart (het kaartje gaat dicht, de balk schuift terug). Uit beeld is niet
   weg: de balk is alleen doorzichtig en niet te tikken (geen visibility: hidden), en komt met Tab (of Shift+Tab) terug in beeld
   (:focus-within); een schermlezer vindt hem gewoon. Weg 200 ms (--veer-dicht), terug 240 ms; bij "minder beweging" direct (tokens). */
#boven { transition: transform var(--veer-dicht) var(--veer-curve), opacity var(--veer-dicht) var(--veer-curve); }
@media (max-width: 768px) and (min-height: 560px) {
  body:has(#kaartje.kop-boven:not([hidden])) #boven { transform: translateY(calc(-100% - var(--stap-2))); opacity: 0; pointer-events: none; }
  body:has(#kaartje.kop-boven:not([hidden])) #boven > * { pointer-events: none; }
}
@media (min-width: 769px) {
  body:not(.klapt-dicht):has(#kaartje:not([hidden])) #boven, body:not(.klapt-dicht).advertentie-open #boven { transform: translateY(calc(-100% - var(--stap-2))); opacity: 0; pointer-events: none; }
  body:not(.klapt-dicht):has(#kaartje:not([hidden])) #boven > *, body:not(.klapt-dicht).advertentie-open #boven > * { pointer-events: none; }
}
/* Tab: de weggeschoven balk komt terug zolang de focus erin staat (weer weg zodra de focus eruit gaat). */
html body:has(#kaartje:not([hidden])) #boven:focus-within, html body.advertentie-open #boven:focus-within { transform: none; opacity: 1; transition-duration: 240ms; }
html body:has(#kaartje:not([hidden])) #boven:focus-within > *, html body.advertentie-open #boven:focus-within > * { pointer-events: auto; }
/* IMP-330: telefoon: het kaartje ligt als onderblad over de volle breedte en zou de 3D-knop en het kompas bedekken; ze staan dan er
   vlak boven (8 px), rechts, op de hoogte van het kaartje (--kaartje-hoogte, kaartje.js). Computer: het kaartje staat links, niets verandert. */
@media (max-width: 768px) {
  body:has(#kaartje:not([hidden])) .knop-3d { bottom: calc(var(--kaartje-hoogte, 0px) + var(--stap-1)); }
  body:has(#kaartje:not([hidden])) .knop-kompas { bottom: calc(var(--kaartje-hoogte, 0px) + var(--stap-1) + var(--maat) + var(--stap-1)); }
  .knop-3d, .knop-kompas { transition: transform var(--veer-terug), bottom var(--veer-open) var(--veer-curve); }
  /* IMP-399: tijdens en vlak na het slepen aan het onderblad volgen 3D-knop en kompas de rand direct (--kaartje-hoogte per beeld),
     in plaats van met een eigen veer achteraan te komen. */
  body.blad-sleept .knop-3d, body.blad-sleept .knop-kompas { transition: none; }
}
/* IMP-243: steunknop (voorstel B, besluit opdrachtgever). Altijd op de kaart, op dezelfde hoogte als de 3D-knop (44 px,
   peutertoets): computer links van de 3D-knop, telefoon linksonder; boven de bronregel. Wit op #6b3d3d (8,6:1).
   (Tot IMP-376 vervaagde hij bij een vel, kaartje, paneel of de prijzen-stand; sinds besluit 22-10 15:05 blijft hij altijd zichtbaar, zie hieronder.) */
/* IMP-252: de rij (steunknop + ⓘ) staat waar de steunknop stond; de knoppen zelf zijn niet meer los gepositioneerd. */
.steunrij {
  position: fixed; z-index: 1; display: flex; flex-direction: row; align-items: center; /* IMP-461: Support, i, 3D — telefoon en computer gelijk */ gap: var(--stap-1); pointer-events: none;
  right: calc(max(var(--ruimte-kaartrand), env(safe-area-inset-right), var(--rechts-ruimte, 0px)) + var(--maat) + var(--stap-1));
  bottom: var(--knoppen-onder);
  transition: opacity var(--veer-dicht) ease, visibility 0s;
}
.steunrij > * { pointer-events: auto; }
.steun {
  display: inline-flex; align-items: center; gap: var(--stap-1); height: var(--maat); padding: 0 var(--stap-2);
  border-radius: var(--hoek-bediening); background: #6b3d3d; color: #fff; box-shadow: var(--capsule-schaduw);
  font: 600 var(--capsule-tekst)/1 var(--ios-letter); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.info-knop { flex: none; width: var(--maat); height: var(--maat); padding: 0; }
/* IMP-257: opvallender maar rustig: wit, fijne bordeaux rand (2 px) en een getekende i (stip + stok van 4 px, op het
   pixelraster); bordeaux op wit 9,6:1. Niet gevuld: naast de gevulde steunknop zou dat één donker blok worden. */
.info-knop:not([aria-expanded="true"]) { background: #fff; border-color: var(--kleur-merk); color: var(--kleur-merk); }
.info-knop svg { display: block; margin: auto; }
.steun:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }
.steun-logo { flex: none; display: block; } /* IMP-250: ons logo (logo-klein, lijn 20) in wit vóór de tekst, 18 px */
@media (max-width: 768px) { .steunrij { right: auto; left: max(var(--ruimte-kaartrand), env(safe-area-inset-left)); flex-direction: row; } }
/* IMP-376 (besluit opdrachtgever 22-10 15:05, onderdeel 5): "Leuk? Support ons!" en Info blijven ALTIJD zichtbaar. Geen enkele toestand
   verbergt ze meer (vel, kaartje, paneel, prijzen-stand, lijst); alleen de tekenstand (een eigen scherm met Klaar) en een vel dat het
   scherm vult bedekken ze zoals ze de kaart bedekken. Computer: aan de rand van het vrije kaartvlak naast de 3D-knop (--rechts-ruimte:
   16 px van het paneel of de schermrand, zoals de panelen zelf 16 px van de rand staan). Telefoon met een open huis: vlak boven het kaartje, zoals 3D. */
body.tekenen .steunrij { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--veer-dicht) ease, visibility 0s linear var(--veer-dicht); }
@media (max-width: 768px) {
  body:has(#kaartje:not([hidden])) .steunrij { bottom: calc(var(--kaartje-hoogte, 0px) + var(--stap-1)); }
  .steunrij { transition: bottom var(--veer-open) var(--veer-curve); }
}
.knop-kompas svg { transform: rotate(var(--draai, 0deg)); }
/* IMP-253: vel "Over deze kaart", redactioneel (optie B). Drie lettergroottes (14/17/22), 8-px-raster, lijnen 2 px.
   Telefoon (zoals optie A): vel van onder met greep, kicker, kop, alinea, lijn, bron, en de acties onder elkaar (Klaar
   boven, Steun Huisjeskaart als rustige tweede). Computer: venster van 760 px in het midden met een bordeaux lijn bovenaan,
   de kicker in de linkerkolom (200 px); kop, alinea, bron en acties in de rechterkolom; met dim-vlak. */
#vel-info { padding: var(--stap-1) var(--stap-3) calc(var(--stap-3) + env(safe-area-inset-bottom, 0px)); color: var(--kleur-tekst); }
#vel-info .greep { margin: 0 auto var(--stap-3); }
.info-accent { display: none; }
.info-kicker { margin: 0 0 var(--stap-2); font: 600 var(--tekst-s)/16px var(--ios-letter); letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-merk); }
#vel-info h2 { margin: 0 0 var(--stap-2); font: 600 var(--tekst-l)/28px var(--ios-letter); letter-spacing: -.01em; color: var(--kleur-tekst); }
#info-alinea { margin: 0; font: 400 var(--tekst-m)/26px var(--ios-letter); color: var(--kleur-tekst); }
/* IMP-504 (B345): de zin onder de alinea in dezelfde letter; de stadslinks klein en rustig zoals de bronregel, tikvlak 44 px. */
.info-zin { margin: var(--stap-2) 0 0; font: 400 var(--tekst-m)/26px var(--ios-letter); color: var(--kleur-tekst); }
.info-links { margin: var(--stap-2) 0 0; font: 400 var(--tekst-s)/20px var(--ios-letter); color: var(--kleur-tekst-zacht); }
.info-steden { white-space: nowrap; } /* smal scherm: de regel breekt na "in", de drie steden blijven samen */
.info-links a { color: var(--kleur-merk); text-decoration: underline; text-underline-offset: 2px; display: inline-block; min-width: 44px; padding: 12px 0; margin: -12px 6px; } /* IMP-504 (B360): 6 px marge per kant = minstens 12 px tussen de tikvlakken */
.info-links a:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }
.info-lijn { height: 2px; background: rgba(31, 20, 23, .1); margin: var(--stap-3) 0 var(--stap-2); }
.info-bron { display: flex; align-items: flex-start; gap: var(--stap-1); margin: 0; font: 400 var(--tekst-s)/20px var(--ios-letter); color: var(--kleur-tekst-zacht); }
.info-bron svg { flex: none; margin-top: 2px; color: var(--kleur-merk); }
.info-bron a { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 12px 0; margin: -12px 0; } /* tikvlak 44 px */
.info-acties { display: flex; flex-direction: column-reverse; gap: var(--stap-1); margin-top: var(--stap-4); }
/* IMP-441 (B313): het kruisje rechtsboven, 44 × 44 (zoals het sluitkruisje van het kaartje); Klaar is weg. */
#vel-info .info-sluit { position: absolute; top: var(--stap-1); right: var(--stap-1); width: 44px; height: 44px; padding: 0; margin: 0; font-size: var(--tekst-l); color: var(--kleur-merk-donker); background: none; border: 0; }
.info-steun { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--stap-3); border: 2px solid #6b3d3d; background: #6b3d3d; /* IMP-441: gelijk aan de steunknop op de kaart (.steun) */
  border-radius: var(--hoek-bediening); color: #fff; font: 600 var(--tekst-m)/1 var(--ios-letter); text-decoration: none; }
.info-steun:focus-visible, .info-bron a:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }
/* IMP-187 (B098): feedback, rustig en klein onder de steunknop; het veld opent pas na een tik op Feedback. */
.info-feedback { margin-top: var(--stap-2); }
.info-feedback-knop { min-height: 44px; padding: 0; border: 0; background: none; color: var(--kleur-merk); font: 600 var(--tekst-s)/1 var(--ios-letter); text-decoration: underline; cursor: pointer; }
.info-feedback-blok { display: grid; gap: var(--stap-1); margin-top: var(--stap-1); }
.info-feedback-blok[hidden] { display: none; }
.info-feedback-label { font: 600 var(--tekst-s)/1.3 var(--ios-letter); color: var(--kleur-tekst-zacht); }
.info-feedback-tekst { width: 100%; box-sizing: border-box; min-height: 96px; padding: var(--stap-1); border: 2px solid var(--kleur-rand-veld); border-radius: var(--hoek-vlak); background: #fff; color: var(--kleur-tekst); font: var(--tekst-m)/1.4 var(--ios-letter); }
.info-feedback-rij { display: flex; align-items: center; flex-wrap: wrap; gap: var(--stap-2); }
.info-feedback-verstuur { min-height: 44px; padding: 0 var(--stap-3); border: 2px solid var(--kleur-merk); background: var(--kleur-merk); color: #fff; border-radius: var(--hoek-bediening); font: 600 var(--tekst-m)/1 var(--ios-letter); }
.info-feedback-verstuur:disabled { opacity: .5; }
.info-feedback-status { margin: 0; font: var(--tekst-s)/1.3 var(--ios-letter); color: var(--kleur-tekst-zacht); }
.info-feedback-knop:focus-visible, .info-feedback-tekst:focus-visible, .info-feedback-verstuur:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: 2px; }
/* IMP-441 (B311): "Over deze kaart" open = alleen het venster en één egale donkere laag; kaart, balk, kaartje en aanbodpagina verborgen. */
body.info-aan > :not(#vel-info):not(#dim) { visibility: hidden; }
body.info-aan .dim { display: block; opacity: 1; pointer-events: auto; background: #1f1417; }
@media (min-width: 769px) {
  body:has(#vel-info.open) .dim { display: block; } /* het venster in het midden krijgt het dim-vlak, zoals een vel op de telefoon */
  #vel-info { top: 50%; left: 50%; right: auto; bottom: auto; width: min(760px, calc(100vw - 2 * var(--stap-4))); max-height: calc(100dvh - 2 * var(--stap-4));
    padding: 0 calc(7 * var(--stap-1)) calc(5 * var(--stap-1)); border-radius: var(--hoek-vlak); /* ONTWERP-RUST: alleen de rondingen 16 en 999 */ overflow: hidden auto; transform-origin: center;
    transform: translate(-50%, -50%) scale(.98); }
  #vel-info.open { transform: translate(-50%, -50%); }
  .info-accent { display: block; height: 4px; background: var(--kleur-merk); margin: 0 calc(-7 * var(--stap-1)) calc(6 * var(--stap-1)); }
  .info-rooster { display: grid; grid-template-columns: 200px 1fr; column-gap: calc(5 * var(--stap-1)); }
  .info-kicker { margin: 6px 0 0; white-space: nowrap; }
  .info-lijn, .info-voet { margin-left: calc(200px + 5 * var(--stap-1)); }
  .info-acties { flex-direction: row; justify-content: flex-end; align-items: center; gap: var(--stap-3); margin-top: var(--stap-3); }
}

/* Bronvermelding (licentie): klein en rustig; links met een tikvlak van 44 pt. */
/* IMP-277 (opdrachtgever 20-10): de bronregel staat verticaal (90° gedraaid, leesrichting van boven naar beneden) langs de
   rechterrand van de kaart, op halve hoogte: onderin blijven alleen de knoppen (steun, ⓘ, 3D, kompas). Hij volgt de
   safe-area en een open paneel rechts (--rechts-ruimte), zoals de 3D-knop. De licentietekst blijft zichtbaar (12 px, zelfde
   achtergrond en contrast); de tikvlakken van de links zijn ≥ 44 px breed, naar de kaart toe uitgebreid (::after). */
/* IMP-332 (opdrachtgever 21-10: "de rechter verticale balk gaat fout op desktop"): met de aanbodpagina open stond de regel
   precies tegen de sleepgreep (16 px van het raakvlak, 30 px van de zichtbare greep, op dezelfde hoogte): het leek één balk.
   Daarom + --bron-afstand: 0 in rust en op de telefoon (ongewijzigd), met de aanbodpagina open (advertentie.css) zoveel dat de
   regel altijd 42 px van de zichtbare greep staat, open en ingeklapt; open staat hij dan op de as van de 3D-knop eronder. */
/* IMP-352: de hoogte van de regel laat boven en onderin evenveel vrij: het vak van de knoppen (knoppen-onder + 2 maat + 2 stap-1, 8 px lucht boven
   het kompas; was balk + stap-4 = 76 px, waardoor de regel op 320x568 met 3DBAG erbij onder het kompas stak). Op de balk raakt hij nooit;
   past de tekst niet, dan een tweede kolom (zoals liggend, IMP-311). Hoge schermen: de regel is daar korter dan het vak. */
/* IMP-352 herstel (blinde controle 25-10): een max-height op het vak begrenst de tekst er niet (de hoogte is auto); de regel stak op 320×568 met 3D
   12 px over het kompas. Daarom een vaste hoogte van het vak, de regel centraal erin (flex) en binnen het vak begrensd; past de tekst niet, dan breekt hij in kolommen. */
.maplibregl-ctrl-bottom-right { top: 50%; bottom: auto; right: max(env(safe-area-inset-right, 0px), calc(var(--rechts-ruimte, 0px) + var(--bron-afstand, 0px))); height: calc(100% - 2 * (var(--knoppen-onder) + 2 * var(--maat) + 2 * var(--stap-1))); transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { max-height: 100%; }
.maplibregl-ctrl.maplibregl-ctrl-attrib { background: rgba(255, 255, 255, .9); /* IMP-152: ≥ 4,5:1 ook over een rondje (was .6 = 2,5:1) */ writing-mode: vertical-rl; font-size: 12px; line-height: 20px; color: var(--kleur-tekst-zacht); margin: 0; padding: var(--stap-1) 0; }
.maplibregl-ctrl-attrib-inner { display: block; padding: 0; }
.maplibregl-ctrl-attrib a { position: relative; color: inherit; padding: 0; }
.maplibregl-ctrl-attrib a::after { content: ''; position: absolute; inset: -4px 0 -4px -31px; } /* tikvlak: 44 px breed naar de kaart toe, 4 px langer */
/* IMP-311 (opdrachtgever 21-10, gezien bij IMP-307): liggend (laag scherm, ≤ 500 px) is er te weinig hoogte voor de regel op halve hoogte: de
   tekst brak naar een tweede kolom en liep over het kompas en de 3D-knop. De regel krijgt dan een eigen vak: van onder de balk tot boven
   het kompas (de 3D-knop en het kompas staan er 8 px onder), de tekst gecentreerd in dat vak, in kolommen naar links als hij niet past.
   Zo raakt hij nooit de balk, het kompas of de 3D-knop, ook niet met de vermelding van 3DBAG erbij. Staand en computer: ongewijzigd. */
@media (max-height: 500px) {
  body .maplibregl-ctrl-bottom-right { top: calc(max(var(--ruimte-kaartrand), env(safe-area-inset-top)) + var(--capsule-hoogte) + var(--stap-1)); bottom: calc(var(--knoppen-onder) + 2 * var(--maat) + 2 * var(--stap-1));
    max-height: none; height: auto; transform: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
  body .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib { max-height: 100%; }
}
/* IMP-128: de tekst vangt geen tikken of klikken; een rondje eronder blijft te kiezen. Alleen links zijn tikbaar. */
.maplibregl-ctrl.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { pointer-events: none; }
.maplibregl-ctrl-attrib a, .maplibregl-ctrl-attrib button { pointer-events: auto; }
/* IMP-240: smal scherm: korte licentieregel ("© Kadaster | ResidentieVinder | Voorwaarden"); anders de volledige. */
@media (max-width: 520px) { .maplibregl-ctrl-attrib .bron-lang { display: none; } }
/* IMP-277: waar een kaartje, vel of paneel als onderblad over de hele breedte komt (tot 1023 px) zou het de regel half afdekken:
   dan wijkt de regel (vervaagt, vangt niets), zoals de steunrij; de kaart is dan ook niet meer in beeld. */
@media (max-width: 1023px) {
  .maplibregl-ctrl-bottom-right { transition: opacity var(--veer-dicht) ease, visibility 0s; }
  body.vel-aan .maplibregl-ctrl-bottom-right, body.mijnhuizen-open .maplibregl-ctrl-bottom-right, body.terugvel-open .maplibregl-ctrl-bottom-right, body.advertentie-open .maplibregl-ctrl-bottom-right,
  body.prijzen-aan .maplibregl-ctrl-bottom-right, body.tekenen .maplibregl-ctrl-bottom-right, body:has(#kaartje:not([hidden])) .maplibregl-ctrl-bottom-right {
    opacity: 0; visibility: hidden; transition: opacity var(--veer-dicht) ease, visibility 0s linear var(--veer-dicht);
  }
}
/* IMP-332: op de computer schuiven bronregel, 3D-knop en kompas mee met een paneel rechts (--rechts-ruimte) in plaats van te
   verspringen: dezelfde curve als het paneel en één duur (--veer-open, 250 ms) heen en terug. Het paneel sluit en klapt in
   in 200 ms; de regel komt dan iets later aan en blijft zo altijd links van de greep (nooit eronder of erover).
   Tijdens het slepen aan de greep geen overgang (adv-sleept): de regel volgt de greep direct, op vaste afstand.
   Minder beweging: --veer-open is dan 1 ms (tokens.css). De 3D-knop houdt zijn druk-veer (transform). */
@media (min-width: 1024px) {
  .maplibregl-ctrl-bottom-right { transition: right var(--veer-open) var(--veer-curve); }
  .knop-3d, .knop-kompas { transition: transform var(--veer-terug), right var(--veer-open) var(--veer-curve); }
  body.adv-sleept .maplibregl-ctrl-bottom-right, body.adv-sleept .knop-3d, body.adv-sleept .knop-kompas { transition: none; }
}

/* IMP-099 balk en rijen (Prikkelarm, audit balk en vellen). */
/* Lege delen van de meldingrij laten tikken en slepen door naar de kaart; alleen de pillen vangen ze. */
#boven > .kruimels { pointer-events: none; }
#boven > .kruimels > * { pointer-events: auto; }
/* Melding bij 0 huizen: één pil zonder rand, de knop erin (IMP-143: 32 px zichtbaar in de pil van 36, raakvlak 44). */
/* IMP-315 (peutertoets): de knop in de melding is zelf 44 hoog (was 32 met een onzichtbaar groter raakvlak); de pil is 4 px hoger (de rand van 2 px
   aan beide kanten), zodat de knop er precies in past. */
.melding--met-knop { gap: var(--stap-1); padding-right: calc(var(--stap-1) / 2); border-color: transparent; height: calc(var(--maat) + 4px); }
.melding--met-knop .knop { position: relative; min-height: var(--maat); height: var(--maat); padding: 0 var(--stap-2); box-shadow: none; font: var(--gewicht-half) var(--tekst-s)/1 var(--ios-letter); }
/* IMP-411: "Hier geen huizen" met twee knoppen (Toon ze, Filters wissen) is ± 367 px breed; op een smalle telefoon (≤ 400 px) past dat
   niet tussen de kantlijnen. Dan staat de tekst boven en staan de twee knoppen eronder naast elkaar (een lege ::after met de hele
   breedte breekt de regel); hoek 16 (vlak) in plaats van rond. Breder blijft het één pil. */
@media (max-width: 400px) {
  .melding--met-knop:has(.knop + .knop) { flex-wrap: wrap; justify-content: center; height: auto; width: calc(100vw - 2 * var(--stap-1)); max-width: calc(100vw - 2 * var(--stap-1)); row-gap: var(--stap-1);
    padding: var(--stap-1) calc(var(--stap-1) / 2) calc(var(--stap-1) / 2); border-radius: var(--hoek-vlak); white-space: normal; }
  .melding--met-knop:has(.knop + .knop)::after { content: ''; flex-basis: 100%; order: 1; }
  .melding--met-knop:has(.knop + .knop) .knop { order: 2; }
}
/* Gekozen-stand duidelijk (besluit directeur, IMP-099): zonder kruimelrij is de capsule het enige teken dat iets aan staat.
   Gevuld in merkkleur met witte tekst: vlak 9,2:1 tegen wit/kaart, tekst 9,2:1 op het vlak. Voor alle capsules gelijk. */
.capsule.gekozen { background: var(--kleur-merk); border-color: var(--kleur-merk); color: #fff; }
@media (hover: hover) { .capsule.gekozen:hover { background: var(--kleur-merk-hover); } }
/* Pijlen in de gekozen Prijzen-capsule: wit op het gevulde vlak (groen/oranje op bordeaux is te zwak). */
.capsule.gekozen .pijlen, .capsule.gekozen .pijlen span { color: #fff; }
/* IMP-128: ♥ staat aan zolang Mijn huizen open is: dezelfde gekozen-stand als de andere capsules. */
.capsule--rond[aria-expanded="true"] { background: var(--kleur-merk); border-color: var(--kleur-merk); color: #fff; }
@media (hover: hover) { .capsule--rond[aria-expanded="true"]:hover { background: var(--kleur-merk-hover); } }
/* IMP-175: melding na "Wissen" — "Budget gewist" met "Terug", 4 s, boven alles (ook boven een open vel), onder de balk. */
.terugmelding {
  /* P2 (controle IMP-175): bovenaan lag hij op de telefoon over de capsules; nu overal onderaan midden, boven vel en kaart. */
  position: fixed; z-index: 8; left: 50%; bottom: calc(max(var(--ruimte-kaartrand), env(safe-area-inset-bottom)) + var(--stap-4));
  transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--stap-1); height: var(--maat-klein);
  padding: 0 calc(var(--stap-1) / 2) 0 var(--stap-2); border-radius: var(--hoek-bediening); background: var(--kleur-tekst); color: #fff;
  font: 500 var(--tekst-s)/1.3 var(--ios-letter); box-shadow: var(--schaduw-melding); white-space: nowrap;
}
.terugmelding .knop { position: relative; min-height: calc(var(--maat-klein) - 4px); height: calc(var(--maat-klein) - 4px); padding: 0 var(--stap-2); background: #fff; color: var(--kleur-tekst); border-color: #fff;
  font: var(--gewicht-half) var(--tekst-s)/1 var(--ios-letter); }
.terugmelding .knop::after { content: ''; position: absolute; inset: calc((var(--maat-klein) - 4px - var(--maat)) / 2 - 2px); } /* IMP-143: 32 zichtbaar, raakvlak 44 (rand 2 px) */

/* ══ IMP-376 (besluit opdrachtgever 22-10 15:05, rust-concept prive/concepten/rust-knoppen.html): knoppen die er niet hoeven te zijn ══
   Eén regel: wat je nu niet nodig hebt, staat niet in beeld, en komt terug met een gewone handeling. "Uit beeld" is nooit "weg":
   doorzichtig en niet te tikken (geen visibility: hidden, geen display: none), dus Tab en schermlezer vinden het nog; met de focus
   erop (focus-visible) staat het weer in beeld. Beweging ≤ 250 ms, tokens maken er 1 ms van bij "minder beweging". */
/* Onderdeel 6: Prijswijzigingen aan = het hartje (Mijn huizen) uit beeld.
   Herstel na de blinde controle: de balk houdt zijn raster en het hartje vervaagt op zijn eigen plek. Eerder viel zijn kolom weg en werd
   Filters 52 px breder (222 → 274), zodat Prijswijzigingen onder je vinger 52 px opschoof. Nu blijft de knop die je aantikt staan en
   houdt Filters zijn breedte (concept: "Knoppen die blijven, houden hun plek"); de balk blijft als geheel in het midden. (Aanpassing aan
   het concept, dat het paar Filters + Prijswijzigingen opnieuw centreert en Prijswijzigingen zo 30 px laat opschuiven.) */
body.prijzen-aan .balk #pil-mijn { opacity: 0; pointer-events: none; }
body.prijzen-aan .balk #pil-mijn:focus-visible { opacity: 1; pointer-events: auto; }
/* IMP-413 (B269): met nieuws sinds je vorige bezoek staat het rondje als vierde knop in de balk, rechts naast ♥ (zelfde maat). */
.balk:has(> .terugrij:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto var(--capsule-hoogte) var(--capsule-hoogte); }
/* IMP-413 (gemeten op 320: Filters werd 41 px en "Filters" liep eruit): tot 360 px met vier knoppen 8 px tussen de knoppen; Filters is dan 65 px. */
@media (max-width: 360px) { .balk:has(> .terugrij:not([hidden])) { column-gap: var(--stap-1); } }
/* IMP-432 (B296 1C): de bel staat er nu altijd, en Filters is sinds IMP-462 een knop met stip in de balk; op 375 kreeg Filters 50 px en liep
   "Filters" + stip eruit. Van 361 tot 400 px daarom 12 px tussen de knoppen (tikvlakken blijven ≥ 12 px uit elkaar); Filters wordt 62 px. */
@media (min-width: 361px) and (max-width: 400px) { .balk:has(> .terugrij:not([hidden])) { column-gap: calc(var(--stap-1) * 1.5); } }
/* IMP-462 (besluit opdrachtgever): Filters is een gewone knop van 44 px in de balk, zoals Prijswijzigingen en ♥; een kleine bordeaux stip als er een filter actief is. */
.balk #pil-filters .stip { flex: none; width: 8px; height: 8px; border-radius: var(--hoek-rond); background: var(--kleur-merk); }
/* Onderdeel 4: 3D pas vanaf het zoomniveau waar 3D begint (drieD.js: KNOP_VANAF), en in een open huis; verder uit beeld (zacht, 200 ms). */
html .knop-3d { transition: transform var(--veer-terug), bottom var(--veer-open) var(--veer-curve), right var(--veer-open) var(--veer-curve), opacity var(--veer-dicht) var(--veer-curve); }
.knop-3d.uit-beeld { opacity: 0; pointer-events: none; }
.knop-3d.uit-beeld:focus-visible { opacity: 1; pointer-events: auto; }
/* Onderdeel 1: het hartje vervaagt zacht bij Prijswijzigingen; omlaag vegen vanaf de balk (rust.js) vraagt dat de browser verticaal niet zelf pant. */
html .balk #pil-mijn { transition: transform var(--veer-terug), opacity var(--veer-dicht) var(--veer-curve); }
.balk { touch-action: pan-x; }
/* IMP-376 (herstel na de tweede blinde controle, onderdeel 10): klapt een open huis op de telefoon dicht door ver uitzoomen (body.klapt-dicht,
   rust.js, 200 ms), dan komen balk, Steun/Info, 3D en kompas in dezelfde beweging terug op hun plek: één beweging, niet eerst het kaartje en
   daarna de rest. Deze regels winnen van de regels "huis open" hierboven (zelfde of hogere specificiteit, later in het bestand). */
@media (max-width: 768px) {
  body.klapt-dicht:has(#kaartje.kop-boven) #boven { transform: none; opacity: 1; pointer-events: none; }
  body.klapt-dicht:has(#kaartje) #knop-3d { bottom: var(--knoppen-onder); }
  body.klapt-dicht:has(#kaartje) #knop-kompas { bottom: calc(var(--knoppen-onder) + var(--maat) + var(--stap-1)); }
  body.klapt-dicht:has(#kaartje) .steunrij { bottom: var(--knoppen-onder); }
  body.klapt-dicht:has(#kaartje) #knop-3d, body.klapt-dicht:has(#kaartje) #knop-kompas, body.klapt-dicht:has(#kaartje) .steunrij { transition-duration: var(--veer-dicht); }
}

/* IMP-408: een schakelaar die (nu) niets kan doen, zoals "Toon als lijst" zonder locatie of budget op de computer: uit en zichtbaar zachter. */
.schakel:disabled { opacity: .6; cursor: default; }

/* IMP-463: startbeeld met ?plaats=: kaart verborgen tot het kader van de plaats er is, met het laadlogo (IMP-437) in het midden. */
#kaart-laad { display: none; position: fixed; z-index: 2; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none; }
#kaart-laad svg { display: block; width: 36px; height: 36px; overflow: visible; }
#kaart-laad .ring { stroke: var(--kleur-merk); opacity: .55; transform-origin: 18px 18px; animation: laad-draai 1.6s linear infinite; }
#kaart-laad .dak, #kaart-laad .logo path { stroke: var(--kleur-merk); }
#kaart-laad .dak { transform-box: fill-box; transform-origin: center; animation: laad-tik .8s ease-in-out infinite alternate; }
html.kaart-wacht #kaart { visibility: hidden; }
html.kaart-wacht #kaart-laad { display: block; }
/* laad-draai en laad-tik staan in kaartje.css (IMP-437) */
@media (prefers-reduced-motion: reduce) { #kaart-laad { opacity: .45; } #kaart-laad .ring { display: none; } #kaart-laad .dak { animation: none; } }