/* Wie ziet betaalt · De B&B — vormgeving 2026-11. Laatste laag: alleen uiterlijk, geen gedrag. */
.bnb-page{--b-glass:rgba(12,18,14,.78);--b-glass2:rgba(16,24,19,.92);--b-line:rgba(224,190,128,.22);--b-line2:rgba(224,190,128,.45);--b-gold:#D9B77E;--b-gold2:#E8CB97;--b-text:#F1E8D8;--b-soft:#C9C2B4;--b-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace}

/* Koppen die de app zelf focust (voor schermlezers) krijgen geen goudkader meer */
.bnb-page h1[tabindex]:focus,.bnb-page h2[tabindex]:focus,.bnb-page h1:focus:not(:focus-visible),.bnb-page h2:focus:not(:focus-visible),.bnb-page dialog h2:focus{outline:none!important;box-shadow:none!important}

/* Buitenkant: rustiger kop, groter huis, uitnodiging als hotelkaartje */
.bnb-heading .eyebrow{text-align:center;justify-content:center;margin:18px 0 10px!important;font-family:var(--b-mono)!important;letter-spacing:.16em}
.bnb-heading h1{font-size:clamp(56px,8vw,96px)!important}
.bnb-heading>p:last-child{margin:14px 0 22px!important}
.bnb-tools{gap:8px!important;margin-bottom:36px!important}
.bnb-tools button{border:1px solid var(--b-line)!important;border-radius:999px!important;padding:8px 16px!important;min-height:40px;font-size:13px!important;color:var(--b-soft)!important;background:rgba(255,255,255,.02)!important;transition:border-color .15s,color .15s}
.bnb-tools button:hover{border-color:var(--b-line2)!important;color:var(--b-gold2)!important}
.bnb-tools button[aria-pressed="true"]{border-color:var(--b-gold)!important;color:var(--b-gold2)!important;background:rgba(217,183,126,.08)!important}
@media (min-width:861px){
 .bnb-outside{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;gap:72px!important;align-items:center;max-width:1120px;margin:0 auto}
 .bnb-house{max-width:520px!important;margin:0 0 0 auto!important}
}
.bnb-house{border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(224,190,128,.18)}
.bnb-house:after{content:"";position:absolute;inset:10px;border:1px solid rgba(240,214,170,.22);pointer-events:none;border-radius:2px}
.bnb-house video{filter:saturate(.95) contrast(1.03)}
.bnb-door span{border-radius:999px!important;padding:10px 18px!important;background:rgba(14,20,16,.88)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-color:var(--b-line2)!important;font-size:14px!important}
.bnb-invitation{border-left:1px solid var(--b-line);padding:8px 0 8px 40px!important}
.bnb-invitation h2{font-size:clamp(40px,4.6vw,60px)!important;line-height:1.05!important;margin:14px 0 22px!important}
.bnb-invitation>p:not(.eyebrow){font-size:17px;line-height:1.75!important;max-width:460px}
.bnb-invitation .button,#enter-text{border-radius:6px!important;padding:14px 26px!important;font-weight:600}
@media (max-width:860px){.bnb-invitation{border-left:0;padding:0!important}}

/* 2D-kamers */
.bnb-room-heading h2{margin:8px 0 10px!important}
.bnb-room{border-radius:6px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(224,190,128,.14)}
.bnb-hotspot{box-shadow:0 0 0 6px rgba(224,186,119,.16),0 4px 14px rgba(0,0,0,.5)!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.bnb-places summary,.bnb-tour-overview summary,.bnb-tour-help summary{list-style:none}
.bnb-places summary::-webkit-details-marker,.bnb-tour-overview summary::-webkit-details-marker,.bnb-tour-help summary::-webkit-details-marker{display:none}
.bnb-places summary:before,#tour-dialog .bnb-tour-overview summary:before,#tour-dialog .bnb-tour-help summary:before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 2px 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.bnb-places[open] summary:before,#tour-dialog .bnb-tour-overview[open] summary:before,#tour-dialog .bnb-tour-help[open] summary:before{transform:rotate(45deg)}

/* 360°-rondleiding: glazen panelen, duidelijke kamerkeuze */
#tour-dialog{background:#0B100D!important}
#tour-dialog .bnb-tour-header h2{font-weight:400;background:var(--b-glass)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--b-line);border-radius:8px!important;padding:8px 14px!important;color:var(--b-text)}
#tour-dialog .bnb-tour-header button{background:var(--b-glass)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--b-line)!important;border-radius:8px!important;color:var(--b-text)!important}
#tour-dialog .bnb-tour-overview{background:var(--b-glass2)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--b-line)!important;border-radius:10px!important;box-shadow:0 20px 50px rgba(0,0,0,.5)}
#tour-dialog .bnb-tour-overview summary{color:var(--b-gold2)!important;font-weight:500}
#tour-dialog .bnb-tour-overview[open]{padding:0 18px 18px!important}
#tour-dialog .bnb-tour-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;margin:2px 0 14px!important;padding-bottom:14px;border-bottom:1px solid var(--b-line)}
#tour-dialog .bnb-tour-nav button{border-radius:6px!important;background:rgba(255,255,255,.03)!important;border:1px solid var(--b-line)!important;font-size:13.5px!important;padding:8px 6px!important;color:var(--b-soft)!important}
#tour-dialog .bnb-tour-nav button:hover{border-color:var(--b-line2)!important;color:var(--b-text)!important}
#tour-dialog .bnb-tour-nav [aria-pressed="true"]{background:var(--b-gold)!important;border-color:var(--b-gold)!important;color:#15110A!important;font-weight:600}
#tour-dialog .bnb-tour-actions{display:flex!important;flex-direction:column;gap:0!important;margin-top:4px!important}
#tour-dialog .bnb-tour-actions button{flex:none!important;display:flex;justify-content:space-between;align-items:center;text-align:left;background:transparent!important;border:0!important;border-bottom:1px solid rgba(224,190,128,.12)!important;border-radius:0!important;padding:11px 2px!important;font-size:15px!important;color:var(--b-text)!important}
#tour-dialog .bnb-tour-actions button:after{content:"\2192";color:var(--b-gold);margin-left:12px}
#tour-dialog .bnb-tour-actions button:hover{color:var(--b-gold2)!important}
#tour-dialog .bnb-tour-progress{font:500 12px/1.5 var(--b-mono)!important;letter-spacing:.06em;color:#A9B0A7!important;margin:14px 0 4px!important}
#tour-dialog .bnb-tour-progress #tour-discoveries{color:var(--b-gold2)}
#tour-dialog .bnb-tour-controls{background:var(--b-glass)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--b-line);border-radius:999px!important;padding:5px!important;gap:2px!important;width:min(300px,calc(100% - 24px))!important}
#tour-dialog .bnb-tour-controls button{background:transparent!important;border:0!important;border-radius:999px!important;color:var(--b-text)!important;font-size:17px!important}
#tour-dialog .bnb-tour-controls button:hover{background:rgba(217,183,126,.14)!important}
#tour-dialog .bnb-tour-help{background:var(--b-glass)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--b-line)!important;border-radius:999px!important}
#tour-dialog .bnb-tour-help[open]{border-radius:10px!important}
#tour-dialog .bnb-tour-help summary{color:var(--b-soft)!important;font-size:14px!important}

/* Markeringen: herkenbaar en zacht ademend */
.bnb-marker-icon{width:26px!important;height:26px!important;background:rgba(14,20,16,.82)!important;border:1.5px solid #EED4A4!important;box-shadow:0 0 0 5px rgba(224,186,119,.18),0 3px 10px rgba(0,0,0,.6)!important}
.bnb-marker-icon:has(svg){width:32px!important;height:32px!important}
@media (prefers-reduced-motion:no-preference){.bnb-marker-icon{animation:bnb-breathe 2.8s ease-in-out infinite}}
@keyframes bnb-breathe{0%,100%{box-shadow:0 0 0 4px rgba(224,186,119,.14),0 3px 10px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 10px rgba(224,186,119,.05),0 3px 10px rgba(0,0,0,.6)}}
#tour-dialog .bnb-tour-pin:hover .bnb-marker-icon,.bnb-quiet-marker:hover .bnb-marker-icon{background:#8A6A3A!important}
#tour-dialog .bnb-tour-pin.bnb-present-door{border-radius:999px!important;background:var(--b-glass)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Verhalen lezen als een boek */
.bnb-page dialog#story-dialog{width:min(720px,calc(100% - 24px))!important;max-height:92dvh;background:#121813!important;border:1px solid var(--b-line)!important;border-radius:10px!important;box-shadow:0 40px 120px rgba(0,0,0,.7)!important;padding:8px 48px 40px!important;box-sizing:border-box}
.bnb-page dialog#story-dialog::backdrop{background:rgba(4,7,5,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#story-dialog .bnb-close{background:#121813!important;font-size:14px!important}
#story-dialog .eyebrow{font-family:var(--b-mono)!important;letter-spacing:.14em}
#story-dialog h2{font-size:clamp(32px,4.2vw,46px)!important;line-height:1.08!important;margin:10px 0 20px!important}
#story-dialog p:not(.eyebrow){font-family:var(--serif,"Iowan Old Style",Georgia,serif);font-size:19px;line-height:1.75;color:#E6DECF}
#story-dialog .button{border-radius:6px!important}
@media (max-width:600px){.bnb-page dialog#story-dialog{padding:4px 22px 28px!important}#story-dialog p:not(.eyebrow){font-size:18px}#tour-dialog .bnb-tour-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
#story-dialog .eyebrow{font:500 11.5px/1.4 var(--b-mono)!important;letter-spacing:.14em!important;color:var(--b-gold)!important}