/* ══════════════════════════════════════════════════════
   Museum Catalogus — Stijlblad
   Archeologiehuis Zuid-Holland / Museum Park Archeon
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* ─── RESET & BASIS ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --kleur-pre-bg:    #e8dcc8;   /* zandkleur */
  --kleur-rt-bg:     #e4ddd0;   /* marmerwit/beige */
  --kleur-me-bg:     #d9ccb4;   /* houtbeige */
  --kleur-default:   #ede5d5;
  --kleur-nav:       #2c2420;
  --kleur-nav-tekst: #c8b88a;
  --kleur-titels:    #5a6e35;   /* mosgroen */
  --kleur-tekst:     #2c2420;
  --kleur-meta:      #5c4033;
  --kleur-border:    #c4a882;
  --kleur-accent:    #8b6914;
  --kleur-filter-bg: rgba(255,255,255,0.55);
  --kleur-filter-actief: #5c4033;
  --radius:          10px;
  --schaduw:         0 4px 18px rgba(0,0,0,0.18);
  --font-titel:      'IM Fell English SC', 'Palatino Linotype', serif;
  --font-tekst:      'Lora', Georgia, serif;
  --nav-hoogte:      62px;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  font-family: var(--font-tekst);
  color: var(--kleur-tekst);
  background: var(--kleur-default);
  user-select: none;
  -webkit-user-select: none;
}

/* ─── SCHERMEN ───────────────────────────────────────── */
.scherm {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  display: flex;
  flex-direction: column;
}
.scherm.actief {
  opacity: 1;
  pointer-events: all;
}

/* ─── ACHTERGRONDEN PER PAGINA ───────────────────────── */
body              { background: url('/RM/assets/bg/Hoofd-menu.jpg')  center/cover no-repeat; }
body.bg-pre       { background: url('/RM/assets/bg/PRE-menu.jpg')    center/cover no-repeat; }
body.bg-rt        { background: url('/RM/assets/bg/RT-menu.jpg')     center/cover no-repeat; }
body.bg-me        { background: url('/RM/assets/bg/ME-menu.jpg')     center/cover no-repeat; }

/* ─── DETAILPAGINA ACHTERGROND BINNEN DE CANVAS ──────── */
/* Bitmap zit IN .detail-layout zodat die meeSchaalt     */
/* met transform:scale() — altijd exact uitgelijn        */
.detail-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
body.bg-pre.modus-detail .detail-bg { background-image: url('/RM/assets/bg/PRE-items.jpg'); }
body.bg-rt.modus-detail  .detail-bg { background-image: url('/RM/assets/bg/RT-items.jpg');  }
body.bg-me.modus-detail  .detail-bg { background-image: url('/RM/assets/bg/ME-items.jpg');  }

