/* Hekkelman Grafische Producties — kleuren en accenten bovenop style.css */
:root{
  --nacht:#15161A; --nacht-2:#1F2126; --nacht-3:#2A2D34;
  --signaal:#E2231A; --signaal-d:#B91A12; --signaal-l:#FBE2DF;
  --zand:#F6F4EF; --zand-2:#ECE9E1; --wit:#FFFFFF;
  --lucht:#E3E8EF; --lucht-d:#3A5A8C;
  --mos:#1E6B54; --mos-l:#DDF2E7;
  --tekst:#1E2025; --gedempt:#5F6470; --lijn:#E1DDD3;
}
.btn--signaal{color:#fff}
.btn--signaal:hover{background:var(--signaal-d);color:#fff}
.prijs .tag,.ba__label--na{color:#fff}
.ribbon{color:#fff}.ribbon h2{color:#fff}.ribbon p{color:rgba(255,255,255,.85)}
.ribbon .btn{background:#fff;color:var(--nacht)}
.ribbon .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sec--signaal{color:#fff}
.hdr.stuck{background:rgba(246,244,239,.88)}
.brand img{height:54px}
.ftr__brand img{height:44px}
/* productillustraties (hero) */
.stack{position:relative;aspect-ratio:1/0.9;perspective:1400px}
.prod{position:absolute;border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);overflow:hidden;
  font-family:var(--display);transition:transform .6s var(--ease)}
.prod--flyer{width:44%;aspect-ratio:1/1.41;left:2%;top:8%;background:#fff;transform:rotate(-8deg);padding:7% 7%;border:1px solid var(--lijn)}
.prod--flyer b{display:block;font-size:clamp(1rem,2.4vw,1.7rem);line-height:1.05;color:var(--nacht);letter-spacing:-.02em}
.prod--flyer i{display:block;height:34%;background:linear-gradient(135deg,var(--signaal),#8f1109);border-radius:4px;margin:8% 0}
.prod--flyer span{display:block;height:5px;background:var(--zand-2);border-radius:3px;margin-top:6px;width:80%}
.prod--flyer span+span{width:60%}
.prod--doek{width:70%;aspect-ratio:3/1;right:0;top:2%;background:var(--signaal);color:#fff;display:grid;place-items:center;
  font-size:clamp(1.2rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;transform:rotate(3deg);border-radius:4px}
.prod--doek::before,.prod--doek::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;top:8px;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}
.prod--doek::before{left:8px}.prod--doek::after{right:8px}
.prod--bord{width:40%;aspect-ratio:1/1.35;right:6%;bottom:0;background:#fff;border:6px solid var(--nacht);border-radius:14px 14px 4px 4px;
  transform:rotate(-3deg);padding:8% 6%;display:flex;flex-direction:column;gap:6%}
.prod--bord b{font-size:clamp(.9rem,2vw,1.4rem);color:var(--nacht);line-height:1;letter-spacing:-.02em}
.prod--bord em{font-style:normal;font-size:clamp(1.6rem,4vw,3rem);color:var(--signaal);font-weight:800;line-height:1;letter-spacing:-.04em}
.prod--bord span{display:block;height:6px;background:var(--zand-2);border-radius:3px;width:70%}
.stack:hover .prod--flyer{transform:rotate(-5deg) translateY(-6px)}
.stack:hover .prod--doek{transform:rotate(1deg) translateY(-6px)}
.stack:hover .prod--bord{transform:rotate(-1deg) translateY(-6px)}
/* productlijst */
.prodlijst{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.prodlijst span{background:#fff;border:1px solid var(--lijn);border-radius:var(--r-sm);padding:.75rem 1rem;font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.prodlijst span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--signaal);flex:none}
@media(max-width:900px){.prodlijst{grid-template-columns:repeat(2,1fr)}}
/* specs-tabel */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.spec{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:1.6rem}
.spec b{display:block;font-family:var(--display);font-size:1.9rem;letter-spacing:-.03em;color:var(--signaal);line-height:1}
.spec span{display:block;color:var(--gedempt);margin-top:.4rem;font-size:.95rem}
@media(max-width:800px){.specs{grid-template-columns:1fr 1fr}}