/* ==========================================================================
   DHB Zo werkt een alarm (met inbraakvideo)

   GEGENEREERD door werkmap/ontwerpen/naar-plugin/bouw_zowerkt.py uit
   werkmap/ontwerpen/zo-werkt-alarm/ontwerp-video.html. Niet met de hand wijzigen.

   Opbouw (omhulling en terugdraaien, zoals de andere ontwerpwidgets):
     1. de letters, als "DHB ..." zodat een lettertype van het thema er niet tussen komt;
     2. de variabelen van het ontwerp, licht op de omhulling (een kleurveld gaat erover);
     3. wat het ontwerp op <body> zet, plus de beginwaarden van alles wat erft;
     4. thema en kit terugdraaien voor kale elementen, en voor svg en ::placeholder;
     5. elke regel van het ontwerp met vier keer .dhbz ervoor.
   Alleen regels over klassen die in deze sectie voorkomen; animaties heten dhbz-...
   ========================================================================== */

/* 1. letters */
@font-face{font-family:"DHB Elms";src:url("../fonts/elms-sans-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"DHB Satoshi";src:url("../fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DHB Satoshi";src:url("../fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DHB Satoshi";src:url("../fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* 2. variabelen */
.dhbz{--or:#FF4500;--or2:#FF6A2B;--ink:#161616;--ink2:#1F1D1C;--beige:#F4F1EE;--lijn:#E4DED7;--zacht:#6B655F; --kop:'DHB Elms',"DHB Satoshi",system-ui,sans-serif;--tekst:"DHB Satoshi",system-ui,-apple-system,'Segoe UI',sans-serif; --groen:#22B46A;--amber:#E8A317;}

/* 3. de omhulling: wat in het ontwerp op <body> staat */
.dhbz.dhbz.dhbz{font-size:16px;line-height:normal;font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-align:left;text-indent:0;text-shadow:none;white-space:normal;font-variant:normal;overflow-wrap:normal;word-break:normal;hyphens:manual;color:var(--ink);font-family:var(--tekst);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* 4. thema en kit terugdraaien */
.dhbz.dhbz.dhbz :is(div,section,article,aside,header,footer,nav,figure,figcaption,h1,h2,h3,h4,h5,h6,p,a,span,strong,b,em,i,small,ul,ol,li,hr,img,br,button,input,label,form,video,pre){all:revert}
.dhbz.dhbz.dhbz svg{background:none;width:auto;height:auto;max-width:none;max-height:none;font-family:inherit;fill:revert;stroke:revert;stroke-width:revert;vertical-align:baseline;border:0;box-shadow:none;transform:none}
.dhbz.dhbz.dhbz ::placeholder{all:revert}

/* 5. het ontwerp */
.dhbz.dhbz.dhbz.dhbz *,.dhbz.dhbz.dhbz.dhbz *::before,.dhbz.dhbz.dhbz.dhbz *::after{box-sizing:border-box}
.dhbz.dhbz.dhbz.dhbz img{max-width:100%;display:block}
.dhbz.dhbz.dhbz.dhbz [hidden]{display:none!important}
.dhbz.dhbz.dhbz.dhbz a{color:inherit;text-decoration:none}
.dhbz.dhbz.dhbz.dhbz button{font:inherit;color:inherit}
.dhbz.dhbz.dhbz.dhbz h2,.dhbz.dhbz.dhbz.dhbz h3{margin:0;font-family:var(--kop);font-weight:700;word-spacing:-.08em}
.dhbz.dhbz.dhbz.dhbz p{margin:0}
.dhbz.dhbz.dhbz.dhbz .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dhbz.dhbz.dhbz.dhbz .ic [pathLength]{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes dhbz-teken{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes dhbz-puls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .dhbz.dhbz.dhbz.dhbz *,.dhbz.dhbz.dhbz.dhbz *::before,.dhbz.dhbz.dhbz.dhbz *::after{animation:none!important;transition:none!important}
}
.dhbz.dhbz.dhbz.dhbz .sec{position:relative;overflow:hidden;padding:104px 24px}
.dhbz.dhbz.dhbz.dhbz .sec-in{max-width:1312px;margin:0 auto;position:relative}
.dhbz.dhbz.dhbz.dhbz .licht{background:var(--beige)}
.dhbz.dhbz.dhbz.dhbz .gloed::before,.dhbz.dhbz.dhbz.dhbz .gloed::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.dhbz.dhbz.dhbz.dhbz .gloed::before{width:620px;height:620px;left:-280px;top:-320px;background:radial-gradient(closest-side,rgba(255,69,0,.34),transparent)}
.dhbz.dhbz.dhbz.dhbz .gloed::after{width:560px;height:560px;right:-240px;bottom:-320px;background:radial-gradient(closest-side,rgba(255,69,0,.24),transparent)}
.dhbz.dhbz.dhbz.dhbz .licht.gloed::before{background:radial-gradient(closest-side,rgba(255,69,0,.14),transparent)}
.dhbz.dhbz.dhbz.dhbz .licht.gloed::after{background:radial-gradient(closest-side,rgba(255,69,0,.1),transparent)}
.dhbz.dhbz.dhbz.dhbz .label{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;margin-bottom:16px}
.dhbz.dhbz.dhbz.dhbz .label i{width:8px;height:8px;border-radius:50%;background:var(--or);box-shadow:0 0 0 5px rgba(255,69,0,.16)}
.dhbz.dhbz.dhbz.dhbz .kop2{font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.025em}
.dhbz.dhbz.dhbz.dhbz .kop2 em{font-style:normal;color:var(--or)}
.dhbz.dhbz.dhbz.dhbz .intro{margin-top:18px;font-size:17px;line-height:1.65;color:var(--zacht);max-width:560px}
.dhbz.dhbz.dhbz.dhbz .kopgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end;margin-bottom:52px}
.dhbz.dhbz.dhbz.dhbz .kopgrid .intro{margin-top:0}
.dhbz.dhbz.dhbz.dhbz .knop{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 6px 0 24px;border-radius:99px;font-weight:700;font-size:15.5px;white-space:nowrap;border:0;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.dhbz.dhbz.dhbz.dhbz .knop .circ{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dhbz.dhbz.dhbz.dhbz .knop .circ .ic{width:17px;height:17px;stroke-width:2.2}
.dhbz.dhbz.dhbz.dhbz .knop--or{background:var(--or);color:#fff;box-shadow:0 12px 28px -12px rgba(255,69,0,.7)}
.dhbz.dhbz.dhbz.dhbz .knop--or .circ{background:#fff;color:var(--ink)}
.dhbz.dhbz.dhbz.dhbz .knop--or:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(255,69,0,.8)}
.dhbz.dhbz.dhbz.dhbz .knop:hover .circ{transform:rotate(45deg)}
@media (max-width:1000px){
  .dhbz.dhbz.dhbz.dhbz .kopgrid{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
}
@media (max-width:640px){
  .dhbz.dhbz.dhbz.dhbz .sec{padding:72px 16px}
  .dhbz.dhbz.dhbz.dhbz .intro{font-size:15.5px}
}
@keyframes dhbz-inSchuif{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dhbz.dhbz.dhbz.dhbz .kj{border-radius:24px;padding:26px;background:#fff;border:1px solid var(--lijn);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.dhbz.dhbz.dhbz.dhbz .kj:hover{transform:translateY(-3px);box-shadow:0 30px 50px -34px rgba(22,22,22,.4)}
.dhbz.dhbz.dhbz.dhbz .kj .bol{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:#FFF0E8;color:var(--or)}
.dhbz.dhbz.dhbz.dhbz .kj .bol .ic{width:24px;height:24px}
.dhbz.dhbz.dhbz.dhbz .kj:hover .bol [pathLength]{animation:dhbz-teken .9s cubic-bezier(.6,0,.2,1)}
.dhbz.dhbz.dhbz.dhbz .kj h3{margin-top:18px;font-size:20px;line-height:1.2}
.dhbz.dhbz.dhbz.dhbz .kj p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--zacht)}
.dhbz.dhbz.dhbz.dhbz .stat{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:99px}
.dhbz.dhbz.dhbz.dhbz .stat.goed{background:#E3F6EC;color:#14834B}
.dhbz.dhbz.dhbz.dhbz .stat.let{background:#FFF3DC;color:#A96F00}
.dhbz.dhbz.dhbz.dhbz .stat.slecht{background:#FFE5E1;color:#C42A15}
.dhbz.dhbz.dhbz.dhbz .stat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dhbz.dhbz.dhbz.dhbz .bron{margin-top:14px;font-size:12.5px;color:var(--zacht)}
@media (max-width:640px){
  .dhbz.dhbz.dhbz.dhbz .kj{padding:22px}
}
.dhbz.dhbz.dhbz.dhbz .s3-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:stretch}
.dhbz.dhbz.dhbz.dhbz .s3-foto{position:relative;border-radius:28px;overflow:hidden;min-height:560px;background:#222;box-shadow:0 50px 90px -60px rgba(22,22,22,.6)}
.dhbz.dhbz.dhbz.dhbz .s3-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.dhbz.dhbz.dhbz.dhbz .s3-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.2) 70%,rgba(0,0,0,.5));pointer-events:none}
.dhbz.dhbz.dhbz.dhbz .s3-hud{position:absolute;left:16px;top:16px;z-index:3;display:flex;gap:6px;flex-wrap:wrap}
.dhbz.dhbz.dhbz.dhbz .s3-hud span{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:11.5px;color:#fff;background:rgba(14,13,13,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 10px;border-radius:8px}
.dhbz.dhbz.dhbz.dhbz .s3-hud span i{width:7px;height:7px;border-radius:50%;background:#31D07B}
.dhbz.dhbz.dhbz.dhbz .s3-hud span.alarm i{background:#FF3B30;animation:dhbz-knip 1s steps(1) infinite}
.dhbz.dhbz.dhbz.dhbz .s3-pin{position:absolute;z-index:4;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);font-family:var(--kop);font-weight:800;font-size:15px;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);border:3px solid #fff;transition:background .25s,color .25s,transform .25s,border-color .25s;position:relative}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid #fff;opacity:0}
.dhbz.dhbz.dhbz.dhbz .s3-pin:hover .nr{transform:scale(1.1)}
.dhbz.dhbz.dhbz.dhbz .s3-pin.is-on .nr{background:var(--or);color:#fff;border-color:var(--or)}
.dhbz.dhbz.dhbz.dhbz .s3-pin.pulse .nr::before{border-color:var(--or);animation:dhbz-puls 1.3s ease-out infinite}
.dhbz.dhbz.dhbz.dhbz .s3-pin .lb{font-size:12px;font-weight:700;color:#fff;background:rgba(14,13,13,.7);padding:4px 10px;border-radius:99px;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dhbz.dhbz.dhbz.dhbz .s3-pin.boven{flex-direction:column-reverse}
.dhbz.dhbz.dhbz.dhbz .s3-flits{position:absolute;z-index:2;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,69,0,.7),transparent 65%);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.dhbz.dhbz.dhbz.dhbz .s3-flits.on{animation:dhbz-scFlits .5s steps(2) infinite}
.dhbz.dhbz.dhbz.dhbz .s3-knop{position:absolute;left:16px;bottom:16px;z-index:4}
.dhbz.dhbz.dhbz.dhbz .s3-keten{border-radius:28px;background:var(--ink);color:#fff;padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.dhbz.dhbz.dhbz.dhbz .s3-keten::before{content:"";position:absolute;width:420px;height:420px;right:-220px;top:-240px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,69,0,.42),transparent);pointer-events:none}
.dhbz.dhbz.dhbz.dhbz .s3-keten>*{position:relative}
.dhbz.dhbz.dhbz.dhbz .s3-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dhbz.dhbz.dhbz.dhbz .s3-kop h3{font-size:20px}
.dhbz.dhbz.dhbz.dhbz .s3-stappen{margin-top:18px;position:relative;display:grid;gap:0}
.dhbz.dhbz.dhbz.dhbz .s3-stappen::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:rgba(255,255,255,.1)}
.dhbz.dhbz.dhbz.dhbz .s3-voort{position:absolute;left:27px;top:28px;width:2px;height:0;background:var(--or);transition:height .5s cubic-bezier(.2,.8,.2,1)}
.dhbz.dhbz.dhbz.dhbz .s3-st{position:relative;display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:10px 0}
.dhbz.dhbz.dhbz.dhbz .s3-st .f{width:56px;height:56px;border-radius:16px;background:#1F1D1C;border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;overflow:hidden;transition:background .3s,border-color .3s,box-shadow .3s}
.dhbz.dhbz.dhbz.dhbz .s3-st .f img{width:46px;height:46px;object-fit:contain}
.dhbz.dhbz.dhbz.dhbz .s3-st .f .ic{width:26px;height:26px;color:rgba(255,255,255,.7)}
.dhbz.dhbz.dhbz.dhbz .s3-st b{display:block;font-size:15px;color:rgba(255,255,255,.55);transition:color .3s}
.dhbz.dhbz.dhbz.dhbz .s3-st small{display:block;font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.4;transition:color .3s}
.dhbz.dhbz.dhbz.dhbz .s3-st em{position:absolute;right:0;top:14px;font-style:normal;font-family:ui-monospace,Consolas,monospace;font-size:11px;color:rgba(255,255,255,.35);transition:color .3s}
.dhbz.dhbz.dhbz.dhbz .s3-st.on .f{background:#fff;border-color:#fff;box-shadow:0 0 0 4px rgba(255,69,0,.25)}
.dhbz.dhbz.dhbz.dhbz .s3-st.on .f .ic{color:var(--or)}
.dhbz.dhbz.dhbz.dhbz .s3-st.on b{color:#fff}
.dhbz.dhbz.dhbz.dhbz .s3-st.on small{color:rgba(255,255,255,.7)}
.dhbz.dhbz.dhbz.dhbz .s3-st.on em{color:#FF8A57}
.dhbz.dhbz.dhbz.dhbz .s3-st.uit{opacity:.35}
.dhbz.dhbz.dhbz.dhbz .s3-sw{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dhbz.dhbz.dhbz.dhbz .s3-sw .sc-sw{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dhbz.dhbz.dhbz.dhbz .s3-sw .sc-sw i{background:rgba(255,255,255,.2)}
.dhbz.dhbz.dhbz.dhbz .s3-sw .sc-sw[aria-pressed="true"] i{background:var(--or)}
.dhbz.dhbz.dhbz.dhbz .s3-sw span.t{font-size:12.5px;color:rgba(255,255,255,.5)}
.dhbz.dhbz.dhbz.dhbz .s3-info{margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.dhbz.dhbz.dhbz.dhbz .s3-info .kj{padding:20px}
.dhbz.dhbz.dhbz.dhbz .s3-info .kj h3{font-size:17px;margin-top:12px}
.dhbz.dhbz.dhbz.dhbz .s3-info .kj p{font-size:13.5px}
.dhbz.dhbz.dhbz.dhbz .s3-info .kj .bol{width:42px;height:42px;border-radius:12px}
@media (max-width:1000px){
  .dhbz.dhbz.dhbz.dhbz .s3-grid{grid-template-columns:1fr}
  .dhbz.dhbz.dhbz.dhbz .s3-foto{min-height:420px}
  .dhbz.dhbz.dhbz.dhbz .s3-info{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dhbz.dhbz.dhbz.dhbz .s3-foto{min-height:360px;border-radius:22px}
  .dhbz.dhbz.dhbz.dhbz .s3-pin .lb{display:none}
  .dhbz.dhbz.dhbz.dhbz .s3-pin .nr{width:32px;height:32px;font-size:13px}
  .dhbz.dhbz.dhbz.dhbz .s3-keten{padding:20px 16px}
  .dhbz.dhbz.dhbz.dhbz .s3-st em{display:none}
  .dhbz.dhbz.dhbz.dhbz .s3-knop .knop{height:46px;font-size:14px;padding-left:18px}
  .dhbz.dhbz.dhbz.dhbz .s3-knop .knop .circ{width:36px;height:36px}
}
@media (max-width:640px){
  .dhbz.dhbz.dhbz.dhbz .s3-knop{left:50%;transform:translateX(-50%)}
  .dhbz.dhbz.dhbz.dhbz .s3-pin[data-n="glas"]{top:74%!important}
}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr{width:52px;height:52px;overflow:visible}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr img{width:40px;height:40px;object-fit:contain;transition:filter .25s}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr i{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-family:var(--kop);font-weight:800;font-size:11px;display:grid;place-items:center;border:2px solid #fff;transition:background .25s}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr.hub{width:58px;height:58px}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr.hub img{width:46px;height:46px}
.dhbz.dhbz.dhbz.dhbz .s3-pin .nr.hub i{background:var(--or)}
.dhbz.dhbz.dhbz.dhbz .s3-pin.is-on .nr{background:#fff;border-color:var(--or)}
.dhbz.dhbz.dhbz.dhbz .s3-pin.is-on .nr i{background:var(--or)}
.dhbz.dhbz.dhbz.dhbz .s3-pin.is-on .nr img{filter:none}
@media (max-width:640px){
  .dhbz.dhbz.dhbz.dhbz .s3-pin .nr{width:40px;height:40px}
  .dhbz.dhbz.dhbz.dhbz .s3-pin .nr img{width:30px;height:30px}
  .dhbz.dhbz.dhbz.dhbz .s3-pin .nr.hub{width:44px;height:44px}
  .dhbz.dhbz.dhbz.dhbz .s3-pin .nr.hub img{width:34px;height:34px}
  .dhbz.dhbz.dhbz.dhbz .s3-pin .nr i{width:17px;height:17px;font-size:10px}
}
@keyframes dhbz-t2schud{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes dhbz-k5Pop{0%{transform:translateY(-14px) scale(.96);opacity:.4}100%{transform:none;opacity:1}}
.dhbz.dhbz.dhbz.dhbz .sc-sw{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--lijn);background:#fff;border-radius:99px;padding:6px 14px 6px 6px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--ink)}
.dhbz.dhbz.dhbz.dhbz .sc-sw i{position:relative;width:40px;height:24px;border-radius:24px;background:#DDD6CE;transition:background .3s}
.dhbz.dhbz.dhbz.dhbz .sc-sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .3s}
.dhbz.dhbz.dhbz.dhbz .sc-sw[aria-pressed="true"] i{background:var(--or)}
.dhbz.dhbz.dhbz.dhbz .sc-sw[aria-pressed="true"] i::after{left:19px}
@keyframes dhbz-scStroom{to{stroke-dashoffset:-14}}
@keyframes dhbz-scRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes dhbz-scFlits{50%{opacity:.9}}
@media (max-width:640px){
  .dhbz.dhbz.dhbz.dhbz .sc-sw{flex:1}
}
.dhbz.dhbz.dhbz.dhbz .s3-film{position:absolute;inset:0;z-index:6;background:#000;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.dhbz.dhbz.dhbz.dhbz .s3-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dhbz.dhbz.dhbz.dhbz .s3-foto.film .s3-film{opacity:1;visibility:visible;transition:opacity .45s}
.dhbz.dhbz.dhbz.dhbz .s3-foto.film .s3-pin,.dhbz.dhbz.dhbz.dhbz .s3-foto.film .s3-knop,.dhbz.dhbz.dhbz.dhbz .s3-foto.film .s3-hud{opacity:0;pointer-events:none}
.dhbz.dhbz.dhbz.dhbz .s3-pin,.dhbz.dhbz.dhbz.dhbz .s3-knop,.dhbz.dhbz.dhbz.dhbz .s3-hud{transition:opacity .35s}
.dhbz.dhbz.dhbz.dhbz .s3-filmbalk{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.15)}
.dhbz.dhbz.dhbz.dhbz .s3-filmbalk i{display:block;height:100%;width:0;background:var(--or)}
.dhbz.dhbz.dhbz.dhbz .s3-dicht{position:absolute;left:14px;bottom:18px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(14,13,13,.6);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dhbz.dhbz.dhbz.dhbz .s3-dicht:hover{background:rgba(14,13,13,.85)}
.dhbz.dhbz.dhbz.dhbz .s3-dicht .ic{width:18px;height:18px}