/* Letterbox-gebieden: zwart */
body.bg-pre.modus-detail,
body.bg-rt.modus-detail,
body.bg-me.modus-detail { background: #000; }

/* detail-bg: neutraal (PNG masker levert de textuur) */
body.modus-detail .detail-bg { background-image: none; }

/* ─── PNG MASKER (binnen canvas, schaalt mee) ────────────
   z-index 5: boven viewer(1), onder tekst(10)
   Transparant venster → object zichtbaar
   Opaque linkerzijde  → tekst leesbaar op bitmap-texture  */
.detail-masker {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 5;
  display: none;
}

/* Tekst boven masker, viewer onder masker */
body.modus-detail .detail-tekst  { position: relative; z-index: 10; }
body.modus-detail .detail-viewer { position: relative; z-index: 1; }

/* ─── DETAILPAGINA — CANVAS-SCHALING ────────────────────
   .detail-layout wordt als een vaste 1920×1018px canvas
   geschaald via JS transform:scale(sx,sy).
   Binnenin: vaste pixels die altijd op dezelfde relatieve
   plek staan, ongeacht de venstergrootte.
   ──────────────────────────────────────────────────────── */
body.modus-detail .detail-layout {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width:  1920px !important;
  height: 1080px !important;       /* volledig scherm incl. nav */
  transform-origin: top left;
  overflow: hidden;
  gap: 0;
}

/* Tekst: 930px vast — staat links van het object-kader.
   padding-bottom houdt de metadata boven de 80px nav-balk. */
body.modus-detail .detail-tekst {
  width: 930px !important;
  max-width: 930px !important;
  min-width: 930px !important;
  flex-shrink: 0 !important;
  padding-bottom: 95px !important;   /* 80px nav + 15px lucht */
}

/* Viewer: padding in vaste pixels voor schaduwrand (13px) */
/* PNG-masker dekt de schaduwrand af — viewer op volle 900×900px
   Kader: x=950, y=65, 900×900px op 1920×1080 canvas.
   detail-viewer is volledige canvashoogte (1080px), nav staat
   absoluut → padding-bottom bevat ook de 80px nav-hoogte.       */
body.modus-detail .detail-viewer {
  padding-top:    65px;   /* y=65: bovenkant kader            */
  padding-left:   20px;   /* x=950 − 930 tekstpaneel          */
  padding-right:  70px;   /* 1920 − 950 − 900                 */
  padding-bottom: 115px;  /* 35 onder kader + 80 nav-hoogte   */
  overflow: hidden;
  box-sizing: border-box;
}

/* Viewer-container vult het bruikbare vlak (874×874px) */
body.modus-detail .viewer-container {
  position: relative !important;
  width:  100% !important;
  height: 100% !important;
  left: auto !important; top: auto !important;
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
  overflow: hidden !important;
}

/* Nav binnen canvas: vast onderaan, schaalt mee met canvas */
body.modus-detail .detail-nav {
  position: absolute !important;
  bottom: 0 !important;
  left:   0 !important;
  right:  0 !important;
  height: 80px !important;   /* touchvriendelijk (was 62px) */
  z-index: 20;
}

/* ─── FONTSIZES DETAILPAGINA (vaste px — canvas schaalt) ─ */
body.modus-detail .detail-naam          { font-size: 40px !important; }
body.modus-detail .detail-beschrijving  { font-size: 20px !important; line-height: 1.75; }
body.modus-detail .detail-meta          { font-size: 18px !important; line-height: 2; }
body.modus-detail .detail-nav .nav-item { font-size: 30px !important; }
body.modus-detail .detail-nav .terug-knop-detail,
body.modus-detail .detail-nav .nav-home-knop,
body.modus-detail .detail-nav .nav-zoek-knop { font-size: 28px !important; }
body.modus-detail .detail-nav .nav-pijl-klein { width: 56px !important; height: 56px !important; font-size: 22px !important; }
body.modus-detail #scherm-detail::before { display: none; }

/* Overlay voor leesbaarheid */
.scherm::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240,228,210,0.55);
  pointer-events: none;
  z-index: 0;
}
.scherm > * { position: relative; z-index: 1; }

/* ─── STARTPAGINA (dynamisch) ────────────────────────── */
#scherm-start { cursor: pointer; overflow: hidden; }

/* Achtergronden — crossfade in 30s cyclus */
.start-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
/* Elke fase = 10s (33.33% van 30s)
   Fade-in: 1s, zichtbaar: 8s, fade-out: 1s             */
#sbg-pre { animation: start-bg-fade 30s infinite 0s;  }
#sbg-rt  { animation: start-bg-fade 30s infinite 10s; }
#sbg-me  { animation: start-bg-fade 30s infinite 20s; }

@keyframes start-bg-fade {
  0%       { opacity: 0; }
  3.33%    { opacity: 1; }   /* 1s fade-in */
  30%      { opacity: 1; }   /* 8s zichtbaar */
  33.33%   { opacity: 0; }   /* 1s fade-out */
  100%     { opacity: 0; }   /* rest: verborgen */
}

