/* Fælles hjælpefil for WEBBYRIA-demoerne. Indeholder kun demo-bjælken, lysboks og diskret indglidning.
   Selve designet ligger i hver prototypes egen fil. */
.wbp{position:relative;z-index:200;display:flex;align-items:center;justify-content:center;gap:.6rem 1.2rem;flex-wrap:wrap;padding:.5rem 1rem;background:#101E35;color:#cbd5e6;font:500 12.5px/1.4 'Inter',system-ui,sans-serif;text-align:center}
.wbp b{color:#F5B942;font-weight:600}
.wbp a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.wbp a:hover{border-color:#F5B942}
.js-rv [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js-rv [data-rv].in{opacity:1;transform:none}
.js-rv [data-rv="2"]{transition-delay:.12s}.js-rv [data-rv="3"]{transition-delay:.24s}
.lbx{border:0;padding:0;margin:auto;max-width:min(1100px,94vw);max-height:92vh;background:#0c0c0c;color:#fff;overflow:hidden;border-radius:6px}
.lbx::backdrop{background:rgba(8,8,8,.82)}
.lbx figure{margin:0;display:flex;flex-direction:column}
.lbx img{display:block;max-width:100%;max-height:78vh;object-fit:contain;margin:auto;background:#000}
.lbx figcaption{padding:.9rem 1.2rem;font:400 14px/1.5 system-ui,sans-serif;opacity:.85}
.lbx button{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;cursor:pointer;font:600 20px/1 system-ui}
.lbx .x{top:10px;right:10px}.lbx .p{left:10px;top:calc(50% - 40px)}.lbx .n{right:10px;top:calc(50% - 40px)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.js-rv [data-rv]{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

html.shot .wbp{display:none}html.shot *{transition:none!important;animation-play-state:paused!important}

/* Tilgaengelighed: tydelig tastaturfokus i alle farvetemaer og klikomraade paa udtalelsesprikker */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid currentColor!important;outline-offset:3px!important}
[data-dots] button{position:relative}
[data-dots] button::after{content:"";position:absolute;left:-2px;right:-2px;top:-12px;bottom:-12px}