/* ------------------------------------------------------------------
   Lin Housing — styling.

   Mobile-first: de basisregels gelden voor de telefoon, de media-queries
   voegen alleen ruimte toe. De link wordt geappt; vrijwel iedereen opent
   hem op een klein scherm.

   Geen externe fonts. Systeemfonts renderen direct, kosten geen request
   en houden de site vrij van een cookiebanner.
   ------------------------------------------------------------------ */

:root{
  --groen:#1F3A34;        /* rustig, niet-makelaarachtig; hoofdkleur */
  --groen-diep:#152722;
  --groen-zacht:#E4EBE7;
  --oker:#B8874B;         /* accent: alleen voor 'binnenkort' en focus */
  --oker-zacht:#F3E9DA;   /* lichte tint van --oker, zelfde rol als --groen-zacht
                             maar dan voor "Inbegrepen" — geen tekst/grote vlakken,
                             alleen een tag-achtergrond, zie merk/_index.md */
  --wit:#FFFFFF;
  --papier:#F8F7F4;
  --lijn:#E2DFD8;
  --inkt:#1B1B19;
  --inkt-zacht:#5C5A54;

  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --wrap:1080px;
  --gut:clamp(1.1rem,5vw,3rem);
  --rond:10px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--papier);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:var(--groen);text-decoration:none}
a:hover{text-decoration:underline}

/* Eén zichtbare focusstijl voor alles wat bestuurbaar is. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--oker);
  outline-offset:2px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;
  background:var(--wit);padding:.6rem 1rem;z-index:10;
}
.skip:focus{left:.5rem;top:.5rem}


/* ---------- kop ---------- */

.kop{
  background:var(--groen);
  color:var(--wit);
  position:sticky;top:0;z-index:5;
}
.kop-binnen{
  max-width:var(--wrap);margin:0 auto;padding:.9rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.merk{color:var(--wit);display:block}
.merk:hover{text-decoration:none}
.merk-logo{
  display:block;height:6.8rem;width:auto;
}

/* Eén duimschakelaar in plaats van twee knoppen — met maar twee talen is
   een schakelaar duidelijker dan twee knoppen waarvan er altijd één actief
   is. De duim schuift op basis van aria-checked, dezelfde staat als een
   screenreader hoort. */
.taal-schakelaar{
  position:relative;flex:none;
  display:flex;align-items:stretch;
  width:4.4rem;height:1.85rem;
  border:0;border-radius:999px;
  background:var(--groen-diep);
  cursor:pointer;padding:0;
}
.taal-duim{
  position:absolute;top:.16rem;left:.16rem;
  width:calc(50% - .16rem);height:calc(100% - .32rem);
  border-radius:999px;background:var(--wit);
  transition:transform .18s ease;
}
.taal-schakelaar[aria-checked="true"] .taal-duim{transform:translateX(100%)}

/* flex:1 en niet inline-block+width:50% — de whitespace tussen de twee
   spans in de HTML (een newline in de bron) telt bij inline-block mee als
   een letterlijke spatie, en dan tellen twee keer 50% plus die spatie
   samen op tot meer dan de volle breedte: "EN" viel daardoor naar een
   nieuwe regel in plaats van naast "NL" te blijven staan. flex negeert
   die witruimte volledig. */
.taal-optie{
  position:relative;z-index:1;flex:1;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--groen-zacht);
}
/* Het label onder de duim donker, zodat het leest op het wit. Op een eigen
   klasse en niet op :first-child: de duim is het eerste kind van de knop,
   dus "NL" was nooit :first-child en bleef licht op wit staan — nauwelijks
   te lezen zolang de site in het Nederlands stond (v0.54). */
.taal-schakelaar[aria-checked="false"] .taal-nl,
.taal-schakelaar[aria-checked="true"] .taal-en{
  color:var(--groen-diep);
}


/* ---------- hoofdruimte ---------- */

main{
  max-width:var(--wrap);margin:0 auto;
  padding:1.75rem var(--gut) 3rem;
}

h2{font-size:clamp(1.35rem,1.2rem + 1vw,1.85rem);line-height:1.25;font-weight:600}
h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem}