/* Zwevende artefacten — gecentreerd in het midden */
.start-art {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  max-height: 55vh;   /* nooit groter dan middengebied */
}
/* Elk artefact vertaalt vanuit het midden */
#sart-1 { width: 42vw; animation: start-art 30s infinite 1s;  }
#sart-2 { width: 32vw; animation: start-art 30s infinite 5s;  }
#sart-3 { width: 34vw; animation: start-art 30s infinite 11s; }
#sart-4 { width: 38vw; animation: start-art 30s infinite 15s; }
#sart-5 { width: 44vw; animation: start-art 30s infinite 21s; }
#sart-6 { width: 32vw; animation: start-art 30s infinite 25s; }

@keyframes start-art {
  0%      { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  3.33%   { opacity: 1; transform: translate(-50%, -50%) scale(1.0);  }
  10%     { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  13.33%  { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
  100%    { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
}

/* Overlay: tekst boven en onder, transparant midden */
.start-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(20,15,10,0.55) 0%,
    transparent 25%,
    transparent 75%,
    rgba(20,15,10,0.55) 100%
  );
}

/* "Tik op het scherm" — boven-midden met marge */
.start-instructie {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-titel);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: 0.18em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
  animation: start-puls 2.5s ease-in-out infinite;
}
@keyframes start-puls {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* "Collectie Archeologiehuis..." — beneden-midden met marge */
.start-titel {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-titel);
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* ─── HOOFDMENU ──────────────────────────────────────── */
#scherm-menu {
  padding: 0;
}
.menu-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px 8px;
  flex-shrink: 0;
}
.logo-links, .logo-rechts {
  height: 60px;
  width: auto;
  object-fit: contain;
}
.menu-titel {
  font-family: var(--font-titel);
  font-size: clamp(1rem, 2.5vw, 1.7rem);
  letter-spacing: 0.12em;
  color: var(--kleur-tekst);
  text-align: center;
  text-transform: uppercase;
  flex: 1;
  padding: 0 16px;
}
.zoekbalk-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 30px 6px;
  flex-shrink: 0;
}
.zoekinput {
  width: 100%;
  max-width: 600px;
  padding: 12px 20px;
  border: 2px solid var(--kleur-border);
  border-radius: 30px;
  font-family: var(--font-tekst);
  font-size: 1.05rem;
  background: rgba(255,255,255,0.7);
  color: var(--kleur-tekst);
  outline: none;
  cursor: pointer;
}
.zoekinput:focus { background: rgba(255,255,255,0.9); border-color: var(--kleur-accent); }

.categorie-kaarten {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 16px 40px;
}
.cat-kaart {
  background: rgba(255,255,255,0.75);
  border: 2px solid var(--kleur-border);
  border-radius: var(--radius);
  width: clamp(180px, 26vw, 320px);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--schaduw);
  overflow: hidden;
}
.cat-kaart:hover, .cat-kaart:active { transform: scale(1.03); box-shadow: 0 8px 28px rgba(0,0,0,0.25); }
.cat-foto {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: #c4a882;
}
.cat-label {
  font-family: var(--font-titel);
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  color: var(--kleur-titels);
  text-align: center;
  padding: 12px 8px 14px;
  letter-spacing: 0.08em;
}
.menu-logos-onder {
  display: none; /* logos al bovenaan zichtbaar */
}

