/* stijl.css - TRM-huisstijl (design system: Y:\18_AI_Knowledge_Base\00_General\TRM_DesignSystem).
   Montserrat, antraciet en lichtgrijs, koper uitsluitend als accent (knoppen, microlabels, markeringen),
   scherp en vlak: 2 px hoeken, 1 px lijnen, geen schaduwen en geen pillen.
   Alle kleuren en het lettertype zijn variabelen; een ander merk overschrijft ze via thema in config.js. */
:root{
  --antraciet:#232021; --licht:#E6E5E2; --wit:#fff; --accent:#A07050; --accent-d:#85583d; --lijn:#D4D4D0;
  --ink:var(--antraciet); --tekst:rgba(35,32,33,.62); --vlak:#F4F3F0;
  --hero-bg:var(--antraciet); --hero-ink:#fff; --hero-tekst:rgba(255,255,255,.72); --hero-lijn:rgba(255,255,255,.14);
  --font:'Montserrat',Arial,sans-serif; --r:2px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}   /* de vaste kop dekt anders het doel van een sprong af */
body{margin:0;background:var(--wit);color:var(--ink);font:400 15px/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}

/* kop en introductie: donkere vlakken met het merkteken als watermerk */
header.top{position:sticky;top:0;z-index:40;background:var(--hero-bg);color:var(--hero-ink);border-bottom:1px solid var(--hero-lijn)}
header.top .wrap{display:flex;align-items:center;gap:24px;height:64px}
header.top .logo{height:30px;width:auto}
.kopknop{margin-left:auto;background:var(--accent);color:#fff;border:1px solid var(--accent);padding:11px 16px;font:600 11.5px/1 var(--font);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:var(--r);white-space:nowrap}
.kopknop:hover{background:var(--accent-d);border-color:var(--accent-d)}
.kopknop .kort{display:none}
.hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink)}
.hero::before{content:"";position:absolute;right:-60px;top:50%;width:420px;height:433px;transform:translateY(-50%);opacity:.06;
  background:var(--watermerk,none) no-repeat center/contain;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:end;padding-top:50px;padding-bottom:44px}
.kicker{font:700 12px/1 var(--font);letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.hero h1{margin:16px 0 0;font:700 clamp(30px,3.9vw,50px)/1.08 var(--font);letter-spacing:-.03em}
.hero p{margin:0;font-weight:300;font-size:16px;line-height:1.7;color:var(--hero-tekst);max-width:560px}

/* kleine koppen (microlabels) */
.kop5{margin:0 0 10px;font:600 11.5px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst)}

/* woningkeuze */
.woningen-kop{padding-top:26px}
.woningen{display:flex;gap:10px;overflow-x:auto;padding:0 0 14px;scrollbar-width:none;scroll-snap-type:x proximity}
.woningen::-webkit-scrollbar{display:none}
.woning{flex:1 0 148px;max-width:200px;border:1px solid var(--lijn);background:var(--wit);padding:0;cursor:pointer;border-radius:var(--r);text-align:left;
  overflow:hidden;position:relative;scroll-snap-align:start}