.intro{margin-bottom:1.1rem}

/* ---------- filters ---------- */

/* Twee groepen onder elkaar in plaats van naast elkaar: op een telefoon
   zou naast elkaar meteen omslaan, en dan staat het label los van zijn
   eigen pillen. Onder elkaar blijft de koppeling duidelijk op elk formaat. */
.filters{
  display:flex;flex-direction:column;gap:.6rem;
  margin-bottom:1.75rem;
}
.filter-groep{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.filter-groep-label{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--inkt-zacht);flex:none;
}
.filter-pillen{display:flex;gap:.4rem;flex-wrap:wrap}
.filter-pil{
  background:var(--wit);border:1px solid var(--lijn);color:var(--inkt-zacht);
  font:inherit;font-size:.85rem;padding:.35rem .85rem;border-radius:999px;
  cursor:pointer;transition:border-color .15s,background-color .15s,color .15s;
}
.filter-pil:hover{border-color:var(--groen);color:var(--groen)}
.filter-pil.is-actief{
  background:var(--groen);border-color:var(--groen);color:var(--wit);font-weight:600;
}
.filter-pil.is-actief:hover{color:var(--wit)}

/* Prijs en oppervlakte: twee losse getalvelden in dezelfde rij-opzet als
   de pillenrijen erboven, met hetzelfde kleine label. */
.filter-groep-numeriek{gap:1.1rem}
.filter-numeriek-veld{
  display:flex;flex-direction:column;gap:.2rem;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--inkt-zacht);
}
.filter-numeriek-veld input{
  font:inherit;text-transform:none;letter-spacing:normal;
  font-size:.9rem;color:var(--inkt);
  background:var(--wit);border:1px solid var(--lijn);border-radius:8px;
  padding:.35rem .6rem;width:7rem;
}
.filter-numeriek-veld input:focus-visible{
  outline:2px solid var(--oker);outline-offset:1px;
}

/* ---------- filters: knop + popup ---------- */

.filters-open-knop{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--wit);border:1px solid var(--lijn);color:var(--groen-diep);
  font:inherit;font-size:.88rem;font-weight:600;
  padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;
  margin-bottom:1.5rem;
}
.filters-open-knop:hover{border-color:var(--groen);color:var(--groen)}

/* dialog centreert zichzelf via de browser (position:fixed + margin:auto
   in het UA-stijlblad zodra showModal() actief is) — hier alleen vorm en
   kleur, geen positionering. */
/* position/inset/margin met de hand, niet aan het UA-stijlblad
   overgelaten: de globale reset hierboven (*{margin:0}) trekt de
   margin:auto weg waarmee een <dialog> zichzelf normaal centreert, en
   dan blijft hij linksboven hangen in plaats van in het midden. */