/* ─── ZOEKSCHERM ─────────────────────────────────────── */
#scherm-zoek {
  flex-direction: column;
}
.zoek-boven {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.5);
  border-bottom: 1px solid var(--kleur-border);
  flex-shrink: 0;
}
.zoekinput.groot { max-width: none; flex: 1; font-size: 1.15rem; }
.terug-knop, .wis-knop {
  background: var(--kleur-meta);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--font-tekst);
  white-space: nowrap;
  flex-shrink: 0;
}
.wis-knop { background: #888; }
.zoek-resultaten {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  grid-auto-rows: 155px;
  gap: 16px;
  align-content: start;
}
.zoek-leeg {
  grid-column: 1/-1;
  text-align: center;
  color: #888;
  font-size: 1.1rem;
  padding: 40px;
}

/* ─── NAVIGATIEBALK ──────────────────────────────────── */
.navigatiebalk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--kleur-nav);
  height: var(--nav-hoogte);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.nav-item {
  font-family: var(--font-titel);
  font-size: 30px;          /* uniforme nav-tekstgrootte op alle schermen */
  letter-spacing: 0.12em;
  color: var(--kleur-nav-tekst);
  padding: 0 32px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.2s;
  border-right: 1px solid rgba(200,184,138,0.2);
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-item:last-child { border-right: none; }
.nav-item:hover { color: #fff; }
.nav-item.actief {
  color: #fff;
  border-bottom: 3px solid var(--kleur-nav-tekst);
}

/* ─── CATEGORIEPAGINA ────────────────────────────────── */
/* ─── CATEGORIEPAGINA — CANVAS MET PNG-MASKER ───────────
   1920×1080 canvas, uniform geschaald (zoals detailpagina).
   Thumbnailvenster 1300×850 op (380,110). Masker erover,
   tekst + eigen scrollbar daar weer bovenop.
   ──────────────────────────────────────────────────────── */
#scherm-categorie { display: block; overflow: hidden; }

.cat-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
}

/* Laag 1: scrollbaar thumbnailvenster */
.object-grid {
  position: absolute;
  left: 380px;
  top: 110px;
  width: 1300px;
  height: 850px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  box-sizing: border-box;
  background: #fff;                /* witte achtergrond tussen thumbnails */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 196px;
  gap: 16px;
  align-content: start;
  z-index: 1;
  scrollbar-width: none;           /* native scrollbar verbergen (we tonen eigen) */
}
.object-grid::-webkit-scrollbar { display: none; }

/* Zwarte letterbox in categoriemodus (overlay-tint uit) */
body.modus-categorie { background: #000; }
body.modus-categorie #scherm-categorie::before { display: none; }

/* Laag 2: PNG-masker (per categorie) */
.cat-masker {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 5;
}
body.bg-pre .cat-masker { background-image: url('/RM/assets/bg/PRE-MAIN.png'); }
body.bg-rt  .cat-masker { background-image: url('/RM/assets/bg/RT-MAIN.png'); }
body.bg-me  .cat-masker { background-image: url('/RM/assets/bg/ME-MAIN.png'); }

/* Laag 3: titel, subcat-tabs en filters — boven het masker */
.cat-paginatitel {
  position: absolute;
  top: 30px;
  left: 380px;
  width: 1300px;
  text-align: center;
  font-family: var(--font-titel);
  font-size: 34px;
  letter-spacing: 0.10em;
  color: var(--kleur-tekst);
  text-transform: uppercase;
  z-index: 10;
  margin: 0;
}

/* Subcat-tabs (perioden) — verticaal in het linkerpaneel,
   onder de materialen, met een scheidingslijn ertussen. */
.subcat-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--kleur-border);   /* scheidingslijn materiaal ↔ periode */
}
.subcat-tabs:empty { display: none; }            /* geen lijn als er geen perioden zijn (RT) */
.subcat-tab {
  font-family: var(--font-tekst);
  font-size: 20px;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 4px solid transparent;
  white-space: nowrap;
  color: var(--kleur-meta);
  line-height: 1.3;
  transition: all 0.2s;
}
.subcat-tab:hover { color: var(--kleur-filter-actief); }
.subcat-tab.actief {
  border-left-color: var(--kleur-filter-actief);
  color: var(--kleur-filter-actief);
  font-weight: 600;
}

/* Filterpaneel links (in de linker mask-strook) */
.filter-paneel {
  position: absolute;
  left: 24px;
  top: 150px;
  width: 336px;
  z-index: 10;
}
.filter-lijst { display: flex; flex-direction: column; gap: 6px; }
.filter-item {
  font-family: var(--font-tekst);
  font-size: 22px;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: all 0.2s;
  color: var(--kleur-meta);
  line-height: 1.3;
}
.filter-item:hover  { color: var(--kleur-filter-actief); }
.filter-item.actief {
  border-left-color: var(--kleur-filter-actief);
  font-weight: 600;
  color: var(--kleur-filter-actief);
}

