/* Mijn huizen (IMP-049): telefoon vel van onder met greep; computer paneel links (--kaartje-breedte, marge 16), kaart blijft groot.
   IMP-125: overal zo hoog als de inhoud (leeg = laag vel), hooguit tot de vrije ruimte; op de telefoon nooit over de bovenzone. */
.mijnlijst {
  position: fixed; z-index: 3; top: var(--ruimte-kaartrand); bottom: auto; left: var(--ruimte-kaartrand); width: var(--kaartje-breedte);
  max-height: calc(100% - 2 * var(--ruimte-kaartrand));
  background: var(--kleur-kaartje); border-radius: var(--hoek-vel); box-shadow: var(--schaduw-kaartje);
  display: flex; flex-direction: column; overflow: hidden; font-family: var(--letter);
  transform: translateX(calc(-100% - 2 * var(--ruimte-kaartrand))); visibility: hidden;
  transition: transform var(--veer-dicht) var(--veer-curve), visibility 0s linear var(--veer-dicht); /* IMP-101: ≤ 250 ms (Prikkelarm) */
}
.mijnlijst.open { transform: none; visibility: visible; transition: transform var(--veer-open) var(--veer-curve); }
/* IMP-087: een lijst die dichtgaat schuift ónder het kaartje weg (kaartje z-index 3), nooit erover. */
.mijnlijst:not(.open) { z-index: 2; }
/* Telefoon: dicht = meteen weg (geen schuivend tweede vel in beeld); openen schuift wel. */
@media (max-width: 768px) { .mijnlijst:not(.open) { transition: none; } }
/* Computer: de balk schuift naar rechts van Mijn huizen (≥ 1024 px regelt computer.css dit). */
@media (min-width: 769px) and (max-width: 1023px) {
  body.mijnhuizen-open #boven { left: calc(var(--kaartje-breedte) + 2 * var(--ruimte-kaartrand)); }
}
@media (max-width: 768px) {
  /* IMP-125: bovenkant hooguit tot onder de bovenzone (balk + Prijzen-rij + melding), op het 8-px-raster; lijst.js meet
     #boven bij openen en zet --mh-boven (terugval 128 = 8 + 56 + 8 + 48 + 8). Leeg = alleen kop en één regel. */
  .mijnlijst { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: calc(100% - var(--mh-boven, 128px));
    border-radius: var(--hoek-vel) var(--hoek-vel) 0 0; box-shadow: var(--schaduw-vel); transform: translateY(102%); }
}
.mh-greep { display: none; }
/* IMP-407: tijdens het slepen volgt Mijn huizen de vinger zonder veer (vellen.js veegDicht); de sleepstrook (vellen.css .greep::before)
   loopt tot de onderkant van de greepstrook (16 px) en niet over de × in de kop. */
.mijnlijst.sleept { transition: none; }
.mh-greep::before { bottom: calc(var(--vel-greep-h) + var(--stap-1) - var(--stap-2)); }
@media (max-width: 768px) { .mh-greep { display: block; flex: none; width: var(--vel-greep-b); height: var(--vel-greep-h); border-radius: var(--hoek-bediening); background: var(--vel-greep-kleur); margin: var(--stap-1) auto calc(var(--stap-2) - var(--stap-1) - var(--vel-greep-h)); } } /* IMP-125: greepstrook 16 px (raster) */
/* Kop zoals de vellen: titel precies in het midden, sluitknop rechts, links een even brede lege plek.
   IMP-125: × op 16 px van de rand, zoals het kaartje (Prikkelarm: overal dezelfde plek). */