.filters-dialoog{
  position:fixed;inset:0;margin:auto;
  border:none;border-radius:14px;
  width:min(26rem,calc(100% - 2rem));
  max-height:min(32rem,calc(100% - 3rem));
  padding:1.25rem;
  background:var(--papier);color:var(--inkt);
}
.filters-dialoog::backdrop{background:rgba(21,39,34,.55)}
.filters-dialoog .filters{margin-bottom:0}
.filters-dialoog-kop{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.filters-dialoog-kop h2{font-size:1.1rem;font-weight:650}
.filters-sluit{
  background:none;border:0;font-size:1.5rem;line-height:1;color:var(--inkt-zacht);
  cursor:pointer;padding:.2rem .5rem;border-radius:6px;
}
.filters-klaar{
  display:block;width:100%;margin-top:1.25rem;
  background:var(--groen);color:var(--wit);
  border:0;border-radius:var(--rond);padding:.75rem;
  font:inherit;font-weight:600;cursor:pointer;
}
.filters-klaar:hover{background:var(--groen-diep)}

.leeg{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:1.5rem;color:var(--inkt-zacht);
}
.leeg p{margin-bottom:1rem}
.leeg p:last-child{margin-bottom:0}


/* ---------- overzicht ---------- */

/* auto-fill en niet auto-fit: geen vast aantal kolommen, maar wél een
   vaste kaartbreedte. auto-fit vouwt lege kolommen in, waardoor één
   woning de hele breedte kreeg en een staande foto een scherm hoog werd
   (v0.48). Met auto-fill blijven de lege plekken staan en ziet één kaart
   eruit als drie. */
.grid{
  display:grid;gap:1.1rem;
  grid-template-columns:1fr;
}
@media (min-width:620px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

.kaart{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);overflow:hidden;
  color:inherit;display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s;
}
.kaart:hover{text-decoration:none;border-color:var(--groen);transform:translateY(-2px)}

.kaart-beeld{position:relative;aspect-ratio:4/3;background:var(--groen-zacht);overflow:hidden}
/* De foto absoluut, anders wint hij het van aspect-ratio: een staande
   telefoonfoto duwt het vak dan op naar zijn eigen hoogte en de tekst
   eronder staat per kaart op een andere hoogte. Zo bepaalt het vak de
   maat en snijdt de foto zich bij. */
.kaart-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Aantal foto's rechtsboven, tegenover de statusbadge linksboven. Een
   halfdoorzichtige pil en geen witte: wit naast de witte statusbadge
   leest als twee even belangrijke labels, en dat is het niet. */
.kaart-fototeller{
  position:absolute;top:.7rem;right:.7rem;
  display:inline-flex;align-items:center;gap:.28rem;
  font-size:.75rem;font-weight:600;
  padding:.26rem .55rem;border-radius:999px;
  background:rgba(21,39,34,.6);color:var(--wit);
}
.kaart-fototeller svg{width:.95rem;height:.95rem}

/* Oppervlakte links, maandbedrag rechts, onderaan de foto.

   Het verloop is er niet voor de sier maar voor de leesbaarheid: witte
   tekst op een foto verdwijnt zodra er een lichte keuken achter staat.
   Het loopt naar volledig doorzichtig, zodat het onderin donker genoeg
   is zonder dat de foto zelf achter een waas verdwijnt. De text-shadow
   vangt het laatste geval op — een foto die ook onderin licht is. */
.kaart-strook{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;
  padding:2rem .8rem .65rem;
  background:linear-gradient(to top,
    rgba(21,39,34,.88), rgba(21,39,34,.5) 45%, rgba(21,39,34,0));
  color:var(--wit);text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.kaart-opp{font-size:.85rem;font-weight:500}
.kaart-prijs{
  font-size:1.05rem;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.kaart-body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.kaart-type{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--inkt-zacht);
}
.kaart-titel{font-size:1.1rem;font-weight:600;line-height:1.3}
.kaart-buurt{font-size:.9rem;color:var(--inkt-zacht)}
.kaart-beschikbaar{font-size:.88rem;margin-top:.45rem;font-weight:500}
.kaart-cta{
  font-size:.85rem;color:var(--groen);font-weight:600;margin-top:.7rem;
}
/* Een titel over twee regels mag de knop van één kaart niet lager zetten
   dan die van zijn buren: duw hem naar de onderkant. */
.kaart-body .kaart-cta{margin-top:auto;padding-top:.7rem}
.kaart:hover .kaart-cta{text-decoration:underline}

.badge{
  position:absolute;top:.7rem;left:.7rem;
  font-size:.72rem;font-weight:600;letter-spacing:.03em;
  padding:.28rem .6rem;border-radius:999px;
  background:var(--wit);color:var(--groen);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.badge-binnenkort{background:var(--oker);color:var(--wit)}


/* ---------- detail ---------- */

/* De badge staat op de detailpagina in de tekstkolom, niet op de foto. */
body[data-weergave="detail"] .badge{position:static;box-shadow:none;
  display:inline-block;margin-top:.6rem;border:1px solid var(--lijn)}
body[data-weergave="detail"] .badge-binnenkort{border-color:var(--oker)}

.terug{
  display:inline-block;font-size:.9rem;margin-bottom:1.1rem;
  color:var(--inkt-zacht);
}

.detail-kop{margin-bottom:1.25rem}
.detail-type{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--inkt-zacht);
}
.detail-buurt{color:var(--inkt-zacht);margin-top:.15rem}

.galerij{margin-bottom:1.5rem}

/* Het spoor is de swipe. scroll-snap doet het werk dat je anders met
   touch-events zou naprogrammeren, en voelt daardoor precies zoals de
   rest van het toestel. De scrollbalk is verborgen: op de telefoon is
   hij er toch niet, en op een desktop leidt hij af van de duimen.
   scroll-behavior staat hier bewust NIET op smooth — dat zou een swipe
   vertragen. Het vloeiende scrollen zit in app.js, alleen bij een klik
   of een pijltjestoets. */
.galerij-spoor{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  border-radius:var(--rond);
  background:var(--groen-zacht);
  scrollbar-width:none;
}
.galerij-spoor::-webkit-scrollbar{display:none}

/* Pijlen over de foto, links en rechts in het midden. Wit rondje met
   een groene chevron: leesbaar op een donkere én een lichte opname, en
   klein genoeg om de foto niet af te dekken. 44px is de vingermaat; op
   een telefoon blijven ze staan, want niet iedereen weet dat je kunt
   swipen. Aan het begin of eind van de reeks verdwijnt de pijl die
   nergens meer heen kan, in plaats van grijs te blijven staan. */
.galerij-venster{position:relative}
.galerij-pijl{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.88);color:var(--groen);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:opacity .15s,background-color .15s;
}
.galerij-pijl svg{width:22px;height:22px}
.galerij-pijl:hover{background:var(--wit)}
.galerij-pijl.is-vorige{left:.6rem}
.galerij-pijl.is-volgende{right:.6rem}
.galerij-pijl:disabled{opacity:0;visibility:hidden}

.dia{flex:0 0 100%;scroll-snap-align:start}
.dia-fig{margin:0}
/* contain en niet cover (v0.50). Met cover verloor een staande
   telefoonfoto boven en onder de helft van zijn beeld — juist op de
   pagina waar iemand de kamer wil zien. Het vak blijft 3:2, zodat de
   pagina niet verspringt bij elke foto; een staande foto krijgt links en
   rechts de zachtgroene achtergrond van het spoor. Bijsnijden mag wél op
   de kaart in het overzicht: daar is de foto een voorproefje. */
.dia img{width:100%;aspect-ratio:3/2;object-fit:contain;display:block}
/* Een video idem, maar met een donkere rand zoals elke videospeler. */
.dia video{width:100%;aspect-ratio:3/2;object-fit:contain;display:block;background:var(--groen-diep)}

/* Optioneel opschrift onder een foto. Over de foto heen zou hem
   onleesbaar maken bij een lichte opname; eronder in de bak kost een
   regel hoogte en is altijd te lezen. */
.dia-opschrift{
  padding:.5rem .7rem;font-size:.85rem;
  color:var(--inkt-zacht);background:var(--wit);
  border-top:1px solid var(--lijn);
}

/* Duimen scrollen horizontaal op de telefoon in plaats van te wikkelen. */
.galerij-strip{
  display:flex;gap:.5rem;margin-top:.5rem;
  overflow-x:auto;padding-bottom:.25rem;
  scrollbar-width:thin;
}
.duim{
  flex:none;width:76px;padding:0;cursor:pointer;
  background:none;border:2px solid transparent;border-radius:6px;
  overflow:hidden;line-height:0;
}
.duim img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duim[aria-pressed="true"]{border-color:var(--groen)}
/* Afspeeldriehoek op de duim van een video, zodat je ziet dat er iets te
   spelen valt voordat je erop klikt. Met CSS en niet als icoon: ICONEN in
   app.js spiegelt de kaarticonen, en daar hoort dit niet bij. */
.duim{position:relative}
.duim.is-video::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-35%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--wit);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Plaatshoudermelding links, teller rechts. De teller staat als laatste
   in de flexrij en wordt met margin-left:auto naar rechts geduwd, zodat
   hij ook rechts staat als de melding er niet is. */
