:root{--bg:#faf8f3;--paper:#fffdf8;--ink:#2d2a26;--muted:#746f66;--line:#514c45;--soft:#d6cfc3;--accent:#6d4e38}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Georgia,serif}a{color:inherit}button,input{font:inherit}.top{max-width:1180px;margin:auto;padding:14px 18px 5px;display:flex;justify-content:space-between;font:13px Arial,sans-serif;color:var(--muted)}
.front{max-width:760px;margin:0 auto;padding:8vh 20px;text-align:center}.front h1{font-size:clamp(3rem,7vw,5rem);margin:0}.lead{font-size:1.3rem;font-style:italic;color:var(--accent)}.front-door{width:190px;height:300px;margin:30px auto;border:2px solid var(--line);position:relative;box-shadow:inset 0 0 0 10px #f0e8dc}.front-door:before,.front-door:after,.door:before,.door:after{content:"";position:absolute;left:20%;right:20%;border:1px solid #8e887e}.front-door:before,.door:before{top:16%;height:25%}.front-door:after,.door:after{bottom:16%;height:25%}.knob{position:absolute;top:50%;right:12px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.search{display:flex;gap:8px;max-width:560px;margin:0 auto}.search input,.refine input{flex:1;padding:12px 14px;border:1px solid var(--line);background:white}.search button,.refine button{border:1px solid var(--line);background:#332f2a;color:#fff;padding:11px 17px;cursor:pointer}.message{max-width:620px;margin:18px auto 0;padding:10px 12px;border-left:4px solid #9a6d49;background:#fff8ed}.help{margin-top:10px;font:12px Arial,sans-serif;color:var(--muted)}
.space{position:relative;max-width:1180px;min-height:760px;margin:auto;padding:55px 12% 70px}.v{position:absolute;top:10%;bottom:10%;width:1px;background:var(--line)}.vl{left:12%}.vr{right:12%}.ray{position:absolute;height:1px;background:var(--line)}.short{width:7%}.long{width:17%}.lo{left:12%;transform-origin:left center}.ro{right:12%;transform-origin:right center}.tl-s{top:10%;transform:rotate(-145deg)}.tl-l{top:10%;transform:rotate(-34deg)}.tr-s{top:10%;transform:rotate(145deg)}.tr-l{top:10%;transform:rotate(34deg)}.bl-s{bottom:10%;transform:rotate(145deg)}.bl-l{bottom:10%;transform:rotate(34deg)}.br-s{bottom:10%;transform:rotate(-145deg)}.br-l{bottom:10%;transform:rotate(-34deg)}.inner{position:relative;z-index:2}
.backdoor{position:absolute;left:2%;top:27%;width:8%;text-align:center;text-decoration:none;z-index:4}.door{display:block;position:relative;width:82px;height:148px;margin:8px auto;border:1.5px solid var(--line)}.backdoor .knob{right:8px}.door-note{font:11px Arial,sans-serif;color:var(--muted)}
.hall-title{text-align:center;max-width:720px;margin:auto}.hall-title h1{font-size:clamp(2.5rem,5vw,4rem);margin:5px 0}.key{font-style:italic;color:var(--accent)}.hall-doors{display:grid;grid-template-columns:repeat(5,minmax(110px,160px));justify-content:center;gap:28px;margin:65px auto 0}.choice{text-align:center;display:grid;grid-template-rows:210px 64px}.choice a{text-decoration:none;display:grid;grid-template-rows:210px 64px}.choice .door{width:108px;height:194px;align-self:end}.choice-label{min-height:64px}.choice b{display:block;line-height:1.25}.choice small{font:11px Arial,sans-serif;color:var(--muted)}.refine{max-width:620px;margin:45px auto 0;text-align:center}.refine form{display:flex;gap:8px}.refine p{color:var(--muted)}
.room-head{text-align:center;max-width:650px;margin:auto}.eyebrow{font:12px Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.room-head h1{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1;margin:8px 0}.type{font:14px Arial,sans-serif;color:var(--muted)}.welcome{font-style:italic;color:var(--accent);font-size:1.25rem;margin-top:18px}.intro{max-width:58ch;margin:6px auto}.placeholder{max-width:760px;margin:55px auto 0;border:1px solid var(--line);background:var(--paper);padding:28px;text-align:center}.placeholder h2{margin-top:0}.placeholder p{color:var(--muted)}
@media(max-width:900px){.space{padding:35px 5%;min-height:auto}.v,.ray,.backdoor{display:none}.hall-doors{grid-template-columns:repeat(2,minmax(130px,180px))}}
@media(max-width:620px){.search,.refine form{flex-direction:column}.hall-doors{grid-template-columns:1fr 1fr;gap:15px}.choice,.choice a{grid-template-rows:195px 70px}.choice .door{width:96px;height:172px}}


/* =========================================================
   DATABASEPROEF 0.5 — echte tekstblokken op de tafel
   ========================================================= */
.kc-table-wrap{
  width:76%;
  margin:48px auto 0;
}
.kc-table{
  position:relative;
  background:var(--paper,#fffdf8);
  border:1px solid var(--line,#514c45);
  padding:24px 28px 28px;
  margin-right:12px;
  margin-bottom:12px;
}
.kc-table::before{
  content:"";
  position:absolute;
  left:100%;
  top:0;
  width:12px;
  height:100%;
  background:#eadfd1;
  border:1px solid var(--line,#514c45);
  border-left:0;
  transform:skewY(45deg);
  transform-origin:left top;
}
.kc-table::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px;
  background:#e3d6c6;
  border:1px solid var(--line,#514c45);
  border-top:0;
  transform:skewX(45deg);
  transform-origin:left top;
}
.kc-table > h2{
  text-align:center;
  margin:0 0 18px;
}
.kc-text-list{
  display:grid;
  gap:22px;
}
.kc-text-block{
  border-top:1px solid #ddd5ca;
  padding-top:18px;
}
.kc-text-block:first-child{
  border-top:0;
  padding-top:0;
}
.kc-text-block h3{
  margin:0 0 4px;
  font-size:1.08rem;
}
.text-type{
  margin-bottom:10px;
  font:11px Arial,sans-serif;
  color:var(--muted,#746f66);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.text-body{
  white-space:normal;
  line-height:1.58;
}
.empty-table{
  text-align:center;
  color:var(--muted,#746f66);
  font-style:italic;
}
@media(max-width:900px){
  .kc-table-wrap{width:90%}
}
@media(max-width:640px){
  .kc-table-wrap{width:100%;margin-top:30px}
  .kc-table{padding:18px 17px 22px}
}


/* DATABASEPROEF 0.5a — tafel blijft binnen de kamer */
.kc-text-block .text-body{
  line-height:1.55;
}
.read-more{
  margin-top:10px;
  padding:0;
  border:0;
  background:transparent;
  color:#6d4e38;
  cursor:pointer;
  font:12px Arial,sans-serif;
}
.read-more:hover{
  text-decoration:underline;
}
.text-dialog{
  width:min(860px,92vw);
  max-height:82vh;
  border:1px solid var(--line,#514c45);
  padding:0;
  background:#fffdf8;
  color:var(--ink,#2d2a26);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.text-dialog::backdrop{
  background:rgba(32,28,24,.42);
}
.text-dialog article{
  padding:34px 42px 42px;
}
.text-dialog h2{
  margin:0 38px 18px 0;
}
.dialog-body{
  line-height:1.7;
  font-size:1.03rem;
}
.dialog-close{
  position:absolute;
  right:14px;
  top:10px;
  border:0;
  background:transparent;
  font-size:30px;
  cursor:pointer;
  color:#5e574f;
}
@media(max-width:640px){
  .text-dialog{
    width:96vw;
    max-height:88vh;
  }
  .text-dialog article{
    padding:28px 20px 34px;
  }
}


/* =========================================================
   DATABASEPROEF 0.6 — echte relaties aan de muur
   ========================================================= */
.relation-wall{
  width:84%;
  margin:30px auto 8px;
  padding:18px 20px 20px;
  border:1px solid var(--line,#514c45);
  background:rgba(255,253,248,.76);
}
.relation-wall > h2{
  margin:0 0 14px;
  text-align:center;
}
.relation-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.relation-card{
  position:relative;
  min-width:150px;
  max-width:220px;
  padding:11px 13px 13px;
  text-align:center;
  border:1px solid #b9aea0;
  background:#fffdf8;
  margin-right:8px;
  margin-bottom:8px;
}
.relation-card::before{
  content:"";
  position:absolute;
  left:100%;
  top:0;
  width:8px;
  height:100%;
  background:#ece4d8;
  border:1px solid var(--line,#514c45);
  border-left:0;
  transform:skewY(45deg);
  transform-origin:left top;
}
.relation-card::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:8px;
  background:#e5dbcd;
  border:1px solid var(--line,#514c45);
  border-top:0;
  transform:skewX(45deg);
  transform-origin:left top;
}
.relation-kind{
  margin-bottom:5px;
  font:10px Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted,#746f66);
}
.relation-target{
  font-weight:700;
  color:inherit;
  text-decoration:none;
}
a.relation-target:hover{
  text-decoration:underline;
}
.relation-target-static{
  color:#6f6a63;
}
.empty-wall{
  text-align:center;
  color:var(--muted,#746f66);
  font-style:italic;
}
@media(max-width:640px){
  .relation-wall{width:100%}
  .relation-card{min-width:130px;max-width:100%}
}


/* =========================================================
   DATABASEPROEF 0.6a — compacte relationele muur
   ========================================================= */
.relation-wall{
  width:82%;
  margin:28px auto 12px;
  padding:16px 18px 20px;
}
.relation-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.relation-group{
  position:relative;
  border:1px solid #b9aea0;
  background:#fffdf8;
  padding:12px 14px 14px;
  margin-right:8px;
  margin-bottom:8px;
}
.relation-group::before{
  content:"";
  position:absolute;
  left:100%;
  top:0;
  width:8px;
  height:100%;
  background:#ece4d8;
  border:1px solid var(--line,#514c45);
  border-left:0;
  transform:skewY(45deg);
  transform-origin:left top;
}
.relation-group::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:8px;
  background:#e5dbcd;
  border:1px solid var(--line,#514c45);
  border-top:0;
  transform:skewX(45deg);
  transform-origin:left top;
}
.relation-group h3{
  margin:0 0 8px;
  font-size:.93rem;
  text-transform:none;
}
.relation-group ul{
  list-style:none;
  margin:0;
  padding:0;
}
.relation-group li{
  margin:4px 0;
  font-size:.84rem;
  line-height:1.25;
}
.relation-group a{
  color:inherit;
  text-decoration:none;
  font-weight:700;
}
.relation-group a:hover{
  text-decoration:underline;
}
.relation-more{
  margin-top:8px;
  padding:0;
  border:0;
  background:transparent;
  color:#6d4e38;
  cursor:pointer;
  font:11px Arial,sans-serif;
}
.relation-dialog{
  width:min(680px,90vw);
  max-height:80vh;
  border:1px solid var(--line,#514c45);
  padding:0;
  background:#fffdf8;
  color:var(--ink,#2d2a26);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.relation-dialog::backdrop{
  background:rgba(32,28,24,.42);
}
.relation-dialog article{
  padding:32px 38px 40px;
}
.relation-dialog-list{
  columns:2;
  column-gap:34px;
  padding-left:20px;
}
.relation-dialog-list li{
  break-inside:avoid;
  margin:0 0 8px;
}
.relation-dialog-list a{
  color:inherit;
  font-weight:700;
  text-decoration:none;
}
.relation-dialog-list a:hover{
  text-decoration:underline;
}
@media(max-width:900px){
  .relation-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .relation-wall{width:100%}
  .relation-groups{grid-template-columns:1fr}
  .relation-dialog-list{columns:1}
}

/* =========================================================
   DATABASEPROEF 0.6ac — gereedschapskist op de vloer
   Materiaal- en techniekrelaties worden uit de muur gehaald
   en alleen hier getoond. De kist bestaat alleen als er inhoud is.
   ========================================================= */
.kc-toolbox-wrap{
  width:48%;
  margin:42px 7% 24px auto;
}
.kc-toolbox{
  position:relative;
  padding:18px 22px 22px;
  border:2px solid #665344;
  border-radius:4px 4px 12px 12px;
  background:#eee5d8;
  box-shadow:0 10px 0 #d8c7b2, 0 12px 0 1px #665344;
}
.kc-toolbox::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:-10px;
  height:10px;
  border:2px solid #665344;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:#f5eee4;
}
.kc-toolbox > h2{
  margin:0 0 14px;
  text-align:center;
  font-size:1.15rem;
}
.kc-toolbox-sections{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.kc-toolbox-section{
  min-height:92px;
  padding:10px 12px;
  border:1px solid #aa9987;
  background:rgba(255,253,248,.8);
}
.kc-toolbox-section h3{
  margin:0 0 7px;
  font-size:.92rem;
}
.kc-toolbox-section ul{
  list-style:none;
  margin:0;
  padding:0;
  display:block;
  columns:auto !important;
  column-count:1 !important;
  column-width:auto !important;
}
.kc-toolbox-section li{
  break-inside:avoid;
  margin:4px 0;
  font-size:.84rem;
  line-height:1.25;
}
.kc-toolbox-section a{
  color:inherit;
  text-decoration:none;
  font-weight:700;
}
.kc-toolbox-section a:hover{
  text-decoration:underline;
}
.kc-toolbox-more{
  margin-top:8px;
  font-size:.78rem;
  font-style:italic;
  opacity:.72;
}
@media(max-width:900px){
  .kc-toolbox-wrap{width:68%;margin-right:5%}
}
@media(max-width:640px){
  .kc-toolbox-wrap{width:100%;margin:30px 0 18px}
  .kc-toolbox-sections{grid-template-columns:1fr}
  .kc-toolbox-section ul{columns:1}
}

/* 0.6d — ondersteunende objecten openen als leesvenster in de huidige kamer. */
.support-object-link{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:var(--link, #8a3d14);
  font:inherit;
  text-align:left;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  cursor:pointer;
}
.support-object-link:hover{opacity:.78}
.support-object-dialog .support-intro{
  margin:0 0 18px;
  font-size:1.02rem;
  line-height:1.55;
}
.support-object-dialog .support-text-block + .support-text-block{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #ddd;
}
.support-object-dialog .support-text-block h3{
  margin:0 0 8px;
}

/* 0.6: kies een onderwerp of blader zonder extra zoekwoord. */
.hall-types{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:850px;margin:28px auto 0}
.hall-types a{padding:7px 11px;border:1px solid var(--soft);background:var(--paper);text-decoration:none;font:14px/1.3 Arial,sans-serif}
.hall-types a:hover,.hall-types a.selected{border-color:var(--accent);background:#eadfd1}
.hall-pages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:15px;margin:25px auto 0;font:15px Arial,sans-serif}
.hall-pages a{padding:9px 13px;border:1px solid var(--line);background:var(--paper);text-decoration:none}
.hall-pages a:hover{background:#eadfd1}
.hall-types + .hall-doors{margin-top:38px}
.wall-help{text-align:center;color:var(--muted);font:14px/1.4 Arial,sans-serif;margin:-4px 0 20px}

/* Deuren in hal en studeerkamer sluiten aan bij de bruine voordeur. */
.backdoor .door,.choice .door{
  background:linear-gradient(90deg,#6d432c 0%,#84543a 20%,#71462f 50%,#84543a 80%,#65402b 100%);
  border:5px solid #4d2f20;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 3px 7px rgba(0,0,0,.12);
}
.backdoor .door::before,.backdoor .door::after,.choice .door::before,.choice .door::after{
  left:14%;right:14%;border:2px solid rgba(61,35,23,.55);
}
.backdoor .knob,.choice .knob{
  width:12px;height:12px;right:9px;top:52%;border:2px solid #735c29;
  background:#c5a55b;border-radius:50%;
}
.choice a:hover .door,.backdoor:hover .door{filter:brightness(1.08)}
@media(max-width:900px){
  .backdoor{display:block;position:relative;left:auto;top:auto;width:105px;margin:0 0 22px;text-align:center}
}