/* Laag 4: eigen scrollbar rechts naast het venster, op het masker */
.cat-scrollbar {
  position: absolute;
  left: 1700px;        /* rechts van het venster (eindigt op 1680) */
  top: 130px;
  width: 16px;
  height: 810px;
  background: rgba(92,64,51,0.15);
  border-radius: 8px;
  z-index: 12;
  display: none;       /* JS toont alleen bij overflow */
}
.cat-scrollthumb {
  position: absolute;
  left: 0;
  width: 16px;
  background: var(--kleur-meta);
  border-radius: 8px;
  cursor: pointer;
  min-height: 50px;
}

/* Navigatiebalk onder, binnen canvas */
.cat-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  z-index: 15;
}

/* Objectkaart */
.object-kaart {
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--kleur-border);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  height: 100%;            /* vult de grid-cel volledig */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.object-kaart:hover, .object-kaart:active {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  z-index: 2;
}
.object-kaart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.object-kaart-naam {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(44,36,32,0.72);
  color: #f0e4d0;
  font-size: 0.65rem;
  padding: 4px 6px;
  text-align: center;
  line-height: 1.2;
  display: none;
}
.object-kaart:hover .object-kaart-naam { display: block; }
.object-kaart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c4a88240;
  color: var(--kleur-meta);
  font-size: 2rem;
}

/* ─── DETAILPAGINA ───────────────────────────────────── */
#scherm-detail { flex-direction: column; }

.detail-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: 0;
}
.detail-nav {
  display: flex;
  align-items: center;
}
.terug-knop-detail {
  background: none;
  border: none;
  color: var(--kleur-nav-tekst);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 20px;
  height: 100%;
  transition: color 0.2s;
}
.terug-knop-detail:hover { color: #fff; }

/* Tekst-paneel links */
.detail-tekst {
  width: 50%;
  max-width: 620px;
  padding: 22px 28px 16px;
  overflow-y: hidden;      /* paneel zelf scrollt niet */
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;  /* bitmap-textuur (PNG-mask) komt vol door */
}
.detail-naam {
  font-family: var(--font-titel);
  font-size: clamp(1.2rem, 2.5vw, 1.9rem);
  color: var(--kleur-tekst);
  letter-spacing: 0.04em;
}
.detail-lijn {
  border: none;
  border-top: 1px solid var(--kleur-border);
  margin: 4px 0;
}
.detail-beschrijving {
  font-size: clamp(0.82rem, 1.2vw, 0.96rem);
  line-height: 1.7;
  color: var(--kleur-tekst);
  flex: 1;
  min-height: 0;           /* laat flex-item krimpen zodat scroll werkt */
  overflow-y: auto;        /* alleen de beschrijving scrollt */
  padding-right: 4px;      /* kleine ruimte voor de scrollbar */
  white-space: pre-wrap;   /* behoud regelafbrekingen (Enter) uit de tekst */
  overflow-wrap: break-word;
}
.detail-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 3px;
  font-size: clamp(0.78rem, 1.1vw, 0.9rem);
  line-height: 1.6;
  align-items: baseline;   /* label en waarde op dezelfde tekstbasislijn */
}
.meta-label {
  color: var(--kleur-meta);
  font-weight: 600;
  white-space: nowrap;
}
.meta-waarde { color: var(--kleur-tekst); }