.galerij-onder{
  display:flex;align-items:baseline;gap:1rem;
  margin-top:.45rem;
  font-size:.8rem;color:var(--inkt-zacht);
}
.galerij-teller{margin-left:auto;flex:none}
.galerij-note{min-width:0}

.gegevens{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:.35rem 1rem;margin-bottom:1.5rem;
}
.gegeven{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--lijn);
}
.gegeven:last-child{border-bottom:0}
.gegeven dt{color:var(--inkt-zacht);font-size:.92rem}
.gegeven dd{font-weight:500;text-align:right}

.kenmerken{margin-bottom:1.5rem}
/* Per groep een kleine kop (v0.58). Kleiner dan de h3 erboven en in de
   zachte inktkleur: het is een indeling, geen nieuw onderwerp. */
.kenmerkgroep{margin-top:.85rem}
.kenmerkgroep h4{
  font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--inkt-zacht);margin:0 0 .4rem;
}
.kenmerkgroep.is-uitgelicht li{
  background:var(--oker-zacht);border:1px solid rgba(184,135,75,.35);
}
.kenmerken ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.kenmerken li{
  background:var(--groen-zacht);color:var(--groen-diep);
  font-size:.85rem;padding:.3rem .7rem;border-radius:999px;
}

/* Zelfde vorm als .kenmerken — het is een subset van dezelfde data — maar
   met het okeren accent in plaats van groen, zodat het uitgelicht oogt
   zonder een derde kleur te introduceren. */