.mh-kop { display: grid; grid-template-columns: var(--maat) 1fr var(--maat); align-items: center; padding: 0 var(--stap-2); min-height: var(--maat); flex: none; }
.mh-kop h2 { grid-column: 2; margin: 0; text-align: center; font: 600 var(--tekst-m)/1.2 var(--ios-letter); color: var(--kleur-tekst); }
.mh-kop .mh-sluit { grid-column: 3; margin: 0; font-size: var(--tekst-l); color: var(--kleur-merk-donker); }
.mh-rol { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* IMP-093 (herzien na audit): telefoon en smal paneel = vaste kaart per huis; computer (≥ 1024 px) = echte tabel.
   Overal één linkerlijn: adres, labels en getallen beginnen op dezelfde plek. Marges links/rechts gelijk. */
.mh-rijen { list-style: none; margin: 0; padding: 0 0 calc(var(--stap-2) + env(safe-area-inset-bottom, 0px)); }
.mh-leeg { padding: var(--stap-3) var(--stap-2); text-align: center; font-size: var(--tekst-m); line-height: var(--stap-3); color: var(--kleur-tekst-zacht); } /* IMP-125: 72 px, raster */
.mh-rijen li { position: relative; }
/* IMP-125: kopregellijn even breed als de rijlijnen (zelfde inzet als de rijen), niet over de volle breedte. */
.mh-koppen::after { content: ''; position: absolute; left: var(--stap-2); right: var(--stap-2); bottom: 0; border-top: var(--rij-lijn); }
.mh-rijen li + li::before { content: ''; position: absolute; top: 0; left: var(--stap-2); right: var(--stap-2); border-top: var(--rij-lijn); }
.mh-rij { width: 100%; display: grid; border: 0; border-radius: 0; background: transparent; cursor: pointer; text-align: left;
  font: inherit; font-family: var(--ios-letter); color: inherit; transition: background .12s; }
.mh-rij:hover, .mh-rij:focus-visible { background: var(--kleur-sectie); }
.mh-rij:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: -2px; }
.mh-adres { grid-area: adres; min-width: 0; display: flex; flex-direction: column; }
.mh-straat { font: 600 var(--tekst-m)/24px var(--ios-letter); color: var(--kleur-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-plaats { font: 400 var(--tekst-s)/20px var(--ios-letter); color: var(--kleur-tekst-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Herstel P1 (IMP-166): eigen regel voor label en soort, label vooraan (wordt nooit afgekapt; de soort valt als eerste weg). */
.mh-kenmerken { display: block; font: 400 var(--tekst-s)/20px var(--ios-letter); color: var(--kleur-tekst-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-cijfer { grid-area: cijfer; display: inline-flex; align-items: center; white-space: nowrap; color: var(--kleur-merk);
  font: 400 var(--tekst-s)/1 var(--ios-letter); letter-spacing: 1px; } /* IMP-183: rij hartjes in bordeaux (14 px, 5,4:1 op wit), geen rondje met getal; vijf = ± 64 px */
.mh-cel { min-width: 0; display: flex; flex-direction: column; }
.mh-k-prijs { grid-area: prijs; } .mh-k-m2 { grid-area: m2; } .mh-k-pm2 { grid-area: pm2; }
.mh-k-bouwjaar { grid-area: bouwjaar; } .mh-k-sinds { grid-area: sinds; } .mh-k-verloop { grid-area: verloop; }
.mh-label { font: 400 var(--tekst-s)/16px var(--ios-letter); color: var(--kleur-tekst-sleutel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-w { font: 400 var(--tekst-m)/24px var(--ios-letter); font-variant-numeric: tabular-nums; color: var(--kleur-tekst-waarde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-w.geld { font-weight: 600; color: var(--kleur-tekst); }
/* IMP-145: bedragen nooit afkappen ('€ 100…'): geld en prijsverloop krijgen geen puntjes; de kolommen zijn er breed genoeg voor. */
.mh-w.geld, .mh-w.lager, .mh-w.hoger { overflow: visible; text-overflow: clip; }
.mh-k-sinds .mh-w { overflow: visible; text-overflow: clip; } /* Herstel P1: "1250+ dagen" nooit afkappen (telefoon: rechterkolom, loopt hooguit in de marge) */
.mh-w.lager { font-weight: 600; color: var(--kleur-kans-lager); }
.mh-w.hoger { font-weight: 600; color: var(--kleur-kans-hoger); }
.mh-w.leeg { color: var(--kleur-tekst-uit); }
/* IMP-125: › laat zien dat de rij een knop is; vlak van 44 px, kleur zacht maar leesbaar (#6b6b6b op wit 5,3:1). */
.mh-door { grid-area: door; display: grid; place-items: center; min-width: 16px; height: 44px; color: var(--kleur-tekst-zacht); font: 400 var(--tekst-l)/1 var(--ios-letter); }
.mh-rij.weg .mh-cijfer { color: var(--kleur-tekst-zacht); } /* rustig grijs op wit 5,3:1 (P1 IMP-073; sinds IMP-183 hartjes i.p.v. rondje) */
.mh-rij.weg .mh-straat, .mh-rij.weg .mh-w { color: var(--kleur-tekst-zacht); }
.mh-rij.weg .mh-w.geld { text-decoration: line-through; font-weight: 400; }

/* Koppen: één regel, klein en rustig; gekozen kop bordeaux met ▼/▲ (plek altijd gereserveerd, niets verspringt). */
.mh-koppen { position: sticky; top: 0; z-index: 1; display: flex; gap: var(--stap-1); align-items: center; padding: 0 var(--stap-2); min-height: var(--maat-klein); /* IMP-125: 48, raster */
  background: var(--kleur-kaartje); }
.mh-koppen[hidden] { display: none; }
.mh-kopje { display: flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; margin: 0; padding: 0; border: 0; background: transparent;
  cursor: pointer; font: 400 var(--tekst-s)/1 var(--ios-letter); color: var(--kleur-tekst-sleutel); white-space: nowrap; border-radius: var(--hoek-vlak); }
.mh-kopje.aan { color: var(--kleur-merk); font-weight: 600; }
.mh-kopje:focus-visible { outline: 2px solid var(--kleur-focus); outline-offset: -2px; }
.mh-pijl { display: inline-block; width: 1em; text-align: center; font-size: var(--tekst-s); }
span.mh-kopje { cursor: default; }

/* ── Kaart per huis (telefoon en paneel tot 1023 px): vaste hoogte 176 px. Adres boven (rondje rechts ernaast),
   daaronder twee regels van drie vaste kolommen met een klein label erboven; geld in de linkerkolom. ── */
/* IMP-246: "−€ 100.000" en daaronder "−8%": in de kolom van 136 px past het samen niet op één regel (telefoon én computer),
   en afkappen of overlappen mag nooit. Computer: het percentage klein (14/20), zodat bedrag + percentage in de rij van 44 passen. */
.mh-k-verloop .mh-w { white-space: normal; overflow: visible; text-overflow: clip; }
.mh-k-verloop .mh-pct { display: block; }
.mh-k-sinds .mh-pct { display: block; } /* IMP-299: de datum blijft op één regel, "of eerder" eronder */
/* IMP-425 (opdrachtgever 23-10, B289: "niet alles is perfect rustig symmetrisch"): computer = één regel per cel. Prijsverloop: pijl, bedrag en
   percentage naast elkaar (percentage in een vaste breedte, rechts uitgelijnd); Te koop sinds: "≤ 10 jul" i.p.v. een tweede regel "of eerder"
   (de tekst "of eerder" blijft voor schermlezers en staat in de tooltip). */
@media (min-width: 1024px) {
  .mh-k-verloop .mh-w { display: flex; align-items: center; justify-content: flex-end; gap: var(--stap-1); white-space: nowrap; line-height: 24px; }
  .mh-k-verloop .mh-pct { display: block; flex: none; min-width: 36px; text-align: right; font-size: var(--tekst-s); line-height: 24px; }
  .mh-k-sinds .mh-w { line-height: 24px; }
  .mh-k-sinds .mh-pct { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 1023px) {
  .mh-koppen .mh-k-adres, .mh-koppen .mh-k-pm2, .mh-koppen .mh-k-bouwjaar, .mh-koppen .mh-k-sinds { display: none; }
  /* IMP-299 (opdrachtgever 20-10: "niet symmetrisch genoeg, de uitlijning is slordig"): één raster van drie gelijke kolommen voor élke
     kaart (kolomgrenzen op alle kaarten exact gelijk), padding 16 links = rechts, tussenruimte 8. Kop 64 = kopregel 44 (straat,
     hartjes en › op dezelfde middellijn) + één regel plaats en kenmerken (20). Twee waarderegels met het label (16) boven de waarde (24). */
  .mh-rij { height: calc(27 * var(--stap-1)); padding: var(--stap-2); column-gap: var(--stap-1); row-gap: var(--stap-1); /* P2 IMP-143: tussenruimte 8, links en rechts 16 */
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 64px 40px 64px; /* IMP-246: onderste regel 64: prijsverloop + percentage eronder */
    grid-template-areas: "adres adres adres" "prijs m2 pm2" "verloop bouwjaar sinds"; align-content: start; }
  /* Kopregel 44 hoog: straat, hartjes en › delen de middellijn; hartjes en › staan rechts op een vaste plek (nooit zwevend). */
  /* IMP-299 (meting 320/375): vijf hartjes zijn 77 breed; met 64 liep een lang adres 5 px onder de hartjes. Nu 80 (11 px lucht). */
  .mh-rij .mh-straat { line-height: var(--maat); padding-right: calc(80px + var(--stap-1) + 24px + var(--stap-1)); }
  /* Plaats en kenmerken ("Delft · Label A · Twee-onder-een-kap") samen op één rustige regel onder de kopregel; langer dan de regel = … aan het eind. */
  .mh-rij .mh-adres { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-content: start; }
  .mh-rij .mh-straat { grid-column: 1 / -1; }
  .mh-plaats:not(:empty) + .mh-kenmerken:not(:empty)::before { content: '\00a0·\00a0'; }
  .mh-cijfer { grid-area: adres; justify-self: end; align-self: start; height: var(--maat); margin-right: calc(24px + var(--stap-1)); }
  .mh-door { grid-area: adres; justify-self: end; align-self: start; width: 24px; place-items: center end; }
  .mh-w.leeg { font-weight: 400; } /* "–" bij geen waarde (ook geen prijsverandering): rustig, nooit vet */
  /* IMP-299 (opdrachtgever 20-10: "Prijsverloop is niet rustig"): elk vak hetzelfde ritme, label (16) boven één regel waarde (24).
     Prijsverloop = pijl + percentage op één regel ("↘ 9%"); het bedrag valt hier weg (staat op het kaartje). Label krimpt nooit weg. */
  .mh-cel .mh-label { flex: none; }
  .mh-k-verloop .mh-w { white-space: nowrap; }
  .mh-k-verloop .mh-bedrag:not(:last-child) { display: none; }
  .mh-k-verloop .mh-pct { display: inline; }
  /* Blinde controle IMP-299: "of eerder" klein achter de datum, op dezelfde regel (ritme label + één regel waarde). */
  .mh-k-sinds .mh-teken { display: none; } /* IMP-425: "≤" alleen op de computer */
  .mh-k-sinds .mh-dagmaand { display: none; } /* ander jaar + onzeker: "2025 of eerder" */
  .mh-k-sinds .mh-pct { display: inline; margin-left: .2em; font-size: var(--eerder); line-height: 1; color: var(--kleur-tekst-zacht); }
  /* Hercontrole: "of eerder" 14, in een smalle kolom (< 105, bv. 320 px breed) 12, nooit kleiner; de datum past zich aan. */
  .mh-k-sinds .mh-w { --eerder: var(--tekst-s); }
}
/* IMP-299: label en waarde passen altijd op één regel in hun kolom: de letter wordt alleen kleiner als het moet
   (lijst.js zet --em = geschatte breedte; 100cqi = kolombreedte). Regelhoogte blijft gelijk: niets verspringt. */
.mh-cel { container-type: inline-size; }
.mh-cel .mh-label { font-size: min(var(--tekst-s), 100cqi / var(--em, 1)); }
.mh-cel .mh-w { font-size: min(var(--tekst-m), 100cqi / var(--em, 1)); }
@media (max-width: 1023px) {
  .mh-cel .mh-w { font-size: min(var(--tekst-m), (100cqi - var(--em-eerder, 0) * var(--eerder, 0px)) / var(--em-datum, var(--em, 1))); } /* datum + "of eerder" */
  @container (max-width: 104px) { .mh-k-sinds .mh-w { --eerder: 12px; } }
}

/* ── Computer: echte tabel over de vrije breedte, onder de balk, gecentreerd; één rij van 56 px per huis. ── */
@media (min-width: 1024px) {
  :root body #mijnhuizen.mijnlijst { top: var(--mh-boven, calc(2 * var(--paneel-marge) + var(--capsule-hoogte))); bottom: auto;
    left: var(--paneel-marge); right: auto; width: calc(100% - 2 * var(--paneel-marge));
    max-height: calc(100% - var(--mh-boven, calc(2 * var(--paneel-marge) + var(--capsule-hoogte))) - var(--paneel-marge)); } /* IMP-125: hoogte volgt inhoud; P2 2026-10-18: top = onder de hele bovenzone (lijst.js meet) */
  /* IMP-376 (herstel na blinde controle, concept rust-knoppen voorstel 9): Mijn huizen zonder bewaarde huizen is een paneel van 360 px,
     gecentreerd onder de balk (zelfde middenas). Met bewaarde huizen blijft het de tabel over de vrije breedte (IMP-093). */
  :root body #mijnhuizen.mijnlijst:has(.mh-leeg) { left: calc(50% - var(--paneel-breedte) / 2); width: var(--paneel-breedte); }
  /* Herstel na de derde blinde controle: dit paneel staat midden onder de balk en schuift dus niet meer naar links weg (dat ging 400 px schuin
     over de kaart), maar vervaagt op zijn eigen plek, zoals het Filters-vel (vellen.css: zelfde beweging en duur). */
  :root body #mijnhuizen.mijnlijst:has(.mh-leeg) { transform: translateY(-6px) scale(.98); transform-origin: top center; opacity: 0;
    transition: transform var(--veer-dicht) var(--veer-curve), opacity .18s ease, visibility 0s linear var(--veer-dicht); }
  :root body #mijnhuizen.mijnlijst.open:has(.mh-leeg) { transform: none; opacity: 1; transition: transform var(--veer-open) var(--veer-curve), opacity .18s ease, visibility 0s; }
  :root body.mijnhuizen-open:not(#paneel):not(#lijst) #boven { left: var(--paneel-marge); } /* balk blijft in het midden */
  .mijnlijst { --mh-tabel: minmax(0, 1fr) 56px 128px 80px 112px 80px 112px 136px 16px; }
  .mh-koppen, .mh-rij { display: grid; grid-template-columns: var(--mh-tabel); column-gap: var(--stap-2); padding: 0 var(--stap-3); }
  .mh-koppen { grid-template-areas: "adres cijfer prijs m2 pm2 bouwjaar sinds verloop door"; }
  .mh-rij { height: var(--maat); align-items: center; grid-template-areas: "adres cijfer prijs m2 pm2 bouwjaar sinds verloop door"; }
  .mh-rijen li + li::before, .mh-koppen::after { left: var(--stap-3); right: var(--stap-3); }
  .mh-adres { flex-direction: row; align-items: baseline; gap: var(--stap-1); }
  .mh-straat { flex: none; max-width: 100%; }
  .mh-plaats { flex: 0 1 auto; min-width: 0; }
  .mh-label { display: none; }
  /* IMP-425: één uitlijnregel. Tekst (adres, soort, label, hartjes) links, getallen rechts; elk kopje staat zoals zijn kolom. De sorteerpijl hangt
     in de tussenruimte (rechts uitgelijnd: vóór de tekst; links uitgelijnd: erachter), zodat de koptekst nooit opschuift. */
  .mh-cel { text-align: right; align-items: flex-end; }
  .mh-cel.mh-k-label { text-align: left; align-items: flex-start; }
  .mh-kopje:not(.mh-k-adres):not(.mh-k-cijfer):not(.mh-k-label):not(.mh-k-soort) { justify-content: flex-end; }
  .mh-kopje.mh-k-cijfer, .mh-kopje.mh-k-label { justify-content: flex-start; }
  .mh-kopje.mh-k-cijfer .mh-pijl, .mh-kopje.mh-k-label .mh-pijl { order: 1; }
  .mh-cijfer { justify-self: stretch; } /* IMP-425: vak = kolom, dus de tussenruimte naar prijs is vast 16 px (niet afhankelijk van de breedte van de hartjes) */
  .mh-cijfer.leeg { font: 400 var(--tekst-m)/24px var(--ios-letter); letter-spacing: 0; color: var(--kleur-tekst-uit); }
  .mh-kopje { gap: 0; } .mh-pijl { width: 14px; flex: none; }
  .mh-k-adres { grid-area: adres; } .mh-kopje.mh-k-cijfer { grid-area: cijfer; }
}
/* IMP-101: op 1024–1279 px kregen de adressen maar ± 128 px (afgekapt) terwijl de getalkolommen ruim waren. Smallere
   getalkolommen en tussenruimte 8 geven het adres ± 290 px; straat en plaats staan onder elkaar binnen de 56 px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mijnlijst { --mh-tabel: minmax(0, 1fr) 48px 104px 72px 96px 64px 96px 104px 16px; }
  .mh-koppen, .mh-rij { column-gap: var(--stap-1); padding: 0 var(--stap-2); }
  .mh-rijen li + li::before, .mh-koppen::after { left: var(--stap-2); right: var(--stap-2); }
  .mh-adres { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
  .mh-straat, .mh-plaats { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* IMP-145: bedragen nooit afkappen, ook op 1024–1279 px: Prijs 120 en Prijsverloop 128 px (adres houdt op 1024 px ± 256 px). */
@media (min-width: 1024px) and (max-width: 1279px) { .mijnlijst.mijnlijst { --mh-tabel: minmax(0, 1fr) 72px 112px 72px 88px 56px 112px 176px 16px; } } /* IMP-425: verloop in één regel (176), te koop sinds met "≤" (112) */ /* IMP-183: hartjes 72; verloop 136 (koerslijn + bedrag) */
@media (prefers-reduced-motion: reduce) { .mijnlijst, .mijnlijst.open, .mh-rij { transition-duration: 1ms !important; } }

/* IMP-151: Soort woning. Telefoon en 1024–1279 px: als regel onder het adres ("Delft · Hoekwoning"); vanaf 1280 px een
   eigen kolom na het adres (links uitgelijnd, tekst). "Hoekwoning of twee-onder-een-kap" mag daar over twee regels. */
.mh-k-soort { grid-area: soort; display: none; }
@media (min-width: 1280px) {
  .mijnlijst { --mh-tabel: minmax(0, 1fr) 176px 56px 128px 80px 112px 80px 112px 136px 16px; }
  .mh-koppen, .mh-rij { grid-template-areas: "adres soort cijfer prijs m2 pm2 bouwjaar sinds verloop door"; }
  .mh-koppen .mh-kopje.mh-k-soort { display: flex; justify-content: flex-start; }
  .mh-rij .mh-cel.mh-k-soort { display: flex; text-align: left; align-items: flex-start; }
  .mh-rij .mh-k-soort .mh-w { white-space: normal; }
  .mh-soortregel { display: none; }
}
/* IMP-183: hartjeskolom (vijf hartjes van 14 px) 72 breed; Prijsverloop 136 (koerslijn + € 1.250.000); Soort 144 (mag over twee regels).
   Tot 1439 px staan straat en plaats onder elkaar, zodat de straat de hele adreskolom heeft. */

@media (min-width: 1280px) and (max-width: 1439px) { .mh-adres { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; } .mh-straat, .mh-plaats { max-width: 100%; } }
/* IMP-166: Label (energielabel) en Te koop (in dagen). Telefoon en tot 1279 px: label op de plaatsregel; vanaf 1280 px een
   eigen kolom. Soort: pas vanaf 1440 px een kolom, daaronder op de plaatsregel (anders wordt het adres te smal; ≥ 288 px). */
.mh-k-label { grid-area: label; display: none; }
@media (min-width: 1280px) {
  .mijnlijst.mijnlijst { --mh-tabel: minmax(200px, 3fr) 72px minmax(120px, 1.3fr) minmax(80px, 1fr) minmax(104px, 1.1fr) minmax(64px, .8fr) minmax(64px, .6fr) minmax(120px, 1.2fr) minmax(176px, 1.6fr) 16px; } /* IMP-425: de vrije ruimte verdeeld over alle kolommen, geen gat na Adres */
  .mh-koppen, .mh-rij { grid-template-areas: "adres cijfer prijs m2 pm2 bouwjaar label sinds verloop door"; }
  .mh-koppen .mh-kopje.mh-k-soort, .mh-rij .mh-cel.mh-k-soort { display: none; }
  .mh-soortregel { display: inline; }
  .mh-koppen .mh-kopje.mh-k-label, .mh-rij .mh-cel.mh-k-label { display: flex; }
  .mh-labelregel { display: none; }
}
@media (min-width: 1440px) {
  .mijnlijst.mijnlijst { --mh-tabel: minmax(200px, 3fr) minmax(120px, 1.6fr) 72px minmax(120px, 1.3fr) minmax(80px, 1fr) minmax(104px, 1.1fr) minmax(64px, .8fr) minmax(64px, .6fr) minmax(120px, 1.2fr) minmax(176px, 1.6fr) 16px; }
  .mh-koppen, .mh-rij { grid-template-areas: "adres soort cijfer prijs m2 pm2 bouwjaar label sinds verloop door"; }
  .mh-koppen .mh-kopje.mh-k-soort, .mh-rij .mh-cel.mh-k-soort { display: flex; }
  .mh-soortregel { display: none; }
}
/* Herstel P1: label/soort-regel op de computer. 1024–1279 en 1280–1439: derde regel onder straat en plaats (56 px rij);
   vanaf 1280 staat het label in een kolom (dus alleen de soort), vanaf 1440 ook de soort (regel weg). */
@media (min-width: 1024px) { .mh-adres .mh-straat, .mh-adres .mh-plaats, .mh-kenmerken { line-height: 1.25; } }
@media (min-width: 1024px) and (max-width: 1439px) { .mh-rij .mh-adres { flex-direction: column; align-items: flex-start; gap: 0; } .mh-kenmerken { max-width: 100%; } }
/* IMP-246 (eindcontrole): tot 1439 px heeft het adres drie regels (56 px) en het prijsverloop twee; de rij is daarom 56 hoog
   (was 44 sinds IMP-143: het adres liep dan in de volgende rij). Vanaf 1440 staat alles in 44. */
@media (min-width: 1024px) and (max-width: 1439px) { .mh-rij { height: var(--maat-tik); } }
@media (min-width: 1280px) { .mh-punt { display: none; } }
@media (min-width: 1440px) { .mh-kenmerken { display: none; } }
/* Controle 19b: op ≥ 1440 stond de plaats naast de straat en kromp "Niet meer te koop" tot "Niet meer te …". Nu ook daar
   straat en plaats onder elkaar: de plaatsregel heeft de hele adreskolom (± 288 px), de status past altijd. */
@media (min-width: 1440px) { .mh-rij .mh-adres { flex-direction: column; align-items: flex-start; gap: 0; } .mh-adres .mh-straat, .mh-adres .mh-plaats { max-width: 100%; } }

/* IMP-507 (B357): het hartjesfilter (IMP-428) is weg; sorteren op de kolomkop Hartjes en de hartjes per rij blijven. */

/* IMP-354 (B219, IMP-347: "1440: Mijn huizen als balk over de volle breedte, kaartlabels eronder afgekapt"; KERN: Mijn huizen als paneel
   op verzoek, symmetrisch). Vanaf 1440 px is Mijn huizen een paneel zo breed als de tabel zonder afkappen (--mh-max = de minimale
   kolommen + 8 px tussenruimte + 16 px opvulling, op het 8-px-raster), gecentreerd onder de balk (zelfde middenas, zoals het lege paneel
   en het Filters-vel): de kaart blijft links en rechts zichtbaar en het paneel groeit niet mee op een groter scherm. Opent en sluit op
   zijn eigen plek (vervagen), zoals het lege paneel; schuiven van links zou schuin over de kaart gaan. Het lege paneel (360) houdt zijn eigen regel. */
@media (min-width: 1440px) {
  :root body #mijnhuizen.mijnlijst:not(:has(.mh-leeg)) { --mh-max: 1248px; width: min(calc(100% - 2 * var(--paneel-marge)), var(--mh-max)); left: calc(50% - min(calc(100% - 2 * var(--paneel-marge)), var(--mh-max)) / 2);
    transform: translateY(-6px) scale(.98); transform-origin: top center; opacity: 0;
    transition: transform var(--veer-dicht) var(--veer-curve), opacity .18s ease, visibility 0s linear var(--veer-dicht); }
  :root body #mijnhuizen.mijnlijst.open:not(:has(.mh-leeg)) { transform: none; opacity: 1; transition: transform var(--veer-open) var(--veer-curve), opacity .18s ease, visibility 0s; }
  .mh-koppen, .mh-rij { column-gap: var(--stap-1); padding: 0 var(--stap-2); }
  .mh-rijen li + li::before, .mh-koppen::after { left: var(--stap-2); right: var(--stap-2); }
}