.woning .img{display:block;aspect-ratio:3/2;background:#ddd center/cover no-repeat}
.woning b{display:block;padding:8px 10px 9px;font:600 11.5px/1.3 var(--font);letter-spacing:.01em}
.woning::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease}
.woning:hover{border-color:#9a9a96}
.woning[aria-pressed=true]{border-color:var(--ink)}
.woning[aria-pressed=true]::after{transform:scaleX(1)}

/* podium: de samengestelde gevel */
.podium{display:grid;grid-template-columns:minmax(0,1fr) 380px;border:1px solid var(--lijn)}
.buhne{position:relative;background:#0c0c0c;overflow:hidden;width:100%;transition:height .45s cubic-bezier(.2,.7,.2,1)}
.lagen{position:relative;width:100%;aspect-ratio:var(--ar,16/9);transform-origin:50% 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .35s ease;
  transform:scale(var(--zf,1)) translate(var(--tx,0%),var(--ty,0%))}
.lagen.ver{opacity:0}
/* stilstaand beeld van de vorige woning dat over de nieuwe scene ligt tot die helemaal geladen is, en dan wegfaadt */
.lagen.snap{position:absolute;left:0;top:0;z-index:3;pointer-events:none;transition:opacity .38s ease}
@media (prefers-reduced-motion:reduce){.lagen,.lagen.snap,.lagen img.laag,.buhne{transition:none}}
.lagen img{position:absolute}
.lagen img.basis{inset:0;width:100%;height:100%}
.lagen img.laag{cursor:pointer;transition:opacity .45s ease}
.lagen img.openbg{opacity:0}
/* de bewegende deur: binnen de gemeten opening, per soort deur een eigen beweging */
.beweeg{position:absolute;overflow:hidden;visibility:hidden;cursor:pointer}
.beweeg[data-t=taats],.beweeg[data-t=draai]{overflow:visible}
.beweeg .blad{position:absolute;inset:0;will-change:transform}
.beweeg .blad img{position:absolute;max-width:none}
.beweeg[data-t=sectionaal] .blad{transition:transform 3.4s cubic-bezier(.45,.05,.3,1),filter 3.4s}
.beweeg[data-t=sectionaal] .blad::after{content:"";position:absolute;left:0;right:0;top:100%;height:7%;background:linear-gradient(rgba(0,0,0,.5),transparent)}
.beweeg[data-t=sectionaal].open .blad{transform:translateY(-101%);filter:brightness(.8)}
.beweeg[data-t=zijwaarts] .blad{transition:transform 3.8s cubic-bezier(.45,.05,.3,1),filter 3.8s}
.beweeg[data-t=zijwaarts] .blad::after{content:"";position:absolute;top:0;bottom:0;right:100%;width:4%;background:linear-gradient(to left,rgba(0,0,0,.45),transparent)}
.beweeg[data-t=zijwaarts].open .blad{transform:translateX(101%);filter:brightness(.85)}
.beweeg[data-t=taats] .blad,.beweeg[data-t=draai] .blad{transition:transform 2.9s cubic-bezier(.5,.05,.25,1),filter 2.9s}
.beweeg[data-t=taats].open .blad{transform:rotateY(var(--hoek));filter:brightness(.62)}
.beweeg[data-t=draai].open .blad{transform:rotateY(var(--hoek));filter:brightness(.6)}
/* aanpasbare onderdelen: hoekjes rond het product en een label erboven, niets over het product zelf */
.kader{position:absolute;z-index:2;pointer-events:none;--s:calc(1 / var(--zf,1))}
.kader b{position:absolute;width:calc(18px * var(--s));height:calc(18px * var(--s));border:0 solid #fff;opacity:.85;
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.6));transition:width .25s,height .25s,opacity .25s,border-color .25s}
.kader b:nth-child(1){left:0;top:0;border-left-width:calc(2px * var(--s));border-top-width:calc(2px * var(--s))}
.kader b:nth-child(2){right:0;top:0;border-right-width:calc(2px * var(--s));border-top-width:calc(2px * var(--s))}
.kader b:nth-child(3){left:0;bottom:0;border-left-width:calc(2px * var(--s));border-bottom-width:calc(2px * var(--s))}
.kader b:nth-child(4){right:0;bottom:0;border-right-width:calc(2px * var(--s));border-bottom-width:calc(2px * var(--s))}
.kader.aan b,.kader.hover b{opacity:1;width:calc(28px * var(--s));height:calc(28px * var(--s))}
.kader.aan b{border-color:var(--accent)}
.label{position:absolute;z-index:3;--s:calc(1 / var(--zf,1));transform:translate(-50%,-100%) scale(var(--s));transform-origin:50% 100%;
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:var(--wit);color:var(--ink);padding:5px 12px 5px 5px;
  font:600 12.5px/1 var(--font);cursor:pointer;white-space:nowrap;border-radius:var(--r);
  transition:background .2s,color .2s,transform .7s cubic-bezier(.2,.7,.2,1)}