.inbegrepen{margin-bottom:1rem}
.inbegrepen ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.inbegrepen li{
  background:var(--oker-zacht);color:var(--groen-diep);
  font-size:.85rem;padding:.3rem .7rem;border-radius:999px;
  border:1px solid rgba(184,135,75,.35);
}

/* Lopende tekst, geen opsomming. 62ch omdat een regel langer dan
   ongeveer vijfenzestig tekens op een breed scherm lastig te volgen is:
   het oog moet terug naar het begin van de volgende regel en raakt kwijt
   waar dat is. */
.omschrijving{margin-bottom:1.75rem;max-width:62ch}
.omschrijving p{color:var(--inkt-zacht);line-height:1.65}
.omschrijving p + p{margin-top:.85rem}


/* ---------- in de buurt ---------- */

/* auto-fit met een minimum van 19rem: op een telefoon één kolom, op een
   breder scherm zoveel kolommen als er passen. Geen media query nodig en
   dus ook geen breekpunt dat bij een zevende voorziening niet meer klopt.

   19rem en niet 13rem, want bij 13rem paste er een vierde kolom in die
   'Station Arnhem Presikhaaf' niet meer kon tonen. Liever drie kolommen
   met hele namen dan vier met puntjes. */
.omgeving{margin-bottom:2rem}
.omgeving-buurttekst{
  color:var(--inkt-zacht);max-width:62ch;margin-bottom:.75rem;
}
.omgeving-gemeten{
  font-size:.8rem;color:var(--inkt-zacht);margin-bottom:.6rem;
}
.omgeving ul{
  list-style:none;display:grid;gap:.1rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:.35rem .5rem;
}
.omgeving li{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem .5rem;min-width:0;
}

/* De iconen zijn de enige plek op de pagina waar de hoofdkleur op klein
   formaat terugkomt. Ze mogen opvallen, maar niet zwaarder wegen dan de
   tekst ernaast — vandaar de gedempte tint en niet het volle groen. */
.omgeving svg{
  width:1.35rem;height:1.35rem;flex:none;
  color:var(--groen);opacity:.75;
}

/* Namen breken af op een nieuwe regel in plaats van op een beletselteken.
   Een afgekapte naam is erger dan een regel die twee hoog wordt: bij
   'Winkelcentrum Pre…' moet de lezer raden wat er stond, en dat is precies
   wat dit blok zou moeten wegnemen. */
.omgeving-naam{min-width:0;line-height:1.35}

/* De tijd rechts uitlijnen zodat de kolom te scannen is zonder te lezen.
   Het reiswijze-icoon staat hier kleiner dan het plaats-icoon links: het
   hoort bij het getal, niet naast de naam. */
