/* Dashboard-band (blok comforest/dashboard).
   Staat los van comforest.css: dat bestand wordt opnieuw opgebouwd door
   scripts/bouw-css.js en dan zouden deze regels verdwijnen. Wordt alleen
   geladen op pagina's waar het blok staat (zie render.php). */

.dbs{background:var(--ink);color:#F4F3F6;padding:92px 0;position:relative;overflow:hidden}
.dbs::before{content:'';position:absolute;right:-12%;top:-30%;width:62%;height:160%;background:radial-gradient(closest-side,rgba(219,223,107,.16),transparent);pointer-events:none}
.dbs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;position:relative}
.dbs .klabel{color:var(--lime)}
.dbs h2{color:#fff;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1;margin-bottom:18px}
.dbs-tekst p{color:#c9c6d2;font-size:17px;max-width:46ch}
.dbs-stats{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:14px}
.dbs-stats li{border-left:3px solid var(--lime);padding:4px 0 4px 16px}
.dbs-stats b{display:block;font-family:var(--fh);font-size:28px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.dbs-stats span{color:#c9c6d2;font-size:15px}
.dbs-scene{position:relative;perspective:1800px;margin:0}
.dbs-venster{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);transform:rotateY(-10deg) rotateX(4deg) scale(.97);transform-origin:left center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.dbs-scene:hover .dbs-venster,.dbs-scene:focus-within .dbs-venster{transform:none}
.dbs-balk{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#ECEBEF;border-bottom:1px solid rgba(42,39,53,.10)}
.dbs-balk i{width:11px;height:11px;border-radius:50%;background:#D3D1D9}
.dbs-balk i:first-child{background:#E9877C}.dbs-balk i:nth-child(2){background:#E8C66A}.dbs-balk i:nth-child(3){background:#9DC48B}
.dbs-balk span{margin-left:12px;font-size:12px;color:#5F6B7A;background:#fff;border-radius:7px;padding:3px 12px}
.dbs-venster img{display:block;width:100%;height:auto}
.dbs-badge{position:absolute;left:-30px;bottom:34px;background:var(--lime);color:var(--ink);border-radius:18px;padding:16px 20px;max-width:230px;box-shadow:0 16px 40px rgba(0,0,0,.35);animation:dbs-zweef 5s ease-in-out infinite}
.dbs-badge b{display:block;font-family:var(--fh);font-size:34px;line-height:1;letter-spacing:-.02em}
.dbs-badge span{display:block;font-size:13.5px;line-height:1.35;margin-top:6px}
.dbs-scene figcaption{margin-top:16px;font-size:13px;color:#a9a6b4;text-align:right}
@keyframes dbs-zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media (max-width:900px){
  .dbs{padding:68px 0}
  .dbs-grid{grid-template-columns:1fr;gap:44px}
  .dbs-venster{transform:none}
  .dbs-badge{left:12px;bottom:auto;top:-22px;padding:12px 16px}
  .dbs-badge b{font-size:26px}
  .dbs-scene figcaption{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .dbs-venster{transition:none}
  .dbs-badge{animation:none}
}