.label.onder{transform:translate(-50%,0) scale(var(--s));transform-origin:50% 0}
.label[aria-pressed=true]{background:var(--ink);color:#fff}
.label .ico{width:24px;height:24px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;border-radius:var(--r)}
.label .ico svg{width:14px;height:14px}
.label .kort{display:none}
/* twee labels die elkaar raken (smal scherm, twee producten dicht bij elkaar): alleen het icoon */
.label.compact{padding:5px;gap:0}
.label.compact .lang,.label.compact .kort{display:none}
.bediening{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:8px;z-index:4;flex-wrap:wrap}
.bediening button{border:1px solid transparent;background:rgba(255,255,255,.96);color:var(--ink);padding:10px 14px;font:600 12.5px/1 var(--font);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--r)}
.bediening button[aria-pressed=true]{background:var(--ink);color:#fff}
.bediening .rechts{margin-left:auto}

.paneel{padding:24px 24px 22px;display:flex;flex-direction:column;gap:18px;border-left:1px solid var(--lijn);min-width:0}
.paneel .soort{font:700 11.5px/1.3 var(--font);letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.paneel h2{margin:6px 0 0;font:300 26px/1.15 var(--font);letter-spacing:-.02em}
.paneel p{margin:0;color:var(--tekst);font-size:14px}
.labels{display:flex;flex-wrap:wrap;gap:6px}
.labels span{border:1px solid var(--lijn);padding:4px 10px;font-size:12px;color:#4a4647;border-radius:var(--r)}
.links{min-width:0;display:flex;flex-direction:column}
.strip{padding:18px 20px 20px;border-top:1px solid var(--lijn)}
.keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.keuzes button{border:1px solid transparent;padding:0;cursor:pointer;background:var(--licht);aspect-ratio:1;overflow:hidden;outline:1px solid transparent;border-radius:var(--r)}
.keuzes button img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.keuzes button:hover img{transform:scale(1.05)}
.keuzes button[aria-current=true]{outline:2px solid var(--ink);outline-offset:1px}
.kleur .kop5 span{color:var(--ink);text-transform:none;letter-spacing:0;margin-left:8px;font-weight:500}
.stalen{display:flex;flex-wrap:wrap;gap:7px}
.staal{width:30px;height:30px;border:1px solid var(--lijn);cursor:pointer;padding:0;display:grid;place-items:center;border-radius:var(--r)}
.staal:hover{outline:1px solid var(--tekst);outline-offset:1px}
.staal[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:1px}
.staal.orig{background:var(--vlak);color:var(--ink)}
.staal.orig svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.entree{border-top:1px solid var(--lijn);padding-top:16px}
.entree .rij{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid var(--lijn);
  background:var(--wit);padding:5px 12px 5px 5px;margin-bottom:6px;cursor:pointer;border-radius:var(--r)}
.entree .rij img{width:44px;height:44px;object-fit:cover;border-radius:var(--r)}
.entree .rij small{display:block;color:var(--tekst);font:600 10.5px/1.3 var(--font);text-transform:uppercase;letter-spacing:.1em}
.entree .rij b{font-weight:600;font-size:13px}
.entree .rij[aria-current=true]{border-color:var(--ink)}
.entree .rij .w{font-size:12px;color:var(--accent);font-weight:600}
.schakel{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;user-select:none;margin-top:8px}
.schakel input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border:1px solid var(--lijn);background:var(--licht);position:relative;cursor:pointer;margin:0;flex:none;border-radius:var(--r);transition:background .2s,border-color .2s}
.schakel input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border:1px solid var(--lijn);border-radius:1px;transition:left .2s}
.schakel input:checked{background:var(--ink);border-color:var(--ink)}
.schakel input:checked::after{left:18px;border-color:#fff}
.acties{margin-top:auto;display:grid;gap:8px}
.knop{border:1px solid var(--ink);background:var(--wit);color:var(--ink);padding:13px 16px;cursor:pointer;font:600 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;border-radius:var(--r)}
.knop:hover{background:var(--vlak)}
.knop.hoofd{background:var(--accent);border-color:var(--accent);color:#fff}
.knop.hoofd:hover{background:var(--accent-d);border-color:var(--accent-d)}

/* galerij */
.galerijkop{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:72px 0 22px;flex-wrap:wrap}
.galerijkop h2{font:300 clamp(26px,3vw,38px)/1.1 var(--font);margin:0;letter-spacing:-.02em}
.galerijkop p{margin:8px 0 0;color:var(--tekst)}
.balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.telling{margin-left:auto;color:var(--tekst);font-size:13.5px;font-feature-settings:"tnum"}
.telling b{color:var(--ink);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.seg button{border:0;border-right:1px solid var(--lijn);background:var(--wit);padding:10px 14px;cursor:pointer;font:500 13px/1 var(--font);color:var(--ink)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.wisknop,.filterknop{border:1px solid var(--lijn);background:var(--wit);padding:10px 14px;cursor:pointer;font:500 13px/1 var(--font);display:inline-flex;align-items:center;gap:7px;border-radius:var(--r)}
.wisknop:hover:not(:disabled){border-color:var(--ink)}
.wisknop:disabled{opacity:.4;cursor:default}
.filterknop{display:none}
.lay{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:start;padding-bottom:110px}
aside.filters{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;padding-right:6px}
.filterkop{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.filterkop b{font-weight:600}
.filterkop button{border:0;background:none;cursor:pointer;font-size:12.5px;color:var(--ink);text-decoration:underline;padding:0}
.filterkop button:disabled{color:var(--tekst);text-decoration:none;cursor:default}
.groep{border-bottom:1px solid var(--lijn);padding:14px 0}
.groep h3{margin:0 0 10px;font:600 11.5px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--lijn);background:var(--wit);padding:6px 11px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-radius:var(--r)}
.chip:hover{border-color:#9a9a96}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:disabled{opacity:.35;cursor:default}
.chip .n{font-size:11.5px;color:var(--tekst);font-feature-settings:"tnum"}
.chip[aria-pressed=true] .n{color:#b8b4b6}
.stip{width:13px;height:13px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);background-size:cover;border-radius:1px}
.sluit-filters{display:none}
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.kaart{cursor:pointer;position:relative}
.kaart .foto{aspect-ratio:1;position:relative;overflow:hidden;background:var(--licht);border-radius:var(--r)}
.kaart .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);color:transparent}
.kaart:hover .foto img{transform:scale(1.045)}
.kaart .soort{margin-top:12px;font:600 11px/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst)}
.kaart h4{margin:4px 0 2px;font-weight:600;font-size:15.5px;line-height:1.3}
.kaart p{margin:0;color:var(--tekst);font-size:13px}
.kaart .open{position:absolute;right:12px;top:12px;background:#fff;padding:6px 10px;font:600 11.5px/1 var(--font);opacity:0;transition:opacity .2s;display:flex;gap:6px;align-items:center;border-radius:var(--r)}
.kaart:hover .open{opacity:1}
.hart{position:absolute;left:12px;top:12px;width:36px;height:36px;border:0;background:rgba(255,255,255,.96);display:grid;place-items:center;cursor:pointer;z-index:2;border-radius:var(--r)}
.hart svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6}
.hart[aria-pressed=true] svg{fill:var(--accent);stroke:var(--accent)}
.leeg{grid-column:1/-1;border:1px dashed var(--lijn);padding:40px;text-align:center;color:var(--tekst);border-radius:var(--r)}
.knop.meer{grid-column:1/-1;justify-self:center;min-width:260px;margin-top:6px}
.knop.meer .n{color:var(--tekst);font-weight:500;text-transform:none;letter-spacing:0}

/* bewaarlijst */
.keuzebalk{position:fixed;left:50%;bottom:20px;transform:translate(-50%,160%);transition:transform .3s,visibility 0s .3s;visibility:hidden;background:var(--ink);color:#fff;
  padding:8px 8px 8px 20px;display:flex;align-items:center;gap:14px;z-index:50;max-width:calc(100vw - 32px);border-radius:var(--r)}
.keuzebalk.aan{transform:translate(-50%,0);visibility:visible;transition:transform .3s}
.keuzebalk .mini{display:flex;gap:3px}
.keuzebalk .mini img{width:34px;height:34px;object-fit:cover;border-radius:1px}
.keuzebalk button{border:0;background:var(--accent);color:#fff;padding:11px 16px;cursor:pointer;white-space:nowrap;font:600 11.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r)}
dialog.keuze{border:1px solid var(--lijn);padding:0;width:min(580px,94vw);border-radius:var(--r);color:var(--ink)}
dialog.keuze::backdrop{background:rgba(35,32,33,.6)}
.kz{padding:28px}
.kz h2{margin:0 0 6px;font:300 26px/1.2 var(--font);letter-spacing:-.02em}
.kz p{margin:0;color:var(--tekst);font-size:14px}
.kz ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:8px}
.kz li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;border:1px solid var(--lijn);padding:6px;border-radius:var(--r)}
.kz li img{width:56px;height:56px;object-fit:cover;border-radius:var(--r)}
.kz li small{color:var(--tekst)}
.kz li button{border:0;background:none;cursor:pointer;color:var(--tekst);font-size:20px;padding:6px 10px}
.kz .rij{display:grid;grid-template-columns:1fr auto;gap:8px}

footer{background:var(--hero-bg);color:var(--hero-tekst);font-size:13px}
footer .wrap{padding:30px 32px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
footer img{height:26px;width:auto}
footer .rechts{white-space:nowrap;color:var(--hero-ink);font-weight:600;letter-spacing:.04em}

@media (max-width:1150px){
  .podium{grid-template-columns:1fr}
  .paneel{border-left:0;border-top:1px solid var(--lijn)}
  .raster{grid-template-columns:repeat(2,1fr)}
  .hero .wrap{grid-template-columns:1fr;gap:16px}
}
@media (max-width:860px){
  .wrap{padding:0 16px}
  header.top .wrap{height:56px}
  header.top .logo{height:26px}
  .kopknop{padding:9px 12px;font-size:10.5px}
  .kopknop .lang{display:none}.kopknop .kort{display:inline}
  .lay{grid-template-columns:1fr}
  .filterknop{display:inline-flex}
  aside.filters{position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;background:#fff;padding:18px 18px 12px;z-index:60;
    transform:translateY(105%);visibility:hidden;transition:transform .3s,visibility 0s .3s;border-top:1px solid var(--ink)}   /* gesloten: ook niet met het toetsenbord te bereiken */
  aside.filters.open{transform:none;visibility:visible;transition:transform .3s}
  .sluit-filters{display:flex;position:sticky;bottom:0;width:100%;margin-top:12px}
  .strip{padding:14px 12px 14px}
  .keuzes{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;scroll-snap-type:x mandatory;padding:3px}
  .keuzes button{flex:0 0 72px;scroll-snap-align:start}
  .label{font-size:11px;padding:4px 9px 4px 4px;gap:6px}
  .label .ico{width:18px;height:18px}
  .label .ico svg{width:11px;height:11px}
  .label .lang{display:none}.label .kort{display:inline}
  .kader b{width:calc(9px * var(--s));height:calc(9px * var(--s))}
  .kader.aan b,.kader.hover b{width:calc(13px * var(--s));height:calc(13px * var(--s))}
  .bediening{left:10px;right:10px;bottom:10px;gap:6px}
  .bediening button{padding:8px 10px;font-size:12px}
  .bediening .tekst{display:none}
  .telling{margin-left:0;width:100%}
  .seg{max-width:100%;overflow-x:auto}
  .seg button{white-space:nowrap}
  footer .wrap{grid-template-columns:1fr;gap:12px;padding:24px 16px}
  .woning{flex-basis:128px}
}
/* aanraakschermen (tablet in de showroom): vingervlakken minstens 44 px, geen verborgen hover-labels */
@media (pointer:coarse){
  .label{padding:9px 14px 9px 8px;min-height:44px}
  .bediening button,.knop,.filterknop,.wisknop,.seg button{min-height:44px;min-width:44px}
  .staal{width:44px;height:44px}
  .stalen{gap:4px}
  .chip{min-height:44px;padding:8px 14px}
  .hart{width:44px;height:44px}
  .schakel{min-height:44px;margin-top:0}
  .filterkop button{min-height:44px;padding:0 6px}
  .kaart .open{opacity:1}
}
/* showroommodus (?showroom): voor de tablet van de adviseur. Geen introductie, compactere kop, beeld naast het keuzepaneel
   zodra er 900 px breed is (ook liggend op een 10-inch iPad, die anders onder het breekpunt van 1150 valt en stapelt). */
html.showroom .hero,html.showroom .kopknop,html.showroom .woningen-kop{display:none}
html.showroom header.top .wrap{height:48px}
html.showroom header.top .logo{height:24px}
/* acht woningen op een rij en laag: de naam ligt over de foto, zodat het beeld en de ontwerpkeuze op een kleine tablet in beeld blijven */
html.showroom .woningen{padding-top:8px;padding-bottom:8px;gap:6px;overflow:hidden}
html.showroom .woning{flex:1 1 0;min-width:76px;max-width:150px}
html.showroom .woning b{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 4px;font-size:10.5px;line-height:1.2;color:#fff;
  background:linear-gradient(transparent,rgba(35,32,33,.78))}
html.showroom .woning[aria-pressed=true]{border-color:var(--ink)}
html.showroom button,html.showroom .label,html.showroom .beweeg,html.showroom img.laag{touch-action:manipulation}
/* "Nieuwe bezoeker" (alleen in de showroomweergave, app.js zet hem zichtbaar): eerste tik vraagt bevestiging, tweede tik wist alles */
.nieuwknop{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--hero-ink);border:1px solid rgba(255,255,255,.38);
  padding:9px 14px;min-height:36px;font:600 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.nieuwknop[hidden]{display:none}
.nieuwknop .i{width:16px;height:16px}
.nieuwknop:hover{border-color:var(--hero-ink)}
.nieuwknop.bevestig{background:var(--accent);border-color:var(--accent);color:#fff}
@media (pointer:coarse){.nieuwknop{min-height:44px}}
/* melding in de laatste seconden voor de automatische reset; boven de bewaarbalk, vlak zoals de rest van de huisstijl */
.resetmelding{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:55;background:var(--accent);color:#fff;padding:12px 18px;
  font:600 14px/1.35 var(--font);border-radius:var(--r);max-width:calc(100vw - 32px);text-align:center}
.resetmelding[hidden]{display:none}
@media (min-width:900px){
  html.showroom main.wrap{padding:0 16px}
  html.showroom .podium{grid-template-columns:1fr 340px}
  html.showroom .paneel{border-left:1px solid var(--lijn);border-top:0;padding:16px 18px;gap:12px;overflow:auto;
    max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  html.showroom .paneel h2{font-size:22px}
  html.showroom .paneel p{font-size:13px}
  html.showroom .strip{padding:12px 14px 14px}
  html.showroom .keuzes{gap:6px}
  html.showroom .galerijkop{margin-top:56px}
}
@media (max-width:560px){
  .raster{grid-template-columns:1fr 1fr;gap:18px 12px}
  .kaart p{display:none}
  .kaart h4{font-size:14px}
  .kaart .open{display:none}
  .seg button{padding:10px 9px;font-size:12.5px}
}