.omgeving-tijd{
  margin-left:auto;flex:none;padding-left:.75rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.85rem;color:var(--inkt-zacht);font-variant-numeric:tabular-nums;
}
.omgeving-tijd svg{width:1.05rem;height:1.05rem;opacity:.6}


/* Zichtbaar voor een screenreader, niet voor het oog. Gebruikt voor het
   woord 'lopen' of 'fietsen', dat op het scherm een icoon is. clip-path
   en niet display:none — dat laatste haalt het uit de voorleesvolgorde. */
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}


/* ---------- contact ---------- */

.contact{
  background:var(--groen);color:var(--wit);
  border-radius:var(--rond);padding:1.5rem;
  margin-top:2.5rem;
}
.contact h3{color:var(--wit)}
.contact p{color:var(--groen-zacht)}
.contact-uitleg{font-size:.9rem;margin-top:.6rem;opacity:.9}

.mailknop{
  display:inline-block;margin-top:1rem;
  background:var(--wit);color:var(--groen-diep);
  font-weight:600;padding:.7rem 1.3rem;border-radius:var(--rond);
}
.mailknop:hover{text-decoration:none;background:var(--groen-zacht)}


/* ---------- voet ---------- */

.voet{
  max-width:var(--wrap);margin:0 auto;
  padding:1.5rem var(--gut) 2.5rem;
  border-top:1px solid var(--lijn);
  font-size:.85rem;color:var(--inkt-zacht);
}
.voet-klein{margin-top:.3rem;font-size:.8rem}


/* ---------- terugval zonder JavaScript ---------- */

/* Stond eerst als style-attribuut in de noscript. Hier omdat de
   Content-Security-Policy in _headers geen inline stijl toestaat, en
   omdat CSS wél laadt als JavaScript uitstaat. */
.noscript-melding{padding:1.5rem;text-align:center}


/* ---------- voorkeuren respecteren ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}


/* ---------- afdrukken ---------- */

/* Voor wie een advertentie wil meenemen zonder scherm — met een partner
   bespreken, of los van internet nalezen. Geen apart printbestand: dit
   is dezelfde pagina, alleen anders opgemaakt voor papier.

   Wat wegvalt: alles wat op papier niets betekent (taalknoppen, "terug",
   de duimenstrip, pijlen en foto-teller van de galerij, de skip-link, filters —
   die laatste komt sowieso niet voor op de detailpagina maar wel op een
   afgedrukt overzicht). De swipe-galerij wordt een kolom losse foto's:
   scroll-snap en horizontaal scrollen bestaan niet op een afgedrukt vel. */
@media print{
  .skip,.taal-schakelaar,.terug,.filters,.filters-open-knop,
  .galerij-strip,.galerij-onder,.galerij-pijl,.dia.is-video,
  .kaart-fototeller{display:none}

  .kop{position:static;background:none;color:var(--inkt);border-bottom:1px solid var(--lijn)}
  .merk{color:var(--inkt)}

  .galerij-spoor{
    display:block;overflow:visible;background:none;border-radius:0;
  }
  .dia{scroll-snap-align:none;page-break-inside:avoid;margin-bottom:.6rem}

  .contact{background:none;color:var(--inkt);border:1px solid var(--lijn)}
  .contact h3,.contact p{color:var(--inkt)}
  .mailknop{background:none;border:1px solid var(--inkt);color:var(--inkt)}

  body{font-size:11pt}
}

/* ---------- buurtkaart ---------- */

/* Eén afbeelding, op de server samengesteld. Geen kaartbibliotheek en geen
   ingesloten kaartdienst: dat zou verzoeken naar buiten betekenen en
   daarmee de cookievrije opzet van deze site kosten. */
.kaartblok{margin-bottom:2rem}
.kaartblok-fig{margin:0}
.kaartblok img{
  width:100%;height:auto;display:block;
  border:1px solid var(--lijn);border-radius:var(--rond);
  background:var(--groen-zacht);
}
.kaartblok-note{
  margin-top:.5rem;font-size:.8rem;color:var(--inkt-zacht);
  max-width:62ch;
}