/* Branche-draai Aarts Bouw & Renovatie: dakscan en dakweer.
   Los van de template (stijl.css blijft ongemoeid). Bron: ~/Sites/aarts-bouw-renovatie-werk/draai.py */

/* ===== DAKSCAN: van nok tot goot ===== */
.ds-sectie{background:#0f0f0f;color:var(--wit);position:relative;overflow:hidden}
.ds-sectie::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 30% 40%,rgba(var(--accent-rgb),.14),transparent 70%)}
.ds-sectie .container{position:relative}
.ds-sectie h2{color:var(--wit)}
.ds-sectie .kop-blok p{color:rgba(255,255,255,.78)}

.ds-raster{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.ds-huis{position:relative;text-align:center}
.ds-tekening{width:100%;height:auto;display:block;overflow:visible}
.ds-hint{display:none;margin-top:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.ds-punt{cursor:pointer;outline:none}
.ds-punt .ds-stip{fill:var(--accent);stroke:var(--wit);stroke-width:3;transition:fill .4s var(--ease),transform .4s var(--ease)}
.ds-punt text{fill:var(--wit);font-size:17px;font-weight:700;text-anchor:middle;pointer-events:none;font-family:inherit}
.ds-punt .ds-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:.0;transform-box:fill-box;transform-origin:center}
.ds-punt:hover .ds-stip,.ds-punt:focus-visible .ds-stip{transform:scale(1.12)}
.ds-punt.actief .ds-stip{fill:var(--wit);stroke:var(--accent)}
.ds-punt.actief text{fill:var(--accent)}
.ds-punt:focus-visible .ds-ring{opacity:1}
@keyframes ds-puls{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.ds-punt:not(.actief) .ds-ring{animation:ds-puls 2.4s var(--ease) infinite}
.ds-punt:nth-of-type(2n) .ds-ring{animation-delay:1.2s}

@keyframes ds-val{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(96px);opacity:0}}
.ds-drup{animation:ds-val 2.2s cubic-bezier(.55,0,.8,.4) infinite}
.ds-drup2{animation-delay:1.1s}

.ds-paneel{background:var(--wit);color:var(--ink);border-radius:var(--r-kaart);overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);min-height:100%}
.ds-info{text-align:center;animation:ds-in .6s var(--ease) both}
.ds-info[hidden]{display:none}
@keyframes ds-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ds-foto{position:relative;aspect-ratio:3/2}
.ds-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ds-nr{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:var(--wit);font-weight:700;display:grid;place-items:center;border:3px solid var(--wit);z-index:2}
.ds-tekst{padding:34px 26px 28px}
.ds-tekst h3{color:var(--ink);font-size:22px}
.ds-tekst p{margin-top:10px;color:var(--tekst)}
.ds-vink{width:fit-content;margin:16px auto 0;text-align:left;list-style:none;padding:0;display:grid;gap:8px}
.ds-vink li{display:flex;align-items:flex-start;gap:10px;color:var(--ink)}
.ds-vink svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--groen-vink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ds-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.ds-knoppen .knop{font-size:16px}
.ds-paneel .ds-bel{border-color:var(--ink);color:var(--ink)}
.ds-paneel .ds-bel:hover{background:var(--tint)}

.ds-chips{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:10px;margin-top:clamp(28px,4vw,40px)}
.ds-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:999px;
  background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--wit);font:inherit;font-size:15px;cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.ds-chip span{width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:700}
.ds-chip:hover{border-color:var(--wit)}
.ds-chip.actief{background:var(--wit);color:var(--ink);border-color:var(--wit)}

/* ===== DAKWEER SITTARD ===== */
.dw-sectie{background:var(--bg)}
.dw-kaart{max-width:960px;margin-inline:auto;background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
  padding:clamp(22px,3.5vw,40px);text-align:center}
.dw-advies{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:640px;margin-inline:auto}
.dw-icoon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--tint);transition:background .5s var(--ease)}
.dw-icoon svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dw-kop{font-size:22px;color:var(--ink)}
.dw-uitleg{margin-top:6px;color:var(--tekst)}
.dw-kaart[data-status="wind"] .dw-icoon,.dw-kaart[data-status="storm"] .dw-icoon{background:var(--accent)}
.dw-kaart[data-status="wind"] .dw-icoon svg,.dw-kaart[data-status="storm"] .dw-icoon svg{stroke:var(--wit)}

.dw-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.dw-tegel{background:var(--bg);border-radius:16px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.dw-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst)}
.dw-tegel b{font-size:clamp(30px,4vw,40px);line-height:1.15;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.dw-eenheid{font-size:14px;color:var(--tekst)}

.dw-grafiek{margin:26px 0 0}
.dw-grafiek figcaption{font-size:14px;color:var(--ink);font-weight:600;margin-bottom:10px}
.dw-drempel-uitleg{display:block;font-weight:400;color:var(--tekst);font-size:13px;margin-top:2px}
.dw-plot{position:relative}
.dw-svg{width:100%;height:150px;display:block}
.dw-svg .dw-staaf{fill:#cfc6c6}
.dw-svg .dw-staaf.hoog{fill:var(--accent)}
.dw-svg .dw-staaf.aan{fill:var(--ink)}
.dw-svg .dw-lijn{stroke:rgba(0,0,0,.35);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.dw-svg .dw-basis{stroke:rgba(0,0,0,.25);stroke-width:1;vector-effect:non-scaling-stroke}
.dw-drempel{position:absolute;right:0;transform:translateY(-120%);font-size:11px;color:var(--tekst);background:var(--wit);padding:0 4px}
.dw-as{display:flex;justify-content:space-between;font-size:12px;color:var(--tekst);margin-top:6px}
.dw-tip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--ink);color:var(--wit);font-size:13px;
  padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none}
.dw-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.dw-bron{margin-top:14px;font-size:12px;color:var(--tekst)}

@media(max-width:900px){
  .ds-raster{grid-template-columns:1fr}
  .ds-hint{display:block}
  .ds-paneel{max-width:560px;margin-inline:auto;width:100%}
}
@media(max-width:640px){
  .ds-chips{grid-template-columns:1fr 1fr;gap:8px}
  .ds-chip{font-size:13.5px;padding:7px 12px 7px 7px;text-align:left}
  .dw-tegels{grid-template-columns:1fr}
  .dw-tegel{flex-direction:row;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px}
  .dw-label{width:100%}
  .dw-as span:nth-child(2n){visibility:hidden}
  .ds-knoppen .knop,.dw-knoppen .knop{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .ds-punt .ds-ring,.ds-drup,.ds-info{animation:none!important}
}
@media print{.ds-chips,.dw-grafiek,.dw-knoppen{display:none}}