/* Pijlen in de navigatiebalk rechtsonder */
.nav-object-pijlen {
  margin-left: auto;
  margin-right: 22px;          /* ruimte tot de rechterrand */
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--kleur-default);
  padding: 6px 14px;
  border-radius: 8px;          /* rondom afgerond — zweeft in de balk */
  align-self: center;          /* gecentreerd in de nav-balk, niet uitgerekt */
}
.nav-pijl-klein {
  background: var(--kleur-meta);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.nav-pijl-klein:hover  { background: var(--kleur-accent); transform: scale(1.1); }
.nav-pijl-klein:disabled { background: rgba(92,64,51,0.3); cursor: default; transform: none; }
.nav-pijl {
  background: var(--kleur-meta);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-pijl:hover  { background: var(--kleur-accent); transform: scale(1.1); }
.nav-pijl:disabled { background: #ccc; cursor: default; transform: none; }

/* Viewer rechts */
.detail-viewer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.viewer-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #ffffff;
  border-radius: var(--radius);
  border: 1px solid var(--kleur-border);
  overflow: hidden;
}

/* Circlr 360°-viewer */
.circlr-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: grab;
}
.circlr-wrap:active { cursor: grabbing; }
.circlr-img {
  max-width: 100%;
  max-height: calc(100% - 36px);
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.circlr-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(44,36,32,0.6);
  color: #f0e4d0;
  font-size: 0.78rem;
  padding: 4px 14px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
}

/* Fallback afbeelding */
.viewer-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fallback-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ─── SCROLLBAR (algemeen, dun) ──────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
::-webkit-scrollbar-thumb { background: var(--kleur-border); border-radius: 3px; }

/* Objectgrid gebruikt nu een EIGEN scrollbar (.cat-scrollbar);
   native scrollbar is verborgen in de .object-grid regel hierboven. */

/* ─── HOME & ZOEK KNOPPEN IN NAVIGATIEBALK ──────────── */
.nav-home-knop,
.nav-zoek-knop {
  background: none;
  border: none;
  color: var(--kleur-nav-tekst);
  font-size: 28px;          /* in verhouding met de 30px nav-tekst */
  cursor: pointer;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.nav-home-knop:hover,
.nav-zoek-knop:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ─── ZOEK POPUP OVERLAY ─────────────────────────────── */
.zoek-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.zoek-popup-overlay.actief { display: flex; }

.zoek-popup-paneel {
  background: var(--kleur-default);
  border-radius: 14px;
  width: min(92vw, 1000px);
  height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  animation: popup-in 0.22s ease;
}
@keyframes popup-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.zoek-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--kleur-border);
  flex-shrink: 0;
}
.zoek-popup-header .zoekinput.groot { font-size: 1.1rem; }

.zoek-sluit-knop {
  background: var(--kleur-meta);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.zoek-sluit-knop:hover { background: #8b2020; }

.popup-resultaten {
  flex: 1;
  min-height: 0;           /* zodat het krimpt als toetsenbord er is */
  overflow-y: auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  grid-auto-rows: 140px;
  gap: 12px;
  align-content: start;
}

/* ─── VIRTUEEL TOETSENBORD ───────────────────────────── */
.virt-kb {
  flex-shrink: 0;
  background: rgba(92,64,51,0.08);
  border-top: 1px solid var(--kleur-border);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kb-rij {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.kb-toets {
  background: #fff;
  border: 1px solid var(--kleur-border);
  border-radius: 7px;
  height: 52px;
  min-width: 52px;
  padding: 0 8px;
  font-family: var(--font-tekst);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kleur-tekst);
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.kb-toets:active {
  background: var(--kleur-border);
  transform: scale(0.93);
}

/* Speciale toetsen */
.kb-spatie { min-width: 280px; font-size: 0.85rem; color: #888; }
.kb-wis    { min-width: 80px;  background: #f5e8e0; color: var(--kleur-meta); font-size: 1.3rem; }
.kb-wis:active { background: #e8c8b4; }
.kb-shift  { min-width: 72px;  font-size: 1.2rem; }
.kb-num    { min-width: 72px;  font-size: 0.85rem; color: #555; }

/* Rij 3 iets ingesprongen */
#kb-rij2  { padding: 0 14px; }
#kb-rij3  { padding: 0 28px; }

.kb-rij-onder { gap: 10px; }

/* ─── LAAD-INDICATOR ─────────────────────────────────── */
#laad-indicator {
  position: fixed;
  inset: 0;
  background: rgba(237,229,213,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  font-family: var(--font-titel);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--kleur-meta);
}
#laad-indicator.verborgen { display: none; }

/* ─── FOUTMELDING ────────────────────────────────────── */
#fout-melding {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #8b2020;
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 0.95rem;
  z-index: 100;
  display: none;
  max-width: 90vw;
  text-align: center;
}

/* ─── TOUCHSCREEN TWEAKS ─────────────────────────────── */
@media (hover: none) {
  .object-kaart-naam { display: block; }
  .cat-kaart { -webkit-tap-highlight-color: transparent; }
}